[Feat/#41] 새상품구매 페이지와 체험 과일 택배 접수 페이지 구분 (#42)

* feat: step에 해당하는 컴포넌트 공통 컴포넌트로 빼고 체험 상품 접수하는 퍼널 페이지 새로 생성

* feat: 각 페이지에 따라 라우팅 수정

* fix: 주석 삭제

* fix: useLocation 불필요한곳 삭제

* deploy: 배포 설정

---------

Co-authored-by: Yoo TaeSeung <remicon99@gmail.com>

.github/workflows/vercelDeploy.yml

@@ -0,0 +1,32 @@
+name: Synchronize to forked repo
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  sync:
+    name: Sync forked repo
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout main
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.FORKED_REPO_TOKEN }}
+          fetch-depth: 0
+          ref: main
+
+      - name: Add remote-url
+        run: |
+          git remote add forked-repo https://gudusol:${{ secrets.FORKED_REPO_TOKEN }}@github.com/gudusol/RootsAndFruitsDeliveryServiceClient
+          git config user.name gudusol
+          git config user.email ${{ secrets.EMAIL }}
+
+      - name: Push changes to forked-repo
+        run: |
+          git push -f forked-repo main
+
+      - name: Clean up
+        run: |
+          git remote remove forked-repo

src/App.tsx

@@ -1,11 +1,22 @@
 import { Global, ThemeProvider } from "@emotion/react";
-import { adminRoutes, homeRoutes, orderInfoRoutes } from "@routes";
+import {
+  experienceOrderInfoRoutes,
+  homeRoutes,
+  orderInfoRoutes,
+  adminRoutes,
+} from "@routes";
 import GlobalStyle from "@styles/global";
 import theme from "@styles/theme";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
