feat: 상단바 구현

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 (
+    <TimerWrap onClick={resetTime}>
+      {name}
+      <span>
+        님 [00:{formatTime(Math.floor(time / 60))}:{formatTime(time % 60)}]
+      </span>
+    </TimerWrap>
+  );
+}
+
+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;

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 (
+    <TopMenuContainer>
+      <ArrowWrap>
+        <StyledLeft />
+        <StyledRight />
+      </ArrowWrap>
+      <Timer name={name} />
+      <LogoutBtn onClick={handleLogout} />
+      <DropdownWrap>
+        PC
+        <img src={down} />
+      </DropdownWrap>
+      <DropdownWrap>
+        KOR
+        <img src={down} />
+      </DropdownWrap>
+      <GroupWrap>
+        <img src={notice} />
+        <img src={setting} />
+        <img src={menu} />
+      </GroupWrap>
+    </TopMenuContainer>
+  );
+}
+
+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;

src/components/Header.tsx/TopNav.tsx

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+function TopNav() {
+  return (
+    <TopNavContatiner>
+      <TopNavWrap autoFocus>학부생학사정보</TopNavWrap>
+      <TopNavWrap>학생서비스</TopNavWrap>
+    </TopNavContatiner>
+  );
+}
+
+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;

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 (
+    <HeaderContainer>
+      <div>
+        <img src={logo} />
+      </div>
+      <HeaderBox>
+        <TopNav />
+        <TopMenu />
+      </HeaderBox>
+    </HeaderContainer>
+  );
+}
+
+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;

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<React.SetStateAction<setType>>;
   type: string;
 }

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<setType>(0);
+  const [id, setId] = useState<setType>(undefined);
   const [name, setName] = useState<setType>('');
 
   return (
@@ -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;
 `;

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;

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 (
     <Container>
-      <Menubar />
-      강의시간표/수업계획서조회
+      <Header />
+      <Box>
+        <Menubar />
+        강의시간표/수업계획서조회
+      </Box>
     </Container>
   );
 }
 
 const Container = styled.div`
   ${props => props.theme.texts.title};
+`;
+
+const Box = styled.div`
   display: flex;
 `;
 

src/styles/GlobalStyle.tsx

@@ -26,6 +26,8 @@ const GlobalStyle = createGlobalStyle`
     }
     input {
         border-radius: 2px;
+        outline: none;
+        border: none;
     }
     button {
         cursor: pointer;

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',