hotFix: 기존 커뮤니티에서는 실제 데이터 사용

src/apis/groups/apis.ts

@@ -12,7 +12,7 @@ import type {
  Comment,
  CommentDeleteRequest,
  CommentRequest,
- CommentsReponse,
+ CommentsResponse,
  CreateGroupRequest,
  CreateGroupResponse,
  EstimateRequest,
@@ -54,7 +54,7 @@ export const deleteArticle = ({ params: { groupId, articleId } }: ArticleDeleteR
 };
 
 export const getComments = (groupId: number, articleId: number) => {
- return privateApi.get<CommentsReponse>(`/groups/${groupId}/articles/${articleId}/comments`);
+ return privateApi.get<CommentsResponse>(`/groups/${groupId}/articles/${articleId}/comments`);
 };
 
 export const postComment = ({ params: { groupId, articleId }, payload }: CommentRequest) => {

src/apis/groups/type.ts

@@ -146,7 +146,7 @@ export interface CommentDeleteRequest {
  };
 }
 
-export interface CommentsReponse {
+export interface CommentsResponse {
  comments: Comment[];
 }
 

src/app/[lng]/(main)/community/[articleId]/components/ArticleDetail.tsx

@@ -4,6 +4,7 @@ import CommentList from '@/app/[lng]/(main)/community/[articleId]/components/Com
 import { useTranslation } from '@/app/i18n/client';
 import { Divider } from '@/components/Divider';
 import { Spacing } from '@/components/Spacing';
+import { DUMMY_COMMENTS_DATA } from '@/constants/dummyData';
 
 interface DetailContentProps {
  articleData: CommunityArticle;
@@ -20,7 +21,7 @@ export default function ArticleDetail({ articleData }: DetailContentProps) {
  <Spacing size={20} />
  <p className="px-24">{t('detail.commentCount', { commentCount })}</p>
  <Spacing size={8} />
- <CommentList />
+ <CommentList commentList={DUMMY_COMMENTS_DATA} />
  </>
  );
 }

src/app/[lng]/(main)/community/[articleId]/components/CommentList.tsx

@@ -11,13 +11,17 @@ import { DUMMY_COMMENTS_DATA } from '@/constants/dummyData';
 import { useNumberParams } from '@/hooks/useNumberParams';
 import { useBlockStore } from '@/store/useBlockStore';
 
-export default function CommentList() {
+interface CommentListProps {
+ commentList: Comment[];
+}
+
+export default function CommentList({ commentList }: CommentListProps) {
  const { articleId, groupId } = useNumberParams<['articleId', 'groupId']>();
 
  return (
  <ItemList
- data={DUMMY_COMMENTS_DATA}
- renderItem={(comment) => (
+ data={commentList}
+ renderItem={(comment: Comment) => (
  <CommentItem comment={comment} groupId={groupId} articleId={articleId} isCaptain={true} />
  )}
  renderEmpty={() => <EmptyComment />}

src/app/[lng]/(main)/grouping/[groupId]/articles/[articleId]/components/ArticleDetail.client.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useGetArticle, useGetGroupDetail } from '@/apis/groups';
+import { useGetArticle, useGetComments, useGetGroupDetail } from '@/apis/groups';
 import CommentList from '@/app/[lng]/(main)/community/[articleId]/components/CommentList';
 import ArticleItem from '@/app/[lng]/(main)/grouping/components/ArticleItem.client';
 import { useTranslation } from '@/app/i18n/client';
@@ -13,6 +13,7 @@ export default function ArticleDetail() {
  const { articleId, groupId } = useNumberParams<['articleId', 'groupId']>();
  const { data: groupDetailData } = useGetGroupDetail(groupId);
  const { data: articleData } = useGetArticle(groupId, articleId);
+ const { data: commentData } = useGetComments(groupId, articleId);
 
  const { isCaptain } = groupDetailData;
  const { commentCount } = articleData;
@@ -30,7 +31,7 @@ export default function ArticleDetail() {
  <p className="px-24">{t('board.commentCount', { commentCount })}</p>
  <Spacing size={8} />
  <Divider thickness="thin" />
- <CommentList />
+ <CommentList commentList={commentData.comments} />
  </>
  );
 }