From 7145e8a32fd113ba706cc6509600439284b91a3a Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Wed, 18 Oct 2023 11:32:57 +0900 Subject: [PATCH 01/34] =?UTF-8?q?feat=20:=20blog=20=ED=83=AD=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Header/Desktop/DesktopHeader.tsx | 135 +----------------- src/components/Header/Mobile/HeaderMenu.tsx | 16 +-- src/components/Header/menuTapList.ts | 15 +- src/components/Header/types.ts | 10 +- src/pages/blog.tsx | 1 + src/views/BlogPage/BlogPage.tsx | 7 + src/views/BlogPage/index.tsx | 1 + 7 files changed, 20 insertions(+), 165 deletions(-) create mode 100644 src/pages/blog.tsx create mode 100644 src/views/BlogPage/BlogPage.tsx create mode 100644 src/views/BlogPage/index.tsx diff --git a/src/components/Header/Desktop/DesktopHeader.tsx b/src/components/Header/Desktop/DesktopHeader.tsx index f996103f..fe3b90bf 100644 --- 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,138 +18,36 @@ function DesktopHeader() { {menuTapList.map((menuTap) => ( - + ))} - {isSubTapOpened && } ); } 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 ( - setIsSubTapOpened(false)} - onMouseEnter={() => setIsSubTapOpened(false)} - > + {menuTap.title} ); case MenuTapType.Router: return ( - setIsSubTapOpened(false)} - onMouseEnter={() => setIsSubTapOpened(false)} - > + {menuTap.title} ); - case MenuTapType.Parent: - return ( - - ); } } -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 ( - t.href))} - isOpened={isOpened} - onMouseEnter={onMouseIn} - onClick={(e) => e.stopPropagation()} - > - {menuTap.title} - {isOpened && ( - - {menuTap.children.map((c) => { - switch (c.type) { - case MenuTapType.Anchor: - return ( - - - {c.title} - - - ); - case MenuTapType.Router: - return ( - - {c.title} - - ); - } - })} - - )} - - ); -} - interface MenuTitleProps { isSelected?: boolean; isOpened?: boolean; @@ -175,21 +71,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; @@ -272,8 +153,4 @@ export const MenuTitle = styled.div` } `; -const ParentMenuTitle = styled(MenuTitle)` - position: relative; -`; - export default DesktopHeader; diff --git a/src/components/Header/Mobile/HeaderMenu.tsx b/src/components/Header/Mobile/HeaderMenu.tsx index cff9138a..e5880e01 100644 --- 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) { {menuTap.title} ); - case MenuTapType.Parent: - return ( - <> - {menuTap.children.map((childMenuTap) => ( - - ))} - - ); } } diff --git a/src/components/Header/menuTapList.ts b/src/components/Header/menuTapList.ts index 98ee20dd..a8bb1663 100644 --- 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 index 55a813b8..b1783b91 100644 --- 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/pages/blog.tsx b/src/pages/blog.tsx new file mode 100644 index 00000000..29da1c6a --- /dev/null +++ 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 new file mode 100644 index 00000000..f4eca1e9 --- /dev/null +++ b/src/views/BlogPage/BlogPage.tsx @@ -0,0 +1,7 @@ +import PageLayout from '@src/components/common/PageLayout'; + +function BlogPage() { + return ; +} + +export default BlogPage; diff --git a/src/views/BlogPage/index.tsx b/src/views/BlogPage/index.tsx new file mode 100644 index 00000000..75531ca0 --- /dev/null +++ b/src/views/BlogPage/index.tsx @@ -0,0 +1 @@ +export { default } from './BlogPage'; From 8bbcfe58c8ee0e8dc30c94295e3f047d94a27a50 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Wed, 18 Oct 2023 12:21:32 +0900 Subject: [PATCH 02/34] style : change header style --- src/components/Header/Desktop/DesktopHeader.tsx | 4 ++-- src/components/Header/Header.tsx | 4 ++-- src/components/Header/header.module.scss | 5 +++-- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/Header/Desktop/DesktopHeader.tsx b/src/components/Header/Desktop/DesktopHeader.tsx index fe3b90bf..dfb62fd4 100644 --- a/src/components/Header/Desktop/DesktopHeader.tsx +++ b/src/components/Header/Desktop/DesktopHeader.tsx @@ -55,8 +55,8 @@ interface MenuTitleProps { } export const Wrapper = styled.div` - max-width: 1280px; - width: 90%; + max-width: 1200px; + width: 100%; display: flex; justify-content: space-between; `; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 3e2a3fe9..3ee1be16 100644 --- 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/header.module.scss b/src/components/Header/header.module.scss index 9f717033..2baded36 100644 --- a/src/components/Header/header.module.scss +++ b/src/components/Header/header.module.scss @@ -11,16 +11,17 @@ background-color: rgba(22, 22, 28, 0.9); 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; } } From 94a89eeec8052355480837775976e9797e3bf053 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Wed, 18 Oct 2023 15:19:28 +0900 Subject: [PATCH 03/34] =?UTF-8?q?feat=20:=20=EB=B8=94=EB=A1=9C=EA=B7=B8=20?= =?UTF-8?q?=ED=83=AD=20=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/BlogPage/BlogPage.tsx | 7 +- .../BlogPage/components/navigation/index.tsx | 35 ++++++ .../BlogPage/components/navigation/style.ts | 101 ++++++++++++++++++ .../BlogPage/components/navigation/types.ts | 10 ++ 4 files changed, 152 insertions(+), 1 deletion(-) create mode 100644 src/views/BlogPage/components/navigation/index.tsx create mode 100644 src/views/BlogPage/components/navigation/style.ts create mode 100644 src/views/BlogPage/components/navigation/types.ts diff --git a/src/views/BlogPage/BlogPage.tsx b/src/views/BlogPage/BlogPage.tsx index f4eca1e9..7ea77c88 100644 --- a/src/views/BlogPage/BlogPage.tsx +++ b/src/views/BlogPage/BlogPage.tsx @@ -1,7 +1,12 @@ import PageLayout from '@src/components/common/PageLayout'; +import Navigation from './components/navigation'; function BlogPage() { - return ; + return ( + + + + ); } export default BlogPage; diff --git a/src/views/BlogPage/components/navigation/index.tsx b/src/views/BlogPage/components/navigation/index.tsx new file mode 100644 index 00000000..e6646163 --- /dev/null +++ b/src/views/BlogPage/components/navigation/index.tsx @@ -0,0 +1,35 @@ +import { useState } from 'react'; +import * as S from './style'; +import { BlogTabList } from './types'; + +function Navigation() { + const [selectTab, setSelectTab] = useState('REVIEW'); + const blogTabList: BlogTabList = { + REVIEW: { title: '활동후기', description: 'SOPT 회원들의 생생한 활동 후기 마치 생생정보통' }, + ARTICLE: { title: '아티클', description: 'SOPT 회원들의 멋있는 아티클들' }, + }; + + return ( + + + + {Object.entries(blogTabList).map(([blogTab, tabInfo]) => { + return ( + setSelectTab(blogTab as keyof BlogTabList)} + isSelected={selectTab === blogTab} + > + {tabInfo.title} + + ); + })} + + {blogTabList[selectTab]?.description} +

드롭다운 들어가는 부분

+ + + ); +} + +export default Navigation; diff --git a/src/views/BlogPage/components/navigation/style.ts b/src/views/BlogPage/components/navigation/style.ts new file mode 100644 index 00000000..d8fad6a4 --- /dev/null +++ b/src/views/BlogPage/components/navigation/style.ts @@ -0,0 +1,101 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.section` + width: 100%; + margin-top: 188px; + display: flex; + align-items: center; + justify-content: center; + + /* 태블릿 뷰 */ + @media (max-width: 939px) and (min-width: 768px) { + margin-top: 188px; + } + /* 모바일 뷰 */ + @media (max-width: 767px) { + margin-top: 76px; + } +`; + +export const Container = styled.main` + width: 900px; + display: flex; + align-items: flex-start; + flex-direction: column; + + /* 태블릿 뷰 */ + @media (max-width: 939px) and (min-width: 768px) { + margin-left: 20px; + margin-right: 20px; + width: 100%; + } + /* 모바일 뷰 */ + @media (max-width: 767px) { + margin-left: 20px; + margin-right: 20px; + width: 100%; + } +`; + +export const TabContainer = styled.section` + display: flex; + align-items: center; +`; + +interface MenuTitleProps { + isSelected: boolean; +} + +export const TabTitle = styled.article` + font-size: 24px; + height: 100%; + line-height: 36px; + font-weight: 700; + letter-spacing: -0.48px; + + color: ${({ isSelected }) => (isSelected ? '#F7F8FA' : '#66666D')}; + + cursor: pointer; + position: relative; + border-bottom: ${({ isSelected }) => isSelected && '2px solid #c0c5c9'}; + + padding-bottom: 16px; + margin-right: 20px; + + /* 모바일 뷰 */ + @media (max-width: 767px) { + margin-right: 12px; + } +`; + +export const TabDescription = styled.h1` + margin-top: 24px; + margin-bottom: 48px; + + font-size: 20px; + font-weight: 600; + line-height: 30px; + letter-spacing: -0.4px; + color: #c3c3c6; + width: 100%; + + /* 모바일 뷰 */ + @media (max-width: 767px) { + margin-top: 14px; + margin-bottom: 16px; + display: flex; + + padding: 16px; + flex-direction: column; + align-items: flex-start; + gap: 10px; + border-radius: 12px; + background: #17171c; + + font-size: 14px; + font-weight: 500; + line-height: 23.1px; + letter-spacing: -0.21px; + color: #f0f0f0; + } +`; diff --git a/src/views/BlogPage/components/navigation/types.ts b/src/views/BlogPage/components/navigation/types.ts new file mode 100644 index 00000000..b14bb9ac --- /dev/null +++ b/src/views/BlogPage/components/navigation/types.ts @@ -0,0 +1,10 @@ +export interface BlogTabList { + REVIEW: { + title: string; + description: string; + }; + ARTICLE: { + title: string; + description: string; + }; +} From 12efe7d81fe4e0cad0c3d2916a70f7f0c8063cc6 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Wed, 18 Oct 2023 15:19:44 +0900 Subject: [PATCH 04/34] =?UTF-8?q?style=20:=20=EC=A0=84=EC=B2=B4=EC=A0=81?= =?UTF-8?q?=EC=9D=B8=20=EC=BB=AC=EB=9F=AC=20=EC=BD=94=EB=93=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Footer/OriginFooter/style.ts | 2 +- src/components/Header/header.module.scss | 2 +- src/styles/global.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Footer/OriginFooter/style.ts b/src/components/Footer/OriginFooter/style.ts index 2d278648..be4164f9 100644 --- a/src/components/Footer/OriginFooter/style.ts +++ b/src/components/Footer/OriginFooter/style.ts @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; 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/header.module.scss b/src/components/Header/header.module.scss index 2baded36..8b13095a 100644 --- a/src/components/Header/header.module.scss +++ b/src/components/Header/header.module.scss @@ -8,7 +8,7 @@ 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; diff --git a/src/styles/global.ts b/src/styles/global.ts index f38426db..3a89d308 100644 --- a/src/styles/global.ts +++ b/src/styles/global.ts @@ -80,7 +80,7 @@ export const global = css` } body { - background-color: #16161c; + background-color: #0f0f12; line-height: 1; } From 78c27172525b4ce9c2892abc1159088fe169a82c Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Wed, 18 Oct 2023 11:32:57 +0900 Subject: [PATCH 05/34] =?UTF-8?q?feat=20:=20blog=20=ED=83=AD=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Header/Desktop/DesktopHeader.tsx | 135 +----------------- src/components/Header/Mobile/HeaderMenu.tsx | 16 +-- src/components/Header/menuTapList.ts | 15 +- src/components/Header/types.ts | 10 +- src/pages/blog.tsx | 1 + src/views/BlogPage/BlogPage.tsx | 7 + src/views/BlogPage/index.tsx | 1 + 7 files changed, 20 insertions(+), 165 deletions(-) create mode 100644 src/pages/blog.tsx create mode 100644 src/views/BlogPage/BlogPage.tsx create mode 100644 src/views/BlogPage/index.tsx diff --git a/src/components/Header/Desktop/DesktopHeader.tsx b/src/components/Header/Desktop/DesktopHeader.tsx index f996103f..fe3b90bf 100644 --- 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,138 +18,36 @@ function DesktopHeader() { {menuTapList.map((menuTap) => ( - + ))} - {isSubTapOpened && } ); } 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 ( - setIsSubTapOpened(false)} - onMouseEnter={() => setIsSubTapOpened(false)} - > + {menuTap.title} ); case MenuTapType.Router: return ( - setIsSubTapOpened(false)} - onMouseEnter={() => setIsSubTapOpened(false)} - > + {menuTap.title} ); - case MenuTapType.Parent: - return ( - - ); } } -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 ( - t.href))} - isOpened={isOpened} - onMouseEnter={onMouseIn} - onClick={(e) => e.stopPropagation()} - > - {menuTap.title} - {isOpened && ( - - {menuTap.children.map((c) => { - switch (c.type) { - case MenuTapType.Anchor: - return ( - - - {c.title} - - - ); - case MenuTapType.Router: - return ( - - {c.title} - - ); - } - })} - - )} - - ); -} - interface MenuTitleProps { isSelected?: boolean; isOpened?: boolean; @@ -175,21 +71,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; @@ -272,8 +153,4 @@ export const MenuTitle = styled.div` } `; -const ParentMenuTitle = styled(MenuTitle)` - position: relative; -`; - export default DesktopHeader; diff --git a/src/components/Header/Mobile/HeaderMenu.tsx b/src/components/Header/Mobile/HeaderMenu.tsx index cff9138a..e5880e01 100644 --- 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) { {menuTap.title} ); - case MenuTapType.Parent: - return ( - <> - {menuTap.children.map((childMenuTap) => ( - - ))} - - ); } } diff --git a/src/components/Header/menuTapList.ts b/src/components/Header/menuTapList.ts index 98ee20dd..a8bb1663 100644 --- 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 index 55a813b8..b1783b91 100644 --- 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/pages/blog.tsx b/src/pages/blog.tsx new file mode 100644 index 00000000..29da1c6a --- /dev/null +++ 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 new file mode 100644 index 00000000..f4eca1e9 --- /dev/null +++ b/src/views/BlogPage/BlogPage.tsx @@ -0,0 +1,7 @@ +import PageLayout from '@src/components/common/PageLayout'; + +function BlogPage() { + return ; +} + +export default BlogPage; diff --git a/src/views/BlogPage/index.tsx b/src/views/BlogPage/index.tsx new file mode 100644 index 00000000..75531ca0 --- /dev/null +++ b/src/views/BlogPage/index.tsx @@ -0,0 +1 @@ +export { default } from './BlogPage'; From 80adbca25606a3b3905ca4a45ae7d00427552d15 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Wed, 18 Oct 2023 12:21:32 +0900 Subject: [PATCH 06/34] style : change header style --- src/components/Header/Desktop/DesktopHeader.tsx | 4 ++-- src/components/Header/Header.tsx | 4 ++-- src/components/Header/header.module.scss | 5 +++-- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/Header/Desktop/DesktopHeader.tsx b/src/components/Header/Desktop/DesktopHeader.tsx index fe3b90bf..dfb62fd4 100644 --- a/src/components/Header/Desktop/DesktopHeader.tsx +++ b/src/components/Header/Desktop/DesktopHeader.tsx @@ -55,8 +55,8 @@ interface MenuTitleProps { } export const Wrapper = styled.div` - max-width: 1280px; - width: 90%; + max-width: 1200px; + width: 100%; display: flex; justify-content: space-between; `; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 3e2a3fe9..3ee1be16 100644 --- 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/header.module.scss b/src/components/Header/header.module.scss index a4a41259..ecd22026 100644 --- a/src/components/Header/header.module.scss +++ b/src/components/Header/header.module.scss @@ -11,16 +11,17 @@ background-color: rgba(22, 22, 28, 0.9); 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; } } From c10ea979257994f15ebe736f58776010bd45e5a6 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Wed, 18 Oct 2023 15:19:28 +0900 Subject: [PATCH 07/34] =?UTF-8?q?feat=20:=20=EB=B8=94=EB=A1=9C=EA=B7=B8=20?= =?UTF-8?q?=ED=83=AD=20=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/BlogPage/BlogPage.tsx | 7 +- .../BlogPage/components/navigation/index.tsx | 35 ++++++ .../BlogPage/components/navigation/style.ts | 101 ++++++++++++++++++ .../BlogPage/components/navigation/types.ts | 10 ++ 4 files changed, 152 insertions(+), 1 deletion(-) create mode 100644 src/views/BlogPage/components/navigation/index.tsx create mode 100644 src/views/BlogPage/components/navigation/style.ts create mode 100644 src/views/BlogPage/components/navigation/types.ts diff --git a/src/views/BlogPage/BlogPage.tsx b/src/views/BlogPage/BlogPage.tsx index f4eca1e9..7ea77c88 100644 --- a/src/views/BlogPage/BlogPage.tsx +++ b/src/views/BlogPage/BlogPage.tsx @@ -1,7 +1,12 @@ import PageLayout from '@src/components/common/PageLayout'; +import Navigation from './components/navigation'; function BlogPage() { - return ; + return ( + + + + ); } export default BlogPage; diff --git a/src/views/BlogPage/components/navigation/index.tsx b/src/views/BlogPage/components/navigation/index.tsx new file mode 100644 index 00000000..e6646163 --- /dev/null +++ b/src/views/BlogPage/components/navigation/index.tsx @@ -0,0 +1,35 @@ +import { useState } from 'react'; +import * as S from './style'; +import { BlogTabList } from './types'; + +function Navigation() { + const [selectTab, setSelectTab] = useState('REVIEW'); + const blogTabList: BlogTabList = { + REVIEW: { title: '활동후기', description: 'SOPT 회원들의 생생한 활동 후기 마치 생생정보통' }, + ARTICLE: { title: '아티클', description: 'SOPT 회원들의 멋있는 아티클들' }, + }; + + return ( + + + + {Object.entries(blogTabList).map(([blogTab, tabInfo]) => { + return ( + setSelectTab(blogTab as keyof BlogTabList)} + isSelected={selectTab === blogTab} + > + {tabInfo.title} + + ); + })} + + {blogTabList[selectTab]?.description} +

드롭다운 들어가는 부분

+ + + ); +} + +export default Navigation; diff --git a/src/views/BlogPage/components/navigation/style.ts b/src/views/BlogPage/components/navigation/style.ts new file mode 100644 index 00000000..d8fad6a4 --- /dev/null +++ b/src/views/BlogPage/components/navigation/style.ts @@ -0,0 +1,101 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.section` + width: 100%; + margin-top: 188px; + display: flex; + align-items: center; + justify-content: center; + + /* 태블릿 뷰 */ + @media (max-width: 939px) and (min-width: 768px) { + margin-top: 188px; + } + /* 모바일 뷰 */ + @media (max-width: 767px) { + margin-top: 76px; + } +`; + +export const Container = styled.main` + width: 900px; + display: flex; + align-items: flex-start; + flex-direction: column; + + /* 태블릿 뷰 */ + @media (max-width: 939px) and (min-width: 768px) { + margin-left: 20px; + margin-right: 20px; + width: 100%; + } + /* 모바일 뷰 */ + @media (max-width: 767px) { + margin-left: 20px; + margin-right: 20px; + width: 100%; + } +`; + +export const TabContainer = styled.section` + display: flex; + align-items: center; +`; + +interface MenuTitleProps { + isSelected: boolean; +} + +export const TabTitle = styled.article` + font-size: 24px; + height: 100%; + line-height: 36px; + font-weight: 700; + letter-spacing: -0.48px; + + color: ${({ isSelected }) => (isSelected ? '#F7F8FA' : '#66666D')}; + + cursor: pointer; + position: relative; + border-bottom: ${({ isSelected }) => isSelected && '2px solid #c0c5c9'}; + + padding-bottom: 16px; + margin-right: 20px; + + /* 모바일 뷰 */ + @media (max-width: 767px) { + margin-right: 12px; + } +`; + +export const TabDescription = styled.h1` + margin-top: 24px; + margin-bottom: 48px; + + font-size: 20px; + font-weight: 600; + line-height: 30px; + letter-spacing: -0.4px; + color: #c3c3c6; + width: 100%; + + /* 모바일 뷰 */ + @media (max-width: 767px) { + margin-top: 14px; + margin-bottom: 16px; + display: flex; + + padding: 16px; + flex-direction: column; + align-items: flex-start; + gap: 10px; + border-radius: 12px; + background: #17171c; + + font-size: 14px; + font-weight: 500; + line-height: 23.1px; + letter-spacing: -0.21px; + color: #f0f0f0; + } +`; diff --git a/src/views/BlogPage/components/navigation/types.ts b/src/views/BlogPage/components/navigation/types.ts new file mode 100644 index 00000000..b14bb9ac --- /dev/null +++ b/src/views/BlogPage/components/navigation/types.ts @@ -0,0 +1,10 @@ +export interface BlogTabList { + REVIEW: { + title: string; + description: string; + }; + ARTICLE: { + title: string; + description: string; + }; +} From 9c116aabb679be0f4c524cd1a2f4a0fb59853a71 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Wed, 18 Oct 2023 15:19:44 +0900 Subject: [PATCH 08/34] =?UTF-8?q?style=20:=20=EC=A0=84=EC=B2=B4=EC=A0=81?= =?UTF-8?q?=EC=9D=B8=20=EC=BB=AC=EB=9F=AC=20=EC=BD=94=EB=93=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Footer/OriginFooter/style.ts | 2 +- src/components/Header/header.module.scss | 2 +- src/lib/styles/global.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Footer/OriginFooter/style.ts b/src/components/Footer/OriginFooter/style.ts index 36002259..e49c0e61 100644 --- 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/header.module.scss b/src/components/Header/header.module.scss index ecd22026..2d96014a 100644 --- a/src/components/Header/header.module.scss +++ b/src/components/Header/header.module.scss @@ -8,7 +8,7 @@ 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; diff --git a/src/lib/styles/global.ts b/src/lib/styles/global.ts index f38426db..3a89d308 100644 --- 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; } From 88ae4c1906e45a4e8ad149f185a3e66a2cd5d617 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Thu, 19 Oct 2023 21:10:30 +0900 Subject: [PATCH 09/34] refactor : change to inline export --- src/views/BlogPage/BlogPage.tsx | 4 +--- src/views/BlogPage/components/navigation/index.tsx | 4 +--- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/views/BlogPage/BlogPage.tsx b/src/views/BlogPage/BlogPage.tsx index 7ea77c88..5c3da795 100644 --- a/src/views/BlogPage/BlogPage.tsx +++ b/src/views/BlogPage/BlogPage.tsx @@ -1,12 +1,10 @@ import PageLayout from '@src/components/common/PageLayout'; import Navigation from './components/navigation'; -function BlogPage() { +export default function BlogPage() { return ( ); } - -export default BlogPage; diff --git a/src/views/BlogPage/components/navigation/index.tsx b/src/views/BlogPage/components/navigation/index.tsx index e6646163..79d24906 100644 --- a/src/views/BlogPage/components/navigation/index.tsx +++ b/src/views/BlogPage/components/navigation/index.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import * as S from './style'; import { BlogTabList } from './types'; -function Navigation() { +export default function Navigation() { const [selectTab, setSelectTab] = useState('REVIEW'); const blogTabList: BlogTabList = { REVIEW: { title: '활동후기', description: 'SOPT 회원들의 생생한 활동 후기 마치 생생정보통' }, @@ -31,5 +31,3 @@ function Navigation() { ); } - -export default Navigation; From 4c2e5f6ca7e00f38e5a0473f1054d70eefb7844d Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Thu, 19 Oct 2023 21:11:04 +0900 Subject: [PATCH 10/34] refactor: apply color systems --- src/lib/styles/colors.ts | 1 + src/views/BlogPage/components/navigation/style.ts | 11 ++++++----- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/lib/styles/colors.ts b/src/lib/styles/colors.ts index 06eeadc9..b710de1a 100644 --- a/src/lib/styles/colors.ts +++ b/src/lib/styles/colors.ts @@ -10,6 +10,7 @@ export const colors = { gray10: '#F0F0F0', gray30: '#E4E4E5', + gray40: '#C0C5C9', gray50: '#C3C3C6', gray100: '#9D9DA4', gray200: '#808087', diff --git a/src/views/BlogPage/components/navigation/style.ts b/src/views/BlogPage/components/navigation/style.ts index d8fad6a4..5a4a1cbf 100644 --- a/src/views/BlogPage/components/navigation/style.ts +++ b/src/views/BlogPage/components/navigation/style.ts @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import { colors } from '@src/lib/styles/colors'; export const Wrapper = styled.section` width: 100%; @@ -53,11 +54,11 @@ export const TabTitle = styled.article` font-weight: 700; letter-spacing: -0.48px; - color: ${({ isSelected }) => (isSelected ? '#F7F8FA' : '#66666D')}; + color: ${({ isSelected }) => (isSelected ? `${colors.gray10}` : `${colors.gray300}`)}; cursor: pointer; position: relative; - border-bottom: ${({ isSelected }) => isSelected && '2px solid #c0c5c9'}; + border-bottom: ${({ isSelected }) => isSelected && `2px solid ${colors.gray40}`}; padding-bottom: 16px; margin-right: 20px; @@ -76,7 +77,7 @@ export const TabDescription = styled.h1` font-weight: 600; line-height: 30px; letter-spacing: -0.4px; - color: #c3c3c6; + color: ${colors.gray50}; width: 100%; /* 모바일 뷰 */ @@ -90,12 +91,12 @@ export const TabDescription = styled.h1` align-items: flex-start; gap: 10px; border-radius: 12px; - background: #17171c; + background: ${colors.gray800}; font-size: 14px; font-weight: 500; line-height: 23.1px; letter-spacing: -0.21px; - color: #f0f0f0; + color: ${colors.gray10}; } `; From babab4f023a78a880a0fdcaab0600fc70cfb0738 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Thu, 19 Oct 2023 21:20:34 +0900 Subject: [PATCH 11/34] =?UTF-8?q?style=20:=20header=20=EC=84=A0=ED=83=9D?= =?UTF-8?q?=ED=95=9C=20=ED=83=AD=EC=97=90=20=EB=B0=91=EC=A4=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header/Desktop/DesktopHeader.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/components/Header/Desktop/DesktopHeader.tsx b/src/components/Header/Desktop/DesktopHeader.tsx index dfb62fd4..9dfc4aba 100644 --- a/src/components/Header/Desktop/DesktopHeader.tsx +++ b/src/components/Header/Desktop/DesktopHeader.tsx @@ -51,7 +51,6 @@ function MenuTap({ menuTap, handleIsSelected }: MenuTapProps) { interface MenuTitleProps { isSelected?: boolean; isOpened?: boolean; - type?: 'main' | 'sub'; } export const Wrapper = styled.div` @@ -137,20 +136,14 @@ export const MenuTitle = styled.div` 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} - } `; export default DesktopHeader; From 85aa5ef1b932e07ea217538240f25b3c3acc608b Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Thu, 19 Oct 2023 22:55:55 +0900 Subject: [PATCH 12/34] fix : change constant color --- src/lib/styles/colors.ts | 23 +++++++++---------- .../BlogPage/components/navigation/style.ts | 8 +++---- 2 files changed, 15 insertions(+), 16 deletions(-) diff --git a/src/lib/styles/colors.ts b/src/lib/styles/colors.ts index b710de1a..8f29a143 100644 --- a/src/lib/styles/colors.ts +++ b/src/lib/styles/colors.ts @@ -8,18 +8,17 @@ export const colors = { white: '#FFFFFF', black: '#000000', - gray10: '#F0F0F0', - gray30: '#E4E4E5', - gray40: '#C0C5C9', - 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/views/BlogPage/components/navigation/style.ts b/src/views/BlogPage/components/navigation/style.ts index 5a4a1cbf..5cd43e22 100644 --- a/src/views/BlogPage/components/navigation/style.ts +++ b/src/views/BlogPage/components/navigation/style.ts @@ -54,11 +54,11 @@ export const TabTitle = styled.article` font-weight: 700; letter-spacing: -0.48px; - color: ${({ isSelected }) => (isSelected ? `${colors.gray10}` : `${colors.gray300}`)}; + color: ${({ isSelected }) => (isSelected ? `${colors.gray30}` : `${colors.gray400}`)}; cursor: pointer; position: relative; - border-bottom: ${({ isSelected }) => isSelected && `2px solid ${colors.gray40}`}; + border-bottom: ${({ isSelected }) => isSelected && `2px solid ${colors.gray200}`}; padding-bottom: 16px; margin-right: 20px; @@ -77,7 +77,7 @@ export const TabDescription = styled.h1` font-weight: 600; line-height: 30px; letter-spacing: -0.4px; - color: ${colors.gray50}; + color: ${colors.gray100}; width: 100%; /* 모바일 뷰 */ @@ -97,6 +97,6 @@ export const TabDescription = styled.h1` font-weight: 500; line-height: 23.1px; letter-spacing: -0.21px; - color: ${colors.gray10}; + color: ${colors.gray30}; } `; From 5c178a187e1ade0546fd49c35729e800113d9076 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Fri, 20 Oct 2023 13:41:50 +0900 Subject: [PATCH 13/34] fix : blog tab mobile boder style --- src/views/BlogPage/components/navigation/style.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/BlogPage/components/navigation/style.ts b/src/views/BlogPage/components/navigation/style.ts index 5cd43e22..d4381ad9 100644 --- a/src/views/BlogPage/components/navigation/style.ts +++ b/src/views/BlogPage/components/navigation/style.ts @@ -65,6 +65,7 @@ export const TabTitle = styled.article` /* 모바일 뷰 */ @media (max-width: 767px) { + border-bottom: ${({ isSelected }) => isSelected && `1px solid ${colors.gray200}`}; margin-right: 12px; } `; From 8966d63b256c0a820ece4261950aaa5547288a67 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Fri, 20 Oct 2023 13:44:23 +0900 Subject: [PATCH 14/34] fix : blog tab description --- src/views/BlogPage/components/navigation/index.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/views/BlogPage/components/navigation/index.tsx b/src/views/BlogPage/components/navigation/index.tsx index 79d24906..eeade166 100644 --- a/src/views/BlogPage/components/navigation/index.tsx +++ b/src/views/BlogPage/components/navigation/index.tsx @@ -5,8 +5,14 @@ import { BlogTabList } from './types'; export default function Navigation() { const [selectTab, setSelectTab] = useState('REVIEW'); const blogTabList: BlogTabList = { - REVIEW: { title: '활동후기', description: 'SOPT 회원들의 생생한 활동 후기 마치 생생정보통' }, - ARTICLE: { title: '아티클', description: 'SOPT 회원들의 멋있는 아티클들' }, + REVIEW: { + title: '활동후기', + description: '회원들의 진솔한 후기를 통해 SOPT를 미리 만나보세요. ', + }, + ARTICLE: { + title: '아티클', + description: '회원들의 아티클을 통해 SOPT에서 얻은 인사이트를 확인해보세요.', + }, }; return ( From 7dc73851c568a1e62b08361f6f58a00d590263d2 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Wed, 18 Oct 2023 11:32:57 +0900 Subject: [PATCH 15/34] =?UTF-8?q?feat=20:=20blog=20=ED=83=AD=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Header/Desktop/DesktopHeader.tsx | 135 +----------------- src/components/Header/Mobile/HeaderMenu.tsx | 16 +-- src/components/Header/menuTapList.ts | 15 +- src/components/Header/types.ts | 10 +- src/pages/blog.tsx | 1 + src/views/BlogPage/BlogPage.tsx | 7 + src/views/BlogPage/index.tsx | 1 + 7 files changed, 20 insertions(+), 165 deletions(-) create mode 100644 src/pages/blog.tsx create mode 100644 src/views/BlogPage/BlogPage.tsx create mode 100644 src/views/BlogPage/index.tsx diff --git a/src/components/Header/Desktop/DesktopHeader.tsx b/src/components/Header/Desktop/DesktopHeader.tsx index f996103f..fe3b90bf 100644 --- 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,138 +18,36 @@ function DesktopHeader() { {menuTapList.map((menuTap) => ( - + ))} - {isSubTapOpened && } ); } 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 ( - setIsSubTapOpened(false)} - onMouseEnter={() => setIsSubTapOpened(false)} - > + {menuTap.title} ); case MenuTapType.Router: return ( - setIsSubTapOpened(false)} - onMouseEnter={() => setIsSubTapOpened(false)} - > + {menuTap.title} ); - case MenuTapType.Parent: - return ( - - ); } } -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 ( - t.href))} - isOpened={isOpened} - onMouseEnter={onMouseIn} - onClick={(e) => e.stopPropagation()} - > - {menuTap.title} - {isOpened && ( - - {menuTap.children.map((c) => { - switch (c.type) { - case MenuTapType.Anchor: - return ( - - - {c.title} - - - ); - case MenuTapType.Router: - return ( - - {c.title} - - ); - } - })} - - )} - - ); -} - interface MenuTitleProps { isSelected?: boolean; isOpened?: boolean; @@ -175,21 +71,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; @@ -272,8 +153,4 @@ export const MenuTitle = styled.div` } `; -const ParentMenuTitle = styled(MenuTitle)` - position: relative; -`; - export default DesktopHeader; diff --git a/src/components/Header/Mobile/HeaderMenu.tsx b/src/components/Header/Mobile/HeaderMenu.tsx index cff9138a..e5880e01 100644 --- 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) { {menuTap.title} ); - case MenuTapType.Parent: - return ( - <> - {menuTap.children.map((childMenuTap) => ( - - ))} - - ); } } diff --git a/src/components/Header/menuTapList.ts b/src/components/Header/menuTapList.ts index 98ee20dd..a8bb1663 100644 --- 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 index 55a813b8..b1783b91 100644 --- 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/pages/blog.tsx b/src/pages/blog.tsx new file mode 100644 index 00000000..29da1c6a --- /dev/null +++ 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 new file mode 100644 index 00000000..f4eca1e9 --- /dev/null +++ b/src/views/BlogPage/BlogPage.tsx @@ -0,0 +1,7 @@ +import PageLayout from '@src/components/common/PageLayout'; + +function BlogPage() { + return ; +} + +export default BlogPage; diff --git a/src/views/BlogPage/index.tsx b/src/views/BlogPage/index.tsx new file mode 100644 index 00000000..75531ca0 --- /dev/null +++ b/src/views/BlogPage/index.tsx @@ -0,0 +1 @@ +export { default } from './BlogPage'; From 43776ca74f95a6a94b5b01869500d6525902322e Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Wed, 18 Oct 2023 12:21:32 +0900 Subject: [PATCH 16/34] style : change header style --- src/components/Header/Desktop/DesktopHeader.tsx | 4 ++-- src/components/Header/Header.tsx | 4 ++-- src/components/Header/header.module.scss | 5 +++-- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/Header/Desktop/DesktopHeader.tsx b/src/components/Header/Desktop/DesktopHeader.tsx index fe3b90bf..dfb62fd4 100644 --- a/src/components/Header/Desktop/DesktopHeader.tsx +++ b/src/components/Header/Desktop/DesktopHeader.tsx @@ -55,8 +55,8 @@ interface MenuTitleProps { } export const Wrapper = styled.div` - max-width: 1280px; - width: 90%; + max-width: 1200px; + width: 100%; display: flex; justify-content: space-between; `; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 3e2a3fe9..3ee1be16 100644 --- 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/header.module.scss b/src/components/Header/header.module.scss index a4a41259..ecd22026 100644 --- a/src/components/Header/header.module.scss +++ b/src/components/Header/header.module.scss @@ -11,16 +11,17 @@ background-color: rgba(22, 22, 28, 0.9); 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; } } From 8f2e09a45e2caf8d7e41dad940ceaf91f4e79f56 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Wed, 18 Oct 2023 15:19:28 +0900 Subject: [PATCH 17/34] =?UTF-8?q?feat=20:=20=EB=B8=94=EB=A1=9C=EA=B7=B8=20?= =?UTF-8?q?=ED=83=AD=20=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/BlogPage/BlogPage.tsx | 7 +- .../BlogPage/components/navigation/index.tsx | 35 ++++++ .../BlogPage/components/navigation/style.ts | 101 ++++++++++++++++++ .../BlogPage/components/navigation/types.ts | 10 ++ 4 files changed, 152 insertions(+), 1 deletion(-) create mode 100644 src/views/BlogPage/components/navigation/index.tsx create mode 100644 src/views/BlogPage/components/navigation/style.ts create mode 100644 src/views/BlogPage/components/navigation/types.ts diff --git a/src/views/BlogPage/BlogPage.tsx b/src/views/BlogPage/BlogPage.tsx index f4eca1e9..7ea77c88 100644 --- a/src/views/BlogPage/BlogPage.tsx +++ b/src/views/BlogPage/BlogPage.tsx @@ -1,7 +1,12 @@ import PageLayout from '@src/components/common/PageLayout'; +import Navigation from './components/navigation'; function BlogPage() { - return ; + return ( + + + + ); } export default BlogPage; diff --git a/src/views/BlogPage/components/navigation/index.tsx b/src/views/BlogPage/components/navigation/index.tsx new file mode 100644 index 00000000..e6646163 --- /dev/null +++ b/src/views/BlogPage/components/navigation/index.tsx @@ -0,0 +1,35 @@ +import { useState } from 'react'; +import * as S from './style'; +import { BlogTabList } from './types'; + +function Navigation() { + const [selectTab, setSelectTab] = useState('REVIEW'); + const blogTabList: BlogTabList = { + REVIEW: { title: '활동후기', description: 'SOPT 회원들의 생생한 활동 후기 마치 생생정보통' }, + ARTICLE: { title: '아티클', description: 'SOPT 회원들의 멋있는 아티클들' }, + }; + + return ( + + + + {Object.entries(blogTabList).map(([blogTab, tabInfo]) => { + return ( + setSelectTab(blogTab as keyof BlogTabList)} + isSelected={selectTab === blogTab} + > + {tabInfo.title} + + ); + })} + + {blogTabList[selectTab]?.description} +

