Merge pull request #49 from Spharos-GentleDog/feature/cart

Feature/cart
Spharos-GentleDog · Nov 29, 2023 · ca4d94f · ca4d94f
2 parents e42a25d + 972faa5
commit ca4d94f
Show file tree

Hide file tree

Showing 9 changed files with 178 additions and 97 deletions.
diff --git a/src/app/order/page.tsx b/src/app/order/page.tsx
@@ -8,7 +8,7 @@ export default function Order() {
   return (
     <>
       <div className="p-8">
-        <h2>주문내역</h2>
+        <h2 className="text-lg lg:text-3xl font-semibold mb-4">주문내역</h2>
         <OrderList />
       </div>
     </>

diff --git a/src/app/product/[productId]/page.tsx b/src/app/product/[productId]/page.tsx
@@ -365,8 +365,8 @@ const Product = ({}) => {
         const data = await res.json();
         setProduct(data.result);
         // console.log('data', data.result);
-        setVariantActive(data.result.productDetailPageOptionsDto[0].color[0]);
-        setSizeSelected(data.result.productDetailPageOptionsDto[0].size[0]);
+        setVariantActive(data.result.productDetailPageOptionsDto[0].color);
+        setSizeSelected(data.result.productDetailPageOptionsDto[0].size);
       } catch (error) {
         console.log(error);
       }

diff --git a/src/components/AddressRegister.tsx b/src/components/AddressRegister.tsx
@@ -95,21 +95,20 @@ export default function AddressRegister({
 
   const handleOpenModal = () => {
     setIsView(!isView);
-  }
+  };
 
   // 우편 주소
   const [isView, setIsView] = useState<boolean>(false);
-  const [address, setAddress] = useState<string>("");
-
+  const [address, setAddress] = useState<string>('');
 
   useEffect(() => {
     if (address) {
       setFormData({
         ...formData,
         userAddress: address,
-      })
+      });
     }
-  }, [address])
+  }, [address]);
 
   return (
     <div className="p-4 lg:px-0 space-y-2 ">
@@ -160,7 +159,11 @@ export default function AddressRegister({
                 onClick={handleOpenModal}
               />
               <div>
-                <Postcode isView={isView} setIsView={setIsView} setAddress={setAddress} />
+                <Postcode
+                  isView={isView}
+                  setIsView={setIsView}
+                  setAddress={setAddress}
+                />
               </div>
               <input
                 name="userDetailAddress"

diff --git a/src/components/CartList.tsx b/src/components/CartList.tsx
diff --git a/src/components/Checkout/ShippingAddress.tsx b/src/components/Checkout/ShippingAddress.tsx
@@ -91,7 +91,7 @@ const ShippingAddress: React.FC<Props> = ({
   const [isModalAddress, setIsModalAddress] = useState(false);
   const renderShippingAddress = () => {
     return (
-      <div className="border border-slate-200 dark:border-slate-700 rounded-xl ">
+      <div className="border shadow-sm border-slate-200 dark:border-slate-700 rounded-xl ">
         <div className="p-6 flex flex-col sm:flex-row items-start">
           <div className="sm:ml-4">
             <h3 className=" text-slate-700 dark:text-slate-300 flex ">

diff --git a/src/components/CheckoutList.tsx b/src/components/CheckoutList.tsx
@@ -344,7 +344,7 @@ export default function CheckoutList() {
           cartBrandProducts.map((brandProducts) => (
             <div
               key={`cart-${brandProducts.brandName}`}
-              className="border-[1px] p-4 mb-2 divide-y divide-slate-200 dark:divide-slate-700"
+              className="border-[1px] shadow-md p-4 mb-2 divide-y divide-slate-200 dark:divide-slate-700"
             >
               <div className="text-lg font-semibold pb-2">
                 {brandProducts.brandName}

diff --git a/src/components/OrderList.tsx b/src/components/OrderList.tsx
@@ -3,7 +3,8 @@ import { Disclosure } from '@headlessui/react';
 import { useSession } from 'next-auth/react';
 import Image from 'next/image';
 import Link from 'next/link';
-import React, { use, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import Icon from './Icon';
 
 // 3. CSS 수정도 필요하다
 // 4. 대표 상품의 이미지를 출력해야 한다.
@@ -119,81 +120,124 @@ export default function OrderList() {
     <>
       {Object.entries(groupedOrders).map(([date, ordersOnDate]) => (
         <div key={date} className="date-group">
-          <span className="my-4">{date} 주문</span>
+          <span className="font-semibold lg:text-lg">{date}</span>
           {Object.entries(ordersOnDate).map(([orderNumber, brandName]) => (
             <div
               key={orderNumber}
-              className="border-[1.5px] rounded-md p-4 w-full mt-2"
+              className="border-[1.5px] rounded-md pt-2 pb-4 px-4 w-full my-4 shadow-lg"
             >
-              <div className="order-number">
-                <span>주문번호: {orderNumber}</span>
+              <div className="order-number text-end text-sm">
+                <div className="pt-2">{orderNumber}</div>
                 {Object.entries(brandName).map(([brand, orders]) => (
                   <div key={brand}>
                     {orders.map((order) => (
                       <Disclosure key={order.groupId}>
-                        <div className="flex flex-col border-[1.5px] rounded-md divide-y-2">
-                          <Disclosure.Button className="h-full flex space-y-6 ">
-                            <div className="flex">
+                        <div className="flex flex-col border-[1.5px] rounded-md my-4 shadow-md">
+                          <Disclosure.Button className="h-full flex p-4">
+                            <div className="flex p-4">
                               <Image
-                                src="https://gentledog.s3.ap-northeast-2.amazonaws.com/product/10.jpg"
-                                alt="임시 이름 어쩌구"
+                                src={order.productImageUrl}
+                                alt={order.productNameAndTotalCount}
                                 width={100}
                                 height={100}
                                 className="rounded-md"
                               />
                             </div>
-                            <div className="flex flex-col w-full">
-                              <span className="">{order.brandName}</span>
-                              <span className="">
-                                {order.productNameAndTotalCount}
+                            <div className="flex flex-col w-full text-start p-4">
+                              <span className="font-semibold text-lg lg:text-2xl">
+                                {order.brandName}
                               </span>
-                              <span className="">{order.totalPrice}</span>
-                              <span className="">
-                                {order.vendorsOrderListStatus}
+                              <div className="border-t border-slate-200 dark:border-slate-700 my-4 md:my-4 flex-shrink-0"></div>
+                              <span className="text-base font-semibold">
+                                {order.productNameAndTotalCount}
                               </span>
                               <span className="">
-                                {order.vendorsOrderListStatusDescription}
+                                {order.totalPrice.toLocaleString('ko-KR', {
+                                  style: 'currency',
+                                  currency: 'KRW',
+                                })}
                               </span>
+                              <div className="flex gap-4">
+                                <span className="">
+                                  {order.vendorsOrderListStatus}
+                                </span>
+                                <span className="">
+                                  {order.vendorsOrderListStatusDescription}
+                                </span>
+                              </div>
                             </div>
                           </Disclosure.Button>
-                          <Disclosure.Panel className="flex flex-col h-full">
+                          <Disclosure.Panel className="flex flex-col h-fulld p-4">
                             {order.orderDetailList.map((product) => (
                               <div
                                 key={product.productId}
-                                className="flex space-y-2"
+                                className="flex border-[0.5px] my-1 rounded-md shadow-md"
                               >
                                 <div>
                                   <Link href={`/product/${product.productId}`}>
                                     <Image
-                                      src="https://gentledog.s3.ap-northeast-2.amazonaws.com/product/10.jpg"
-                                      // src={`${product.productImageUrl}`}
+                                      src={`${product.productImageUrl}`}
                                       alt={`${product.productName}`}
-                                      width={100}
-                                      height={100}
+                                      width={150}
+                                      height={150}
                                     />
                                   </Link>
                                 </div>
-                                <div className="py-4 flex flex-col w-full h-full">
-                                  <span className="">
+                                <div className="flex flex-col w-full h-full text-start p-4 ">
+                                  <span className="font-semibold">
                                     {product.productName}
                                   </span>
+                                  <div className="border-t border-slate-200 dark:border-slate-700 my-2 md:my-2 flex-shrink-0"></div>
+                                  <div className="flex gap-2">
+                                    <Icon type="color" />
+                                    <span className="">
+                                      {product.productColor}
+                                    </span>
+                                  </div>
+                                  <div className="flex gap-2">
+                                    <Icon type="size" />
+                                    <span className="">
+                                      {product.productSize}
+                                    </span>
+                                  </div>
                                   <span className="">
-                                    {product.productColor}
-                                  </span>
-                                  <span className="">
-                                    {product.productSize}
-                                  </span>
-                                  <span className="">
-                                    {product.productStock}
+                                    {product.productStock}개
                                   </span>
                                   <span className="">
-                                    {product.productPrice}
+                                    {product.productPrice.toLocaleString(
+                                      'ko-KR',
+                                      {
+                                        style: 'currency',
+                                        currency: 'KRW',
+                                      }
+                                    )}
+                                    원
                                   </span>
                                   <span className="">
-                                    {product.productDiscountRate}
+                                    {product.productDiscountRate !== 0
+                                      ? '-' +
+                                        product.productDiscountRate.toLocaleString(
+                                          'ko-KR',
+                                          {
+                                            style: 'currency',
+                                            currency: 'KRW',
+                                          }
+                                        ) +
+                                        '원'
+                                      : ''}
                                   </span>
                                   <span className="">
-                                    {product.couponDiscountPrice}
+                                    {product.couponDiscountPrice !== 0
+                                      ? '-' +
+                                        product.couponDiscountPrice.toLocaleString(
+                                          'ko-KR',
+                                          {
+                                            style: 'currency',
+                                            currency: 'KRW',
+                                          }
+                                        ) +
+                                        '원'
+                                      : ''}
                                   </span>
                                 </div>
                               </div>

diff --git a/src/components/ProductCard.tsx b/src/components/ProductCard.tsx
@@ -196,16 +196,16 @@ const ProductCard: FC<ProductCardProps> = ({
             />
           </Link>
           <div className="absolute top-3 end-3 z-10 flex gap-1">
-            {/* todo: 실제 상품 데이터 페칭 시 타입 확인 */}
             <LikeButton productId={productId as number} className="" />
-            <ButtonSecondary
+            {/* todo: 퀵뷰 수정 필요 */}
+            {/* <ButtonSecondary
               className="ms-1.5 bg-white hover:!bg-gray-100 hover:text-slate-900 transition-colors shadow-lg"
               fontSize="text-xs"
               sizeClass="py-2 px-2.5"
               onClick={() => setShowModalQuickView(true)}
             >
               <ArrowsPointingOutIcon className="w-3.5 h-3.5" />
-            </ButtonSecondary>
+            </ButtonSecondary> */}
           </div>
           {/* 사이즈가 존재하면 사이즈가 뜨고 아니면 addCart 버튼이 뜸 */}
           {sizes ? (

diff --git a/src/types/orderType.ts b/src/types/orderType.ts
@@ -15,6 +15,7 @@ export interface OrderListType {
   orderNumber: string;
   brandName: string;
   brandLogoImageUrl: string;
+  productImageUrl: string;
   vendorEmail: string;
   totalPrice: number;
   productNameAndTotalCount: string;