feat: 마이페이지의 모든 페이지 라우터 설정 및 사이드 메뉴 적용 (#7)

prgrms-web-devcourse-final-project · Nov 23, 2024 · ed07f9a · ed07f9a
1 parent 4d5c36e
commit ed07f9a
Show file tree

Hide file tree

Showing 9 changed files with 200 additions and 15 deletions.
diff --git a/src/components/pages/myPage/ChatListPage.tsx b/src/components/pages/myPage/ChatListPage.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Sidemenu from './SideMenu';
+
+function ChatListPage() {
+  return (
+    <>
+      <Sidemenu />
+    </>
+  );
+}
+
+export default ChatListPage;
diff --git a/src/components/pages/myPage/LocationPage.tsx b/src/components/pages/myPage/LocationPage.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Sidemenu from './SideMenu';
+
+function LocationPage() {
+  return (
+    <>
+      <Sidemenu />
+    </>
+  );
+}
+
+export default LocationPage;
diff --git a/src/components/pages/myPage/MyPostsPage.tsx b/src/components/pages/myPage/MyPostsPage.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Sidemenu from './SideMenu';
+
+function MyPostsPage() {
+  return (
+    <>
+      <Sidemenu />
+    </>
+  );
+}
+
+export default MyPostsPage;
diff --git a/src/components/pages/myPage/NotificationPage.tsx b/src/components/pages/myPage/NotificationPage.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Sidemenu from './SideMenu';
+
+function NotificationPage() {
+  return (
+    <>
+      <Sidemenu />
+    </>
+  );
+}
+
+export default NotificationPage;
diff --git a/src/components/pages/myPage/OrderListPage.tsx b/src/components/pages/myPage/OrderListPage.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Sidemenu from './SideMenu';
+
+function OrderListPage() {
+  return (
+    <>
+      <Sidemenu />
+    </>
+  );
+}
+
+export default OrderListPage;
diff --git a/src/components/pages/myPage/RefundPage.tsx b/src/components/pages/myPage/RefundPage.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Sidemenu from './SideMenu';
+
+function RefundPage() {
+  return (
+    <>
+      <Sidemenu />
+    </>
+  );
+}
+
+export default RefundPage;
diff --git a/src/components/pages/myPage/SideMenu.tsx b/src/components/pages/myPage/SideMenu.tsx
@@ -23,40 +23,106 @@ const Sidemenu = () => {
           isActive={isActive('/mypage/setting')}
           onClick={() => navigate('/mypage/setting')}
         >
-          <img src="/images/setting_on.png" width={24} height={24} alt="Icon" />
+          <img
+            src={`/images/setting${isActive('/mypage/setting') ? '_on' : ''}.png`}
+            width={24}
+            height={24}
+            alt="Icon"
+          />
           설정
         </MenuItem>
-        <MenuItem>
-          <img src="/images/orderlist.png" width={24} height={24} alt="Icon" />
+        <MenuItem
+          isActive={isActive('/mypage/orderlist')}
+          onClick={() => navigate('/mypage/orderlist')}
+        >
+          <img
+            src={`/images/orderlist${
+              isActive('/mypage/orderlist') ? '_on' : ''
+            }.png`}
+            width={24}
+            height={24}
+            alt="Icon"
+          />
           주문 내역
         </MenuItem>
-        <MenuItem>
-          <img src="/images/wishlist.png" width={24} height={24} alt="Icon" />
+        <MenuItem
+          isActive={isActive('/mypage/wishlist')}
+          onClick={() => navigate('/mypage/wishlist')}
+        >
+          <img
+            src={`/images/wishlist${
+              isActive('/mypage/wishlist') ? '_on' : ''
+            }.png`}
+            width={24}
+            height={24}
+            alt="Icon"
+          />
           찜한 상품
         </MenuItem>
-        <MenuItem>
-          <img src="/images/location.png" width={24} height={24} alt="Icon" />
+        <MenuItem
+          isActive={isActive('/mypage/location')}
+          onClick={() => navigate('/mypage/location')}
+        >
+          <img
+            src={`/images/location${
+              isActive('/mypage/location') ? '_on' : ''
+            }.png`}
+            width={24}
+            height={24}
+            alt="Icon"
+          />
           동네인증
         </MenuItem>
-        <MenuItem>
-          <img src="/images/refund.png" width={24} height={24} alt="Icon" />
+        <MenuItem
+          isActive={isActive('/mypage/refund')}
+          onClick={() => navigate('/mypage/refund')}
+        >
+          <img
+            src={`/images/refund${isActive('/mypage/refund') ? '_on' : ''}.png`}
+            width={24}
+            height={24}
+            alt="Icon"
+          />
           환불계좌 관리
         </MenuItem>
-        <MenuItem>
+        <MenuItem
+          isActive={isActive('/mypage/notification')}
+          onClick={() => navigate('/mypage/notification')}
+        >
           <img
-            src="/images/notification.png"
+            src={`/images/notification${
+              isActive('/mypage/notification') ? '_on' : ''
+            }.png`}
             width={24}
             height={24}
             alt="Icon"
           />
           알림내역
         </MenuItem>
-        <MenuItem>
-          <img src="/images/myposts.png" width={24} height={24} alt="Icon" />
+        <MenuItem
+          isActive={isActive('/mypage/myposts')}
+          onClick={() => navigate('/mypage/myposts')}
+        >
+          <img
+            src={`/images/myposts${isActive('/mypage/myposts') ? '_on' : ''}.png`}
+            width={24}
+            height={24}
+            alt="Icon"
+          />
           나의 게시글
         </MenuItem>
-        <MenuItem>
-          <img src="/images/chatlist.png" width={24} height={24} alt="Icon" />
+        <MenuItem
+          isActive={isActive('/mypage/chatlist')}
+          onClick={() => navigate('/mypage/chatlist')}
+        >
+          <img
+            src={`/images/chatlist${
+              isActive('/mypage/chatlist') ? '_on' : ''
+            }.png`}
+            width={24}
+            height={24}
+            alt="Icon"
+          />
           나의 채팅방 목록
         </MenuItem>
       </Menu>

diff --git a/src/components/pages/myPage/WishListPage.tsx b/src/components/pages/myPage/WishListPage.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Sidemenu from './SideMenu';
+
+function WishListPage() {
+  return (
+    <>
+      <Sidemenu />
+    </>
+  );
+}
+
+export default WishListPage;
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
@@ -13,6 +13,13 @@ import TermsPage from '../components/pages/login/TermsPage';
 import ProductPage from '../components/pages/ProductPage/ProductPage';
 import ProductDetail from '../components/pages/ProductDetailPage/ProductDetail';
 import SettingPage from '../components/pages/myPage/SettingPage';
+import OrderListPage from '../components/pages/myPage/OrderListPage';
+import WishListPage from '../components/pages/myPage/WishListPage';
+import LocationPage from '../components/pages/myPage/LocationPage';
+import RefundPage from '../components/pages/myPage/RefundPage';
+import NotificationPage from '../components/pages/myPage/NotificationPage';
+import MyPostsPage from '../components/pages/myPage/MyPostsPage';
+import ChatListPage from '../components/pages/myPage/ChatListPage';
 
 const router = createBrowserRouter([
   {
@@ -43,6 +50,34 @@ const router = createBrowserRouter([
             path: 'setting',
             element: <SettingPage />,
           },
+          {
+            path: 'orderlist',
+            element: <OrderListPage />,
+          },
+          {
+            path: 'wishlist',
+            element: <WishListPage />,
+          },
+          {
+            path: 'location',
+            element: <LocationPage />,
+          },
+          {
+            path: 'refund',
+            element: <RefundPage />,
+          },
+          {
+            path: 'notification',
+            element: <NotificationPage />,
+          },
+          {
+            path: 'myposts',
+            element: <MyPostsPage />,
+          },
+          {
+            path: 'chatlist',
+            element: <ChatListPage />,
+          },
         ],
       },
     ],