From 8886cfaef87a3764d92b459c46577d08a2ee197f Mon Sep 17 00:00:00 2001
From: YuJin020303 <ekfzha8020@gmail.com>
Date: Tue, 25 Nov 2025 21:41:59 +0900
Subject: [PATCH 1/4] =?UTF-8?q?feat:=209=EC=A3=BC=EC=B0=A8=20=EB=AF=B8?=
 =?UTF-8?q?=EC=85=982(=EB=AA=A8=EB=8B=AC)=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Chap9_mission/src/components/ClearBtn.tsx | 30 ++++--
 .../src/components/DeleteModal.tsx            | 99 +++++++++++++++++++
 .../Chap9_mission/src/slices/modalSlice.ts    | 35 +++++++
 .../mission/Chap9_mission/src/store/store.ts  |  2 +
 4 files changed, 156 insertions(+), 10 deletions(-)
 create mode 100644 week09/mission/Chap9_mission/src/components/DeleteModal.tsx
 create mode 100644 week09/mission/Chap9_mission/src/slices/modalSlice.ts

diff --git a/week09/mission/Chap9_mission/src/components/ClearBtn.tsx b/week09/mission/Chap9_mission/src/components/ClearBtn.tsx
index 9be65ab..79c3716 100644
--- a/week09/mission/Chap9_mission/src/components/ClearBtn.tsx
+++ b/week09/mission/Chap9_mission/src/components/ClearBtn.tsx
@@ -1,20 +1,30 @@
 import { useDispatch } from "../hooks/useCustomRedux";
