Merge pull request #18 from New-Syatte/17deliveryTracking

17delivery tracking

next.config.js

@@ -3,6 +3,11 @@ const nextConfig = {
   images: {
     domains: ["cdn.sanity.io"],
   },
+  experimental: {
+    // serverActions 기능을 활성화합니다.
+    serverActions: true,
+    concurrentFeatures: true,
+  },
 };
 
 module.exports = nextConfig;

package.json

@@ -15,6 +15,7 @@
     "@sanity/image-url": "^1.0.2",
     "@tosspayments/payment-sdk": "^1.6.1",
     "@tosspayments/payment-widget-sdk": "^0.10.1",
+    "axios": "^1.6.7",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.10",
     "eslint": "8.41.0",

src/app/(order)/order/order-details/[id]/page.tsx

@@ -1,7 +1,8 @@
-import OrderProduct from "../../OrderProduct";
+import OrderProduct from "../../order-history/OrderProduct";
 import { getOrder } from "@/services/sanity/orders";
 import deliveryFee from "@/constants/deliveryFee";
 import Link from "next/link";
+import { Order } from "@/model/order";
 interface OrderDetailsProps {
   params: {
     id: string;
@@ -10,14 +11,16 @@ interface OrderDetailsProps {
 
 const OrderDetails = async ({ params }: OrderDetailsProps) => {
   const { id } = params;
-  const order = await getOrder(id);
+  const order: Order = await getOrder(id);
   console.log("order", order);
 
   const orderTime = new Date(order.createdAt);
   const formattedOrderTime = orderTime.toLocaleString("ko-KR", {
     timeZone: "UTC",
   });
 
+  const deliveryEvents = order.shippingInfo?.events;
+  console.log("deliveryEvents", deliveryEvents);
   return (
     <>
       <div className="w-full border-b-2 border-colorBlack pb-14">
@@ -37,7 +40,7 @@ const OrderDetails = async ({ params }: OrderDetailsProps) => {
           </div>
         </div>
       </div>
-      <div className="flex w-full pb-40 p-7 justify-between">
+      <div className="flex w-full pb-24 p-7 justify-between border-b-2 border-colorBlack">
         <div className="flex gap-x-28">
           <h2 className="text-xl font-bold w-32">주문 결제 정보</h2>
           <div className="text-darkGray">
@@ -62,6 +65,18 @@ const OrderDetails = async ({ params }: OrderDetailsProps) => {
           </div>
         </div>
       </div>
+      {deliveryEvents && (
+        <div className="flex flex-col w-full pb-24 p-7">
+          <h2 className="text-xl font-bold w-32 mb-6">배송 현황</h2>
+          {deliveryEvents.map((event, index) => (
+            <div key={index} className="flex h-28 flex-col gap-2 p-6">
+              <p className="font-bold">{event.node.status.code}</p>
+              <p>{new Date(event.node.time).toLocaleString()}</p>
+              <p>{event.node.description}</p>
+            </div>
+          ))}
+        </div>
+      )}
       <div className="flex items-center justify-center w-full">
         <Link
           className="border border-colorBlack w-[350px] h-[80px] text-2xl font-bold flex justify-center items-center"

src/app/(order)/order/order-history/OrderHistoryClient.tsx

@@ -0,0 +1,76 @@
+"use client";
+import StatusProgress from "./StatusProgress";
+import PeriodSelector from "@/layouts/periodSelector/PeriodSelector";
+import OrderList from "./OrderList";
+import { getOrders, updateOrderStatus } from "@/services/sanity/orders";
+import useSWR from "swr";
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { STORE_ORDER, selectOrders } from "@/redux/slice/orderSlice";
+import { Order } from "@/model/order";
+import { TrackingResponseEvent } from "@/model/order";
+
+interface OrderHistoryClientProps {
+  userEmail: string;
+}
+
+const OrderHistoryClient = ({ userEmail }: OrderHistoryClientProps) => {
+  const {
+    data: orders,
+    error,
+    mutate,
+  } = useSWR(["orders", userEmail], () => getOrders(userEmail));
+
+  const dispatch = useDispatch();
+  const reduxOrders = useSelector(selectOrders);
+  useEffect(() => {
+    if (reduxOrders && orders) {
+      reduxOrders.forEach(reduxOrder => {
+        const matchedOrder = orders.find(
+          (order: Order) => order._id === reduxOrder._id,
+        );
+        if (matchedOrder) {
+          if (
+            matchedOrder.status !== reduxOrder.orderStatus &&
+            reduxOrder.shippingInfo.events
+          ) {
+            (async () => {
+              await updateOrderStatus(
+                matchedOrder._id,
+                reduxOrder.orderStatus,
+                reduxOrder.shippingInfo.events as TrackingResponseEvent[],
+              );
+              console.log(matchedOrder, "updated");
+              // update된 orders를 mutate로 캐시에 저장.
+              mutate();
+            })();
+          }
+        }
+      });
+    }
+  }, [reduxOrders]);
+
+  useEffect(() => {
+    if (orders) {
+      dispatch(STORE_ORDER(orders));
+    }
+  }, [orders]);
+
+  if (error) return <div>Failed to load orders</div>;
+  if (!orders) return <div>Loading...</div>;
+
+  return (
+    <div className="w-full flex flex-col gap-y-40">
+      <StatusProgress />
+      <div>
+        <div className="flex justify-between mb-[30px]">
+          <h2 className="text-xl font-semibold">주문 내용</h2>
+          <PeriodSelector />
+        </div>
+        <OrderList />
+      </div>
+    </div>
+  );
+};
+
+export default OrderHistoryClient;

src/app/(order)/order/order-history/OrderList.tsx

@@ -4,19 +4,19 @@ import { Order } from "@/model/order";
 import { useSelector } from "react-redux";
 import { RootState } from "@/redux/store";
 import Pagination from "@/components/pagination/Pagination";
-import OrderProduct from "../OrderProduct";
+import OrderProduct from "./OrderProduct";
+import { selectOrders } from "@/redux/slice/orderSlice";
 
-interface OrderListProps {
-  orders: Order[];
-}
-
-const OrderList = ({ orders }: OrderListProps) => {
+const OrderList = () => {
+  //기간 별 filtering
   const startDate = useSelector((state: RootState) => state.period.startDate);
   const endDate = useSelector((state: RootState) => state.period.endDate);
 
   const [currentPage, setCurrentPage] = useState(1);
   const ordersPerPage = 10;
 
+  const orders = useSelector(selectOrders);
+
   const filteredOrders: Order[] | undefined = orders
     ?.filter(order => {
       const orderDate = new Date(order.createdAt);
@@ -35,7 +35,6 @@ const OrderList = ({ orders }: OrderListProps) => {
     indexOfLastOrder,
   );
 
-  // console.log("orders", orders);
   return (
     <>
       <div>

src/app/(order)/order/OrderProduct.tsx → src/app/(order)/order/order-history/OrderProduct.tsx

@@ -1,10 +1,13 @@
 "use client";
 import Image from "next/image";
 import { BsChevronRight } from "react-icons/bs";
-import { Order } from "@/model/order";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { ORDER_STATUS } from "@/constants/status";
+import { Order } from "@/model/order";
+import { useDispatch, useSelector } from "react-redux";
+import { trackDeliveryThunk } from "@/redux/slice/orderSlice";
+import { useEffect } from "react";
 
 interface OrderProductProps {
   order: Order;
@@ -14,9 +17,15 @@ interface OrderProductProps {
 const OrderProduct = ({ order, index = 0 }: OrderProductProps) => {
   const pathname = usePathname();
   const orderTime = new Date(order.createdAt).toISOString();
+  const orderStatus = order.orderStatus;
 
   const statusTitleArr = ORDER_STATUS.map(status => status.title);
   const statusArray = ORDER_STATUS.map(status => status.value);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch<any>(trackDeliveryThunk(order));
+  }, [dispatch, orderStatus]);
 
   return (
     <div className={`w-full pb-10`} key={index}>
@@ -68,18 +77,6 @@ const OrderProduct = ({ order, index = 0 }: OrderProductProps) => {
                 {statusTitleArr[statusArray.indexOf(order.orderStatus)]}
               </div>
             </div>
-            <div className="w-1/3 flex justify-end items-center">
-              {order.orderStatus === "moving" && (
-                <a
-                  className="btn_tiny"
-                  href={"#"}
-                  // href={`https://tracker.delivery/#/${order.deliveryCompany}/${order.deliveryNumber}`}
-                  target="_blank"
-                >
-                  배송조회(준비중)
-                </a>
-              )}
-            </div>
           </div>
         ))}
     </div>

src/app/(order)/order/order-history/StatusProgress.tsx

@@ -1,16 +1,15 @@
 "use client";
 import { BsChevronRight } from "react-icons/bs";
-import { Order } from "@/model/order";
 import { ORDER_STATUS } from "@/constants/status";
+import { useSelector } from "react-redux";
+import { selectOrders } from "@/redux/slice/orderSlice";
 
-interface StatusProgressProps {
-  orders: Order[];
-}
-
-const StatusProgress = ({ orders }: StatusProgressProps) => {
+const StatusProgress = () => {
   // orders 배열의 status 기준으로, status 별로 몇 개의 주문이 있는지 카운트
   const statusArray = ORDER_STATUS.map(status => status.value).slice(1, 5);
   const statusTitleArr = ORDER_STATUS.map(status => status.title).slice(1, 5);
+  const orders = useSelector(selectOrders);
+
   const statusCount = orders.reduce((acc: any, cur: any) => {
     if (acc[cur.orderStatus]) {
       acc[cur.orderStatus] += 1;