Merge pull request #265 from Together-3team/feat/주문카드버튼

[서인] 주문, 주문 상세 페이지 / 주문 카드 버튼 구현
Together-3team · Jun 24, 2024 · d1e1e67 · d1e1e67
2 parents 1f05f4d + 3814ebf
commit d1e1e67
Show file tree

Hide file tree

Showing 8 changed files with 201 additions and 128 deletions.
diff --git a/src/apis/purchase/api.ts b/src/apis/purchase/api.ts
@@ -9,21 +9,10 @@ export interface PostPurchaseParams {
 }
 
 export interface PurchaseRdo {
-  id: number;
-  deliveryName: string;
-  recipient: string;
-  recipientPhoneNumber: string;
-  zipCode: number;
-  address: string;
-  detailedAddress: string;
-  deliveryMessage: string;
-  purchaseProducts: [PutProductRdo];
-  orderId: string;
-  paymentKey: string;
   paymentStatus: number;
 }
 
-export interface PutProductsParams {
+export interface PutProductsRdo {
   status: number;
   deliveryCompany: string;
   trackingNumber: string;
@@ -54,11 +43,11 @@ const purchaseApi = {
   post: (body: PostPurchaseParams) => {
     return axiosInstance.post<PurchaseRdo>(`/purchases`, body);
   },
-  putPaymentStatus: (id: number, body: number) => {
+  putPaymentStatus: (id: number, body: PurchaseRdo) => {
     return axiosInstance.put<PurchaseRdo>(`/purchases/${id}`, body);
   },
-  putPurchase: (id: number, body: PutProductsParams) => {
-    return axiosInstance.put<PutProductRdo>(`/purchases/products/${id}`, body);
+  putPurchase: (id: number, body: PutProductsRdo) => {
+    return axiosInstance.put<PutProductsRdo>(`/purchases/products/${id}`, body);
   },
   delete: async (id: number) => {
     const response = await axiosInstance.delete(`/purchases/${id}`);

diff --git a/src/components/common/Card/index.tsx b/src/components/common/Card/index.tsx
@@ -62,6 +62,9 @@ export default function Card({
 
   const discountRate = Math.ceil((1 - price / originalPrice) * 100);
 
+  const formattedOriginalPrice = originalPrice.toLocaleString('ko-KR');
+  const formattedPrice = price.toLocaleString('ko-KR');
+
   const [imageSrc, setImgSrc] = useState(thumbNailImage);
 
   const handleImgError = () => {
@@ -109,7 +112,7 @@ export default function Card({
         {stock === 0 && <p className={cx('outOfStock')}>품절된 상품이에요</p>}
         {stock > 0 && (
           <p className={cx('originalPrice')} data-direction={direction} data-size={size}>
-            {originalPrice}원
+            {formattedOriginalPrice}원
           </p>
         )}
         {stock > 0 && (
@@ -118,7 +121,7 @@ export default function Card({
               {discountRate}%
             </p>
             <p className={cx('price')} data-direction={direction} data-size={size}>
-              {price}원
+              {formattedPrice}원
             </p>
           </div>
         )}

diff --git a/src/components/order/OrderCard/OrderCard.module.scss b/src/components/order/OrderCard/OrderCard.module.scss
@@ -21,4 +21,35 @@
     background: $color-gray-100;
     border: 0;
   }
+
+  .cardButton {
+    display: flex;
+    height: 4.4rem;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 0.8rem;
+    flex: 1 0 0;
+    border-radius: 0.8rem;
+    border: var(--product-cnt, 1px) solid $color-gray-300;
+    background: $color-white;
+
+    @include font-body1;
+
+    &:disabled {
+      background-color: $color-gray-100;
+      border-color: $color-gray-100;
+      color: $color-gray-400;
+      cursor: default;
+    }
+  }
+
+  .reviewButton {
+    color: $color-pink-main;
+    border-color: $color-pink-main;
+
+    &:disabled {
+      border-color: $color-gray-100;
+    }
+  }
 }
diff --git a/src/components/order/OrderCard/OrderCardButton.tsx b/src/components/order/OrderCard/OrderCardButton.tsx
@@ -1,26 +1,46 @@
-import React from 'react';
-import Button from '@/components/common/Button';
+import React, { MouseEventHandler } from 'react';
+import classNames from 'classnames/bind';
 
 import styles from './OrderCard.module.scss';
 
+const cx = classNames.bind(styles);
+
 interface OrderCardButton {
-  onClick: () => void;
+  status: number;
+  buttons: { id: number; name: string; disabled: boolean; onClick: MouseEventHandler<HTMLButtonElement> }[][];
 }
 
-export default function OrderCardButton({ onClick }: OrderCardButton) {
-  //const FirstButton = {name: }
-
+export default function OrderCardButton({ status, buttons }: OrderCardButton) {
   return (
     <div className={styles.orderCardButtons}>
-      <Button size="small" backgroundColor="$color-white-gray" onClick={onClick}>
-        주문 취소
-      </Button>
-      <Button size="small" backgroundColor="$color-gray-100" onClick={onClick}>
-        배송 조회
-      </Button>
-      <Button size="small" backgroundColor="$color-gray-100" onClick={onClick}>
-        리뷰 쓰기
-      </Button>
+      {buttons.map(button =>
+        button
+          .filter(item => {
+            switch (status) {
+              case 0:
+              case 2:
+              case 3:
+                return item.id === 1;
+              case 4:
+                return item.id === 2;
+              case 5:
+                return item.id === 3;
+              case 6:
+                return item.id === 4;
+              default:
+                return false;
+            }
+          })
+          .map(item => (
+            <button
+              key={item.id}
+              className={cx('cardButton', { reviewButton: buttons.indexOf(button) === 2 })}
+              onClick={item.onClick}
+              disabled={item.disabled}>
+              {item.name}
+            </button>
+          ))
+      )}
     </div>
   );
 }
diff --git a/src/components/order/OrderCard/index.tsx b/src/components/order/OrderCard/index.tsx
@@ -1,23 +1,24 @@
 import Card, { ProductInfo } from '../../common/Card';
-import Button from '../../common/Button';
+import OrderCardButton from './OrderCardButton';
 
 import styles from './OrderCard.module.scss';
-import OrderCardButton from './OrderCardButton';
+import { MouseEventHandler } from 'react';
 
 interface OrderCardProps {
   productInfo: ProductInfo;
   tagText: string;
   href?: string;
-  onClick: () => void;
+  status: number;
+  buttons?: { id: number; name: string; disabled: boolean; onClick: MouseEventHandler<HTMLButtonElement> }[][];
 }
 
-export default function OrderCard({ href, productInfo, tagText, onClick }: OrderCardProps) {
+export default function OrderCard({ href, productInfo, tagText, buttons, status }: OrderCardProps) {
   return (
     <>
       <hr className={styles.updownBorder} />
       <div className={styles.orderCardLayout}>
         <Card productInfo={productInfo} direction="row" size="miniImage" tagText={tagText} href={href} />
-        <OrderCardButton onClick={onClick} />
+        {buttons ? <OrderCardButton buttons={buttons} status={status} /> : null}
       </div>
     </>
   );

diff --git a/src/pages/my/order/[purchaseId].tsx b/src/pages/my/order/[purchaseId].tsx
@@ -25,22 +25,6 @@ export default function OrderDetail() {
 
   const purchaseProducts = purchaseDetailData?.data?.purchaseProducts || [];
 
-  console.log(purchaseDetailData);
-
-  const orderList =
-    purchaseDetailData &&
-    purchaseDetailData.data.purchaseProducts.map((product: ProductInfo) => ({
-      productId: product.productId,
-      title: product.title,
-      thumbNailImage: product.thumbNailImage,
-      originalPrice: product.originalPrice,
-      price: product.price,
-      option: product.combinationName,
-      quantity: product.quantity,
-      stock: 1,
-      status: product.status,
-    }));
-
   const deliveryInfo = purchaseDetailData && {
     recipient: purchaseDetailData.data.recipient,
     recipientPhoneNumber: purchaseDetailData.data.recipientPhoneNumber,
@@ -50,9 +34,6 @@ export default function OrderDetail() {
     message: purchaseDetailData.data.deliveryMessage,
   };
 
-  console.log(orderList);
-  console.log(purchaseDate);
-
   function calculateTotalOriginalPrice() {
     return purchaseDetailData?.data.purchaseProducts.reduce(
       (total: number, order: ProductInfo) => order.quantity && total + order.originalPrice * order.quantity,
@@ -114,9 +95,9 @@ export default function OrderDetail() {
           purchaseProducts.map((order: ProductInfo) => (
             <OrderCard
               key={order.productId}
+              status={order.status as number}
               productInfo={{ ...order, stock: 3, option: order.combinationName }}
               tagText={getTagText(order.status)}
-              onClick={() => {}}
             />
           ))}
       </div>
@@ -130,14 +111,14 @@ export default function OrderDetail() {
             productCount={orderCount}
           />
         </div>
-        <div className={styles.paymentMethod}>
+        {/* <div className={styles.paymentMethod}>
           <div className={styles.rectangle} />
           <div className={styles.paymentMethodTitle}>
             <h3>결제 수단</h3>
             <hr className={styles.updownBorder} />
           </div>
           <span>토스페이</span>
-        </div>
+        </div> */}
       </div>
     </div>
   );