+ >
);
};
diff --git a/src/components/common/steps/CheckInfo/Edit/EditSender/EditSender.style.ts b/src/components/common/steps/CheckInfo/Edit/EditSender/EditSender.style.ts
index 066d0f9..9f668be 100644
--- a/src/components/common/steps/CheckInfo/Edit/EditSender/EditSender.style.ts
+++ b/src/components/common/steps/CheckInfo/Edit/EditSender/EditSender.style.ts
@@ -3,7 +3,7 @@ import { flexGenerator } from "@styles/generator";
export const editSenderLayout = css`
${flexGenerator("column", "start", "start")};
- padding: 8.6rem 2rem 3rem;
+ padding: 8.6rem 2rem 8rem;
width: 100%;
min-height: 100dvh;
`;
diff --git a/src/components/common/steps/CheckInfo/Edit/EditSender/EditSender.tsx b/src/components/common/steps/CheckInfo/Edit/EditSender/EditSender.tsx
index 1ad3f6f..a6f84c2 100644
--- a/src/components/common/steps/CheckInfo/Edit/EditSender/EditSender.tsx
+++ b/src/components/common/steps/CheckInfo/Edit/EditSender/EditSender.tsx
@@ -19,30 +19,32 @@ const EditSender = () => {
navigate(`/${category}/order-info/check-info`);
};
return (
-
-
+ >
);
};
diff --git a/src/components/common/steps/Receiver2/Receiver2.tsx b/src/components/common/steps/Receiver2/Receiver2.tsx
index ffb8977..4e926cc 100644
--- a/src/components/common/steps/Receiver2/Receiver2.tsx
+++ b/src/components/common/steps/Receiver2/Receiver2.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
import { Button, Header, Input, ProgressBar } from "@components";
import {
buttonSectionStyle,
@@ -32,9 +32,9 @@ const Receiver2 = ({ onNext }: StepProps) => {
const receiver = orderPostDataState.recipientInfo[currentRecipientIndex];
const [form, setForm] = useState({
- address: receiver?.recipientAddress || "",
- addressDetail: receiver?.recipientAddressDetail || "",
- zonecode: receiver?.recipientPostCode || "",
+ address: "",
+ addressDetail: "",
+ zonecode: "",
});
const open = useDaumPostcodePopup(scriptUrl);
@@ -95,6 +95,16 @@ const Receiver2 = ({ onNext }: StepProps) => {
open({ onComplete: handleComplete });
};
+ useEffect(() => {
+ if (receiver) {
+ setForm({
+ address: receiver.recipientAddress || "",
+ addressDetail: receiver.recipientAddressDetail || "",
+ zonecode: receiver.recipientPostCode || "",
+ });
+ }
+ }, [receiver]);
+
return (
<>
diff --git a/src/components/common/steps/SelectDeliveryDate/SelectDeliveryDate.tsx b/src/components/common/steps/SelectDeliveryDate/SelectDeliveryDate.tsx
index ceb016d..6d40df2 100644
--- a/src/components/common/steps/SelectDeliveryDate/SelectDeliveryDate.tsx
+++ b/src/components/common/steps/SelectDeliveryDate/SelectDeliveryDate.tsx
@@ -33,8 +33,8 @@ const SelectDeliveryDate = ({ onNext }: StepProps) => {
} = useOrderPostDataChange();
const selectedOption =
- orderPostDataState.recipientInfo[currentRecipientIndex].selectedOption ??
- "regular";
+ (orderPostDataState.recipientInfo[currentRecipientIndex] ?? {})
+ .selectedOption ?? "regular";
const [selectedDate, setSelectedDate] = useState(getTwoDaysLaterDate());
const handleOptionChange = (e: React.ChangeEvent
) => {
diff --git a/src/components/common/steps/SelectProduct/SelectProduct.tsx b/src/components/common/steps/SelectProduct/SelectProduct.tsx
index fcfdf50..1d65a5c 100644
--- a/src/components/common/steps/SelectProduct/SelectProduct.tsx
+++ b/src/components/common/steps/SelectProduct/SelectProduct.tsx
@@ -32,6 +32,8 @@ const SelectProduct = ({ onNext }: StepProps) => {
);
const calculateTotalPrice = (products: ProductList, order: RecipientInfo) => {
+ console.log("RecipientInfo", order);
+
return (order.productInfo || []).reduce((total, orderProduct) => {
const product = products.find(
(p) => p.productId === orderProduct.productId
@@ -47,7 +49,7 @@ const SelectProduct = ({ onNext }: StepProps) => {
const totalPrice = calculateTotalPrice(
displayedProductList,
- orderPostDataState.recipientInfo[currentRecipientIndex]
+ orderPostDataState.recipientInfo[currentRecipientIndex] ?? {}
);
useEffect(() => {
diff --git a/src/pages/ExperienceHome/ExperienceHome.tsx b/src/pages/ExperienceHome/ExperienceHome.tsx
index 136ffb5..de30bc6 100644
--- a/src/pages/ExperienceHome/ExperienceHome.tsx
+++ b/src/pages/ExperienceHome/ExperienceHome.tsx
@@ -9,21 +9,20 @@ 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);
+ const [, setCategory] = useAtom(categoryAtom);
- useEffect(() => {
- const pathSegments = location.pathname.split("/");
- setCategory(pathSegments[1]);
- }, [location.pathname, setCategory]);
const handleButtonClick = () => {
- navigate(`/${category}/order-info/sender`);
+ const categoryName = location.pathname.split("/")[1];
+ localStorage.clear();
+ setCategory(categoryName);
+ navigate(`/${categoryName}/order-info/sender`);
};
+
return (
diff --git a/src/pages/ProductHome/ProductHome.tsx b/src/pages/ProductHome/ProductHome.tsx
index 357e709..ac408c2 100644
--- a/src/pages/ProductHome/ProductHome.tsx
+++ b/src/pages/ProductHome/ProductHome.tsx
@@ -5,21 +5,18 @@ 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 [, setCategory] = useAtom(categoryAtom);
const handleButtonClick = () => {
- navigate(`/${category}/order-info/sender`);
+ const categoryName = location.pathname.split("/")[1];
+ localStorage.clear();
+ setCategory(categoryName);
+ navigate(`/${categoryName}/order-info/sender`);
};
return (
diff --git a/src/pages/orderCheck/components/OrderInfoSection/OrderInfoSection.style.ts b/src/pages/orderCheck/components/OrderInfoSection/OrderInfoSection.style.ts
index 1d36685..aa85a78 100644
--- a/src/pages/orderCheck/components/OrderInfoSection/OrderInfoSection.style.ts
+++ b/src/pages/orderCheck/components/OrderInfoSection/OrderInfoSection.style.ts
@@ -9,7 +9,7 @@ export const section3Container = (theme: Theme) => css`
`;
export const section3InfoWrapper = css`
${flexGenerator("column", "start", "start")};
- gap: 2rem;
+ gap: 1rem;
`;
export const section3Div = css`
@@ -22,7 +22,7 @@ export const graySpan = (theme: Theme) => css`
`;
export const blackSpan = (theme: Theme) => css`
color: ${theme.color.black};
- ${theme.font["orderCheck-36"]}
+ ${theme.font["orderCheck-32"]}
`;
export const statusStyle = (statusStyle: string) => (theme: Theme) =>
@@ -31,6 +31,8 @@ export const statusStyle = (statusStyle: string) => (theme: Theme) =>
? theme.color.green
: statusStyle === "결제취소"
? theme.color.red
+ : statusStyle === "발송완료"
+ ? theme.color.darkgray
: theme.color.orange};
`;
diff --git a/src/pages/orderCheck/components/RecentOrderCard/RecentOrderCard.style.ts b/src/pages/orderCheck/components/RecentOrderCard/RecentOrderCard.style.ts
index 5808a21..44e3c36 100644
--- a/src/pages/orderCheck/components/RecentOrderCard/RecentOrderCard.style.ts
+++ b/src/pages/orderCheck/components/RecentOrderCard/RecentOrderCard.style.ts
@@ -12,6 +12,8 @@ export const cardWrapper = (deliveryStatus: string) => (theme: Theme) =>
? theme.color.lightgreen
: deliveryStatus === "결제취소"
? theme.color.red2
+ : deliveryStatus === "발송완료"
+ ? theme.color.lightgray1
: theme.color.lightorange};
`;
@@ -21,6 +23,8 @@ export const numberStyle = (deliveryStatus: string) => (theme: Theme) =>
? theme.color.green
: deliveryStatus === "결제취소"
? theme.color.red
+ : deliveryStatus === "발송완료"
+ ? theme.color.darkgray
: theme.color.orange};
${theme.font["orderCheck-32"]}
`;
diff --git a/src/stores/category.ts b/src/stores/category.ts
index 9b374d5..23a1fe9 100644
--- a/src/stores/category.ts
+++ b/src/stores/category.ts
@@ -1,3 +1,3 @@
-import { atom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
-export const categoryAtom = atom
("");
+export const categoryAtom = atomWithStorage("categoryAtom", "");
diff --git a/src/stores/currentRecipientIndex.ts b/src/stores/currentRecipientIndex.ts
index 757c375..a15376e 100644
--- a/src/stores/currentRecipientIndex.ts
+++ b/src/stores/currentRecipientIndex.ts
@@ -1,3 +1,3 @@
-import { atom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
-export const currentRecipient = atom(0);
+export const currentRecipient = atomWithStorage("currentRecipient", 0);
diff --git a/src/stores/orderNumber.ts b/src/stores/orderNumber.ts
index 31e04c2..14c2ef8 100644
--- a/src/stores/orderNumber.ts
+++ b/src/stores/orderNumber.ts
@@ -1,3 +1,3 @@
-import { atom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
-export const orderNumber = atom(0);
+export const orderNumber = atomWithStorage("orderNumber", 0);
diff --git a/src/stores/orderPostData.ts b/src/stores/orderPostData.ts
index 31c030f..13c5a4c 100644
--- a/src/stores/orderPostData.ts
+++ b/src/stores/orderPostData.ts
@@ -1,4 +1,4 @@
-import { atom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
export interface ProductInfo {
productId: number;
@@ -24,10 +24,13 @@ export interface OrderPostDataType {
recipientInfo: RecipientInfo[];
}
-export const orderPostAtom = atom({
- senderName: "",
- senderPhone: "",
- isPersonalInfoConsent: false,
- isMarketingConsent: false,
- recipientInfo: [],
-});
+export const orderPostAtom = atomWithStorage(
+ "orderPostAtom",
+ {
+ senderName: "",
+ senderPhone: "",
+ isPersonalInfoConsent: false,
+ isMarketingConsent: false,
+ recipientInfo: [],
+ }
+);
diff --git a/src/stores/productList.ts b/src/stores/productList.ts
index 26e5837..59865ae 100644
--- a/src/stores/productList.ts
+++ b/src/stores/productList.ts
@@ -1,4 +1,4 @@
-import { atom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
export interface Product {
productId: number;
@@ -13,4 +13,10 @@ export interface ProductListResponse {
sailedproductList: ProductList;
}
-export const productListAtom = atom();
+export const productListAtom = atomWithStorage(
+ "productListAtom",
+ {
+ trialSailedProductList: [],
+ sailedproductList: [],
+ }
+);
diff --git a/src/styles/global.ts b/src/styles/global.ts
index 15561e0..d6bf1bf 100644
--- a/src/styles/global.ts
+++ b/src/styles/global.ts
@@ -19,6 +19,7 @@ const GlobalStyle = css`
html,
body {
+ overscroll-behavior: none;
font-size: 62.5%;
scrollbar-width: none;
margin: 0;
@@ -50,7 +51,6 @@ const GlobalStyle = css`
@media (min-width: 430px) {
#root {
max-width: var(--max-width);
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}
}