Feat(Client): 관심직무 페이지 라우팅 및 사이드바 추가 (#254)

* feat: 관심 직무 핀 페이지 및 라우팅 추가

* feat: 사이드바에 '관심 직무 핀' 메뉴 추가 및 라우팅 개선

* feat: '관심 직무 핀' 아이콘 추가 및 사이드바에 적용

Author: jjangminii

apps/client/src/pages/jobPins/JobPins.tsx

@@ -0,0 +1,5 @@
+const JobPins = () => {
+  return <div>관심 직무 핀 페이지</div>;
+};
+
+export default JobPins;

apps/client/src/routes/router.tsx

@@ -1,4 +1,5 @@
 import Category from '@pages/category/Category';
+import JobPins from '@pages/jobPins/JobPins';
 import Level from '@pages/level/Level';
 import Login from '@pages/login/Login';
 import MyBookmark from '@pages/myBookmark/MyBookmark';
@@ -52,6 +53,10 @@ export const router = createBrowserRouter([
         path: ROUTES_CONFIG.termsOfService.path,
         element: <TermsOfService />,
       },
+      {
+        path: ROUTES_CONFIG.jobPins.path,
+        element: <JobPins />,
+      },
     ],
   },
 ]);

apps/client/src/routes/routesConfig.ts

@@ -35,4 +35,8 @@ export const ROUTES_CONFIG = {
     title: '이용약관',
     path: '/terms',
   },
+  jobPins: {
+    title: '관심 직무 핀',
+    path: '/job-pins',
+  },
 };

apps/client/src/shared/components/sidebar/SideItem.tsx

@@ -5,6 +5,7 @@ import { IconToken } from './types/IconTokenType';
 const ICON_MAP: Record<IconToken, { on: IconName; off: IconName }> = {
   clock: { on: 'ic_clock_active', off: 'ic_clock_disable' },
   bookmark: { on: 'ic_bookmark_active', off: 'ic_bookmark_disable' },
+  pin: { on: 'ic_pin_active', off: 'ic_pin_disable' },
 } as const;
 
 interface SideItemProps {

apps/client/src/shared/components/sidebar/Sidebar.tsx

@@ -54,6 +54,7 @@ export function Sidebar() {
     goBookmarks,
     selectCategory,
     goLevel,
+    goJobPins,
     setSelectedCategoryId,
     setActiveTab,
   } = useSidebarNav();
@@ -164,6 +165,15 @@ export function Sidebar() {
 
         {/* 메뉴 영역 */}
         <div className="flex-1 overflow-y-auto">
+          <SideItem
+            icon="pin"
+            label="관심 직무 핀"
+            active={activeTab === 'job-pins'}
+            onClick={() => {
+              closeMenu();
+              goJobPins();
+            }}
+          />
           <SideItem
             icon="clock"
             label="리마인드"

apps/client/src/shared/components/sidebar/types/IconTokenType.ts

@@ -1 +1 @@
-export type IconToken = 'clock' | 'bookmark';
+export type IconToken = 'clock' | 'bookmark' | 'pin';

apps/client/src/shared/hooks/useSidebarNav.ts

@@ -1,7 +1,8 @@
 import { useNavigate, useLocation, useSearchParams } from 'react-router-dom';
 import { useCallback, useEffect, useState } from 'react';
+import { ROUTES_CONFIG } from '@routes/routesConfig';
 
-export type SidebarTab = 'mybookmark' | 'remind' | 'level';
+export type SidebarTab = 'mybookmark' | 'remind' | 'level' | 'job-pins';
 
 export function useSidebarNav() {
   const navigate = useNavigate();
@@ -16,7 +17,7 @@ export function useSidebarNav() {
   useEffect(() => {
     const path = location.pathname;
 
-    if (path.startsWith('/my-bookmarks')) {
+    if (path.startsWith(ROUTES_CONFIG.myBookmarks.path)) {
       setActiveTab('mybookmark');
 
       const id = searchParams.get('id');
@@ -25,40 +26,52 @@ export function useSidebarNav() {
       } else {
         setSelectedCategoryId(null);
       }
-    } else if (path === '/' || path.startsWith('/remind')) {
+    } else if (
+      path === ROUTES_CONFIG.remind.path ||
+      path.startsWith('/remind')
+    ) {
       setActiveTab('remind');
       setSelectedCategoryId(null);
-    } else if (path.startsWith('/level')) {
+    } else if (path.startsWith(ROUTES_CONFIG.level.path)) {
       setActiveTab('level');
       setSelectedCategoryId(null);
+    } else if (path.startsWith(ROUTES_CONFIG.jobPins.path)) {
+      setActiveTab('job-pins');
+      setSelectedCategoryId(null);
     }
   }, [location.pathname, searchParams]);
 
   const goRemind = useCallback(() => {
     setActiveTab('remind');
     setSelectedCategoryId(null);
-    navigate('/');
+    navigate(ROUTES_CONFIG.remind.path);
   }, [navigate]);
 
   const goBookmarks = useCallback(() => {
     setActiveTab('mybookmark');
     setSelectedCategoryId(null);
-    navigate('/my-bookmarks');
+    navigate(ROUTES_CONFIG.myBookmarks.path);
   }, [navigate]);
 
   const selectCategory = useCallback(
     (id: number, name: string) => {
       setActiveTab('mybookmark');
       setSelectedCategoryId(id);
-      navigate(`/my-bookmarks?id=${id}&category=${name}`);
+      navigate(`${ROUTES_CONFIG.myBookmarks.path}?id=${id}&category=${name}`);
     },
     [navigate]
   );
 
   const goLevel = useCallback(() => {
     setActiveTab('level');
     setSelectedCategoryId(null);
-    navigate('/level');
+    navigate(ROUTES_CONFIG.level.path);
+  }, [navigate]);
+
+  const goJobPins = useCallback(() => {
+    setActiveTab('job-pins');
+    setSelectedCategoryId(null);
+    navigate(ROUTES_CONFIG.jobPins.path);
   }, [navigate]);
 
   return {
@@ -68,6 +81,7 @@ export function useSidebarNav() {
     goBookmarks,
     selectCategory,
     goLevel,
+    goJobPins,
     setSelectedCategoryId,
     setActiveTab,
   };

packages/design-system/src/icons/iconNames.ts

@@ -18,6 +18,9 @@ export const iconNames = [
   'ic_details_disable',
   'ic_extension',
   'ic_info',
+  'ic_pin',
+  'ic_pin_active',
+  'ic_pin_disable',
   'ic_plus',
   'instagram',
   'logo',