Merge pull request #36 from team-nabi/NABI-63

🎉 물건 검색 로직 구현
team-nabi · Nov 3, 2023 · 70e714a · 70e714a
2 parents e80f52a + a15ebac
commit 70e714a
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 99 deletions.
diff --git a/public/images/search.svg b/public/images/search.svg
diff --git a/src/app/(root)/(routes)/items/components/Item-list/ItemList.tsx b/src/app/(root)/(routes)/items/components/Item-list/ItemList.tsx
@@ -1,63 +1,48 @@
+'use client'
+
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
 import Image from 'next/image'
 import TradeStateCard from '@/components/domain/card/trade-state-card'
 import Assets from '@/config/assets'
+import { GetItems, getItems } from '@/services/item/item'
 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 = () => {
+  const [params, setParams] = useState<GetItems>({
+    category: [],
+    priceRange: '',
+    name: '',
+    cursorId: 0,
+  })
+
+  const fetchItems = async () => {
+    const response = await getItems(params)
+    const data = await response.json()
+
+    return data
+  }
+
+  const { data } = useQuery({
+    queryKey: ['items', { ...params }],
+    queryFn: () => fetchItems(),
+  })
+
   return (
     <div>
       <div className="h-9 flex justify-between items-center mb-6">
-        <SearchInput placeholder="찾으시는 물품을 입력해주세요." />
+        <SearchInput
+          params={params}
+          updateParams={(nextState) => setParams(nextState)}
+        />
         <div className="h-6 flex gap-2">
           <Image src={Assets.filterIcon} alt="필터 아이콘" />{' '}
           <div className="flex">필터</div>
         </div>
       </div>
       <div>
-        {list.map((item: Item) => (
+        {data?.map((item: Item) => (
           <TradeStateCard key={item._id} item={item} className="mb-6" />
         ))}
       </div>

diff --git a/src/app/(root)/(routes)/items/components/search-input/SearchInput.tsx b/src/app/(root)/(routes)/items/components/search-input/SearchInput.tsx
@@ -1,24 +1,40 @@
-import React from 'react'
+import React, { ChangeEventHandler } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+import Image from 'next/image'
 import Input from '@/components/ui/Input'
-import { InputProps } from '@/components/ui/Input/Input'
+import Assets from '@/config/assets'
+import { GetItems } from '@/services/item/item'
+
+const SearchInput = ({
+  params,
+  updateParams,
+}: {
+  params: GetItems
+  updateParams: (nextState: GetItems) => void
+}) => {
+  const queryClient = useQueryClient()
+  const handleFetchData = () => {
+    queryClient.invalidateQueries({ queryKey: ['items', { ...params }] })
+  }
+
+  const handleChangeParams: ChangeEventHandler<HTMLInputElement> = (e) => {
+    const { name, value } = e.target
+    updateParams({ ...params, [name]: value })
+  }
 
-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>
+      <Input
+        onChange={handleChangeParams}
+        value={params.cursorId}
+        name="cursorId"
+        placeholder="찾으시는 물건을 입력해주세요."
+      />
+      <div
+        className="absolute right-3 top-2.5 hover:cursor-pointer"
+        onClick={handleFetchData}
+      >
+        <Image src={Assets.search} alt="검색 아이콘" />
       </div>
     </div>
   )

diff --git a/src/components/domain/card/trade-state-card/TradeStateCard.tsx b/src/components/domain/card/trade-state-card/TradeStateCard.tsx
@@ -23,15 +23,15 @@ type TradeStateMap = {
 }
 
 const TradeStateCard = ({
-  item: { image, cardTitle, tradeState, itemName, priceRange, createdAt },
+  item: { image, cardTitle, status, itemName, priceRange, createdAt },
   className,
 }: TradeStateCardProps) => {
   const tradeStateMap: TradeStateMap = {
-    possible: {
+    EXCHANGEABLE: {
       style: 'primary',
       text: '거래가능',
     },
-    impossible: {
+    RESERVED: {
       style: 'secondary',
       text: '예약중',
     },
@@ -58,8 +58,8 @@ const TradeStateCard = ({
         <CardFlex direction={'col'} justify={'between'} className="h-full">
           <CardFlex align={'center'} gap={'space'}>
             <CardText type={'title'}>{cardTitle}</CardText>
-            <Badge variant={tradeStateMap[tradeState].style}>
-              {tradeStateMap[tradeState].text}
+            <Badge variant={tradeStateMap[status].style}>
+              {tradeStateMap[status].text}
             </Badge>
           </CardFlex>
           <CardText type={'description'}>{itemName}</CardText>

diff --git a/src/components/ui/Card/Card.stories.tsx b/src/components/ui/Card/Card.stories.tsx
@@ -99,7 +99,7 @@ export const Trade: Story = {
           priceRange: '10000-50000',
           image:
             'https://cdn.cetizen.com/CDN/market/market_large_crop/202203/20220318/220318152808_1_2913635.jpg',
-          tradeState: 'impossible',
+          status: 'impossible',
         }}
         className={''}
       />

diff --git a/src/config/assets.ts b/src/config/assets.ts
@@ -5,9 +5,11 @@ import GoogleIcon from '/public/images/google.png'
 import KakaoIcon from '/public/images/kakao.png'
 import Logo from '/public/images/logo.svg'
 import MenuIcon from '/public/images/menu-icon.svg'
+import Search from '/public/images/search.svg'
 import XIcon from '/public/images/x-icon.svg'
 
 const Assets = {
+  search: Search,
   menuIcon: MenuIcon,
   arrowLeftIcon: ArrowLeftIcon,
   filterIcon: FilterIcon,