[release] v1.0.9

frontend/src/components/common/CustomTextArea/CustomTextArea.styles.ts

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 export const TextAreaContainer = styled.div<{ width: string }>`
   width: ${(props) => props.width};
-  min-width: 300px;
+  max-width: 100%;
   display: flex;
   flex-direction: column;
 `;

frontend/src/components/common/InputField/InputField.styles.ts

@@ -2,12 +2,11 @@ import styled from 'styled-components';
 
 export const InputContainer = styled.div<{ width: string; readOnly?: boolean }>`
   width: ${(props) => props.width};
-  min-width: 300px;
+  max-width: 100%;
   display: flex;
   flex-direction: column;
 
   @media (max-width: 768px) {
-    min-width: 0;
     width: 100%;
   }
 `;
@@ -27,7 +26,7 @@ export const InputWrapper = styled.div`
 export const Input = styled.input<{ hasError?: boolean; readOnly?: boolean }>`
   flex: 1;
   height: 45px;
-  padding: 12px 80px 12px 18px;
+  padding: 12px 18px;
   border: 1px solid ${({ hasError }) => (hasError ? 'red' : '#c5c5c5')};
   background-color: transparent;
   border-radius: 6px;

frontend/src/pages/ApplicationFormPage/ApplicationFormPage.styles.ts

@@ -18,11 +18,15 @@ export const FormDescription = styled.div`
   color: #444;
   margin-top: -20px;
   margin-bottom: 48px;
-  padding: 0 15px;
+  padding: 12px 18px;
+  background-color: #f5f5f5;
+  border-radius: 6px;
 
   ${media.mobile} {
     font-size: 0.95rem;
     line-height: 1.5;
+
+    padding: 4px 6px;
   }
 `;
 

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 <Button onClick={handleClick}>지원하기</Button>;

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 ( 
     <Styled.ClubDetailFooterContainer>
       <DeadlineBadge deadlineText={deadlineText} />
-      <ClubApplyButton isRecruiting={deadlineText !== '모집 마감'} />
+      <ClubApplyButton />
     </Styled.ClubDetailFooterContainer>
   );
 };

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 (
     <Styled.ClubDetailHeaderContainer>
       <ClubProfile
@@ -42,7 +29,7 @@ const ClubDetailHeader = ({
         tags={tags}
         logo={logo}
       />
-      <ClubApplyButton isRecruiting={deadlineText !== '모집 마감'} />
+      <ClubApplyButton />
     </Styled.ClubDetailHeaderContainer>
   );
 };

frontend/src/types/club.ts

@@ -23,6 +23,7 @@ export interface ClubDetail extends Club {
   recruitmentPeriod: string;
   recruitmentTarget: string;
   socialLinks: Record<SNSPlatform, string>;
+  externalApplicationUrl?: string;
 }
 
 export interface ClubDescription {