diff --git a/frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx b/frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx index 354ce363a..be6f55001 100644 --- a/frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx +++ b/frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx @@ -1,11 +1,10 @@ -import useMixpanelTrack from '@/hooks/useMixpanelTrack'; import styled from 'styled-components'; import { useNavigate, useParams } from 'react-router-dom'; import { useGetClubDetail } from '@/hooks/queries/club/useGetClubDetail'; - -interface ButtonProps { - isRecruiting: boolean; -} +import getApplication from '@/apis/application/getApplication'; +import { parseRecruitmentPeriod } from '@/utils/recruitmentPeriodParser'; +import getDeadlineText from '@/utils/getDeadLineText'; +import useMixpanelTrack from '@/hooks/useMixpanelTrack'; const Button = styled.button` display: flex; @@ -36,20 +35,45 @@ const Button = styled.button` } `; -const ClubApplyButton = ({ isRecruiting }: ButtonProps) => { +const ClubApplyButton = () => { const { clubId } = useParams<{ clubId: string }>(); - const trackEvent = useMixpanelTrack(); const navigate = useNavigate(); + const trackEvent = useMixpanelTrack(); + + const { data: clubDetail } = useGetClubDetail(clubId!); + + const handleClick = async () => { + if (!clubId || !clubDetail) return; - const handleClick = () => { trackEvent('Club Apply Button Clicked'); - //TODO: 지원서를 작성한 동아리의 경우에만 리다이렉트 - if (!isRecruiting) { - alert('지원모집이 마감되었습니다. 다음에 지원해 주세요.'); + const { recruitmentStart, recruitmentEnd } = parseRecruitmentPeriod( + clubDetail.recruitmentPeriod, + ); + const deadlineText = getDeadlineText( + recruitmentStart, + recruitmentEnd, + new Date(), + ); + + if (deadlineText === '모집 마감') { + alert(`현재 ${clubDetail.name} 동아리는 모집 기간이 아닙니다.`); return; } - navigate(`/application/${clubId}`); + + // 모아동 지원서 확인 + try { + await getApplication(clubId); + navigate(`/application/${clubId}`); + } catch (err: unknown) { + const externalFormLink = clubDetail.externalApplicationUrl?.trim(); + + if (externalFormLink) { + window.open(externalFormLink, '_blank', 'noopener,noreferrer'); + } else { + alert('동아리 모집 정보를 확인해주세요.'); + } + } }; return ; diff --git a/frontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.tsx b/frontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.tsx index 8658043ff..2d9fef9f8 100644 --- a/frontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.tsx +++ b/frontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.tsx @@ -11,9 +11,7 @@ interface ClubDetailFooterProps { } const ClubDetailFooter = ({ - recruitmentPeriod, - recruitmentForm, - presidentPhoneNumber, + recruitmentPeriod }: ClubDetailFooterProps) => { const { recruitmentStart, recruitmentEnd } = parseRecruitmentPeriod(recruitmentPeriod); @@ -24,10 +22,10 @@ const ClubDetailFooter = ({ new Date(), ); - return ( + return ( - + ); }; diff --git a/frontend/src/pages/ClubDetailPage/components/ClubDetailHeader/ClubDetailHeader.tsx b/frontend/src/pages/ClubDetailPage/components/ClubDetailHeader/ClubDetailHeader.tsx index 1ff8fc348..1a84577d7 100644 --- a/frontend/src/pages/ClubDetailPage/components/ClubDetailHeader/ClubDetailHeader.tsx +++ b/frontend/src/pages/ClubDetailPage/components/ClubDetailHeader/ClubDetailHeader.tsx @@ -1,8 +1,7 @@ import * as Styled from './ClubDetailHeader.styles'; import ClubProfile from '@/pages/ClubDetailPage/components/ClubProfile/ClubProfile'; import ClubApplyButton from '@/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton'; -import { parseRecruitmentPeriod } from '@/utils/recruitmentPeriodParser'; -import getDeadlineText from '@/utils/getDeadLineText'; + interface ClubDetailHeaderProps { name: string; category: string; @@ -20,19 +19,7 @@ const ClubDetailHeader = ({ division, tags, logo, - recruitmentPeriod, - recruitmentForm, - presidentPhoneNumber, }: ClubDetailHeaderProps) => { - const { recruitmentStart, recruitmentEnd } = - parseRecruitmentPeriod(recruitmentPeriod); - - const deadlineText = getDeadlineText( - recruitmentStart, - recruitmentEnd, - new Date(), - ); - return ( - + ); }; diff --git a/frontend/src/types/club.ts b/frontend/src/types/club.ts index 8d17560a7..52735e1ff 100644 --- a/frontend/src/types/club.ts +++ b/frontend/src/types/club.ts @@ -23,6 +23,7 @@ export interface ClubDetail extends Club { recruitmentPeriod: string; recruitmentTarget: string; socialLinks: Record; + externalApplicationUrl?: string; } export interface ClubDescription {