-import { clearCart } from "../slices/cartSlice";
+import { useSelector } from "../hooks/useCustomRedux";
+import DeleteModal from "./DeleteModal";
+import { openModal } from "../slices/modalSlice";
 
 export const ClearBtn = () => {
+  const { isOpen } = useSelector((state) => state.modal);
+
   const dispatch = useDispatch();
 
-  const handleClearCart = () => {
-    // 수량 증가 액션 디스패치
-    dispatch(clearCart());
+  const handleModalOpen = () => {
+    // 모달 열기 액션 디스패치
+    dispatch(openModal());
   };
 
   return (
-    <button
-      className="mt-6 w-full bg-red-100 text-white py-3 rounded-md font-semibold hover:bg-red-600 transition-colors"
-      onClick={handleClearCart}
-    >
-      전체 삭제하기
-    </button>
+    <>
+      <button
+        className="mt-6 w-full bg-red-100 text-white py-3 rounded-md font-semibold hover:bg-red-600 transition-colors"
+        onClick={handleModalOpen}
+      >
+        전체 삭제하기
+      </button>
+      {/* 모달 표시 */}
+      {isOpen && (
+        <DeleteModal/>
+      )}
+    </>
   );
 };
diff --git a/week09/mission/Chap9_mission/src/components/DeleteModal.tsx b/week09/mission/Chap9_mission/src/components/DeleteModal.tsx
new file mode 100644
index 0000000..5030946
--- /dev/null
+++ b/week09/mission/Chap9_mission/src/components/DeleteModal.tsx
@@ -0,0 +1,99 @@
+import { useDispatch } from "../hooks/useCustomRedux";
+import { clearCart } from "../slices/cartSlice";
+import { closeModal } from "../slices/modalSlice";
+
+const DeleteModal = () => {
+  const dispatch = useDispatch();
+
+  const handleClearCart = () => {
+    // 수량 증가 액션 디스패치
+    dispatch(clearCart());
+    dispatch(closeModal());
+  };
+
+  const handleModalClose = () => {
+    // 모달 닫기 액션 디스패치
+    dispatch(closeModal());
+  };
+
+  return (
+    <div className="fixed inset-0 z-40 min-h-full overflow-y-auto overflow-x-hidden transition flex items-center">
+      {/* 오버레이 */}
+      <div
+        aria-hidden="true"
+        className="fixed inset-0 w-full h-full bg-black/50 cursor-pointer"
+        onClick={handleModalClose}
+      />
+
+      {/* Modal wrapper */}
+      <div className="relative w-full cursor-pointer pointer-events-none transition my-auto p-4">
+        <div className="w-full py-2 bg-white cursor-default pointer-events-auto dark:bg-gray-800 relative rounded-xl mx-auto max-w-sm">
+          {/* X 버튼 */}
+          <button
+            type="button"
+            onClick={handleModalClose}
+            className="absolute top-2 right-2 rtl:right-auto rtl:left-2"
+          >
+            <svg
+              className="h-4 w-4 cursor-pointer text-gray-400"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                fillRule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                clipRule="evenodd"
+              ></path>
+            </svg>
+            <span className="sr-only">Close</span>
+          </button>
+
+          {/* Body */}
+          <div className="space-y-2 p-2">
+            <div className="p-4 space-y-2 text-center dark:text-white">
+              <h2 className="text-xl font-bold tracking-tight">
+                전체 삭제하기
+              </h2>
+
+              <p className="text-gray-500">
+                장바구니의 모든 상품을 삭제하시겠습니까?
+              </p>
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div className="space-y-2">
+            <div className="border-t border-gray-200" />
+
+            <div className="px-6 py-2">
+              <div className="flex justify-center w-full gap-2">
+                {/* Cancel */}
+                <button
+                  type="button"
+                  onClick={handleModalClose}
+                  className="w-full inline-flex items-center justify-center py-1 gap-1 font-semibold rounded-lg bg-gray-400 hover:bg-gray-500 cursor-pointer"
+                >
+                  취소
+                </button>
+
+                {/* Confirm */}
+                <button
+                  type="button"
+                  onClick={handleClearCart}
+                  className="w-full inline-flex items-center justify-center py-1 gap-1 font-semibold rounded-lg text-white bg-red-600 hover:bg-red-500 cursor-pointer"
+                >
+                  삭제
+                </button>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DeleteModal;
diff --git a/week09/mission/Chap9_mission/src/slices/modalSlice.ts b/week09/mission/Chap9_mission/src/slices/modalSlice.ts
new file mode 100644
index 0000000..0c7a0ab
--- /dev/null
+++ b/week09/mission/Chap9_mission/src/slices/modalSlice.ts
@@ -0,0 +1,35 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+// 모달을 켜고/끄는 상태 값을 `modalSlice`에서 관리해주세요.(예: `isOpen: false`)
+interface ModalState {
+    isOpen: boolean;
+}
+
+
+const initialState: ModalState = { 
+    isOpen: false,
+};
+
+// 모달을 열기(open), 닫기(close) 위한 reducer 함수: openModal(), closeModal()
+const modalSlice = createSlice({
+  name: 'modal',
+  initialState,
+  reducers: {
+    // 모달 열기
+    openModal(state) {
+        state.isOpen = true;
+    },
+    // 모달 닫기
+    closeModal(state) {
+        state.isOpen = false;
+    },
+  },
+})
+
+// 액션 생성자 내보내기
+export const { openModal, closeModal } = modalSlice.actions
+
+// duck pattern reducer는 export default로 내보내야함.
+const modalReducer = modalSlice.reducer;
+
+export default modalReducer;
\ No newline at end of file
diff --git a/week09/mission/Chap9_mission/src/store/store.ts b/week09/mission/Chap9_mission/src/store/store.ts
index 383c430..6b3a5cb 100644
--- a/week09/mission/Chap9_mission/src/store/store.ts
+++ b/week09/mission/Chap9_mission/src/store/store.ts
@@ -1,5 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit';
 import cartReducer from '../slices/cartSlice';
+import modalReducer from '../slices/modalSlice';
 
 // 1. 저장소 생성
 function createStore() {
@@ -7,6 +8,7 @@ function createStore() {
     // 2. 리듀서 설정
     reducer: {
         cart: cartReducer,
+        modal: modalReducer,
     },
     // middleware, devTools 등 기본값 사용 가능
   });

From 9f3af3751f6af0804344b4152e2cfa12ae62317b Mon Sep 17 00:00:00 2001
From: YuJin020303 <ekfzha8020@gmail.com>
Date: Tue, 25 Nov 2025 23:30:14 +0900
Subject: [PATCH 2/4] =?UTF-8?q?feat:=209=EC=A3=BC=EC=B0=A8=20=EB=AF=B8?=
 =?UTF-8?q?=EC=85=983(Zustand)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Chap9_mission/src/components/CartItem.tsx |  9 +-
 .../Chap9_mission/src/components/CartList.tsx |  5 +-
 .../Chap9_mission/src/components/ClearBtn.tsx | 13 ++-
 .../src/components/DeleteModal.tsx            | 15 ++--
 .../Chap9_mission/src/components/Navbar.tsx   | 11 ++-
 .../Chap9_mission/src/components/PriceBox.tsx |  4 +-
 .../Chap9_mission/src/hooks/useCartStore.ts   | 88 +++++++++++++++++++
 .../Chap9_mission/src/hooks/useModalStore.ts  | 39 ++++++++
 8 files changed, 153 insertions(+), 31 deletions(-)
 create mode 100644 week09/mission/Chap9_mission/src/hooks/useCartStore.ts
 create mode 100644 week09/mission/Chap9_mission/src/hooks/useModalStore.ts

diff --git a/week09/mission/Chap9_mission/src/components/CartItem.tsx b/week09/mission/Chap9_mission/src/components/CartItem.tsx
index ed66aa1..56cf42b 100644
--- a/week09/mission/Chap9_mission/src/components/CartItem.tsx
+++ b/week09/mission/Chap9_mission/src/components/CartItem.tsx
@@ -1,22 +1,21 @@
 import type { Lp } from "../types/cart";
-import { useDispatch } from "../hooks/useCustomRedux";
-import { decrement, increment } from "../slices/cartSlice";
+import { useCartActions } from "../hooks/useCartStore";
 
 interface CartItemProps {
   lp: Lp;
 }
 
 export const CartItem = ({ lp }: CartItemProps) => {
-  const dispatch = useDispatch();
+  const { increase, decrease } = useCartActions();
 
   const handleIncrease = () => {
     // 수량 증가 액션 디스패치
-    dispatch(increment({ id: lp.id }));
+    increase(lp.id);
   };
 
   const handleDecrease = () => {
     // 수량 감소 액션 디스패치
-    dispatch(decrement({ id: lp.id }));
+    decrease(lp.id);
   };
 
   return (
diff --git a/week09/mission/Chap9_mission/src/components/CartList.tsx b/week09/mission/Chap9_mission/src/components/CartList.tsx
index 78a3e7b..ba8430f 100644
--- a/week09/mission/Chap9_mission/src/components/CartList.tsx
+++ b/week09/mission/Chap9_mission/src/components/CartList.tsx
@@ -1,10 +1,11 @@
 import { CartItem } from "./CartItem";
 import { PriceBox } from "./PriceBox";
 import { ClearBtn } from "./ClearBtn";
-import { useSelector } from "../hooks/useCustomRedux";
+import { useCartInfo } from "../hooks/useCartStore";
+
 
 export const CartList = () => {
-  const { cartItems } = useSelector((state) => state.cart);
+  const { cartItems } = useCartInfo();
   return (
     <div className="max-w-3xl mx-auto mt-16 mb-5 p-6 bg-white rounded-lg shadow-md">
       {cartItems.map((item) => (
diff --git a/week09/mission/Chap9_mission/src/components/ClearBtn.tsx b/week09/mission/Chap9_mission/src/components/ClearBtn.tsx
index 79c3716..1ba47d8 100644
--- a/week09/mission/Chap9_mission/src/components/ClearBtn.tsx
+++ b/week09/mission/Chap9_mission/src/components/ClearBtn.tsx
@@ -1,16 +1,13 @@
-import { useDispatch } from "../hooks/useCustomRedux";
-import { useSelector } from "../hooks/useCustomRedux";
 import DeleteModal from "./DeleteModal";
-import { openModal } from "../slices/modalSlice";
+import { useModalActions } from "../hooks/useModalStore";
+import { useModalInfo } from "../hooks/useModalStore";
 
 export const ClearBtn = () => {
-  const { isOpen } = useSelector((state) => state.modal);
-
-  const dispatch = useDispatch();
+  const { isOpen } = useModalInfo();
+  const { openModal } = useModalActions();
 
   const handleModalOpen = () => {
-    // 모달 열기 액션 디스패치
-    dispatch(openModal());
+    openModal();
   };
 
   return (
diff --git a/week09/mission/Chap9_mission/src/components/DeleteModal.tsx b/week09/mission/Chap9_mission/src/components/DeleteModal.tsx
index 5030946..bf064fa 100644
--- a/week09/mission/Chap9_mission/src/components/DeleteModal.tsx
+++ b/week09/mission/Chap9_mission/src/components/DeleteModal.tsx
@@ -1,19 +1,18 @@
-import { useDispatch } from "../hooks/useCustomRedux";
-import { clearCart } from "../slices/cartSlice";
-import { closeModal } from "../slices/modalSlice";
+import { useCartActions } from "../hooks/useCartStore";
+import { useModalActions } from "../hooks/useModalStore";
 
 const DeleteModal = () => {
-  const dispatch = useDispatch();
+  const { clearCart } = useCartActions();
+  const { closeModal } = useModalActions();
 
   const handleClearCart = () => {
     // 수량 증가 액션 디스패치
-    dispatch(clearCart());
-    dispatch(closeModal());
+    clearCart();
+    closeModal();
   };
 
   const handleModalClose = () => {
-    // 모달 닫기 액션 디스패치
-    dispatch(closeModal());
+    closeModal();
   };
 
   return (
diff --git a/week09/mission/Chap9_mission/src/components/Navbar.tsx b/week09/mission/Chap9_mission/src/components/Navbar.tsx
index 3d3b758..a46e8bf 100644
--- a/week09/mission/Chap9_mission/src/components/Navbar.tsx
+++ b/week09/mission/Chap9_mission/src/components/Navbar.tsx
@@ -1,14 +1,13 @@
 import { useEffect } from "react";
-import { useDispatch, useSelector } from "../hooks/useCustomRedux";
-import { calculateTotals } from "../slices/cartSlice";
+import { useCartInfo, useCartActions } from "../hooks/useCartStore";
 
 export const Navbar = () => {
-  const { amount, cartItems } = useSelector((state) => state.cart);
-  const dispatch = useDispatch();
+  const { amount, cartItems } = useCartInfo();
+  const { calculateTotals } = useCartActions();
 
   useEffect(() => {
-    dispatch(calculateTotals());
-  }, [dispatch, cartItems]);
+    calculateTotals();
+  }, [cartItems, calculateTotals]);
 
   return (
     <nav className="fixed top-0 left-0 w-full bg-gray-800 text-white py-3 px-4 flex items-center justify-between z-50">
diff --git a/week09/mission/Chap9_mission/src/components/PriceBox.tsx b/week09/mission/Chap9_mission/src/components/PriceBox.tsx
index 9a82481..a97068b 100644
--- a/week09/mission/Chap9_mission/src/components/PriceBox.tsx
+++ b/week09/mission/Chap9_mission/src/components/PriceBox.tsx
@@ -1,7 +1,7 @@
-import { useSelector } from "../hooks/useCustomRedux";
+import { useCartInfo } from "../hooks/useCartStore";
 
 export const PriceBox = () => {
-  const { total } = useSelector((state) => state.cart);
+  const { total } = useCartInfo();
 
   return (
     <h1 className="flex justify-end mt-3 text-lg font-extrabold ">
diff --git a/week09/mission/Chap9_mission/src/hooks/useCartStore.ts b/week09/mission/Chap9_mission/src/hooks/useCartStore.ts
new file mode 100644
index 0000000..d4fa61a
--- /dev/null
+++ b/week09/mission/Chap9_mission/src/hooks/useCartStore.ts
@@ -0,0 +1,88 @@
+import type { CartItems } from '../types/cart'
+import { create } from 'zustand'
+import { immer } from 'zustand/middleware/immer';
+import cartItems from '../constants/cartItems'
+import { useShallow } from "zustand/shallow";
+
+interface CartAction {
+    increase: (id: string) => void;
+    decrease: (id: string) => void;
+    removeItem: (id: string) => void;
+    clearCart: () => void;
+    calculateTotals: () => void;
+}
+
+interface CartState {
+    cartItems: CartItems;
+    amount: number;
+    total: number;
+
+    actions: CartAction;
+}
+
+export const useCartStore = create<CartState>()(
+  immer((set, ) => ({
+    cartItems: cartItems,
+    amount: 0,
+    total: 0,
+    actions: {
+      increase: (id: string): void => {
+        set((state) => {
+          const item = state.cartItems.find((lp) => lp.id === id);
+
+          if (item) {
+            item.amount++;
+          }
+        });
+      },
+      decrease: (id: string): void => {
+        set((state) => {
+            const item = state.cartItems.find((lp) => lp.id === id);
+            
+            if (item) {
+                item.amount--;
+                if (item.amount < 1) {
+                    state.cartItems = state.cartItems.filter((lp) => lp.id !== id);
+                }
+            }
+        });
+      },
+      removeItem: (id: string): void => {
+        set((state) => {
+          state.cartItems = state.cartItems.filter((lp) => lp.id !== id);
+        });
+      },
+      clearCart: (): void => {
+        set((state) => {
+          state.cartItems = [];
+          state.amount = 0;
+          state.total = 0;
+        });
+      },
+      calculateTotals: (): void => {
+        set((state) => {
+            let totalAmount = 0;
+            let totalPrice = 0;
+            
+            state.cartItems.forEach((item) => {
+                totalAmount += item.amount;
+                totalPrice += item.amount * item.price;
+            });
+            
+            state.amount = totalAmount;
+            state.total = totalPrice;
+        });
+      },
+    },
+  }))
+);
+
+export const useCartInfo = () => useCartStore(
+    useShallow((state) => ({
+        cartItems: state.cartItems,
+        amount: state.amount,
+        total: state.total,
+    }))
+);
+
+export const useCartActions = () => useCartStore((state) => state.actions);
\ No newline at end of file
diff --git a/week09/mission/Chap9_mission/src/hooks/useModalStore.ts b/week09/mission/Chap9_mission/src/hooks/useModalStore.ts
new file mode 100644
index 0000000..cb01c1c
--- /dev/null
+++ b/week09/mission/Chap9_mission/src/hooks/useModalStore.ts
@@ -0,0 +1,39 @@
+import { create } from 'zustand'
+import { immer } from 'zustand/middleware/immer';
+import { useShallow } from "zustand/shallow";
+
+interface ModalAction {
+    openModal: () => void;
+    closeModal: () => void;
+}
+
+interface ModalState {
+    isOpen: boolean;
+    actions: ModalAction;
+}
+
+export const useModalStore = create<ModalState>()(
+  immer((set, ) => ({
+    isOpen: false,
+    actions: {
+        openModal: (): void => {
+            set((state) => {
+                state.isOpen = true;
+            });
+        },
+        closeModal: (): void => {
+            set((state) => {
+                state.isOpen = false;
+            });
+        },
+    },
+}))
+);
+
+export const useModalInfo = () => useModalStore(
+    useShallow((state) => ({
+        isOpen: state.isOpen,
+    }))
+);
+
+export const useModalActions = () => useModalStore((state) => state.actions);
\ No newline at end of file

From b00115590641012d8a3eb6cf50dd12cf121b4b31 Mon Sep 17 00:00:00 2001
From: YuJin020303 <ekfzha8020@gmail.com>
Date: Tue, 25 Nov 2025 23:31:45 +0900
Subject: [PATCH 3/4] =?UTF-8?q?etc:=209=EC=A3=BC=EC=B0=A8=20=EB=AF=B8?=
 =?UTF-8?q?=EC=85=983=20=EB=88=84=EB=9D=BD=20=EB=B6=80=EB=B6=84=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80(Provider=20=EC=82=AD=EC=A0=9C)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 week09/mission/Chap9_mission/src/App.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/week09/mission/Chap9_mission/src/App.tsx b/week09/mission/Chap9_mission/src/App.tsx
index d0d3ebc..da92af1 100644
--- a/week09/mission/Chap9_mission/src/App.tsx
+++ b/week09/mission/Chap9_mission/src/App.tsx
@@ -1,15 +1,13 @@
 import "./App.css";
-import { Provider } from "react-redux";
 import { CartList } from "./components/CartList";
 import { Navbar } from "./components/Navbar";
-import store from "./store/store";
 
 function App() {
   return (
-    <Provider store={store}>
+    <div>
       <Navbar />
       <CartList />
-    </Provider>
+    </div>
   );
 }
 

From 0b4a24f3c23ee9289e550ae454de674788c3de5c Mon Sep 17 00:00:00 2001
From: YuJin020303 <ekfzha8020@gmail.com>
Date: Sun, 30 Nov 2025 17:35:59 +0900
Subject: [PATCH 4/4] =?UTF-8?q?fix:=208=EC=A3=BC=EC=B0=A8=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=EB=A6=AC=EB=B7=B0=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Chap8_mission/src/hooks/useThrottle.ts    | 55 ++++++-------------
 .../Chap8_mission/src/pages/HomePage.tsx      | 16 ++++--
 2 files changed, 29 insertions(+), 42 deletions(-)

diff --git a/week08/mission/Chap8_mission/src/hooks/useThrottle.ts b/week08/mission/Chap8_mission/src/hooks/useThrottle.ts
index d9c89bc..d5e9fee 100644
--- a/week08/mission/Chap8_mission/src/hooks/useThrottle.ts
+++ b/week08/mission/Chap8_mission/src/hooks/useThrottle.ts
@@ -1,63 +1,42 @@
 import { useEffect, useRef, useState } from "react";
 
-// value가 true로 바뀔 때 지정한 delay 시간 동안 한 번만 true로 반영
-// value가 false로 바뀌면 즉시 false로 반영
-// value: boolean 상태 값 (ex: inView)
-// delay: throttle 간격(ms)
-// throttledValue: throttle 적용된 상태 값
-
-function useThrottle(value: boolean, delay: number) {
-  // throttledValue: 실제로 외부에 반환되는 상태
+function useThrottle<T>(value: T, delay: number): T {
   const [throttledValue, setThrottledValue] = useState(value);
-
-  // lastExecuted: 마지막으로 throttledValue를 true로 업데이트한 시간
-  const lastExecuted = useRef(0);
-
-  // timer: delay 시간 후에 업데이트하기 위한 setTimeout ID
-  const timer = useRef<number | null>(null); // 브라우저 환경에서 setTimeout은 number 반환
+  const lastExecuted = useRef(Date.now());
+  const timer = useRef<number | null>(null);
 
   useEffect(() => {
-    // value가 false이면 즉시 반영
-    if (!value) {
-      setThrottledValue(false);
+    const now = Date.now();
+    const remaining = delay - (now - lastExecuted.current);
 
-      // 이미 등록된 타이머가 있다면 취소
-      if (timer.current) {
-        clearTimeout(timer.current);
-        timer.current = null;
-      }
-      return; // 이후 로직 실행 X
+    // 기존 타이머 제거
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
     }
 
-    const now = Date.now(); // 현재 시간
-    const remaining = delay - (now - lastExecuted.current); 
-    // lastExecuted 기준으로 남은 delay 계산
-
     if (remaining <= 0) {
-      // 마지막 실행 이후 delay 이상 지났으면 즉시 true 반영
+      // delay 지나면 즉시 실행
       lastExecuted.current = now;
-      setThrottledValue(true);
+      setThrottledValue(value);
     } else {
-      // delay가 남아 있으면 이전 타이머 취소 후 새 타이머 등록
-      if (timer.current) clearTimeout(timer.current);
-
+      // 남은 시간만큼 타이머
       timer.current = window.setTimeout(() => {
-        lastExecuted.current = Date.now(); // 실행 시간 업데이트
-        setThrottledValue(true);           // throttledValue 갱신
-        timer.current = null;              // 타이머 리셋
+        lastExecuted.current = Date.now();
+        setThrottledValue(value);
+        timer.current = null;
       }, remaining);
     }
 
-    // Clean-up: effect 재실행 전 타이머 정리
     return () => {
       if (timer.current) {
         clearTimeout(timer.current);
         timer.current = null;
       }
     };
-  }, [value, delay]); // value 또는 delay 변경 시 effect 실행
+  }, [value, delay]);
 
-  return throttledValue; // throttle 적용된 상태 반환
+  return throttledValue;
 }
 
 export default useThrottle;
\ No newline at end of file
diff --git a/week08/mission/Chap8_mission/src/pages/HomePage.tsx b/week08/mission/Chap8_mission/src/pages/HomePage.tsx
index 71babca..f2fe586 100644
--- a/week08/mission/Chap8_mission/src/pages/HomePage.tsx
+++ b/week08/mission/Chap8_mission/src/pages/HomePage.tsx
@@ -25,14 +25,22 @@ const HomePage = () => {
   console.log("data:", data);
 
   const { ref, inView } = useInView({ threshold: 0 });
-  const throttledInView = useThrottle(inView, 3000);
 
-  // throttledInView 감시
+  const shouldFetch = inView && !isFetching && hasNextPage;
+  const throttledInView = useThrottle(shouldFetch, 1000);
+
   useEffect(() => {
-    if (throttledInView && !isFetching && hasNextPage) {
+    if (throttledInView) {
       fetchNextPage();
     }
-  }, [throttledInView, isFetching, hasNextPage, fetchNextPage]);
+  }, [throttledInView, fetchNextPage]);
+
+  // throttledInView 감시
+  // useEffect(() => {
+  //   if (throttledInView && !isFetching && hasNextPage) {
+  //     fetchNextPage();
+  //   }
+  // }, [throttledInView, isFetching, hasNextPage, fetchNextPage]);
 
   if (isError) {
     return <div>Error occurred while fetching data.</div>;