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