From 22c7893932cd0d6f1413584a95bcb862d0102711 Mon Sep 17 00:00:00 2001 From: Suhyeon Jeon Date: Mon, 3 Mar 2025 01:31:52 +0900 Subject: [PATCH 1/3] fix: qa --- src/api/useGetStoreTrend.ts | 2 +- .../list/_components/HomeSearchFoodList.tsx | 2 +- src/app/orders/_components/Order.tsx | 2 +- src/app/orders/_components/OrderItem.tsx | 28 ++++---- .../detail/[id]/_components/OrderList.tsx | 19 +++--- .../pay/_components/OrderPayBottomSheet.tsx | 8 ++- .../search/_components/RealTimeSearches.tsx | 28 ++++++-- src/app/search/_components/RecentSearches.tsx | 5 +- src/app/search/_components/Search.tsx | 4 +- .../result/_components/SearchResult.tsx | 12 +++- .../[id]/_components/MenuBottomSheet.tsx | 2 +- .../detail/[id]/_components/MenuCategory.tsx | 2 +- .../detail/[id]/_components/MenuOption.tsx | 6 +- .../detail/[id]/_components/StoreDetail.tsx | 6 +- .../[id]/_components/StoreDetailMenuItem.tsx | 4 +- .../[id]/_components/StoreDetailTemp.tsx | 61 ------------------ .../detail/[id]/_components/StoreHeader.tsx | 7 +- .../[id]/_components/StoreOrderDetail.tsx | 64 +++++++++---------- src/components/Badge.tsx | 2 +- src/components/BottomSheet.tsx | 4 +- src/components/Chip.tsx | 4 +- src/components/CommonLayout.tsx | 24 ++++++- src/components/Navigation.tsx | 14 ++-- src/components/button.tsx | 2 +- .../shared/CategoryListInBottomSheet.tsx | 2 +- src/components/shared/FoodOrderFilter.tsx | 4 +- .../shared/FoodOrderListInBottomSheet.tsx | 2 +- src/components/shared/LoginModal.tsx | 8 ++- src/components/shared/StoreListItem.tsx | 14 ++-- src/hooks/useBottomSheet.ts | 5 +- src/store/geoLocation.ts | 13 +--- src/utils/format.ts | 1 + 32 files changed, 178 insertions(+), 183 deletions(-) delete mode 100644 src/app/store/detail/[id]/_components/StoreDetailTemp.tsx create mode 100644 src/utils/format.ts diff --git a/src/api/useGetStoreTrend.ts b/src/api/useGetStoreTrend.ts index fd629a98..e497cd53 100644 --- a/src/api/useGetStoreTrend.ts +++ b/src/api/useGetStoreTrend.ts @@ -9,7 +9,7 @@ const useGetStoreTrend = () => { const res = await api.get<{ trendKeywords: RealTimeSearch[] }>('stores/trend') return res.trendKeywords }, - refetchInterval: 10000, + refetchInterval: 8000, }) return { realTimeSearches } diff --git a/src/app/home/list/_components/HomeSearchFoodList.tsx b/src/app/home/list/_components/HomeSearchFoodList.tsx index 9fcf5e8f..c37b791d 100644 --- a/src/app/home/list/_components/HomeSearchFoodList.tsx +++ b/src/app/home/list/_components/HomeSearchFoodList.tsx @@ -71,7 +71,7 @@ const HomeSearchFoodList = ({ return (
-

+

개발의 민족 등록 맛집

diff --git a/src/app/orders/_components/Order.tsx b/src/app/orders/_components/Order.tsx index 351f001c..c7057ba8 100644 --- a/src/app/orders/_components/Order.tsx +++ b/src/app/orders/_components/Order.tsx @@ -100,7 +100,7 @@ const Order = () => {
) : ( <> -
+
diff --git a/src/app/orders/_components/OrderItem.tsx b/src/app/orders/_components/OrderItem.tsx index ed2fa5eb..eb5c329a 100644 --- a/src/app/orders/_components/OrderItem.tsx +++ b/src/app/orders/_components/OrderItem.tsx @@ -3,7 +3,6 @@ import { Button } from '@/components/button' import { Skeleton } from '@/components/shadcn/skeleton' import { ROUTE_PATHS } from '@/utils/routes' import Image from 'next/image' -import Link from 'next/link' import { useRouter } from 'next/navigation' import { OrdersList } from './Order' @@ -16,12 +15,12 @@ const OrderItem = ({ }) => { const router = useRouter() - const handleNavigate = () => { + const handleNavigate = (path: string) => { if (onBeforeNavigate) { onBeforeNavigate() } - router.push(`${ROUTE_PATHS.ORDERS_DETAIL}/${order.orderId}`) + router.push(path) } const variant = { @@ -48,7 +47,7 @@ const OrderItem = ({ ) : ( )} -
+
{order.status.code === 'S5' ? '배달완료' : order.status.desc} @@ -57,24 +56,25 @@ const OrderItem = ({ {new Date(order.orderTime).toLocaleString()}
-
-
{order.storeName}
-
{order.orderSummary}
+
+
{order.storeName}
+
{order.orderSummary}
-
+
-
{order.status.code === 'S5' && ( - - - + )}
diff --git a/src/app/orders/detail/[id]/_components/OrderList.tsx b/src/app/orders/detail/[id]/_components/OrderList.tsx index 05c5a829..d1054421 100644 --- a/src/app/orders/detail/[id]/_components/OrderList.tsx +++ b/src/app/orders/detail/[id]/_components/OrderList.tsx @@ -2,6 +2,7 @@ import { OrdersDetail } from '@/api/useGetOrdersDetail' import Chip from '@/components/Chip' import Confirm from '@/components/Confirm' import Separator from '@/components/Separator' +import { formatPhoneNumber } from '@/lib/format' import { modalStore } from '@/store/modal' import { v4 as uuidv4 } from 'uuid' @@ -30,14 +31,14 @@ const OrderList = ({ ordersData, patchOrderCancel }: OrderListProps) => { return (
-
{ordersData.storeName}
+
{ordersData.storeName}
{(ordersData.status.code === 'S1' || ordersData.status.code === 'S2') && ( )}
-
+
주문정보
-
+
주문번호
{ordersData.orderId}
@@ -51,7 +52,7 @@ const OrderList = ({ ordersData, patchOrderCancel }: OrderListProps) => {
-
+
주문내역
{ordersData.orderMenus.map((menu) => (
@@ -75,7 +76,7 @@ const OrderList = ({ ordersData, patchOrderCancel }: OrderListProps) => { -
+
상품금액
{`${ordersData.orderPrice.toLocaleString()}원`}
@@ -84,7 +85,7 @@ const OrderList = ({ ordersData, patchOrderCancel }: OrderListProps) => { -
+
배달요금
{`${ordersData.deliveryPrice.toLocaleString()}원`}
@@ -93,7 +94,7 @@ const OrderList = ({ ordersData, patchOrderCancel }: OrderListProps) => { -
+
총 결제 금액
{`${ordersData.paymentPrice.toLocaleString()}원`}
@@ -107,10 +108,10 @@ const OrderList = ({ ordersData, patchOrderCancel }: OrderListProps) => {
주문자 정보
-
+
연락처
-
{ordersData.tel}
+
{formatPhoneNumber(ordersData.tel)}
주소
diff --git a/src/app/pay/_components/OrderPayBottomSheet.tsx b/src/app/pay/_components/OrderPayBottomSheet.tsx index 41df7265..ee14ef51 100644 --- a/src/app/pay/_components/OrderPayBottomSheet.tsx +++ b/src/app/pay/_components/OrderPayBottomSheet.tsx @@ -22,7 +22,7 @@ const OrderPayBottomSheet = ({ onSelectPaymentType(type) } return ( -
+
- +
@@ -44,7 +44,9 @@ const OrderPayBottomSheet = ({

• 실제로 결제가 이루어지지 않는 테스트 페이지입니다.

-

• Pay200로 결제 시 할인 혜택을 받을 수 있습니다.

+

+ • PAY200으로 결제 시 할인 혜택을 받을 수 있습니다. +

diff --git a/src/app/search/_components/RealTimeSearches.tsx b/src/app/search/_components/RealTimeSearches.tsx index 79906c03..caa51a01 100644 --- a/src/app/search/_components/RealTimeSearches.tsx +++ b/src/app/search/_components/RealTimeSearches.tsx @@ -1,10 +1,15 @@ 'use client' import useGetStoreTrend from '@/api/useGetStoreTrend' +import usePostSearch from '@/api/usePostSearch' import Icon from '@/components/Icon' +import { useLocalStorage } from '@/hooks/useLocalStorage' import { RealTimeSearch } from '@/models/realTimeSearches' +import { useFoodSearchFilterStore } from '@/store/homeSearchFilter' import { COLORS } from '@/styles/color' +import { ROUTE_PATHS } from '@/utils/routes' import { AnimatePresence, motion } from 'motion/react' +import { useRouter } from 'next/navigation' import { useEffect, useState } from 'react' // Swiper 스타일 import @@ -30,17 +35,32 @@ const RealTimeSearchItem = ({ order: number realTimeSearch: RealTimeSearch }) => { + const { setValue, storedValue } = useLocalStorage('recentSearches', []) + const { setKeyword } = useFoodSearchFilterStore() + const { mutate: postSearch } = usePostSearch() + const router = useRouter() + // 현재 표시할 검색어만 상태로 관리 const [currentSearch, setCurrentSearch] = useState(realTimeSearch) const [timestamp, setTimestamp] = useState(Date.now()) + const handleSearch = (word: string) => { + postSearch(word) + setKeyword(word) + setValue([word, ...(storedValue || [])]) + router.push(ROUTE_PATHS.SEARCH_RESULT) + } + useEffect(() => { setCurrentSearch(realTimeSearch) setTimestamp(Date.now()) }, [realTimeSearch]) return ( -
+
handleSearch(currentSearch.keyword)} + > {order}
@@ -104,7 +124,7 @@ const RealTimeSearches = () => { return newArray }) - await new Promise((resolve) => setTimeout(resolve, 1500)) + await new Promise((resolve) => setTimeout(resolve, 1000)) } setIsUpdating(false) } @@ -133,9 +153,9 @@ const RealTimeSearches = () => { if (!realTimeSearches || realTimeSearches.length === 0) return null return ( -
+
- 실시간 급상승 검색어 + 실시간 급상승 검색어 내 주소 지역, {currentTime} 기준
diff --git a/src/app/search/_components/RecentSearches.tsx b/src/app/search/_components/RecentSearches.tsx index 80729a9c..470801ad 100644 --- a/src/app/search/_components/RecentSearches.tsx +++ b/src/app/search/_components/RecentSearches.tsx @@ -34,8 +34,8 @@ const RecentSearches = () => { return (
- 최근 검색어 - + 최근 검색어 + 전체삭제
@@ -44,6 +44,7 @@ const RecentSearches = () => { {recentSearches.length > 0 ? ( recentSearches.map((item, index) => ( { } return ( -
+
{suggestionWord && suggestion.length > 0 && (
    {suggestion.map((item) => ( -
  • handleSearch(item)}> +
  • handleSearch(item)}> {item.split(new RegExp(`(${suggestionWord})`, 'gi')).map((part, index) => part.toLowerCase() === suggestionWord?.toLowerCase() ? ( diff --git a/src/app/search/result/_components/SearchResult.tsx b/src/app/search/result/_components/SearchResult.tsx index ec3c6d06..fd79da9d 100644 --- a/src/app/search/result/_components/SearchResult.tsx +++ b/src/app/search/result/_components/SearchResult.tsx @@ -10,7 +10,9 @@ import { useGeoLocationStore } from '@/store/geoLocation' import { useFoodSearchFilterStore } from '@/store/homeSearchFilter' import suggestionStore from '@/store/suggestion' import memberStore from '@/store/user' -import { useRef } from 'react' +import { ROUTE_PATHS } from '@/utils/routes' +import { useRouter } from 'next/navigation' +import { useEffect, useRef } from 'react' import SearchFoodList from './SearchFoodList' const SearchResult = () => { @@ -30,8 +32,10 @@ const SearchResult = () => { ...(member ? { location: { lat: member.address.latitude, lng: member.address.longitude } } : location && { location: { lat: location.latitude, lng: location.longitude } }), + enabled: !!keyword, }) const { mutate: postSearch } = usePostSearch() + const router = useRouter() const handleRefresh = async (): Promise => { await refetch() @@ -43,6 +47,12 @@ const SearchResult = () => { refetch() } + useEffect(() => { + if (!keyword) { + router.push(ROUTE_PATHS.SEARCH) + } + }, [keyword]) + return (
    diff --git a/src/app/store/detail/[id]/_components/MenuBottomSheet.tsx b/src/app/store/detail/[id]/_components/MenuBottomSheet.tsx index 2eeb541d..9727ac7a 100644 --- a/src/app/store/detail/[id]/_components/MenuBottomSheet.tsx +++ b/src/app/store/detail/[id]/_components/MenuBottomSheet.tsx @@ -19,7 +19,7 @@ const MenuBottomSheet = ({ const { hide } = useBottomSheet() return ( -
    +
    {menuList.map((menu, index) => ( - {option.name} + {option.name} {option.price > 0 && ( - + +{option.price.toLocaleString()}원 )} diff --git a/src/app/store/detail/[id]/_components/StoreDetail.tsx b/src/app/store/detail/[id]/_components/StoreDetail.tsx index 834f9b28..94d7b051 100644 --- a/src/app/store/detail/[id]/_components/StoreDetail.tsx +++ b/src/app/store/detail/[id]/_components/StoreDetail.tsx @@ -289,7 +289,7 @@ const StoreDetail = ({ storeId }: { storeId: string }) => {
    {/* 메뉴 카테고리 */} -
    +
    { data-category={category.categoryId} >

    { if (index === 0) { topRef.current = el @@ -355,7 +355,7 @@ const StoreDetail = ({ storeId }: { storeId: string }) => { {/* 경고 문구 */}

    -

    +

    메뉴 이미지는 이미지컷이며 실제 배달되는 음식과 다를 수 있습니다.

    diff --git a/src/app/store/detail/[id]/_components/StoreDetailMenuItem.tsx b/src/app/store/detail/[id]/_components/StoreDetailMenuItem.tsx index 41cc959a..efa0fafd 100644 --- a/src/app/store/detail/[id]/_components/StoreDetailMenuItem.tsx +++ b/src/app/store/detail/[id]/_components/StoreDetailMenuItem.tsx @@ -59,7 +59,7 @@ const StoreDetailMenuItem = ({ ) : null} -
    +

    @@ -67,7 +67,7 @@ const StoreDetailMenuItem = ({

    diff --git a/src/app/store/detail/[id]/_components/StoreDetailTemp.tsx b/src/app/store/detail/[id]/_components/StoreDetailTemp.tsx deleted file mode 100644 index 7f8e3294..00000000 --- a/src/app/store/detail/[id]/_components/StoreDetailTemp.tsx +++ /dev/null @@ -1,61 +0,0 @@ -'use client' - -import useGetCarts from '@/api/useGetCarts' -import useGetStoreDetail from '@/api/useGetStoreDetail' -import useGetStoreMenuCategory from '@/api/useGetStoreMenuCategory' -import useBottomSheet from '@/hooks/useBottomSheet' -import { useToast } from '@/hooks/useToast' -import { modalStore } from '@/store/modal' -import { useMemo, useRef, useState } from 'react' - -const MAX_PULL_HEIGHT = 160 -const BLUE_BOX_MAX_PULL = 300 -const STICKY_HEADER_HEIGHT = 50 // 메뉴 카테고리 헤더의 높이 -export const HEADER_HEIGHT = 50 - -const StoreDetailTemp = () => { - const storeId = '892003660' - const [pullHeight, setPullHeight] = useState(0) - const [touchStart, setTouchStart] = useState(0) - const [isHeaderOpaque, setIsHeaderOpaque] = useState(false) - const [activeCategoryIndex, setActiveCategoryIndex] = useState(0) - - const containerRef = useRef(null) - const menuContainerRef = useRef(null) - const menuRefs = useRef<(HTMLDivElement | null)[]>([]) - - const { storeDetail, resetStoreDetail, isSuccess, isError } = useGetStoreDetail(storeId) - const { storeMenuCategory } = useGetStoreMenuCategory(storeId) - const { carts } = useGetCarts() - const { showModal } = modalStore() - - const isCartEmpty = useMemo(() => { - return carts?.orderMenus.length === 0 - }, [carts]) - const isSameStoreForCart = useMemo(() => { - return carts ? carts.storeId === storeId : false - }, [carts, storeId]) - - // const { orderDetail } = orderDetailStore() - const { BottomSheet } = useBottomSheet() - const { toast } = useToast() - // const { topRef, scrollToTop, showScrollButton } = useScrollToTop({ - // callBack: () => { - // containerRef.current?.scrollTo({ - // top: (topRef.current?.offsetTop || 0) + STICKY_HEADER_HEIGHT + HEADER_HEIGHT, - // behavior: 'smooth', - // }) - // }, - // dependencies: [storeMenuCategory], - // }) - - // const router = useRouter() - - return ( -

    -
    StoreDetailTemp
    -
    - ) -} - -export default StoreDetailTemp diff --git a/src/app/store/detail/[id]/_components/StoreHeader.tsx b/src/app/store/detail/[id]/_components/StoreHeader.tsx index 31e5e802..30d8b662 100644 --- a/src/app/store/detail/[id]/_components/StoreHeader.tsx +++ b/src/app/store/detail/[id]/_components/StoreHeader.tsx @@ -176,7 +176,12 @@ const StoreHeader = ({ )}
    -
    +
    - -
    + <> +

    + {storeMenuOptions.desc} +

    + {hasMoreContent && !isExpanded && ( +
    + + +
    + )} + )}
    {/*
    @@ -365,8 +363,8 @@ const StoreOrderDetail = ({ minimumOrderAmount }: { minimumOrderAmount: number }
    - 총 주문금액 - {price.toLocaleString()}원 + 총 주문금액 + {price.toLocaleString()}원
    diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx index dc4b2624..894c5082 100644 --- a/src/components/Badge.tsx +++ b/src/components/Badge.tsx @@ -4,7 +4,7 @@ import * as React from 'react' import { cn } from '@/lib/utils' export const badgeVariants = cva( - 'inline-flex items-center border px-[4px] py-[3px] text-[11px] leading-[11px] size-fit rounded-sm [-webkit-tap-highlight-color:transparent] [-webkit-text-decoration:none]', + 'inline-flex items-center border px-[4px] py-[3px] text-[12px] leading-[12px] size-fit rounded-sm [-webkit-tap-highlight-color:transparent] [-webkit-text-decoration:none]', { variants: { variant: { diff --git a/src/components/BottomSheet.tsx b/src/components/BottomSheet.tsx index c975b22f..303b74b4 100644 --- a/src/components/BottomSheet.tsx +++ b/src/components/BottomSheet.tsx @@ -14,14 +14,14 @@ const BottomSheet = () => { return ( - +
    {bottomSheet.title} -
    +
    바텀 시트 컨텐츠입니다 diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx index ff665ea0..5d84cf43 100644 --- a/src/components/Chip.tsx +++ b/src/components/Chip.tsx @@ -13,13 +13,13 @@ const Chip = ({ text, className, rightIcon, onClick, ...props }: ChipProps) => { return ( - {text} + {text} {rightIcon && {rightIcon}} ) diff --git a/src/components/CommonLayout.tsx b/src/components/CommonLayout.tsx index 18b4e3d1..2e8c6935 100644 --- a/src/components/CommonLayout.tsx +++ b/src/components/CommonLayout.tsx @@ -1,5 +1,6 @@ 'use client' +import useGetGeolocationToAddress from '@/api/useGetGeolocationToAddress' import useGetMember from '@/api/useGetMember' import usePostLogout from '@/api/usePostLogout' import { getNavigationProps } from '@/constants/navigationProps' @@ -20,6 +21,7 @@ interface CommonLayoutProps { const CommonLayout = ({ children }: CommonLayoutProps) => { const [isMounted, setIsMounted] = useState(false) + const { mutate: getGeolocationToAddress } = useGetGeolocationToAddress() const pathname = usePathname() @@ -39,7 +41,7 @@ const CommonLayout = ({ children }: CommonLayoutProps) => { const { mutate: logout } = usePostLogout() const { setMember } = memberStore() - const { setCoordinates, setError, setIsLoading } = useGeoLocationStore() + const { setCoordinates, setError, setIsLoading, setAddress } = useGeoLocationStore() const { isGlobalLoading, setIsGlobalLoading } = globalLoaderStore() useEffect(() => { @@ -93,6 +95,26 @@ const CommonLayout = ({ children }: CommonLayoutProps) => { longitude: position.coords.longitude, } + getGeolocationToAddress( + { + latitude: position.coords.latitude.toString(), + longitude: position.coords.longitude.toString(), + }, + { + onSuccess: (data) => { + setAddress({ + roadAddress: data.documents[0].road_address + ? data.documents[0].road_address.address_name + : '', + jibunAddress: data.documents[0].address.address_name, + }) + }, + onError: () => { + setError('위치 정보를 가져오는데 실패했습니다.') + }, + } + ) + setCoordinates(coords) setIsLoading(false) setIsGlobalLoading(false) diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index 8e2ea179..1904ab01 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -2,7 +2,6 @@ import { cn } from '@/lib/utils' import { useGeoLocationStore } from '@/store/geoLocation' -import { modalStore } from '@/store/modal' import memberStore from '@/store/user' import { ROUTE_PATHS } from '@/utils/routes' import { useRouter } from 'next/navigation' @@ -30,7 +29,6 @@ const Navigation = ({ const router = useRouter() const { address } = useGeoLocationStore() const { member } = memberStore() - const { showModal } = modalStore() return (