From 8f46c454f4839784bb502c92312a324f52ebf17b Mon Sep 17 00:00:00 2001
From: Suhyeon Jeon <suhyeon.jeon@fig.xyz>
Date: Wed, 5 Mar 2025 22:58:02 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20store=20=EC=A0=95=EB=A0=AC=20=EC=A1=B0?=
 =?UTF-8?q?=EA=B1=B4=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/home/_components/CategoryDrawer.tsx   |  3 +--
 src/app/home/list/_components/HomeList.tsx    |  6 +++---
 src/app/search/_components/SearchInput.tsx    |  3 +++
 .../result/_components/SearchResult.tsx       |  8 ++++----
 src/components/shared/FoodOrderFilter.tsx     |  3 ++-
 .../shared/FoodOrderListInBottomSheet.tsx     | 20 ++++++++++++-------
 src/constants/orderType.ts                    | 18 +++++++++++++++++
 src/models/orderType.ts                       |  7 -------
 src/store/homeSearchFilter.ts                 |  9 ++++-----
 9 files changed, 48 insertions(+), 29 deletions(-)
 create mode 100644 src/constants/orderType.ts
 delete mode 100644 src/models/orderType.ts

diff --git a/src/app/home/_components/CategoryDrawer.tsx b/src/app/home/_components/CategoryDrawer.tsx
index c35de8a2..a75949ba 100644
--- a/src/app/home/_components/CategoryDrawer.tsx
+++ b/src/app/home/_components/CategoryDrawer.tsx
@@ -5,7 +5,6 @@ import CategoryItem from '@/components/shared/CategoryItem'
 import CATEGORY_LIST from '@/constants/category'
 import { cn } from '@/lib/utils'
 import { Category } from '@/models/category'
-import { OrderType } from '@/models/orderType'
 import { useFoodSearchFilterStore } from '@/store/homeSearchFilter'
 import { ROUTE_PATHS } from '@/utils/routes'
 import { useRouter } from 'next/navigation'
