diff --git a/.github/workflows/vercelDeploy.yml b/.github/workflows/vercelDeploy.yml new file mode 100644 index 0000000..f3c385b --- /dev/null +++ b/.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 diff --git a/src/App.tsx b/src/App.tsx index 2e2f6ae..0b38592 100644 --- a/src/App.tsx +++ b/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() { diff --git a/src/apis/domains/service/useFetchProductList.ts b/src/apis/domains/service/useFetchProductList.ts index af772e2..7a31130 100644 --- a/src/apis/domains/service/useFetchProductList.ts +++ b/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 => { +const getProductList = async (): Promise => { try { - const response = await get< - ApiResponseType<{ sailedProductList: ProductList }> - >("api/v1/product/sailed"); - return response.data.data.sailedProductList; + const response = await get>( + "api/v1/product/sailed" + ); + return response.data.data; } catch (error) { console.log(error); return null; diff --git a/src/components/common/CustomCalendar/CustomCalendar.tsx b/src/components/common/CustomCalendar/CustomCalendar.tsx index eed3098..87c7e08 100644 --- a/src/components/common/CustomCalendar/CustomCalendar.tsx +++ b/src/components/common/CustomCalendar/CustomCalendar.tsx @@ -9,7 +9,7 @@ interface CustomCalendarProps { const CustomCalendar = ({ onDateChange }: CustomCalendarProps) => { const [date, setDate] = useState(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) => { diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 4a7c6fe..dcfb12b 100644 --- a/src/components/common/index.ts +++ b/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, }; diff --git a/src/pages/orderInfo/components/steps/CheckInfo/CheckInfo.style.ts b/src/components/common/steps/CheckInfo/CheckInfo.style.ts similarity index 100% rename from src/pages/orderInfo/components/steps/CheckInfo/CheckInfo.style.ts rename to src/components/common/steps/CheckInfo/CheckInfo.style.ts diff --git a/src/pages/orderInfo/components/steps/CheckInfo/CheckInfo.tsx b/src/components/common/steps/CheckInfo/CheckInfo.tsx similarity index 92% rename from src/pages/orderInfo/components/steps/CheckInfo/CheckInfo.tsx rename to src/components/common/steps/CheckInfo/CheckInfo.tsx index 9a42854..a767132 100644 --- a/src/pages/orderInfo/components/steps/CheckInfo/CheckInfo.tsx +++ b/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,6 +14,9 @@ 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 } = @@ -22,12 +24,15 @@ const CheckInfo = ({ onNext }: StepProps) => { 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 }, }); }; diff --git a/src/pages/orderInfo/components/steps/CheckInfo/Edit/Edit.tsx b/src/components/common/steps/CheckInfo/Edit/Edit.tsx similarity index 100% rename from src/pages/orderInfo/components/steps/CheckInfo/Edit/Edit.tsx rename to src/components/common/steps/CheckInfo/Edit/Edit.tsx diff --git a/src/pages/orderInfo/components/steps/CheckInfo/Edit/EditReceiver/EditReceiver.style.ts b/src/components/common/steps/CheckInfo/Edit/EditReceiver/EditReceiver.style.ts similarity index 100% rename from src/pages/orderInfo/components/steps/CheckInfo/Edit/EditReceiver/EditReceiver.style.ts rename to src/components/common/steps/CheckInfo/Edit/EditReceiver/EditReceiver.style.ts diff --git a/src/pages/orderInfo/components/steps/CheckInfo/Edit/EditReceiver/EditReceiver.tsx b/src/components/common/steps/CheckInfo/Edit/EditReceiver/EditReceiver.tsx similarity index 96% rename from src/pages/orderInfo/components/steps/CheckInfo/Edit/EditReceiver/EditReceiver.tsx rename to src/components/common/steps/CheckInfo/Edit/EditReceiver/EditReceiver.tsx index 73b3226..c75a31f 100644 --- a/src/pages/orderInfo/components/steps/CheckInfo/Edit/EditReceiver/EditReceiver.tsx +++ b/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 = () => { diff --git a/src/pages/orderInfo/components/steps/CheckInfo/Edit/EditSender/EditSender.style.ts b/src/components/common/steps/CheckInfo/Edit/EditSender/EditSender.style.ts similarity index 100% rename from src/pages/orderInfo/components/steps/CheckInfo/Edit/EditSender/EditSender.style.ts rename to src/components/common/steps/CheckInfo/Edit/EditSender/EditSender.style.ts diff --git a/src/pages/orderInfo/components/steps/CheckInfo/Edit/EditSender/EditSender.tsx b/src/components/common/steps/CheckInfo/Edit/EditSender/EditSender.tsx similarity index 84% rename from src/pages/orderInfo/components/steps/CheckInfo/Edit/EditSender/EditSender.tsx rename to src/components/common/steps/CheckInfo/Edit/EditSender/EditSender.tsx index 080ce23..1ad3f6f 100644 --- a/src/pages/orderInfo/components/steps/CheckInfo/Edit/EditSender/EditSender.tsx +++ b/src/components/common/steps/CheckInfo/Edit/EditSender/EditSender.tsx @@ -1,5 +1,4 @@ import { Button, Input } from "@components"; -import { useOrderPostDataChange } from "@pages/orderInfo/hooks/useOrderPostDataChange"; import { editSenderLayout, spanAndInputWrapper, @@ -7,13 +6,17 @@ import { } 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 (
diff --git a/src/pages/orderInfo/components/steps/Complete/Complete.style.ts b/src/components/common/steps/Complete/Complete.style.ts similarity index 100% rename from src/pages/orderInfo/components/steps/Complete/Complete.style.ts rename to src/components/common/steps/Complete/Complete.style.ts diff --git a/src/pages/orderInfo/components/steps/Complete/Complete.tsx b/src/components/common/steps/Complete/Complete.tsx similarity index 98% rename from src/pages/orderInfo/components/steps/Complete/Complete.tsx rename to src/components/common/steps/Complete/Complete.tsx index d714089..2bf48b8 100644 --- a/src/pages/orderInfo/components/steps/Complete/Complete.tsx +++ b/src/components/common/steps/Complete/Complete.tsx @@ -23,7 +23,7 @@ const Complete = () => { setShowAccountInfo(true); }; const handleButtonClick = () => { - navigate("/"); + navigate("/product"); }; return ( <> diff --git a/src/pages/orderInfo/components/steps/Receiver1/Receiver1.tsx b/src/components/common/steps/Receiver1/Receiver1.tsx similarity index 94% rename from src/pages/orderInfo/components/steps/Receiver1/Receiver1.tsx rename to src/components/common/steps/Receiver1/Receiver1.tsx index 3da9e6b..f43502d 100644 --- a/src/pages/orderInfo/components/steps/Receiver1/Receiver1.tsx +++ b/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 { diff --git a/src/pages/orderInfo/components/steps/Receiver2/Receiver2.style.ts b/src/components/common/steps/Receiver2/Receiver2.style.ts similarity index 100% rename from src/pages/orderInfo/components/steps/Receiver2/Receiver2.style.ts rename to src/components/common/steps/Receiver2/Receiver2.style.ts diff --git a/src/pages/orderInfo/components/steps/Receiver2/Receiver2.tsx b/src/components/common/steps/Receiver2/Receiver2.tsx similarity index 97% rename from src/pages/orderInfo/components/steps/Receiver2/Receiver2.tsx rename to src/components/common/steps/Receiver2/Receiver2.tsx index 9a039eb..1a6fd86 100644 --- a/src/pages/orderInfo/components/steps/Receiver2/Receiver2.tsx +++ b/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"; diff --git a/src/pages/orderInfo/components/steps/SelectDeliveryDate/SelectDeliveryDate.style.ts b/src/components/common/steps/SelectDeliveryDate/SelectDeliveryDate.style.ts similarity index 100% rename from src/pages/orderInfo/components/steps/SelectDeliveryDate/SelectDeliveryDate.style.ts rename to src/components/common/steps/SelectDeliveryDate/SelectDeliveryDate.style.ts diff --git a/src/pages/orderInfo/components/steps/SelectDeliveryDate/SelectDeliveryDate.tsx b/src/components/common/steps/SelectDeliveryDate/SelectDeliveryDate.tsx similarity index 97% rename from src/pages/orderInfo/components/steps/SelectDeliveryDate/SelectDeliveryDate.tsx rename to src/components/common/steps/SelectDeliveryDate/SelectDeliveryDate.tsx index e4e85a3..b82a057 100644 --- a/src/pages/orderInfo/components/steps/SelectDeliveryDate/SelectDeliveryDate.tsx +++ b/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(); diff --git a/src/pages/orderInfo/components/steps/SelectProduct/SelectProduct.style.ts b/src/components/common/steps/SelectProduct/SelectProduct.style.ts similarity index 100% rename from src/pages/orderInfo/components/steps/SelectProduct/SelectProduct.style.ts rename to src/components/common/steps/SelectProduct/SelectProduct.style.ts diff --git a/src/pages/orderInfo/components/steps/SelectProduct/SelectProduct.tsx b/src/components/common/steps/SelectProduct/SelectProduct.tsx similarity index 75% rename from src/pages/orderInfo/components/steps/SelectProduct/SelectProduct.tsx rename to src/components/common/steps/SelectProduct/SelectProduct.tsx index 6889723..0d72a99 100644 --- a/src/pages/orderInfo/components/steps/SelectProduct/SelectProduct.tsx +++ b/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,12 +9,15 @@ 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, @@ -22,22 +25,35 @@ const SelectProduct = ({ onNext }: StepProps) => { } = useOrderPostDataChange(); const { data: productList, isLoading } = useFetchProductList(); const [productListState, setProductListState] = useAtom(productListAtom); + const [displayedProductList, setDisplayedProductList] = useState( + [] + ); 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,6 +91,7 @@ const SelectProduct = ({ onNext }: StepProps) => { } } }; + const handleNextClick = () => { onNext(); }; @@ -82,6 +99,7 @@ const SelectProduct = ({ onNext }: StepProps) => { if (isLoading || productList === undefined) { return
Loading...
; } + return ( <>
@@ -95,15 +113,10 @@ const SelectProduct = ({ onNext }: StepProps) => {
- {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 ( { const { orderPostDataState, handleInputChange, handleOptinalAgreementClick } = diff --git a/src/constants/routePath.ts b/src/constants/routePath.ts index 6429892..88078d5 100644 --- a/src/constants/routePath.ts +++ b/src/constants/routePath.ts @@ -1,10 +1,19 @@ -const homePages = { - HOME: "/", +const productHomePages = { + PRODUCT_HOME: "/product", +}; + +const experienceHomePages = { + EXPERIENCE_HOME: "/experience", }; const orderInfoPages = { - ORDER_INFO: "/order-info/:step", - ORDER_INFO_EDIT: "/order-info/check-info/edit", + ORDER_INFO: "/product/order-info/:step", + ORDER_INFO_EDIT: "/product/order-info/check-info/edit", +}; + +const experienceProductOrderInfoPages = { + EXPERIENCE_ORDER_INFO: "/experience/order-info/:step", + EXPERIENCE_ORDER_INFO_EDIT: "/experience/order-info/check-info/edit", }; const adminPages = { @@ -13,7 +22,9 @@ const adminPages = { }; export default { - ...homePages, + ...productHomePages, + ...experienceHomePages, ...orderInfoPages, + ...experienceProductOrderInfoPages, ...adminPages, }; diff --git a/src/pages/orderInfo/hooks/useOrderPostDataChange.ts b/src/hooks/useOrderPostDataChange.ts similarity index 100% rename from src/pages/orderInfo/hooks/useOrderPostDataChange.ts rename to src/hooks/useOrderPostDataChange.ts diff --git a/src/pages/orderInfo/hooks/useOrderPostDataValidation.ts b/src/hooks/useOrderPostDataValidation.ts similarity index 100% rename from src/pages/orderInfo/hooks/useOrderPostDataValidation.ts rename to src/hooks/useOrderPostDataValidation.ts diff --git a/src/pages/Home/Home.style.ts b/src/pages/ExperienceHome/ExperienceHome.style.ts similarity index 95% rename from src/pages/Home/Home.style.ts rename to src/pages/ExperienceHome/ExperienceHome.style.ts index 62923f5..c3c7aec 100644 --- a/src/pages/Home/Home.style.ts +++ b/src/pages/ExperienceHome/ExperienceHome.style.ts @@ -4,6 +4,7 @@ import { flexGenerator } from "@styles/generator"; export const layoutStyle = css` ${flexGenerator("column")} padding: 10rem 2rem 3rem; + min-height: 100dvh; `; export const titleStyle = (theme: Theme) => css` diff --git a/src/pages/ExperienceHome/ExperienceHome.tsx b/src/pages/ExperienceHome/ExperienceHome.tsx new file mode 100644 index 0000000..9c68bf6 --- /dev/null +++ b/src/pages/ExperienceHome/ExperienceHome.tsx @@ -0,0 +1,46 @@ +import { IcMainCharacter } from "@svg"; +import { + chracterDivStyle, + layoutStyle, + titleStyle, +} from "./ExperienceHome.style"; +import { useLocation, useNavigate } from "react-router-dom"; +import { Button } from "@components"; +import { buttonSectionStyle } from "@pages/orderInfo/styles"; +import { useAtom } from "jotai"; +import { categoryAtom } from "@stores"; +import { useEffect } from "react"; + +const ExperienceHome = () => { + const navigate = useNavigate(); + const location = useLocation(); + + const [category, setCategory] = useAtom(categoryAtom); + + useEffect(() => { + const pathSegments = location.pathname.split("/"); + setCategory(pathSegments[1]); + }, [location.pathname, setCategory]); + const handleButtonClick = () => { + navigate(`/${category}/order-info/sender`); + }; + return ( +
+

+ 나무와 열매 체험 농장 +
+ 체험 과일 택배 접수 +

+
+ +
+
+ +
+
+ ); +}; + +export default ExperienceHome; diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx deleted file mode 100644 index 58e111a..0000000 --- a/src/pages/Home/Home.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { IcMainCharacter } from "@svg"; -import { chracterDivStyle, layoutStyle, titleStyle } from "./Home.style"; -import { useNavigate } from "react-router-dom"; -import { Button } from "@components"; - -const Home = () => { - const navigate = useNavigate(); - const handleButtonClick = () => { - navigate("/order-info/sender"); - }; - return ( -
-

- 나무와 열매 체험 농장 -
- 주문서 작성 -

-
- -
- -
- ); -}; - -export default Home; diff --git a/src/pages/ProductHome/ProductHome.style.ts b/src/pages/ProductHome/ProductHome.style.ts new file mode 100644 index 0000000..c3c7aec --- /dev/null +++ b/src/pages/ProductHome/ProductHome.style.ts @@ -0,0 +1,21 @@ +import { css, Theme } from "@emotion/react"; +import { flexGenerator } from "@styles/generator"; + +export const layoutStyle = css` + ${flexGenerator("column")} + padding: 10rem 2rem 3rem; + min-height: 100dvh; +`; + +export const titleStyle = (theme: Theme) => css` + width: 100%; + color: ${theme.color.black}; + ${theme.font["head01-b-24"]} +`; + +export const chracterDivStyle = css` + width: 30rem; + height: 30rem; + margin-top: 2.5rem; + margin-bottom: 10.6rem; +`; diff --git a/src/pages/ProductHome/ProductHome.tsx b/src/pages/ProductHome/ProductHome.tsx new file mode 100644 index 0000000..74966a4 --- /dev/null +++ b/src/pages/ProductHome/ProductHome.tsx @@ -0,0 +1,43 @@ +import { IcMainCharacter } from "@svg"; +import { chracterDivStyle, layoutStyle, titleStyle } from "./ProductHome.style"; +import { useLocation, useNavigate } from "react-router-dom"; +import { Button } from "@components"; +import { buttonSectionStyle } from "@pages/orderInfo/styles"; +import { useAtom } from "jotai"; +import { categoryAtom } from "@stores"; +import { useEffect } from "react"; + +const ProductHome = () => { + const navigate = useNavigate(); + const location = useLocation(); + + const [category, setCategory] = useAtom(categoryAtom); + + useEffect(() => { + const pathSegments = location.pathname.split("/"); + setCategory(pathSegments[1]); + }, [location.pathname, setCategory]); + + const handleButtonClick = () => { + navigate(`/${category}/order-info/sender`); + }; + return ( +
+

+ 나무와 열매 체험 농장 +
+ 상품 구매 주문서 작성 +

+
+ +
+
+ +
+
+ ); +}; + +export default ProductHome; diff --git a/src/pages/experienceOrderInfo/components/ExperienceOrderInfo/ExperienceOrderInfo.tsx b/src/pages/experienceOrderInfo/components/ExperienceOrderInfo/ExperienceOrderInfo.tsx new file mode 100644 index 0000000..f63ef40 --- /dev/null +++ b/src/pages/experienceOrderInfo/components/ExperienceOrderInfo/ExperienceOrderInfo.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import { + CheckInfo, + Complete, + Receiver1, + Receiver2, + SelectProduct, + Sender, +} from "@components"; +import { FunnelProps, StepProps } from "src/hooks/useFunnel"; + +export interface ExperienceOrderInfoPros { + steps: string[]; + nextClickHandler: (nextStep: string) => void; + Funnel: React.ComponentType; + Step: React.ComponentType; +} + +const ExperienceOrderInfo = ({ + steps, + nextClickHandler, + Funnel, + Step, +}: ExperienceOrderInfoPros) => { + return ( + + + nextClickHandler(steps[1])} /> + + + nextClickHandler(steps[2])} /> + + + nextClickHandler(steps[3])} /> + + + nextClickHandler(steps[4])} /> + + + nextClickHandler(steps[6])} /> + + + + + + ); +}; + +export default ExperienceOrderInfo; diff --git a/src/pages/experienceOrderInfo/page/ExperienceOrderInfoPage/ExperienceOrderInfoPage.tsx b/src/pages/experienceOrderInfo/page/ExperienceOrderInfoPage/ExperienceOrderInfoPage.tsx new file mode 100644 index 0000000..f066a3a --- /dev/null +++ b/src/pages/experienceOrderInfo/page/ExperienceOrderInfoPage/ExperienceOrderInfoPage.tsx @@ -0,0 +1,32 @@ +import { useFunnel } from "@hooks"; +import ExperienceOrderInfo from "@pages/experienceOrderInfo/components/ExperienceOrderInfo/ExperienceOrderInfo"; +import { useParams } from "react-router-dom"; + +const steps = [ + "sender", + "receiver1", + "receiver2", + "select-product", + "check-info", + "complete", +]; + +const ExperienceOrderInfoPage = () => { + const { step } = useParams<{ step: string }>(); + const { Funnel, Step, nextStep } = useFunnel( + step || steps[0], + "experience/order-info" + ); + return ( + <> + + + ); +}; + +export default ExperienceOrderInfoPage; diff --git a/src/pages/index.ts b/src/pages/index.ts index 066fab2..83b72c2 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -1,4 +1,5 @@ -import Home from "./Home/Home"; +import ProductHome from "./ProductHome/ProductHome"; +import ExperienceHome from "./ExperienceHome/ExperienceHome"; import Admin from "./Admin/page/AdminPage/AdminPage"; -export { Home, Admin }; +export { ProductHome, ExperienceHome, Admin }; diff --git a/src/pages/orderInfo/components/OrderInfo/OrderInfo.tsx b/src/pages/orderInfo/components/OrderInfo/OrderInfo.tsx index bed6599..ec46499 100644 --- a/src/pages/orderInfo/components/OrderInfo/OrderInfo.tsx +++ b/src/pages/orderInfo/components/OrderInfo/OrderInfo.tsx @@ -1,12 +1,14 @@ +import { + CheckInfo, + Complete, + Receiver1, + Receiver2, + SelectDeliveryDate, + SelectProduct, + Sender, +} from "@components"; import React from "react"; import { FunnelProps, StepProps } from "src/hooks/useFunnel"; -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"; export interface OrderInfoProps { steps: string[]; diff --git a/src/pages/orderInfo/page/OrderInfoPage/OrderInfoPage.tsx b/src/pages/orderInfo/page/OrderInfoPage/OrderInfoPage.tsx index 3ccff15..8c4d1cb 100644 --- a/src/pages/orderInfo/page/OrderInfoPage/OrderInfoPage.tsx +++ b/src/pages/orderInfo/page/OrderInfoPage/OrderInfoPage.tsx @@ -14,7 +14,10 @@ const steps = [ const OrderInfoPage = () => { const { step } = useParams<{ step: string }>(); - const { Funnel, Step, nextStep } = useFunnel(step || steps[0], "order-info"); + const { Funnel, Step, nextStep } = useFunnel( + step || steps[0], + "product/order-info" + ); return ( <> , + }, + { + path: routePath.EXPERIENCE_ORDER_INFO_EDIT, + element: , + }, +]; + +export default experienceOrderInfoRoutes; diff --git a/src/routes/homeRoutes.tsx b/src/routes/homeRoutes.tsx index c56312a..7e84b6b 100644 --- a/src/routes/homeRoutes.tsx +++ b/src/routes/homeRoutes.tsx @@ -1,11 +1,15 @@ import { routePath } from "@constants"; -import { Home } from "@pages/index"; +import { ExperienceHome, ProductHome } from "@pages/index"; import { RouteType } from "@types"; const homeRoutes: RouteType[] = [ { - path: routePath.HOME, - element: , + path: routePath.PRODUCT_HOME, + element: , + }, + { + path: routePath.EXPERIENCE_HOME, + element: , }, ]; diff --git a/src/routes/index.ts b/src/routes/index.ts index f10782b..874ac1a 100644 --- a/src/routes/index.ts +++ b/src/routes/index.ts @@ -1,5 +1,6 @@ import homeRoutes from "./homeRoutes"; import orderInfoRoutes from "./orderInfoRoutes"; +import experienceOrderInfoRoutes from "./experienceOrderInfoRoutes"; import adminRoutes from "./adminRoutes"; -export { homeRoutes, orderInfoRoutes, adminRoutes }; +export { homeRoutes, orderInfoRoutes, experienceOrderInfoRoutes, adminRoutes}; diff --git a/src/routes/orderInfoRoutes.tsx b/src/routes/orderInfoRoutes.tsx index 7c6f1f9..bbf6269 100644 --- a/src/routes/orderInfoRoutes.tsx +++ b/src/routes/orderInfoRoutes.tsx @@ -1,5 +1,5 @@ +import { Edit } from "@components"; import { routePath } from "@constants"; -import Edit from "@pages/orderInfo/components/steps/CheckInfo/Edit/Edit"; import OrderInfoPage from "@pages/orderInfo/page/OrderInfoPage/OrderInfoPage"; import { RouteType } from "@types"; diff --git a/src/stores/category.ts b/src/stores/category.ts new file mode 100644 index 0000000..9b374d5 --- /dev/null +++ b/src/stores/category.ts @@ -0,0 +1,3 @@ +import { atom } from "jotai"; + +export const categoryAtom = atom(""); diff --git a/src/stores/index.ts b/src/stores/index.ts index 338232e..28c93c7 100644 --- a/src/stores/index.ts +++ b/src/stores/index.ts @@ -1,5 +1,6 @@ import { orderPostAtom } from "./orderPostData"; import { currentRecipient } from "./currentRecipientIndex"; import { productListAtom } from "./productList"; +import { categoryAtom } from "./category"; -export { orderPostAtom, currentRecipient, productListAtom }; +export { orderPostAtom, currentRecipient, productListAtom, categoryAtom }; diff --git a/src/stores/productList.ts b/src/stores/productList.ts index 1f5024b..26e5837 100644 --- a/src/stores/productList.ts +++ b/src/stores/productList.ts @@ -8,4 +8,9 @@ export interface Product { export type ProductList = Product[]; -export const productListAtom = atom([]); +export interface ProductListResponse { + trialSailedProductList: ProductList; + sailedproductList: ProductList; +} + +export const productListAtom = atom(); diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000..3a48e56 --- /dev/null +++ b/vercel.json @@ -0,0 +1,3 @@ +{ + "rewrites": [{ "source": "/(.*)", "destination": "/" }] +}