🛠️ refactor: 개인 및 개개인 장소 입력 코드 리팩토링

package.json

@@ -14,7 +14,7 @@
     "@heroicons/react": "^2.1.3",
     "@tanstack/react-query": "^5.29.2",
     "axios": "^1.6.8",
-    "framer-motion": "^11.1.1",
+    "framer-motion": "^11.2.10",
     "jotai": "^2.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/apis/enter-location.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import axiosInstance from '.';
+import { axiosInstance } from '.';
 
 export const fetchIsValidRoomId = async (roomId: string) => {
   const { data } = await axios.get(`/api/rooms/${roomId}/duplicate`);

src/apis/index.ts

@@ -2,9 +2,18 @@
 
 import axios from 'axios';
 
-const REFRESH_URL = ''; // Refresh Token을 사용해 새로운 Access Token을 받을때 요청하는 URL
+const REFRESH_URL = '';
 
-// access token 재발급하는 함수
+export const axiosInstance = axios.create({
+  baseURL: '',
+});
+
+// 로그 아웃 함수
+const logout = () => {
+  localStorage.removeItem('accessToken');
+};
+
+// accessToken, refreshToken 재발급하는 함수
 const getNewToken = async () => {
   try {
     const accessToken = '';
@@ -17,15 +26,6 @@ const getNewToken = async () => {
   }
 };
 
-// 로그 아웃 함수
-const logout = () => {
-  localStorage.removeItem('accessToken');
-};
-
-const axiosInstance = axios.create({
-  baseURL: '',
-});
-
 // 요청 인터셉터
 axiosInstance.interceptors.request.use(
   (config) => {
@@ -60,8 +60,6 @@ axiosInstance.interceptors.response.use(
       localStorage.setItem('refreshToken', newToken.refreshToken);
       config.headers.Authorization = `Bearer ${newToken.accessToken}`;
     }
-    return axios(config); // 재요청
+    return axiosInstance(config); // 재요청
   },
 );
-
-export default axiosInstance;

src/components/Sidebar.tsx

@@ -1,79 +1,129 @@
-import { Link, useLocation } from 'react-router-dom';
-
 import HomeLogo from '@/assets/imgs/Navbar/home-logo.svg?react';
-// import HomeLogoActive from '@/assets/imgs/Navbar/home-logo-active.svg?react';
 import PinLogo from '@/assets/imgs/Navbar/pin-logo.svg?react';
 import VoteLogo from '@/assets/imgs/Navbar/vote-logo.svg?react';
 import ClockLogo from '@/assets/imgs/Navbar/clock-logo.svg?react';
-
 import styled from 'styled-components';
+import { useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
 
-interface LogoProps {
-  active: boolean;
+// 메뉴 enum 정의
+enum Menu {
+  Home = 'home',
+  Pin = 'pin',
+  Vote = 'vote',
+  Clock = 'clock',
 }
 
 export default function SideBar() {
-  const location = useLocation();
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedMenu, setSelectedMenu] = useState<Menu | null>(null);
+
+  const handleMenuClick = (menu: Menu) => {
+    setIsOpen(true);
+    setSelectedMenu(menu);
+  };
+
+  const handleCloseSidebar = () => {
+    setIsOpen(false);
+    setSelectedMenu(null);
+  };
+
   return (
     <>
       <SidebarContainer>
-        <ul className="flex flex-col gap-2 *:font-semibold">
-          <NavItem className="mt-16 transition">
-            <Link to="/">
-              <Logo active={location.pathname === '/'}>
-                {/* {location.pathname === '/' ? <HomeLogoActive /> : <HomeLogo />} */}
-                <HomeLogo />
-              </Logo>
-            </Link>
+        <ul>
+          <NavItem className="transition" onClick={() => handleMenuClick(Menu.Home)}>
+            <Logo>
+              <HomeLogo />
+            </Logo>
           </NavItem>
-          <NavItem className="transition">
-            <Link to="/midpoint">
-              <Logo active={location.pathname === '/midpoint'}>
-                <PinLogo />
-              </Logo>
-            </Link>
+          <NavItem className="transition" onClick={() => handleMenuClick(Menu.Pin)}>
+            <Logo>
+              <PinLogo />
+            </Logo>
           </NavItem>
-          <NavItem className="transition">
-            <Link to="/vote">
-              <Logo active={location.pathname === '/vote'}>
-                <VoteLogo />
-              </Logo>
-            </Link>
+          <NavItem className="transition" onClick={() => handleMenuClick(Menu.Vote)}>
+            <Logo>
+              <VoteLogo />
+            </Logo>
           </NavItem>
-          <NavItem className="transition">
-            <Link to="/time">
-              <Logo active={location.pathname === '/time'}>
-                <ClockLogo />
-              </Logo>
-            </Link>
+          <NavItem className="transition" onClick={() => handleMenuClick(Menu.Clock)}>
+            <Logo>
+              <ClockLogo />
+            </Logo>
           </NavItem>
         </ul>
       </SidebarContainer>
+      <AnimatePresence initial={false}>
+        {isOpen && (
+          <Content
+            initial={{ x: -100, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            exit={{ x: -100, opacity: 0 }}
+            transition={{ type: 'tween', duration: 0.2 }}
+          >
+            <CloseButton onClick={handleCloseSidebar}>Close</CloseButton>
+            {selectedMenu === Menu.Home && <p>Home Content</p>}
+            {selectedMenu === Menu.Pin && <p>Pin Content</p>}
+            {selectedMenu === Menu.Vote && <p>Vote Content</p>}
+            {selectedMenu === Menu.Clock && <p>Clock Content</p>}
+          </Content>
+        )}
+      </AnimatePresence>
     </>
   );
 }
 
 const SidebarContainer = styled.div`
-  position: sticky;
+  position: absolute;
   top: 0;
   left: 0;
   height: 100vh;
-  min-width: 120px;
+  width: 100px;
   background-color: #5142ff;
   color: white;
+  z-index: 1000;
+  padding-top: 50px;
 `;
 
 const NavItem = styled.li`
   text-transform: uppercase;
   cursor: pointer;
   padding: 1rem;
+  list-style: none;
+  text-align: center;
 `;
 
-const Logo = styled.span<LogoProps>`
+const Logo = styled.span`
   width: 3.5rem;
   height: 3.5rem;
   border-radius: 100%;
   display: block;
   margin: 0 auto;
-  background-color: ${({ active }) => (active ? 'white' : 'transparent')};
+`;
+
+const Content = styled(motion.div)`
+  position: absolute;
+  top: 0;
+  left: 100px;
+  height: 100vh;
+  width: 350px;
+  background-color: white;
+  z-index: 999;
+  padding: 1rem;
+  overflow-y: auto;
+`;
+
+const CloseButton = styled.button`
+  margin: 1rem;
+  padding: 0.5rem 1rem;
+  background-color: #5142ff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #524abd;
+  }
 `;