FE-18 ✨ 최근 댓글 조회 기능 구현

src/apis/getRecentComments.ts

@@ -0,0 +1,13 @@
+import type { GetRecentCommentsResponseType } from '@/schema/recentcomment';
+import httpClient from './index';
+
+const getRecentComments = async (): Promise<GetRecentCommentsResponseType> => {
+  const response = await httpClient.get('/comments', {
+    params: {
+      limit: 3,
+    },
+  });
+  return response.data;
+};
+
+export default getRecentComments;

src/components/Card/CommentCard.tsx

@@ -3,22 +3,24 @@ import Image from 'next/image';
 import { CommentCardProps } from '@/types/CommentCardTypes';
 import { sizeStyles, textSizeStyles, gapStyles, paddingStyles, contentWidthStyles } from '@/styles/CommentCardStyles';
 
-function CommentCard({ status }: CommentCardProps) {
+function CommentCard({ writer, content, createdAt, status }: CommentCardProps) {
+  const formattedDate = createdAt.toLocaleString();
+
   return (
     <div
       className={`bg-slate-100 border-t border-slate-300 flex-col justify-start items-start gap-2.5 inline-flex ${sizeStyles.sm} ${sizeStyles.md} ${sizeStyles.lg} ${paddingStyles.sm} ${paddingStyles.md} ${paddingStyles.lg}`}
     >
       <div className='justify-start items-start gap-4 inline-flex'>
         <div className='w-12 h-12 relative'>
           <div className='w-12 h-12 bg-zinc-300 rounded-full overflow-hidden flex items-center justify-center'>
-            <Image src='/ProfileTestImage.jpg' alt='프로필 이미지' layout='fill' objectFit='cover' className='rounded-full' />{' '}
+            <Image src={writer.image} alt='프로필 이미지' layout='fill' objectFit='cover' className='rounded-full' />
           </div>
         </div>
         <div className={`flex-col justify-start items-start ${gapStyles.sm} ${gapStyles.md} ${gapStyles.lg} inline-flex ${contentWidthStyles.sm} ${contentWidthStyles.md} ${contentWidthStyles.lg}`}>
           <div className='justify-between items-center w-full inline-flex'>
             <div className='justify-start items-start gap-2 flex'>
-              <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.name} ${textSizeStyles.md.name} ${textSizeStyles.lg.name}`}>지킬과 하이드</div>
-              <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.time} ${textSizeStyles.md.time} ${textSizeStyles.lg.time}`}>1시간 전</div>
+              <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.name} ${textSizeStyles.md.name} ${textSizeStyles.lg.name}`}>{writer.nickname}</div>
+              <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.time} ${textSizeStyles.md.time} ${textSizeStyles.lg.time}`}>{formattedDate}</div>
             </div>
             {status === 'edit' && (
               <div className='justify-start items-start gap-4 flex'>
@@ -30,7 +32,7 @@ function CommentCard({ status }: CommentCardProps) {
           <div
             className={`w-full text-zinc-800 font-normal font-pretendard ${textSizeStyles.sm.content} ${textSizeStyles.md.content} ${textSizeStyles.lg.content} ${contentWidthStyles.sm} ${contentWidthStyles.md} ${contentWidthStyles.lg}`}
           >
-            오늘 하루 우울했었는데 덕분에 많은 힘 얻고 갑니다. 연금술사 책 다시 사서 오랜만에 읽어봐야겠어요!
+            {content}
           </div>
         </div>
       </div>

src/components/main/RecentComment.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import useGetRecentComments from '@/hooks/useGetRecentComments';
+import CommentCard from '@/components/Card/CommentCard';
+
+function RecentComments() {
+  const { data, error, isLoading } = useGetRecentComments();
+
+  if (isLoading) return <p>로딩 중...</p>;
+  if (error) return <p>{error.message}</p>;
+
+  return (
+    <div>
+      <h1>최신 댓글</h1>
+      {data?.list.map((comment) => <CommentCard key={comment.id} writer={comment.writer} content={comment.content} createdAt={new Date(comment.createdAt)} status='view' />)}
+    </div>
+  );
+}
+
+export default RecentComments;

src/hooks/useGetRecentComments.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+import getRecentComments from '@/apis/getRecentComments';
+import { GetRecentCommentsResponseType } from '@/schema/recentcomment';
+
+const useGetRecentComments = () =>
+  useQuery<GetRecentCommentsResponseType, Error>({
+    queryKey: ['recentComments', 3],
+    queryFn: getRecentComments,
+  });
+
+export default useGetRecentComments;

src/schema/recentcomment.ts

@@ -0,0 +1,27 @@
+import * as z from 'zod';
+
+const WriterSchema = z.object({
+  image: z.string().url(),
+  nickname: z.string(),
+  id: z.number(),
+});
+
+const CommentSchema = z.object({
+  epigramId: z.number(),
+  writer: WriterSchema,
+  updatedAt: z.coerce.date(),
+  createdAt: z.coerce.date(),
+  isPrivate: z.boolean(),
+  content: z.string(),
+  id: z.number(),
+});
+
+export const GetRecentCommentsResponseSchema = z.object({
+  totalCount: z.number(),
+  nextCursor: z.number(),
+  list: z.array(CommentSchema),
+});
+
+export type WriterType = z.infer<typeof WriterSchema>;
+export type CommentType = z.infer<typeof CommentSchema>;
+export type GetRecentCommentsResponseType = z.infer<typeof GetRecentCommentsResponseSchema>;

src/types/CommentCardTypes.ts

@@ -1,3 +1,8 @@
+import { WriterType } from '@/schema/recentcomment';
+
 export interface CommentCardProps {
-  status: 'edit' | 'complete';
+  writer: WriterType;
+  content: string;
+  createdAt: Date;
+  status?: 'view' | 'edit';
 }