Merge pull request #37 from primus-teoSprint/feat/#32

[#32][#34] textarea 와 recoil 동기화 및 작성 폼 제출까지의 로직 구현

app/(route)/verification/ibulsin/_components/Step1/index.tsx

@@ -2,9 +2,16 @@
 
 import Link from 'next/link'
 import Textarea from '../Textarea'
+import { ibulsinVariants } from '@/app/_constants/ibulsin'
+import {
+  outlineTextareaAtom,
+  whyTextareaAtom,
+} from '@/app/_store/ibulsin/textarea'
 import style from './index.module.css'
 
 function Step1() {
+  const { outline, why } = ibulsinVariants
+
   return (
     <div className={style.main_container}>
       <div className={style.step_info}>
@@ -22,14 +29,14 @@ function Step1() {
             생각한 아이디어를 자유롭게 작성해봐요! 이곳에서는 오로지
             아이디어에만 집중해요.
           </p>
-          <Textarea fieldKey={'outline'} />
+          <Textarea fieldKey={outline} atom={outlineTextareaAtom} />
         </div>
         <div className={style.input_container}>
           <h3 className={style.input_title}>생각하게 된 배경</h3>
           <p className={style.input_explain}>
             해당 아이디어를 어떻게 생각하게 되었나요?
           </p>
-          <Textarea fieldKey={'why'} />
+          <Textarea fieldKey={why} atom={whyTextareaAtom} />
         </div>
         <div className={style.direction_btns}>
           <Link

app/(route)/verification/ibulsin/_components/Step2/index.tsx

@@ -5,8 +5,15 @@ import S from './index.module.css'
 import Link from 'next/link'
 import Textarea from '../Textarea'
 import MoreExplainBtn from '../MoreExplainBtn'
+import { ibulsinVariants } from '@/app/_constants/ibulsin'
+import {
+  XYZTextareaAtom,
+  marketResponseTextareaAtom,
+} from '@/app/_store/ibulsin/textarea'
 
 function Step2() {
+  const { marketResponse, XYZ } = ibulsinVariants
+
   return (
     <div className={S.main_container}>
       <div className={S.step_info}>
@@ -28,7 +35,10 @@ function Step2() {
             아이디어를 어떻게 받아들일지에 대한 우리의 핵심 신념이나 가정을
             얘기해요.
           </p>
-          <Textarea fieldKey={'marketResponse'} />
+          <Textarea
+            fieldKey={marketResponse}
+            atom={marketResponseTextareaAtom}
+          />
         </div>
         <div className={S.input_container}>
           <div className={S.input_title_container}>
@@ -39,7 +49,7 @@ function Step2() {
             적어도 X퍼센트의 Y는 Z 할 것이다 라는 형태의 가설이에요. 시장호응
             가설을 바탕으로 숫자로 치환에 좀 더 치밀하게 하는 도구예요
           </p>
-          <Textarea fieldKey={'XYZ'} />
+          <Textarea fieldKey={XYZ} atom={XYZTextareaAtom} />
         </div>
         <div className={S.direction_btns}>
           <Link className={S.prev_btn} href={'/verification/ibulsin?step=1'}>

app/(route)/verification/ibulsin/_components/Step3/index.tsx

@@ -1,15 +1,58 @@
 'use client'
 
-import { ibulsinVariants } from '@/app/_constants/ibulsin'
+import React from 'react'
 import Link from 'next/link'
-import { useRouter } from 'next/navigation'
 import MoreExplainBtn from '../MoreExplainBtn'
+import { ibulsinVariants } from '@/app/_constants/ibulsin'
+import {
+  pretotypingTextareaAtom,
+  xyzTextareaAtom,
+} from '@/app/_store/ibulsin/textarea'
+import useIbulsinData from '@/app/_hooks/useIbulsinData'
 import Textarea from '../Textarea'
 import S from './index.module.css'
+import useIbulsinFormMutation from '@/app/_service/mutations/useIbulsinForm'
+import { useRouter } from 'next/navigation'
 
 function Step3() {
-  const { xyz, pretotyping } = ibulsinVariants
   const router = useRouter()
+  const { xyz, pretotyping } = ibulsinVariants
+  const {
+    outlineValue,
+    whyTextValue,
+    marketResponseValue,
+    XYZValue,
+    xyzValue,
+    pretotypingValue,
+  } = useIbulsinData()
+  const { mutate } = useIbulsinFormMutation()
+
+  const handleSubmit = () => {
+    const ideaOverView = outlineValue
+    const thinkBackground = whyTextValue
+    const marketTheory = marketResponseValue
+    const bigxyzTheory = XYZValue
+    const smallxyzTheory = xyzValue
+    const pretotypingTheory = pretotypingValue
+
+    const body = {
+      ideaOverView,
+      thinkBackground,
+      marketTheory,
+      bigxyzTheory,
+      smallxyzTheory,
+      pretotypingTheory,
+    }
+
+    mutate(body, {
+      onSuccess: () => {
+        router.push('/')
+      },
+      onError: () => {
+        alert('에러가 발생하였습니다.')
+      },
+    })
+  }
 
   return (
     <div className={S.main_container}>
@@ -31,12 +74,12 @@ function Step3() {
             XYZ 법칙으로 표현된 시장 호응 가설의 범위를 잘게 쪼개 xyz법칙으로
             표현해보세요.
           </p>
-          <Textarea fieldKey={xyz} />
+          <Textarea fieldKey={xyz} atom={xyzTextareaAtom} />
         </div>
         <div className={S.input_container}>
           <div className={S.flex_between_wrapper}>
             <div className={S.flex_wrapper}>
-              <h3 className={S.input_title}>프로토 타이핑 계획</h3>
+              <h3 className={S.input_title}>프리토 타이핑 계획</h3>
               <MoreExplainBtn type={pretotyping} />
             </div>
           </div>
@@ -46,18 +89,14 @@ function Step3() {
             다르게 시제품이 없어도 다른 방법을 만들어 가설을 확인하는 테스트 방법이에요.
             `}
           </p>
-          <Textarea fieldKey={pretotyping} />
+          <Textarea fieldKey={pretotyping} atom={pretotypingTextareaAtom} />
         </div>
         <div className={S.direction_btns}>
           <Link className={S.prev_btn} href={'/verification/ibulsin?step=2'}>
             이전 단계
           </Link>
-          <button
-            className={S.next_btn}
-            type="button"
-            onClick={() => router.push('/mypage')}
-          >
-            제출하기
+          <button className={S.next_btn} type="button" onClick={handleSubmit}>
+            제출 하기
           </button>
         </div>
       </div>

app/(route)/verification/ibulsin/_components/Textarea/index.tsx

@@ -1,91 +1,39 @@
 'use client'
 
 import cn from 'classnames'
-import { useForm } from 'react-hook-form'
+
 import S from './index.module.css'
+import { RecoilState } from 'recoil'
+import { RegisterOptions } from 'react-hook-form'
+import { useFormCustom } from '@/app/_hooks/useFormWithRecoil'
 
 interface TextAreaProps {
   fieldKey: 'outline' | 'why' | 'marketResponse' | 'XYZ' | 'xyz' | 'pretotyping'
+  atom: RecoilState<string>
+  option?: RegisterOptions
 }
 
-function Textarea({ fieldKey }: TextAreaProps) {
-  const { register, watch } = useForm()
-
-  const outlineField = register('outline', {
-    required: '',
-    maxLength: { value: 500, message: '최대 500자까지 작성가능합니다.' },
-  })
-  const whyField = register('why', {
-    required: '',
-    maxLength: { value: 500, message: '최대 500자까지 작성가능합니다.' },
-  })
-  const marketResponseField = register('marketResponse', {
-    required: '',
-    maxLength: { value: 500, message: '최대 500자까지 작성가능합니다.' },
-  })
-  const XYZField = register('XYZ', {
-    required: '',
-    maxLength: { value: 500, message: '최대 500자까지 작성가능합니다.' },
-  })
-  const xyzField = register('xyz', {
-    required: '',
-    maxLength: { value: 500, message: '최대 500자까지 작성가능합니다.' },
-  })
-  const pretotypingField = register('pretotyping', {
-    required: '',
-    maxLength: { value: 500, message: '최대 500자까지 작성가능합니다.' },
-  })
-
-  const fields = {
-    outline: {
-      register: outlineField,
-      MaxLength: 500,
-    },
-    why: {
-      register: whyField,
-      MaxLength: 500,
-    },
-    marketResponse: {
-      register: marketResponseField,
-      MaxLength: 500,
-    },
-    XYZ: {
-      register: XYZField,
-      MaxLength: 500,
-    },
-    xyz: {
-      register: xyzField,
-      MaxLength: 500,
-    },
-    pretotyping: {
-      register: pretotypingField,
-      MaxLength: 500,
-    },
-  }
+function Textarea({ fieldKey, atom, option }: TextAreaProps) {
+  const { field, countCharacters, handleChange } = useFormCustom(
+    fieldKey,
+    atom,
+    option,
+  )
 
-  const countCharacters = () => {
-    const content = watch(fieldKey)
-    if (!content) {
-      return 0
-    }
-    return content.length
-  }
+  const MAX_LENGTH = 500
 
   return (
     <div className={S.textarea_container}>
-      <textarea
-        {...fields[fieldKey].register}
-        maxLength={fields[fieldKey].MaxLength - 1}
-      />
+      <textarea {...field} maxLength={MAX_LENGTH} onChange={handleChange} />
       <div className={S.letter_count_container}>
         <span
           className={cn({
-            [S.letter_max]: countCharacters() >= fields[fieldKey].MaxLength,
+            [S.letter_max]: countCharacters() >= MAX_LENGTH,
           })}
         >
           {countCharacters()}
         </span>
-        <span>{`/${fields[fieldKey].MaxLength}`}</span>
+        <span>{`/${MAX_LENGTH}`}</span>
       </div>
     </div>
   )

app/_constants/ibulsin.ts

@@ -1,4 +1,4 @@
-interface ibulsinVariantsType {
+export interface ibulsinVariantsType {
   outline: 'outline'
   why: 'why'
   marketResponse: 'marketResponse'

app/_hooks/useFormWithRecoil.ts

@@ -0,0 +1,37 @@
+import { RegisterOptions, useForm } from 'react-hook-form'
+import { ChangeEventHandler, useEffect } from 'react'
+import { RecoilState, useRecoilState } from 'recoil'
+
+export const useFormCustom = (
+  key: string,
+  atom: RecoilState<string>,
+  option: RegisterOptions | undefined,
+) => {
+  const { register, setValue, watch } = useForm()
+  const [recoilState, setRecoilState] = useRecoilState(atom)
+
+  const defaultOption = {
+    required: '',
+    maxLength: { value: 500, message: '최대 500자까지 작성가능합니다.' },
+  }
+
+  const field = register(key, option ?? defaultOption)
+
+  useEffect(() => {
+    setValue(key, recoilState)
+  }, [recoilState])
+
+  const countCharacters = () => {
+    const content = watch(key)
+
+    return content ? content.length : 0
+  }
+
+  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
+    const { value } = e.target
+
+    setRecoilState(value)
+  }
+
+  return { field, countCharacters, handleChange }
+}

app/_hooks/useIbulsinData.ts

@@ -0,0 +1,29 @@
+import { useRecoilValue } from 'recoil'
+import {
+  outlineTextareaAtom,
+  whyTextareaAtom,
+  marketResponseTextareaAtom,
+  XYZTextareaAtom,
+  xyzTextareaAtom,
+  pretotypingTextareaAtom,
+} from '@/app/_store/ibulsin/textarea'
+
+function useIbulsinData() {
+  const outlineValue = useRecoilValue(outlineTextareaAtom)
+  const whyTextValue = useRecoilValue(whyTextareaAtom)
+  const marketResponseValue = useRecoilValue(marketResponseTextareaAtom)
+  const XYZValue = useRecoilValue(XYZTextareaAtom)
+  const xyzValue = useRecoilValue(xyzTextareaAtom)
+  const pretotypingValue = useRecoilValue(pretotypingTextareaAtom)
+
+  return {
+    outlineValue,
+    whyTextValue,
+    marketResponseValue,
+    XYZValue,
+    xyzValue,
+    pretotypingValue,
+  }
+}
+
+export default useIbulsinData

app/_service/mutations/useIbulsinForm.ts

@@ -0,0 +1,27 @@
+import axiosInstance from '@/app/_utils/axios'
+import { useMutation } from '@tanstack/react-query'
+
+interface IbulsinFormBodyType {
+  ideaOverView: string
+  thinkBackground: string
+  marketTheory: string
+  bigxyzTheory: string
+  smallxyzTheory: string
+  pretotypingTheory: string
+}
+
+const postForm = (data: IbulsinFormBodyType) => {
+  const response = axiosInstance.post(`/api/`, data)
+
+  return response
+}
+
+const useIbulsinFormMutation = () => {
+  const { mutate } = useMutation({
+    mutationFn: postForm,
+  })
+
+  return { mutate }
+}
+
+export default useIbulsinFormMutation