feat:#9 useDeviceType 훅, react-responsive 사용

package.json

@@ -15,7 +15,8 @@
     "framer-motion": "^11.0.5",
     "next": "14.1.0",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-responsive": "^9.0.2"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.10",

src/components/organisms/navigation/navigation/Navigation.tsx

@@ -2,15 +2,19 @@
 import NoticeIcon from "../../../atoms/notice/noticeIcon/NoticeIcon";
 import Image from "next/image";
 import React, { useEffect, useState } from "react";
-import logo from "../../../../../public/icons/logo.png";
-import menu from "../../../../../public/icons/menu.png";
+import logo from "@public/icons/logo.png";
+import menu from "@public/icons/menu.png";
 
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import NavigationList from "../navigationList/NavigationList";
 
+import ModalPortal from "@/utils/ModalPortal";
+import useDeviceType from "@/hooks/useDeviceType";
+
 const Navigation = () => {
   const [isOpened, setIsOpened] = useState(false);
+  const deviceType = useDeviceType();
   const handleIsOpened = () => {
     setIsOpened(!isOpened);
   };
@@ -25,9 +29,12 @@ const Navigation = () => {
   return (
     <>
       <div className="relative z-header box-border">
-        {isOpened && (
-          <NavigationList isOpened={isOpened} setIsOpened={setIsOpened} />
-        )}
+        <ModalPortal>
+          {isOpened && (
+            <NavigationList isOpened={isOpened} setIsOpened={setIsOpened} />
+          )}
+        </ModalPortal>
+
         <div className="fixed z-header  flex items-center w-360 justify-between h-56 py-12 px-16 bg-main-background box-border">
           <Link href={"/"}>
             <Image className="w-67 h-32" src={logo} alt="logo" />

src/components/organisms/navigation/navigationList/NavigationList.tsx

@@ -1,3 +1,4 @@
+import useDeviceType from "@/hooks/useDeviceType";
 import Image from "next/image";
 import Link from "next/link";
 import React from "react";
@@ -19,9 +20,19 @@ const NavigationList = ({
   isOpened,
   setIsOpened,
 }: navigationListProps) => {
+  const deviceType = useDeviceType();
+
   return (
-    <div className="fixed z-navigatoinList bg-[#00000030] top-0 right-0 w-full h-full ">
-      <div className="absolute right-0 flex flex-col w-240 h-screen bg-main-point">
+    <div
+      className={`${
+        deviceType === "mobile" ? "w-screen" : "w-max pl-150"
+      } fixed h-screen flex bg-[#00000045] z-modal `}
+    >
+      <div
+        className={`${
+          deviceType === "mobile" ? "absolute right-0" : ""
+        } flex flex-col w-240 h-screen bg-main-point`}
+      >
         <div
           className="mb-24 cursor-pointer"
           onClick={() => setIsOpened(false)}

src/hooks/useDeviceType.tsx

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+import { useMediaQuery } from "react-responsive";
+
+const useDeviceType = () => {
+  const [deviceType, setDeviceType] = useState("");
+  const isMobile = useMediaQuery({ query: "(max-width: 999px)" });
+
+  useEffect(() => {
+    if (isMobile) {
+      setDeviceType("mobile");
+    } else {
+      setDeviceType("tablet");
+    }
+  }, [isMobile]);
+
+  return deviceType;
+};
+
+export default useDeviceType;