From 2e5c9b039bc1e06c1d94d6589ec5a9f516225652 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9E=84=EC=B1=84=EB=AF=BC?=
 <87525734+cmlim0070@users.noreply.github.com>
Date: Thu, 7 Nov 2024 16:25:22 +0900
Subject: [PATCH] =?UTF-8?q?style=20:=20=ED=97=A4=EB=8D=94=20=EB=B0=98?=
 =?UTF-8?q?=EC=9D=91=ED=98=95=20=EC=A0=81=EC=9A=A9=20(#268)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/widgets/header/ui/Header.styled.tsx | 68 ++++++++++++++++++++++++-
 src/widgets/header/ui/Header.tsx        | 54 ++++++++++++++++++--
 2 files changed, 116 insertions(+), 6 deletions(-)

diff --git a/src/widgets/header/ui/Header.styled.tsx b/src/widgets/header/ui/Header.styled.tsx
index 6e3d4ae..0c3cb53 100644
--- a/src/widgets/header/ui/Header.styled.tsx
+++ b/src/widgets/header/ui/Header.styled.tsx
@@ -1,5 +1,15 @@
 import styled from 'styled-components';
 
+const breakpoints = {
+    mobile: '550px',
+    desktop: '1024px'
+};
+
+const media = {
+    mobile: `@media screen and (min-width: ${breakpoints.mobile})`,
+    desktop: `@media screen and (min-width: ${breakpoints.desktop})`
+};
+
 export const Container = styled.header`
     display: flex;
     flex-direction: row;
@@ -18,12 +28,19 @@ export const Logo = styled.div`
 `;
 
 export const Nav = styled.nav`
-    display: flex;
+    display: none;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     gap: 1rem;
     font-size: 15px;
+
+    ${media.mobile} {
+        display: none;
+    }
+    ${media.desktop} {
+        display: flex;
+    }
 `;
 
 export const NavItem = styled.div`
@@ -46,3 +63,52 @@ export const LoginButton = styled.div`
         background-color: #f2f2f2;
     }
 `;
+
+export const MobileNav = styled.div<{ isOpen: boolean }>`
+    display: ${(props) => (props.isOpen ? 'flex' : 'none')};
+    flex-direction: column;
+    position: fixed;
+    top: 0;
+    right: ${(props) => (props.isOpen ? '0' : '-100%')};
+    width: 50%;
+    height: 100vh;
+    background: white;
+    padding: 2rem;
+    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+    transition: right 0.3s ease;
+    z-index: 8888;
+
+    ${media.desktop} {
+        display: none;
+    }
+`;
+
+export const MobileNavItems = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    margin-top: 4rem;
+`;
+
+export const HamburgerButton = styled.button`
+    display: block;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0 10px 0 10px;
+
+    ${media.desktop} {
+        display: none;
+        background: none;
+        border: none;
+    }
+`;
+
+export const CloseButton = styled.button`
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+`;
diff --git a/src/widgets/header/ui/Header.tsx b/src/widgets/header/ui/Header.tsx
index 45fd377..b363c7f 100644
--- a/src/widgets/header/ui/Header.tsx
+++ b/src/widgets/header/ui/Header.tsx
@@ -1,15 +1,29 @@
-import React from 'react';
-import { Container, Logo, Nav, NavItem, LoginButton } from './Header.styled';
+import React, { useState } from 'react';
+import {
+    CloseButton,
+    Container,
+    HamburgerButton,
+    Logo,
+    MobileNav,
+    MobileNavItems,
+    Nav,
+    NavItem
+} from './Header.styled';
 import LogoImage from '@/shared/assets/logo.svg';
 import { useAuthStore } from '@/features/login/hooks/useAuthStore';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import useLogout from '@/features/login/hooks/useLogout';
 
 const Header = () => {
-    const navigate = useNavigate();
-    const { userName, isLoggedin } = useAuthStore();
+    const { isLoggedin } = useAuthStore();
     const { handleLogout } = useLogout();
 
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+    const toggleMenu = () => {
+        setIsMenuOpen(!isMenuOpen);
+    };
+
     const handleLogoutClick = (e: React.MouseEvent) => {
         e.preventDefault();
         handleLogout();
@@ -44,6 +58,36 @@ const Header = () => {
                     <NavItem onClick={handleLogoutClick}>로그아웃</NavItem>
                 )}
             </Nav>
+
+            {/* 모바일 햄버거 버튼 */}
+            <HamburgerButton onClick={toggleMenu}>메뉴</HamburgerButton>
+
+            {/* 모바일 네비게이션 */}
+            <MobileNav isOpen={isMenuOpen}>
+                <CloseButton onClick={toggleMenu}>X</CloseButton>
+                <MobileNavItems>
+                    <Link to="/">
+                        <NavItem>홈</NavItem>
+                    </Link>
+                    {isLoggedin && (
+                        <Link to="/diary">
+                            <NavItem>내 일기</NavItem>
+                        </Link>
+                    )}
+                    {isLoggedin && (
+                        <Link to="/my-page">
+                            <NavItem>마이페이지</NavItem>
+                        </Link>
+                    )}
+                    {!isLoggedin ? (
+                        <Link to="/login">
+                            <NavItem>로그인</NavItem>
+                        </Link>
+                    ) : (
+                        <NavItem onClick={handleLogoutClick}>로그아웃</NavItem>
+                    )}
+                </MobileNavItems>
+            </MobileNav>
         </Container>
     );
 };