diff --git a/.husky/pre-commit b/.husky/pre-commit
index e69de29..6920e3a 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+npx lint-stagedx
\ No newline at end of file
diff --git a/src/@lib/equalities/deepEquals.ts b/src/@lib/equalities/deepEquals.ts
index ccbd747..264f9b7 100644
--- a/src/@lib/equalities/deepEquals.ts
+++ b/src/@lib/equalities/deepEquals.ts
@@ -38,11 +38,7 @@ export function deepEquals<T>(objA: T, objB: T): boolean {
 
   // 5. 모든 키에 대해 깊은 비교 수행
   for (const key of keysA) {
-    if (
-      // Q. hasOwn에 에러가 발생합니다 어떻게 수정해야 좋을까요
-      !Object.hasOwn(objB as object, key) ||
-      !deepEquals((objA as any)[key], (objB as any)[key])
-    ) {
+    if (!deepEquals(objA[key as keyof T], objB[key as keyof T])) {
       return false;
     }
   }
diff --git a/src/App.tsx b/src/App.tsx
index ab8dab6..efe50ee 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,6 @@ import { Header } from "./components/Header";
 import { ItemList } from "./components/ItemList";
 import { ComplexForm } from "./components/ComplexForm";
 import { ThemeContextProvider } from "./context/ThemeContext";
-import { ItemContextProvider, useItems } from "./context/ItemContext";
 import { UserContextProvider } from "./context/UserContext";
 import { NotificationContextProvider } from "./context/NotificationContext";
 import { NotificationSystem } from "./components/NotificationSystem";
@@ -12,33 +11,24 @@ const App = () => {
     <ThemeContextProvider>
       <NotificationContextProvider>
         <UserContextProvider>
-          <ItemContextProvider>
-            <Header />
-            <MainContent />
-            <NotificationSystem />
-          </ItemContextProvider>
+          {/* <ItemContextProvider> */}
+          <Header />
+          <div className="container mx-auto px-4 py-8">
+            <div className="flex flex-col md:flex-row">
+              <div className="w-full md:w-1/2 md:pr-4">
+                <ItemList />
+              </div>
+              <div className="w-full md:w-1/2 md:pl-4">
+                <ComplexForm />
+              </div>
+            </div>
+          </div>
+          <NotificationSystem />
+          {/* </ItemContextProvider> */}
         </UserContextProvider>
       </NotificationContextProvider>
     </ThemeContextProvider>
   );
 };
 
-// 아이템 리스트와 폼을 포함하는 메인 컨텐츠
-const MainContent = () => {
-  const { items, addItems } = useItems();
-
-  return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="flex flex-col md:flex-row">
-        <div className="w-full md:w-1/2 md:pr-4">
-          <ItemList items={items} onAddItemsClick={addItems} />
-        </div>
-        <div className="w-full md:w-1/2 md:pl-4">
-          <ComplexForm />
-        </div>
-      </div>
-    </div>
-  );
-};
-
 export default App;
diff --git a/src/components/ItemList.tsx b/src/components/ItemList.tsx
index ac4cea5..47441f8 100644
--- a/src/components/ItemList.tsx
+++ b/src/components/ItemList.tsx
@@ -1,16 +1,26 @@
-import { useState } from "react";
-import { Item } from "../types";
-import { renderLog } from "../utils";
+import { useCallback, useState } from "react";
+// import { Item } from "../types";
+import { generateItems, renderLog } from "../utils";
 import { useTheme } from "../context/ThemeContext";
 
-export const ItemList: React.FC<{
-  items: Item[];
-  onAddItemsClick: () => void;
-}> = ({ items, onAddItemsClick }) => {
+export const ItemList: React.FC = () => {
   renderLog("ItemList rendered");
   const [filter, setFilter] = useState("");
   const { theme } = useTheme();
 
+  // () => generateItems(1000): 왜 이렇게하면 괜찮을까?
+  // 화살표 함수를 했을 때는 첫 렌더링 시에만
+  // generateItems, 컴포넌트가 리렌더링 될때마다 호출하게 된다
+  // gus
+  const [items, setItems] = useState(() => generateItems(1000));
+
+  const addItems = useCallback(() => {
+    setItems((prevItems) => [
+      ...prevItems,
+      ...generateItems(1000, prevItems.length),
+    ]);
+  }, []);
+
   const filteredItems = items.filter(
     (item) =>
       item.name.toLowerCase().includes(filter.toLowerCase()) ||
@@ -29,7 +39,7 @@ export const ItemList: React.FC<{
           <button
             type="button"
             className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-xs"
-            onClick={onAddItemsClick}
+            onClick={addItems}
           >
             대량추가
           </button>
diff --git a/src/context/AppContext.tsx b/src/context/AppContext.tsx
deleted file mode 100644
index e0160ab..0000000
--- a/src/context/AppContext.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-// import { createContext, useContext, useState } from "react";
-// import { generateItems } from "../utils";
-// import { Item } from "../types";
-
-// interface AppContextType {
-//   items: Item[];
-//   addItems: () => void;
-// }
-
-// const AppContext = createContext<AppContextType | undefined>(undefined);
-
-// // AppContext에 정의한 값을 가져와서 사용할 때 적용하는 훅
-// export const useAppContext = () => {
-//   const context = useContext(AppContext);
-//   if (context === undefined) {
-//     throw new Error("useAppContext must be used within an AppProvider");
-//   }
-//   return context;
-// };
-
-// // 감싸는 객체는 ContextProvider라는 이름으로 생성하는 것을 추천
-// export const AppContextProvider = ({
-//   children,
-// }: {
-//   children: React.ReactNode;
-// }) => {
-
-//   // const contextValue: AppContextType = {
-//   //   addItems,
-//   //   items,
-//   // };
-
-//   return (
-//     <AppContext.Provider value={contextValue}>{children}</AppContext.Provider>
-//   );
-// };
diff --git a/src/context/ItemContext.tsx b/src/context/ItemContext.tsx
index ab4c77b..e917a50 100644
--- a/src/context/ItemContext.tsx
+++ b/src/context/ItemContext.tsx
@@ -23,23 +23,6 @@ const ItemContext = createContext<ItemContextType | null>(null);
 
 // 3. provider
 export const ItemContextProvider = ({ children }: PropsWithChildren) => {
-  const [items, setItems] = useState(generateItems(1000));
-
-  const addItems = useCallback(() => {
-    setItems((prevItems) => [
-      ...prevItems,
-      ...generateItems(1000, prevItems.length),
-    ]);
-  }, []);
-
-  const value = useMemo(
-    () => ({
-      items,
-      addItems,
-    }),
-    [items, addItems]
-  );
-
   return <ItemContext.Provider value={value}>{children}</ItemContext.Provider>;
 };