chore: 로컬 스토리지로 visible 상태 관리

apps/web/src/components/app-download-header.tsx

@@ -1,11 +1,22 @@
 "use client";
 
+import { useEffect, useState } from "react";
+import LocalStorage from "~/libs/localStorage";
 import { useAppDownloadModalStore } from "./app-download-modal";
 import { Close, Logo } from "./ui/icons";
 
-const AppDownloadHeader = () => {
+interface Props {
+  onClose: () => void;
+}
+
+const AppDownloadHeader = ({ onClose }: Props) => {
   const { open } = useAppDownloadModalStore();
 
+  const handleClose: React.SVGProps<SVGSVGElement>["onClick"] = (e) => {
+    e.stopPropagation();
+    onClose();
+  };
+
   return (
     <div className="w-full px-[20px] py-[10px] bg-[#2C2C2C]">
       <button
@@ -14,7 +25,7 @@ const AppDownloadHeader = () => {
         onClick={open}
       >
         <div className="flex justify-center items-center gap-[12px]">
-          <Close width={20} height={20} />
+          <Close width={20} height={20} onClick={handleClose} />
           <Logo />
           <div className="flex flex-col justify-center items-start">
             <span className="text-[#ffffff] text-[16px] font-bold leading-[20px]">
@@ -35,4 +46,22 @@ const AppDownloadHeader = () => {
   );
 };
 
-export default AppDownloadHeader;
+const AppDownloadHeaderAdaptor = () => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const hide = localStorage.getItem("download-header-close");
+    setVisible(hide === null ? true : hide === "false");
+  }, []);
+
+  const onClose = () => {
+    localStorage.setItem("download-header-close", "true");
+    setVisible(false);
+  };
+
+  if (typeof window === "undefined") return null;
+
+  return visible ? <AppDownloadHeader onClose={onClose} /> : null;
+};
+
+export default AppDownloadHeaderAdaptor;

apps/web/src/libs/localStorage.ts

@@ -0,0 +1,48 @@
+const LocalStorage = {
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  set: (key: string, value: any) => {
+    if (typeof window === "undefined") return;
+
+    try {
+      const serializedValue = JSON.stringify(value);
+      localStorage.setItem(key, serializedValue);
+    } catch (e) {
+      console.error("LocalStorage set error:", e);
+    }
+  },
+
+  get: (key: string) => {
+    if (typeof window === "undefined") return null;
+
+    try {
+      const serializedValue = localStorage.getItem(key);
+      if (serializedValue === null) return null;
+      return JSON.parse(serializedValue);
+    } catch (e) {
+      console.error("LocalStorage get error:", e);
+      return null;
+    }
+  },
+
+  remove: (key: string) => {
+    if (typeof window === "undefined") return;
+
+    try {
+      localStorage.removeItem(key);
+    } catch (e) {
+      console.error("LocalStorage remove error:", e);
+    }
+  },
+
+  clear: () => {
+    if (typeof window === "undefined") return;
+
+    try {
+      localStorage.clear();
+    } catch (e) {
+      console.error("LocalStorage clear error:", e);
+    }
+  },
+};
+
+export default LocalStorage;