[SP2] blog tab navigation

src/components/Footer/OriginFooter/style.ts

@@ -4,7 +4,7 @@ import { colors } from '@src/lib/styles/colors';
 export const Root = styled.footer`
   width: 100%;
   min-height: 162px;
-  background-color: #2a2a2a;
+  background-color: #17171c;
 
   /* 태블릿 + 데스크탑 뷰 */
   @media (min-width: 766px) {

src/components/Header/Desktop/DesktopHeader.tsx

@@ -1,16 +1,14 @@
 import styled from '@emotion/styled';
 import Link from 'next/link';
 import { css } from '@emotion/react';
-import { useCallback, useEffect, useState } from 'react';
 import { LOGO_IMAGE_URL } from '@src/assets/mainLogo/base64_logo';
 import useHeader from '@src/hooks/useHeader';
 import { GrowDown } from '@src/lib/styles/animation';
 import { menuTapList } from '../menuTapList';
-import { BaseMenuTap, MenuTapType, ParentMenuTap } from '../types';
+import { MenuTapType, SingleMenuTap } from '../types';
 
 function DesktopHeader() {
   const { handleClickLogo, handleIsSelected } = useHeader();
-  const [isSubTapOpened, setIsSubTapOpened] = useState(false);
 
   return (
     <>
@@ -20,147 +18,44 @@ function DesktopHeader() {
         </CenterAligner>
         <MenuTitlesWrapper>
           {menuTapList.map((menuTap) => (
-            <MenuTap
-              key={menuTap.title}
-              menuTap={menuTap}
-              handleIsSelected={handleIsSelected}
-              isSubTapOpened={isSubTapOpened}
-              setIsSubTapOpened={setIsSubTapOpened}
-            />
+            <MenuTap key={menuTap.title} menuTap={menuTap} handleIsSelected={handleIsSelected} />
           ))}
         </MenuTitlesWrapper>
       </Wrapper>
-      {isSubTapOpened && <SubMenuWrapper />}
     </>
   );
 }
 
 type MenuTapProps = {
-  menuTap: BaseMenuTap;
+  menuTap: SingleMenuTap;
   handleIsSelected: (path: string | string[]) => boolean;
-  isSubTapOpened: boolean;
-  setIsSubTapOpened: (isOpened: boolean) => void;
 };
 
-function MenuTap({ menuTap, handleIsSelected, isSubTapOpened, setIsSubTapOpened }: MenuTapProps) {
+function MenuTap({ menuTap, handleIsSelected }: MenuTapProps) {
   switch (menuTap.type) {
     case MenuTapType.Anchor:
       return (
-        <MenuTitleAnchor
-          href={menuTap.href}
-          target="_blank"
-          rel="noreferrer"
-          onClick={() => setIsSubTapOpened(false)}
-          onMouseEnter={() => setIsSubTapOpened(false)}
-        >
+        <MenuTitleAnchor href={menuTap.href} target="_blank" rel="noreferrer">
           {menuTap.title}
         </MenuTitleAnchor>
       );
     case MenuTapType.Router:
       return (
-        <MenuTitle
-          isSelected={handleIsSelected(menuTap.href)}
-          onClick={() => setIsSubTapOpened(false)}
-          onMouseEnter={() => setIsSubTapOpened(false)}
-        >
+        <MenuTitle isSelected={handleIsSelected(menuTap.href)}>
           <Link href={menuTap.href}>{menuTap.title}</Link>
         </MenuTitle>
       );
-    case MenuTapType.Parent:
-      return (
-        <ParentMenu
-          menuTap={menuTap}
-          handleIsSelected={handleIsSelected}
-          isSubTapOpened={isSubTapOpened}
-          setIsSubTapOpened={setIsSubTapOpened}
-        />
-      );
   }
 }
 
-type ParentMenuProps = {
-  menuTap: ParentMenuTap;
-  handleIsSelected: (path: string | string[]) => boolean;
-  isSubTapOpened: boolean;
-  setIsSubTapOpened: (isOpened: boolean) => void;
-};
-
-function ParentMenu({
-  menuTap,
-  handleIsSelected,
-  isSubTapOpened,
-  setIsSubTapOpened,
-}: ParentMenuProps) {
-  const [isOpened, setIsOpened] = useState(false);
-
-  const closeSubTap = useCallback(() => {
-    setIsSubTapOpened(false);
-    setIsOpened(false);
-  }, [setIsSubTapOpened, setIsOpened]);
-
-  const onMouseIn = () => {
-    setIsSubTapOpened(true);
-    setIsOpened(true);
-  };
-
-  useEffect(() => {
-    if (!isSubTapOpened) {
-      setIsOpened(false);
-    }
-  }, [isSubTapOpened]);
-
-  useEffect(() => {
-    if (isSubTapOpened) {
-      document.addEventListener('click', closeSubTap);
-    }
-    return () => {
-      document.removeEventListener('click', closeSubTap);
-    };
-  }, [closeSubTap, isSubTapOpened]);
-
-  return (
-    <ParentMenuTitle
-      isSelected={handleIsSelected(menuTap.children.map((t) => t.href))}
-      isOpened={isOpened}
-      onMouseEnter={onMouseIn}
-      onClick={(e) => e.stopPropagation()}
-    >
-      {menuTap.title}
-      {isOpened && (
-        <SubMenu>
-          {menuTap.children.map((c) => {
-            switch (c.type) {
-              case MenuTapType.Anchor:
-                return (
-                  <MenuTitle type="sub" key={c.title}>
-                    <MenuTitleAnchor href={c.href} target="_blank" rel="noreferrer">
-                      {c.title}
-                    </MenuTitleAnchor>
-                  </MenuTitle>
-                );
-              case MenuTapType.Router:
-                return (
-                  <MenuTitle type="sub" isSelected={handleIsSelected(c.href)} key={c.title}>
-                    <Link href={c.href}>{c.title}</Link>
-                  </MenuTitle>
-                );
-            }
-          })}
-        </SubMenu>
-      )}
-    </ParentMenuTitle>
-  );
-}
-
 interface MenuTitleProps {
   isSelected?: boolean;
   isOpened?: boolean;
-  type?: 'main' | 'sub';
 }
 
 export const Wrapper = styled.div`
