[ Web ] [ Feat ] width가 700 이하일 때 모바일 header 제공

capstone-kw-jjiggle · Nov 10, 2024 · a43af31 · a43af31
1 parent e7c96fa
commit a43af31
Show file tree

Hide file tree

Showing 4 changed files with 203 additions and 19 deletions.
diff --git a/apps/web/src/shared/assets/svgs/close_icon.svg b/apps/web/src/shared/assets/svgs/close_icon.svg
diff --git a/apps/web/src/shared/assets/svgs/menu_icon.svg b/apps/web/src/shared/assets/svgs/menu_icon.svg
diff --git a/apps/web/src/shared/components/layout/header/header.css.ts b/apps/web/src/shared/components/layout/header/header.css.ts
@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 import { globalTheme } from '../../../styles/globalTheme.css';
 
 export const headerStyle = style({
@@ -31,3 +31,84 @@ export const navStyle = style({
   gap: '4rem',
   color: globalTheme.colors.blue_33,
 });
+
+// under 700 style
+
+export const under700headerStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  borderBottom: `1px solid ${globalTheme.colors.gray_stroke}`,
+  zIndex: 10,
+  overflow: 'hidden',
+});
+
+export const under700topDivStyle = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  paddingLeft: '2.8rem',
+  paddingRight: '2rem',
+  minHeight: '6rem',
+});
+
+export const under700topRightDivStyle = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 19,
+});
+
+const under700commonButtonStyle = style({
+  ...globalTheme.fonts.mobileBodyMed16,
+  padding: '0.4rem 2.1rem',
+  borderRadius: 40,
+});
+
+export const under700buttonStyle = styleVariants({
+  primary: [
+    under700commonButtonStyle,
+    {
+      backgroundColor: globalTheme.colors.blue_main,
+      color: globalTheme.colors.white,
+    },
+  ],
+  secondary: [
+    under700commonButtonStyle,
+    {
+      backgroundColor: globalTheme.colors.gray_bg_04,
+      color: globalTheme.colors.gray_19,
+    },
+  ],
+});
+
+export const under700ulCommonStyle = style({
+  borderBottom: `1px solid ${globalTheme.colors.gray_stroke}`,
+  width: '100%',
+  position: 'absolute',
+  overflow: 'hidden',
+  transition: 'max-height 0.5s ease, opacity 0.5s ease',
+});
+
+export const under700ulStyle = styleVariants({
+  open: [
+    under700ulCommonStyle,
+    {
+      maxHeight: '30rem',
+      opacity: 1,
+    },
+  ],
+  close: [
+    under700ulCommonStyle,
+    {
+      maxHeight: '0',
+      opacity: 0,
+    },
+  ],
+});
+
+export const under700listStyle = style({
+  ...globalTheme.fonts.mobileBodyReg16,
+  padding: '1.8rem 2.7rem',
+  width: '100%',
+  color: globalTheme.colors.gray_19,
+  backgroundColor: globalTheme.colors.white,
+});
diff --git a/apps/web/src/shared/components/layout/header/header.tsx b/apps/web/src/shared/components/layout/header/header.tsx
@@ -1,34 +1,131 @@
 'use client';
 
 import Link from 'next/link';
+import React, { useRef, useState } from 'react';
 import { useGetUserInfo } from '@/shared/apis/auth/queries';
+import CloseIcon from '@/shared/assets/svgs/close_icon.svg';
 import Logo from '@/shared/assets/svgs/logo_sm.svg';
+import HamburgerIcon from '@/shared/assets/svgs/menu_icon.svg';
 import CircleImage from '../../circleImage/circleImage';
-import { contentStyle, headerStyle, navStyle } from './header.css';
+import {
+  contentStyle,
+  headerStyle,
+  navStyle,
+  under700headerStyle,
+  under700listStyle,
+  under700buttonStyle,
+  under700ulStyle,
+  under700topDivStyle,
+  under700topRightDivStyle,
+} from './header.css';
 
 const Header = () => {
+  const [isUnder700, setIsUnder700] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const handleToggleMenu = () => setIsMenuOpen((prev) => !prev);
+  const handleMenuClose = () => setIsMenuOpen(false);
+
   const { data } = useGetUserInfo();
 
   const profileLink = data ? `/user/${data.username}` : '/auth?step=github';
 
+  const menuRef = useRef(null);
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth <= 700) {
+        console.log('화면 너비가 700px 이하입니다.');
+        setIsUnder700(true);
+      } else {
+        console.log('화면 너비가 700px 초과입니다.');
+        setIsUnder700(false);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    handleResize(); // 초기 렌더링 시 체크
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   return (
-    <header className={headerStyle}>
-      <div className={contentStyle}>
-        <Link href="/">
-          <Logo />
-        </Link>
-        <nav className={navStyle}>
-          <Link href="/school">school rank</Link>
-          <Link href="/region">regional rank</Link>
-          <Link href="/board">board</Link>
-          <Link href="/about">about</Link>
-        </nav>
-
-        <Link href={profileLink}>
-          <CircleImage src={data?.profileImg} />
-        </Link>
-      </div>
-    </header>
+    <>
+      {!isUnder700 ? (
+        <header className={headerStyle}>
+          <div className={contentStyle}>
+            <Link href="/">
+              <Logo />
+            </Link>
+            <nav className={navStyle}>
+              <Link href="/school">school rank</Link>
+              <Link href="/region">regional rank</Link>
+              <Link href="/board">board</Link>
+              <Link href="/about">about</Link>
+            </nav>
+
+            <Link href={profileLink}>
+              <CircleImage src={data?.profileImg} />
+            </Link>
+          </div>
+        </header>
+      ) : (
+        <header className={under700headerStyle}>
+          <div className={under700topDivStyle}>
+            <Link href="/">
+              <Logo />
+            </Link>
+
+            <div className={under700topRightDivStyle}>
+              <Link href={profileLink}>
+                <button
+                  className={
+                    under700buttonStyle[isLoggedIn ? 'secondary' : 'primary']
+                  }>
+                  {isLoggedIn ? '내 정보' : '로그인'}
+                </button>
+              </Link>
+
+              <button onClick={handleToggleMenu}>
+                {isMenuOpen ? <CloseIcon /> : <HamburgerIcon />}
+              </button>
+            </div>
+          </div>
+
+          <nav onClick={handleToggleMenu}>
+            <ul
+              ref={menuRef}
+              className={under700ulStyle[isMenuOpen ? 'open' : 'close']}>
+              <li>
+                <Link href="/school">
+                  <div className={under700listStyle}>school rank</div>
+                </Link>
+              </li>
+
+              <li>
+                <Link href="/region">
+                  <div className={under700listStyle}>region rank</div>
+                </Link>
+              </li>
+
+              <li>
+                <Link href="/board">
+                  <div className={under700listStyle}>board</div>
+                </Link>
+              </li>
+
+              <li>
+                <Link href="/about">
+                  <div className={under700listStyle}>about</div>
+                </Link>
+              </li>
+            </ul>
+          </nav>
+        </header>
+      )}
+    </>
   );
 };