Merge branch 'dev' into feat/#140

src/infrastructure/api/types/neoga.ts

@@ -26,6 +26,16 @@ export type ResultFormList = {
   keywordlists: Keyword[];
 };
 
+export type ResultDetailList = {
+  id: number;
+  title: string;
+  subtitle: string;
+  darkIconImage: string;
+  createdAt: string;
+  q: string;
+  keywordlists: Keyword[];
+};
+
 export type NeogaAnswerList = {
   id: number;
   name: string;
@@ -53,3 +63,26 @@ export type CreateFormInfo = {
   subtitle: string;
   image: string;
 };
+
+export type ResultFeedList = {
+  answerCount: number;
+  answer: FeedAnswer[];
+};
+
+export type FeedAnswer = {
+  formID: number;
+  id: number;
+  name: string;
+  relationship: string;
+  content: string;
+  isPinned: boolean;
+  createdAt: string;
+  keywords: AnswerKeyword[];
+};
+
+export type AnswerKeyword = {
+  id: number;
+  name: string;
+  colorcode: string;
+  answerId: number;
+};

src/infrastructure/api/types/team.ts

@@ -97,7 +97,7 @@ export type TeamIssueCategory = {
 export type IssueCategory = {
   id: number;
   name: string;
-}
+};
 
 export type PostFeedbackResponse = {
   isSuccess: boolean;

src/infrastructure/remote/neoga-result.ts

@@ -0,0 +1,49 @@
+import { privateAPI } from './base';
+import { ResultDetailList, ResultFeedList } from '@api/types/neoga';
+
+export const getNeogaResult = async (formID: number): Promise<ResultDetailList | undefined> => {
+  try {
+    const response = await privateAPI.get({ url: `/form/detail/${formID}` });
+    return {
+      id: response.data.id,
+      title: response.data.title,
+      subtitle: response.data.subtitle,
+      darkIconImage: response.data.darkIconImage,
+      createdAt: response.data.createdAt,
+      q: response.data.q,
+      keywordlists: response.data.keyword.map((keyword: any) => ({
+        id: keyword.id,
+        content: keyword.name,
+        color: keyword.colorcode,
+      })),
+    };
+  } catch (e) {
+    throw '서버 통신 실패';
+  }
+};
+
+export const getNeogaFeedbackResult = async (formID: number): Promise<ResultFeedList | null> => {
+  try {
+    const response = await privateAPI.get({ url: `/form/detail/${formID}/answer` });
+    return {
+      answerCount: response.data.answerCount,
+      answer: response.data.answer.map((feedback: any) => ({
+        formID: feedback.formID,
+        id: feedback.id,
+        name: feedback.name,
+        relationship: feedback.relationship,
+        content: feedback.content,
+        isPinned: feedback.isPinned,
+        createdAt: feedback.createdAt,
+        keywords: feedback.keywords.map((keyword: any) => ({
+          id: keyword.id,
+          content: keyword.name,
+          color: keyword.colorcode,
+          answerId: keyword.answerId,
+        })),
+      })),
+    };
+  } catch (e) {
+    throw '서버 통신 실패';
+  }
+};

src/infrastructure/remote/team.ts

@@ -71,11 +71,13 @@ export function teamDataRemote(): TeamService {
         issueListData: response.data
           ? response.data.map((team: any) => ({
               issueNumber: team.id,
-              issueMembers: team.feedback? team.feedback.map((member: any) => ({
-                id: member.userId,
-                profileName: member.name,
-                profileImage: member.image,
-              })) : [],
+              issueMembers: team.feedback
+                ? team.feedback.map((member: any) => ({
+                    id: member.userId,
+                    profileName: member.name,
+                    profileImage: member.image,
+                  }))
+                : [],
               category: team.categoryName,
               createdAt: team.dates,
               content: team.content,
@@ -96,11 +98,13 @@ export function teamDataRemote(): TeamService {
         issueListData: response.data
           ? response.data.map((team: any) => ({
               issueNumber: team.id,
-              issueMembers: team.feedback? team.feedback.map((member: any) => ({
-                id: member.userId,
-                profileName: member.name,
-                profileImage: member.image,
-              })) : [],
+              issueMembers: team.feedback
+                ? team.feedback.map((member: any) => ({
+                    id: member.userId,
+                    profileName: member.name,
+                    profileImage: member.image,
+                  }))
+                : [],
               category: team.categoryName,
               createdAt: team.dates,
               content: team.content,

src/presentation/components/NeogaDetailForm/index.tsx

@@ -1,7 +1,14 @@
-import { api } from '@api/index';
 import { useEffect, useState } from 'react';
 import ImmutableKeywordList from '@components/common/Keyword/ImmutableList';
 import { icLink, IcArrowDown, IcArrowUp } from '@assets/icons/index';
+import { ResultFeedList } from '@api/types/neoga';
+import { imgEmptyFeedback } from '@assets/images';
+import { ResultDetailList } from '@api/types/neoga';
+import { getNeogaResult, getNeogaFeedbackResult } from '@infrastructure/remote/neoga-result';
+import { useToast } from '@hooks/useToast';
+import { copyClipboard } from '@utils/copyClipboard';
+import { useParams } from 'react-router-dom';
+
 import {
   StNeogaDetailForm,
   StTitle,
@@ -20,38 +27,37 @@ import {
   StButton,
   StMoreWrapper,
   StMoreButton,
+  StIcon,
 } from './style';
-import { ResultFormList } from '@api/types/neoga';
-import { imgEmptyFeedback } from '@assets/images';
-import { useParams } from 'react-router-dom';
-import { Keyword } from '@api/types/user';
 
 function NeogaDetailForm() {
   const { formID } = useParams();
-  const [resultKeywordList, setResultKeywordList] = useState<Keyword[]>([]);
-  const [resultList, setResultList] = useState<ResultFormList[]>([]);
+  const [resultKeywordList, setResultKeywordList] = useState<ResultDetailList>();
+  const [resultFeedback, setResultFeedback] = useState<ResultFeedList | null>(null);
   const [resultBoolean, setResultBoolean] = useState(false);
   const [lookMoreButton, setLookMoreButton] = useState(false);
+  const link = `www.neogasogaeseo.com/neososeoform/${resultKeywordList && resultKeywordList.q}`;
+  const { fireToast } = useToast();
 
   useEffect(() => {
     if (!formID) return;
     if (isNaN(+formID)) return;
     (async () => {
-      const data = await api.neogaService.getResultKeywords(+formID);
+      const data = await getNeogaResult(+formID);
       setResultBoolean(true);
       setResultKeywordList(data);
     })();
-  }, [resultKeywordList]);
+  }, []);
 
   useEffect(() => {
     if (!formID) return;
     if (isNaN(+formID)) return;
     (async () => {
-      const data = await api.neogaService.getAllResultListTemplates(+formID);
+      const data = await getNeogaFeedbackResult(+formID);
       setResultBoolean(true);
-      setResultList(data);
+      setResultFeedback(data);
     })();
-  }, [resultList]);
+  }, []);
 
   const onClickMore = () => {
     setLookMoreButton(true);
@@ -61,22 +67,32 @@ function NeogaDetailForm() {
     setLookMoreButton(false);
   };
 
+  if (!resultKeywordList) return <></>;
   return (
     <StNeogaDetailForm>
       <div>
         <StHeader>
           <StTitle>
-            2022, 임인년 <br />
-            강쥐에게 기대하는 모습은?
+            {resultKeywordList.title} <br />
           </StTitle>
+          <StIcon>
+            <img src={resultKeywordList.darkIconImage} />
+          </StIcon>
         </StHeader>
         <StLink>
           <img src={icLink} />
-          <p>링크 복사하기</p>
+          <p
+            onClick={() =>
+              copyClipboard(link, () => fireToast({ content: '링크가 클립보드에 저장되었습니다.' }))
+            }
+          >
+            링크 복사하기
+          </p>
         </StLink>
-        <StDate>2021-01-17 에 생성</StDate>
+        <StDate>{resultKeywordList.createdAt} 에 생성</StDate>
         <StQuestion>
-          <span>Q.</span>나와 함께하며 당신이 닮고 싶었던 능력이 있었을까요 ?
+          <span>Q.</span>
+          {resultKeywordList.subtitle}
         </StQuestion>
       </div>
       {resultBoolean ? (
@@ -85,21 +101,24 @@ function NeogaDetailForm() {
             <p>키워드모음</p>
             {!lookMoreButton && (
               <ImmutableKeywordList
-                keywordList={resultKeywordList.slice(0, 7)}
+                keywordList={resultKeywordList ? resultKeywordList.keywordlists.slice(0, 7) : []}
                 onItemClick={() => null}
               />
             )}
             <StMoreWrapper>
-              {lookMoreButton && resultKeywordList.length > 7 ? (
+              {lookMoreButton && resultKeywordList?.keywordlists.length > 7 ? (
                 <>
-                  <ImmutableKeywordList keywordList={resultKeywordList} onItemClick={() => null} />
+                  <ImmutableKeywordList
+                    keywordList={resultKeywordList?.keywordlists ?? []}
+                    onItemClick={() => null}
+                  />
                   <hr />
                   <StMoreButton onClick={onClickFold}>
                     접기<img src={IcArrowUp}></img>
                   </StMoreButton>
                 </>
               ) : (
-                resultKeywordList.length > 7 && (
+                resultKeywordList.keywordlists.length > 7 && (
                   <>
                     <hr />
                     <StMoreButton onClick={onClickMore}>
@@ -112,30 +131,42 @@ function NeogaDetailForm() {
           </StKeyword>
           <hr />
           <StFeedTitle>
-            <span>5개</span>의 답변 피드
+            <span>{resultFeedback?.answerCount}개</span>의 답변 피드
           </StFeedTitle>
-          {resultList.map((data) => {
-            return (
-              <>
-                <StFeedWrapper>
-                  <StFeedHeader>
-                    <StFeedName>
-                      {data.category}·<span>{data.writer}</span>
-                    </StFeedName>
-                    <StFeedDate>{data.createdAt}</StFeedDate>
-                  </StFeedHeader>
-                  <StFeedContent>{data.content}</StFeedContent>
-                  <ImmutableKeywordList keywordList={resultKeywordList} onItemClick={() => null} />
-                  <hr />
-                </StFeedWrapper>
-              </>
-            );
-          })}
+          {resultFeedback &&
+            resultFeedback.answer.map((feedback: any) => {
+              return (
+                <>
+                  <StFeedWrapper>
+                    <StFeedHeader>
+                      <StFeedName>
+                        {feedback.name}
+                        <p>·</p>
+                        <span>{feedback.relationship}</span>
+                      </StFeedName>
+                      <StFeedDate>{feedback.createdAt}</StFeedDate>
+                    </StFeedHeader>
+                    <StFeedContent>{feedback.content}</StFeedContent>
+                    <ImmutableKeywordList
+                      keywordList={feedback.keywords}
+                      onItemClick={() => null}
+                    />
+                    <hr />
+                  </StFeedWrapper>
+                </>
+              );
+            })}
         </>
       ) : (
         <StEmptyFeedback>
           <img src={imgEmptyFeedback} alt="" />
-          <StButton>링크 복사하기</StButton>
+          <StButton
+            onClick={() =>
+              copyClipboard(link, () => fireToast({ content: '링크가 클립보드에 저장되었습니다.' }))
+            }
+          >
+            링크 복사하기
+          </StButton>
         </StEmptyFeedback>
       )}
     </StNeogaDetailForm>