[feature] 지원서 작성/편집 기능 구현 및 질문 컴포넌트 구조화

frontend/src/App.tsx

@@ -14,6 +14,8 @@
 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 CreateForm from '@/pages/AdminPage/application/CreateForm';
 
 const queryClient = new QueryClient();
 
@@ -69,6 +71,9 @@
                 </AdminClubProvider>
               }
             />
+            <Route path='view-application' element={<ApplicationForm />} />
+            {/*TODO: CreateForm은 관리자 기능이므로 추후 /admin/* 경로 안으로 이동 필요*/}
+            <Route path='create-application' element={<CreateForm />} />
             <Route path='*' element={<Navigate to='/' replace />} />
           </Routes>
         </BrowserRouter>

frontend/src/constants/APPLICATION_FORM.ts

@@ -0,0 +1,12 @@
+const APPLICATION_FORM = {
+  SHORT_TEXT: {
+    placeholder: '답변입력란(최대 20자)',
+  },
+  LONG_TEXT: {
+    placeholder: '답변입력란(최대 500자)',
+  },
+  CHOICE: {
+    placeholder: '항목(최대 20자)',
+  },
+} as const;
+export default APPLICATION_FORM;

frontend/src/pages/AdminPage/application/ApplicationForm.tsx

@@ -0,0 +1,71 @@
+// 지원하기 : 지원서 입력 컴포넌트
+// 특정 지원서를 사용자들이 입력할 수 있는 지원서 작성 부분
+// Todo 추후 특정 지원서를 받아서 answer 모드로 렌더링
+import { useState } from 'react';
+import ShortText from '@/pages/AdminPage/application/fields/ShortText';
+import Choice from '@/pages/AdminPage/application/fields/Choice';
+
+interface QuestionData {
+  title: string;
+  description: string;
+  items?: { value: string }[];
+}
+
+interface AnswerData {
+  [id: number]: string;
+}
+
+const ApplicationForm = () => {
+  const [questions] = useState<Record<number, QuestionData>>({
+    1: {
+      title: '이름을 입력해주세요',
+      description: '본명을 입력해 주세요',
+    },
+    2: {
+      title: '자기소개를 해주세요',
+      description: '300자 이내로 입력해주세요',
+    },
+    3: {
+      title: '지원 분야를 선택해주세요',
+      description: '중복 선택은 불가능합니다',
+      items: [
+        { value: '프론트엔드' },
+        { value: '백엔드' },
+        { value: '디자인' },
+      ],
+    },
+    4: {
+      title: '희망하는 활동 시간을 선택해주세요',
+      description: '가장 편한 시간을 골라주세요',
+      items: [],
+    },
+    5: {
+      title: '이전에 프로젝트 경험이 있나요?',
+      description: '간단하게 작성해주세요',
+      items: [{ value: 'React' }],
+    },
+    6: {
+      title: '사용 가능한 기술 스택을 선택해주세요',
+      description: '복수 선택 가능',
+      items: [
+        { value: 'React' },
+        { value: 'Node.js' },
+        { value: 'Python' },
+        { value: 'Figma' },
+      ],
+    },
+  });
+
+  const [answers, setAnswers] = useState<AnswerData>({});
+
+  const handleAnswerChange = (id: number) => (value: string) => {
+    setAnswers((prev) => ({
+      ...prev,
+      [id]: value,
+    }));
+  };
+
+  return <></>;
+};
+
+export default ApplicationForm;

frontend/src/pages/AdminPage/application/CreateForm.tsx

