Merge pull request #409 from kakao-tech-campus-3rd-step3/feat/interview-status-option#408

kanghaeun · web-flow · commit dd7c2d8d7644 · 2026-01-22T23:22:20.000+09:00
[FEAT] 지원폼 생성 페이지에 면접 전형 옵션 기능 추가(#408)
diff --git a/src/app/mocks/repositories/applyForm.ts b/src/app/mocks/repositories/applyForm.ts
@@ -5,6 +5,7 @@ const applyForms: Record<string, ApplicationFormData> = {
     title: '카태켐 12기 지원서',
     description: '카카오테크 캠퍼스 12기 모집을 위한 지원서입니다.',
     recruitDate: '2025-03-01 ~ 2025-03-31',
+    interviewRequired: false,
     formQuestions: [
       {
         questionNum: 1,
@@ -29,20 +30,6 @@ const applyForms: Record<string, ApplicationFormData> = {
         optionList: [{ value: 'JAVA' }, { value: 'C' }, { value: 'C++' }],
         displayOrder: 3,
       },
-      {
-        questionNum: 4,
-        question: '면접 시간을 설정해주세요.',
-        fieldType: 'TIME_SLOT',
-        isRequired: true,
-        displayOrder: 4,
-        timeSlotOptions: {
-          date: '2025-09-24 ~ 2025-09-25',
-          availableTime: {
-            start: '10:00',
-            end: '21:00',
-          },
-        },
-      },
     ],
   },
 };
diff --git a/src/pages/Routes.tsx b/src/pages/Routes.tsx
@@ -10,7 +10,7 @@ import { MainPage } from '@/pages/user/Main/Page.tsx';
 import { NoticeDetailPage } from '@/pages/user/Notice/DetailPage';
 import { NoticeListPage } from '@/pages/user/Notice/Page';
 import { ApplicationDetailPage } from './admin/ApplicationDetail/Page';
-import { ApplicationFormBuilder } from './admin/ApplicationFormBuilder/Page';
+import { ApplicationFormBuilderPage } from './admin/ApplicationFormBuilder/Page';
 import { KakaoCallback } from './admin/Login/KakaoCallback';
 import { LoginPage } from './admin/Login/Page';
 import { AdminSignupPage } from './admin/Signup/Page';
@@ -69,7 +69,7 @@ export const router = createBrowserRouter([
           },
           {
             path: ADMIN.APPLICATION_FORM_BUILDER,
-            element: <ApplicationFormBuilder />,
+            element: <ApplicationFormBuilderPage />,
           },
         ],
       },
diff --git a/src/pages/admin/ApplicationFormBuilder/Page.tsx b/src/pages/admin/ApplicationFormBuilder/Page.tsx
@@ -12,10 +12,9 @@ import { ApplicationFieldsFormTableSection } from './components/FieldsFormTableS
 import { ApplicationFormBuilderHeaderSection } from './components/HeaderSection';
 import type { ApplicationFormData } from './types/fieldType';
 
-export const ApplicationFormBuilder = () => {
+export const ApplicationFormBuilderPage = () => {
   const { clubId } = useParams();
   const [isEditMode, setIsEditMode] = useState(false);
-
   const { data, isLoading, error } = useAdaptedApplicationForm(Number(clubId));
   const { adaptedPatchForm } = useAdaptedPatchApplicationForm(Number(clubId));
 
@@ -24,6 +23,7 @@ export const ApplicationFormBuilder = () => {
       title: '',
       description: '',
       recruitDate: '',
+      interviewRequired: false,
       formQuestions: [],
     },
   });
@@ -50,6 +50,38 @@ export const ApplicationFormBuilder = () => {
     });
   });
 
+  const isInterviewMode = formHandler.watch('interviewRequired');
+  const handleInterviewChange = (checked: boolean) => {
+    formHandler.setValue('interviewRequired', checked);
+
+    const currentQuestions = formHandler.getValues('formQuestions');
+
+    if (checked) {
+      const filteredQuestions = currentQuestions.filter((q) => q.fieldType !== 'TIME_SLOT');
+      formHandler.setValue('formQuestions', [
+        {
+          questionNum: 1,
+          fieldType: 'TIME_SLOT',
+          displayOrder: 1,
+          question: '면접 가능한 시간을 선택해주세요',
+          isRequired: true,
+          optionList: [],
+          timeSlotOptions: {
+            date: '',
+            availableTime: { start: '09:00:00', end: '18:00:00' },
+          },
+        },
+        ...filteredQuestions.map((q, i) => ({ ...q, questionNum: i + 2, displayOrder: i + 2 })),
+      ]);
+    } else {
+      const filtered = currentQuestions.filter((q) => q.fieldType !== 'TIME_SLOT');
+      formHandler.setValue(
+        'formQuestions',
+        filtered.map((q, i) => ({ ...q, questionNum: i + 1, displayOrder: i + 1 })),
+      );
+    }
+  };
+
   if (isLoading) return <LoadingSpinner />;
   if (error) return <div>에러발생 : {error.message}</div>;
 
