diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 9feac9a3d..eb0b615f2 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -15,6 +15,7 @@ import ApplicationFormPage from './pages/ApplicationFormPage/ApplicationFormPage import ClubUnionPage from './pages/ClubUnionPage/ClubUnionPage'; import IntroducePage from './pages/IntroducePage/IntroducePage'; import 'swiper/css'; +import LegacyClubDetailPage from './pages/ClubDetailPage/LegacyClubDetailPage'; const queryClient = new QueryClient({ defaultOptions: { @@ -47,8 +48,27 @@ const App = () => { } /> + {/*기존 웹 & 안드로이드 url (android: v1.1.0)*/} + + + } + /> + {/*웹 유저에게 신규 상세페이지 보유주기 위한 임시 url*/} + + + + } + /> + {/*새로 빌드해서 배포할 앱 주소 url*/} + diff --git a/frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx b/frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx index 866a99b21..9f1d12d32 100644 --- a/frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx +++ b/frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx @@ -59,7 +59,7 @@ const ApplicationFormPage = () => { if (isLoading) return ; if (isError || clubError) { alert(applicationError?.message || '문제가 발생했어요.'); - navigate(`/club/${clubId}`); + navigate(`/clubDetail/${clubId}`); return null; } if (!formData || !clubDetail || !formData.questions) { @@ -110,7 +110,7 @@ const ApplicationFormPage = () => { alert( `"${clubDetail.name}" 동아리에 성공적으로 지원되었습니다.\n좋은 결과 있으시길 바랍니다`, ); - navigate(`/club/${clubId}`, { replace: true }); + navigate(`/clubDetail/${clubId}`, { replace: true }); } catch (error) { alert( '답변 제출에 실패했어요.\n네트워크 상태를 확인하거나 잠시 후 다시 시도해 주세요.', diff --git a/frontend/src/pages/ClubDetailPage/LegacyClubDetailPage.tsx b/frontend/src/pages/ClubDetailPage/LegacyClubDetailPage.tsx new file mode 100644 index 000000000..af4d69c3d --- /dev/null +++ b/frontend/src/pages/ClubDetailPage/LegacyClubDetailPage.tsx @@ -0,0 +1,112 @@ +import { useCallback } from 'react'; +import { useParams, useSearchParams } from 'react-router-dom'; +import Footer from '@/components/common/Footer/Footer'; +import Header from '@/components/common/Header/Header'; +import { PAGE_VIEW, USER_EVENT } from '@/constants/eventName'; +import useMixpanelTrack from '@/hooks/Mixpanel/useMixpanelTrack'; +import useTrackPageView from '@/hooks/Mixpanel/useTrackPageView'; +import { useGetClubDetail } from '@/hooks/Queries/useClub'; +import useDevice from '@/hooks/useDevice'; +import ClubFeed from '@/pages/ClubDetailPage/components/ClubFeed/ClubFeed'; +import ClubIntroContent from '@/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent'; +import ClubProfileCard from '@/pages/ClubDetailPage/components/ClubProfileCard/ClubProfileCard'; +import * as Styled from './ClubDetailPage.styles'; +import ClubDetailFooter from './components/ClubDetailFooter/ClubDetailFooter'; + +export const TAB_TYPE = { + INTRO: 'intro', + PHOTOS: 'photos', +} as const; + +type TabType = (typeof TAB_TYPE)[keyof typeof TAB_TYPE]; + +const LegacyClubDetailPage = () => { + const trackEvent = useMixpanelTrack(); + + const [searchParams, setSearchParams] = useSearchParams(); + const tabParam = searchParams.get('tab') as TabType | null; + + const activeTab: TabType = + tabParam && Object.values(TAB_TYPE).includes(tabParam) + ? tabParam + : TAB_TYPE.INTRO; + + const { clubId } = useParams<{ clubId: string }>(); + const { isMobile, isTablet, isLaptop, isDesktop } = useDevice(); + + const { data: clubDetail, error } = useGetClubDetail(clubId || ''); + + useTrackPageView(PAGE_VIEW.CLUB_DETAIL_PAGE, clubDetail?.name, !clubDetail); + + const handleTabClick = useCallback( + (tabKey: TabType) => { + setSearchParams({ tab: tabKey }, { replace: true }); + trackEvent( + tabKey === TAB_TYPE.INTRO + ? USER_EVENT.CLUB_INTRO_TAB_CLICKED + : USER_EVENT.CLUB_FEED_TAB_CLICKED + ); + }, + [setSearchParams, trackEvent] + ); + + if (error) { + return
동아리 정보를 불러오는데 실패했습니다.
; + } + + if (!clubDetail) { + return null; + } + + return ( + <> +
+ + + + + + + handleTabClick(TAB_TYPE.INTRO)} + > + 소개 내용 + + handleTabClick(TAB_TYPE.PHOTOS)} + > + 활동사진 + + + + +
+ +
+
+ +
+
+
+
+
+