feat: 코멘트 랜더 로직 변경

ccondae · Apr 8, 2024 · 8cec19f · 8cec19f
1 parent ffeede4
commit 8cec19f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 18 deletions.
diff --git a/src/entities/comment/model/comment-upload.type.ts b/src/entities/comment/model/comment-upload.type.ts
@@ -4,7 +4,7 @@ export interface CommentUpload {
 }
 
 export interface CommentUploadResponse {
-  createAt: string;
+  createdAt: string;
   id: number;
   content: string;
   likeCount: number;

diff --git a/src/pages/question-detail-page/question-detail-page.tsx b/src/pages/question-detail-page/question-detail-page.tsx
@@ -27,6 +27,17 @@ const QuestionBox = styled.div`
   background: linear-gradient(60deg, rgba(42, 39, 49, 1) 0%, rgba(137, 128, 155, 1) 35%, rgba(42, 39, 49, 1) 100%);
   border-radius: 28px;
 `;
+const CommentsContainer = styled.div`
+  margin: 100px 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  & > * {
+    width: 100%;
+  }
+`;
 
 export const QuestionDetailPage = () => {
   const { id } = useParams();
@@ -46,12 +57,13 @@ export const QuestionDetailPage = () => {
   const categories = data?.categories.map((category) => category.name) || [];
   const githubUrl = data?.githubUrl || "";
   // Body 영역
-  const { content = "", purpose = "", code = "" } = data || {};
+  const { content = "", purpose = "", code = "", comments = [] } = data || {};
   const questionDetailBodyProps = {
     content,
     purpose,
     code,
   };
+  console.log(data);
   return (
     <>
       <QuestionBox>
@@ -66,7 +78,11 @@ export const QuestionDetailPage = () => {
             <QuestionDetailBody {...questionDetailBodyProps} />
           </QuestionTextContainer>
         </QuestionDetailContainer>
-        <CommentByQuestionAnswer />
+        <CommentsContainer>
+          {comments.map((comment, idx) => {
+            return <CommentByQuestionAnswer key={idx} comment={comment} />;
+          })}
+        </CommentsContainer>
       </QuestionBox>
     </>
   );

diff --git a/src/widgets/question-list/ui/question-list.ui.tsx b/src/widgets/question-list/ui/question-list.ui.tsx
@@ -1,4 +1,4 @@
-import { useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 import styled from "styled-components";
 
@@ -10,7 +10,6 @@ import { useQuestionListQuery } from "~/entities/question-list/api/use-question-
 import { useQuestionSearchQuery } from "~/entities/question-list/api/use-question-search.query";
 
 import { PageNation } from "~/shared/common-ui/page-nation";
-import { useReumi } from "~/shared/hooks";
 
 const Container = styled.div`
   max-width: 768px;
@@ -36,11 +35,12 @@ export const QuestionList = () => {
   const currentPage = Number(searchParams?.get("page")) || 1;
   const category = useRecoilValue(categoryState);
   const language = useRecoilValue(languageState);
+  const navigator = useNavigate();
 
   const { data: questions, isPending, isError } = useQuestionListQuery(category, currentPage - 1, language);
   const searchTerm = searchParams?.get("search") || "";
 
-  const { goToReumi } = useReumi();
+  // const { goToReumi } = useReumi();
 
   const {
     data: searchedQuestionData,
@@ -61,18 +61,19 @@ export const QuestionList = () => {
     <Container>
       <QuestionListContainer>
         {data?.length === 0 && <div>검색 결과가 없습니다.</div>}
-        {data && data.map(({ id, title, likeCount, viewCount, categories, commentCount, createdAt }) => (
-          <Question
-            key={id}
-            title={title}
-            likeCount={likeCount}
-            viewCount={viewCount}
-            categories={categories}
-            commentCount={commentCount}
-            createdAt={createdAt}
-            onClick={goToReumi}
-          />
-        ))}
+        {data &&
+          data.map(({ id, title, likeCount, viewCount, categories, commentCount, createdAt }) => (
+            <Question
+              key={id}
+              title={title}
+              likeCount={likeCount}
+              viewCount={viewCount}
+              categories={categories}
+              commentCount={commentCount}
+              createdAt={createdAt}
+              onClick={() => navigator(`/question/${id}`)}
+            />
+          ))}
       </QuestionListContainer>
       {/* 필터링 변경되면 currentPage 초기화 해줘야 함 */}
       <PageNation page={currentPage} />