-  max-width: 1280px;
-  width: 90%;
+  max-width: 1200px;
+  width: 100%;
   display: flex;
   justify-content: space-between;
 `;
@@ -175,21 +70,6 @@ export const SubMenuWrapper = styled.div`
   animation: growdown 0.4s forwards;
 `;
 
-const SubMenu = styled.div`
-  position: absolute;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  width: 300px;
-  top: 80px;
-  left: 25%; /* it is bad practice */
-  transform: translateX(-50%);
-
-  cursor: default;
-`;
-
 export const CenterAligner = styled.div`
   display: flex;
   align-items: center;
@@ -256,24 +136,14 @@ export const MenuTitle = styled.div<MenuTitleProps>`
   line-height: 36px;
   font-weight: ${({ isSelected }) => (isSelected ? '700' : '500')};
 
-  color: ${({ type, isSelected }) =>
-    type === 'sub' ? (isSelected ? '#fff' : 'rgba(255, 255, 255, 0.5)') : '#fff'};
+  color: ${({ isSelected }) => (isSelected ? '#fff' : 'rgba(255, 255, 255, 0.5)')};
   cursor: pointer;
   position: relative;
-  ${({ isOpened }) => isOpened && menuTitleUnderline};
+  ${({ isSelected }) => isSelected && menuTitleUnderline}
 
   &:not(:last-child) {
     padding-right: 40px;
   }
-
-  &:hover {
-    color: #fff;
-    ${({ type }) => type !== 'sub' && menuTitleUnderline}
-  }
-`;
-
-const ParentMenuTitle = styled(MenuTitle)`
-  position: relative;
 `;
 
 export default DesktopHeader;

