Merge pull request #177 from FC-InnerCircle-ICD2/fix/qa

Fix/qa

Author: freechird2

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

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 }

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<OrderPayResponse>(`orders`, data)
+      return await api.post<OrderPayResponse>(`orders`, data, {
+        headers: {
+          'X-User-Lat': data.coords.lat.toString() ?? '',
+          'X-User-Lng': data.coords.lng.toString() ?? '',
+        },
+      })
     },
     onSuccess: () => {
       qc.invalidateQueries({ queryKey: ['writable-reviews'] })

src/app/home/list/_components/HomeSearchFoodList.tsx

@@ -71,7 +71,7 @@ const HomeSearchFoodList = ({
 
   return (
     <div ref={scrollRef} className="flex flex-col overflow-y-auto px-mobile_safe">
-      <p ref={topRef} className="pb-2 text-lg font-bold">
+      <p ref={topRef} className="pb-2 text-xl font-bold">
         개발의 민족 등록 맛집
       </p>
       <FoodOrderFilter />

src/app/mypage/address/_components/AddressOption.tsx

@@ -172,7 +172,7 @@ const AddressOption = () => {
               <Icon name="MapPin" size={20} className="mt-[2px]" />
               <div className="flex flex-col gap-1">
                 <div className="flex items-center gap-2">
-                  <div className="max-w-[calc(100dvw-40px-20px-30px-1rem)] truncate text-base font-medium">
+                  <div className="max-w-[calc(100dvw-40px-20px-34px-1rem)] truncate text-base font-medium">
                     {address.defaultAddress.roadAddress || address.defaultAddress.jibunAddress}
                     {', '}
                     {address.defaultAddress.detailAddress}

src/app/orders/_components/Order.tsx

@@ -100,7 +100,7 @@ const Order = () => {
         </div>
       ) : (
         <>
-          <div className="flex h-full flex-col gap-4 overflow-hidden pt-5">
+          <div className="flex h-full flex-col gap-7 overflow-hidden pt-5">
             <div className="px-mobile_safe">
               <OrderSearch onSearch={handelSearch} />
             </div>

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 = ({
         ) : (
           <Skeleton className="size-[100px] rounded-xl" />
         )}
-        <div className="flex w-[calc(100%-1rem-100px)] flex-col gap-4 pl-4">
+        <div className="flex w-[calc(100%-1rem-100px)] flex-col gap-2 pl-4">
           <div className="flex flex-row justify-between">
             <Badge variant={variant[order.status.code as keyof typeof badgeVariants]}>
               {order.status.code === 'S5' ? '배달완료' : order.status.desc}
@@ -57,24 +56,25 @@ const OrderItem = ({
               {new Date(order.orderTime).toLocaleString()}
             </div>
           </div>
-          <div className="flex flex-col gap-2">
-            <div className="truncate text-lg font-bold hover:text-clip">{order.storeName}</div>
-            <div className="text-sm text-gray-700">{order.orderSummary}</div>
+          <div className="flex flex-col gap-1">
+            <div className="truncate text-xl font-bold hover:text-clip">{order.storeName}</div>
+            <div className="text-base text-gray-700">{order.orderSummary}</div>
           </div>
         </div>
       </div>
-      <div className="flex flex-row gap-3">
+      <div className="flex flex-row gap-2">
         <div className="w-full">
-          <Button size="s" className="h-10" onClick={handleNavigate}>
+          <Button
+            size="m"
+            onClick={() => handleNavigate(`${ROUTE_PATHS.ORDERS_DETAIL}/${order.orderId}`)}
+          >
             주문 상세
           </Button>
         </div>
         {order.status.code === 'S5' && (
-          <Link className="w-full" href={ROUTE_PATHS.REVIEW}>
-            <Button variant="grayFit" size="s" className="h-10">
-              리뷰 달기
-            </Button>
-          </Link>
+          <Button variant="grayFit" size="m" onClick={() => handleNavigate(ROUTE_PATHS.REVIEW)}>
+            리뷰 달기
+          </Button>
         )}
       </div>
     </div>

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 (
     <div className="flex flex-col px-mobile_safe">
       <div className="flex flex-row items-center justify-between pb-6">
-        <div className="text-xl font-bold">{ordersData.storeName}</div>
+        <div className="text-2xl font-bold">{ordersData.storeName}</div>
         {(ordersData.status.code === 'S1' || ordersData.status.code === 'S2') && (
           <Chip text="주문 취소" onClick={handleOrderCancel} />
         )}
       </div>
-      <div className="flex flex-col gap-5">
+      <div className="flex flex-col gap-4">
         <div className="text-lg font-bold">주문정보</div>
-        <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-2">
           <div className="flex flex-row justify-between gap-8">
             <div className="min-w-[50px] text-sm text-gray-500">주문번호</div>
             <div className="truncate text-sm text-gray-500">{ordersData.orderId}</div>
@@ -51,7 +52,7 @@ const OrderList = ({ ordersData, patchOrderCancel }: OrderListProps) => {
         </div>
       </div>
       <Separator className="my-5" />
-      <div className="flex flex-col gap-5">
+      <div className="flex flex-col gap-4">
         <div className="text-lg font-bold">주문내역</div>
         {ordersData.orderMenus.map((menu) => (
           <div key={uuidv4()}>
@@ -75,7 +76,7 @@ const OrderList = ({ ordersData, patchOrderCancel }: OrderListProps) => {
 
       <Separator className="my-5" />
 
-      <div className="flex flex-col gap-5">
+      <div className="flex flex-col gap-4">
         <div className="flex flex-row items-center justify-between">
           <div className="text-base">상품금액</div>
           <div className="text-base">{`${ordersData.orderPrice.toLocaleString()}원`}</div>
@@ -84,7 +85,7 @@ const OrderList = ({ ordersData, patchOrderCancel }: OrderListProps) => {
 
       <Separator className="my-5" />
 
-      <div className="flex flex-col gap-5">
+      <div className="flex flex-col gap-4">
         <div className="flex flex-row justify-between">
           <div className="text-base">배달요금</div>
           <div className="text-base">{`${ordersData.deliveryPrice.toLocaleString()}원`}</div>
@@ -93,7 +94,7 @@ const OrderList = ({ ordersData, patchOrderCancel }: OrderListProps) => {
 
       <Separator className="my-5" />
 
-      <div className="flex flex-col gap-5">
+      <div className="flex flex-col gap-4">
         <div className="flex flex-row justify-between">
           <div className="text-base">총 결제 금액</div>
           <div className="text-base">{`${ordersData.paymentPrice.toLocaleString()}원`}</div>
@@ -107,10 +108,10 @@ const OrderList = ({ ordersData, patchOrderCancel }: OrderListProps) => {
       <Separator className="my-5" />
 
       <div className="pb-5 text-lg font-bold">주문자 정보</div>
-      <div className="flex flex-col gap-3 pb-16">
+      <div className="flex flex-col gap-2 pb-16">
         <div className="flex flex-row justify-between">
           <div className="max-w-48 text-sm text-gray-500">연락처</div>
-          <div className="text-sm text-gray-500">{ordersData.tel}</div>
+          <div className="text-sm text-gray-500">{formatPhoneNumber(ordersData.tel)}</div>
         </div>
         <div className="flex flex-row justify-between">
           <div className="text-sm text-gray-500">주소</div>