🎉 ItemListPage 컴포넌트 UI 완성

next.config.js

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  images: {
+    domains: ['cdn.cetizen.com'],
+  },
+}
 
 module.exports = nextConfig

package.json

@@ -59,6 +59,7 @@
     "@types/react-dom": "^18",
     "@types/tailwindcss": "^3.1.0",
     "chromatic": "^7.5.4",
+    "encoding": "^0.1.13",
     "eslint": "^8",
     "eslint-config-next": "13.5.6",
     "eslint-plugin-storybook": "^0.6.15",

src/app/(root)/(routes)/items/components/Item-list/ItemList.tsx

@@ -0,0 +1,67 @@
+import Image from 'next/image'
+import TradeStateCard from '@/components/domain/card/trade-state-card'
+import Assets from '@/config/assets'
+import { Item } from '@/types'
+import SearchInput from '../search-input'
+
+const list = [
+  {
+    _id: 1, // 내려줄 때 리스트 순서
+    cardId: 1,
+    cardTitle: '아이폰 16 팝니다',
+    itemName: '아이폰 16',
+    createdAt: '2023-11-01T08:08:00',
+    modifiedAt: '2023-11-01T08:08:00',
+    dibCount: 19,
+    priceRange: '10000-50000',
+    image:
+      'https://cdn.cetizen.com/CDN/market/market_large_crop/202203/20220318/220318152808_1_2913635.jpg',
+    tradeState: 'impossible',
+  },
+  {
+    _id: 2, // 내려줄 때 리스트 순서
+    cardId: 1,
+    cardTitle: '아이폰 16 팝니다',
+    itemName: '아이폰 16',
+    createdAt: '2023-11-01T08:08:00',
+    modifiedAt: '2023-11-01T08:08:00',
+    dibCount: 19,
+    priceRange: '10000-50000',
+    image:
+      'https://cdn.cetizen.com/CDN/market/market_large_crop/202203/20220318/220318152808_1_2913635.jpg',
+    tradeState: 'impossible',
+  },
+  {
+    _id: 3, // 내려줄 때 리스트 순서
+    cardId: 1,
+    cardTitle: '아이폰 16 팝니다',
+    itemName: '아이폰 16',
+    createdAt: '2023-11-01T08:08:00',
+    modifiedAt: '2023-11-01T08:08:00',
+    dibCount: 19,
+    priceRange: '10000-50000',
+    image:
+      'https://cdn.cetizen.com/CDN/market/market_large_crop/202203/20220318/220318152808_1_2913635.jpg',
+    tradeState: 'impossible',
+  },
+]
+
+const ItemList = () => {
+  return (
+    <div>
+      <div className="h-9 flex justify-between items-center mb-6">
+        <SearchInput placeholder="찾으시는 물품을 입력해주세요." />
+        <div className="h-6 flex gap-2">
+          <Image src={Assets.filterIcon} alt="필터 아이콘" />{' '}
+          <div className="flex">필터</div>
+        </div>
+      </div>
+      <div>
+        {list.map((item: Item) => (
+          <TradeStateCard key={item._id} item={item} className="mb-6" />
+        ))}
+      </div>
+    </div>
+  )
+}
+export default ItemList

src/app/(root)/(routes)/items/components/Item-list/index.tsx

@@ -0,0 +1,3 @@
+import ItemList from './ItemList'
+
+export default ItemList

src/app/(root)/(routes)/items/components/search-input/SearchInput.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import Input from '@/components/ui/Input'
+import { InputProps } from '@/components/ui/Input/Input'
+
+const SearchInput = ({ ...props }: InputProps) => {
+  return (
+    <div className="relative w-4/5">
+      <Input {...props} />
+      <div className="absolute right-3 top-2.5 pointer-events-none">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-5 w-5 text-gray-400"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fillRule="evenodd"
+            d="M9 16a7 7 0 100-14 7 7 0 000 14zm0 1a8 8 0 100-16 8 8 0 000 16zm5.293-11.293a1 1 0 00-1.414-1.414l-4 4a1 1 0 001.414 1.414l4-4z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </div>
+    </div>
+  )
+}
+
+SearchInput.displayName = 'SearchInput'
+
+export default SearchInput

