diff --git a/src/api/useGetAddress.ts b/src/api/useGetAddress.ts index 9b1e779..6230f04 100644 --- a/src/api/useGetAddress.ts +++ b/src/api/useGetAddress.ts @@ -2,7 +2,7 @@ import { api } from '@/lib/api' import memberStore from '@/store/user' import { useQuery, useQueryClient } from '@tanstack/react-query' -interface Address { +export interface Address { id: number isDefault: boolean roadAddress: string diff --git a/src/api/useGetStoreTrend.ts b/src/api/useGetStoreTrend.ts index fd629a9..e497cd5 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/api/usePostOrderPay.ts b/src/api/usePostOrderPay.ts index 6f2e5d1..adbfc10 100644 --- a/src/api/usePostOrderPay.ts +++ b/src/api/usePostOrderPay.ts @@ -11,6 +11,10 @@ export interface OrderPay { roadAddress: string // 주문시점의 도로명주소 jibunAddress: string // 주문시점의 지번주소 detailAddress: string // 주문시점의 상세주소 + coords: { + lat: number + lng: number + } excludingSpoonAndFork: boolean // 스푼과 포크 제외 여부 orderType: 'DELIVERY' | 'PACKING' // 주문타입 paymentType: OrderPayType // 결제타입 @@ -34,7 +38,12 @@ const usePostOrderPay = () => { return useMutation({ mutationKey: ['orderPay'], mutationFn: async (data: OrderPay) => { - return await api.post(`orders`, data) + return await api.post(`orders`, data, { + headers: { + 'X-User-Lat': data.coords.lat.toString() ?? '', + 'X-User-Lng': data.coords.lng.toString() ?? '', + }, + }) }, onSuccess: () => { qc.invalidateQueries({ queryKey: ['writable-reviews'] }) diff --git a/src/app/home/list/_components/HomeSearchFoodList.tsx b/src/app/home/list/_components/HomeSearchFoodList.tsx index 9fcf5e8..c37b791 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/mypage/address/_components/AddressOption.tsx b/src/app/mypage/address/_components/AddressOption.tsx index 1d5f359..9ff7299 100644 --- a/src/app/mypage/address/_components/AddressOption.tsx +++ b/src/app/mypage/address/_components/AddressOption.tsx @@ -172,7 +172,7 @@ const AddressOption = () => {
-
+
{address.defaultAddress.roadAddress || address.defaultAddress.jibunAddress} {', '} {address.defaultAddress.detailAddress} diff --git a/src/app/orders/_components/Order.tsx b/src/app/orders/_components/Order.tsx index 351f001..c7057ba 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 ed2fa5e..eb5c329 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 05c5a82..d105442 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/DeliveryAddressBottomSheet.tsx b/src/app/pay/_components/DeliveryAddressBottomSheet.tsx new file mode 100644 index 0000000..0f2c402 --- /dev/null +++ b/src/app/pay/_components/DeliveryAddressBottomSheet.tsx @@ -0,0 +1,192 @@ +'use client' + +import { Address, AddressResponseData } from '@/api/useGetAddress' +import Badge from '@/components/Badge' +import { Button } from '@/components/button' +import Icon from '@/components/Icon' +import Separator from '@/components/Separator' +import useBottomSheet from '@/hooks/useBottomSheet' +import { cn } from '@/lib/utils' +import { ROUTE_PATHS } from '@/utils/routes' +import { useRouter } from 'next/navigation' + +interface DeliveryAddressBottomSheetProps { + address: AddressResponseData + currentAddress: Pick< + Address, + 'roadAddress' | 'jibunAddress' | 'detailAddress' | 'latitude' | 'longitude' + > + onSelectAddress: ( + address: Pick< + Address, + 'roadAddress' | 'jibunAddress' | 'detailAddress' | 'latitude' | 'longitude' + > + ) => void +} + +const DeliveryAddressBottomSheet = ({ + address, + currentAddress, + onSelectAddress, +}: DeliveryAddressBottomSheetProps) => { + const router = useRouter() + const { hide } = useBottomSheet() + + const handleClickAddress = ( + address: Pick< + Address, + 'roadAddress' | 'jibunAddress' | 'detailAddress' | 'latitude' | 'longitude' + > + ) => { + onSelectAddress(address) + hide() + } + + return ( +
+
+ {address.defaultAddress && ( + <> +
+ +
+
+
+ {currentAddress.roadAddress || currentAddress.jibunAddress} + {', '} + {currentAddress.detailAddress} +
+ 현재 +
+ {address.defaultAddress.roadAddress && ( +
+ [지번] {currentAddress.jibunAddress} + {', '} + {currentAddress.detailAddress} +
+ )} +
+
+ + + )} + +
+
+ +
{ + if (!address.house) { + router.push(ROUTE_PATHS.ADDRESS) + return + } + + handleClickAddress({ + roadAddress: address.house?.roadAddress, + jibunAddress: address.house?.jibunAddress, + detailAddress: address.house?.detailAddress, + latitude: address.house?.latitude, + longitude: address.house?.longitude, + }) + }} + > +
+ {address.house ? '집' : '집 추가'} +
+ {address.house && ( +
+ {address.house?.roadAddress || address.house?.jibunAddress} + {', '} + {address.house?.detailAddress} +
+ )} +
+
+ + + +
+ +
{ + if (!address.company) { + router.push(ROUTE_PATHS.ADDRESS) + return + } + + handleClickAddress({ + roadAddress: address.company?.roadAddress, + jibunAddress: address.company?.jibunAddress, + detailAddress: address.company?.detailAddress, + latitude: address.company?.latitude, + longitude: address.company?.longitude, + }) + }} + > +
+ {address.company ? '회사' : '회사 추가'} +
+ {address.company && ( +
+ {address.company?.roadAddress || address.company?.jibunAddress} + {', '} + {address.company?.detailAddress} +
+ )} +
+
+
+ + + + {address.others?.map((other, index) => ( +
+
{ + handleClickAddress({ + roadAddress: other.roadAddress, + jibunAddress: other.jibunAddress, + detailAddress: other.detailAddress, + latitude: other.latitude, + longitude: other.longitude, + }) + }} + > + +
+
{other.alias || '별명 보내주세요'}
+
+ {other.roadAddress || other.jibunAddress} + {', '} + {other.detailAddress} +
+
+
+
+ ))} + {(address.others?.length || 0) > 0 && } +
+
+ +
+
+ ) +} + +export default DeliveryAddressBottomSheet diff --git a/src/app/pay/_components/OrderInfo.tsx b/src/app/pay/_components/OrderInfo.tsx index b21fee0..1fbf48e 100644 --- a/src/app/pay/_components/OrderInfo.tsx +++ b/src/app/pay/_components/OrderInfo.tsx @@ -1,6 +1,7 @@ 'use client' import useDeleteCart from '@/api/useDeleteCarts' +import useGetAddress, { Address } from '@/api/useGetAddress' import useGetCarts from '@/api/useGetCarts' import useGetStoreDetail from '@/api/useGetStoreDetail' import usePatchCarts from '@/api/usePatchCarts' @@ -15,6 +16,7 @@ import { Checkbox } from '@/components/shadcn/checkbox' import { Label } from '@/components/shadcn/label' import useBottomSheet from '@/hooks/useBottomSheet' import { useToast } from '@/hooks/useToast' +import { ApiErrorResponse } from '@/lib/api' import { cn } from '@/lib/utils' import { modalStore } from '@/store/modal' import memberStore from '@/store/user' @@ -23,25 +25,40 @@ import { pay200SDK } from '@pay200/sdk' import { ANONYMOUS, loadTossPayments } from '@tosspayments/tosspayments-sdk' import { useRouter } from 'next/navigation' import { useEffect, useMemo, useState } from 'react' +import DeliveryAddressBottomSheet from './DeliveryAddressBottomSheet' import OrderPayBottomSheet from './OrderPayBottomSheet' const OrderInfo = () => { const router = useRouter() + const { member } = memberStore() + const { showModal, hideModal } = modalStore() + const { carts, resetCarts } = useGetCarts() const { mutate: deleteCarts } = useDeleteCart() const { mutate: updateCarts } = usePatchCarts() const { storeDetail } = useGetStoreDetail(carts?.storeId || null) const { mutate: orderPay, data: orderResponse } = usePostOrderPay() + const { address } = useGetAddress() const [cartsState, setCartsState] = useState(carts) const [isExcludingSpoon, setIsExcludingSpoon] = useState(false) const [paymentType, setPaymentType] = useState(null) const [deliveryPrice] = useState(0) - - const { member } = memberStore() - const { showModal } = modalStore() - // const { payments, setPayments } = successPaymentStore() + const [deliveryAddress, setDeliveryAddress] = useState< + | Pick + | undefined + >( + member + ? { + roadAddress: member.address.roadAddress, + jibunAddress: member.address.jibunAddress, + detailAddress: member.address.detailAddress, + latitude: member.address.latitude, + longitude: member.address.longitude, + } + : undefined + ) const { BottomSheet, hide } = useBottomSheet() const { toast } = useToast() @@ -175,9 +192,13 @@ const OrderInfo = () => { const orderData: OrderPay = { storeId: cartsState.storeId, - roadAddress: member.address.roadAddress || '', - jibunAddress: member.address.jibunAddress || '', - detailAddress: member.address.detailAddress || '', + roadAddress: deliveryAddress?.roadAddress || '', + jibunAddress: deliveryAddress?.jibunAddress || '', + detailAddress: deliveryAddress?.detailAddress || '', + coords: { + lat: deliveryAddress?.latitude || 0, + lng: deliveryAddress?.longitude || 0, + }, excludingSpoonAndFork: isExcludingSpoon, orderType: 'DELIVERY', paymentType, @@ -193,7 +214,29 @@ const OrderInfo = () => { }), } - orderPay(orderData) + orderPay(orderData, { + onError: (error) => { + const errorMessage: ApiErrorResponse = error as unknown as ApiErrorResponse + + if (errorMessage.status === 412) { + showModal({ + content: ( + hideModal()} + /> + ), + }) + } else { + showModal({ + content: ( + hideModal()} /> + ), + }) + } + }, + }) } const totalMenuPrice = useMemo(() => { @@ -226,9 +269,17 @@ const OrderInfo = () => { } const handleSelectRiderRequest = () => { - toast({ - description: '준비중입니다.', - position: 'center', + if (!address || !deliveryAddress) return + + BottomSheet({ + title: '배달지 선택', + content: ( + + ), }) } @@ -352,14 +403,14 @@ const OrderInfo = () => {
- {`${member?.address.roadAddress} ${member?.address.detailAddress}`} + {`${deliveryAddress?.roadAddress} ${deliveryAddress?.detailAddress}`}
(으)로 배달
-
[지번] {member?.address.jibunAddress}
+
[지번] {deliveryAddress?.jibunAddress}
diff --git a/src/app/pay/_components/OrderPayBottomSheet.tsx b/src/app/pay/_components/OrderPayBottomSheet.tsx index 41df726..ee14ef5 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/pay/fail/_components/PayFail.tsx b/src/app/pay/fail/_components/PayFail.tsx index 5d138c9..6132a25 100644 --- a/src/app/pay/fail/_components/PayFail.tsx +++ b/src/app/pay/fail/_components/PayFail.tsx @@ -1,5 +1,6 @@ 'use client' +import { Button } from '@/components/button' import Icon from '@/components/Icon' import { ROUTE_PATHS } from '@/utils/routes' import { useRouter } from 'next/navigation' @@ -19,16 +20,21 @@ const PayFail = () => { useEffect(() => { if (timer <= 0) { - router.replace(ROUTE_PATHS.PAY) + // router.replace(ROUTE_PATHS.PAY) } }, [timer]) return ( -
+
-
+

결제 중 오류가 발생했어요.

- {timer > 0 &&

{timer}초 후 자동으로 이동합니다.

} + + {timer > 0 && ( +

{timer}초 후 자동으로 이동합니다.

+ )}
) diff --git a/src/app/search/_components/RealTimeSearches.tsx b/src/app/search/_components/RealTimeSearches.tsx index 79906c0..caa51a0 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 80729a9..be2fbbe 100644 --- a/src/app/search/_components/RecentSearches.tsx +++ b/src/app/search/_components/RecentSearches.tsx @@ -1,5 +1,6 @@ 'use client' +import usePostSearch from '@/api/usePostSearch' import Chip from '@/components/Chip' import Icon from '@/components/Icon' import { useLocalStorage } from '@/hooks/useLocalStorage' @@ -15,6 +16,8 @@ const RecentSearches = () => { const router = useRouter() const { setKeyword } = useFoodSearchFilterStore() + const { mutate: postSearch } = usePostSearch() + const handleRemoveSearch = (item: string) => { if (recentSearches === undefined) return @@ -27,6 +30,7 @@ const RecentSearches = () => { } const handleSearch = (word: string) => { + postSearch(word) setKeyword(word) router.push(ROUTE_PATHS.SEARCH_RESULT) } @@ -34,8 +38,8 @@ const RecentSearches = () => { return (
- 최근 검색어 - + 최근 검색어 + 전체삭제
@@ -44,6 +48,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 ec3c6d0..fd79da9 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 2eeb541..9727ac7 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 834f9b2..94d7b05 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 41cc959..efa0faf 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 7f8e329..0000000 --- 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 31e5e80..30d8b66 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 dc4b262..894c508 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 c975b22..303b74b 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 ff665ea..5d84cf4 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 18b4e3d..2e8c693 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 8e2ea17..1904ab0 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 (