Merge pull request #819 from peer-42seoul/546-c-main-redesign

[J-TB] 모집글 인터뷰 폼 에러 수정
peer-42seoul · Feb 6, 2024 · a7ecaf0 · a7ecaf0
2 parents b7a49f1 + 8053959
commit a7ecaf0
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 71 deletions.
diff --git a/src/app/recruit/write/panel/CreateTeamEditor.tsx b/src/app/recruit/write/panel/CreateTeamEditor.tsx
@@ -20,7 +20,7 @@ import * as style from '../page.style'
 import * as Icon from '@/icons'
 import TextFieldWithLabel from '@/components/TextFieldWithLabel'
 import FieldWithLabel from '@/components/FieldWithLabel'
-import { Controller, useForm, useFormState } from 'react-hook-form'
+import { Controller, useForm } from 'react-hook-form'
 import { FormControlLabel } from '@mui/material'
 import SkillAutocomplete from '@/components/SkillAutocomplete'
 import { ISkill } from '@/types/IUserProfile'
@@ -92,8 +92,6 @@ const CreateTeamEditor = ({
     mode: 'all',
   })
 
-  const { dirtyFields } = useFormState({ control })
-
   const handleComplete = () => {
     closeToast()
     if (!image) {
@@ -562,22 +560,21 @@ const CreateTeamEditor = ({
                 />
               }
             >
-              {completedInterview ||
-                (defaultValues.interviewList.length && (
-                  <Typography
-                    variant="Caption"
-                    color={'primary'}
-                    height={'2rem'}
-                    width={'fit-content'}
-                    sx={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                    }}
-                  >
-                    인터뷰 작성 완료
-                  </Typography>
-                ))}
+              {(completedInterview || defaultValues.interviewList.length) && (
+                <Typography
+                  variant="Caption"
+                  color={'primary'}
+                  height={'2rem'}
+                  width={'fit-content'}
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  인터뷰 작성 완료
+                </Typography>
+              )}
               <Button
                 sx={{ width: ['100%', '26rem'] }}
                 variant="outlined"
@@ -586,7 +583,7 @@ const CreateTeamEditor = ({
                 }}
                 disabled={isAnswered}
                 startIcon={
-                  !dirtyFields.interviewList && (
+                  !completedInterview && (
                     <Icon.PlusIcon
                       sx={{ ...style.iconStyleBase, color: 'primary' }}
                     />
@@ -675,7 +672,6 @@ const CreateTeamEditor = ({
         closeModal={closeInterviewModal}
         isOpen={isInterviewOpen}
         trigger={trigger}
-        setFormValue={setValue}
         setCompletedInterview={setCompletedInterview}
       />
     </>

diff --git a/src/app/recruit/write/panel/fields/Interview/InterviewForm.tsx b/src/app/recruit/write/panel/fields/Interview/InterviewForm.tsx
@@ -4,30 +4,29 @@ import { Button, MenuItem, Select, Stack, Typography } from '@mui/material'
 import React, { useState } from 'react'
 import {
   Control,
-  UseFormSetValue,
   UseFormTrigger,
   useFieldArray,
   useFormState,
 } from 'react-hook-form'
 import Question from './Question'
 import CuTextModal from '@/components/CuTextModal'
 import useModal from '@/hook/useModal'
+import useToast from '@/states/useToast'
 
 const InterviewForm = ({
   control,
   closeModal,
   isOpen,
   trigger,
-  setFormValue,
   setCompletedInterview,
 }: {
   control: Control<IRecruitWriteField>
   closeModal: () => void
   isOpen: boolean
   trigger: UseFormTrigger<IRecruitWriteField>
-  setFormValue: UseFormSetValue<IRecruitWriteField>
   setCompletedInterview: (value: boolean) => void
 }) => {
+  const { openToast } = useToast()
   const {
     openModal: openCancelModal,
     closeModal: closeCancelModal,
@@ -49,11 +48,25 @@ const InterviewForm = ({
     name: 'interviewList',
   })
 
-  const { isValid } = useFormState({ control, name: 'interviewList' })
+  const { errors } = useFormState({ control, name: 'interviewList' })
 
   const handleComplete = () => {
+    if (fields.length === 0) {
+      openToast({
+        message: '최소 한 개 이상의 질문을 작성하세요.',
+        severity: 'error',
+      })
+      return
+    }
     trigger('interviewList').then(() => {
-      if (!isValid) return
+      if (Object.keys(errors).length) {
+        console.log(errors)
+        openToast({
+          message: '질문과 답변을 모두 작성해주세요.',
+          severity: 'error',
+        })
+        return
+      }
       openCompleteModal()
     })
   }
@@ -65,7 +78,7 @@ const InterviewForm = ({
   }
 
   const handleCancelModalConfirm = () => {
-    setFormValue('interviewList', [])
+    fields.map((_, index) => remove(index))
     closeCancelModal()
     closeModal()
   }
@@ -113,6 +126,7 @@ const InterviewForm = ({
           text: '작성',
           onClick: handleComplete,
         }}
+        mobileFullSize
       >
         <Stack spacing={'1.5rem'}>
           {fields.map((field, index) => {
@@ -165,7 +179,7 @@ const InterviewForm = ({
         title="다음에 할까요?"
         content="인터뷰를 통해 지원자에 대해 더 자세히 알 수 있어요."
         textButton={{
-          text: '닫기',
+          text: '취소',
           onClick: closeCancelModal,
         }}
         containedButton={{

diff --git a/src/app/recruit/write/panel/fields/Interview/Options.tsx b/src/app/recruit/write/panel/fields/Interview/Options.tsx
@@ -10,6 +10,7 @@ import useToast from '@/states/useToast'
 import { IRecruitWriteField } from '@/types/IRecruitWriteField'
 import {
   Button,
+  FormHelperText,
   IconButton,
   MenuItem,
   Stack,
@@ -26,11 +27,12 @@ const Body2Style = {
     fontWeight: 400,
     lineHeight: '150%',
     color: 'text.alternative',
+    width: '40%',
   },
   '& input': {
     p: 0,
   },
-  width: '40%',
+  width: '100%',
 }
 
 const Options = ({
@@ -84,11 +86,13 @@ const Options = ({
                 sx={Body2Style}
                 error={
                   !!errors?.interviewList?.[firstIndex]?.optionList?.[index]
+                    ?.option?.message
                 }
                 inputProps={{
                   maxLength: 20,
                 }}
                 rules={{
+                  required: '선택지를 입력해주세요.',
                   maxLength: {
                     value: 20,
                     message: '최대 20자까지 입력 가능합니다.',
@@ -114,6 +118,7 @@ const Options = ({
                       severity: 'error',
                       message: '선택지는 최소 1개 이상 입력해야 합니다.',
                     })
+                    return
                   }
                   remove(index)
                 }}
@@ -153,6 +158,7 @@ const Options = ({
               <ControlledTextfield
                 error={
                   !!errors?.interviewList?.[firstIndex]?.optionList?.[index]
+                    ?.option?.message
                 }
                 name={`interviewList.${firstIndex}.optionList.${index}.option`}
                 control={control}
@@ -163,6 +169,7 @@ const Options = ({
                   maxLength: 20,
                 }}
                 rules={{
+                  required: '선택지를 입력해주세요.',
                   maxLength: {
                     value: 20,
                     message: '최대 20자까지 입력 가능합니다.',
@@ -188,6 +195,7 @@ const Options = ({
                       severity: 'error',
                       message: '선택지는 최소 1개 이상 입력해야 합니다.',
                     })
+                    return
                   }
                   remove(index)
                 }}
@@ -250,6 +258,7 @@ const Options = ({
                   }}
                   error={
                     !!errors?.interviewList?.[firstIndex]?.optionList?.[index]
+                      ?.option?.message
                   }
                 >
                   <MenuItem value={'2'}>2</MenuItem>
@@ -261,48 +270,51 @@ const Options = ({
             )
           }
           return (
-            <Stack
-              key={field.id}
-              direction="row"
-              spacing={'0.25rem'}
-              alignItems={'end'}
-            >
-              <Typography variant="Body2" color={'text.alternative'}>
-                {index === 1 ? '1.' : ratioMax + '.'}
-              </Typography>
-              <ControlledTextfield
-                name={`interviewList.${firstIndex}.optionList.${index}.option`}
-                control={control}
-                placeholder="선택지를 입력해주세요."
-                variant="standard"
-                sx={Body2Style}
-                inputProps={{
-                  maxLength: 20,
-                }}
-                rules={{
-                  required:
-                    '선형 배울의 최소 / 최대 값에 이름을 붙여주세요. ex. 매우 그렇지 않다. / 매우 그렇다.',
-                  maxLength: {
-                    value: 20,
-                    message: '최대 20자까지 입력 가능합니다.',
-                  },
-                  minLength: {
-                    value: 2,
-                    message: '최소 2자 이상 입력해주세요.',
-                  },
-                }}
-                helperText={
-                  <Typography variant="Caption" color={'error'}>
-                    {errors?.interviewList?.[firstIndex]?.optionList?.[0]
-                      ?.option?.message ||
-                      errors?.interviewList?.[firstIndex]?.optionList?.[index]
-                        ?.option?.message}
-                  </Typography>
-                }
-                error={
-                  !!errors?.interviewList?.[firstIndex]?.optionList?.[index]
-                }
-              />
+            <Stack direction={'column'} key={field.id}>
+              <Stack
+                key={field.id}
+                direction="row"
+                spacing={'0.25rem'}
+                alignItems={'end'}
+              >
+                <Typography variant="Body2" color={'text.alternative'}>
+                  {index === 1 ? '1.' : ratioMax + '.'}
+                </Typography>
+                <ControlledTextfield
+                  name={`interviewList.${firstIndex}.optionList.${index}.option`}
+                  control={control}
+                  placeholder="선택지를 입력해주세요."
+                  variant="standard"
+                  sx={Body2Style}
+                  inputProps={{
+                    maxLength: 20,
+                  }}
+                  rules={{
+                    required:
+                      '선형 배울의 최소 / 최대 값에 이름을 붙여주세요. ex. 매우 그렇지 않다. / 매우 그렇다.',
+                    maxLength: {
+                      value: 20,
+                      message: '최대 20자까지 입력 가능합니다.',
+                    },
+                    minLength: {
+                      value: 2,
+                      message: '최소 2자 이상 입력해주세요.',
+                    },
+                  }}
+                  error={
+                    !!errors?.interviewList?.[firstIndex]?.optionList?.[index]
+                      ?.option?.message
+                  }
+                />
+              </Stack>
+              <FormHelperText>
+                <Typography variant="Caption" color={'error'}>
+                  {errors?.interviewList?.[firstIndex]?.optionList?.[0]?.option
+                    ?.message ??
+                    errors?.interviewList?.[firstIndex]?.optionList?.[index]
+                      ?.option?.message}
+                </Typography>
+              </FormHelperText>
             </Stack>
           )
         })}