드롭다운 들어가는 부분

+ + + ); +} + +export default Navigation; diff --git a/src/views/BlogPage/components/navigation/style.ts b/src/views/BlogPage/components/navigation/style.ts new file mode 100644 index 00000000..d8fad6a4 --- /dev/null +++ b/src/views/BlogPage/components/navigation/style.ts @@ -0,0 +1,101 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.section` + width: 100%; + margin-top: 188px; + display: flex; + align-items: center; + justify-content: center; + + /* 태블릿 뷰 */ + @media (max-width: 939px) and (min-width: 768px) { + margin-top: 188px; + } + /* 모바일 뷰 */ + @media (max-width: 767px) { + margin-top: 76px; + } +`; + +export const Container = styled.main` + width: 900px; + display: flex; + align-items: flex-start; + flex-direction: column; + + /* 태블릿 뷰 */ + @media (max-width: 939px) and (min-width: 768px) { + margin-left: 20px; + margin-right: 20px; + width: 100%; + } + /* 모바일 뷰 */ + @media (max-width: 767px) { + margin-left: 20px; + margin-right: 20px; + width: 100%; + } +`; + +export const TabContainer = styled.section` + display: flex; + align-items: center; +`; + +interface MenuTitleProps { + isSelected: boolean; +} + +export const TabTitle = styled.article` + font-size: 24px; + height: 100%; + line-height: 36px; + font-weight: 700; + letter-spacing: -0.48px; + + color: ${({ isSelected }) => (isSelected ? '#F7F8FA' : '#66666D')}; + + cursor: pointer; + position: relative; + border-bottom: ${({ isSelected }) => isSelected && '2px solid #c0c5c9'}; + + padding-bottom: 16px; + margin-right: 20px; + + /* 모바일 뷰 */ + @media (max-width: 767px) { + margin-right: 12px; + } +`; + +export const TabDescription = styled.h1` + margin-top: 24px; + margin-bottom: 48px; + + font-size: 20px; + font-weight: 600; + line-height: 30px; + letter-spacing: -0.4px; + color: #c3c3c6; + width: 100%; + + /* 모바일 뷰 */ + @media (max-width: 767px) { + margin-top: 14px; + margin-bottom: 16px; + display: flex; + + padding: 16px; + flex-direction: column; + align-items: flex-start; + gap: 10px; + border-radius: 12px; + background: #17171c; + + font-size: 14px; + font-weight: 500; + line-height: 23.1px; + letter-spacing: -0.21px; + color: #f0f0f0; + } +`; diff --git a/src/views/BlogPage/components/navigation/types.ts b/src/views/BlogPage/components/navigation/types.ts new file mode 100644 index 00000000..b14bb9ac --- /dev/null +++ b/src/views/BlogPage/components/navigation/types.ts @@ -0,0 +1,10 @@ +export interface BlogTabList { + REVIEW: { + title: string; + description: string; + }; + ARTICLE: { + title: string; + description: string; + }; +} From dc3d174620298a5632e6dd9e307c3b547ebfec97 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Wed, 18 Oct 2023 15:19:44 +0900 Subject: [PATCH 18/34] =?UTF-8?q?style=20:=20=EC=A0=84=EC=B2=B4=EC=A0=81?= =?UTF-8?q?=EC=9D=B8=20=EC=BB=AC=EB=9F=AC=20=EC=BD=94=EB=93=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Footer/OriginFooter/style.ts | 2 +- src/components/Header/header.module.scss | 2 +- src/lib/styles/global.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Footer/OriginFooter/style.ts b/src/components/Footer/OriginFooter/style.ts index 4f01c0b1..0eb0a562 100644 --- a/src/components/Footer/OriginFooter/style.ts +++ b/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) { diff --git a/src/components/Header/header.module.scss b/src/components/Header/header.module.scss index ecd22026..2d96014a 100644 --- a/src/components/Header/header.module.scss +++ b/src/components/Header/header.module.scss @@ -8,7 +8,7 @@ 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; diff --git a/src/lib/styles/global.ts b/src/lib/styles/global.ts index f38426db..3a89d308 100644 --- 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; } From 51d8a5e3ae42593b870fc5fe14f4a1b9aff59e78 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Wed, 18 Oct 2023 11:32:57 +0900 Subject: [PATCH 19/34] =?UTF-8?q?feat=20:=20blog=20=ED=83=AD=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/BlogPage/BlogPage.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/views/BlogPage/BlogPage.tsx b/src/views/BlogPage/BlogPage.tsx index 7ea77c88..5c3da795 100644 --- a/src/views/BlogPage/BlogPage.tsx +++ b/src/views/BlogPage/BlogPage.tsx @@ -1,12 +1,10 @@ import PageLayout from '@src/components/common/PageLayout'; import Navigation from './components/navigation'; -function BlogPage() { +export default function BlogPage() { return ( ); } - -export default BlogPage; From 190d37963ed8171aaaf2b1da7fbd97ecb3a25bb1 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Thu, 19 Oct 2023 21:10:30 +0900 Subject: [PATCH 20/34] refactor : change to inline export --- src/views/BlogPage/components/navigation/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/views/BlogPage/components/navigation/index.tsx b/src/views/BlogPage/components/navigation/index.tsx index e6646163..79d24906 100644 --- a/src/views/BlogPage/components/navigation/index.tsx +++ b/src/views/BlogPage/components/navigation/index.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import * as S from './style'; import { BlogTabList } from './types'; -function Navigation() { +export default function Navigation() { const [selectTab, setSelectTab] = useState('REVIEW'); const blogTabList: BlogTabList = { REVIEW: { title: '활동후기', description: 'SOPT 회원들의 생생한 활동 후기 마치 생생정보통' }, @@ -31,5 +31,3 @@ function Navigation() { ); } - -export default Navigation; From c02989e1c7fe1c3530e0c0a338db21b8f37f0198 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Thu, 19 Oct 2023 21:11:04 +0900 Subject: [PATCH 21/34] refactor: apply color systems --- src/views/BlogPage/components/navigation/style.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/views/BlogPage/components/navigation/style.ts b/src/views/BlogPage/components/navigation/style.ts index d8fad6a4..af65545b 100644 --- a/src/views/BlogPage/components/navigation/style.ts +++ b/src/views/BlogPage/components/navigation/style.ts @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import { colors } from '@src/lib/styles/colors'; export const Wrapper = styled.section` width: 100%; @@ -53,11 +54,11 @@ export const TabTitle = styled.article` font-weight: 700; letter-spacing: -0.48px; - color: ${({ isSelected }) => (isSelected ? '#F7F8FA' : '#66666D')}; + color: ${({ isSelected }) => (isSelected ? `${colors.gray10}` : `${colors.gray30}`)}; cursor: pointer; position: relative; - border-bottom: ${({ isSelected }) => isSelected && '2px solid #c0c5c9'}; + border-bottom: ${({ isSelected }) => isSelected && `2px solid ${colors.gray200}`}; padding-bottom: 16px; margin-right: 20px; @@ -76,7 +77,7 @@ export const TabDescription = styled.h1` font-weight: 600; line-height: 30px; letter-spacing: -0.4px; - color: #c3c3c6; + color: ${colors.gray50}; width: 100%; /* 모바일 뷰 */ @@ -90,12 +91,12 @@ export const TabDescription = styled.h1` align-items: flex-start; gap: 10px; border-radius: 12px; - background: #17171c; + background: ${colors.gray800}; font-size: 14px; font-weight: 500; line-height: 23.1px; letter-spacing: -0.21px; - color: #f0f0f0; + color: ${colors.gray10}; } `; From 2064b1e9a38bb0c96d651ab2573e34071859c986 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Thu, 19 Oct 2023 21:20:34 +0900 Subject: [PATCH 22/34] =?UTF-8?q?style=20:=20header=20=EC=84=A0=ED=83=9D?= =?UTF-8?q?=ED=95=9C=20=ED=83=AD=EC=97=90=20=EB=B0=91=EC=A4=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header/Desktop/DesktopHeader.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/components/Header/Desktop/DesktopHeader.tsx b/src/components/Header/Desktop/DesktopHeader.tsx index dfb62fd4..9dfc4aba 100644 --- a/src/components/Header/Desktop/DesktopHeader.tsx +++ b/src/components/Header/Desktop/DesktopHeader.tsx @@ -51,7 +51,6 @@ function MenuTap({ menuTap, handleIsSelected }: MenuTapProps) { interface MenuTitleProps { isSelected?: boolean; isOpened?: boolean; - type?: 'main' | 'sub'; } export const Wrapper = styled.div` @@ -137,20 +136,14 @@ export const MenuTitle = styled.div` 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} - } `; export default DesktopHeader; From 51d8f9a91e47cae1bbacefb99bef6ee6006c2182 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Thu, 19 Oct 2023 22:55:55 +0900 Subject: [PATCH 23/34] fix : change constant color --- src/views/BlogPage/components/navigation/style.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/BlogPage/components/navigation/style.ts b/src/views/BlogPage/components/navigation/style.ts index af65545b..1c0724a3 100644 --- a/src/views/BlogPage/components/navigation/style.ts +++ b/src/views/BlogPage/components/navigation/style.ts @@ -77,7 +77,7 @@ export const TabDescription = styled.h1` font-weight: 600; line-height: 30px; letter-spacing: -0.4px; - color: ${colors.gray50}; + color: ${colors.gray100}; width: 100%; /* 모바일 뷰 */ @@ -97,6 +97,6 @@ export const TabDescription = styled.h1` font-weight: 500; line-height: 23.1px; letter-spacing: -0.21px; - color: ${colors.gray10}; + color: ${colors.gray30}; } `; From d0557d77a57363ca0fa45e8d548d462ecf70dc99 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Fri, 20 Oct 2023 13:41:50 +0900 Subject: [PATCH 24/34] fix : blog tab mobile boder style --- src/views/BlogPage/components/navigation/style.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/BlogPage/components/navigation/style.ts b/src/views/BlogPage/components/navigation/style.ts index 1c0724a3..724636d6 100644 --- a/src/views/BlogPage/components/navigation/style.ts +++ b/src/views/BlogPage/components/navigation/style.ts @@ -65,6 +65,7 @@ export const TabTitle = styled.article` /* 모바일 뷰 */ @media (max-width: 767px) { + border-bottom: ${({ isSelected }) => isSelected && `1px solid ${colors.gray200}`}; margin-right: 12px; } `; From 5c31a0d2859444476ec35c4c76bebe7da50b1de5 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Sat, 21 Oct 2023 16:50:15 +0900 Subject: [PATCH 25/34] fix : blog tab description --- src/views/BlogPage/components/navigation/index.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/views/BlogPage/components/navigation/index.tsx b/src/views/BlogPage/components/navigation/index.tsx index 79d24906..eeade166 100644 --- a/src/views/BlogPage/components/navigation/index.tsx +++ b/src/views/BlogPage/components/navigation/index.tsx @@ -5,8 +5,14 @@ import { BlogTabList } from './types'; export default function Navigation() { const [selectTab, setSelectTab] = useState('REVIEW'); const blogTabList: BlogTabList = { - REVIEW: { title: '활동후기', description: 'SOPT 회원들의 생생한 활동 후기 마치 생생정보통' }, - ARTICLE: { title: '아티클', description: 'SOPT 회원들의 멋있는 아티클들' }, + REVIEW: { + title: '활동후기', + description: '회원들의 진솔한 후기를 통해 SOPT를 미리 만나보세요. ', + }, + ARTICLE: { + title: '아티클', + description: '회원들의 아티클을 통해 SOPT에서 얻은 인사이트를 확인해보세요.', + }, }; return ( From bb6d10a00903fd7502dbe34ee0c5a58447b81a52 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Sat, 21 Oct 2023 16:50:30 +0900 Subject: [PATCH 26/34] style : change tab style --- src/views/BlogPage/components/navigation/style.ts | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/views/BlogPage/components/navigation/style.ts b/src/views/BlogPage/components/navigation/style.ts index 724636d6..331d5944 100644 --- a/src/views/BlogPage/components/navigation/style.ts +++ b/src/views/BlogPage/components/navigation/style.ts @@ -24,14 +24,8 @@ export const Container = styled.main` align-items: flex-start; flex-direction: column; - /* 태블릿 뷰 */ - @media (max-width: 939px) and (min-width: 768px) { - margin-left: 20px; - margin-right: 20px; - width: 100%; - } - /* 모바일 뷰 */ - @media (max-width: 767px) { + /* 태블릿, 모바일 뷰 */ + @media (max-width: 939px) { margin-left: 20px; margin-right: 20px; width: 100%; @@ -54,7 +48,7 @@ export const TabTitle = styled.article` font-weight: 700; letter-spacing: -0.48px; - color: ${({ isSelected }) => (isSelected ? `${colors.gray10}` : `${colors.gray30}`)}; + color: ${({ isSelected }) => (isSelected ? `${colors.gray30}` : `${colors.gray300}`)}; cursor: pointer; position: relative; From 59cc5551c973919827f51a525c7e53922b36db5e Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Sat, 21 Oct 2023 17:25:13 +0900 Subject: [PATCH 27/34] =?UTF-8?q?fix=20:=20color=20=EC=83=81=EC=88=98=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header/Header.tsx | 6 +++--- src/components/Header/Mobile/HeaderMenu.style.ts | 4 ++-- .../Header/{header.module.scss => style.ts} | 15 +++++++++------ 3 files changed, 14 insertions(+), 11 deletions(-) rename src/components/Header/{header.module.scss => style.ts} (52%) diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 3ee1be16..b6095b5a 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,7 +1,7 @@ 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('940px'); @@ -9,10 +9,10 @@ export function Header() { const isMobile = useIsMobile(); return ( -
+ {isDesktop && } {isTablet && } {isMobile && } -
+ ); } diff --git a/src/components/Header/Mobile/HeaderMenu.style.ts b/src/components/Header/Mobile/HeaderMenu.style.ts index bc80576c..a37f7988 100644 --- a/src/components/Header/Mobile/HeaderMenu.style.ts +++ b/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; diff --git a/src/components/Header/header.module.scss b/src/components/Header/style.ts similarity index 52% rename from src/components/Header/header.module.scss rename to src/components/Header/style.ts index 2d96014a..4569d7e0 100644 --- a/src/components/Header/header.module.scss +++ b/src/components/Header/style.ts @@ -1,6 +1,7 @@ -@import '@src/lib/styles/mixins'; +import styled from '@emotion/styled'; +import { colors } from '@src/lib/styles/colors'; -.wrapper { +export const Wrapper = styled.header` width: 100%; min-height: 80px; margin: 0 auto; @@ -8,20 +9,22 @@ justify-content: center; align-items: center; position: fixed; - background-color: #0f0f12; + background-color: ${colors.gray900}; backdrop-filter: blur(20px); z-index: 100; padding: 0 20px; top: 0; - @include tablet { + /* 태블릿 + 데스크탑 뷰 */ + @media (min-width: 768px) { height: 48px; } - @include mobile { + /* 모바일 뷰 */ + @media (max-width: 767px) { height: 48px; min-height: 48px; justify-content: space-between; } -} +`; From 7f2037a8cdc31e78046ee65faa37cc7ef34646f7 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Sat, 21 Oct 2023 21:29:10 +0900 Subject: [PATCH 28/34] =?UTF-8?q?style=20:=20footer=20color=20=EC=83=81?= =?UTF-8?q?=EC=88=98=EB=A1=9C=20=EB=B0=94=EA=BE=B8=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Footer/OriginFooter/style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Footer/OriginFooter/style.ts b/src/components/Footer/OriginFooter/style.ts index 0eb0a562..00b1af5e 100644 --- a/src/components/Footer/OriginFooter/style.ts +++ b/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: #17171c; + background-color: ${colors.gray800}; /* 태블릿 + 데스크탑 뷰 */ @media (min-width: 766px) { From 74553a9c65175fb0d924b8ce90a21075d946ce5e Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Sat, 21 Oct 2023 22:07:51 +0900 Subject: [PATCH 29/34] refactor : change folder name --- src/views/BlogPage/BlogPage.tsx | 4 ++-- .../BlogPage/components/{navigation => blogTab}/index.tsx | 2 +- .../BlogPage/components/{navigation => blogTab}/style.ts | 0 .../BlogPage/components/{navigation => blogTab}/types.ts | 0 4 files changed, 3 insertions(+), 3 deletions(-) rename src/views/BlogPage/components/{navigation => blogTab}/index.tsx (96%) rename src/views/BlogPage/components/{navigation => blogTab}/style.ts (100%) rename src/views/BlogPage/components/{navigation => blogTab}/types.ts (100%) diff --git a/src/views/BlogPage/BlogPage.tsx b/src/views/BlogPage/BlogPage.tsx index 5c3da795..285c20bf 100644 --- a/src/views/BlogPage/BlogPage.tsx +++ b/src/views/BlogPage/BlogPage.tsx @@ -1,10 +1,10 @@ import PageLayout from '@src/components/common/PageLayout'; -import Navigation from './components/navigation'; +import BlogTab from './components/blogTab'; export default function BlogPage() { return ( - + ); } diff --git a/src/views/BlogPage/components/navigation/index.tsx b/src/views/BlogPage/components/blogTab/index.tsx similarity index 96% rename from src/views/BlogPage/components/navigation/index.tsx rename to src/views/BlogPage/components/blogTab/index.tsx index eeade166..17c072bb 100644 --- a/src/views/BlogPage/components/navigation/index.tsx +++ b/src/views/BlogPage/components/blogTab/index.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import * as S from './style'; import { BlogTabList } from './types'; -export default function Navigation() { +export default function BlogTab() { const [selectTab, setSelectTab] = useState('REVIEW'); const blogTabList: BlogTabList = { REVIEW: { diff --git a/src/views/BlogPage/components/navigation/style.ts b/src/views/BlogPage/components/blogTab/style.ts similarity index 100% rename from src/views/BlogPage/components/navigation/style.ts rename to src/views/BlogPage/components/blogTab/style.ts diff --git a/src/views/BlogPage/components/navigation/types.ts b/src/views/BlogPage/components/blogTab/types.ts similarity index 100% rename from src/views/BlogPage/components/navigation/types.ts rename to src/views/BlogPage/components/blogTab/types.ts From 3f1bfb4a26b961dfb5b90fdef76e821f7ec8d2de Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Sat, 21 Oct 2023 22:19:17 +0900 Subject: [PATCH 30/34] =?UTF-8?q?feat=20:=20tab=20description=20=EC=96=B4?= =?UTF-8?q?=EC=A0=88=20=EB=8B=A8=EC=9C=84=20=EC=A4=84=EB=B0=94=EA=BF=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/BlogPage/components/blogTab/style.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/BlogPage/components/blogTab/style.ts b/src/views/BlogPage/components/blogTab/style.ts index 331d5944..cda092c2 100644 --- a/src/views/BlogPage/components/blogTab/style.ts +++ b/src/views/BlogPage/components/blogTab/style.ts @@ -67,6 +67,7 @@ export const TabTitle = styled.article` export const TabDescription = styled.h1` margin-top: 24px; margin-bottom: 48px; + word-break: keep-all; font-size: 20px; font-weight: 600; From afe94b6d6ba6577045ea08b97f99e4a19a76d468 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Sun, 22 Oct 2023 14:59:41 +0900 Subject: [PATCH 31/34] =?UTF-8?q?chore=20:=20sopt=20color=20libaray=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/components/Footer/OriginFooter/style.ts | 2 +- src/components/Header/Mobile/HeaderMenu.style.ts | 6 +++--- src/components/Header/style.ts | 4 ++-- src/components/common/RoundButton/RoundButton.style.tsx | 4 ++-- src/lib/styles/colors.ts | 2 +- src/pages/404.tsx | 2 +- src/views/BlogPage/components/blogTab/style.ts | 2 +- src/views/ReviewPage/components/Description/index.tsx | 2 +- .../RulesPage/components/CollapseLi/CollapseLi.style.tsx | 2 +- src/views/SopticlePage/components/Description/index.tsx | 2 +- 11 files changed, 15 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 25efc6a0..c90b7a39 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@amplitude/analytics-browser": "^2.3.0", "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", + "@sopt-makers/colors": "^2.2.0", "@types/qs": "6.9.7", "axios": "^0.27.2", "classcat": "^5.0.4", diff --git a/src/components/Footer/OriginFooter/style.ts b/src/components/Footer/OriginFooter/style.ts index 00b1af5e..6ae09bc7 100644 --- a/src/components/Footer/OriginFooter/style.ts +++ b/src/components/Footer/OriginFooter/style.ts @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { colors } from '@src/lib/styles/colors'; +import { colors } from '@sopt-makers/colors'; export const Root = styled.footer` width: 100%; diff --git a/src/components/Header/Mobile/HeaderMenu.style.ts b/src/components/Header/Mobile/HeaderMenu.style.ts index a37f7988..4777fdcb 100644 --- a/src/components/Header/Mobile/HeaderMenu.style.ts +++ b/src/components/Header/Mobile/HeaderMenu.style.ts @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import Link from 'next/link'; import { css } from '@emotion/react'; import { FadeIn, FadeInDown, FadeOut, FadeOutUp } from '@src/lib/styles/animation'; -import { colors } from '@src/lib/styles/colors'; type MenuType = 'idle' | 'open' | 'close'; @@ -63,7 +63,7 @@ export const MenuWrap = styled.div` export const Background = styled.div` height: 100vh; - background: ${colors.gray900}; + background: ${colors.gray950}; opacity: 0.8; `; @@ -110,7 +110,7 @@ export const ContentsWrap = styled.div` display: flex; flex-direction: column; justify-content: space-between; - background: ${colors.gray900}; + background: ${colors.gray950}; padding-top: 50px; margin-bottom: 0px; diff --git a/src/components/Header/style.ts b/src/components/Header/style.ts index 4569d7e0..08ceef24 100644 --- a/src/components/Header/style.ts +++ b/src/components/Header/style.ts @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { colors } from '@src/lib/styles/colors'; +import { colors } from '@sopt-makers/colors'; export const Wrapper = styled.header` width: 100%; @@ -9,7 +9,7 @@ export const Wrapper = styled.header` justify-content: center; align-items: center; position: fixed; - background-color: ${colors.gray900}; + background-color: ${colors.gray950}; backdrop-filter: blur(20px); z-index: 100; padding: 0 20px; diff --git a/src/components/common/RoundButton/RoundButton.style.tsx b/src/components/common/RoundButton/RoundButton.style.tsx index 3f25c23d..78dca264 100644 --- a/src/components/common/RoundButton/RoundButton.style.tsx +++ b/src/components/common/RoundButton/RoundButton.style.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { colors } from '@src/lib/styles/colors'; +import { colors } from '@sopt-makers/colors'; interface StyleProps { isReverse?: boolean; @@ -14,7 +14,7 @@ export const Root = styled.button` border-radius: 99px; background: ${colors.gray10}; - color: ${colors.gray900}; + color: ${colors.gray950}; font-size: 24px; font-weight: 600; line-height: 150%; /* 36px */ diff --git a/src/lib/styles/colors.ts b/src/lib/styles/colors.ts index 56cd3fc4..64ce3eba 100644 --- a/src/lib/styles/colors.ts +++ b/src/lib/styles/colors.ts @@ -13,7 +13,7 @@ export const colors = { gray600: '#3F3F47', gray700: '#2E2E35', gray800: '#202025', - gray900: '#0F0F12', + gray950: '#0F0F12', blue50: '#C8E1FF', blue100: '#8FC0FF', diff --git a/src/pages/404.tsx b/src/pages/404.tsx index cddaba92..74e72c06 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import { useRouter } from 'next/router'; import { Header } from '@src/components'; import RoundButton from '@src/components/common/RoundButton'; -import { colors } from '@src/lib/styles/colors'; function Wrong() { const router = useRouter(); diff --git a/src/views/BlogPage/components/blogTab/style.ts b/src/views/BlogPage/components/blogTab/style.ts index cda092c2..1b481d3e 100644 --- a/src/views/BlogPage/components/blogTab/style.ts +++ b/src/views/BlogPage/components/blogTab/style.ts @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { colors } from '@src/lib/styles/colors'; +import { colors } from '@sopt-makers/colors'; export const Wrapper = styled.section` width: 100%; diff --git a/src/views/ReviewPage/components/Description/index.tsx b/src/views/ReviewPage/components/Description/index.tsx index dd68dfa4..cf1faa63 100644 --- a/src/views/ReviewPage/components/Description/index.tsx +++ b/src/views/ReviewPage/components/Description/index.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { colors } from '@src/lib/styles/colors'; +import { colors } from '@sopt-makers/colors'; const Description = () => { return SOPT 회원들의 활동 후기; diff --git a/src/views/RulesPage/components/CollapseLi/CollapseLi.style.tsx b/src/views/RulesPage/components/CollapseLi/CollapseLi.style.tsx index 51eb76cd..f1d6dea8 100644 --- a/src/views/RulesPage/components/CollapseLi/CollapseLi.style.tsx +++ b/src/views/RulesPage/components/CollapseLi/CollapseLi.style.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import { css } from '@emotion/react'; import { ArrowDownAnimation, ArrowUpAnimation } from '@src/lib/styles/animation'; -import { colors } from '@src/lib/styles/colors'; interface ButtonStyleProps { isOpened: boolean; diff --git a/src/views/SopticlePage/components/Description/index.tsx b/src/views/SopticlePage/components/Description/index.tsx index 440d9e24..90f11e68 100644 --- a/src/views/SopticlePage/components/Description/index.tsx +++ b/src/views/SopticlePage/components/Description/index.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { colors } from '@src/lib/styles/colors'; +import { colors } from '@sopt-makers/colors'; const Description = () => { return 솝티클; From dc96bc54c789c82a2f0c8b262332156eaee1e2d3 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Sun, 22 Oct 2023 15:54:34 +0900 Subject: [PATCH 32/34] =?UTF-8?q?style=20:=20header=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Header/Desktop/DesktopHeader.tsx | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/Header/Desktop/DesktopHeader.tsx b/src/components/Header/Desktop/DesktopHeader.tsx index 9dfc4aba..42e7c09a 100644 --- a/src/components/Header/Desktop/DesktopHeader.tsx +++ b/src/components/Header/Desktop/DesktopHeader.tsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import Link from 'next/link'; import { css } from '@emotion/react'; import { LOGO_IMAGE_URL } from '@src/assets/mainLogo/base64_logo'; @@ -114,36 +115,35 @@ export const MenuTitleAnchor = styled(Link)` } `; -const menuTitleUnderline = css` - &::after { - content: ''; - position: absolute; - top: 3.5rem; /* this is bad practice */ - left: -20px; - width: 100%; - border-bottom: 2px solid white; - } - &:last-child { - &::after { - width: calc(100% + 40px); - } - } -`; - export const MenuTitle = styled.div` font-size: 18px; height: 100%; line-height: 36px; font-weight: ${({ isSelected }) => (isSelected ? '700' : '500')}; - color: ${({ isSelected }) => (isSelected ? '#fff' : 'rgba(255, 255, 255, 0.5)')}; + color: ${colors.white}; cursor: pointer; position: relative; - ${({ isSelected }) => isSelected && menuTitleUnderline} &:not(:last-child) { padding-right: 40px; } + + &:hover { + &::after { + content: ''; + position: absolute; + top: 3.5rem; /* this is bad practice */ + left: -20px; + width: 100%; + border-bottom: 2px solid ${colors.white}; + } + &:last-child { + &::after { + width: calc(100% + 40px); + } + } + } `; export default DesktopHeader; From 5423574e9b6df1648a8212800d6196aa0b208bb6 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Sun, 22 Oct 2023 17:14:12 +0900 Subject: [PATCH 33/34] feat : add blog tab title hover style --- src/views/BlogPage/components/blogTab/style.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/views/BlogPage/components/blogTab/style.ts b/src/views/BlogPage/components/blogTab/style.ts index 1b481d3e..4ba9d40b 100644 --- a/src/views/BlogPage/components/blogTab/style.ts +++ b/src/views/BlogPage/components/blogTab/style.ts @@ -62,6 +62,10 @@ export const TabTitle = styled.article` border-bottom: ${({ isSelected }) => isSelected && `1px solid ${colors.gray200}`}; margin-right: 12px; } + + &:hover { + color: ${colors.gray100}; + } `; export const TabDescription = styled.h1` From 1ed8aafc889a9d2c72db20a5a6736a5e2edb8051 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Sun, 22 Oct 2023 21:43:23 +0900 Subject: [PATCH 34/34] =?UTF-8?q?chore=20:=20blogTab=20=EB=B3=80=EC=88=98?= =?UTF-8?q?=EB=AA=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/BlogPage/components/blogTab/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/views/BlogPage/components/blogTab/index.tsx b/src/views/BlogPage/components/blogTab/index.tsx index 17c072bb..c8cd633d 100644 --- a/src/views/BlogPage/components/blogTab/index.tsx +++ b/src/views/BlogPage/components/blogTab/index.tsx @@ -3,7 +3,7 @@ import * as S from './style'; import { BlogTabList } from './types'; export default function BlogTab() { - const [selectTab, setSelectTab] = useState('REVIEW'); + const [selectedTab, setSelectedTab] = useState('REVIEW'); const blogTabList: BlogTabList = { REVIEW: { title: '활동후기', @@ -23,15 +23,15 @@ export default function BlogTab() { return ( setSelectTab(blogTab as keyof BlogTabList)} - isSelected={selectTab === blogTab} + onClick={() => setSelectedTab(blogTab as keyof BlogTabList)} + isSelected={selectedTab === blogTab} > {tabInfo.title} ); })} - {blogTabList[selectTab]?.description} + {blogTabList[selectedTab]?.description}

드롭다운 들어가는 부분