From 0735ad940059cdff5cca1adb046b15ba1045fe75 Mon Sep 17 00:00:00 2001
From: Ethen1264 <jxorhks86909763@gmail.com>
Date: Mon, 27 Jan 2025 23:09:05 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=90=9BFix:=20create=20form=20submit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/api/form/[expo_id]/route.ts           |  5 +++-
 src/shared/types/create-form/type.ts          | 10 ++++++++
 src/views/create-form/api/createForm.ts       | 11 ++-------
 .../create-form/model/formCreateRouter.ts     |  9 +++-----
 src/views/create-form/model/useCreateForm.ts  | 12 +++-------
 src/views/create-form/ui/createForm/index.tsx | 23 ++++++++++---------
 .../ui/ExpoCreatedContainer/index.tsx         |  2 +-
 7 files changed, 35 insertions(+), 37 deletions(-)

diff --git a/src/app/api/form/[expo_id]/route.ts b/src/app/api/form/[expo_id]/route.ts
index 26e33f0..c47e7ec 100644
--- a/src/app/api/form/[expo_id]/route.ts
+++ b/src/app/api/form/[expo_id]/route.ts
@@ -20,7 +20,10 @@ export async function POST(
     : {};
   try {
     const response = await apiClient.post(`/form/${expo_id}`, body, config);
-    return NextResponse.json(response.data);
+    return new NextResponse(JSON.stringify(response.data), {
+      status: response.status,
+      headers: { 'Content-Type': 'application/json' },
+    });
   } catch (error) {
     const axiosError = error as AxiosError<{ message: string }>;
 
diff --git a/src/shared/types/create-form/type.ts b/src/shared/types/create-form/type.ts
index 7fb0a52..54c87c1 100644
--- a/src/shared/types/create-form/type.ts
+++ b/src/shared/types/create-form/type.ts
@@ -21,3 +21,13 @@ export interface OptionProps {
   index: number;
   isCheckBox?: boolean;
 }
+
+export interface CreateFormRequest {
+  informationImage: string;
+  participantType: string;
+  dynamicForm: {
+    title: string;
+    formType: string;
+    jsonData: string;
+  }[];
+}
diff --git a/src/views/create-form/api/createForm.ts b/src/views/create-form/api/createForm.ts
index 315f744..8b75f77 100644
--- a/src/views/create-form/api/createForm.ts
+++ b/src/views/create-form/api/createForm.ts
@@ -1,18 +1,11 @@
 import axios from 'axios';
+import { CreateFormRequest } from '@/shared/types/create-form/type';
 
 export const createForm = async ({
   data,
   id,
 }: {
-  data: {
-    informationImage: string;
-    participantType: string;
-    dynamicForm: {
-      title: string;
-      formType: string;
-      jsonData: Record<string, string>;
-    }[];
-  };
+  data: CreateFormRequest;
   id: string;
 }) => {
   const response = await axios.post(`/api/form/${id}`, data);
diff --git a/src/views/create-form/model/formCreateRouter.ts b/src/views/create-form/model/formCreateRouter.ts
index f4e5a81..6f0443a 100644
--- a/src/views/create-form/model/formCreateRouter.ts
+++ b/src/views/create-form/model/formCreateRouter.ts
@@ -10,13 +10,10 @@ export const formCreateRouter = ({
   router: AppRouterInstance;
 }) => {
   switch (navigation) {
-    case 'standard':
-      router.push(`/create-form/${id}?navigation=training`);
+    case 'STANDARD':
+      router.push(`/create-form/${id}?navigation=TRAINEE`);
       break;
-    case 'training':
-      router.push(`/create-form/${id}?navigation=survey`);
-      break;
-    case 'survey':
+    case 'TRAINEE':
       router.push('/');
       break;
     default:
diff --git a/src/views/create-form/model/useCreateForm.ts b/src/views/create-form/model/useCreateForm.ts
index f023de3..8dd3861 100644
--- a/src/views/create-form/model/useCreateForm.ts
+++ b/src/views/create-form/model/useCreateForm.ts
@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
 import { toast } from 'react-toastify';
+import { CreateFormRequest } from '@/shared/types/create-form/type';
 import { createForm } from '../api/createForm';
 import { formCreateRouter } from './formCreateRouter';
 
@@ -13,15 +14,8 @@ export const useCreateForm = (
 
   return useMutation({
     mutationKey: ['createForm', id, navigation],
-    mutationFn: (formattedData: {
-      informationImage: string;
-      participantType: string;
-      dynamicForm: {
-        title: string;
-        formType: string;
-        jsonData: Record<string, string>;
-      }[];
-    }) => createForm({ data: formattedData, id }),
+    mutationFn: (formattedData: CreateFormRequest) =>
+      createForm({ data: formattedData, id }),
     onSuccess: () => {
       toast.success('폼이 생성되었습니다.');
       formCreateRouter({ id, navigation, router });
diff --git a/src/views/create-form/ui/createForm/index.tsx b/src/views/create-form/ui/createForm/index.tsx
index 3b4a0b3..0ebd96c 100644
--- a/src/views/create-form/ui/createForm/index.tsx
+++ b/src/views/create-form/ui/createForm/index.tsx
@@ -37,16 +37,18 @@ const CreateForm = ({ id }: { id: string }) => {
   const onSubmit = (data: FormValues) => {
     const formattedData = {
       informationImage: '',
-      participantType: navigation?.toUpperCase() || 'STANDARD',
+      participantType: navigation || 'STANDARD',
       dynamicForm: data.questions.map((question) => ({
         title: question.title,
         formType: question.formType,
-        jsonData: question.options.reduce(
-          (acc, option, index) => {
-            acc[(index + 1).toString()] = option.value;
-            return acc;
-          },
-          {} as Record<string, string>,
+        jsonData: JSON.stringify(
+          question.options.reduce(
+            (acc, option, index) => {
+              acc[(index + 1).toString()] = option.value;
+              return acc;
+            },
+            {} as Record<string, string>,
+          ),
         ),
       })),
     };
@@ -55,9 +57,8 @@ const CreateForm = ({ id }: { id: string }) => {
   };
 
   const navigationTitles: Record<string, string> = {
-    standard: '참가자 폼',
-    training: '연수자 폼',
-    survey: '만족도 조사 폼',
+    STANDARD: '참가자 폼',
+    TRAINEE: '연수자 폼',
   };
 
   useEffect(() => {
@@ -72,7 +73,7 @@ const CreateForm = ({ id }: { id: string }) => {
         className="mx-auto w-full max-w-[792px] flex-1 space-y-4 px-5"
       >
         <PageHeader
-          title={navigationTitles[navigation || 'standard'] || '신청자 폼'}
+          title={navigationTitles[navigation || 'STANDARD'] || '신청자 폼'}
         />
         <div className="w-full space-y-8">
           {fields.map((field, index) => (
diff --git a/src/widgets/expo-created/ui/ExpoCreatedContainer/index.tsx b/src/widgets/expo-created/ui/ExpoCreatedContainer/index.tsx
index 411636c..7544951 100644
--- a/src/widgets/expo-created/ui/ExpoCreatedContainer/index.tsx
+++ b/src/widgets/expo-created/ui/ExpoCreatedContainer/index.tsx
@@ -8,7 +8,7 @@ import { Button } from '@/shared/ui';
 const ExpoCreatedContainer = ({ id }: { id: string }) => {
   const router = useRouter();
   const handleButton = () => {
-    router.push(`/create-form/${id}?navigation=standard`);
+    router.push(`/create-form/${id}?navigation=STANDARD`);
   };
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-[40px]">

From 3c66fecef62956568d0f453434a6e1762043ffde Mon Sep 17 00:00:00 2001
From: Ethen1264 <jxorhks86909763@gmail.com>
Date: Thu, 30 Jan 2025 21:45:13 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=90=9BFix:=20create-form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/create-form/index.tsx            |  1 -
 .../create-form/ui/FormTitle/index.tsx        |  4 ++-
 .../create-form/ui/OptionItem/index.tsx       |  2 +-
 .../create-form/ui/TextOption/index.tsx       | 30 -----------------
 src/shared/ui/ToggleButton/index.tsx          |  6 ++--
 src/views/create-form/ui/createForm/index.tsx | 18 +++++++++--
 .../create-form/ui/FormContainer/index.tsx    | 32 +++++++++++--------
 7 files changed, 41 insertions(+), 52 deletions(-)
 delete mode 100644 src/entities/create-form/ui/TextOption/index.tsx

diff --git a/src/entities/create-form/index.tsx b/src/entities/create-form/index.tsx
index 96cb643..b0e6524 100644
--- a/src/entities/create-form/index.tsx
+++ b/src/entities/create-form/index.tsx
@@ -6,6 +6,5 @@ export { default as FormTypeSelect } from './ui/FormTypeSelect';
 export { default as MultipleChoiceOption } from './ui/MultipleChoiceOption';
 export { default as PictureOption } from './ui/PictureOption';
 export { default as RequiredToggle } from './ui/RequiredToggle';
-export { default as TextOption } from './ui/TextOption';
 export { default as CreateFormButton } from './ui/CreateFormButton';
 export { default as CheckBox } from './ui/CheckBox';
diff --git a/src/entities/create-form/ui/FormTitle/index.tsx b/src/entities/create-form/ui/FormTitle/index.tsx
index abe448e..69c895f 100644
--- a/src/entities/create-form/ui/FormTitle/index.tsx
+++ b/src/entities/create-form/ui/FormTitle/index.tsx
@@ -11,7 +11,9 @@ const FormTitle = ({ register, index }: Props) => {
   return (
     <div className="w-[60%] border-b-1 border-solid border-gray-100 py-4">
       <input
-        {...register(`questions.${index}.title`)}
+        {...register(`questions.${index}.title`, {
+          required: `${index + 1}번 폼의 제목을 입력해주세요`,
+        })}
         placeholder="제목 입력"
         className="w-full text-h4 text-black"
       />
diff --git a/src/entities/create-form/ui/OptionItem/index.tsx b/src/entities/create-form/ui/OptionItem/index.tsx
index 1fa02d0..2e47745 100644
--- a/src/entities/create-form/ui/OptionItem/index.tsx
+++ b/src/entities/create-form/ui/OptionItem/index.tsx
@@ -25,7 +25,7 @@ const OptionItem = ({
       <div className="flex w-full items-center gap-[10px]">
         {icon}
         <input
-          {...register(inputName)}
+          {...register(inputName, { required: '폼의 옵션을 입력해주세요' })}
           placeholder="문장을 입력해주세요."
           className="w-[60%] text-body4 text-black"
         />
diff --git a/src/entities/create-form/ui/TextOption/index.tsx b/src/entities/create-form/ui/TextOption/index.tsx
deleted file mode 100644
index 2a5157e..0000000
--- a/src/entities/create-form/ui/TextOption/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import { OptionProps } from '@/shared/types/create-form/type';
-import OptionItem from '../OptionItem';
-import OtherOption from '../OtherOptionProps';
-
-const TextOption = ({
-  fields,
-  remove,
-  register,
-  index,
-  isCheckBox,
-}: OptionProps) => {
-  return (
-    <div className="space-y-2">
-      {fields.map((option, optionIndex) => (
-        <OptionItem
-          key={option.id}
-          optionId={option.id}
-          optionIndex={optionIndex}
-          register={register}
-          remove={remove}
-          inputName={`questions.${index}.options.${optionIndex}.value`}
-        />
-      ))}
-      {isCheckBox ? <OtherOption text="기타" /> : null}
-    </div>
-  );
-};
-
-export default TextOption;
diff --git a/src/shared/ui/ToggleButton/index.tsx b/src/shared/ui/ToggleButton/index.tsx
index 730e5eb..6ee2f9b 100644
--- a/src/shared/ui/ToggleButton/index.tsx
+++ b/src/shared/ui/ToggleButton/index.tsx
@@ -14,11 +14,11 @@ function ToggleButton() {
   return (
     <button
       onClick={toggle}
-      className={`relative inline-flex h-6 w-12 items-center rounded-full bg-gray-100 transition-colors`}
+      className={`relative inline-flex h-6 w-12 items-center rounded-full transition-colors ${isToggled ? 'bg-main-100' : 'bg-gray-100'}`}
     >
       <span
-        className={`inline-block h-7 w-7 transform rounded-full bg-gray-500 transition-transform duration-300 ${
-          isToggled ? 'translate-x-9' : 'translate-x-0'
+        className={`inline-block h-7 w-7 transform rounded-full transition-transform duration-300 ${
+          isToggled ? 'translate-x-9 bg-main-600' : 'translate-x-0 bg-gray-500'
         }`}
       />
     </button>
diff --git a/src/views/create-form/ui/createForm/index.tsx b/src/views/create-form/ui/createForm/index.tsx
index 0ebd96c..4a34624 100644
--- a/src/views/create-form/ui/createForm/index.tsx
+++ b/src/views/create-form/ui/createForm/index.tsx
@@ -3,7 +3,9 @@
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
+import { toast } from 'react-toastify';
 import { CreateFormButton } from '@/entities/create-form';
+import { handleFormErrors } from '@/shared/model/formErrorUtils';
 import { preventEvent } from '@/shared/model/preventEvent';
 import { FormValues, Option } from '@/shared/types/create-form/type';
 import { Button, PageHeader } from '@/shared/ui';
@@ -28,6 +30,10 @@ const CreateForm = ({ id }: { id: string }) => {
     name: 'questions',
   });
 
+  const showError = (message: string) => {
+    toast.error(message);
+  };
+
   const {
     mutate: createForm,
     isPending,
@@ -35,6 +41,10 @@ const CreateForm = ({ id }: { id: string }) => {
   } = useCreateForm(id, navigation, router);
 
   const onSubmit = (data: FormValues) => {
+    if (fields.length === 0) {
+      toast.error('최소 한 개의 폼을 추가해주세요');
+      return;
+    }
     const formattedData = {
       informationImage: '',
       participantType: navigation || 'STANDARD',
@@ -52,7 +62,6 @@ const CreateForm = ({ id }: { id: string }) => {
         ),
       })),
     };
-    console.log(formattedData);
     createForm(formattedData);
   };
 
@@ -69,8 +78,11 @@ const CreateForm = ({ id }: { id: string }) => {
     <div className="flex h-screen flex-col gap-[30px] mobile:gap-0">
       <Header />
       <form
-        onSubmit={handleSubmit(onSubmit)}
-        className="mx-auto w-full max-w-[792px] flex-1 space-y-4 px-5"
+        onSubmit={handleSubmit(onSubmit, (errors) => {
+          console.log(errors);
+          handleFormErrors(errors, showError);
+        })}
+        className="mx-auto w-full max-w-[792px] flex-1 space-y-4 px-5 pb-5"
       >
         <PageHeader
           title={navigationTitles[navigation || 'STANDARD'] || '신청자 폼'}
diff --git a/src/widgets/create-form/ui/FormContainer/index.tsx b/src/widgets/create-form/ui/FormContainer/index.tsx
index fe97d24..f94a11b 100644
--- a/src/widgets/create-form/ui/FormContainer/index.tsx
+++ b/src/widgets/create-form/ui/FormContainer/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Control,
   useFieldArray,
@@ -17,7 +17,6 @@ import {
   MultipleChoiceOption,
   PictureOption,
   RequiredToggle,
-  TextOption,
 } from '@/entities/create-form';
 import { preventEvent } from '@/shared/model/preventEvent';
 import { FormValues, Option } from '@/shared/types/create-form/type';
@@ -51,15 +50,6 @@ const FormContainer = ({
   });
 
   const componentMap: Record<string, JSX.Element | null> = {
-    SENTENCE: (
-      <TextOption
-        fields={fields}
-        remove={remove}
-        register={register}
-        index={index}
-        isCheckBox={isCheckBox}
-      />
-    ),
     CHECKBOX: (
       <CheckBoxOption
         fields={fields}
@@ -108,6 +98,19 @@ const FormContainer = ({
     setIsCheckBox(!isCheckBox);
   };
 
+  useEffect(() => {
+    if (selectedOption?.value === 'SENTENCE') {
+      setValue(`questions.${index}.options`, []);
+    }
+
+    if (
+      selectedOption?.value === 'SENTENCE' ||
+      selectedOption?.value === 'IMAGE'
+    ) {
+      setIsCheckBox(false);
+    }
+  }, [selectedOption, index, setValue]);
+
   return (
     <div className="flex w-full flex-col gap-6 rounded-sm border-1 border-solid border-gray-200 px-[32px] py-[18px]">
       <div className="flex w-full items-center justify-between">
@@ -123,10 +126,13 @@ const FormContainer = ({
       </div>
       {renderOptionComponent()}
       <div className="border-b-1 border-solid border-gray-100 py-6">
-        <AddItemButton onClick={() => append({ value: '' })} />
+        {selectedOption?.value !== 'SENTENCE' ? (
+          <AddItemButton onClick={() => append({ value: '' })} />
+        ) : null}
       </div>
       <div className="flex w-full items-center justify-end gap-6">
-        {selectedOption?.value !== 'IMAGE' ? (
+        {selectedOption?.value !== 'IMAGE' &&
+        selectedOption?.value !== 'SENTENCE' ? (
           <CheckBox
             toggleCheck={handleCheckBox}
             isCheckBox={isCheckBox}