배포

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 (

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 } }

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)
         }
       }}

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">

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 /> })}
       />

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>

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',
+  },
+]

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 })),
 }))