문의 작성 페이지 마크업

package.json

@@ -11,13 +11,8 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-<<<<<<< Updated upstream
     "lucide-react": "^0.469.0",
     "axios": "^1.7.8",
-=======
-    "axios": "^1.7.8",
-    "lucide-react": "^0.469.0",
->>>>>>> Stashed changes
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",
@@ -60,6 +55,7 @@
     "eslint-plugin-react": "^7.37.3",
     "globals": "^15.14.0",
     "husky": "^9.1.7",
-    "prettier": "^3.4.2"
+    "prettier": "^3.4.2",
+    "typescript": "^5.7.3"
   }
 }

src/App.js

@@ -8,9 +8,11 @@ import { ReviewProvider } from "./contexts/ReviewInfoContext";
 function App() {
   return (
     <UserInfoProvider>
+    <ReviewProvider>
       <Layout>
         <Router />
       </Layout>
+    </ReviewProvider>
     </UserInfoProvider>
   );
 }

src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/Router.js

@@ -1,31 +1,29 @@
-import { Routes, Route } from 'react-router-dom';
-import HomePage from './pages/HomePage';
-import AlbaSearchPage from './pages/AlbaSearchPage';
-import AlbaReviewPage from './pages/AlbaReviewPage';
-import MyPage from './pages/MyPage/MyPage';
-import ResumePage from './pages/ResumePage';
+import { Routes, Route } from "react-router-dom";
+import HomePage from "./pages/HomePage";
+import AlbaSearchPage from "./pages/AlbaSearchPage";
+import AlbaReviewPage from "./pages/AlbaReviewPage";
+import MyPage from "./pages/MyPage/MyPage";
+import ResumePage from "./pages/ResumePage";
+import ChattingPage from "./pages/ChattingPage";
+import React from 'react';
 import MyStatusPage from './pages/MyPage/MyStatusPage';
-import SupportPage from './pages/SupportPage';
-import ChattingPage from './pages/ChattingPage';
 import MyResume from './pages/MyResume/MyResume';
 import SignUpPage from './pages/SignUpPage';
-import ContactDetailPage from './pages/MyPage/ContactDetailPage';
-import React from 'react';
+import SupportPage from "./pages/SupportPage";
 
 const AppRouter = () => {
   return (
     <Routes>
       <Route path="/" element={<HomePage />} />
       <Route path="/alba/search" element={<AlbaSearchPage />} />
+      <Route path="/alba/review" element={<AlbaReviewPage/>}/>
       <Route path="/alba/resume/:id" element={<ResumePage />} />
-      <Route path="/alba/review" element={<AlbaReviewPage />} />
-      <Route path="/support" element={<SupportPage/>}/>
       <Route path="/mypage" element={<MyPage />} />
       <Route path="/signup" element={<SignUpPage />} />
+      <Route path="/support" element={<SupportPage />} />
       <Route path="/chat" element={<ChattingPage />} />
       <Route path="/mypage/resume" element={<MyResume />} />
-      <Route path="/mypage/contracts" element={<MyStatusPage />} />
-      <Route path="/contracts/:id" element={<ContactDetailPage />} />
+      <Route path="/mypage/status" element={<MyStatusPage />} />
     </Routes>
   );
 };

src/components/common/DropDown.jsx

@@ -95,4 +95,4 @@ const DropdownItem = styled.div`
   }
 `;
 
-export default Dropdown;
+export default Dropdown;

src/components/common/MypageSubMenu.jsx

@@ -1,40 +1,52 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import { useLocation } from "react-router-dom";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+
 import { HiClipboardDocumentList  } from "react-icons/hi2";
 import { PiIdentificationBadgeFill, PiPencilLineBold } from "react-icons/pi";
 import { TbMessageChatbotFilled } from "react-icons/tb";
