[Fix/#67] QA 반영 (#68)

* fix: jotai storage 1차 수정 * fix: 새로고침 막기, 페이지 경계선 삭제, 주문확인 스타일 수정 * design: 태블릿 주문조 조회 페이지 스타일 수정
Roots-and-Fruits · Nov 13, 2024 · 2e2f0b3 · 2e2f0b3
1 parent fe995ac
commit 2e2f0b3
Show file tree

Hide file tree

Showing 19 changed files with 188 additions and 165 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 (
-    <div css={editReceiverLayout}>
-      <span css={receiverSpan}>받는 분</span>
-      <section css={mainSectionStyle}>
-        <Input
-          value={
-            orderPostDataState.recipientInfo[receiverIndex]?.recipientName || ""
-          }
-          onChange={(e) =>
-            handleRecipientInputChange(e, "recipientName", receiverIndex)
-          }
-          type="text"
-          placeholder="이름을 입력하세요"
-          inputLabel="이름"
-        />
-        <Input
-          value={
-            orderPostDataState.recipientInfo[receiverIndex]?.recipientPhone ||
-            ""
-          }
-          onChange={(e) =>
-            handleRecipientInputChange(e, "recipientPhone", receiverIndex)
-          }
-          type="text"
-          placeholder="휴대폰 번호를 입력하세요"
-          inputLabel="휴대폰 번호"
-        />
-        <div css={addressFormWrapper}>
-          <div css={zonecodeWrapper}>
-            <Input
-              value={form.zonecode}
-              type="text"
-              placeholder="우편번호"
-              inputLabel="우편번호"
-              aria-readonly
-            />
-            <Button variant="fill" onClick={handleClick}>
-              주소 검색
-            </Button>
-          </div>
+    <>
+      <div css={editReceiverLayout}>
+        <span css={receiverSpan}>받는 분</span>
+        <section css={mainSectionStyle}>
           <Input
-            value={form.address}
+            value={
+              orderPostDataState.recipientInfo[receiverIndex]?.recipientName ||
+              ""
+            }
+            onChange={(e) =>
+              handleRecipientInputChange(e, "recipientName", receiverIndex)
+            }
             type="text"
-            placeholder="건물, 지번 또는 도로명 검색"
-            inputLabel="주소"
-            aria-readonly
+            placeholder="이름을 입력하세요"
+            inputLabel="이름"
           />
           <Input
-            value={form.addressDetail}
+            value={
+              orderPostDataState.recipientInfo[receiverIndex]?.recipientPhone ||
+              ""
+            }
             onChange={(e) =>
-              setForm({ ...form, addressDetail: e.target.value })
+              handleRecipientInputChange(e, "recipientPhone", receiverIndex)
             }
-            name="addressDetail"
             type="text"
-            placeholder="상세주소 (예시: 101동 1201호 / 단독주택)"
+            placeholder="휴대폰 번호를 입력하세요"
+            inputLabel="휴대폰 번호"
           />
-        </div>
-        <div css={selectProductContainer}>
-          <span css={subTitleSpan}>선택 상품</span>
-          <div css={selectProductWrapper}>
-            {receiver.productInfo.map((product, i) => (
-              <CountProduct
-                key={i}
-                productName={product.productName}
-                count={product.productCount}
-                onCountChange={(newCount) => handleCountChange(i, newCount)}
+          <div css={addressFormWrapper}>
+            <div css={zonecodeWrapper}>
+              <Input
+                value={form.zonecode}
+                type="text"
+                placeholder="우편번호"
+                inputLabel="우편번호"
+                aria-readonly
               />
-            ))}
+              <Button variant="fill" onClick={handleClick}>
+                주소 검색
+              </Button>
+            </div>
+            <Input
+              value={form.address}
+              type="text"
+              placeholder="건물, 지번 또는 도로명 검색"
+              inputLabel="주소"
+              aria-readonly
+            />
+            <Input
+              value={form.addressDetail}
+              onChange={(e) =>
+                setForm({ ...form, addressDetail: e.target.value })
+              }
+              name="addressDetail"
+              type="text"
+              placeholder="상세주소 (예시: 101동 1201호 / 단독주택)"
+            />
           </div>
-        </div>
-        {category === "product" && (
-          <div css={deliveryDateContainer}>
-            <span css={subTitle2Span}>배송 날짜</span>
-            <div css={radioWrapper}>
-              <RadioInput
-                name="delivery"
-                value="regular"
-                checked={selectedOption === "regular"}
-                onChange={handleOptionChange}
-                label="일반 배송"
-              />
-              <RadioInput
-                name="delivery"
-                value="scheduled"
-                checked={selectedOption === "scheduled"}
-                onChange={handleOptionChange}
-                label="예약 배송"
-              />
+          <div css={selectProductContainer}>
+            <span css={subTitleSpan}>선택 상품</span>
+            <div css={selectProductWrapper}>
+              {(receiver.productInfo ?? []).map((product, i) => (
+                <CountProduct
+                  key={i}
+                  productName={product.productName}
+                  count={product.productCount}
+                  onCountChange={(newCount) => handleCountChange(i, newCount)}
+                />
+              ))}
             </div>
-            {selectedOption === "scheduled" && (
-              <CustomCalendar onDateChange={handleDateChange} />
-            )}
           </div>
-        )}
-      </section>
+          {category === "product" && (
+            <div css={deliveryDateContainer}>
+              <span css={subTitle2Span}>배송 날짜</span>
+              <div css={radioWrapper}>
+                <RadioInput
+                  name="delivery"
+                  value="regular"
+                  checked={selectedOption === "regular"}
+                  onChange={handleOptionChange}
+                  label="일반 배송"
+                />
+                <RadioInput
+                  name="delivery"
+                  value="scheduled"
+                  checked={selectedOption === "scheduled"}
+                  onChange={handleOptionChange}
+                  label="예약 배송"
+                />
+              </div>
+              {selectedOption === "scheduled" && (
+                <CustomCalendar onDateChange={handleDateChange} />
+              )}
+            </div>
+          )}
+        </section>
+      </div>
       <footer css={buttonSectionStyle}>
         <Button variant="fill" onClick={handleButtonClick}>
           수정 완료
         </Button>
       </footer>
-    </div>
+    </>
   );
 };
 

