From ad0a84202d90101272ef2baf06939cfa8d49a984 Mon Sep 17 00:00:00 2001
From: Joo Won <110383412+chqkq@users.noreply.github.com>
Date: Fri, 7 Feb 2025 17:08:24 +0900
Subject: [PATCH] =?UTF-8?q?navbar=20=EC=BC=9C=EB=91=94=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=EC=97=90=EC=84=9C=20=EB=8B=A4=EB=A5=B8=20=EA=B3=B3=20?=
 =?UTF-8?q?=EB=84=98=EC=96=B4=EA=B0=80=EB=A9=B4=20=EA=BA=BC=EC=A7=80?=
 =?UTF-8?q?=EA=B2=8C=20=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Header/Header.tsx       |  4 ++--
 .../common/Header/elements/HeaderSymbol.tsx   | 12 +++++++++--
 .../common/Header/elements/HeaderToolBar.tsx  | 18 ++++++++++++++---
 .../common/Header/elements/HeaderTopNav.tsx   | 20 ++++++++++++++++---
 4 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index cbe19819..98078bd1 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -36,8 +36,8 @@ export function Header() {
   return (
     <>
       <div className={styles.header} role="banner">
-        <HeaderSymbol />
-        <HeaderTopNav />
+        <HeaderSymbol setIsOpen={setIsOpen} />
+        <HeaderTopNav setIsOpen={setIsOpen} />
         <HeaderToolBar isOpen={isOpen} setIsOpen={setIsOpen} isLoggedIn={isLoggedIn} />
       </div>
       <div className={`${styles.handout} ${isOpen ? styles.show : ""}`}>
diff --git a/src/components/common/Header/elements/HeaderSymbol.tsx b/src/components/common/Header/elements/HeaderSymbol.tsx
index ac4056f0..39d9ab7a 100644
--- a/src/components/common/Header/elements/HeaderSymbol.tsx
+++ b/src/components/common/Header/elements/HeaderSymbol.tsx
@@ -2,9 +2,17 @@ import Image from "next/image";
 import Link from "next/link";
 import styles from "../Header.module.css";
 
-export function HeaderSymbol() {
+interface HandoutOverviewProps {
+  setIsOpen: (value: boolean) => void;
+}
+
+export function HeaderSymbol({ setIsOpen }: HandoutOverviewProps) {
+  const handleLinkClick = () => {
+    setIsOpen(false); // Handout 창 닫기
+  };
+
   return (
-    <Link href="/" className={styles.symbol}>
+    <Link href="/" className={styles.symbol} onClick={handleLinkClick}>
       <div className={styles.logo}>
         <Image
           src="/images/S-TopLogo.png"
diff --git a/src/components/common/Header/elements/HeaderToolBar.tsx b/src/components/common/Header/elements/HeaderToolBar.tsx
index 67180a65..c3581418 100644
--- a/src/components/common/Header/elements/HeaderToolBar.tsx
+++ b/src/components/common/Header/elements/HeaderToolBar.tsx
@@ -63,13 +63,21 @@ export function HeaderToolBar({ isOpen, setIsOpen, isLoggedIn }: IHeaderToolBarP
               <div className={styles.userctrl}>
                 <div>
                   <IconUser />
-                  <Link href="/mypage" style={{ textDecoration: "none", color: "inherit" }}>
+                  <Link
+                    href="/mypage"
+                    style={{ textDecoration: "none", color: "inherit" }}
+                    onClick={toggleHamburger}
+                  >
                     {userData.name}
                   </Link>
                 </div>
                 <ul>
                   <li>
-                    <Link href="/mypage" style={{ textDecoration: "none", color: "inherit" }}>
+                    <Link
+                      href="/mypage"
+                      style={{ textDecoration: "none", color: "inherit" }}
+                      onClick={toggleHamburger}
+                    >
                       내 정보
                     </Link>
                   </li>
@@ -91,7 +99,11 @@ export function HeaderToolBar({ isOpen, setIsOpen, isLoggedIn }: IHeaderToolBarP
           <>
             <IconLock className={styles.lockico} />
             <div>
-              <Link href="/login" style={{ textDecoration: "none", color: "inherit" }}>
+              <Link
+                href="/login"
+                style={{ textDecoration: "none", color: "inherit" }}
+                onClick={toggleHamburger}
+              >
                 Login
               </Link>
             </div>
diff --git a/src/components/common/Header/elements/HeaderTopNav.tsx b/src/components/common/Header/elements/HeaderTopNav.tsx
index 4637959a..5784f7f3 100644
--- a/src/components/common/Header/elements/HeaderTopNav.tsx
+++ b/src/components/common/Header/elements/HeaderTopNav.tsx
@@ -2,7 +2,15 @@ import { USER_NAVS } from "@/constants/UserNavigations";
 import styles from "../Header.module.css";
 import Link from "next/link";
 
-export function HeaderTopNav() {
+interface HandoutOverviewProps {
+  setIsOpen: (value: boolean) => void;
+}
+
+export function HeaderTopNav({ setIsOpen }: HandoutOverviewProps) {
+  const handleLinkClick = () => {
+    setIsOpen(false); // Handout 창 닫기
+  };
+
   return (
     <div className={styles.topnav} role="navigation">
       <ul>
@@ -10,7 +18,11 @@ export function HeaderTopNav() {
           <li key={idx}>
             <div>
               {topic.link ? (
-                <Link href={topic.link} style={{ textDecoration: "none", color: "inherit" }}>
+                <Link
+                  href={topic.link}
+                  style={{ textDecoration: "none", color: "inherit" }}
+                  onClick={handleLinkClick}
+                >
                   {topic.title}
                 </Link>
               ) : (
@@ -21,7 +33,9 @@ export function HeaderTopNav() {
               <ul>
                 {topic.items.map((item, idx) => (
                   <li key={idx}>
-                    <Link href={item.link}>{item.name}</Link>
+                    <Link href={item.link} onClick={handleLinkClick}>
+                      {item.name}
+                    </Link>
                   </li>
                 ))}
               </ul>