[Feat/#39] 상품 선택 페이지 구현 및 최종 post 요청 성공 (#40)

* fix: 사소한 에러 수정 * feat: 상품 리스트 get && 상품 선택 페이지 구현 중 * feat: 이것저것 수정 및 post 완성 * fix: 콘솔 삭제
Roots-and-Fruits · Sep 25, 2024 · 128b99a · 128b99a
1 parent f011ea7
commit 128b99a
Show file tree

Hide file tree

Showing 21 changed files with 256 additions and 30 deletions.
diff --git a/src/apis/domains/service/useFetchProductList.ts b/src/apis/domains/service/useFetchProductList.ts
@@ -0,0 +1,24 @@
+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";
+
+const getProductList = async (): Promise<ProductList | null> => {
+  try {
+    const response = await get<
+      ApiResponseType<{ sailedProductList: ProductList }>
+    >("api/v1/product/sailed");
+    return response.data.data.sailedProductList;
+  } catch (error) {
+    console.log(error);
+    return null;
+  }
+};
+
+export const useFetchProductList = () => {
+  return useQuery({
+    queryKey: [QUERY_KEY.PRODUCT_LIST],
+    queryFn: () => getProductList(),
+  });
+};
diff --git a/src/apis/queryKeys/queryKeys.ts b/src/apis/queryKeys/queryKeys.ts
@@ -1,3 +1,4 @@
 export const QUERY_KEY = {
   ORDER_POST: "orderPost",
+  PRODUCT_LIST: "productList",
 } as const;
diff --git a/src/components/common/CheckBox/CheckBox.style.ts b/src/components/common/CheckBox/CheckBox.style.ts
@@ -6,12 +6,12 @@ export const checkboxWrapper = css`
   ${flexGenerator("row", "start", "center")};
   width: 100%;
   gap: 0.5rem;
+  cursor: pointer;
 `;
 
 export const iconStyle = css`
   width: 2.4rem;
   height: 2.4rem;
-  cursor: pointer;
 `;
 
 export const textStyle = (theme: Theme) => css`

diff --git a/src/components/common/CheckBox/CheckBox.tsx b/src/components/common/CheckBox/CheckBox.tsx
@@ -10,8 +10,8 @@ export interface CheckBoxProps extends InputHTMLAttributes<HTMLInputElement> {
 
 const CheckBox = ({ isChecked, onClick, children }: CheckBoxProps) => {
   return (
-    <div css={checkboxWrapper}>
-      <span css={iconStyle} onClick={onClick}>
+    <div css={checkboxWrapper} onClick={onClick}>
+      <span css={iconStyle}>
         {isChecked ? <IcCheckedTrue /> : <IcCheckbox />}
       </span>
       <span css={textStyle}>{children}</span>

diff --git a/src/components/common/CountProduct/CountProduct.style.ts b/src/components/common/CountProduct/CountProduct.style.ts
@@ -17,11 +17,13 @@ export const productCountWrapper = css`
   ${flexGenerator("row", "space-between", "center")};
   gap: 1.5rem;
   width: 12rem;
+  min-width: 12rem;
 `;
 
 export const iconStyle = css`
   width: 3.6rem;
   height: 3.6rem;
+  cursor: pointer;
 `;
 
 export const countStyle = (theme: Theme) => css`

diff --git a/src/components/common/CountProduct/CountProduct.tsx b/src/components/common/CountProduct/CountProduct.tsx
@@ -22,7 +22,7 @@ const CountProduct = ({
     onCountChange(count + 1);
   };
   const handleDecrease = () => {
-    if (count > 1) {
+    if (count > 0) {
       onCountChange(count - 1);
     }
   };

diff --git a/src/pages/orderInfo/components/steps/CheckInfo/CheckInfo.style.ts b/src/pages/orderInfo/components/steps/CheckInfo/CheckInfo.style.ts
@@ -86,7 +86,10 @@ export const orderItemInfoWrapper = (theme: Theme) => css`
     div:nth-of-type(1) {
       ${flexGenerator("column", "start", "start")};
       gap: 0.4rem;
-      ${theme.font["subhead-n-16"]};
+
+      span {
+        ${theme.font["subhead-n-16"]};
+      }
     }
   }
 
@@ -100,6 +103,10 @@ export const orderItemInfoWrapper = (theme: Theme) => css`
   }
 `;
 
+export const productInfoWrapper = css`
+  ${flexGenerator("row", "start", "center")}
+`;
+
 export const fixButtonSpanStyle = css`
   position: absolute;
   top: 2rem;

diff --git a/src/pages/orderInfo/components/steps/CheckInfo/CheckInfo.tsx b/src/pages/orderInfo/components/steps/CheckInfo/CheckInfo.tsx
@@ -1,6 +1,6 @@
 import { Button, Header, ProgressBar } from "@components";
 import { useOrderPostDataChange } from "@pages/orderInfo/hooks/useOrderPostDataChange";
-import { StepProps } from "@types";
+import { ErrorType, StepProps } from "@types";
 import { buttonSectionStyle, layoutStyle } from "@pages/orderInfo/styles";
 import {
   checkSpanText,
@@ -19,7 +19,7 @@ import { usePostOrder } from "@apis/domains/service/usePostOrder";
 const CheckInfo = ({ onNext }: StepProps) => {
   const { orderPostDataState, handleAddReceiver, handleSetIndex } =
     useOrderPostDataChange();
-  const { mutate } = usePostOrder();
+  const { mutateAsync } = usePostOrder();
   const receivers = orderPostDataState.recipientInfo;
   const navigate = useNavigate();
 
@@ -37,8 +37,13 @@ const CheckInfo = ({ onNext }: StepProps) => {
     navigate("/order-info/receiver1");
   };
   const handleNextClick = () => {
-    mutate(orderPostDataState);
-    onNext();
+    mutateAsync(orderPostDataState)
+      .then(() => {
+        onNext();
+      })
+      .catch((error: ErrorType) => {
+        alert(error.message);
+      });
   };
   console.log(orderPostDataState);
   return (
@@ -89,7 +94,15 @@ const CheckInfo = ({ onNext }: StepProps) => {
                 </div>
                 <div>
                   <span>선택상품</span>
-                  <div>{/* 상품 정보 올 예정 */}</div>
+                  <div>
+                    {receiver.productInfo
+                      .filter((product) => product.productCount > 0)
+                      .map((product, j) => (
+                        <div key={j}>
+                          <span>{`${product.productName} ${product.productCount}개`}</span>
+                        </div>
+                      ))}
+                  </div>
                 </div>
                 <div>
                   <span>희망 배송일자</span>

diff --git a/src/pages/orderInfo/components/steps/CheckInfo/Edit/EditReceiver/EditReceiver.style.ts b/src/pages/orderInfo/components/steps/CheckInfo/Edit/EditReceiver/EditReceiver.style.ts
@@ -38,6 +38,14 @@ export const selectProductContainer = css`
   width: 100%;
 `;
 
+export const selectProductWrapper = css`
+  ${flexGenerator("column")};
+  width: 100%;
+  gap: 2.5rem;
+
+  margin-top: 1rem;
+`;
+
 export const deliveryDateContainer = css`
   ${flexGenerator("column", "start", "start")};
   width: 100%;
@@ -47,6 +55,11 @@ export const deliveryDateContainer = css`
 export const subTitleSpan = (theme: Theme) => css`
   ${theme.font["head04-sb-18"]};
   color: ${theme.color.black};
+`;
+
+export const subTitle2Span = (theme: Theme) => css`
+  ${theme.font["head04-sb-18"]};
+  color: ${theme.color.black};
   margin-left: 0.5rem;
 `;
 

diff --git a/src/pages/orderInfo/components/steps/CheckInfo/Edit/EditReceiver/EditReceiver.tsx b/src/pages/orderInfo/components/steps/CheckInfo/Edit/EditReceiver/EditReceiver.tsx
@@ -1,4 +1,10 @@
-import { Button, CustomCalendar, Input, RadioInput } from "@components";
+import {
+  Button,
+  CountProduct,
+  CustomCalendar,
+  Input,
+  RadioInput,
+} from "@components";
 import { useOrderPostDataChange } from "@pages/orderInfo/hooks/useOrderPostDataChange";
 import {
   addressFormWrapper,
@@ -8,6 +14,8 @@ import {
   radioWrapper,
   receiverSpan,
   selectProductContainer,
+  selectProductWrapper,
+  subTitle2Span,
   subTitleSpan,
   zonecodeWrapper,
 } from "./EditReceiver.style";
@@ -107,6 +115,21 @@ const EditReceiver = ({ receiverIndex }: EditReceiverProps) => {
     open({ onComplete: handleComplete });
   };
 
+  const handleCountChange = (productIndex: number, newCount: number) => {
+    const currentProductInfo = receiver.productInfo;
+    const updatedProductInfo = currentProductInfo.map((product, index) => {
+      if (index === productIndex) {
+        return { ...product, productCount: newCount };
+      }
+      return product;
+    });
+
+    handleRecipientInputChange(
+      updatedProductInfo,
+      "productInfo",
+      receiverIndex
+    );
+  };
   const handleOptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSelectedOption(e.target.value);
   };
@@ -172,10 +195,19 @@ const EditReceiver = ({ receiverIndex }: EditReceiverProps) => {
         </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>
         </div>
         <div css={deliveryDateContainer}>
-          <span css={subTitleSpan}>배송 날짜</span>
+          <span css={subTitle2Span}>배송 날짜</span>
           <div css={radioWrapper}>
             <RadioInput
               name="delivery"

diff --git a/src/pages/orderInfo/components/steps/Receiver1/Receiver1.tsx b/src/pages/orderInfo/components/steps/Receiver1/Receiver1.tsx
@@ -32,6 +32,16 @@ const Receiver1 = ({ onNext }: StepProps) => {
   const [isChecked, setIsChecked] = useState(false);
   const handleCheckClick = () => {
     setIsChecked((prev) => !prev);
+    handleRecipientInputChange(
+      orderPostDataState.senderName,
+      "recipientName",
+      currentRecipientIndex
+    );
+    handleRecipientInputChange(
+      orderPostDataState.senderPhone,
+      "recipientPhone",
+      currentRecipientIndex
+    );
   };
   const handleNextClick = () => {
     if (isAllValid) {

diff --git a/src/pages/orderInfo/components/steps/SelectDeliveryDate/SelectDeliveryDate.tsx b/src/pages/orderInfo/components/steps/SelectDeliveryDate/SelectDeliveryDate.tsx
@@ -22,14 +22,21 @@ import {
 } from "./SelectDeliveryDate.style";
 import React, { useState } from "react";
 import { useOrderPostDataChange } from "@pages/orderInfo/hooks/useOrderPostDataChange";
+import { getTwoDaysLaterDate } from "@utils";
 
 const SelectDeliveryDate = ({ onNext }: StepProps) => {
   const { handleRecipientInputChange } = useOrderPostDataChange();
   const [selectedOption, setSelectedOption] = useState("regular");
-  const [selectedDate, setSelectedDate] = useState("");
+  const [selectedDate, setSelectedDate] = useState(getTwoDaysLaterDate());
 
   const handleOptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSelectedOption(e.target.value);
+
+    if (e.target.value === "regular") {
+      setSelectedDate(getTwoDaysLaterDate());
+    } else {
+      setSelectedDate("");
+    }
   };
   const handleDateChange = (date: string) => {
     setSelectedDate(date);
@@ -39,10 +46,10 @@ const SelectDeliveryDate = ({ onNext }: StepProps) => {
       alert("희망 배송일자를 선택해주세요");
       return;
     }
-
     handleRecipientInputChange(selectedDate, "deliveryDate");
     onNext();
   };
+
   return (
     <>
       <Header text="희망 배송일자 선택" />

diff --git a/src/pages/orderInfo/components/steps/SelectProduct/SelectProduct.style.ts b/src/pages/orderInfo/components/steps/SelectProduct/SelectProduct.style.ts
@@ -7,5 +7,4 @@ export const mainSectionStyle = css`
   width: 100%;
 
   margin-top: 2.8rem;
-  background-color: pink;
 `;