✨feat: 관계의 타입 중에 id 추가하기

Neogasogaeseo · Jan 16, 2022 · bb1a0ff · bb1a0ff
1 parent 63e3675
commit bb1a0ff
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/src/application/stores/neososeo-form.ts b/src/application/stores/neososeo-form.ts
@@ -12,7 +12,7 @@ export const neososeoAnswerState = atom<NeososeoAnswerData>({
     userID: 0,
     formID: 0,
     name: '',
-    relation: '',
+    relationID: 0,
     answer: '',
     keyword: [],
   },

diff --git a/src/infrastructure/api/types/neososeo-form.ts b/src/infrastructure/api/types/neososeo-form.ts
@@ -1,8 +1,13 @@
+export type Relation = {
+  id: number;
+  content: string;
+};
+
 export type NeososeoFormData = {
   title: string;
   content: string;
   imageSub: string;
-  relation: string[];
+  relation: Relation[];
   userName: string;
   userID: number;
   formID: number;
@@ -12,7 +17,7 @@ export type NeososeoAnswerData = {
   userID: number;
   formID: number;
   name: string;
-  relation: string;
+  relationID: number;
   answer: string;
   keyword: string[];
 };
diff --git a/src/infrastructure/mock/neososeo-form.data.ts b/src/infrastructure/mock/neososeo-form.data.ts
@@ -4,7 +4,12 @@ export const NEOSOSEO_FORM_DATA: { FORM: NeososeoFormData } = {
   FORM: {
     title: '너가 닮고 싶은\n나의 일잘러 모습',
     content: '나와 함께하며 당신이 닮고 싶었던 능력이 있었나요?',
-    relation: ['동네친구', '쿵짝최고', '존경해요', '찐친베프'],
+    relation: [
+      { id: 1, content: '동네친구' },
+      { id: 2, content: '쿵짝최고' },
+      { id: 3, content: '존경해요' },
+      { id: 4, content: '찐친베프' },
+    ],
     imageSub:
       'https://ww.namu.la/s/61e3a8075b5aa238383c0d89badd3442f7389a0285575fc5bc5c16d2a34f22c66e57e35d568b63b706fa24750c784d55e972ceeea93fa5a91d00dab1eea37681e189ae826afe668fb379b0cb3a446f3268755691ed20c6a165185d44e2fd1029896062ed4df01a806594e35a637b2372',
     userName: '강쥐',

diff --git a/src/presentation/pages/NeososeoForm/Intro/index.tsx b/src/presentation/pages/NeososeoForm/Intro/index.tsx
@@ -1,7 +1,8 @@
+import { Relation } from '@api/types/neososeo-form';
 import CommonInput from '@components/common/CommonInput';
 import { neososeoAnswerState, neososeoFormState } from '@stores/neososeo-form';
 import { isAllFilled } from '@utils/string';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import {
@@ -15,13 +16,20 @@ import {
 
 function NeososeoFormIntro() {
   const neososeoFormData = useRecoilValue(neososeoFormState);
+  const [relation, setRelation] = useState<Relation | null>(null);
   const [neososeoAnswer, setNeososeoAnswer] = useRecoilState(neososeoAnswerState);
   const navigate = useNavigate();
 
   const setUserName = (userName: string) =>
     setNeososeoAnswer((prev) => ({ ...prev, name: userName }));
 
-  const setRelation = (relation: string) => setNeososeoAnswer((prev) => ({ ...prev, relation }));
+  const setAnswerRelation = (relationID: number) =>
+    setNeososeoAnswer((prev) => ({ ...prev, relationID }));
+
+  useEffect(() => {
+    if (!relation) return;
+    setAnswerRelation(relation.id);
+  }, [relation]);
 
   useEffect(() => {
     if (!neososeoFormData) return;
@@ -46,11 +54,11 @@ function NeososeoFormIntro() {
         <StRelationWrapper>
           {neososeoFormData.relation.map((relation) => (
             <StRelation
-              key={relation}
-              selected={neososeoAnswer.relation === relation}
+              key={relation.id}
+              selected={neososeoAnswer.relationID === relation.id}
               onClick={() => setRelation(relation)}
             >
-              {relation}
+              {relation.content}
             </StRelation>
           ))}
         </StRelationWrapper>