✨feat: 너소서 폼 작성 - 서버 제대로 목킹하기

src/application/stores/neososeo-form.ts

@@ -6,8 +6,8 @@ export const neososeoFormState = atom<NeososeoFormData | null>({
   default: null,
 });
 
-export const neoseosoAnswerState = atom<NeososeoAnswerData>({
-  key: 'neoseosoAnswerState',
+export const neososeoAnswerState = atom<NeososeoAnswerData>({
+  key: 'neososeoAnswerState',
   default: {
     userID: 0,
     formID: 0,

src/infrastructure/api/neososeo-form.ts

@@ -1,6 +1,6 @@
 import { NeososeoAnswerData, NeososeoFormData } from './types/neososeo-form';
 
 export interface NeososeoFormService {
-  getFormInfo(userID: number, formID: number): Promise<NeososeoFormData>;
+  getFormInfo(userID: string, formID: string): Promise<NeososeoFormData>;
   postFormAnswer(body: NeososeoAnswerData): Promise<{ isSuccess: boolean }>;
 }

src/infrastructure/api/types/neososeo-form.ts

@@ -1,5 +1,3 @@
-import { Keyword } from './user';
-
 export type NeososeoFormData = {
   title: string;
   content: string;
@@ -16,5 +14,5 @@ export type NeososeoAnswerData = {
   name: string;
   relation: string;
   answer: string;
-  keyword: Keyword[];
+  keyword: string[];
 };

src/presentation/pages/NeososeoForm/Answer/index.tsx

@@ -2,23 +2,29 @@ import { api } from '@api/index';
 import { Keyword } from '@api/types/user';
 import CommonInput from '@components/common/CommonInput';
 import ImmutableKeywordList from '@components/common/Keyword/ImmutableList';
-import { neoseosoAnswerState, neososeoFormState } from '@stores/neososeo-form';
+import { neososeoAnswerState, neososeoFormState } from '@stores/neososeo-form';
+import { useEffect, useState } from 'react';
 import { Link, Outlet, useNavigate } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { StButton, StNeososeoFormLayout, StNeososeoTitle, StSubTitle } from '../style';
 import { StTextarea, StKeywordListWrapper } from './style';
 
 function NeososeoFormAnswer() {
   const neososeoFormData = useRecoilValue(neososeoFormState);
-  const [neososeoAnswerState, setNeososeoAnswerState] = useRecoilState(neoseosoAnswerState);
+  const [keywordList, setKeywordList] = useState<Keyword[]>([]);
+  const [neososeoAnswer, setNeososeoAnswer] = useRecoilState(neososeoAnswerState);
   const navigate = useNavigate();
 
   const postNeososeoForm = async () => {
-    const response = await api.neososeoFormService.postFormAnswer(neososeoAnswerState);
+    const response = await api.neososeoFormService.postFormAnswer(neososeoAnswer);
     if (response.isSuccess) navigate('../finish');
   };
 
-  const setAnswer = (answer: string) => setNeososeoAnswerState((prev) => ({ ...prev, answer }));
+  const setAnswer = (answer: string) => setNeososeoAnswer((prev) => ({ ...prev, answer }));
+
+  useEffect(() => {
+    setNeososeoAnswer((prev) => ({ ...prev, keyword: keywordList.map((k) => k.id) }));
+  }, [keywordList]);
 
   if (!neososeoFormData) return <></>;
 
@@ -41,29 +47,24 @@ function NeososeoFormAnswer() {
             />
           </Link>
           <StKeywordListWrapper>
-            <ImmutableKeywordList
-              keywordList={neososeoAnswerState.keyword}
-              onItemClick={() => null}
-            />
+            <ImmutableKeywordList keywordList={keywordList} onItemClick={() => null} />
           </StKeywordListWrapper>
         </div>
         <StButton onClick={postNeososeoForm}>답변 작성하기</StButton>
       </StNeososeoFormLayout>
       <Outlet
         context={{
-          keywordList: neososeoAnswerState.keyword,
+          keywordList: keywordList,
           addKeyword: (keyword: Keyword) =>
-            setNeososeoAnswerState((prev) => ({
-              ...prev,
-              keyword: prev.keyword.map((k) => k.content).includes(keyword.content)
-                ? prev.keyword
-                : [...prev.keyword, keyword],
-            })),
+            setKeywordList((prev) =>
+              prev.map((prev) => prev.content).includes(keyword.content)
+                ? prev
+                : [...prev, keyword],
+            ),
           removeKeyword: (targetKeyword: Keyword) =>
-            setNeososeoAnswerState((prev) => ({
-              ...prev,
-              keyword: prev.keyword.filter((keyword) => keyword.content !== targetKeyword.content),
-            })),
+            setKeywordList((prev) =>
+              prev.filter((keyword) => keyword.content !== targetKeyword.content),
+            ),
           targetUser: neososeoFormData.userID,
         }}
       />

src/presentation/pages/NeososeoForm/Intro/index.tsx

@@ -1,5 +1,5 @@
 import CommonInput from '@components/common/CommonInput';
-import { neoseosoAnswerState, neososeoFormState } from '@stores/neososeo-form';
+import { neososeoAnswerState, neososeoFormState } from '@stores/neososeo-form';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
@@ -14,14 +14,13 @@ import {
 
 function NeososeoFormIntro() {
   const neososeoFormData = useRecoilValue(neososeoFormState);
-  const [neososeoAnswerState, setNeososeoAnswerState] = useRecoilState(neoseosoAnswerState);
+  const [neososeoAnswer, setNeososeoAnswer] = useRecoilState(neososeoAnswerState);
   const navigate = useNavigate();
 
   const setUserName = (userName: string) =>
-    setNeososeoAnswerState((prev) => ({ ...prev, name: userName }));
+    setNeososeoAnswer((prev) => ({ ...prev, name: userName }));
 
-  const setRelation = (relation: string) =>
-    setNeososeoAnswerState((prev) => ({ ...prev, relation }));
+  const setRelation = (relation: string) => setNeososeoAnswer((prev) => ({ ...prev, relation }));
 
   useEffect(() => {
     if (!neososeoFormData) return;
@@ -47,7 +46,7 @@ function NeososeoFormIntro() {
           {neososeoFormData.relation.map((relation) => (
             <StRelation
               key={relation}
-              selected={neososeoAnswerState.relation === relation}
+              selected={neososeoAnswer.relation === relation}
               onClick={() => setRelation(relation)}
             >
               {relation}

src/presentation/pages/NeososeoForm/index.tsx

@@ -1,6 +1,6 @@
 import { api } from '@api/index';
 import FormRouter from '@routes/FormRouter';
-import { neoseosoAnswerState, neososeoFormState } from '@stores/neososeo-form';
+import { neososeoAnswerState, neososeoFormState } from '@stores/neososeo-form';
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { useRecoilState, useSetRecoilState } from 'recoil';
@@ -9,15 +9,14 @@ import { StNeososeoFormPage, StNeososeoFormHeader } from './style';
 function NeososeoFormPage() {
   const { userID, formID } = useParams();
   const [neososeoForm, setNeososeoForm] = useRecoilState(neososeoFormState);
-  const setNeoseosoAnswerResponse = useSetRecoilState(neoseosoAnswerState);
+  const setNeoseosoAnswer = useSetRecoilState(neososeoAnswerState);
 
   useEffect(() => {
     if (!userID || !formID) return;
-    if (isNaN(+userID) || isNaN(+formID)) return;
     (async () => {
-      const data = await api.neososeoFormService.getFormInfo(+userID, +formID);
+      const data = await api.neososeoFormService.getFormInfo(userID, formID);
       setNeososeoForm(data);
-      setNeoseosoAnswerResponse((prev) => ({ ...prev, userID: data.userID, formID: data.formID }));
+      setNeoseosoAnswer((prev) => ({ ...prev, userID: data.userID, formID: data.formID }));
     })();
   }, [userID, formID]);