sopt-makers · f0rever0 · Oct 23, 2023 · Oct 18, 2023 · Oct 18, 2023 · Oct 18, 2023
diff --git a/src/components/Footer/OriginFooter/style.ts b/src/components/Footer/OriginFooter/style.ts
@@ -4,7 +4,7 @@ import { mainColor } 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) {

diff --git a/src/components/Header/Desktop/DesktopHeader.tsx b/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;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -4,8 +4,8 @@ import MobileHeader from './Mobile/MobileHeader';
 import styles from './header.module.scss';
 
 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 (

diff --git a/src/components/Header/Mobile/HeaderMenu.tsx b/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}
-            />
-          ))}
-        </>
-      );
   }
 }
 

diff --git a/src/components/Header/header.module.scss b/src/components/Header/header.module.scss
@@ -8,19 +8,20 @@
   justify-content: center;
   align-items: center;
   position: fixed;
-  background-color: rgba(22, 22, 28, 0.9);
+  background-color: #0f0f12;
   backdrop-filter: blur(20px);
   z-index: 100;
+  padding: 0 20px;
+  top: 0;
 
   @include tablet {
     height: 48px;
-    padding: 0 48px;
   }
 
   @include mobile {
     height: 48px;
     min-height: 48px;
-    padding: 0 20px;
+
     justify-content: space-between;
   }
 }
diff --git a/src/components/Header/menuTapList.ts b/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,

diff --git a/src/components/Header/types.ts b/src/components/Header/types.ts
@@ -6,18 +6,10 @@ export const enum MenuTapType {
   Parent = 'PARENT',
 }
 
-export type ParentMenuTap = {
-  type: MenuTapType.Parent;
-  title: string;
-  children: SingleMenuTap[];
-};
-
 export type SingleMenuTap = {
   type: MenuTapType.Router | MenuTapType.Anchor;
   title: string;
   href: string;
 };
 
-export type BaseMenuTap = SingleMenuTap | ParentMenuTap;
-
-export type MenuTapList = BaseMenuTap[];
+export type MenuTapList = SingleMenuTap[];
diff --git a/src/lib/styles/colors.ts b/src/lib/styles/colors.ts
@@ -8,17 +8,17 @@ export const colors = {
   white: '#FFFFFF',
   black: '#000000',
 
-  gray10: '#F0F0F0',
-  gray30: '#E4E4E5',
-  gray50: '#C3C3C6',
-  gray100: '#9D9DA4',
-  gray200: '#808087',
-  gray300: '#66666D',
-  gray400: '#515159',
-  gray500: '#3F3F47',
-  gray600: '#2E2E35',
-  gray700: '#202025',
-  gray800: '#17171C',
+  gray10: '#FCFCFC',
+  gray30: '#F0F0F0',
+  gray50: '#E4E4E5',
+  gray100: '#C3C3C6',
+  gray200: '#9D9DA4',
+  gray300: '#808087',
+  gray400: '#66666D',
+  gray500: '#515159',
+  gray600: '#3F3F47',
+  gray700: '#2E2E35',
+  gray800: '#202025',
   gray900: '#0F0F12',
 
   blue50: '#C8E1FF',

diff --git a/src/lib/styles/global.ts b/src/lib/styles/global.ts
@@ -80,7 +80,7 @@ export const global = css`
   }
 
   body {
-    background-color: #16161c;
+    background-color: #0f0f12;
     line-height: 1;
   }
 

diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx
@@ -0,0 +1 @@
+export { default } from '@src/views/BlogPage';
diff --git a/src/views/BlogPage/BlogPage.tsx b/src/views/BlogPage/BlogPage.tsx
@@ -0,0 +1,10 @@
+import PageLayout from '@src/components/common/PageLayout';
+import Navigation from './components/navigation';
+
+export default function BlogPage() {
+  return (
+    <PageLayout>
+      <Navigation />
+    </PageLayout>
+  );
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -80,7 +80,7 @@ export const global = css` @@
       }
       body {
-        background-color: #16161c;
+        background-color: #0f0f12;
         line-height: 1;
       }
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default } from '@src/views/BlogPage';
Copy link Contributor Author f0rever0 Oct 20, 2023 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. /blog 로 접속하면 해당 페이지입니다! SeojinSeojin reacted with thumbs up emoji