Feat product add options #54

package.json

@@ -1,66 +1,68 @@
-{
-  "name": "syatt",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage"
-  },
-  "dependencies": {
-    "@emailjs/browser": "^3.11.0",
-    "@reduxjs/toolkit": "^1.9.5",
-    "@sanity/client": "^6.9.1",
-    "@sanity/image-url": "^1.0.2",
-    "@tosspayments/payment-sdk": "^1.6.1",
-    "@tosspayments/payment-widget-sdk": "^0.10.1",
-    "@types/react-responsive": "^8.0.8",
-    "axios": "^1.6.7",
-    "dayjs": "^1.11.10",
-    "eslint": "8.41.0",
-    "eslint-config-next": "13.4.4",
-    "framer-motion": "^10.18.0",
-    "next": "^15.1.0",
-    "next-auth": "^4.24.11",
-    "notiflix": "^3.2.6",
-    "react": "18.2.0",
-    "react-chartjs-2": "^5.2.0",
-    "react-datepicker": "^4.24.0",
-    "react-daum-postcode": "^3.1.3",
-    "react-dom": "18.2.0",
-    "react-icons": "^4.12.0",
-    "react-loader-spinner": "^5.3.4",
-    "react-portal": "^4.2.2",
-    "react-redux": "^8.0.5",
-    "react-responsive": "^10.0.0",
-    "react-simple-star-rating": "^5.1.7",
-    "react-slick": "^0.30.1",
-    "react-toastify": "^10.0.6",
-    "react-youtube": "^10.1.0",
-    "slick-carousel": "^1.8.1",
-    "swr": "^2.2.4",
-    "typescript": "^5.0.4"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^14.1.2",
-    "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.11",
-    "@types/node": "20.2.5",
-    "@types/react": "18.2.7",
-    "@types/react-datepicker": "^4.19.4",
-    "@types/react-dom": "^18.2.18",
-    "@types/react-slick": "^0.23.13",
-    "autoprefixer": "^10.4.16",
-    "encoding": "^0.1.13",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "postcss": "^8.4.31",
-    "source-map-loader": "^5.0.0",
-    "tailwindcss": "^3.3.5"
-  }
-}
+{
+  "name": "syatt",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
+  },
+  "dependencies": {
+    "@emailjs/browser": "^3.11.0",
+    "@reduxjs/toolkit": "^1.9.5",
+    "@sanity/client": "^6.9.1",
+    "@sanity/image-url": "^1.0.2",
+    "@tosspayments/payment-sdk": "^1.6.1",
+    "@tosspayments/payment-widget-sdk": "^0.10.1",
+    "@types/react-responsive": "^8.0.8",
+    "@vercel/speed-insights": "^1.1.0",
+    "axios": "^1.6.7",
+    "dayjs": "^1.11.10",
+    "eslint": "8.41.0",
+    "eslint-config-next": "13.4.4",
+    "framer-motion": "^10.18.0",
+    "next": "^15.1.0",
+    "next-auth": "^4.24.11",
+    "notiflix": "^3.2.6",
+    "react": "18.2.0",
+    "react-chartjs-2": "^5.2.0",
+    "react-datepicker": "^4.24.0",
+    "react-daum-postcode": "^3.1.3",
+    "react-dom": "18.2.0",
+    "react-icons": "^4.12.0",
+    "react-loader-spinner": "^5.3.4",
+    "react-portal": "^4.2.2",
+    "react-redux": "^8.0.5",
+    "react-responsive": "^10.0.0",
+    "react-simple-star-rating": "^5.1.7",
+    "react-slick": "^0.30.1",
+    "react-toastify": "^10.0.6",
+    "react-youtube": "^10.1.0",
+    "slick-carousel": "^1.8.1",
+    "swr": "^2.2.4",
+    "tailwind-scrollbar-hide": "^2.0.0",
+    "typescript": "^5.0.4"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.11",
+    "@types/node": "20.2.5",
+    "@types/react": "18.2.7",
+    "@types/react-datepicker": "^4.19.4",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-slick": "^0.23.13",
+    "autoprefixer": "^10.4.16",
+    "encoding": "^0.1.13",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.4.31",
+    "source-map-loader": "^5.0.0",
+    "tailwindcss": "^3.3.5"
+  }
+}

src/app/(cart)/cart/CartClient.tsx

@@ -9,10 +9,7 @@ import {
   ALTERNATE_CHECKED_ITEMS,
   SELECT_ALL_ITEMS,
   UNCHECK_ALL_ITEMS,
-  CALCULATE_SUBTOTAL,
-  CALCULATE_CHECKED_ITEMS_SUBTOTAL,
   selectCartItems,
-  selectCheckedCartItems,
   selectAllChecked,
 } from "@/redux/slice/cartSlice";
 import { useEffect, useState, useTransition, Suspense } from "react";
