[Chore] Redux 세팅 & 장바구니 구현

api/fetchProductsData.ts

@@ -1,6 +1,17 @@
 import { AxiosRequestConfig } from "axios";
+import { useQuery } from "@tanstack/react-query";
 import { axiosInstance } from "./../src/utils/axiosInstance";
 
+export interface IProduct {
+  readonly id: number;
+  readonly title: string;
+  readonly description: string;
+  readonly category: string;
+  readonly price: number;
+  readonly image: string;
+  readonly rating: IRating;
+}
+
 export interface Item extends AxiosRequestConfig {
   id: number;
   title: string;
@@ -10,13 +21,18 @@ export interface Item extends AxiosRequestConfig {
   image: string;
 }
 
-const fetchProductsData = async () => {
-  try {
-    const res = await axiosInstance.get("products");
-    return res.data;
-  } catch (error) {
-    throw new Error(`"Error fetching data:", ${error}`);
-  }
+interface IRating {
+  readonly rate?: number;
+  readonly count?: number;
+}
+
+const fetchProductsData = async (): Promise<IProduct[]> => {
+  const response = await axiosInstance.get("products");
+  return response.data;
+};
+
+export const useProducts = () => {
+  return useQuery<IProduct[]>({ queryKey: ["products"], queryFn: fetchProductsData });
 };
 
 export default fetchProductsData;

package.json

@@ -22,15 +22,17 @@
     "react-dom": "^18.2.0",
     "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.11.2",
-    "recoil": "^0.7.7",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.0.4",
     "vite": "^4.3.9"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.2.7",
     "@tanstack/react-query": "^5.37.1",
     "@tanstack/react-query-devtools": "^5.37.1",
     "@vercel/node": "^2.15.10",
-    "axios": "^1.6.8"
+    "axios": "^1.6.8",
+    "react-redux": "^9.1.2",
+    "redux": "^5.0.1"
   }
 }

src/components/cart/CartList.tsx

@@ -0,0 +1,54 @@
+import { useDispatch, useSelector } from "react-redux";
+import { AppDispatch, RootState } from "../../store";
+import { increaseItemCount, decreaseItemCount } from "../../store/cart";
+import { toCurrencyFormat } from "../../utils/toCurrencyFormat";
+
+const CartList = (): JSX.Element => {
+  const dispatch: AppDispatch = useDispatch();
+  const { items, totalAmount } = useSelector((state: RootState) => state.cart);
+
+  const handleAddCount = (id: number) => {
+    dispatch(increaseItemCount(id));
+  };
+
+  const handleDecreaseCount = (id: number) => {
+    dispatch(decreaseItemCount(id));
+  };
+
+  return (
+    <div className="lg:flex lg:items-center mt-4 px-2 lg:px-0">
+      <div className="mt-6 md:mt-14 px-2 lg:px-0 lg:flex">
+        <ul>
+          {items.map((item) => (
+            <div key={item.id} className="lg:flex lg:items-center mt-4 px-2 lg:px-0">
+              <figure className="w-10% flex-shrink-0 rounded-2xl overflow-hidden px-4 py-4 bg-white flex justify-center">
+                <img src={item.image} alt={item.title} className="transition-transform duration-300 w-28" />
+              </figure>
+              <div className="card-body px-1 lg:px-12">
+                <h2 className="card-title">{item.title}</h2>
+                <br />
+                <span className="mt-2 mb-4 text-3xl">{toCurrencyFormat(item.price)}</span>
+                <br />
+                <div className="card-actions">
+                  <button className="btn btn-primary" onClick={() => handleDecreaseCount(item.id)}>
+                    -
+                  </button>
+                  <button className="btn btn-ghost no-animation">{item.count}</button>
+                  <button className="btn btn-primary" onClick={() => handleAddCount(item.id)}>
+                    +
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </ul>
+        <div className="self-start shrink-0 flex items-center mt-10 mb-20">
+          <span className="text-xl md:text-2xl">총: {toCurrencyFormat(totalAmount)}</span>
+          <button className="modal-button btn btn-primary ml-5">구매하기</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CartList;

src/components/cart/CartView.tsx

@@ -0,0 +1,31 @@
+import { Link } from "react-router-dom";
+import { useSelector } from "react-redux";
+import BreadCrumb from "../common/Breadcrumb";
+import Confirm from "../common/Confirm";
+import { RootState } from "../../store";
+import CartList from "./CartList";
+
+const CartView = (): JSX.Element => {
+  const { items } = useSelector((state: RootState) => state.cart);
+
+  return (
+    <section className="pt-4 lg:pt-5 pb-4 lg:pb-8 px-4 xl:px-2 xl:container mx-auto">
+      <BreadCrumb category="홈" crumb="장바구니" />
+      <div className="mt-6 md:mt-14 px-2 lg:px-0">
+        {!items.length ? (
+          <div>
+            <h1 className="text-2xl">장바구니에 물품이 없습니다.</h1>
+            <Link to="/" className="btn btn-primary mt-10">
+              담으러 가기
+            </Link>
+          </div>
+        ) : (
+          <CartList />
+        )}
+      </div>
+      <Confirm />
+    </section>
+  );
+};
+
+export default CartView;