[Fix/#46] 1차 QA 반영 (#47)

* fix: 전화번호 11자리만 되도록 수정 * feat: 수신자/송신자 같을때 input 비활성화 * fix: 필수약관 저장, 추가 주문 라우팅 수정 * fix: 상품선택 페이지 수정 * fix: 캘린더 스타일 및 disabled 수정 * refactor: 예외처리 및 console 삭제 * fix: QA 반영(라이팅, 계좌번호, 전화번호 키패드, 버튼 활성화 조건) * fix: QA 반영중 * fix: 주문 수정 및 추가 로직 예외처리 * fix: 체험상품 로직 수정
Roots-and-Fruits · Sep 26, 2024 · 855b340 · 855b340
1 parent 0c95786
commit 855b340
Show file tree

Hide file tree

Showing 33 changed files with 250 additions and 80 deletions.
diff --git a/public/svg/ic_minus.svg b/public/svg/ic_minus.svg
diff --git a/src/apis/domains/admin/useFetchDeliveryDate.ts b/src/apis/domains/admin/useFetchDeliveryDate.ts
@@ -6,10 +6,8 @@ import { ApiResponseType, ErrorResponse } from "@types";
 const getDeliveryDate = async (): Promise<number | null> => {
   try {
     const response = await get<ApiResponseType<number>>("api/v1/delivery/max");
-    console.log(response.data);
     return response.data.data;
   } catch (error) {
-    console.log(error);
     const errorResponse = error as ErrorResponse;
     const errorData = errorResponse.response.data;
     throw errorData;

diff --git a/src/apis/domains/admin/useFetchProductAll.ts b/src/apis/domains/admin/useFetchProductAll.ts
@@ -10,7 +10,7 @@ const getProductList = async (): Promise<ProductListWithSailed | null> => {
     );
     return response.data.data;
   } catch (error) {
-    console.log(error);
+    console.error(error);
     return null;
   }
 };

diff --git a/src/apis/domains/service/useFetchDeliveryDate.ts b/src/apis/domains/service/useFetchDeliveryDate.ts
@@ -8,7 +8,7 @@ const getDeliveryDate = async (): Promise<number | null> => {
     const response = await get<ApiResponseType<number>>("api/v1/delivery/max");
     return response.data.data;
   } catch (error) {
-    console.log(error);
+    console.error(error);
     return null;
   }
 };

diff --git a/src/apis/domains/service/useFetchProductList.ts b/src/apis/domains/service/useFetchProductList.ts
@@ -11,7 +11,7 @@ const getProductList = async (): Promise<ProductListResponse | null> => {
     );
     return response.data.data;
   } catch (error) {
-    console.log(error);
+    console.error(error);
     return null;
   }
 };

diff --git a/src/apis/domains/service/usePostOrder.ts b/src/apis/domains/service/usePostOrder.ts
@@ -12,10 +12,8 @@ const postOrder = async (
       "api/v1/order",
       orderPostState
     );
