Merge pull request #141 from Neogasogaeseo/feat/#140

링크 생성 뷰 너소서 정보 get 누나쿵

src/infrastructure/api/neoga.ts

@@ -4,6 +4,7 @@ import {
   NeogaCardItem,
   NeogaResultCardItem,
   ResultFormList,
+  CreateFormInfo,
 } from './types/neoga';
 import { Keyword } from './types/user';
 
@@ -16,4 +17,5 @@ export interface NeogaService {
   getResultKeywords(formID: number): Promise<Keyword[]>;
   getAllResultListTemplates(formID: number): Promise<ResultFormList[]>;
   postAnswerBookmark(answerID: number): Promise<{ isSuccess: boolean }>;
+  getCreateFormInfo(formID: number): Promise<CreateFormInfo>;
 }

src/infrastructure/api/types/neoga.ts

@@ -57,6 +57,13 @@ export type NeogaResultCardItem = {
   count: number;
 };
 
+export type CreateFormInfo = {
+  id: number;
+  title: string;
+  subtitle: string;
+  image: string;
+};
+
 export type ResultFeedList = {
   answerCount: number;
   answer: FeedAnswer[];

src/infrastructure/mock/neoga.ts

@@ -42,6 +42,11 @@ export function neogaDataMock(): NeogaService {
     return { isSuccess: true };
   };
 
+  const getCreateFormInfo = async () => {
+    await wait(2000);
+    return { id: 0, title: '', subtitle: '', image: '' };
+  };
+
   return {
     getBannerTemplate,
     getMainTemplate,
@@ -51,6 +56,7 @@ export function neogaDataMock(): NeogaService {
     getResultKeywords,
     getAllResultListTemplates,
     postAnswerBookmark,
+    getCreateFormInfo,
   };
 }
 

src/infrastructure/remote/neoga.ts

@@ -119,6 +119,22 @@ export function NeogaDataRemote(): NeogaService {
     return { isSuccess: true };
   };
 
+  const getCreateFormInfo = async (formID: number) => {
+    const response = await privateAPI.get({
+      url: `/form/create/${formID}`,
+    });
+
+    const { id, title, subtitle, darkIconImage } = response.data;
+    if (response.status === 200) {
+      return {
+        id: id,
+        title: title,
+        subtitle: subtitle,
+        image: darkIconImage,
+      };
+    } else throw '서버 통신 실패';
+  };
+
   return {
     getBannerTemplate,
     getMainTemplate,
@@ -128,6 +144,7 @@ export function NeogaDataRemote(): NeogaService {
     getResultKeywords,
     getAllResultListTemplates,
     postAnswerBookmark,
+    getCreateFormInfo,
   };
 }
 

src/presentation/pages/Neoga/Link/index.tsx

@@ -1,19 +1,34 @@
-import { imgComputer } from '@assets/images';
 import NeososeoFormHeader from '@components/common/NeososeoFormHeader';
 import Question from '@components/common/Question';
 import { StNeogaLink, StLinkCreateButton } from './style';
 import { useNavigate } from 'react-router';
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { api } from '@api/index';
+import { useState } from 'react';
+import { CreateFormInfo } from '@api/types/neoga';
 
 export default function NeogaLink() {
   const navigate = useNavigate();
-  const title = '너가 닮고 싶은\n나의 일잘러 모습';
-  const image = imgComputer;
-  const question = '나와 함께하며 당신이\n닮고 싶었던 능력이 있었나요?';
+  const { formID } = useParams();
+  const [formData, setFormData] = useState<Omit<CreateFormInfo, 'id'>>({
+    title: '',
+    subtitle: '',
+    image: '',
+  });
+
+  useEffect(() => {
+    if (formID && !isNaN(+formID))
+      (async () => {
+        const formData = await api.neogaService.getCreateFormInfo(Number(formID));
+        setFormData(formData);
+      })();
+  }, []);
 
   return (
     <StNeogaLink>
-      <NeososeoFormHeader title={title} image={image} />
-      <Question content={question} />
+      <NeososeoFormHeader title={formData.title} image={formData.image} />
+      <Question content={formData.subtitle} />
       <StLinkCreateButton onClick={() => navigate(`./new`)}>링크 생성하기</StLinkCreateButton>
     </StNeogaLink>
   );