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

[J-TB] 인터뷰 폼 리엑트 훅 폼 연결
peer-42seoul · Feb 5, 2024 · f7053a6 · f7053a6
2 parents b3f3e06 + dc47900
commit f7053a6
Show file tree

Hide file tree

Showing 23 changed files with 663 additions and 740 deletions.
diff --git a/src/app/my-page/privacy/page.tsx b/src/app/my-page/privacy/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { Stack, Typography } from '@mui/material'
-import UserWithdrawalModal from './panel/UserWithdrawalModal'
+// import UserWithdrawalModal from './panel/UserWithdrawalModal'
 import useSWR from 'swr'
 import useAxiosWithAuth from '@/api/config'
 import useMedia from '@/hook/useMedia'
@@ -44,14 +44,15 @@ const PrivacyPage = () => {
         />
         <PasswordChangeSection />
       </TitleBox>
-      <TitleBox title={'계정 관리'}>
+      {/* 백엔드에서 탈퇴하기 기능 컴포넌트를 숨겨달라는 요청이 들어와서 주석처리 하였습니다. */}
+      {/* <TitleBox title={'계정 관리'}>
         <Stack spacing={1} direction={'row'} justifyContent={'space-between'}>
           <Typography variant="Body2" color="text.alternative">
             계정을 삭제하시면....
           </Typography>
           <UserWithdrawalModal />
         </Stack>
-      </TitleBox>
+      </TitleBox> */}
     </Stack>
   )
 }

diff --git a/src/app/recruit/[id]/edit/page.tsx b/src/app/recruit/[id]/edit/page.tsx
@@ -8,8 +8,26 @@ import useSWR from 'swr'
 import CuCircularProgress from '@/components/CuCircularProgress'
 import useToast from '@/states/useToast'
 import { useRouter, useSearchParams } from 'next/navigation'
+import {
+  fieldToForm,
+  formToField,
+} from '../../write/panel/fields/Interview/handleInterviewList'
+import { IFormInterview, IRoleWrite } from '@/types/IPostDetail'
+import { ISkill } from '@/types/IUserProfile'
 