diff --git 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
@@ -19,30 +19,32 @@ const EditSender = () => {
     navigate(`/${category}/order-info/check-info`);
   };
   return (
-    <div css={editSenderLayout}>
-      <div css={spanAndInputWrapper}>
-        <span css={spanStyle}>보내는 분</span>
-        <Input
-          value={orderPostDataState.senderName}
-          onChange={(e) => handleInputChange(e, "senderName")}
-          type="name"
-          placeholder="이름을 입력하세요"
-          inputLabel="이름"
-        />
-        <Input
-          value={orderPostDataState.senderPhone}
-          onChange={(e) => handleInputChange(e, "senderPhone")}
-          type="text"
-          placeholder="휴대폰 번호를 입력하세요"
-          inputLabel="휴대폰 번호"
-        />
+    <>
+      <div css={editSenderLayout}>
+        <div css={spanAndInputWrapper}>
+          <span css={spanStyle}>보내는 분</span>
+          <Input
+            value={orderPostDataState.senderName}
+            onChange={(e) => handleInputChange(e, "senderName")}
+            type="name"
+            placeholder="이름을 입력하세요"
+            inputLabel="이름"
+          />
+          <Input
+            value={orderPostDataState.senderPhone}
+            onChange={(e) => handleInputChange(e, "senderPhone")}
+            type="text"
+            placeholder="휴대폰 번호를 입력하세요"
+            inputLabel="휴대폰 번호"
+          />
+        </div>
       </div>
       <footer css={buttonSectionStyle}>
         <Button variant="fill" onClick={handleButtonClick}>
           수정 완료
         </Button>
       </footer>
-    </div>
+    </>
   );
 };
 

diff --git 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 (
     <>
       <Header text="받는 분 정보 입력" />

diff --git 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<HTMLInputElement>) => {

diff --git 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(() => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -77,6 +77,7 @@ export const infoContainer = (theme: Theme) => css` @@
       gap: 0.4rem;
       span {
         ${theme.font["subhead-n-16"]};
+        display: block;
       }
     `;
@@ Expand Down @@