diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c706e136e..ec708e871 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -55,6 +55,11 @@ const App = () => { path='/clubDetail/:clubId' element={} /> + {/*한국어핸들 */} + } + /> {/*새로 빌드해서 배포할 앱 주소 url*/} ['clubDetail', clubId] as const, + detail: (clubParam: string) => ['clubDetail', clubParam] as const, list: ( keyword: string, recruitmentStatus: string, diff --git a/frontend/src/hooks/Queries/useClub.ts b/frontend/src/hooks/Queries/useClub.ts index 0f67c6273..5e57e9dd3 100644 --- a/frontend/src/hooks/Queries/useClub.ts +++ b/frontend/src/hooks/Queries/useClub.ts @@ -21,12 +21,12 @@ interface UseGetCardListProps { division: string; } -export const useGetClubDetail = (clubId: string) => { +export const useGetClubDetail = (clubParam: string) => { return useQuery({ - queryKey: queryKeys.club.detail(clubId), - queryFn: () => getClubDetail(clubId as string), + queryKey: queryKeys.club.detail(clubParam), + queryFn: () => getClubDetail(clubParam as string), staleTime: 60 * 1000, - enabled: !!clubId, + enabled: !!clubParam, select: (data) => ({ ...data, diff --git a/frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx b/frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx index a2fe744f0..149a0b40d 100644 --- a/frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx +++ b/frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx @@ -60,7 +60,11 @@ const ApplicationFormPage = () => { if (isLoading) return ; if (isError || clubError) { alert(applicationError?.message || '문제가 발생했어요.'); - navigate(`/clubDetail/${clubId}`); + if (clubDetail?.name) { + navigate(`/clubDetail/@${clubDetail?.name}`); + } else { + navigate(`/`); + } return null; } if (!formData || !clubDetail || !formData.questions) { @@ -111,7 +115,7 @@ const ApplicationFormPage = () => { alert( `"${clubDetail.name}" 동아리에 성공적으로 지원되었습니다.\n좋은 결과 있으시길 바랍니다`, ); - navigate(`/clubDetail/${clubId}`, { replace: true }); + navigate(`/clubDetail/@${clubDetail.name}`, { replace: true }); } catch (error) { alert( '답변 제출에 실패했어요.\n네트워크 상태를 확인하거나 잠시 후 다시 시도해 주세요.', diff --git a/frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx b/frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx index 0064b63f0..8724c5260 100644 --- a/frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx +++ b/frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx @@ -36,11 +36,16 @@ const ClubDetailPage = () => { ? tabParam : TAB_TYPE.INTRO; - const { clubId } = useParams<{ clubId: string }>(); + const { clubId, clubName } = useParams<{ + clubId: string; + clubName: string; + }>(); const { isMobile, isTablet, isLaptop, isDesktop } = useDevice(); const showTopBar = isMobile || isTablet; - const { data: clubDetail, error } = useGetClubDetail(clubId || ''); + const { data: clubDetail, error } = useGetClubDetail( + (clubName ?? clubId) || '', + ); useTrackPageView(PAGE_VIEW.CLUB_DETAIL_PAGE, clubDetail?.name, !clubDetail); diff --git a/frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx b/frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx index 4b8a17533..f2c75be4e 100644 --- a/frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx +++ b/frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx @@ -23,7 +23,7 @@ const ClubCard = ({ club }: { club: Club }) => { setTimeout(() => { setIsClicked(false); - navigate(`/clubDetail/${club.id}`); + navigate(`/clubDetail/@${club.name}`); }, 150); };