style : 헤더 반응형 적용 (#268)

prgrms-fe-devcourse · Nov 7, 2024 · 2e5c9b0 · 2e5c9b0
1 parent f9f03f4
commit 2e5c9b0
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 6 deletions.
diff --git 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
@@ -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>
     );
 };