@@ -45,7 +44,7 @@ const CategoryDrawer = () => {
 
   useEffect(() => {
     setCategory('')
-    setOrder(OrderType.RANKING)
+    setOrder(0)
   }, [])
 
   return (
diff --git a/src/app/home/list/_components/HomeList.tsx b/src/app/home/list/_components/HomeList.tsx
index 76a34fcf..cec117b7 100644
--- a/src/app/home/list/_components/HomeList.tsx
+++ b/src/app/home/list/_components/HomeList.tsx
@@ -2,8 +2,8 @@
 
 import CartButton from '@/components/CartButton'
 import PullToRefresh from '@/components/PullToRefresh'
+import { ORDER_TYPE } from '@/constants/orderType'
 import { useInfiniteScroll } from '@/hooks/useInfiniteScroll'
-import { OrderType } from '@/models/orderType'
 import { Store } from '@/models/store'
 import { useGeoLocationStore } from '@/store/geoLocation'
 import { useFoodSearchFilterStore } from '@/store/homeSearchFilter'
@@ -19,11 +19,11 @@ const HomeList = () => {
   const { member } = memberStore()
   const { data, isFetching, targetRef, refetch, hasNextPage } = useInfiniteScroll<
     Store,
-    { category: string; order: OrderType }
+    { category: string; orderType: string }
   >({
     queryKey: 'stores',
     endpoint: 'stores/list-cursor',
-    filter: { category, order },
+    filter: { category, orderType: ORDER_TYPE[order].value },
     size: 10,
     ...(member
       ? { location: { lat: member.address.latitude, lng: member.address.longitude } }
diff --git a/src/app/search/_components/SearchInput.tsx b/src/app/search/_components/SearchInput.tsx
index efe26858..cba760d7 100644
--- a/src/app/search/_components/SearchInput.tsx
+++ b/src/app/search/_components/SearchInput.tsx
@@ -62,6 +62,7 @@ const SearchInput = () => {
       placeholder="무엇을 배달, 포장할까요?"
       inputSize="sm"
       value={word}
+      onClick={() => setIsFocus(true)}
       onFocus={() => setIsFocus(true)}
       onBlur={() => {
         setTimeout(() => {
@@ -74,6 +75,8 @@ const SearchInput = () => {
         if (e.key === 'Enter') {
           setKeyword(word)
           setValue([word, ...(storedValue || [])])
+          resetStoreSuggestion()
+          setIsFocus(false)
           router.push(ROUTE_PATHS.SEARCH_RESULT)
         }
       }}
diff --git a/src/app/search/result/_components/SearchResult.tsx b/src/app/search/result/_components/SearchResult.tsx
index fd79da9d..d7004aae 100644
--- a/src/app/search/result/_components/SearchResult.tsx
+++ b/src/app/search/result/_components/SearchResult.tsx
@@ -3,8 +3,8 @@
 import usePostSearch from '@/api/usePostSearch'
 import PullToRefresh from '@/components/PullToRefresh'
 import FoodOrderFilter from '@/components/shared/FoodOrderFilter'
+import { ORDER_TYPE } from '@/constants/orderType'
 import { useInfiniteScroll } from '@/hooks/useInfiniteScroll'
-import { OrderType } from '@/models/orderType'
 import { Store } from '@/models/store'
 import { useGeoLocationStore } from '@/store/geoLocation'
 import { useFoodSearchFilterStore } from '@/store/homeSearchFilter'
@@ -23,11 +23,11 @@ const SearchResult = () => {
   const { member } = memberStore()
   const { data, isFetching, targetRef, refetch } = useInfiniteScroll<
     Store,
-    { keyword: string | undefined; order: OrderType }
+    { keyword: string | undefined; orderType: string }
   >({
     queryKey: 'stores',
     endpoint: 'stores/list-cursor',
-    filter: { keyword, order },
+    filter: { keyword, orderType: ORDER_TYPE[order].value },
     size: 10,
     ...(member
       ? { location: { lat: member.address.latitude, lng: member.address.longitude } }
@@ -60,7 +60,7 @@ const SearchResult = () => {
           <div className="absolute left-0 top-0 z-20 h-[calc(100dvh-40px-0.75rem)] w-full overflow-y-auto bg-white px-mobile_safe py-4">
             <ul className="">
               {suggestion.map((item) => (
-                <li key={item} className="pb-4" onClick={() => handleSearch(item)}>
+                <li key={item} className="pb-3 text-lg" onClick={() => handleSearch(item)}>
                   {item.split(new RegExp(`(${suggestionWord})`, 'gi')).map((part, index) =>
                     part.toLowerCase() === suggestionWord?.toLowerCase() ? (
                       <span key={index} className="font-bold">
diff --git a/src/components/shared/FoodOrderFilter.tsx b/src/components/shared/FoodOrderFilter.tsx
index 8be12db4..4390b803 100644
--- a/src/components/shared/FoodOrderFilter.tsx
+++ b/src/components/shared/FoodOrderFilter.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { ORDER_TYPE } from '@/constants/orderType'
 import useBottomSheet from '@/hooks/useBottomSheet'
 import { useFoodSearchFilterStore } from '@/store/homeSearchFilter'
 import { COLORS } from '@/styles/color'
@@ -14,7 +15,7 @@ const FoodOrderFilter = () => {
   return (
     <div className="sticky top-0 z-10 bg-white pb-3">
       <Chip
-        text={order}
+        text={ORDER_TYPE[order].name}
         rightIcon={<Icon name="ChevronDown" size={16} strokeWidth={3} color={COLORS.gray400} />}
         onClick={() => BottomSheet({ title: '정렬', content: <FoodOrderListInBottomSheet /> })}
       />
diff --git a/src/components/shared/FoodOrderListInBottomSheet.tsx b/src/components/shared/FoodOrderListInBottomSheet.tsx
index fd4fa06f..eeb7055e 100644
--- a/src/components/shared/FoodOrderListInBottomSheet.tsx
+++ b/src/components/shared/FoodOrderListInBottomSheet.tsx
@@ -1,7 +1,7 @@
 'use client'
 
+import { ORDER_TYPE } from '@/constants/orderType'
 import useBottomSheet from '@/hooks/useBottomSheet'
-import { OrderType } from '@/models/orderType'
 import { useFoodSearchFilterStore } from '@/store/homeSearchFilter'
 import { COLORS } from '@/styles/color'
 import Icon from '../Icon'
@@ -10,19 +10,25 @@ const FoodOrderListInBottomSheet = () => {
   const { order, setOrder } = useFoodSearchFilterStore()
   const { hide } = useBottomSheet()
 
-  const handleOrder = (order: OrderType) => {
-    setOrder(order)
+  const handleOrder = (index: number) => {
+    setOrder(index)
     hide()
   }
 
   return (
     <div className="px-mobile_safe">
       <ul>
-        {Object.values(OrderType).map((item) => (
-          <li key={item} className="py-2 text-lg text-gray-600" onClick={() => handleOrder(item)}>
+        {ORDER_TYPE.map((item, index) => (
+          <li
+            key={item.name}
+            className="py-2 text-lg text-gray-600"
+            onClick={() => handleOrder(index)}
+          >
             <div className="flex items-center gap-4">
-              <span className={`${order === item ? 'font-semibold' : 'font-normal'}`}>{item}</span>
-              {order === item && (
+              <span className={`${order === index ? 'font-semibold' : 'font-normal'}`}>
+                {item.name}
+              </span>
+              {order === index && (
                 <Icon name="Check" size={18} strokeWidth={3} color={COLORS.gray600} />
               )}
             </div>
diff --git a/src/constants/orderType.ts b/src/constants/orderType.ts
new file mode 100644
index 00000000..abf4a497
--- /dev/null
+++ b/src/constants/orderType.ts
@@ -0,0 +1,18 @@
+export const ORDER_TYPE = [
+  {
+    name: '거리 가까운 순',
+    value: 'DISTANCE',
+  },
+  {
+    name: '리뷰 많은 순',
+    value: 'REVIEW',
+  },
+  {
+    name: '별점 높은 순',
+    value: 'RATING',
+  },
+  {
+    name: '주문 많은 순',
+    value: 'ORDER_COUNT',
+  },
+]
diff --git a/src/models/orderType.ts b/src/models/orderType.ts
deleted file mode 100644
index 68e03f2e..00000000
--- a/src/models/orderType.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export enum OrderType {
-  RANKING = '랭킹순',
-  REVIEW = '리뷰 많은 순',
-  DISTANCE = '거리 가까운 순',
-  STAR = '별점 높은 순',
-  ORDER = '주문 많은 순',
-}
diff --git a/src/store/homeSearchFilter.ts b/src/store/homeSearchFilter.ts
index 795d03d7..63856859 100644
--- a/src/store/homeSearchFilter.ts
+++ b/src/store/homeSearchFilter.ts
@@ -1,26 +1,25 @@
-import { OrderType } from '@/models/orderType'
 import { create } from 'zustand'
 
 interface FoodSearchFilterStore {
   category: string
   keyword?: string
-  order: OrderType
+  order: number
   setCategory: (category: string) => void
   setKeyword: (keyword: string | undefined) => void
-  setOrder: (order: OrderType) => void
+  setOrder: (order: number) => void
 }
 
 export const useFoodSearchFilterStore = create<FoodSearchFilterStore>((set) => ({
   category: '',
   keyword: undefined,
-  order: OrderType.RANKING,
+  order: 0,
   setCategory: (category: string) =>
     set((state) => {
       return { ...state, category, keyword: undefined }
     }),
   setKeyword: (keyword) =>
     set(() => {
-      return { keyword, categoryId: 1, order: OrderType.RANKING }
+      return { keyword, categoryId: 1, order: 0 }
     }),
   setOrder: (order) => set((state) => ({ ...state, order })),
 }))