[신승헌] sprint10

components/Boards/CommentList.tsx

@@ -1,23 +1,35 @@
 import ProfileDefault from "@/public/images/profile_default.png";
+import EmptyComments from "@/public/images/Img_reply_empty.png";
+import { Comment } from "@/types";
+import formatDate from "@/utils/formatDate";
 import Image from "next/image";
 
-export default function CommentList() {
+export default function CommentList({ comments }: { comments: Comment[] }) {
   return (
-    <div className="flex flex-col gap-6 mb-6">
-      <div>Content</div>
-      <div className="flex items-center gap-2">
-        <Image
-          src={ProfileDefault}
-          width={32}
-          height={32}
-          alt="댓글프로필이미지"
-        />
-        <div>
-          <p className="text-gray-600">nickname</p>
-          <p className="text-gray-400">times ago</p>
-        </div>
-      </div>
-      <hr className="h-[1px] bg-gray-200" />
-    </div>
+    <>
+      {comments &&
+        comments.map((comment) => {
+          return (
+            <div className="flex flex-col gap-6 mb-6" key={comment.id}>
+              <div>{comment.content}</div>
+              <div className="flex items-center gap-2">
+                <Image
+                  src={ProfileDefault}
+                  width={32}
+                  height={32}
+                  alt="댓글프로필이미지"
+                />
+                <div>
+                  <p className="text-gray-600">{comment.writer.nickname}</p>
+                  <p className="text-gray-400">
+                    {formatDate(comment.updatedAt)}
+                  </p>
+                </div>
+              </div>
+              <hr className="h-[1px] bg-gray-200" />
+            </div>
+          );
+        })}
+    </>
   );
 }

pages/boards/[id].tsx

@@ -7,23 +7,38 @@ import Image from "next/image";
 import Link from "next/link";
 import instance from "@/lib/axios";
 import { GetServerSidePropsContext } from "next";
-import { Article } from "@/types";
+import { Article, Comment } from "@/types";
 import formatDate from "@/utils/formatDate";
 import CommentList from "@/components/Boards/CommentList";
 
+const COMMENTS_MAX = 5;
+
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const id = context.query.id;
 
-  const res = await instance.get(`/articles/${id}`);
-  const article = res.data ?? [];
+  const articlesRes = await instance.get(`/articles/${id}`);
+  const commentsRes = await instance.get(
+    `/articles/${id}/comments?limit=${COMMENTS_MAX}`
+  );
+
+  const article: Article = articlesRes.data ?? {};
+  const comments: Comment[] = commentsRes.data.list ?? [];
+
   return {
     props: {
       article,
+      comments,
     },
   };
 }
 
-export default function Article({ article }: { article: Article }) {
+export default function Article({
+  article,
+  comments,
+}: {
+  article: Article;
+  comments: Comment[];
+}) {
   return (
     <div className="flex flex-col gap-8">
       <div className="flex flex-col gap-4">
@@ -83,7 +98,7 @@ export default function Article({ article }: { article: Article }) {
             name="comment"
           />
         </div>
-        <CommentList />
+        <CommentList comments={comments} />
         <Link
           className="w-60 h-12 bg-blue-default rounded-full flex justify-center items-center gap-2 mx-auto"
           href="/boards"

types/apiResponses.ts

@@ -1,11 +1,17 @@
-export interface ResponseBody {
+export interface ArticlesResponseBody {
   list: [];
   totalCount: number;
 }
 
+export interface CommentsResponseBody {
+  list: [];
+  nextCursor: number | null;
+}
+
 export interface Writer {
   id: number;
   nickname: string;
+  image: string | null;
 }
 
 export interface Article {
@@ -19,3 +25,11 @@ export interface Article {
   writer: Writer;
   isLiked: boolean;
 }
+
+export interface Comment {
+  id: number;
+  content: string;
+  createdAt: string;
+  updatedAt: string;
+  writer: Writer;
+}