[feature] 동아리 한글 표시 이름 추가 -FE

frontend/src/App.tsx

@@ -55,6 +55,11 @@ const App = () => {
                   path='/clubDetail/:clubId'
                   element={<ClubDetailPage />}
                 />
+                {/*한국어핸들 */}
+                <Route
+                  path='/clubDetail/@:clubName'
+                  element={<ClubDetailPage />}
+                />
                 {/*새로 빌드해서 배포할 앱 주소 url*/}
                 <Route
                   path='/webview/club/:clubId'

frontend/src/constants/queryKeys.ts

@@ -11,7 +11,7 @@ export const queryKeys = {
   },
   club: {
     all: ['clubs'] as const,
-    detail: (clubId: string) => ['clubDetail', clubId] as const,
+    detail: (clubParam: string) => ['clubDetail', clubParam] as const,
     list: (
       keyword: string,
       recruitmentStatus: string,

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<ClubDetail>({
-    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,

frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx

@@ -60,7 +60,11 @@ const ApplicationFormPage = () => {
   if (isLoading) return <Spinner />;
   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네트워크 상태를 확인하거나 잠시 후 다시 시도해 주세요.',

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);
 

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);
   };