[유선향]- sprint6

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "firebase": "^11.1.0",
+    "lodash.throttle": "^4.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^7.1.1",

src/App.js

@@ -1,6 +1,6 @@
 import { Outlet } from "react-router-dom";
 import React from "react";
-import Nav from "./components/Nav";
+import Nav from "./components/common/Layout/Nav";
 import styled from "styled-components";
 
 const Contents = styled.div`
@@ -10,7 +10,7 @@ const Contents = styled.div`
 function App() {
   return (
     <div>
-      <Nav></Nav>
+      <Nav />
       <Contents>
         <Outlet />
       </Contents>

src/Hooks/useWindowSize.js

@@ -1,25 +1,25 @@
 import { useState, useEffect } from "react";
-
-const useWindowSize = () => {
+import throttle from "lodash.throttle";
+export default function useWindowSize() {
   const [deviceType, setDeviceType] = useState("desktop");
-  const handleResize = () => {
-    if (window.matchMedia("(max-width: 767px)").matches) {
-      setDeviceType("mobile");
-    } else if (window.matchMedia("(max-width: 1199px)").matches) {
-      setDeviceType("tablet");
-    } else {
-      setDeviceType("desktop");
-    }
-  };
-
+  //
   useEffect(() => {
+    const handleResize = throttle(() => {
+      if (window.matchMedia("(max-width: 375px)").matches) {
+        setDeviceType("mobile");
+        return;
+      }
+      if (window.matchMedia("(max-width: 768px)").matches) {
+        setDeviceType("tablet");
+        return;
+      }
+      setDeviceType("desktop");
+    }, 2000);
     handleResize();
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
     };
   }, []);
   return deviceType;
-};
-
-export default useWindowSize;
+}