-interface IRecruitEditApiType extends IRecruitWriteField {
+interface IRecruitEditApiType {
+  place: string
+  image: string | null
+  title: string
+  name: string
+  due: string
+  type: string
+  region: Array<string> | null
+  link: string
+  tagList: Array<ISkill>
+  roleList: Array<IRoleWrite>
+  interviewList: Array<IFormInterview>
+  max: string | undefined
   isAnswered: boolean
 }
 
@@ -60,15 +78,12 @@ const Page = ({ params }: { params: { id: string } }) => {
       initData.type === 'PROJECT'
         ? initData.roleList
         : [{ name: '', number: 0 }],
-    interviewList: initData.interviewList,
+    interviewList: formToField(initData.interviewList),
     max: initData.max ? initData.max.toString() : '2',
-    content: initData.content,
   }
 
   const handleSubmit = async (data: IRecruitWriteField) => {
     closeToast()
-    console.log(data)
-    console.log(editorRef.current?.getMarkdown())
 
     await axiosWithAuth
       .put(`/api/v1/recruit/${params.id}`, {
@@ -83,7 +98,7 @@ const Page = ({ params }: { params: { id: string } }) => {
           return tag.tagId
         }),
         roleList: data.type === 'PROJECT' ? data.roleList : null,
-        interviewList: data.interviewList,
+        interviewList: fieldToForm(data.interviewList),
         place: data.place,
         max: data.type === 'PROJECT' ? null : Number(data.max),
         type: data.type,

diff --git a/src/app/recruit/[id]/panel/form/CheckQuestionForm.tsx b/src/app/recruit/[id]/panel/form/CheckQuestionForm.tsx
@@ -20,7 +20,6 @@ const CheckQuestionForm = ({
     <FormControl disabled={disabled} component="fieldset">
       <FormGroup defaultValue={value}>
         {optionList?.map((label: string, index: number) => {
-          console.log(label, value?.includes(label))
           return (
             <FormCheckbox
               name={`${idx}[${index}]`}

diff --git a/src/app/recruit/write/page.tsx b/src/app/recruit/write/page.tsx
@@ -7,6 +7,7 @@ import useAxiosWithAuth from '@/api/config'
 import { ITag } from '@/types/IPostDetail'
 import useToast from '@/states/useToast'
 import { useRouter } from 'next/navigation'
+import { fieldToForm } from './panel/fields/Interview/handleInterviewList'
 
 const Page = () => {
   const editorRef = useRef<Editor | null>(null)
@@ -26,9 +27,14 @@ const Page = () => {
     link: '',
     tagList: [],
     roleList: [{ name: '', number: 0 }],
-    interviewList: [],
+    interviewList: [
+      {
+        question: '질문을 입력하세요.',
+        type: 'CLOSE',
+        optionList: [{ option: '답변 1' }],
+      },
+    ],
     max: '2',
-    content: '모집글 소개 글입니다.',
   }
 
   const handleSubmit = async (data: IRecruitWriteField) => {
@@ -45,7 +51,7 @@ const Page = () => {
           return tag.tagId
         }),
         roleList: data.type === 'PROJECT' ? data.roleList : null,
-        interviewList: data.interviewList,
+        interviewList: fieldToForm(data.interviewList), // 인터뷰 리스트 재가공 필요
         place: data.place,
         max: data.type === 'PROJECT' ? null : Number(data.max),
         content: editorRef.current?.getMarkdown(),

diff --git a/src/app/recruit/write/panel/CreateTeamEditor.tsx b/src/app/recruit/write/panel/CreateTeamEditor.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 import {
   Box,
@@ -26,13 +26,12 @@ import SkillAutocomplete from '@/components/SkillAutocomplete'
 import { ISkill } from '@/types/IUserProfile'
 import DynamicToastEditor from '@/components/DynamicToastEditor'
 import { Editor } from '@toast-ui/editor'
-import { IFormInterview } from '@/types/IPostDetail'
-import SetInterview from './fields/SetInterview/SetInterview'
 import Tutorial from '@/components/Tutorial'
 import RecruitEditPageTutorial from '@/components/tutorialContent/RecruitEditPageTutorial'
 import CuTextModal from '@/components/CuTextModal'
 import useModal from '@/hook/useModal'
-import useToast from '@/states/useToast'
+// import useToast from '@/states/useToast'
+import InterviewForm from './fields/Interview/InterviewForm'
 
 const CreateTeamEditor = ({
   defaultValues,
@@ -47,63 +46,71 @@ const CreateTeamEditor = ({
   editorType: 'edit' | 'write'
   isAnswered?: boolean
 }) => {
-  const [openBasicModal, setOpenBasicModal] = useState(false)
   const router = useRouter()
 
-  const { openToast, closeToast } = useToast()
+  // const { openToast, closeToast } = useToast()
 
   const { isLogin } = useAuthStore()
 
   useEffect(() => {
     if (!isLogin) router.push('/login')
   }, [isLogin])
 
-  const {
-    openModal: openCompleteModal,
-    closeModal: closeCompleteModal,
-    isOpen: isCompleteOpen,
-  } = useModal()
+  // const {
+  //   // openModal: openCompleteModal,
+  //   // closeModal: closeCompleteModal,
+  //   // isOpen: isCompleteOpen,
+  // } = useModal()
   const {
     openModal: openCancelModal,
     closeModal: closeCancelModal,
     isOpen: isCancelOpen,
   } = useModal()
 
+  const {
+    openModal: openInterviewModal,
+    closeModal: closeInterviewModal,
+    isOpen: isInterviewOpen,
+  } = useModal()
+
   const {
     control,
     handleSubmit,
-    formState: { errors },
+    formState: {
+      errors,
+      isSubmitting,
+      // isValid
+    },
     setValue,
     watch,
     trigger,
-    setError,
+    // setError,
     clearErrors,
   } = useForm<IRecruitWriteField>({
     defaultValues: defaultValues,
     mode: 'onChange',
   })
 
-  const handleComplete = () => {
-    closeToast()
-    if (!image) {
-      setError('image', {
-        type: 'required',
-        message: '필수 입력 항목입니다.',
-      })
-    }
-    trigger().then((result) => {
-      if (!result || image || errors.image?.message) {
-        openToast({
-          severity: 'error',
-          message: '문제가 있는 입력란이 있어요. 확인해주세요!',
-        })
-        return
-      }
-      openCompleteModal()
-    })
-  }
+  // const handleComplete = () => {
+  //   closeToast()
+  //   if (!image) {
+  //     setError('image', {
+  //       type: 'required',
+  //       message: '필수 입력 항목입니다.',
+  //     })
+  //   }
+  //   trigger().then(() => {
+  //     if (!isValid) {
+  //       openToast({
+  //         severity: 'error',
+  //         message: '문제가 있는 입력란이 있어요. 확인해주세요!',
+  //       })
+  //       return
+  //     }
+  //     openCompleteModal()
+  //   })
+  // }
 
-  const interviewList = watch('interviewList')
   const region = watch('region')
   const place = watch('place')
   const image = watch('image')
@@ -542,7 +549,12 @@ const CreateTeamEditor = ({
               <Button
                 sx={{ width: ['100%', '26rem'] }}
                 variant="outlined"
-                onClick={() => setOpenBasicModal(true)}
+                // onClick={() => {
+                //   setOpenBasicModal(true)
+                // }}
+                onClick={() => {
+                  openInterviewModal()
+                }}
                 disabled={isAnswered}
                 startIcon={
                   <Icon.PlusIcon
@@ -552,14 +564,14 @@ const CreateTeamEditor = ({
               >
                 인터뷰 추가
               </Button>
-              <SetInterview
+              {/* <SetInterview
                 openBasicModal={openBasicModal}
                 handleCloseBasicModal={setOpenBasicModal}
                 interviewData={interviewList}
                 setInterviewData={(value: Array<IFormInterview>) => {
                   setValue('interviewList', value)
                 }}
-              />
+              /> */}
             </FieldWithLabel>
             {/* 등록, 취소 버튼 */}
             <Stack
@@ -582,16 +594,21 @@ const CreateTeamEditor = ({
               </Button>
               <Button
                 variant="contained"
-                onClick={handleComplete}
+                type="submit"
+                // onClick={handleComplete}
                 sx={{ width: ['100%', '8.75rem'], height: '3rem' }}
               >
-                {editorType === 'write' ? '등록하기' : '수정하기'}
+                {isSubmitting
+                  ? '제출 중 ...'
+                  : editorType === 'write'
+                    ? '등록하기'
+                    : '수정하기'}
               </Button>
             </Stack>
           </Stack>
         </form>
       </Container>
-      <CuTextModal
+      {/* <CuTextModal
         open={isCompleteOpen}
         onClose={closeCompleteModal}
         title="등록하시겠어요?"
@@ -606,10 +623,14 @@ const CreateTeamEditor = ({
         }}
         containedButton={{
           text: editorType === 'write' ? '등록하기' : '수정하기',
-          type: 'submit',
-          form: 'recruit-form',
+          onClick: () => {
+            handleSubmit(submitHandler)()
+          },
+          // type: 'submit',
+          // form: 'recruit-form',
+          // isLoading: isSubmitting,
         }}
-      />
+      /> */}
       <CuTextModal
         open={isCancelOpen}
         onClose={closeCancelModal}
@@ -626,6 +647,12 @@ const CreateTeamEditor = ({
           },
         }}
       />
+      <InterviewForm
+        control={control}
+        closeModal={closeInterviewModal}
+        isOpen={isInterviewOpen}
+        trigger={trigger}
+      />
     </>
   )
 }