@@ -0,0 +1,142 @@
+// 지원서 제작하기 : 지원서 제작 컴포넌트
+// 지원서 수정과 제작을 맡을 컴포넌트
+// Todo: 질문 삭제 및 질문 추가 기능 구현
+import { useState } from 'react';
+import QuestionBuilder from '@/pages/AdminPage/application/components/QuestionBuilder/QuestionBuilder';
+
+type QuestionType =
+  | 'SHORT_TEXT'
+  | 'LONG_TEXT'
+  | 'CHOICE'
+  | 'MULTI_CHOICE'
+  | 'EMAIL'
+  | 'PHONE_NUMBER'
+  | 'NAME';
+
+type Question = {
+  title: string;
+  description: string;
+  type: QuestionType;
+  options: {
+    required: boolean;
+  };
+  items?: { value: string }[];
+};
+
+const CreateForm = () => {
+  const [questions, setQuestions] = useState<Record<number, Question>>({
+    1: {
+      title: '이름을 입력해주세요',
+      description: '본명을 입력해 주세요',
+      options: {
+        required: true,
+      },
+      type: 'SHORT_TEXT',
+    },
+    2: {
+      title: '지원 분야를 선택해주세요',
+      description: '중복 선택 가능합니다',
+      options: {
+        required: false,
+      },
+      items: [
+        { value: '프론트엔드' },
+        { value: '백엔드' },
+        { value: '디자인' },
+      ],
+      type: 'MULTI_CHOICE',
+    },
+  });
+
+  const handleTitleChange = (id: number) => (value: string) => {
+    setQuestions((prev) => ({
+      ...prev,
+      [id]: {
+        ...prev[id],
+        title: value,
+      },
+    }));
+  };
+
+  const handleDescriptionChange = (id: number) => (value: string) => {
+    setQuestions((prev) => ({
+      ...prev,
+      [id]: {
+        ...prev[id],
+        description: value,
+      },
+    }));
+  };
+
+  const handleItemsChange = (id: number) => (newItems: { value: string }[]) => {
+    setQuestions((prev) => ({
+      ...prev,
+      [id]: {
+        ...prev[id],
+        items: newItems,
+      },
+    }));
+  };
+
+  const handleTypeChange = (id: number) => (newType: QuestionType) => {
+    setQuestions((prev) => {
+      const prevQuestion = prev[id];
+      const isChoiceType = newType === 'CHOICE' || newType === 'MULTI_CHOICE';
+
+      const updatedQuestion: Question = {
+        ...prevQuestion,
+        type: newType,
+      };
+
+      if (isChoiceType) {
+        updatedQuestion.items =
+          !prevQuestion.items || prevQuestion.items.length < 2
+            ? [{ value: '' }, { value: '' }]
+            : prevQuestion.items;
+      } else {
+        delete updatedQuestion.items;
+      }
+
+      return {
+        ...prev,
+        [id]: updatedQuestion,
+      };
+    });
+  };
+
+  const handleRequiredChange = (id: number) => (value: boolean) => {
+    setQuestions((prev) => ({
+      ...prev,
+      [id]: {
+        ...prev[id],
+        options: {
+          ...prev[id].options,
+          required: value,
+        },
+      },
+    }));
+  };
+
+  return (
+    <>
+      {Object.entries(questions).map(([id, question]) => (
+        <QuestionBuilder
+          key={id}
+          id={Number(id)}
+          title={question.title}
+          description={question.description}
+          required={question.options?.required ?? false}
+          items={question.items}
+          onTitleChange={handleTitleChange(Number(id))}
+          onDescriptionChange={handleDescriptionChange(Number(id))}
+          onItemsChange={handleItemsChange(Number(id))}
+          onTypeChange={handleTypeChange(Number(id))}
+          onRequiredChange={handleRequiredChange(Number(id))}
+          type={question.type}
+        />
+      ))}
+    </>
+  );
+};
+
+export default CreateForm;

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

@@ -0,0 +1,101 @@
+import styled from 'styled-components';
+
+export const QuestionMenu = styled.div`
+  display: flex;
+  width: 140px;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+export const RequiredToggleButton = styled.div`
+  display: flex;
+  border: none;
+  padding: 12px 16px;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 0.375rem;
+  background: #f5f5f5;
+  cursor: pointer;
+  margin: 0;
+  color: #787878;
+  font-size: 0.875rem;
+  font-weight: 600;
+`;
+
+export const RequiredToggleCircle = styled.span<{ active?: boolean }>`
+  position: relative;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 1px solid ${(props) => (props.active ? '#ff5000' : '#ccc')};
+  background-color: ${(props) => (props.active ? '#ff5000' : 'white')};
+
+  ${({ active }) =>
+    active &&
+    `
+    background-color: #fff;
+    &::after {
+      content: '';
+      width: 10px;
+      height: 10px;
+      background-color: #ff5000;
+      border-radius: 50%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  `}
+`;
+
+export const DropDownWrapper = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+export const Dropdown = styled.select`
+  display: flex;
+  width: 100%;
+  border: none;
+  padding: 12px 16px;
+  border-radius: 0.375rem;
+  background: #f5f5f5;
+  color: #787878;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  appearance: none;
+`;
+
+export const DropdownIcon = styled.img`
+  position: absolute;
+  top: 50%;
+  right: 19px;
+  transform: translateY(-50%);
+  pointer-events: none;
+`;
+
+export const SelectionToggleWrapper = styled.div`
+  display: flex;
+  background-color: #f7f7f7;
+  border-radius: 0.375rem;
+  padding: 2px;
+`;
+
+export const SelectionToggleButton = styled.button<{ active: boolean }>`
+  border: none;
+  background-color: ${(props) => (props.active ? '#ddd' : 'transparent')};
+  color: #787878;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  padding: 10px;
+  font-weight: 600;
+  cursor: pointer;
+  letter-spacing: -0.42px;
+  white-space: nowrap;
+`;
+
+export const QuestionWrapper = styled.div`
+  display: flex;
+  gap: 36px;
+`;