feat: 사이드바 구현

src/components/LoginForm/FormInput.tsx

@@ -20,7 +20,6 @@ function FormInput({value, setValue, type}: InputProps) {
 }
 
 const InputWrap = styled.input`
-  border: none;
   background-color: #a9d0f5;
   height: 4rem;
   width: 38rem;

src/components/Menubar/BarTitle.tsx

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+import Star from '@assets/img/fav_white.png';
+import Search from '@assets/img/search.png';
+import Close from '@assets/img/menu_close.png';
+
+interface OpenProps {
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+function BarTitle({setIsOpen}: OpenProps) {
+  return (
+    <BarTitleContainer>
+      <BarTitleWrap>학부생수강시스템</BarTitleWrap>
+      <IconBox>
+        <img src={Star} />
+        <img src={Search} />
+        <CloseBtn onClick={() => setIsOpen(false)}>
+          <img src={Close} />
+        </CloseBtn>
+      </IconBox>
+    </BarTitleContainer>
+  );
+}
+
+const BarTitleContainer = styled.div`
+  background: rgb(163, 20, 50);
+  background: linear-gradient(
+    90deg,
+    rgba(163, 20, 50, 1) 0%,
+    rgba(51, 77, 97, 1) 100%
+  );
+  height: 4rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+`;
+
+const BarTitleWrap = styled.div`
+  ${props => props.theme.texts.subtitle};
+  font-size: 1.5rem;
+  color: ${props => props.theme.colors.white};
+`;
+
+const IconBox = styled.div`
+  display: flex;
+  align-items: center;
+  column-gap: 0.5rem;
+`;
+
+const CloseBtn = styled.button`
+  display: flex;
+  align-items: center;
+`;
+
+export default BarTitle;

src/components/Menubar/Menu.tsx

@@ -0,0 +1,78 @@
+import styled from 'styled-components';
+import arrow from '@assets/img/arrow_up.png';
+import hyphen from '@assets/img/menu2_close.png';
+import MenuItem from './MenuItem';
+import {useState} from 'react';
+
+interface ItemProps {
+  id: number;
+  name: string;
+  type: string;
+}
+
+const menuItems: ItemProps[] = [
+  {id: 0, name: '수강신청', type: 'study'},
+  {id: 1, name: '관심과목 담기', type: 'study'},
+  {id: 2, name: '강의시간표 조회', type: 'view'},
+];
+
+function Menu() {
+  const [focused, setFocused] = useState<number | null>(null);
+
+  const handleClick = (id: number) => {
+    setFocused(id);
+  };
+
+  return (
+    <MenuContainer>
+      <MenuTitleBox>
+        <MenuTitleWrap>수강 및 변동신청</MenuTitleWrap>
+        <img src={arrow} />
+      </MenuTitleBox>
+      <MenuSubtitleBox>
+        <img src={hyphen} />
+        수강신청 및 기타
+      </MenuSubtitleBox>
+      <DetailBox>
+        {menuItems.map(item => (
+          <MenuItem
+            key={item.id}
+            id={item.id}
+            onClick={handleClick}
+            type={item.type}
+            name={item.name}
+            isActive={focused === item.id}
+          />
+        ))}
+      </DetailBox>
+    </MenuContainer>
+  );
+}
+
+const MenuContainer = styled.div``;
+const MenuTitleBox = styled.div`
+  height: 4rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 15px;
+  border-bottom: 1px solid ${props => props.theme.colors.neutral4};
+`;
+const MenuTitleWrap = styled.div`
+  ${props => props.theme.texts.menuTitle};
+`;
+
+const MenuSubtitleBox = styled(MenuTitleBox)`
+  ${props => props.theme.texts.menuTitle};
+  justify-content: flex-start;
+  column-gap: 1rem;
+`;
+
+const DetailBox = styled.div`
+  background-color: ${props => props.theme.colors.neutral5};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export default Menu;

src/components/Menubar/MenuItem.tsx

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+import View from '@assets/img/view.svg?react';
+import Study from '@assets/img/study.svg?react';
+
+interface DetailProps {
+  id: number;
+  type: string;
+  name: string;
+  isActive: boolean;
+  onClick: (id: number) => void;
+}
+
+function MenuItem({id, type, name, isActive, onClick}: DetailProps) {
+  return (
+    <DetailWrap isactive={isActive} onClick={() => onClick(id)}>
+      {type === 'view' ? <View /> : <Study />}
+      {name}
+    </DetailWrap>
+  );
+}
+
+const DetailWrap = styled.button<{isactive: boolean}>`
+  ${props => props.theme.texts.tableTitle};
+  width: 17.5rem;
+  height: 2.8rem;
+  display: flex;
+  align-items: center;
+  column-gap: 1rem;
+  padding-left: 10px;
+
+  background-color: ${props =>
+    props.isactive ? props.theme.colors.primary : 'transparent'};
+  color: ${props => props.isactive && props.theme.colors.white};
+`;
+
+export default MenuItem;

src/components/Menubar/index.tsx

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+import {useState} from 'react';
+import BarTitle from './BarTitle';
+import Menu from './Menu';
+import close from '@assets/img/menu_close.png';
+
+function Menubar() {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <BarContainer>
+      {isOpen ? (
+        <OpendBar>
+          <BarTitle setIsOpen={setIsOpen} />
+          <Menu />
+        </OpendBar>
+      ) : (
+        <ClosedBar>
+          <OpenBtn onClick={() => setIsOpen(true)}>
+            <img src={close} />
+          </OpenBtn>
+        </ClosedBar>
+      )}
+    </BarContainer>
+  );
+}
+
+const BarContainer = styled.div`
+  height: 100vh;
+`;
+
+const OpendBar = styled.div`
+  width: 23rem;
+`;
+
+const ClosedBar = styled.div`
+  width: 2rem;
+  height: 100%;
+  background-color: ${props => props.theme.colors.neutral4};
+`;
+
+const OpenBtn = styled.button`
+  width: 100%;
+  height: 4rem;
+  background-color: ${props => props.theme.colors.primary};
+  > img {
+    transform: rotate(180deg);
+  }
+`;
+
+export default Menubar;

src/pages/index/Home.tsx

@@ -1,15 +1,18 @@
 import styled from 'styled-components';
+import Menubar from '@components/Menubar';
 
 function Home() {
-    return (
-        <Container>
-            강의시간표/수업계획서조회
-        </Container>
-    );
+  return (
+    <Container>
+      <Menubar />
+      강의시간표/수업계획서조회
+    </Container>
+  );
 }
 
 const Container = styled.div`
-    ${props=>props.theme.texts.title};
+  ${props => props.theme.texts.title};
+  display: flex;
 `;
 
-export default Home;
+export default Home;

src/styles/GlobalStyle.tsx

@@ -31,6 +31,9 @@ const GlobalStyle = createGlobalStyle`
         cursor: pointer;
         outline: none;
         border-radius: 2px;
+        background:transparent;
+        border:none;
+        padding:0;
     }
 `;
 

src/styles/theme/Theme.ts

@@ -15,7 +15,7 @@ const colors = {
 
 const texts = {
   title: {
-    fontSize: '2.1rem',
+    fontSize: '2rem',
     fontWeight: '700',
     color: '#222',
   },
@@ -24,6 +24,11 @@ const texts = {
     fontWeight: '600',
     color: '#333',
   },
+  menuTitle: {
+    fontSize: '1.3rem',
+    fontWeight: '600',
+    color: '#333',
+  },
   content: {
     fontSize: '1.2rem',
     fontWeight: '400',