-    console.log(response.data);
     return response.data;
   } catch (error) {
-    console.log(error);
     const errorResponse = error as ErrorResponse;
     const errorData = errorResponse.response.data;
     throw errorData;

diff --git a/src/assets/svg/IcMinus.tsx b/src/assets/svg/IcMinus.tsx
@@ -6,8 +6,8 @@ const SvgIcMinus = (props: SVGProps<SVGSVGElement>) => (
     viewBox="0 0 36 37"
     {...props}
   >
-    <circle cx={18} cy={18.5} r={17.5} fill="#fff" stroke="#B6B6B6" />
-    <path fill="#B6B6B6" d="M23.25 19.249h-10.5v-1.5h10.5z" />
+    <circle cx={18} cy={18.5} r={17.5} fill="#fff" stroke="#000" />
+    <path fill="#000" d="M23.25 19.249h-10.5v-1.5h10.5z" />
   </svg>
 );
 export default SvgIcMinus;
diff --git a/src/components/common/ClipboardButton/ClipboardButton.tsx b/src/components/common/ClipboardButton/ClipboardButton.tsx
@@ -13,7 +13,7 @@ import useToast from "src/hooks/useToast";
 const ClipboardButton = () => {
   const { showToast, isToastVisible } = useToast();
   const [toastMessage, setToastMessage] = useState("");
-  const accountNumber = "1103234341312";
+  const accountNumber = "2180-2180-2180-9";
   const handleCopyClick = async () => {
     if (navigator.clipboard) {
       try {

diff --git a/src/components/common/CountProduct/CountProduct.style.ts b/src/components/common/CountProduct/CountProduct.style.ts
@@ -26,6 +26,15 @@ export const iconStyle = css`
   cursor: pointer;
 `;
 
+export const disabledStyle = (theme: Theme) => css`
+  & path {
+    fill: ${theme.color.lightgray2};
+  }
+  & circle {
+    stroke: ${theme.color.lightgray2};
+  }
+`;
+
 export const countStyle = (theme: Theme) => css`
   ${theme.font["head06-b-16"]};
   color: ${theme.color.black};

diff --git a/src/components/common/CountProduct/CountProduct.tsx b/src/components/common/CountProduct/CountProduct.tsx
@@ -2,6 +2,7 @@ import { IcMinus, IcPlus } from "@svg";
 import {
   countProductContainer,
   countStyle,
+  disabledStyle,
   iconStyle,
   productCountWrapper,
   productNameStyle,
@@ -30,7 +31,10 @@ const CountProduct = ({
     <article css={countProductContainer}>
       <span css={productNameStyle}>{productName}</span>
       <div css={productCountWrapper}>
-        <IcMinus css={iconStyle} onClick={handleDecrease} />
+        <IcMinus
+          css={[iconStyle, count === 0 && disabledStyle]}
+          onClick={handleDecrease}
+        />
         <span css={countStyle}>{count}</span>
         <IcPlus css={iconStyle} onClick={handleIncrease} />
       </div>

diff --git a/src/components/common/CustomCalendar/CustomCalendar.tsx b/src/components/common/CustomCalendar/CustomCalendar.tsx
@@ -14,6 +14,18 @@ const CustomCalendar = ({ onDateChange }: CustomCalendarProps) => {
 
   const { data: deliveryDate } = useFetchDeliveryDate();
 
+  const tileClassName = ({ date }: { date: Date }) => {
+    const day = date.getDay();
+
+    if (day === 6) return "saturday";
+
+    return "";
+  };
+
+  const disableSundays = ({ date }: { date: Date }) => {
+    return date.getDay() === 0;
+  };
+
   const formatDay = (_locale: string | undefined, date: Date): string =>
     date.getDate().toString();
 
@@ -48,6 +60,23 @@ const CustomCalendar = ({ onDateChange }: CustomCalendarProps) => {
   };
 
   const calendarStyles = {
+    "span, abbr, button": {
+      color: "#000",
+      fontWeight: "bold",
+    },
+    ".saturday abbr": {
+      color: "#4285F4",
+    },
+
+    ".sunday": {
+      color: "#EC6732",
+    },
+
+    "button:disabled abbr": {
+      color: "#d4d4d4",
+      cursor: "not-allowed",
+    },
+
     ".react-calendar": {
       width: "100%",
       border: "1px solid #000",
@@ -106,6 +135,8 @@ const CustomCalendar = ({ onDateChange }: CustomCalendarProps) => {
         locale="ko-KR"
         minDate={today.add(3, "day").toDate()}
         maxDate={today.add(deliveryDate ?? 14, "day").toDate()}
+        tileClassName={tileClassName}
+        tileDisabled={disableSundays}
       />
     </div>
   );

diff --git a/src/components/common/Input/Input.style.ts b/src/components/common/Input/Input.style.ts
@@ -19,6 +19,7 @@ export const inputStyle = (theme: Theme) => css`
   border: 1px solid ${theme.color.lightgray1};
   border-radius: 10px;
   background-color: ${theme.color.white};
+  ${theme.font["subhead-n-16"]}
 
   &::placeholder {
     color: ${theme.color.midgray1};
@@ -28,4 +29,9 @@ export const inputStyle = (theme: Theme) => css`
     outline: none;
     border: 1px solid ${theme.color.orange};
   }
+
+  &:disabled {
+    background-color: ${theme.color.background};
+    color: ${theme.color.midgray1};
+  }
 `;
diff --git a/src/components/common/Input/Input.tsx b/src/components/common/Input/Input.tsx
@@ -8,6 +8,7 @@ export interface InputProps extends HTMLAttributes<HTMLInputElement> {
   name?: string;
   type: string;
   inputLabel?: string;
+  disabled?: boolean;
 }
 
 const Input = ({
@@ -17,6 +18,7 @@ const Input = ({
   name,
   type,
   inputLabel,
+  disabled,
 }: InputProps) => {
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (onChange) {
@@ -34,6 +36,7 @@ const Input = ({
         value={value}
         placeholder={placeholder}
         onChange={handleInputChange}
+        disabled={disabled}
       />
     </div>
   );

diff --git a/src/components/common/RadioInput/RadioInput.style.ts b/src/components/common/RadioInput/RadioInput.style.ts
@@ -20,6 +20,7 @@ export const radioLabelStyle = (theme: Theme) => css`
     width: 1.6rem;
     height: 1.6rem;
     cursor: pointer;
+    margin: 0 0.4rem 0 0;
   }
 
   input[type="radio"]:checked {

diff --git a/src/components/common/steps/CheckInfo/CheckInfo.style.ts b/src/components/common/steps/CheckInfo/CheckInfo.style.ts
@@ -37,7 +37,6 @@ export const senderSectionLeft = (theme: Theme) => css`
 `;
 
 export const senderSectionRight = css`
-  width: 8.2rem;
   height: 3rem;
 `;
 

diff --git a/src/components/common/steps/CheckInfo/CheckInfo.tsx b/src/components/common/steps/CheckInfo/CheckInfo.tsx
@@ -39,7 +39,7 @@ const CheckInfo = ({ onNext }: StepProps) => {
   const handleAddReceiverClick = () => {
     handleAddReceiver();
     handleSetIndex();
-    navigate("/order-info/receiver1");
+    navigate(`/${category}/order-info/receiver1`);
   };
   const handleNextClick = () => {
     mutateAsync(orderPostDataState)
@@ -50,7 +50,6 @@ const CheckInfo = ({ onNext }: StepProps) => {
         alert(error.message);
       });
   };
-  console.log(orderPostDataState);
   return (
     <>
       <Header text="입력 정보 확인" />
@@ -109,10 +108,16 @@ const CheckInfo = ({ onNext }: StepProps) => {
                       ))}
                   </div>
                 </div>
-                <div>
-                  <span>희망 배송일자</span>
-                  <span>{receiver.deliveryDate}</span>
-                </div>
+                {category === "product" && (
+                  <div>
+                    <span>희망 배송일자</span>
+                    <span>
+                      {receiver.selectedOption === "regular"
+                        ? "일반 배송"
+                        : receiver.deliveryDate}
+                    </span>
+                  </div>
+                )}
               </div>
             </article>
           ))}

diff --git a/src/components/common/steps/CheckInfo/Edit/EditReceiver/EditReceiver.tsx b/src/components/common/steps/CheckInfo/Edit/EditReceiver/EditReceiver.tsx
@@ -25,6 +25,7 @@ import { useNavigate } from "react-router-dom";
 import { useOrderPostDataChange } from "src/hooks/useOrderPostDataChange";
 import { useAtom } from "jotai";
 import { categoryAtom } from "@stores";
+import { getTwoDaysLaterDate } from "@utils";
 
 const scriptUrl =
   "https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js";
@@ -43,6 +44,7 @@ interface EditReceiverProps {
 const EditReceiver = ({ receiverIndex }: EditReceiverProps) => {
   const { orderPostDataState, handleRecipientInputChange } =
     useOrderPostDataChange();
+
   const receiver = orderPostDataState.recipientInfo[receiverIndex];
   const navigate = useNavigate();
   const [category] = useAtom(categoryAtom);
@@ -52,8 +54,8 @@ const EditReceiver = ({ receiverIndex }: EditReceiverProps) => {
     addressDetail: receiver?.recipientAddressDetail || "",
     zonecode: receiver?.recipientPostCode || "",
   });
-  const [selectedOption, setSelectedOption] = useState("regular");
-  const [selectedDate, setSelectedDate] = useState("");
+  const selectedOption = receiver.selectedOption;
+  const selectedDate = receiver.deliveryDate;
 
   const open = useDaumPostcodePopup(scriptUrl);
 
@@ -133,11 +135,24 @@ const EditReceiver = ({ receiverIndex }: EditReceiverProps) => {
       receiverIndex
     );
   };
+
   const handleOptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSelectedOption(e.target.value);
+    handleRecipientInputChange(e, "selectedOption", receiverIndex);
+
+    if (e.target.value === "regular") {
+      handleRecipientInputChange(
+        getTwoDaysLaterDate(),
+        "deliveryDate",
+        receiverIndex
+      );
+    } else {
+      handleRecipientInputChange("", "deliveryDate", receiverIndex);
+    }
   };
+
   const handleDateChange = (date: string) => {
-    setSelectedDate(date);
+    handleRecipientInputChange(date, "deliveryDate", receiverIndex);
+    return;
   };
   return (
     <div css={editReceiverLayout}>
@@ -209,28 +224,30 @@ const EditReceiver = ({ receiverIndex }: EditReceiverProps) => {
             ))}
           </div>
         </div>
-        <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="예약 배송"
-            />
+        {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>
-          {selectedOption === "scheduled" && (
-            <CustomCalendar onDateChange={handleDateChange} />
-          )}
-        </div>
+        )}
       </section>
       <footer css={buttonSectionStyle}>
         <Button variant="fill" onClick={handleButtonClick}>
-Original file line number
+Diff line change
@@ Expand Up / @@ -37,7 +37,6 @@ export const senderSectionLeft = (theme: Theme) => css` @@
     `;
     export const senderSectionRight = css`
-      width: 8.2rem;
       height: 3rem;
     `;
@@ Expand Down @@