Repository: team-incube/Gwangju-talent-festival-Client
Pull request #11: feat: 모바일 헤더 제작
Author: login: happytaeyoon
Labels: name: enhancement
description: New feature or request
Created: 2025-05-05T15:13:03Z | Merged: 2025-05-06T05:52:40Z

## 💡 PR 요약
헤더 모바일 반응형 제작하였습니다

## 📋 작업 내용
Prettier 설정 추가
모바일 반응형 브레이크포인트 추가
<img width="304" alt="스크린샷 2025-05-06 오전 12 32 29" src="https://github.com/user-attachments/assets/b6d1ee8c-52ab-4b50-bfe7-18d50db425c6" />




Diff:
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..069fc7b7
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "singleQuote": false,
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "avoid"
+}
diff --git a/src/shared/asset/svg/CloseIcon.tsx b/src/shared/asset/svg/CloseIcon.tsx
new file mode 100644
index 00000000..e434a2cc
--- /dev/null
+++ b/src/shared/asset/svg/CloseIcon.tsx
@@ -0,0 +1,18 @@
+import { SvgProps } from "@/shared/model/SvgProps";
+
+export const CloseIcon = ({ height = 24, width = 24, color = "#121212" }: SvgProps) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.3 5.70998C18.2075 5.61728 18.0976 5.54373 17.9766 5.49355C17.8556 5.44337 17.7259 5.41754 17.595 5.41754C17.464 5.41754 17.3343 5.44337 17.2134 5.49355C17.0924 5.54373 16.9825 5.61728 16.89 5.70998L12 10.59L7.10998 5.69998C7.0174 5.6074 6.90749 5.53396 6.78652 5.48385C6.66556 5.43375 6.53591 5.40796 6.40498 5.40796C6.27405 5.40796 6.1444 5.43375 6.02344 5.48385C5.90247 5.53396 5.79256 5.6074 5.69998 5.69998C5.6074 5.79256 5.53396 5.90247 5.48385 6.02344C5.43375 6.1444 5.40796 6.27405 5.40796 6.40498C5.40796 6.53591 5.43375 6.66556 5.48385 6.78652C5.53396 6.90749 5.6074 7.0174 5.69998 7.10998L10.59 12L5.69998 16.89C5.6074 16.9826 5.53396 17.0925 5.48385 17.2134C5.43375 17.3344 5.40796 17.464 5.40796 17.595C5.40796 17.7259 5.43375 17.8556 5.48385 17.9765C5.53396 18.0975 5.6074 18.2074 5.69998 18.3C5.79256 18.3926 5.90247 18.466 6.02344 18.5161C6.1444 18.5662 6.27405 18.592 6.40498 18.592C6.53591 18.592 6.66556 18.5662 6.78652 18.5161C6.90749 18.466 7.0174 18.3926 7.10998 18.3L12 13.41L16.89 18.3C16.9826 18.3926 17.0925 18.466 17.2134 18.5161C17.3344 18.5662 17.464 18.592 17.595 18.592C17.7259 18.592 17.8556 18.5662 17.9765 18.5161C18.0975 18.466 18.2074 18.3926 18.3 18.3C18.3926 18.2074 18.466 18.0975 18.5161 17.9765C18.5662 17.8556 18.592 17.7259 18.592 17.595C18.592 17.464 18.5662 17.3344 18.5161 17.2134C18.466 17.0925 18.3926 16.9826 18.3 16.89L13.41 12L18.3 7.10998C18.68 6.72998 18.68 6.08998 18.3 5.70998Z"
+        fill="#121212"
+      />
+    </svg>
+  );
+};
diff --git a/src/shared/asset/svg/Logo.tsx b/src/shared/asset/svg/Logo.tsx
index c55d0671..7947c1f6 100644
--- a/src/shared/asset/svg/Logo.tsx
+++ b/src/shared/asset/svg/Logo.tsx
@@ -1,10 +1,6 @@
 import { SvgProps } from "@/shared/model/SvgProps";
 