-// import { BiSolidChat } from "react-icons/bi";
 import { RiSettings4Fill } from "react-icons/ri";
 import { SiHomeassistantcommunitystore } from "react-icons/si";
 import { BsBookmarkFill } from "react-icons/bs";
 
 const MypageSubMenu = ({ userType }) => {
-  const [ activeMenu, setActiveMenu ] = useState(null); // 클릭된 항목 관리
+  const location = useLocation(); // 현재 경로 가져오기
+  const [activeMenu, setActiveMenu] = useState(null);
 
   // 알바생과 사장님의 공통 메뉴 항목
   const commonMenu = [
-    { name: '체결 현황', path: '/MyPage/ContractStatus', icon: <HiClipboardDocumentList /> },
-    { name: '리뷰 관리', path: '/MyPage/ReviewManagement', icon: <PiPencilLineBold /> },
-    { name: '채팅방', path: '/MyPage/Chat', icon: <TbMessageChatbotFilled /> },
-    { name: '설정', path: '/MyPage/Settings', icon: <RiSettings4Fill /> }
+    { name: '체결 현황', path: '/mypage/contracts', icon: <HiClipboardDocumentList /> },
+    { name: '리뷰 관리', path: '/manage-reviews', icon: <PiPencilLineBold /> },
+    { name: '채팅방', path: '/chat', icon: <TbMessageChatbotFilled /> },
+    { name: '설정', path: '/mypage/settings', icon: <RiSettings4Fill /> }
   ];
 
   // 알바생 메뉴 항목(사장님은 없는 메뉴)
   const workerMenu = [
-    { name: '나의 이력서', path: '/MyPage/MyResume', icon: <PiIdentificationBadgeFill /> },
+    { name: '나의 이력서', path: '/mypage/resume', icon: <PiIdentificationBadgeFill /> },
     ...commonMenu
   ];
 
   const ownerMenu = [
-    { name: '관심 알바', path: '/mypage/SavedWorkers', icon: <BsBookmarkFill /> },
+    { name: '관심 알바', path: '/mypage/saved-workers', icon: <BsBookmarkFill /> },
     { name: '나의 매장', path: '/mypage/mystore', icon: <SiHomeassistantcommunitystore /> },
     ...commonMenu
   ];
 
   // 사용자 타입에 맞는 메뉴 선택
   const menuItems = userType === 'worker' ? workerMenu : ownerMenu;
 
+  // 초기 activeMenu를 현재 경로로 설정
+  useEffect(() => {
+    const currentPath = location.pathname;
+    const activeItem = menuItems.find((item) => item.path === currentPath);
+    if (activeItem) {
+      setActiveMenu(activeItem.name);
+    }
+  }, [location.pathname, menuItems]);
+
+
   // 메뉴 항목 클릭 시 activeMenu 상태 업데이트
   const handleMenuClick = (name) => {
     setActiveMenu(name);
@@ -44,30 +56,25 @@ const MypageSubMenu = ({ userType }) => {
     <SubMenuContainer>
       <MenuList>
         {menuItems.map((item) => (
-          <MenuItem 
-            key={item.name}
-            onClick={() => handleMenuClick(item.name)} 
-          >
+          <MenuItem key={item.name} onClick={() => handleMenuClick(item.name)}>
             <StyledLink to={item.path} active={activeMenu === item.name}>
-            <Icon active={activeMenu === item.name}>{item.icon}</Icon>
+              <Icon active={activeMenu === item.name}>{item.icon}</Icon>
               {item.name}
             </StyledLink>
           </MenuItem>
         ))}
       </MenuList>
     </SubMenuContainer>
   );
-
 };
 
 export default MypageSubMenu;
 
 
 const SubMenuContainer = styled.div`
   width: 250px;
-  padding: 0 20px 0 70px;
-  
-  margin-top: 10vh;
+  padding: 0 20px;
+  min-width: 160px;
 `;
 
 const MenuList = styled.ul`
@@ -108,5 +115,5 @@ const Icon = styled.span`
   color: ${(props) => (props.active ? "#6E3C3B" : "#AFAFAF")};
   
   margin-top: 5px;
-  margin-right: 25px;
+  margin-right: 15px;
 `;