[김도균] Sprint12

next.config.ts

@@ -29,6 +29,10 @@ const nextConfig: NextConfig = {
         protocol: 'https',
         hostname: 'flexible.img.hani.co.kr',
       },
+      {
+        protocol: 'https',
+        hostname: 'image.hanatour.com',
+      },
     ],
   },
 };

src/app/(with-Header)/items/page.tsx

@@ -1,3 +1,9 @@
+import BestItemList from '@/components/Items/BestItemList';
+
 export default function Items() {
-  return <div className='mt-[90px]'>상품 페이지</div>;
+  return (
+    <div className='mt-[90px]'>
+      <BestItemList />
+    </div>
+  );
 }

src/components/Items/BestItemList.tsx

@@ -0,0 +1,34 @@
+import { ItemsResponse } from '@/types';
+import ItemCard from './ItemCard';
+
+const REVALIDATE_SEC = 60;
+const ITEM_CNT = 4;
+
+export default async function BestItemList() {
+  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/products?orderBy=favorite&pageSize=${ITEM_CNT}`, {
+    next: {
+      revalidate: REVALIDATE_SEC,
+    },
+  });
+
+  if (!response.ok) throw new Error('게시글 불러올 수 없음');
+  const data: ItemsResponse = await response.json();
+
+  return (
+    <>
+      <h2 className='max-w-[1176px] mx-auto text-2xl font-bold mb-2'>베스트 상품</h2>
+      <div className='flex items-center gap-4 justify-center '>
+        {data.list.map((item, index) => (
+          <ItemCard
+            key={item.id}
+            item={{ ...item, imageUrl: item.images[0] }}
+            className='w-[282px] object-cover h-[282px]'
+            display={`       
+            ${index === 2 ? 'hidden md:flex' : ''}    
+            ${index === 3 ? 'hidden lg:flex' : ''} `}
+          />
+        ))}
+      </div>
+    </>
+  );
+}

src/components/Items/ItemCard.tsx

@@ -0,0 +1,27 @@
+import convertLocale from '@/utils/convertLocale';
+import Image from 'next/image';
+
+interface ItmeCardProps {
+  item: {
+    imageUrl: string | null;
+    name: string;
+    price: number;
+    favoriteCount: number;
+  };
+  className?: string;
+  display?: string;
+}
+
+export default function ItemCard({ item, className, display }: ItmeCardProps) {
+  return (
+    <div className={`flex flex-col gap-4 ${display}`}>
+      <Image src={item.imageUrl ?? '/assets/images/Img_reply_empty.svg'} alt='상품 이미지' width={282} height={282} className={`rounded-2xl ${className}`} />
+      <h2>{item.name}</h2>
+      <p className='font-bold text-xl'>{convertLocale(item.price)}</p>
+      <div className='flex items-center gap-2'>
+        <Image src='/assets/icons/heart_empty.svg' alt='좋아요 아이콘' width={16} height={16} />
+        <p>{item.favoriteCount}</p>
+      </div>
+    </div>
+  );
+}

src/types.ts

@@ -107,3 +107,21 @@ export interface SignupFailResponse {
 }
 
 export type ResponseWithAccessToken<T> = T & { accessToken: string };
+
+export interface Item {
+  id: number;
+  name: string;
+  description: string;
+  price: number;
+  tags: string[];
+  images: string | null[];
+  ownerId: number;
+  favoriteCount: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ItemsResponse {
+  list: Item[];
+  totalCount: number;
+}

src/utils/convertLocale.ts

@@ -0,0 +1,3 @@
+export default function convertLocale(num: number) {
+  return `${num.toLocaleString()}원`;
+}