src/app/(root)/(routes)/items/components/search-input/index.tsx

@@ -0,0 +1,3 @@
+import SearchInput from './SearchInput'
+
+export default SearchInput

src/app/(root)/(routes)/items/page.tsx

@@ -0,0 +1,16 @@
+import { FunctionComponent } from 'react'
+import PageTitle from '@/components/domain/page-title'
+import ItemList from './components/Item-list'
+
+interface ItemListPageProps {}
+
+const ItemListPage: FunctionComponent<ItemListPageProps> = ({}) => {
+  return (
+    <div>
+      <PageTitle title="물건 목록" />
+      <ItemList />
+    </div>
+  )
+}
+
+export default ItemListPage

src/components/domain/card/trade-state-card/TradeStateCard.tsx

@@ -7,6 +7,7 @@ import { Item } from '@/types'
 
 type TradeStateCardProps = {
   item: Item
+  className: string
 }
 type TradeStateMap = {
   [key: string]: {
@@ -23,6 +24,7 @@ type TradeStateMap = {
 
 const TradeStateCard = ({
   item: { image, cardTitle, tradeState, itemName, priceRange, createdAt },
+  className,
 }: TradeStateCardProps) => {
   const tradeStateMap: TradeStateMap = {
     possible: {
@@ -36,7 +38,7 @@ const TradeStateCard = ({
   }
 
   return (
-    <Card size={'sm'}>
+    <Card size={'sm'} className={className}>
       <CardFlex
         direction={'row'}
         justify={'start'}

src/components/domain/page-title/PageTitle.tsx

@@ -0,0 +1,19 @@
+import Image from 'next/image'
+import Assets from '@/config/assets'
+
+const PageTitle = ({ title }: { title: string }) => {
+  return (
+    <div className="flex grid items-center justify-between w-full grid-cols-3 h-8 my-4">
+      <Image
+        src={Assets.arrowLeftIcon}
+        alt="이전 아이콘"
+        className="flex justify-start items-center"
+      />
+      <h2 className="flex justify-center items-center text-xl font-bold">
+        {title}
+      </h2>
+      <div></div>
+    </div>
+  )
+}
+export default PageTitle

src/components/domain/page-title/index.tsx

@@ -0,0 +1,3 @@
+import PageTitle from './PageTitle'
+
+export default PageTitle

src/components/ui/Card/Card.stories.tsx

@@ -89,7 +89,7 @@ export const Trade: Story = {
     return (
       <TradeStateCard
         item={{
-          _id: 1, // 내려줄 때 리스트 순서
+          _id: 1,
           cardId: 1,
           cardTitle: '아이폰 16 팝니다',
           itemName: '아이폰 16',
@@ -101,6 +101,7 @@ export const Trade: Story = {
             'https://cdn.cetizen.com/CDN/market/market_large_crop/202203/20220318/220318152808_1_2913635.jpg',
           tradeState: 'impossible',
         }}
+        className={''}
       />
     )
   },

src/config/apiEndPoint.ts

@@ -1,7 +1,10 @@
+import { GetItems } from '@/services/item/item'
+
 const ApiEndPoint = {
   kakaoLogin: () => '/oauth2/authorize/kakao/login',
   googleLogin: () => '/oauth2/authorize/google/login',
   test: () => '/test',
+  items: (cursorId: number) => `/items?cursorId=${cursorId}`,
 } as const
 
 export default ApiEndPoint

src/config/assets.ts

@@ -1,4 +1,6 @@
+import ArrowLeftIcon from '/public/images/arrow-left.svg'
 import AlarmIcon from '/public/images/bell.svg'
+import FilterIcon from '/public/images/filter.svg'
 import GoogleIcon from '/public/images/google.png'
 import KakaoIcon from '/public/images/kakao.png'
 import Logo from '/public/images/logo.svg'
@@ -7,6 +9,8 @@ import XIcon from '/public/images/x-icon.svg'
 
 const Assets = {
   menuIcon: MenuIcon,
+  arrowLeftIcon: ArrowLeftIcon,
+  filterIcon: FilterIcon,
   alarmIcon: AlarmIcon,
   googleIcon: GoogleIcon,
   kakaoIcon: KakaoIcon,