[FIX] 댓글 조회 응답 데이터 구조 변경

src/apis/comment/useGetCommentList.ts

@@ -1,5 +1,5 @@
 import { axiosInstance } from '../axios';
-import type { CommentListResponse } from '../../types/comment';
+import type { ResponseCommentListDto } from '../../types/comment';
 import type { CategoryType } from '../../types/comment';
 import { useQuery } from '@tanstack/react-query';
 import { queryKey } from '../../constants/queryKey';
@@ -8,7 +8,7 @@ import { queryKey } from '../../constants/queryKey';
 export const getCommentList = async (
   targetId: number,
   category: CategoryType
-): Promise<CommentListResponse> => {
+): Promise<ResponseCommentListDto> => {
   try {
     const response = await axiosInstance.get('/api/comments', {
       params: {
@@ -25,7 +25,7 @@ export const getCommentList = async (
 
 export const useGetCommentList = (targetId: number, category: CategoryType) => {
   return useQuery({
-    queryKey: [queryKey.COMMENT_LIST, {targetId, category}],
+    queryKey: [queryKey.COMMENT_LIST, { targetId, category }],
     queryFn: () => getCommentList(targetId, category),
   });
 };

src/components/DetailView/Comment/CommentItem.tsx

@@ -5,12 +5,12 @@ import IcDummyProfile from '../../../assets/icons/gray-lg.svg';
 import type { Comment } from '../../../types/comment';
 import { formatDateTimeDot } from '../../../utils/formatDate';
 
-const CommentItem = ({ author, content, createdAt }: Comment) => {
+const CommentItem = ({ profileUrl, name, createdAt, content }: Comment) => {
   return (
     <div className="flex items-start gap-[1.6rem] w-full">
       {/* 댓글 작성자 프로필: 현재는 더미이미지 삽입. 추후 데이터 받아와 연동 예정 */}
       <img
-        src={author.profileImageUrl ?? IcDummyProfile}
+        src={profileUrl ?? IcDummyProfile}
         className="w-[3.2rem] h-[3.2rem] rounded-full object-cover"
         alt="작성자 프로필"
       />
@@ -19,7 +19,7 @@ const CommentItem = ({ author, content, createdAt }: Comment) => {
         {/* 작성자 정보 */}
         <div className="flex items-center gap-[0.8rem]">
           {/* 작성자 이름 */}
-          <span className="font-body-b text-gray-600 truncate">{author.authorName}</span>
+          <span className="font-body-b text-gray-600 truncate">{name}</span>
           {/* 작성 시간 */}
           <span className="font-small-r text-gray-500 truncate">
             {formatDateTimeDot(createdAt)}

src/components/DetailView/Comment/CommentSection.tsx

@@ -13,7 +13,8 @@ const CommentSection = () => {
   const { data: commentList } = useGetCommentList(targetId ?? 0, category ?? 'GOAL');
 
   useEffect(() => {
-    setComments(commentList?.comments ?? []);
+    console.log('commentList', commentList);
+    setComments(commentList?.info ?? []);
   }, [commentList]);
 
   return (
@@ -37,13 +38,14 @@ const CommentSection = () => {
           <>
             {/* 댓글을 순서대로 목록에 추가 */}
             <div className="relative flex flex-col gap-y-[2.4rem] w-full">
-              {comments.map(({ commentId, author, content, createdAt }) => (
+              {comments.map(({ id, profileUrl, name, createdAt, content }) => (
                 <CommentItem
-                  key={commentId}
-                  commentId={commentId}
-                  author={author}
-                  content={content}
+                  key={id}
+                  id={id}
+                  profileUrl={profileUrl}
+                  name={name}
                   createdAt={createdAt}
+                  content={content}
                 />
               ))}
             </div>

src/types/comment.ts

@@ -1,21 +1,11 @@
 export type CategoryType = 'ISSUE' | 'GOAL' | 'EXTERNAL';
 
-export type Author = {
-  authorId: number;
-  authorName: string;
-  profileImageUrl: string;
-};
-
 export type Comment = {
-  commentId: number;
+  id: number;
+  profileUrl: string;
+  name: string;
+  createdAt: string;
   content: string;
-  createdAt: Date;
-  author: Author;
-};
-
-export type CommentListResponse = {
-  totalSize: number;
-  comments: Comment[];
 };
 
 export type PostCommentRequest = {