diff --git a/apps/client/src/pages/jobPins/JobPins.tsx b/apps/client/src/pages/jobPins/JobPins.tsx new file mode 100644 index 00000000..b6ff90be --- /dev/null +++ b/apps/client/src/pages/jobPins/JobPins.tsx @@ -0,0 +1,5 @@ +const JobPins = () => { + return
관심 직무 핀 페이지
; +}; + +export default JobPins; diff --git a/apps/client/src/routes/router.tsx b/apps/client/src/routes/router.tsx index 26955bd1..e1fac835 100644 --- a/apps/client/src/routes/router.tsx +++ b/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: , }, + { + path: ROUTES_CONFIG.jobPins.path, + element: , + }, ], }, ]); diff --git a/apps/client/src/routes/routesConfig.ts b/apps/client/src/routes/routesConfig.ts index 1c2b18d5..91566dcf 100644 --- a/apps/client/src/routes/routesConfig.ts +++ b/apps/client/src/routes/routesConfig.ts @@ -35,4 +35,8 @@ export const ROUTES_CONFIG = { title: '이용약관', path: '/terms', }, + jobPins: { + title: '관심 직무 핀', + path: '/job-pins', + }, }; diff --git a/apps/client/src/shared/components/sidebar/SideItem.tsx b/apps/client/src/shared/components/sidebar/SideItem.tsx index 6db49b9d..cd27430b 100644 --- a/apps/client/src/shared/components/sidebar/SideItem.tsx +++ b/apps/client/src/shared/components/sidebar/SideItem.tsx @@ -5,6 +5,7 @@ import { IconToken } from './types/IconTokenType'; const ICON_MAP: Record = { 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 { diff --git a/apps/client/src/shared/components/sidebar/Sidebar.tsx b/apps/client/src/shared/components/sidebar/Sidebar.tsx index a99de3bf..8a6807a6 100644 --- a/apps/client/src/shared/components/sidebar/Sidebar.tsx +++ b/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() { {/* 메뉴 영역 */}
+ { + closeMenu(); + goJobPins(); + }} + /> { const path = location.pathname; - if (path.startsWith('/my-bookmarks')) { + if (path.startsWith(ROUTES_CONFIG.myBookmarks.path)) { setActiveTab('mybookmark'); const id = searchParams.get('id'); @@ -25,32 +26,38 @@ 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] ); @@ -58,7 +65,13 @@ export function useSidebarNav() { 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, }; diff --git a/packages/design-system/src/icons/iconNames.ts b/packages/design-system/src/icons/iconNames.ts index 5543bebe..894a3353 100644 --- a/packages/design-system/src/icons/iconNames.ts +++ b/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', diff --git a/packages/design-system/src/icons/source/ic_pin.svg b/packages/design-system/src/icons/source/ic_pin.svg new file mode 100644 index 00000000..39704489 --- /dev/null +++ b/packages/design-system/src/icons/source/ic_pin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/design-system/src/icons/source/ic_pin_active.svg b/packages/design-system/src/icons/source/ic_pin_active.svg new file mode 100644 index 00000000..ebe617d3 --- /dev/null +++ b/packages/design-system/src/icons/source/ic_pin_active.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/design-system/src/icons/source/ic_pin_disable.svg b/packages/design-system/src/icons/source/ic_pin_disable.svg new file mode 100644 index 00000000..603b3c4a --- /dev/null +++ b/packages/design-system/src/icons/source/ic_pin_disable.svg @@ -0,0 +1 @@ + \ No newline at end of file