From dd73d775de12938e023a40b1e5919a3b1a6b155d Mon Sep 17 00:00:00 2001 From: jeewonMoon Date: Wed, 17 Jul 2024 23:07:28 +0900 Subject: [PATCH 1/3] =?UTF-8?q?design:=20neutral=20=EC=83=89=EC=83=81=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - neutral4: #777을 추가했습니다. - 기존의 neutral4와 neutral5는 neutral5, 6로 순번이 밀렸습니다. - 이에 따른 수정 사항들을 수정했습니다. --- src/components/LoginForm/index.tsx | 2 +- src/components/Menubar/Menu.tsx | 4 ++-- src/styles/theme/Theme.ts | 5 +++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/LoginForm/index.tsx b/src/components/LoginForm/index.tsx index 94e64ca..a0b5336 100644 --- a/src/components/LoginForm/index.tsx +++ b/src/components/LoginForm/index.tsx @@ -57,7 +57,7 @@ const CheckboxWrap = styled.div` const FindWrap = styled.div` ${props => props.theme.texts.tableTitle}; - color: #777; + color: ${props => props.theme.colors.neutral4}; float: inline-end; margin-bottom: 2.5rem; `; diff --git a/src/components/Menubar/Menu.tsx b/src/components/Menubar/Menu.tsx index f5cdfdb..93002d0 100644 --- a/src/components/Menubar/Menu.tsx +++ b/src/components/Menubar/Menu.tsx @@ -56,7 +56,7 @@ const MenuTitleBox = styled.div` align-items: center; justify-content: space-between; padding: 0 15px; - border-bottom: 1px solid ${props => props.theme.colors.neutral4}; + border-bottom: 1px solid ${props => props.theme.colors.neutral5}; `; const MenuTitleWrap = styled.div` ${props => props.theme.texts.menuTitle}; @@ -69,7 +69,7 @@ const MenuSubtitleBox = styled(MenuTitleBox)` `; const DetailBox = styled.div` - background-color: ${props => props.theme.colors.neutral5}; + background-color: ${props => props.theme.colors.neutral6}; display: flex; flex-direction: column; align-items: center; diff --git a/src/styles/theme/Theme.ts b/src/styles/theme/Theme.ts index 062f09e..10a72d4 100644 --- a/src/styles/theme/Theme.ts +++ b/src/styles/theme/Theme.ts @@ -6,8 +6,9 @@ const colors = { neutral1: '#222', neutral2: '#333', neutral3: '#444', - neutral4: '#E8E8E8', - neutral5: '#F7F7F7', + neutral4: '#777', + neutral5: '#E8E8E8', + neutral6: '#F7F7F7', blue: '#A9D0F5', black: '#000', white: '#FFF', From 6ea210824eb5a4e86e6f89b158b12a2166dfaf88 Mon Sep 17 00:00:00 2001 From: jeewonMoon Date: Thu, 18 Jul 2024 01:36:25 +0900 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=ED=95=99=EB=B2=88=20input=20?= =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 학번 칸에 0이 기본적으로 들어가 있는 버그를 수정했습니다. - input 디자인도 수정했습니다. --- src/components/LoginForm/FormInput.tsx | 2 +- src/components/LoginForm/index.tsx | 4 ++-- src/styles/GlobalStyle.tsx | 2 ++ 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/LoginForm/FormInput.tsx b/src/components/LoginForm/FormInput.tsx index 16977d3..a05cdc0 100644 --- a/src/components/LoginForm/FormInput.tsx +++ b/src/components/LoginForm/FormInput.tsx @@ -2,7 +2,7 @@ import styled from 'styled-components'; import {setType} from '.'; interface InputProps { - value: string | number; + value: string | number | undefined; setValue: React.Dispatch>; type: string; } diff --git a/src/components/LoginForm/index.tsx b/src/components/LoginForm/index.tsx index a0b5336..8ce83f1 100644 --- a/src/components/LoginForm/index.tsx +++ b/src/components/LoginForm/index.tsx @@ -2,10 +2,10 @@ import styled from 'styled-components'; import FormInput from './FormInput'; import {useState} from 'react'; -export type setType = string | number; +export type setType = string | number | undefined; function LoginForm() { - const [id, setId] = useState(0); + const [id, setId] = useState(undefined); const [name, setName] = useState(''); return ( diff --git a/src/styles/GlobalStyle.tsx b/src/styles/GlobalStyle.tsx index e37b293..1bef676 100644 --- a/src/styles/GlobalStyle.tsx +++ b/src/styles/GlobalStyle.tsx @@ -26,6 +26,8 @@ const GlobalStyle = createGlobalStyle` } input { border-radius: 2px; + outline: none; + border: none; } button { cursor: pointer; From f11e74959c3450949355b83fecbf08db2ea730c3 Mon Sep 17 00:00:00 2001 From: jeewonMoon Date: Thu, 18 Jul 2024 01:39:48 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=EC=83=81=EB=8B=A8=EB=B0=94=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 필요한 이미지 파일들을 추가했습니다. - 로그인 유효시간 타이머 기능을 추가했습니다. 현재는 다른 처리 없이 로그인 화면으로 이동시키고 있습니다. - 로그아웃 버튼도 동일하게 로그인 화면으로 이동하도록 했습니다. --- src/assets/img/btn_main_top_left.svg | 14 ++++ src/assets/img/btn_main_top_right.png | Bin 985 -> 0 bytes src/assets/img/btn_main_top_right.svg | 14 ++++ src/assets/img/input_dropdown.png | Bin 0 -> 247 bytes src/assets/img/red_edge.png | Bin 0 -> 957 bytes src/assets/img/top_menu_down.png | Bin 0 -> 952 bytes src/components/Header.tsx/TImer.tsx | 53 +++++++++++++ src/components/Header.tsx/TopMenu.tsx | 107 ++++++++++++++++++++++++++ src/components/Header.tsx/TopNav.tsx | 27 +++++++ src/components/Header.tsx/index.tsx | 37 +++++++++ src/pages/index/Home.tsx | 11 ++- 11 files changed, 261 insertions(+), 2 deletions(-) create mode 100644 src/assets/img/btn_main_top_left.svg delete mode 100644 src/assets/img/btn_main_top_right.png create mode 100644 src/assets/img/btn_main_top_right.svg create mode 100644 src/assets/img/input_dropdown.png create mode 100644 src/assets/img/red_edge.png create mode 100644 src/assets/img/top_menu_down.png create mode 100644 src/components/Header.tsx/TImer.tsx create mode 100644 src/components/Header.tsx/TopMenu.tsx create mode 100644 src/components/Header.tsx/TopNav.tsx create mode 100644 src/components/Header.tsx/index.tsx diff --git a/src/assets/img/btn_main_top_left.svg b/src/assets/img/btn_main_top_left.svg new file mode 100644 index 0000000..2f7a3dd --- /dev/null +++ b/src/assets/img/btn_main_top_left.svg @@ -0,0 +1,14 @@ + + + + + + + + diff --git a/src/assets/img/btn_main_top_right.png b/src/assets/img/btn_main_top_right.png deleted file mode 100644 index d21d608840db46a7cb03306777cc827a6ee9f971..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 985 zcmaJ=PiWIn7>|r?Wl-2jP(+^@2%=41(sgZOV@;aY6_;7NvK3Ee$y*z`&CM-}n2z_q~2~^=5MJ>>R@| z$;z@`qiZ6L6EpPx=mVdl%NbH?kTtwTx@LeF)yA6$R9v%(YRI&EJ0DS=VWxmnZ;*zu zB3szy%oxK(u20zvlP^TRX|)jno2cn{3j5>DTNXIB!fs>?X!u3ca+dc3w6?cexAxkW zWV40qARoz8z(vFak-P1Ma-^^WU75!5G0%blgtQg**i^%)f+7wO$Z#-a!6gWm1WrgV zX0zF=K!gJ1p~wqjO32D-QHBr@B&bmxsCNPGMVw_%hFTyIroE=5WyD1xb=( z4N*){L@Mlg#Eep2xG+-CQD_B@PaN!lSkc_X9ip(*>2V3JKbG~vVVh{f_{j8mfrD{L zBcNgYAL_bebVzFG#P2_a!+Ot0d<})T6Ik@(wie=4zFZ8DNpMidcze{vY6}w_wy+P1 zYZ~erzFeq4dCVR + + + + + + + diff --git a/src/assets/img/input_dropdown.png b/src/assets/img/input_dropdown.png new file mode 100644 index 0000000000000000000000000000000000000000..9032549a8b540164532d7126f88135c17d0b20d8 GIT binary patch literal 247 zcmeAS@N?(olHy`uVBq!ia0vp^f*{Pn1|+R>-G2e8eV#6kAr}70DGQhqmNZH79KJaL z2ww8=@JO;8$~-p9G}~z6)dek{IXODt`{nJ!{{H`epS#`ByzcL>ryDXaFPm<`%jn6% z&c55&$mrdHv=jgT|F^xiE_SzYEMNAUgwJBi%8$+X`1&>+?G~?BJtbgoZ(nF;wv8ER zzEl8j{*0M3W5d?PR0_`KE?hSGz<~ocX=%?o6@2Ue|2rGMzwWO}3}fGAfh7)Mhs0)7 tFpEVBiJVZd+jc>TvUb_GQ literal 0 HcmV?d00001 diff --git a/src/assets/img/red_edge.png b/src/assets/img/red_edge.png new file mode 100644 index 0000000000000000000000000000000000000000..bee4c484a735f5e4a158b900dc8cfeab55a9ae59 GIT binary patch literal 957 zcmaJ=O^ee&7|tR{cVW?^dK$9}BG_coY?~%DuHB|}15GJyp*@-=(>8RI8I!3^>qYkD z;>n{Ye}E!*78GK-sm{wrCg(H=!Sdr-w9p-BEu*%K#dbPBqLgT&IGs*~sVv}dC`ziTCK|b1mLamy zETDFr4WgY?!9bA{dW3p70EwdA#}lga%;|XwK3T~I(XvdeU}9_&Q4(O1QVO)J|3iI$ zg^p+oUHJW{aMYO*B(_k5C!xbGZm^StB3dOxHpO8F!6ISJTkl0#tGDF3>%A1$az$oFOs@5>Yfg_??CYG6&EsqJAG>dF-+OL! lpWHlo&Ar;KZ#2xSTn2Jq&Ne?$GI*LiD6`ry-W)tQ{sRzVDC7VD literal 0 HcmV?d00001 diff --git a/src/assets/img/top_menu_down.png b/src/assets/img/top_menu_down.png new file mode 100644 index 0000000000000000000000000000000000000000..60432f926188df2ed4b088855cb482333bd654fe GIT binary patch literal 952 zcmaJ=&x_MQ7|mK-WMyIXr1mmo#gk1YNt@WvSktE6Et*ogg{>DcO{Q(gCKHpXNsEXG z9z?{u9=(hAJ?KgBU-0PBiyj3JI_b7u57xkBe(>J=-uKNn&pYkC?X4?Y48v@<_Khx` zH|fZo%l_{-9{-}#Wzy)A13V;&6(L4<@Bo39Z;enFS~mIz z;Zi@OY=)^+)6lX#M8E)z+(2W$AAewh>uBs@$%JNDM`L$?7NLV#yJyclyX>&lo1l`a zRKQ2X0;zu##A>Rsb6u6LvtynGa|rP?_QX`*?0`Cs5GZl5U_%)KS>Obzs3^*HAVLB1 zP~-)%ASkLNst|(3$I@t#GgP}qa}kT~G1Z z+BDTx5ECn~QOnR+%I93yQ5B_D){8}`mr9}_H1wJbWgXtA6%AQ3bVXir4Qx+*6p$s? zIpqp#xmhFlA&qRH$bE>MW`un(Pgr%=dXXAy^%h)btrw}emdjH!e0HsWUGwsY_D;53 zH7(t&+8zb8*CX207jCC#>4V@}hTcoR3@VR){`mcN@0AF0p66{|%jfgWo!s4>tDnw% jeRAp6x9Y_=8{i{Td2#;Pz2ld!v$xc0w2gPQ`%nJ>V@e|R literal 0 HcmV?d00001 diff --git a/src/components/Header.tsx/TImer.tsx b/src/components/Header.tsx/TImer.tsx new file mode 100644 index 0000000..03137fb --- /dev/null +++ b/src/components/Header.tsx/TImer.tsx @@ -0,0 +1,53 @@ +import {useEffect, useState} from 'react'; +import {useNavigate} from 'react-router-dom'; +import styled from 'styled-components'; + +interface TimerProps { + name: string; +} + +function Timer({name}: TimerProps) { + const navigate = useNavigate(); + const [time, setTime] = useState(1800); + + const formatTime = (time: number) => { + return time.toString().padStart(2, '0'); + }; + + const resetTime = () => { + setTime(1800); + }; + + useEffect(() => { + const timer = setInterval(() => { + setTime(prev => prev - 1); + }, 1000); + + if (time === 0) { + navigate('/login'); + } + + return () => clearInterval(timer); + }, [time]); + + return ( + + {name} + + 님 [00:{formatTime(Math.floor(time / 60))}:{formatTime(time % 60)}] + + + ); +} + +const TimerWrap = styled.button` + ${props => props.theme.texts.tableTitle}; + font-size: 1.3rem; + + > span { + color: ${props => props.theme.colors.neutral4}; + font-weight: 400; + } +`; + +export default Timer; diff --git a/src/components/Header.tsx/TopMenu.tsx b/src/components/Header.tsx/TopMenu.tsx new file mode 100644 index 0000000..53f34c9 --- /dev/null +++ b/src/components/Header.tsx/TopMenu.tsx @@ -0,0 +1,107 @@ +import styled from 'styled-components'; +import {useNavigate} from 'react-router-dom'; +import Left from '@assets/img/btn_main_top_left.svg?react'; +import Right from '@assets/img/btn_main_top_right.svg?react'; +import logout from '@assets/img/logout.png'; +import down from '@assets/img/top_menu_down.png'; +import notice from '@assets/img/notice.png'; +import setting from '@assets/img/setitng.png'; +import menu from '@assets/img/menu.png'; +import Timer from './TImer'; + +function TopMenu() { + const navigate = useNavigate(); + const name = '세종대'; + + const handleLogout = () => { + navigate('/login'); + }; + + return ( + + + + + + + + + PC + + + + KOR + + + + + + + + + ); +} + +const TopMenuContainer = styled.div` + display: flex; + align-items: center; + column-gap: 1rem; +`; + +const ArrowWrap = styled.div` + display: flex; + align-items: center; + column-gap: 1.2rem; + margin-right: 1.5rem; +`; + +const StyledLeft = styled(Left)` + fill: ${props => props.theme.colors.neutral4}; + &:hover { + fill: ${props => props.theme.colors.primary}; + } +`; + +const StyledRight = styled(Right)` + fill: ${props => props.theme.colors.neutral4}; + &:hover { + fill: ${props => props.theme.colors.primary}; + } +`; + +const LogoutBtn = styled.button` + background-image: url(${logout}); + width: 1.4rem; + height: 1.4rem; + + &:hover { + filter: brightness(20%); + } +`; + +const DropdownWrap = styled.div` + ${props => props.theme.texts.tableTitle}; + font-size: 1.3rem; + display: flex; + align-items: center; + column-gap: 1.5rem; + + > img { + &:hover { + filter: brightness(20%); + } + } +`; + +const GroupWrap = styled.div` + display: flex; + column-gap: 1rem; + + > img { + &:hover { + filter: brightness(20%); + } + } +`; + +export default TopMenu; diff --git a/src/components/Header.tsx/TopNav.tsx b/src/components/Header.tsx/TopNav.tsx new file mode 100644 index 0000000..66293f8 --- /dev/null +++ b/src/components/Header.tsx/TopNav.tsx @@ -0,0 +1,27 @@ +import styled from 'styled-components'; + +function TopNav() { + return ( + + 학부생학사정보 + 학생서비스 + + ); +} + +const TopNavContatiner = styled.div` + display: flex; + flex-shrink: 0; +`; + +const TopNavWrap = styled.button` + ${props => props.theme.texts.title}; + font-size: 1.6rem; + margin-right: 4rem; + + &:focus { + color: ${props => props.theme.colors.primary}; + } +`; + +export default TopNav; diff --git a/src/components/Header.tsx/index.tsx b/src/components/Header.tsx/index.tsx new file mode 100644 index 0000000..1e99463 --- /dev/null +++ b/src/components/Header.tsx/index.tsx @@ -0,0 +1,37 @@ +import styled from 'styled-components'; +import logo from '@assets/img/main_logo.png'; +import TopNav from './TopNav'; +import TopMenu from './TopMenu'; + +function Header() { + return ( + +
+ +
+ + + + + + ); +} + +const HeaderContainer = styled.div` + border-top: 0.5rem solid ${props => props.theme.colors.primary}; + max-width: 100%; + height: 6rem; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 2rem; +`; + +const HeaderBox = styled.div` + display: flex; + flex-grow: 1; + justify-content: space-between; + margin-left: 7.5rem; +`; + +export default Header; diff --git a/src/pages/index/Home.tsx b/src/pages/index/Home.tsx index 6dc66f2..ea7d540 100644 --- a/src/pages/index/Home.tsx +++ b/src/pages/index/Home.tsx @@ -1,17 +1,24 @@ import styled from 'styled-components'; import Menubar from '@components/Menubar'; +import Header from '@components/Header.tsx'; function Home() { return ( - - 강의시간표/수업계획서조회 +
+ + + 강의시간표/수업계획서조회 + ); } const Container = styled.div` ${props => props.theme.texts.title}; +`; + +const Box = styled.div` display: flex; `;