@@ -53,7 +50,6 @@ const LoadingFallback = () => (
 
 export default function CartClient() {
   const cartItems = useSelector(selectCartItems);
-  const checkedItems = useSelector(selectCheckedCartItems);
   const isAllChecked = useSelector(selectAllChecked);
   const [isDisabled, setIsDisabled] = useState(false);
   const [mounted, setMounted] = useState(false);
@@ -67,13 +63,6 @@ export default function CartClient() {
     setMounted(true);
   }, []);
 
-  useEffect(() => {
-    startTransition(() => {
-      dispatch(CALCULATE_SUBTOTAL());
-      dispatch(CALCULATE_CHECKED_ITEMS_SUBTOTAL());
-    });
-  }, [dispatch, cartItems]);
-
   useEffect(() => {
     setIsDisabled(
       cartItems.length === 0 || cartItems.every(item => !item.isChecked),
@@ -91,9 +80,9 @@ export default function CartClient() {
     });
   };
 
-  const handleToggleCheck = (id: string) => {
+  const handleToggleCheck = (key: string) => {
     handleCartAction(
-      () => dispatch(ALTERNATE_CHECKED_ITEMS({ id })),
+      () => dispatch(ALTERNATE_CHECKED_ITEMS({ key })),
       "상품 선택 상태 변경에 실패했습니다.",
     );
   };
@@ -142,7 +131,7 @@ export default function CartClient() {
 
   return (
     <section className="w-[80%] sm:w-full h-auto mx-auto sm:my-0 my-24 min-h-[80vh] font-kor">
-      <div className="w-full flex flex-col items-start justify-start py-16 pt-24">
+      <div className="w-full flex flex-col items-start justify-start pb-16 sm:pt-24">
         <Heading
           title={"장바구니"}
           center={isMobile}

src/app/(cart)/cart/CartInfoArticle.tsx

@@ -1,44 +1,52 @@
-"use client";
-import { useSelector } from "react-redux";
-import {
-  selectCartItems,
-  selectCheckedTotalAmount,
-} from "@/redux/slice/cartSlice";
-import deliveryFee from "@/constants/deliveryFee";
-import priceFormat from "@/utils/priceFormat";
-
-const CartInfoArticle = () => {
-  const cartItems = useSelector(selectCartItems);
-  const checkedTotalAmount = useSelector(selectCheckedTotalAmount);
-  const checkedItemsQuantity = cartItems
-    .filter(item => item.isChecked)
-    .reduce((total, item) => total + item.cartQuantity, 0);
-
-  return (
-    <div className="flex flex-col justify-between border border-lightGray h-[200px] w-full p-4 rounded-md">
-      <div>
-        <div className={"flex justify-between items-center"}>
-          <p className={"text-[22px] font-bold"}>전체 상품 개수</p>
-          <p className={"text-[22px]"}>{checkedItemsQuantity} 개</p>
-        </div>
-        <div className="flex justify-between items-center">
-          <p className={"text-[22px] font-bold"}>배송비</p>
-          <p className={"text-[22px]"}>{deliveryFee} 원</p>
-        </div>
-      </div>
-      <div
-        className={
-          "flex justify-between items-end gap-4 border-t border-lightGray pt-4"
-        }
-      >
-        <h4 className={"font-bold text-[22px]"}>총 결제금액</h4>
-        <div className={"font-bold text-2xl flex justify-start items-end"}>
-          <p>{priceFormat(checkedTotalAmount)}</p>
-          <p className="text-lg">원</p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default CartInfoArticle;
+"use client";
+import { useSelector, useDispatch } from "react-redux";
+import {
+  selectCartItems,
+  selectCheckedTotalAmount,
+  CALCULATE_CHECKED_ITEMS_SUBTOTAL,
+} from "@/redux/slice/cartSlice";
+import deliveryFee from "@/constants/deliveryFee";
+import priceFormat from "@/utils/priceFormat";
+import { useEffect } from "react";
+
+const CartInfoArticle = () => {
+  const cartItems = useSelector(selectCartItems);
+  const checkedTotalAmount = useSelector(selectCheckedTotalAmount);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(CALCULATE_CHECKED_ITEMS_SUBTOTAL());
+  }, [cartItems]);
+
+  const checkedItemsQuantity = cartItems
+    .filter(item => item.isChecked)
+    .reduce((total, item) => total + item.quantity, 0);
+
+  return (
+    <div className="flex flex-col justify-between border border-lightGray h-[200px] w-full p-4 rounded-md">
+      <div>
+        <div className={"flex justify-between items-center"}>
+          <p className={"text-[22px] font-bold"}>전체 상품 개수</p>
+          <p className={"text-[22px]"}>{checkedItemsQuantity} 개</p>
+        </div>
+        <div className="flex justify-between items-center">
+          <p className={"text-[22px] font-bold"}>배송비</p>
+          <p className={"text-[22px]"}>{deliveryFee} 원</p>
+        </div>
+      </div>
+      <div
+        className={
+          "flex justify-between items-end gap-4 border-t border-lightGray pt-4"
+        }
+      >
+        <h4 className={"font-bold text-[22px]"}>총 결제금액</h4>
+        <div className={"font-bold text-2xl flex justify-start items-end"}>
+          <p>{priceFormat(checkedTotalAmount)}</p>
+          <p className="text-lg">원</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CartInfoArticle;