[feature] 동아리 지원서 답변 화면 구현 및 관련 컴포넌트 개발

frontend/src/App.tsx

@@ -14,7 +14,7 @@
 import LoginTab from '@/pages/AdminPage/auth/LoginTab/LoginTab';
 import PrivateRoute from '@/pages/AdminPage/auth/PrivateRoute/PrivateRoute';
 import PhotoEditTab from '@/pages/AdminPage/tabs/PhotoEditTab/PhotoEditTab';
-import ApplicationForm from '@/pages/AdminPage/application/ApplicationForm';
+import AnswerApplicationForm from '@/pages/AdminPage/application/answer/AnswerApplicationForm';
 import CreateApplicationForm from '@/pages/AdminPage/application/CreateApplicationForm';
 
 const queryClient = new QueryClient();
@@ -75,7 +75,17 @@
                 </AdminClubProvider>
               }
             />
-            <Route path='view-application' element={<ApplicationForm />} />
+            {/*//todo /:clubid로 수정 필요*/}
+            {/*<Route*/}
+            {/*  path='/application/:clubid'*/}
+            {/*  element={<AnswerApplicationForm />}*/}
+            {/*/>*/}
+            <Route path='/application' element={<AnswerApplicationForm />} />
+            {/*TODO: CreateForm은 관리자 기능이므로 추후 /admin/* 경로 안으로 이동 필요*/}
+            <Route
+              path='create-application'
+              element={<CreateApplicationForm />}
+            />
             <Route path='*' element={<Navigate to='/' replace />} />
           </Routes>
         </BrowserRouter>

frontend/src/hooks/useAnswers.ts

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { AnswerItem } from '@/types/application';
+
+export const useAnswers = () => {
+  const [answers, setAnswers] = useState<AnswerItem[]>([]);
+
+  const updateSingleAnswer = (id: number, value: string) => {
+    setAnswers((prev) => [
+      ...prev.filter((a) => a.id !== id),
+      { id, answer: value },
+    ]);
+  };
+
+  const updateMultiAnswer = (id: number, values: string[]) => {
+    setAnswers((prev) => [
+      ...prev.filter((a) => a.id !== id),
+      ...values.map((v) => ({ id, answer: v })),
+    ]);
+  };
+
+  const onAnswerChange = (id: number, value: string | string[]) => {
+    if (Array.isArray(value)) {
+      updateMultiAnswer(id, value);
+    } else {
+      updateSingleAnswer(id, value);
+    }
+  };
+
+  const getAnswersById = (id: number) =>
+    answers.filter((a) => a.id === id).map((a) => a.answer);
+
+  return { onAnswerChange, getAnswersById };
+};

frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.styles.ts

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+export const FormTitle = styled.h1`
+  font-size: 2.5rem;
+  font-weight: 700;
+  border: none;
+  outline: none;
+  margin-top: 20px;
+  margin-bottom: 46px;
+`;
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+export const submitButton = styled.button`
+  padding: 10px 56px;
+  background-color: #ff5414;
+  border-radius: 10px;
+  border: none;
+  color: #fff;
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: -0.4px;
+  transition: background-color 0.2s;
+  margin: 50px 0;
+
+  &:hover {
+    background-color: #ffad8e;
+    animation: pulse 0.4s ease-in-out;
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;

frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx

@@ -0,0 +1,52 @@
+import { mockData } from '@/mocks/data/mockData';
+import { PageContainer } from '@/styles/PageContainer.styles';
+import * as Styled from './AnswerApplicationForm.styles';
+import Header from '@/components/common/Header/Header';
+import { useParams } from 'react-router-dom';
+import { useGetClubDetail } from '@/hooks/queries/club/useGetClubDetail';
+import ClubProfile from '@/pages/ClubDetailPage/components/ClubProfile/ClubProfile';
+import { useAnswers } from '@/hooks/useAnswers';
+import QuestionAnswerer from '@/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer';
+
+const AnswerApplicationForm = () => {
+  //const { clubId } = useParams<{ clubId: string }>();
+  const clubId = '67e54ae51cfd27718dd40bec'; // 하드코딩된 club ID
+  const { data: clubDetail, error } = useGetClubDetail(clubId || '');
+  const { onAnswerChange, getAnswersById } = useAnswers();
+  if (!clubDetail) {
+    return null;
+  }
+
+  if (error) {
+    return <div>에러가 발생했습니다.</div>;
+  }
+
+  return (
+    <>
+      <Header />
+      <PageContainer style={{ paddingTop: '172px' }}>
+        <ClubProfile
+          name={clubDetail.name}
+          logo={clubDetail.logo}
+          division={clubDetail.division}
+          category={clubDetail.category}
+          tags={clubDetail.tags}
+        />
+        <Styled.FormTitle>{mockData.form_title}</Styled.FormTitle>
+        {mockData.questions.map((q) => (
+          <QuestionAnswerer
+            key={q.id}
+            question={q}
+            selectedAnswers={getAnswersById(q.id)}
+            onChange={onAnswerChange}
+          />
+        ))}
+        <Styled.ButtonWrapper>
+          <Styled.submitButton>제출하기</Styled.submitButton>
+        </Styled.ButtonWrapper>
+      </PageContainer>
+    </>
+  );
+};
+
+export default AnswerApplicationForm;

frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx

@@ -0,0 +1,65 @@
+import { Question } from '@/types/application';
+import ShortText from '@/pages/AdminPage/application/fields/ShortText';
+import LongText from '@/pages/AdminPage/application/fields/LongText';
+import Choice from '@/pages/AdminPage/application/fields/Choice';
+
+interface QuestionAnswererProps {
+  question: Question;
+  selectedAnswers: string[];
+  onChange: (id: number, value: string | string[]) => void;
+}
+
+const QuestionAnswerer = ({
+  question,
+  selectedAnswers,
+  onChange,
+}: QuestionAnswererProps) => {
+  const baseProps = {
+    id: question.id,
+    title: question.title,
+    description: question.description,
+    required: question.options.required,
+    mode: 'answer' as const,
+  };
+
+  switch (question.type) {
+    case 'NAME':
+    case 'EMAIL':
+    case 'PHONE_NUMBER':
+    case 'SHORT_TEXT':
+      return (
+        <ShortText
+          {...baseProps}
+          answer={selectedAnswers[0] ?? ''}
+          onAnswerChange={(value) => onChange(question.id, value)}
+        />
+      );
+
+    case 'LONG_TEXT':
+      return (
+        <LongText
+          {...baseProps}
+          answer={selectedAnswers[0] ?? ''}
+          onAnswerChange={(value) => onChange(question.id, value)}
+        />
+      );
+
+    case 'CHOICE':
+    case 'MULTI_CHOICE':
+      return (
+        <></>
+        // <Choice
+        //   {...baseProps}
+        //   items={question.items}
+        //   isMulti={question.type === 'MULTI_CHOICE'}
+        //   answer={selectedAnswers}
+        //   onAnswerChange={(value) => onChange(question.id, value)}
+        // />
+      );
+
+    default:
+      return <div>지원하지 않는 질문 유형입니다: {question.type}</div>;
+  }
+};
+
+export default QuestionAnswerer;

frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.styles.ts

@@ -20,7 +20,7 @@ export const QuestionTitleText = styled.input`
   font-size: 1.25rem;
   font-weight: 700;
   line-height: normal;
-  width: 100%;
+  field-sizing: content;
 
   &::placeholder {
     color: #c5c5c5;

frontend/src/types/application.ts

@@ -47,3 +47,8 @@ export interface ApplicationFormData {
   form_title: string;
   questions: Question[];
 }
+
+export interface AnswerItem {
+  id: number;
+  answer: string;
+}