From 2e2f0b3dfe1a4001814e5befb8343f55b10373da Mon Sep 17 00:00:00 2001 From: TaeSeung Yoo <59465914+gudusol@users.noreply.github.com> Date: Wed, 13 Nov 2024 18:08:57 +0900 Subject: [PATCH] =?UTF-8?q?[Fix/#67]=20QA=20=EB=B0=98=EC=98=81=20(#68)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: jotai storage 1차 수정 * fix: 새로고침 막기, 페이지 경계선 삭제, 주문확인 스타일 수정 * design: 태블릿 주문조 조회 페이지 스타일 수정 --- .../common/steps/CheckInfo/CheckInfo.style.ts | 1 + .../common/steps/CheckInfo/CheckInfo.tsx | 34 ++-- .../Edit/EditReceiver/EditReceiver.style.ts | 2 +- .../Edit/EditReceiver/EditReceiver.tsx | 171 +++++++++--------- .../Edit/EditSender/EditSender.style.ts | 2 +- .../CheckInfo/Edit/EditSender/EditSender.tsx | 38 ++-- .../common/steps/Receiver2/Receiver2.tsx | 18 +- .../SelectDeliveryDate/SelectDeliveryDate.tsx | 4 +- .../steps/SelectProduct/SelectProduct.tsx | 4 +- src/pages/ExperienceHome/ExperienceHome.tsx | 13 +- src/pages/ProductHome/ProductHome.tsx | 13 +- .../OrderInfoSection.style.ts | 6 +- .../RecentOrderCard/RecentOrderCard.style.ts | 4 + src/stores/category.ts | 4 +- src/stores/currentRecipientIndex.ts | 4 +- src/stores/orderNumber.ts | 4 +- src/stores/orderPostData.ts | 19 +- src/stores/productList.ts | 10 +- src/styles/global.ts | 2 +- 19 files changed, 188 insertions(+), 165 deletions(-) diff --git a/src/components/common/steps/CheckInfo/CheckInfo.style.ts b/src/components/common/steps/CheckInfo/CheckInfo.style.ts index dd8fbfc..b9f9863 100644 --- a/src/components/common/steps/CheckInfo/CheckInfo.style.ts +++ b/src/components/common/steps/CheckInfo/CheckInfo.style.ts @@ -77,6 +77,7 @@ export const infoContainer = (theme: Theme) => css` gap: 0.4rem; span { ${theme.font["subhead-n-16"]}; + display: block; } `; diff --git a/src/components/common/steps/CheckInfo/CheckInfo.tsx b/src/components/common/steps/CheckInfo/CheckInfo.tsx index f5ad40d..1385dcf 100644 --- a/src/components/common/steps/CheckInfo/CheckInfo.tsx +++ b/src/components/common/steps/CheckInfo/CheckInfo.tsx @@ -35,7 +35,7 @@ const CheckInfo = ({ onNext }: StepProps) => { resetOrderPostData, } = useOrderPostDataChange(); const { mutateAsync } = usePostOrder(); - const receivers = orderPostDataState.recipientInfo; + const receivers = orderPostDataState.recipientInfo ?? []; const navigate = useNavigate(); const [category] = useAtom(categoryAtom); const [isModalOpen, setIsModalOpen] = useState(false); @@ -62,25 +62,19 @@ const CheckInfo = ({ onNext }: StepProps) => { }; const handleOrderClick = () => { - if ( - orderCount > 0 && - confirm( - `현재 ${orderCount}건의 주문을 진행 중입니다. 추가 주문 없이 이대로 주문을 완료하시겠습니까?` - ) - ) { - mutateAsync(orderPostDataState) - .then((data) => { - setOrderNumberState(data); - onNext(); - resetOrderPostData(); - }) - .catch(() => { - alert( - `필수 입력칸을 작성하지 않으셨습니다. \n혹은 이미 주문을 완료하지 않으셨나요?` - ); - navigate(`/${category}`); - }); - } + mutateAsync(orderPostDataState) + .then((data) => { + setOrderNumberState(data); + resetOrderPostData(); + localStorage.clear(); + onNext(); + }) + .catch(() => { + alert( + `필수 입력칸을 작성하지 않으셨습니다. \n혹은 이미 주문을 완료하지 않으셨나요?` + ); + navigate(`/${category}`); + }); }; const handleNextClick = () => { diff --git a/src/components/common/steps/CheckInfo/Edit/EditReceiver/EditReceiver.style.ts b/src/components/common/steps/CheckInfo/Edit/EditReceiver/EditReceiver.style.ts index 2387071..1d4759a 100644 --- a/src/components/common/steps/CheckInfo/Edit/EditReceiver/EditReceiver.style.ts +++ b/src/components/common/steps/CheckInfo/Edit/EditReceiver/EditReceiver.style.ts @@ -3,7 +3,7 @@ import { flexGenerator } from "@styles/generator"; export const editReceiverLayout = 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/EditReceiver/EditReceiver.tsx b/src/components/common/steps/CheckInfo/Edit/EditReceiver/EditReceiver.tsx index e687c05..2885344 100644 --- a/src/components/common/steps/CheckInfo/Edit/EditReceiver/EditReceiver.tsx +++ b/src/components/common/steps/CheckInfo/Edit/EditReceiver/EditReceiver.tsx @@ -45,7 +45,7 @@ const EditReceiver = ({ receiverIndex }: EditReceiverProps) => { const { orderPostDataState, handleRecipientInputChange } = useOrderPostDataChange(); - const receiver = orderPostDataState.recipientInfo[receiverIndex]; + const receiver = orderPostDataState.recipientInfo[receiverIndex] ?? {}; const navigate = useNavigate(); const [category] = useAtom(categoryAtom); @@ -155,106 +155,109 @@ const EditReceiver = ({ receiverIndex }: EditReceiverProps) => { return; }; return ( -
- 받는 분 -
- - handleRecipientInputChange(e, "recipientName", receiverIndex) - } - type="text" - placeholder="이름을 입력하세요" - inputLabel="이름" - /> - - handleRecipientInputChange(e, "recipientPhone", receiverIndex) - } - type="text" - placeholder="휴대폰 번호를 입력하세요" - inputLabel="휴대폰 번호" - /> -
-
- - -
+ <> +
+ 받는 분 +
+ handleRecipientInputChange(e, "recipientName", receiverIndex) + } type="text" - placeholder="건물, 지번 또는 도로명 검색" - inputLabel="주소" - aria-readonly + placeholder="이름을 입력하세요" + inputLabel="이름" /> - setForm({ ...form, addressDetail: e.target.value }) + handleRecipientInputChange(e, "recipientPhone", receiverIndex) } - name="addressDetail" type="text" - placeholder="상세주소 (예시: 101동 1201호 / 단독주택)" + placeholder="휴대폰 번호를 입력하세요" + inputLabel="휴대폰 번호" /> -
-
- 선택 상품 -
- {receiver.productInfo.map((product, i) => ( - handleCountChange(i, newCount)} +
+
+ - ))} + +
+ + + setForm({ ...form, addressDetail: e.target.value }) + } + name="addressDetail" + type="text" + placeholder="상세주소 (예시: 101동 1201호 / 단독주택)" + />
-
- {category === "product" && ( -
- 배송 날짜 -
- - +
+ 선택 상품 +
+ {(receiver.productInfo ?? []).map((product, i) => ( + handleCountChange(i, newCount)} + /> + ))}
- {selectedOption === "scheduled" && ( - - )}
- )} -
+ {category === "product" && ( +
+ 배송 날짜 +
+ + +
+ {selectedOption === "scheduled" && ( + + )} +
+ )} + +
- + ); }; 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 ( -
-
- 보내는 분 - handleInputChange(e, "senderName")} - type="name" - placeholder="이름을 입력하세요" - inputLabel="이름" - /> - handleInputChange(e, "senderPhone")} - type="text" - placeholder="휴대폰 번호를 입력하세요" - inputLabel="휴대폰 번호" - /> + <> +
+
+ 보내는 분 + handleInputChange(e, "senderName")} + type="name" + placeholder="이름을 입력하세요" + inputLabel="이름" + /> + handleInputChange(e, "senderPhone")} + type="text" + placeholder="휴대폰 번호를 입력하세요" + inputLabel="휴대폰 번호" + /> +
-
+ ); }; 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); } }