src/components/Header/Header.tsx

@@ -1,18 +1,18 @@
 import { useIsDesktop, useIsMobile, useIsTablet } from '@src/hooks/useDevice';
 import DesktopHeader from './Desktop/DesktopHeader';
 import MobileHeader from './Mobile/MobileHeader';
-import styles from './header.module.scss';
+import * as S from './style';
 
 export function Header() {
-  const isDesktop = useIsDesktop('992px');
-  const isTablet = useIsTablet('766px', '991.9px');
+  const isDesktop = useIsDesktop('940px');
+  const isTablet = useIsTablet('768px', '939px');
   const isMobile = useIsMobile();
 
   return (
-    <header className={styles.wrapper}>
+    <S.Wrapper>
       {isDesktop && <DesktopHeader />}
       {isTablet && <MobileHeader />}
       {isMobile && <MobileHeader />}
-    </header>
+    </S.Wrapper>
   );
 }

src/components/Header/Mobile/HeaderMenu.style.ts

@@ -63,7 +63,7 @@ export const MenuWrap = styled.div`
 
 export const Background = styled.div`
   height: 100vh;
-  background: #181818;
+  background: ${colors.gray900};
   opacity: 0.8;
 `;
 
@@ -110,7 +110,7 @@ export const ContentsWrap = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  background: #181818;
+  background: ${colors.gray900};
 
   padding-top: 50px;
   margin-bottom: 0px;

src/components/Header/Mobile/HeaderMenu.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { useEffect } from 'react';
 import useHeader from '@src/hooks/useHeader';
 import { menuTapList } from '../menuTapList';
-import { BaseMenuTap, MenuState, MenuTapType } from '../types';
+import { MenuState, MenuTapType, SingleMenuTap } from '../types';
 import * as S from './HeaderMenu.style';
 
 function useNoScroll(isMenuShown: MenuState) {
@@ -27,7 +27,7 @@ interface HeaderMenuProps {
 }
 
 type MenuTapProps = {
-  menuTap: BaseMenuTap;
+  menuTap: SingleMenuTap;
   handleIsSelected: (path: string) => boolean;
 };
 
@@ -47,18 +47,6 @@ function MenuTap({ menuTap, handleIsSelected }: MenuTapProps) {
           <Link href={menuTap.href}>{menuTap.title}</Link>
         </S.MenuTitle>
       );
-    case MenuTapType.Parent:
-      return (
-        <>
-          {menuTap.children.map((childMenuTap) => (
-            <MenuTap
-              key={childMenuTap.title}
-              menuTap={childMenuTap}
-              handleIsSelected={handleIsSelected}
-            />
-          ))}
-        </>
-      );
   }
 }
 

src/components/Header/menuTapList.ts

@@ -12,20 +12,9 @@ export const menuTapList: MenuTapList = [
     href: '/project',
   },
   {
-    type: MenuTapType.Parent,
+    type: MenuTapType.Router,
     title: '블로그',
-    children: [
-      {
-        type: MenuTapType.Router,
-        title: '활동후기',
-        href: '/review',
-      },
-      {
-        type: MenuTapType.Router,
-        title: '솝티클',
-        href: '/sopticle',
-      },
-    ],
+    href: '/blog',
   },
   {
     type: MenuTapType.Router,

src/components/Header/style.ts

@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+import { colors } from '@src/lib/styles/colors';
+
+export const Wrapper = styled.header`
+  width: 100%;
+  min-height: 80px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  background-color: ${colors.gray900};
+  backdrop-filter: blur(20px);
+  z-index: 100;
+  padding: 0 20px;
+  top: 0;
+
+  /* 태블릿 + 데스크탑 뷰 */
+  @media (min-width: 768px) {
+    height: 48px;
+  }
+
+  /* 모바일 뷰 */
+  @media (max-width: 767px) {
+    height: 48px;
+    min-height: 48px;
+
+    justify-content: space-between;
+  }
+`;