-export const Logo = ({
-  height = 24,
-  width = 24,
-  color = "#121212",
-}: SvgProps) => {
+export const Logo = ({ height = 24, width = 24, color = "#121212", ...props }: SvgProps) => {
   return (
     <svg
       width={width}
@@ -12,6 +8,7 @@ export const Logo = ({
       viewBox="0 0 501 305"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      {...props}
     >
       <path
         d="M1.51842 115.5C0.800015 115.5 0.315979 114.765 0.599715 114.105L21.9596 64.4202C22.5909 62.9517 24.0359 62 25.6344 62H83.5C84.0523 62 84.5 61.5523 84.5 61V1C84.5 0.447715 84.9477 0 85.5 0H143C143.552 0 144 0.447714 144 0.999999V60.5C144 61.0523 144.448 61.5 145 61.5H218C218.552 61.5 219 61.9477 219 62.5V114.5C219 115.052 218.552 115.5 218 115.5H170.5C169.948 115.5 169.5 115.948 169.5 116.5V167.989C169.5 168.546 169.954 168.995 170.511 168.989L215.136 168.52C215.934 168.511 216.419 169.395 215.985 170.064L186.793 215.048C186.61 215.33 186.298 215.501 185.962 215.504L118.502 215.993C117.949 215.997 117.498 215.551 117.495 214.998L117.005 115.995C117.002 115.445 116.555 115 116.005 115H107.49C106.941 115 106.495 115.441 106.49 115.989L106.066 156.218C106.023 160.358 105.093 164.441 103.34 168.192L84.7713 207.92C84.6059 208.273 84.2498 208.499 83.8594 208.496L2.56279 208.009C1.83304 208.005 1.35359 207.246 1.66332 206.585L23.2302 160.576C23.3949 160.224 23.7478 160 24.1357 160H55.4887C56.0454 160 56.4949 159.545 56.4887 158.989L56.0111 116.489C56.005 115.941 55.5591 115.5 55.0112 115.5H1.51842Z"
diff --git a/src/shared/asset/svg/MobileMenuIcon.tsx b/src/shared/asset/svg/MobileMenuIcon.tsx
new file mode 100644
index 00000000..0ab514ec
--- /dev/null
+++ b/src/shared/asset/svg/MobileMenuIcon.tsx
@@ -0,0 +1,18 @@
+import { SvgProps } from "@/shared/model/SvgProps";
+
+export const MobileMenuIcon = ({ height = 24, width = 24, color = "#121212" }: SvgProps) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H4C3.45 16 3 16.45 3 17C3 17.55 3.45 18 4 18ZM4 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13ZM3 7C3 7.55 3.45 8 4 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H4C3.45 6 3 6.45 3 7Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
diff --git a/src/shared/model/SvgProps.tsx b/src/shared/model/SvgProps.tsx
index b1b82dc0..25cf9fdf 100644
--- a/src/shared/model/SvgProps.tsx
+++ b/src/shared/model/SvgProps.tsx
@@ -1,4 +1,6 @@
-export type SvgProps = {
+import { SVGProps } from "react";
+
+export type SvgProps = SVGProps<SVGSVGElement> & {
   height?: number;
   width?: number;
   color?: string;
diff --git a/src/shared/ui/Header/index.tsx b/src/shared/ui/Header/index.tsx
index f2c57056..e6a0f2c9 100644
--- a/src/shared/ui/Header/index.tsx
+++ b/src/shared/ui/Header/index.tsx
@@ -1,46 +1,110 @@
 "use client";
 
+import { CloseIcon } from "@/shared/asset/svg/CloseIcon";
 import { Logo } from "@/shared/asset/svg/Logo";
+import { MobileMenuIcon } from "@/shared/asset/svg/MobileMenuIcon";
 import { cn } from "@/shared/utils/cn";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
 
 export default function Header() {
   const pathname = usePathname();
-  const isAuthPage =
-    pathname.startsWith("/signin") || pathname.startsWith("/signup");
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  useEffect(() => {
+    if (isMobileMenuOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isMobileMenuOpen]);
+
+  const isAuthPage = pathname.startsWith("/signin") || pathname.startsWith("/signup");
   if (isAuthPage) return null;
+
+  const toggleMobileMenu = () => {
+    setIsMobileMenuOpen(prevState => !prevState);
+  };
+
+  const closeMobileMenu = () => {
+    setIsMobileMenuOpen(false);
+  };
+
+  const links = [
+    { href: "/slogan", label: "슬로건 공모" },
+    { href: "", label: "참여신청" },
+    { href: "", label: "FaQ" },
+    { href: "", label: "예선" },
+    { href: "", label: "예매" },
+    { href: "", label: "본선" },
+  ];
+
   return (
-    <header className={cn("flex items-center py-[1rem] justify-around")}>
-      <Link href="/">
-        <Logo height={42} width={67} />
-      </Link>
-      <div className={cn("flex gap-[2.5rem] text-body3b")}>
-        <Link href="/slogan">슬로건 공모</Link>
-        <Link href="">참여신청</Link>
-        <Link href="">FaQ</Link>
-        <Link href="">예선</Link>
-        <Link href="">예매</Link>
-        <Link href="">본선</Link>
-      </div>
-      <div className={cn("flex gap-[1.5rem] text-body3b")}>
-        <Link
-          className={cn(
-            "border-gray-100 border border-solid px-24 py-12 rounded-lg"
-          )}
-          href="/signin"
-        >
-          로그인
+    <>
+      <header
+        className={cn(
+          "flex items-center py-[1rem] justify-around mobile:justify-between  mobile:px-16",
+        )}
+      >
+        <Link href="/">
+          <Logo className="h-[42px] w-[67px] mobile:h-[32px] mobile:w-[52px]" />
         </Link>
-        <Link
+        <div className={cn("flex gap-[2.5rem] text-body3b mobile:hidden")}>
+          {links.map((link, index) => (
+            <Link key={index} href={link.href}>
+              {link.label}
+            </Link>
+          ))}
+        </div>
+        <div className={cn("hidden mobile:block")}>
+          <div className={cn("flex text-caption2r gap-16")}>
+            <Link
+              className={cn("border-gray-100 border border-solid rounded-lg px-12 py-8")}
+              href="/signin"
+            >
+              로그인
+            </Link>
+            <Link
+              className={cn("border-gray-100 border border-solid rounded-lg px-12 py-8")}
+              href="/signup"
+            >
+              회원가입
+            </Link>
+            <div onClick={toggleMobileMenu} className={cn("place-self-center")}>
+              {isMobileMenuOpen ? <CloseIcon /> : <MobileMenuIcon />}
+            </div>
+          </div>
+        </div>
+      </header>
+      {/* 모바일 헤더 사이드바 */}
+      {isMobileMenuOpen && (
+        <div
           className={cn(
-            "border-gray-100 border border-solid px-24 py-12 rounded-lg"
+            "absolute top-74px right-0 w-full h-[calc(100vh-68px)]  mobile:block hidden z-10",
           )}
-          href="/signup"
         >
-          회원가입
-        </Link>
-      </div>
-    </header>
+          <div className={cn("flex h-full")}>
+            <div
+              className={cn("w-[calc(100vw-129px)]", "bg-black/40")}
+              onClick={closeMobileMenu}
+            ></div>
+            <div className={cn("w-[129px] bg-white")}>
+              <div className={cn("flex flex-col gap-[2.5rem] text-body3b m-26")}>
+                {links.map((link, index) => (
+                  <Link key={index} href={link.href} onClick={closeMobileMenu}>
+                    {link.label}
+                  </Link>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
   );
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index ca472c6f..9524c2c5 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -14,6 +14,10 @@ export default {
       fontFamily: {
         pretendard: ["Pretendard", "sans-serif"],
       },
+      screens: {
+        mobile: { max: "640px" },
+      },
+
       fontSize: {
         h1: ["44px", { lineHeight: "120%", fontWeight: "500" }],
         h2: ["40px", { lineHeight: "120%", fontWeight: "500" }],


Reviews:
user: login: zaewc
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-05T15:53:32Z
user: login: happytaeyoon
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-06T05:52:16Z

Review comments:
diff_hunk: @@ -1,46 +1,95 @@
 "use client";
 
+import { CloseIcon } from "@/shared/asset/svg/CloseIcon";
 import { Logo } from "@/shared/asset/svg/Logo";
+import { MobileMenuIcon } from "@/shared/asset/svg/MobileMenuIcon";
 import { cn } from "@/shared/utils/cn";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useState } from "react";
 
 export default function Header() {
   const pathname = usePathname();
-  const isAuthPage =
-    pathname.startsWith("/signin") || pathname.startsWith("/signup");
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  const isAuthPage = pathname.startsWith("/signin") || pathname.startsWith("/signup");
   if (isAuthPage) return null;
+
+  const toggleMobileMenu = () => {
+    setIsMobileMenuOpen(prevState => !prevState);
+  };
+
+  const closeMobileMenu = () => {
+    setIsMobileMenuOpen(false);
+  };
+
+  const links = [
+    { href: "/slogan", label: "슬로건 공모" },
+    { href: "", label: "참여신청" },
+    { href: "", label: "FaQ" },
+    { href: "", label: "예선" },
+    { href: "", label: "예매" },
+    { href: "", label: "본선" },
+  ];
+
   return (
-    <header className={cn("flex items-center py-[1rem] justify-around")}>
-      <Link href="/">
-        <Logo height={42} width={67} />
-      </Link>
-      <div className={cn("flex gap-[2.5rem] text-body3b")}>
-        <Link href="/slogan">슬로건 공모</Link>
-        <Link href="">참여신청</Link>
-        <Link href="">FaQ</Link>
-        <Link href="">예선</Link>
-        <Link href="">예매</Link>
-        <Link href="">본선</Link>
-      </div>
-      <div className={cn("flex gap-[1.5rem] text-body3b")}>
-        <Link
-          className={cn(
-            "border-gray-100 border border-solid px-24 py-12 rounded-lg"
-          )}
-          href="/signin"
-        >
-          로그인
+    <>
+      <header
+        className={cn(
+          "flex items-center py-[1rem] justify-around mobile:justify-between  mobile:px-16",
+        )}
+      >
+        <Link href="/">
+          <Logo className="h-[42px] w-[67px] mobile:h-[32px] mobile:w-[52px]" />
         </Link>
-        <Link
+        <div className={cn("flex gap-[2.5rem] text-body3b mobile:hidden")}>
+          {links.map((link, index) => (
+            <Link key={index} href={link.href}>
+              {link.label}
+            </Link>
+          ))}
+        </div>
+        <div className={cn("hidden mobile:block")}>
+          <div className={cn("flex text-caption2r gap-16")}>
+            <Link
+              className={cn("border-gray-100 border border-solid rounded-lg px-12 py-8")}
+              href="/signin"
+            >
+              로그인
+            </Link>
+            <Link
+              className={cn("border-gray-100 border border-solid rounded-lg px-12 py-8")}
+              href="/signup"
+            >
+              회원가입
+            </Link>
+            <div onClick={toggleMobileMenu} className={cn("place-self-center")}>
+              {isMobileMenuOpen ? <CloseIcon /> : <MobileMenuIcon />}
+            </div>
+          </div>
+        </div>
+      </header>
+      {/* 모바일 헤더 사이드바 */}
+      {isMobileMenuOpen && (
+        <div
           className={cn(
-            "border-gray-100 border border-solid px-24 py-12 rounded-lg"
+            "absolute top-74px right-0 w-full h-[calc(100vh-74px)]  mobile:block hidden z-10",
           )}
-          href="/signup"
         >
-          회원가입
-        </Link>
-      </div>
-    </header>
+          <div className={cn("flex h-full")}>
+            <div className="w-[calc(100vw-129px)] bg-black bg-opacity-40"></div>
path: src/shared/ui/Header/index.tsx
user: login: zaewc
body: 이 영역에 아무 기능 없는데 의도하신 건가요?? 클릭하면 사이드바 닫히게 해도 좋을 것 같아요...
created_at: 2025-05-05T15:50:38Z
author_association: MEMBER
diff_hunk: @@ -1,46 +1,95 @@
 "use client";
 
+import { CloseIcon } from "@/shared/asset/svg/CloseIcon";
 import { Logo } from "@/shared/asset/svg/Logo";
+import { MobileMenuIcon } from "@/shared/asset/svg/MobileMenuIcon";
 import { cn } from "@/shared/utils/cn";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useState } from "react";
 
 export default function Header() {
   const pathname = usePathname();
-  const isAuthPage =
-    pathname.startsWith("/signin") || pathname.startsWith("/signup");
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  const isAuthPage = pathname.startsWith("/signin") || pathname.startsWith("/signup");
   if (isAuthPage) return null;
+
+  const toggleMobileMenu = () => {
+    setIsMobileMenuOpen(prevState => !prevState);
+  };
+
+  const closeMobileMenu = () => {
+    setIsMobileMenuOpen(false);
+  };
+
+  const links = [
+    { href: "/slogan", label: "슬로건 공모" },
+    { href: "", label: "참여신청" },
+    { href: "", label: "FaQ" },
+    { href: "", label: "예선" },
+    { href: "", label: "예매" },
+    { href: "", label: "본선" },
+  ];
+
   return (
-    <header className={cn("flex items-center py-[1rem] justify-around")}>
-      <Link href="/">
-        <Logo height={42} width={67} />
-      </Link>
-      <div className={cn("flex gap-[2.5rem] text-body3b")}>
-        <Link href="/slogan">슬로건 공모</Link>
-        <Link href="">참여신청</Link>
-        <Link href="">FaQ</Link>
-        <Link href="">예선</Link>
-        <Link href="">예매</Link>
-        <Link href="">본선</Link>
-      </div>
-      <div className={cn("flex gap-[1.5rem] text-body3b")}>
-        <Link
-          className={cn(
-            "border-gray-100 border border-solid px-24 py-12 rounded-lg"
-          )}
-          href="/signin"
-        >
-          로그인
+    <>
+      <header
+        className={cn(
+          "flex items-center py-[1rem] justify-around mobile:justify-between  mobile:px-16",
+        )}
+      >
+        <Link href="/">
+          <Logo className="h-[42px] w-[67px] mobile:h-[32px] mobile:w-[52px]" />
         </Link>
-        <Link
+        <div className={cn("flex gap-[2.5rem] text-body3b mobile:hidden")}>
+          {links.map((link, index) => (
+            <Link key={index} href={link.href}>
+              {link.label}
+            </Link>
+          ))}
+        </div>
+        <div className={cn("hidden mobile:block")}>
+          <div className={cn("flex text-caption2r gap-16")}>
+            <Link
+              className={cn("border-gray-100 border border-solid rounded-lg px-12 py-8")}
+              href="/signin"
+            >
+              로그인
+            </Link>
+            <Link
+              className={cn("border-gray-100 border border-solid rounded-lg px-12 py-8")}
+              href="/signup"
+            >
+              회원가입
+            </Link>
+            <div onClick={toggleMobileMenu} className={cn("place-self-center")}>
+              {isMobileMenuOpen ? <CloseIcon /> : <MobileMenuIcon />}
+            </div>
+          </div>
+        </div>
+      </header>
+      {/* 모바일 헤더 사이드바 */}
+      {isMobileMenuOpen && (
+        <div
           className={cn(
-            "border-gray-100 border border-solid px-24 py-12 rounded-lg"
+            "absolute top-74px right-0 w-full h-[calc(100vh-74px)]  mobile:block hidden z-10",
           )}
-          href="/signup"
         >
-          회원가입
-        </Link>
-      </div>
-    </header>
+          <div className={cn("flex h-full")}>
+            <div className="w-[calc(100vw-129px)] bg-black bg-opacity-40"></div>
path: src/shared/ui/Header/index.tsx
user: login: zaewc
body: 그리고 이 부분만 `cn()` 적용이 안되어있는데 이유가 있나요
created_at: 2025-05-05T15:51:48Z
author_association: MEMBER
diff_hunk: @@ -1,46 +1,95 @@
 "use client";
 
+import { CloseIcon } from "@/shared/asset/svg/CloseIcon";
 import { Logo } from "@/shared/asset/svg/Logo";
+import { MobileMenuIcon } from "@/shared/asset/svg/MobileMenuIcon";
 import { cn } from "@/shared/utils/cn";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useState } from "react";
 
 export default function Header() {
   const pathname = usePathname();
-  const isAuthPage =
-    pathname.startsWith("/signin") || pathname.startsWith("/signup");
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  const isAuthPage = pathname.startsWith("/signin") || pathname.startsWith("/signup");
   if (isAuthPage) return null;
+
+  const toggleMobileMenu = () => {
+    setIsMobileMenuOpen(prevState => !prevState);
+  };
+
+  const closeMobileMenu = () => {
+    setIsMobileMenuOpen(false);
+  };
+
+  const links = [
+    { href: "/slogan", label: "슬로건 공모" },
+    { href: "", label: "참여신청" },
+    { href: "", label: "FaQ" },
+    { href: "", label: "예선" },
+    { href: "", label: "예매" },
+    { href: "", label: "본선" },
+  ];
+
   return (
-    <header className={cn("flex items-center py-[1rem] justify-around")}>
-      <Link href="/">
-        <Logo height={42} width={67} />
-      </Link>
-      <div className={cn("flex gap-[2.5rem] text-body3b")}>
-        <Link href="/slogan">슬로건 공모</Link>
-        <Link href="">참여신청</Link>
-        <Link href="">FaQ</Link>
-        <Link href="">예선</Link>
-        <Link href="">예매</Link>
-        <Link href="">본선</Link>
-      </div>
-      <div className={cn("flex gap-[1.5rem] text-body3b")}>
-        <Link
-          className={cn(
-            "border-gray-100 border border-solid px-24 py-12 rounded-lg"
-          )}
-          href="/signin"
-        >
-          로그인
+    <>
+      <header
+        className={cn(
+          "flex items-center py-[1rem] justify-around mobile:justify-between  mobile:px-16",
+        )}
+      >
+        <Link href="/">
+          <Logo className="h-[42px] w-[67px] mobile:h-[32px] mobile:w-[52px]" />
         </Link>
-        <Link
+        <div className={cn("flex gap-[2.5rem] text-body3b mobile:hidden")}>
+          {links.map((link, index) => (
+            <Link key={index} href={link.href}>
+              {link.label}
+            </Link>
+          ))}
+        </div>
+        <div className={cn("hidden mobile:block")}>
+          <div className={cn("flex text-caption2r gap-16")}>
+            <Link
+              className={cn("border-gray-100 border border-solid rounded-lg px-12 py-8")}
+              href="/signin"
+            >
+              로그인
+            </Link>
+            <Link
+              className={cn("border-gray-100 border border-solid rounded-lg px-12 py-8")}
+              href="/signup"
+            >
+              회원가입
+            </Link>
+            <div onClick={toggleMobileMenu} className={cn("place-self-center")}>
+              {isMobileMenuOpen ? <CloseIcon /> : <MobileMenuIcon />}
+            </div>
+          </div>
+        </div>
+      </header>
+      {/* 모바일 헤더 사이드바 */}
+      {isMobileMenuOpen && (
+        <div
           className={cn(
-            "border-gray-100 border border-solid px-24 py-12 rounded-lg"
+            "absolute top-74px right-0 w-full h-[calc(100vh-74px)]  mobile:block hidden z-10",
           )}
-          href="/signup"
         >
-          회원가입
-        </Link>
-      </div>
-    </header>
+          <div className={cn("flex h-full")}>
+            <div className="w-[calc(100vw-129px)] bg-black bg-opacity-40"></div>
path: src/shared/ui/Header/index.tsx
user: login: happytaeyoon
body: 수정 완료했습니다
created_at: 2025-05-06T05:52:15Z
author_association: CONTRIBUTOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-05-05T15:17:34Z
body: ✅ CI 성공
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-05T15:33:03Z
body: ✅ CI 성공
author_association: NONE
user: login: zaewc
created_at: 2025-05-05T15:48:12Z
body: ![image](https://github.com/user-attachments/assets/311f41b3-b635-40d3-bbb0-d02299087cfb)

하단에 틈이 있는 것 같은데 확인해주세요..! 
author_association: MEMBER
user: login: github-actions[bot]
created_at: 2025-05-06T05:48:44Z
body: ✅ CI 성공
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-06T05:52:32Z
body: ✅ CI 성공
author_association: NONE