@@ -61,8 +93,11 @@ export const ApplicationFormBuilder = () => {
           onEdit={handleEdit}
           onSave={handleSave}
           onCancel={handleCancel}
+          isInterviewMode={isInterviewMode}
+          onInterviewChange={handleInterviewChange}
         />
         <ApplicationInfoSection formHandler={formHandler} isEditMode={isEditMode} />
+
         <ApplicationFieldsFormTableSection formHandler={formHandler} isEditMode={isEditMode} />
       </ContentContainer>
     </Layout>
diff --git a/src/pages/admin/ApplicationFormBuilder/components/ApplicationInfoSection/index.tsx b/src/pages/admin/ApplicationFormBuilder/components/ApplicationInfoSection/index.tsx
@@ -42,7 +42,7 @@ export const ApplicationInfoSection = ({ formHandler, isEditMode }: Props) => {
   return (
     <>
       <Global styles={datePickerStyles} />
-      <Layout>
+      <Layout isEditMode={isEditMode}>
         <Wrapper>
           <UnderlineInputField
             placeholder='ex. 동아리명 10기 신입부원 모집'
@@ -93,16 +93,17 @@ export const ApplicationInfoSection = ({ formHandler, isEditMode }: Props) => {
   );
 };
 
-const Layout = styled.div(({ theme }) => ({
+const Layout = styled.div<{ isEditMode: boolean }>(({ theme, isEditMode }) => ({
   width: '100%',
   border: `1px solid ${theme.colors.gray200}`,
   borderRadius: theme.radius.sm,
   padding: '1.5rem',
-  backgroundColor: 'white',
+  backgroundColor: isEditMode ? theme.colors.bg : theme.colors.gray00,
   display: 'flex',
   flexDirection: 'column',
   gap: '2.5rem',
   boxSizing: 'border-box',
+  cursor: 'auto',
 
   [`@media (max-width: ${theme.breakpoints.mobile})`]: {
     padding: '1rem',
diff --git a/src/pages/admin/ApplicationFormBuilder/components/FieldsFormTableSection/FormFieldItem/Builders/TimeslotFieldBuilder.tsx b/src/pages/admin/ApplicationFormBuilder/components/FieldsFormTableSection/FormFieldItem/Builders/TimeslotFieldBuilder.tsx
@@ -8,6 +8,7 @@ import { datePickerStyles } from '@/pages/admin/ApplicationFormBuilder/styles/da
 import * as S from '@/pages/admin/ApplicationFormBuilder/styles/timeslot.styled';
 import { generateTimes } from '@/pages/admin/ApplicationFormBuilder/utils/generateTimes';
 import { Dropdown } from '@/shared/components/Dropdown';
+import { OutlineInputField } from '@/shared/components/Form/InputField/OutlineInputField';
 import { Text } from '@/shared/components/Text';
 import type { CustomInputProps } from '@/pages/admin/ApplicationFormBuilder/types/clubInfo';
 import type { ApplicationFormData } from '@/pages/admin/ApplicationFormBuilder/types/fieldType';
@@ -27,7 +28,12 @@ const CustomInput = ({ value, onClick }: CustomInputProps) => (
 );
 
 export const TimeslotFieldBuilder = ({ formHandler, questionIndex, isEditMode }: Props) => {
-  const { register, setValue, watch } = formHandler;
+  const {
+    register,
+    setValue,
+    watch,
+    formState: { errors },
+  } = formHandler;
 
   const timeSlotDate = watch(`formQuestions.${questionIndex}.timeSlotOptions.date`);
 
@@ -54,7 +60,19 @@ export const TimeslotFieldBuilder = ({ formHandler, questionIndex, isEditMode }:
   return (
     <>
       <Global styles={datePickerStyles} />
-      <S.Layout>
+      <S.HeaderWrapper>
+        <OutlineInputField
+          placeholder='질문 내용을 입력하세요.'
+          {...register(`formQuestions.${questionIndex}.question`, {
+            required: '질문 내용을 입력해주세요.',
+            minLength: { value: 1, message: '질문 내용은 최소 한 글자 이상 입력해야 합니다.' },
+          })}
+          invalid={!!errors.formQuestions?.[questionIndex]?.question}
+          message={errors.formQuestions?.[questionIndex]?.question?.message}
+          disabled={!isEditMode}
+        />
+      </S.HeaderWrapper>
+      <S.Container>
         <S.DatePickerWrapper>
           <DatePicker
             locale={ko}
@@ -71,9 +89,14 @@ export const TimeslotFieldBuilder = ({ formHandler, questionIndex, isEditMode }:
           <input
             type='hidden'
             {...register(`formQuestions.${questionIndex}.timeSlotOptions.date`, {
-              required: '모집 기간을 선택해주세요',
+              required: '면접 기간을 선택해주세요',
             })}
           />
+          {errors.formQuestions?.[questionIndex]?.timeSlotOptions?.date && (
+            <S.ErrorMessage>
+              {errors.formQuestions[questionIndex].timeSlotOptions.date.message}
+            </S.ErrorMessage>
+          )}
         </S.DatePickerWrapper>
 
         <S.TimeSelectContainer>
@@ -96,7 +119,7 @@ export const TimeslotFieldBuilder = ({ formHandler, questionIndex, isEditMode }:
             />
           </S.TimeSelectWrapper>
         </S.TimeSelectContainer>
-      </S.Layout>
+      </S.Container>
     </>
   );
 };
diff --git a/src/pages/admin/ApplicationFormBuilder/components/FieldsFormTableSection/FormFieldItem/index.tsx b/src/pages/admin/ApplicationFormBuilder/components/FieldsFormTableSection/FormFieldItem/index.tsx
@@ -11,7 +11,6 @@ import { OutlineInputField } from '@/shared/components/Form/InputField/OutlineIn
 import { CheckboxOptionsBuilder } from './Builders/CheckboxOptionsBuilder';
 import { RadioOptionsBuilder } from './Builders/RadioOptionsBuilder';
 import { TextOptionsBuilder } from './Builders/TextOptionsBuilder';
-import { TimeslotFieldBuilder } from './Builders/TimeslotFieldBuilder';
 import type {
   QuestionType,
   ApplicationFormData,
@@ -23,7 +22,7 @@ type Props = {
   onRemove?: () => void;
   isEditMode: boolean;
 };
-const fieldTypes: QuestionType[] = ['텍스트', '라디오', '체크박스', '타임슬롯'];
+const fieldTypes: QuestionType[] = ['텍스트', '라디오', '체크박스'];
 
 export const FormFieldItem = ({ formHandler, index, onRemove, isEditMode }: Props) => {
   const {
@@ -40,7 +39,18 @@ export const FormFieldItem = ({ formHandler, index, onRemove, isEditMode }: Prop
 
   const questionType = watch(`formQuestions.${index}.fieldType`);
 
-  const currentDisplayType = reverseTypeMapping[questionType] || '텍스트';
+  const getDisplayType = (qType: typeof questionType): QuestionType => {
+    switch (qType) {
+      case 'TEXT':
+      case 'RADIO':
+      case 'CHECKBOX':
+        return reverseTypeMapping[qType];
+      case 'TIME_SLOT':
+      default:
+        return '텍스트';
+    }
+  };
+  const currentDisplayType = getDisplayType(questionType);
 
   const renderOptionsBuilder = () => {
     switch (currentDisplayType) {
@@ -62,14 +72,7 @@ export const FormFieldItem = ({ formHandler, index, onRemove, isEditMode }: Prop
             isEditMode={isEditMode}
           />
         );
-      case '타임슬롯':
-        return (
-          <TimeslotFieldBuilder
-            formHandler={formHandler}
-            questionIndex={index}
-            isEditMode={isEditMode}
-          />
-        );
+
       default:
         return null;
     }
@@ -81,11 +84,6 @@ export const FormFieldItem = ({ formHandler, index, onRemove, isEditMode }: Prop
 
     if (newType === 'RADIO' || newType === 'CHECKBOX') {
       setValue(`formQuestions.${index}.optionList`, [{ value: '' }]);
-    } else if (newType === 'TIME_SLOT') {
-      setValue(`formQuestions.${index}.timeSlotOptions`, {
-        date: '',
-        availableTime: { start: '07:00:00', end: '07:00:00' },
-      });
     }
   };
 
diff --git a/src/pages/admin/ApplicationFormBuilder/components/FieldsFormTableSection/index.tsx b/src/pages/admin/ApplicationFormBuilder/components/FieldsFormTableSection/index.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { useFieldArray } from 'react-hook-form';
 import { AddFieldButton } from './AddFieldButton';
 import { FormFieldItem } from './FormFieldItem';
+import { TimeslotFieldBuilder } from './FormFieldItem/Builders/TimeslotFieldBuilder';
 import type { ApplicationFormData } from '@/pages/admin/ApplicationFormBuilder/types/fieldType';
 
 type Props = {
@@ -35,12 +36,20 @@ export const ApplicationFieldsFormTableSection = ({ formHandler, isEditMode }: P
       {fields.map((data, index) => (
         <div key={data.id}>
           {index !== 0 && <Divider />}
-          <FormFieldItem
-            index={index}
-            formHandler={formHandler}
-            onRemove={() => remove(index)}
-            isEditMode={isEditMode}
-          />
+          {data.fieldType === 'TIME_SLOT' ? (
+            <TimeslotFieldBuilder
+              formHandler={formHandler}
+              questionIndex={index}
+              isEditMode={isEditMode}
+            />
+          ) : (
+            <FormFieldItem
+              index={index}
+              formHandler={formHandler}
+              onRemove={() => remove(index)}
+              isEditMode={isEditMode}
+            />
+          )}
         </div>
       ))}
       {isEditMode && <AddFieldButton onClick={handleAddFormField} />}
diff --git a/src/pages/admin/ApplicationFormBuilder/components/HeaderSection/index.styled.ts b/src/pages/admin/ApplicationFormBuilder/components/HeaderSection/index.styled.ts
@@ -0,0 +1,83 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div(({ theme }) => ({
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '2rem',
+  padding: '2.5rem 0 0 0',
+  boxSizing: 'border-box',
+
+  [`@media (max-width: ${theme.breakpoints.mobile})`]: {
+    gap: '0.5rem',
+  },
+}));
+
+export const HeaderWrapper = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const ButtonWrapper = styled.div({
+  display: 'flex',
+  gap: '0.5rem',
+});
+
+export const Title = styled.h1(({ theme }) => ({
+  fontSize: '2.5rem',
+  fontWeight: theme.font.weight.medium,
+
+  [`@media (max-width: ${theme.breakpoints.mobile})`]: {
+    fontSize: '2rem',
+  },
+}));
+
+export const CheckboxWrapper = styled.div(({ theme }) => ({
+  display: 'flex',
+  gap: '0.5rem',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+
+  [`@media (max-width: ${theme.breakpoints.mobile})`]: {
+    padding: '1.5rem 0 0.5rem 0',
+    justifyContent: 'flex-start',
+  },
+}));
+
+export const CustomCheckbox = styled.input(({ theme }) => ({
+  width: '1.15rem',
+  height: '1.15rem',
+  cursor: 'pointer',
+  appearance: 'none',
+  border: `2px solid ${theme.colors.primary}`,
+  borderRadius: '4px',
+  position: 'relative',
+  transition: 'all 0.2s ease',
+
+  '&:checked': {
+    backgroundColor: theme.colors.primary,
+    borderColor: theme.colors.primary,
+  },
+
+  '&:checked::after': {
+    content: '"✓"',
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    color: 'white',
+    fontSize: '1.2rem',
+    fontWeight: 'bold',
+  },
+
+  '&:hover': {
+    borderColor: theme.colors.primary800,
+    boxShadow: `0 0 0 3px ${theme.colors.primary}20`,
+  },
+
+  '&:focus': {
+    outline: 'none',
+    boxShadow: `0 0 0 3px ${theme.colors.primary}40`,
+  },
+}));
diff --git a/src/pages/admin/ApplicationFormBuilder/components/HeaderSection/index.tsx b/src/pages/admin/ApplicationFormBuilder/components/HeaderSection/index.tsx
diff --git a/src/pages/admin/ApplicationFormBuilder/styles/timeslot.styled.ts b/src/pages/admin/ApplicationFormBuilder/styles/timeslot.styled.ts
diff --git a/src/pages/admin/ApplicationFormBuilder/types/fieldType.ts b/src/pages/admin/ApplicationFormBuilder/types/fieldType.ts
diff --git a/src/pages/admin/ApplicationFormBuilder/utils/typeMapping.ts b/src/pages/admin/ApplicationFormBuilder/utils/typeMapping.ts
