feat: navigation util을 POC 해봐요

src/features/Community/CommunityOutlet/index.tsx

@@ -4,8 +4,10 @@ import SearchBox from '@/components/timetable/SearchBox'
 import CommunityPostDetail from '@/features/Community/CommunityPostDetail'
 import { Button } from '@/ui/Button'
 import { Typography } from '@/ui/Typography'
+import { useNavigateRouter } from '@/util/hooks/useNavigateRouter'
 
 const CommunityOutlet = () => {
+  const navigateTo = useNavigateRouter()
   return (
     <div className={s.Wrapper}>
       <div className={s.LeftWrapper}>
@@ -17,7 +19,9 @@ const CommunityOutlet = () => {
                 Check out our recent posts
               </Typography>
             </div>
-            <Button variant="red">Create post</Button>
+            <Button variant="red" onClick={() => navigateTo('WritePostPage', { type: 'write', boardName: 'all' })}>
+              Create post
+            </Button>
           </div>
           <SearchBox initialKeyword={''} placeholder={'Search posts from entire board'} onSubmit={() => {}} />
         </div>

src/features/HomeClubs/components/HotClubs/index.tsx

@@ -1,14 +1,14 @@
 import { motion } from 'framer-motion'
-import { useNavigate } from 'react-router-dom'
 
 import * as s from '../Clubs/style.css'
 
 import { useReadHotClubs } from '@/features/HomeClubs/hooks/useReadHotClubs'
 import { Typography } from '@/ui/Typography'
+import { useNavigateRouter } from '@/util/hooks/useNavigateRouter'
+
 const HotClubs = () => {
   const { data: hotClubs } = useReadHotClubs()
-  const navigate = useNavigate()
-  const handleClick = (id: number) => navigate(`/club/detail/${id}`)
+  const navigateTo = useNavigateRouter()
 
   return (
     <motion.div
@@ -20,7 +20,11 @@ const HotClubs = () => {
       transition={{ duration: 0.2, ease: 'easeInOut' }}
     >
       {hotClubs.map(item => (
-        <button key={item.name} className={s.ItemBox} onClick={() => handleClick(item.clubId)}>
+        <button
+          key={item.name}
+          className={s.ItemBox}
+          onClick={() => navigateTo('ClubDetailPage', { clubId: String(item.clubId) })}
+        >
           <img className={s.ItemImage} src={item.imageUrl} alt={item.name} />
           <div className={s.Description}>
             <div className={s.DescriptionText}>

src/features/HomeClubs/components/RecommendedClubs/index.tsx

@@ -1,16 +1,14 @@
 import { motion } from 'framer-motion'
-import { useNavigate } from 'react-router-dom'
 
 import * as s from '../Clubs/style.css'
 
 import { useReadRecommendedClubs } from '@/features/HomeClubs/hooks/useReadRecommendedClubs'
 import { Typography } from '@/ui/Typography'
-
+import { useNavigateRouter } from '@/util/hooks/useNavigateRouter'
 const RecommendedClubs = () => {
   const { data: recommendedClubs } = useReadRecommendedClubs()
 
-  const navigate = useNavigate()
-  const handleClick = (id: number) => navigate(`/club/detail/${id}`)
+  const navigateTo = useNavigateRouter()
 
   return (
     <motion.div
@@ -22,7 +20,11 @@ const RecommendedClubs = () => {
       transition={{ duration: 0.2, ease: 'easeInOut' }}
     >
       {recommendedClubs.map(item => (
-        <button key={item.name} className={s.ItemBox} onClick={() => handleClick(item.clubId)}>
+        <button
+          key={item.name}
+          className={s.ItemBox}
+          onClick={() => navigateTo('ClubDetailPage', { clubId: String(item.clubId) })}
+        >
           <img className={s.ItemImage} src={item.imageUrl} alt={item.name} />
           <div className={s.Description}>
             <div className={s.DescriptionText}>

src/lib/router/header-route.ts

@@ -1,6 +1,6 @@
 export const headerRouteConfig = [
   { route: 'home', navName: 'Home' },
   { route: 'timetable', navName: 'Timetable', innerTab: ['timetable', 'timetable/friend'] },
-  { route: 'community', navName: 'Community' },
+  { route: 'community/all?board=All&boardId=0', navName: 'Community' },
   { route: 'matching', navName: '1:1 Matching' },
 ]

src/lib/router/routeConfig.tsx

@@ -0,0 +1,96 @@
+import {
+  BoardPage,
+  ClubDetailPage,
+  ClubPage,
+  CourseInfoPage,
+  CourseReviewPage,
+  FriendPage,
+  FriendTimetablePage,
+  HotBoardPage,
+  MainCommunityPage,
+  MyPage,
+  MyTimetablePage,
+  PostViewPage,
+  ReviewDetailPage,
+  ReviewPage,
+  SchedulePage,
+  TimetablePage,
+  WritePostPage,
+  WriteReviewPage,
+} from '@/lib/router/lazy-route'
+import CommunityAllPage from '@/pages/Community/All'
+import HomePage from '@/pages/Home'
+import LandingPage from '@/pages/LandingPage'
+import Login from '@/pages/LoginPage'
+import PasswordResetPage from '@/pages/PasswordResetPage'
+import RegisterPage from '@/pages/RegisterPage'
+
+export const routeConfig = {
+  // 메인 페이지
+  LandingPage: { path: '/', element: <LandingPage />, params: [] },
+  HomePage: { path: 'home', element: <HomePage />, params: [] },
+
+  // 인증 관련
+  Login: { path: 'login', element: <Login />, params: [] },
+  RegisterPage: { path: 'register', element: <RegisterPage />, params: [] },
+  PasswordResetPage: { path: 'password-reset', element: <PasswordResetPage />, params: [] },
+
+  // 마이페이지
+  MyPage: { path: 'mypage', element: <MyPage />, params: [] },
+
+  // 시간표
+  TimetablePage: { path: '/timetable', element: <TimetablePage />, params: [] },
+  MyTimetablePage: { path: '/timetable', element: <MyTimetablePage />, params: [] },
+  FriendPage: { path: '/timetable/friend', element: <FriendPage />, params: [] },
+  FriendTimetablePage: {
+    path: 'timetable/friend/:userHandler',
+    params: ['userHandler'],
+    element: <FriendTimetablePage />,
+  },
+
+  // 강의 리뷰
+  CourseReviewPage: { path: '/course-review', element: <CourseReviewPage />, params: [] },
+  CourseInfoPage: { path: '/course-review/info', element: <CourseInfoPage />, params: [] },
+  ReviewPage: { path: '/course-review/detail', element: <ReviewPage />, params: [] },
+  ReviewDetailPage: { path: '/course-review/review', element: <ReviewDetailPage />, params: [] },
+  WriteReviewPage: { path: '/course-review/write', element: <WriteReviewPage />, params: [] },
+
+  // 커뮤니티
+  MainCommunityPage: { path: '/community', element: <MainCommunityPage />, params: [] },
+  CommunityAllPage: { path: '/community/all', element: <CommunityAllPage />, params: [] },
+  WritePostPage: {
+    path: '/community/action/:type/post/:boardName',
+    params: ['type', 'boardName'],
+    element: <WritePostPage />,
+  },
+  BoardPage: {
+    path: '/community/board/:boardName',
+    params: ['boardName'],
+    element: <BoardPage />,
+  },
+  HotBoardPage: { path: '/community/board/hotboard', element: <HotBoardPage />, params: [] },
+  PostViewPage: {
+    path: '/community/:boardName/post/:postId',
+    params: ['boardName', 'postId'],
+    element: <PostViewPage />,
+  },
+
+  // 일정
+  SchedulePage: { path: '/calendar', element: <SchedulePage />, params: [] },
+
+  // 동아리
+  ClubPage: { path: '/club', element: <ClubPage />, params: [] },
+  ClubDetailPage: {
+    path: '/club/detail/:clubId',
+    params: ['clubId'],
+    element: <ClubDetailPage />,
+  },
+} as const
+
+export type RouteKey = keyof typeof routeConfig
+
+export type RouteParams<T extends RouteKey = RouteKey> = (typeof routeConfig)[T]['params'][number]
+
+// 파라미터 배열을 객체 타입으로 변환하는 타입
+export type RouteParamsObject<T extends RouteKey = RouteKey> =
+  RouteParams<T> extends never ? undefined : { [K in RouteParams<T>]: string }

src/lib/router/router.tsx

@@ -1,33 +1,9 @@
 import { RouteObject } from 'react-router-dom'
 
 import MainLayout from '@/components/MainLayout'
-import {
-  BoardPage,
-  ClubDetailPage,
-  ClubPage,
-  CourseInfoPage,
-  CourseReviewPage,
-  FriendPage,
-  FriendTimetablePage,
-  HotBoardPage,
-  MainCommunityPage,
-  MyPage,
-  MyTimetablePage,
-  PostViewPage,
-  ReviewDetailPage,
-  ReviewPage,
-  SchedulePage,
-  TimetablePage,
-  WritePostPage,
-  WriteReviewPage,
-} from '@/lib/router/lazy-route'
 import ProtectedRoutes from '@/lib/router/ProtectedRoutes'
-import CommunityAllPage from '@/pages/Community/All'
-import HomePage from '@/pages/Home'
+import { routeConfig } from '@/lib/router/routeConfig'
 import LandingPage from '@/pages/LandingPage'
-import Login from '@/pages/LoginPage'
-import PasswordResetPage from '@/pages/PasswordResetPage'
-import RegisterPage from '@/pages/RegisterPage'
 
 const routes: RouteObject[] = [
   {
@@ -42,70 +18,68 @@ const routes: RouteObject[] = [
         path: '',
         element: <ProtectedRoutes />,
         children: [
-          { path: 'mypage', element: <MyPage /> },
+          { ...routeConfig.MyPage },
           {
-            path: 'timetable',
-            element: <TimetablePage />,
+            ...routeConfig.TimetablePage,
             children: [
-              { path: '', element: <MyTimetablePage /> },
               {
-                path: 'friend',
-                element: <FriendPage />,
+                ...routeConfig.MyTimetablePage,
+                path: routeConfig.MyTimetablePage.path.replace('/timetable', ''),
+              },
+              {
+                ...routeConfig.FriendPage,
+                path: routeConfig.FriendPage.path.replace('/timetable/', ''),
+              },
+              {
+                ...routeConfig.FriendTimetablePage,
+                path: routeConfig.FriendTimetablePage.path.replace('/timetable/', ''),
               },
-              { path: 'friend/:userHandler', element: <FriendTimetablePage /> },
             ],
           },
           {
-            path: 'course-review',
-            element: <CourseReviewPage />,
+            ...routeConfig.CourseReviewPage,
             children: [
-              { path: 'info', element: <CourseInfoPage /> },
-              { path: 'detail', element: <ReviewPage /> },
-              { path: 'review', element: <ReviewDetailPage /> },
-              { path: 'write', element: <WriteReviewPage /> },
+              {
+                ...routeConfig.CourseInfoPage,
+                path: routeConfig.CourseInfoPage.path.replace('/course-review/', ''),
+              },
+              {
+                ...routeConfig.ReviewPage,
+                path: routeConfig.ReviewPage.path.replace('/course-review/', ''),
+              },
+              {
+                ...routeConfig.ReviewDetailPage,
+                path: routeConfig.ReviewDetailPage.path.replace('/course-review/', ''),
+              },
+              {
+                ...routeConfig.WriteReviewPage,
+                path: routeConfig.WriteReviewPage.path.replace('/course-review/', ''),
+              },
             ],
           },
-          {
-            path: 'community',
-            element: <MainCommunityPage />,
-          },
-          {
-            path: 'community/all',
-            element: <CommunityAllPage />,
-          },
-          {
-            path: 'community/action/:type/post/:boardName',
-            element: <WritePostPage />,
-          },
-          {
-            path: 'community/board/:boardName',
-            element: <BoardPage />,
-          },
-          {
-            path: 'community/board/hotboard',
-            element: <HotBoardPage />,
-          },
-          {
-            path: 'community/:boardName/post/:postId',
-            element: <PostViewPage />,
-          },
+          { ...routeConfig.MainCommunityPage },
+          { ...routeConfig.CommunityAllPage },
+          { ...routeConfig.WritePostPage },
+          { ...routeConfig.BoardPage },
+          { ...routeConfig.HotBoardPage },
+          { ...routeConfig.PostViewPage },
         ],
       },
-      { path: 'home', element: <HomePage /> },
-      { path: 'calendar', element: <SchedulePage /> },
-      { path: 'login', element: <Login /> },
-      { path: 'register', element: <RegisterPage /> },
-      { path: 'password-reset', element: <PasswordResetPage /> },
+      { ...routeConfig.HomePage },
+      { ...routeConfig.SchedulePage },
+      { ...routeConfig.Login },
+      { ...routeConfig.RegisterPage },
+      { ...routeConfig.PasswordResetPage },
       {
         path: 'club',
         children: [
           {
-            path: '',
-            element: <ClubPage />,
+            ...routeConfig.ClubPage,
+            path: routeConfig.ClubPage.path.replace('/club', ''),
           },
           {
-            path: 'detail/:clubId',
-            element: <ClubDetailPage />,
+            ...routeConfig.ClubDetailPage,
+            path: routeConfig.ClubDetailPage.path.replace('/club/', ''),
           },
         ],
       },

src/util/hooks/useNavigateRouter.ts

@@ -0,0 +1,24 @@
+import { useCallback } from 'react'
+import { generatePath, NavigateOptions, useNavigate } from 'react-router-dom'
+
+import { routeConfig, RouteKey, RouteParamsObject } from '@/lib/router/routeConfig'
+
+export const useNavigateRouter = () => {
+  const navigate = useNavigate()
+
+  const navigateTo = useCallback(
+    <T extends RouteKey>(routeName: T, params?: RouteParamsObject<T>, options?: NavigateOptions) => {
+      const route = routeConfig[routeName]
+      // React Router의 generatePath 사용
+      try {
+        const path = generatePath(route.path, params as { [K in (typeof route.params)[number]]: string })
+        navigate(path, options)
+      } catch (error) {
+        console.error(`Failed to generate path for "${routeName}":`, error)
+      }
+    },
+    [navigate],
+  )
+
+  return navigateTo
+}