-const allRoutes = [...homeRoutes, ...orderInfoRoutes, ...adminRoutes];
+const allRoutes = [
+  ...homeRoutes,
+  ...orderInfoRoutes,
+  ...experienceOrderInfoRoutes,
+      ...adminRoutes,
+
+];
 const router = createBrowserRouter([...allRoutes]);
 
 function App() {

src/apis/domains/service/useFetchProductList.ts

@@ -2,14 +2,14 @@ import { get } from "@apis/api";
 import { QUERY_KEY } from "@apis/queryKeys/queryKeys";
 import { useQuery } from "@tanstack/react-query";
 import { ApiResponseType } from "@types";
-import { ProductList } from "src/stores/productList";
+import { ProductListResponse } from "src/stores/productList";
 
-const getProductList = async (): Promise<ProductList | null> => {
+const getProductList = async (): Promise<ProductListResponse | null> => {
   try {
-    const response = await get<
-      ApiResponseType<{ sailedProductList: ProductList }>
-    >("api/v1/product/sailed");
-    return response.data.data.sailedProductList;
+    const response = await get<ApiResponseType<ProductListResponse>>(
+      "api/v1/product/sailed"
+    );
+    return response.data.data;
   } catch (error) {
     console.log(error);
     return null;

src/components/common/CustomCalendar/CustomCalendar.tsx

@@ -9,7 +9,7 @@ interface CustomCalendarProps {
 const CustomCalendar = ({ onDateChange }: CustomCalendarProps) => {
   const [date, setDate] = useState<Date | null>(new Date());
 
-  const formatDay = (locale: string | undefined, date: Date): string =>
+  const formatDay = (_locale: string | undefined, date: Date): string =>
     date.getDate().toString();
 
   const formatDate = (date: Date) => {

src/components/common/index.ts

@@ -8,6 +8,16 @@ import RadioInput from "./RadioInput/RadioInput";
 import CustomCalendar from "./CustomCalendar/CustomCalendar";
 import Toast from "./Toast/Toast";
 import ClipboardButton from "./ClipboardButton/ClipboardButton";
+import Sender from "./steps/Sender/Sender";
+import Receiver1 from "./steps/Receiver1/Receiver1";
+import Receiver2 from "./steps/Receiver2/Receiver2";
+import SelectProduct from "./steps/SelectProduct/SelectProduct";
+import SelectDeliveryDate from "./steps/SelectDeliveryDate/SelectDeliveryDate";
+import CheckInfo from "./steps/CheckInfo/CheckInfo";
+import Complete from "./steps/Complete/Complete";
+import Edit from "./steps/CheckInfo/Edit/Edit";
+import EditSender from "./steps/CheckInfo/Edit/EditSender/EditSender";
+import EditReceiver from "./steps/CheckInfo/Edit/EditReceiver/EditReceiver";
 import DateSelect from "./DateSelect/DateSelect";
 import Modal from "./Modal/Modal";
 
@@ -22,6 +32,16 @@ export {
   CustomCalendar,
   Toast,
   ClipboardButton,
+  Sender,
+  Receiver1,
+  Receiver2,
+  SelectProduct,
+  SelectDeliveryDate,
+  CheckInfo,
+  Complete,
+  Edit,
+  EditSender,
+  EditReceiver,
   DateSelect,
   Modal,
 };

src/pages/orderInfo/components/steps/CheckInfo/CheckInfo.tsx → src/components/common/steps/CheckInfo/CheckInfo.tsx

@@ -1,5 +1,4 @@
 import { Button, Header, ProgressBar } from "@components";
-import { useOrderPostDataChange } from "@pages/orderInfo/hooks/useOrderPostDataChange";
 import { ErrorType, StepProps } from "@types";
 import { buttonSectionStyle, layoutStyle } from "@pages/orderInfo/styles";
 import {
@@ -15,19 +14,25 @@ import {
 } from "./CheckInfo.style";
 import { useNavigate } from "react-router-dom";
 import { usePostOrder } from "@apis/domains/service/usePostOrder";
+import { useOrderPostDataChange } from "src/hooks/useOrderPostDataChange";
+import { useAtom } from "jotai";
+import { categoryAtom } from "@stores";
 
 const CheckInfo = ({ onNext }: StepProps) => {
   const { orderPostDataState, handleAddReceiver, handleSetIndex } =
     useOrderPostDataChange();
   const { mutateAsync } = usePostOrder();
   const receivers = orderPostDataState.recipientInfo;
   const navigate = useNavigate();
+  const [category] = useAtom(categoryAtom);
 
   const handleSenderEdit = () => {
-    navigate("/order-info/check-info/edit", { state: { type: "sender" } });
+    navigate(`/${category}/order-info/check-info/edit`, {
+      state: { type: "sender" },
+    });
   };
   const handleReceiverEdit = (index: number) => {
-    navigate("/order-info/check-info/edit", {
+    navigate(`/${category}/order-info/check-info/edit`, {
       state: { type: "receiver", index },
     });
   };

src/pages/orderInfo/components/steps/CheckInfo/Edit/EditReceiver/EditReceiver.tsx → src/components/common/steps/CheckInfo/Edit/EditReceiver/EditReceiver.tsx

@@ -5,7 +5,6 @@ import {
   Input,
   RadioInput,
 } from "@components";
-import { useOrderPostDataChange } from "@pages/orderInfo/hooks/useOrderPostDataChange";
 import {
   addressFormWrapper,
   deliveryDateContainer,
@@ -23,6 +22,9 @@ import { buttonSectionStyle } from "@pages/orderInfo/styles";
 import { useState } from "react";
 import { useDaumPostcodePopup } from "react-daum-postcode";
 import { useNavigate } from "react-router-dom";
+import { useOrderPostDataChange } from "src/hooks/useOrderPostDataChange";
+import { useAtom } from "jotai";
+import { categoryAtom } from "@stores";
 
 const scriptUrl =
   "https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js";
@@ -43,6 +45,7 @@ const EditReceiver = ({ receiverIndex }: EditReceiverProps) => {
     useOrderPostDataChange();
   const receiver = orderPostDataState.recipientInfo[receiverIndex];
   const navigate = useNavigate();
+  const [category] = useAtom(categoryAtom);
 
   const [form, setForm] = useState({
     address: receiver?.recipientAddress || "",
@@ -108,7 +111,7 @@ const EditReceiver = ({ receiverIndex }: EditReceiverProps) => {
     );
     handleRecipientInputChange(selectedDate, "deliveryDate", receiverIndex);
 
-    navigate("/order-info/check-info");
+    navigate(`/${category}/order-info/check-info`);
   };
 
   const handleClick = () => {

src/pages/orderInfo/components/steps/CheckInfo/Edit/EditSender/EditSender.tsx → src/components/common/steps/CheckInfo/Edit/EditSender/EditSender.tsx

@@ -1,19 +1,22 @@
 import { Button, Input } from "@components";
-import { useOrderPostDataChange } from "@pages/orderInfo/hooks/useOrderPostDataChange";
 import {
   editSenderLayout,
   spanAndInputWrapper,
   spanStyle,
 } from "./EditSender.style";
 import { buttonSectionStyle } from "@pages/orderInfo/styles";
 import { useNavigate } from "react-router-dom";
+import { useOrderPostDataChange } from "src/hooks/useOrderPostDataChange";
+import { useAtom } from "jotai";
+import { categoryAtom } from "@stores";
 
 const EditSender = () => {
   const { orderPostDataState, handleInputChange } = useOrderPostDataChange();
   const navigate = useNavigate();
+  const [category] = useAtom(categoryAtom);
 
   const handleButtonClick = () => {
-    navigate("/order-info/check-info");
+    navigate(`/${category}/order-info/check-info`);
   };
   return (
     <div css={editSenderLayout}>

src/pages/orderInfo/components/steps/Complete/Complete.tsx → src/components/common/steps/Complete/Complete.tsx

@@ -23,7 +23,7 @@ const Complete = () => {
     setShowAccountInfo(true);
   };
   const handleButtonClick = () => {
-    navigate("/");
+    navigate("/product");
   };
   return (
     <>

src/pages/orderInfo/components/steps/Receiver1/Receiver1.tsx → src/components/common/steps/Receiver1/Receiver1.tsx

@@ -8,9 +8,9 @@ import {
   sectionStyle,
   textStyle,
 } from "@pages/orderInfo/styles";
-import { useOrderPostDataChange } from "@pages/orderInfo/hooks/useOrderPostDataChange";
 import { useState } from "react";
-import useOrderPostDataValidation from "@pages/orderInfo/hooks/useOrderPostDataValidation";
+import useOrderPostDataValidation from "src/hooks/useOrderPostDataValidation";
+import { useOrderPostDataChange } from "src/hooks/useOrderPostDataChange";
 
 const Receiver1 = ({ onNext }: StepProps) => {
   const {

src/pages/orderInfo/components/steps/Receiver2/Receiver2.tsx → src/components/common/steps/Receiver2/Receiver2.tsx

@@ -9,8 +9,8 @@ import {
 } from "@pages/orderInfo/styles";
 import { StepProps } from "@types";
 import { mainSectionStyle, zonecodeWrapper } from "./Receiver2.style";
-import { useOrderPostDataChange } from "@pages/orderInfo/hooks/useOrderPostDataChange";
 import { useDaumPostcodePopup } from "react-daum-postcode";
+import { useOrderPostDataChange } from "src/hooks/useOrderPostDataChange";
 
 const scriptUrl =
   "https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js";

src/pages/orderInfo/components/steps/SelectDeliveryDate/SelectDeliveryDate.tsx → src/components/common/steps/SelectDeliveryDate/SelectDeliveryDate.tsx

@@ -21,8 +21,8 @@ import {
   textWrapper,
 } from "./SelectDeliveryDate.style";
 import React, { useState } from "react";
-import { useOrderPostDataChange } from "@pages/orderInfo/hooks/useOrderPostDataChange";
 import { getTwoDaysLaterDate } from "@utils";
+import { useOrderPostDataChange } from "src/hooks/useOrderPostDataChange";
 
 const SelectDeliveryDate = ({ onNext }: StepProps) => {
   const { handleRecipientInputChange } = useOrderPostDataChange();

src/pages/orderInfo/components/steps/SelectProduct/SelectProduct.tsx → src/components/common/steps/SelectProduct/SelectProduct.tsx

@@ -1,5 +1,5 @@
+import { useEffect, useState } from "react";
 import { Button, CountProduct, Header, ProgressBar } from "@components";
-import { useOrderPostDataChange } from "@pages/orderInfo/hooks/useOrderPostDataChange";
 import {
   buttonSectionStyle,
   layoutStyle,
@@ -9,35 +9,51 @@ import {
 } from "@pages/orderInfo/styles";
 import { StepProps } from "@types";
 import { mainSectionStyle } from "./SelectProduct.style";
-import { useEffect } from "react";
 import { useFetchProductList } from "@apis/domains/service/useFetchProductList";
 import { useAtom } from "jotai";
-import { productListAtom } from "@stores";
+import { categoryAtom, productListAtom } from "@stores";
+import { useOrderPostDataChange } from "src/hooks/useOrderPostDataChange";
+import { ProductList } from "src/stores/productList";
 
 const SelectProduct = ({ onNext }: StepProps) => {
+  const [category] = useAtom(categoryAtom);
+
   const {
     orderPostDataState,
     currentRecipientIndex,
     handleRecipientInputChange,
   } = useOrderPostDataChange();
   const { data: productList, isLoading } = useFetchProductList();
   const [productListState, setProductListState] = useAtom(productListAtom);
+  const [displayedProductList, setDisplayedProductList] = useState<ProductList>(
+    []
+  );
 
   useEffect(() => {
-    if (productList && productList.length > 0) {
+    if (productList) {
       setProductListState(productList);
     }
   }, [productList, setProductListState]);
 
+  useEffect(() => {
+    if (productListState) {
+      const listToSet =
+        category === "experience"
+          ? productListState.trialSailedProductList
+          : productListState.sailedproductList;
+      setDisplayedProductList(listToSet);
+    }
+  }, [productListState, category]);
+
   useEffect(() => {
     const currentProductInfo =
       orderPostDataState.recipientInfo[currentRecipientIndex]?.productInfo;
     if (
-      productListState &&
-      productListState.length > 0 &&
+      displayedProductList &&
+      displayedProductList.length > 0 &&
       (!currentProductInfo || currentProductInfo.length === 0)
     ) {
-      const initialProductInfo = productListState.map((product) => ({
+      const initialProductInfo = displayedProductList.map((product) => ({
         productId: product.productId,
         productName: product.productName,
         productCount: 0,
@@ -49,7 +65,7 @@ const SelectProduct = ({ onNext }: StepProps) => {
         currentRecipientIndex
       );
     }
-  }, [currentRecipientIndex, productListState]);
+  }, [currentRecipientIndex, displayedProductList]);
 
   const handleCountChange = (productIndex: number, newCount: number) => {
     const currentProductInfo =
@@ -58,7 +74,7 @@ const SelectProduct = ({ onNext }: StepProps) => {
     const updatedProductInfo = [...currentProductInfo];
 
     if (productList) {
-      const product = productListState[productIndex];
+      const product = displayedProductList[productIndex];
 
       if (product) {
         updatedProductInfo[productIndex] = {
@@ -75,13 +91,15 @@ const SelectProduct = ({ onNext }: StepProps) => {
       }
     }
   };
+
   const handleNextClick = () => {
     onNext();
   };
 
   if (isLoading || productList === undefined) {
     return <div>Loading...</div>;
   }
+
   return (
     <>
       <Header text="상품 선택" />
@@ -95,15 +113,10 @@ const SelectProduct = ({ onNext }: StepProps) => {
           </div>
         </section>
         <section css={mainSectionStyle}>
-          {productListState.map((product, i) => {
+          {displayedProductList.map((product, i) => {
             const productCount =
               orderPostDataState.recipientInfo[currentRecipientIndex]
                 ?.productInfo?.[i]?.productCount ?? 0;
-            // const productCount =
-            //   orderPostDataState.recipientInfo[
-            //     currentRecipientIndex
-            //   ]?.productInfo?.find((p) => p.productId === product.productId)
-            //     ?.productCount ?? 0;
             return (
               <CountProduct
                 key={i}

src/pages/orderInfo/components/steps/Sender/Sender.tsx → src/components/common/steps/Sender/Sender.tsx

@@ -10,9 +10,9 @@ import {
 } from "@pages/orderInfo/styles";
 import { checkboxWrapper } from "./Sender.style";
 
-import { useOrderPostDataChange } from "@pages/orderInfo/hooks/useOrderPostDataChange";
-import useOrderPostDataValidation from "@pages/orderInfo/hooks/useOrderPostDataValidation";
+import useOrderPostDataValidation from "src/hooks/useOrderPostDataValidation";
 import { useState } from "react";
+import { useOrderPostDataChange } from "src/hooks/useOrderPostDataChange";
 
 const Sender = ({ onNext }: StepProps) => {
   const { orderPostDataState, handleInputChange, handleOptinalAgreementClick } =