From c58bee62234cf2fe59c45d1cac428cfea39b3faa Mon Sep 17 00:00:00 2001 From: aaminha Date: Sun, 28 Apr 2024 18:36:17 +0900 Subject: [PATCH 1/9] =?UTF-8?q?design:=20GlobalStyle=EC=97=90=EC=84=9C=20b?= =?UTF-8?q?utton,=20image=20=EC=86=8D=EC=84=B1=20=EB=B3=80=EA=B2=BD=20(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/global/GlobalStyle.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/styles/global/GlobalStyle.ts b/src/styles/global/GlobalStyle.ts index dd38e19..7c1f03b 100644 --- a/src/styles/global/GlobalStyle.ts +++ b/src/styles/global/GlobalStyle.ts @@ -46,10 +46,17 @@ table { *{ box-sizing: border-box; } - -body{} +button { + border: none; + background: none; + padding: 0; + cursor: pointer; +} a{ text-decoration: none; color: inherit; } +image { + display: block; +} `; From 4c00adbe84905d8989a62d5eb46b9c5fb3483c67 Mon Sep 17 00:00:00 2001 From: aaminha Date: Sun, 28 Apr 2024 18:36:45 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20SmallButton=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/SmallButton.tsx | 48 +++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 src/components/common/SmallButton.tsx diff --git a/src/components/common/SmallButton.tsx b/src/components/common/SmallButton.tsx new file mode 100644 index 0000000..3fb79aa --- /dev/null +++ b/src/components/common/SmallButton.tsx @@ -0,0 +1,48 @@ +import styled, { css } from 'styled-components'; + +interface SmallButtonProps { + children: React.ReactNode; + filled?: boolean; + width?: string | null; + onClick?: () => void; +} + +export const SmallButton = ({ + children, + filled = false, + width = null, + onClick, +}: SmallButtonProps) => { + return ( + + {children} + + ); +}; + +const StyledButton = styled.button<{ $filled: boolean; $width: string | null }>` + ${({ theme }) => theme.font.desktop.body2m}; + + width: ${({ $width }) => $width}; + padding: 8px 24px; + border-radius: 8px; + + ${(props) => + props.$filled + ? css` + color: ${props.theme.color.white}; + background: ${props.theme.color.gray800}; + + &:hover { + background: ${props.theme.color.gray700}; + } + ` + : css` + color: ${props.theme.color.gray800}; + background: transparent; + + &:hover { + color: ${props.theme.color.primary600}; + } + `} +`; From 594a6ff7adac926d863fa3f1dc6a340e27a2f8d0 Mon Sep 17 00:00:00 2001 From: aaminha Date: Sun, 28 Apr 2024 20:49:38 +0900 Subject: [PATCH 3/9] =?UTF-8?q?refactor:=20=EB=B2=84=ED=8A=BC=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=86=8D=EC=84=B1=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC=20(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/SmallButton.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/common/SmallButton.tsx b/src/components/common/SmallButton.tsx index 3fb79aa..d5a2d4c 100644 --- a/src/components/common/SmallButton.tsx +++ b/src/components/common/SmallButton.tsx @@ -1,5 +1,4 @@ import styled, { css } from 'styled-components'; - interface SmallButtonProps { children: React.ReactNode; filled?: boolean; @@ -7,6 +6,11 @@ interface SmallButtonProps { onClick?: () => void; } +interface StyledButtonProps { + $filled: boolean; + $width: string | null; +} + export const SmallButton = ({ children, filled = false, @@ -20,7 +24,7 @@ export const SmallButton = ({ ); }; -const StyledButton = styled.button<{ $filled: boolean; $width: string | null }>` +const StyledButton = styled.button` ${({ theme }) => theme.font.desktop.body2m}; width: ${({ $width }) => $width}; From c05aa591be70777c2b755bcd47953aaf6be1b752 Mon Sep 17 00:00:00 2001 From: aaminha Date: Sun, 28 Apr 2024 21:12:19 +0900 Subject: [PATCH 4/9] =?UTF-8?q?feat:=20PlainButton=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/PlainButton.tsx | 42 +++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 src/components/common/PlainButton.tsx diff --git a/src/components/common/PlainButton.tsx b/src/components/common/PlainButton.tsx new file mode 100644 index 0000000..d3cf2a8 --- /dev/null +++ b/src/components/common/PlainButton.tsx @@ -0,0 +1,42 @@ +import styled from 'styled-components'; + +interface PlainButtonProps { + children: React.ReactNode; + primary?: boolean; + width?: string | null; + height?: string | null; + onClick?: () => void; +} + +interface StyledButtonProps { + $primary: boolean; + $width: string | null; + $height: string | null; +} + +export const PlainButton = ({ + children, + primary = false, + width = null, + height = null, + onClick, +}: PlainButtonProps) => { + return ( + + {children} + + ); +}; + +const StyledButton = styled.button` + ${({ theme }) => theme.font.desktop.label1m}; + + width: ${({ $width }) => $width}; + height: ${({ $height }) => $height}; + padding: 8px 24px; + + color: ${(props) => (props.$primary ? props.theme.color.primary700 : props.theme.color.white)}; + background: ${(props) => + props.$primary ? props.theme.color.primary50 : props.theme.color.gray800}; + border-radius: 8px; +`; From aec46477b6edf96d940be15a6717ef436b1594b9 Mon Sep 17 00:00:00 2001 From: aaminha Date: Mon, 29 Apr 2024 17:18:25 +0900 Subject: [PATCH 5/9] =?UTF-8?q?refactor:=20PlainButton=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=86=8D=EC=84=B1=20=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EB=B3=80=EA=B2=BD=20(#3)=20-=20primary(boolean)=20?= =?UTF-8?q?=EC=86=8D=EC=84=B1=20=EC=A0=9C=EA=B1=B0=20-=20variant(PlainButt?= =?UTF-8?q?onVariant)=20=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/PlainButton.tsx | 42 +++++++++++++++++++++------ 1 file changed, 33 insertions(+), 9 deletions(-) diff --git a/src/components/common/PlainButton.tsx b/src/components/common/PlainButton.tsx index d3cf2a8..113d3c9 100644 --- a/src/components/common/PlainButton.tsx +++ b/src/components/common/PlainButton.tsx @@ -1,42 +1,66 @@ -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; + +type PlainButtonVariant = 'primary' | 'gray'; interface PlainButtonProps { children: React.ReactNode; - primary?: boolean; + variant: PlainButtonVariant; width?: string | null; height?: string | null; onClick?: () => void; } interface StyledButtonProps { - $primary: boolean; + $variant: PlainButtonVariant; $width: string | null; $height: string | null; } export const PlainButton = ({ children, - primary = false, + variant, width = null, height = null, onClick, }: PlainButtonProps) => { return ( - + {children} ); }; +const getVariantStyle = ($variant: PlainButtonVariant) => { + switch ($variant) { + case 'gray': + return css` + color: ${(props) => props.theme.color.white}; + background: ${(props) => props.theme.color.gray800}; + + &:hover { + background: ${(props) => props.theme.color.gray700}; + } + `; + + case 'primary': + return css` + color: ${(props) => props.theme.color.primary700}; + background: ${(props) => props.theme.color.primary50}; + + &:hover { + background: ${(props) => props.theme.color.primary100}; + } + `; + } +}; + const StyledButton = styled.button` ${({ theme }) => theme.font.desktop.label1m}; width: ${({ $width }) => $width}; height: ${({ $height }) => $height}; padding: 8px 24px; - - color: ${(props) => (props.$primary ? props.theme.color.primary700 : props.theme.color.white)}; - background: ${(props) => - props.$primary ? props.theme.color.primary50 : props.theme.color.gray800}; border-radius: 8px; + + ${({ $variant }) => getVariantStyle($variant)} `; From dba06349f071730f3e8689b18a9a563c322d55a6 Mon Sep 17 00:00:00 2001 From: aaminha Date: Mon, 29 Apr 2024 17:22:42 +0900 Subject: [PATCH 6/9] =?UTF-8?q?feat:=20SideNavigation=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/.gitkeep | 0 src/assets/icons/arrowRight.svg | 3 + src/assets/icons/close.svg | 3 + src/components/common/SideNavigation.tsx | 123 +++++++++++++++++++++++ src/constants/navigation.ts | 5 + src/styles/global/GlobalStyle.ts | 2 +- 6 files changed, 135 insertions(+), 1 deletion(-) delete mode 100644 src/assets/.gitkeep create mode 100644 src/assets/icons/arrowRight.svg create mode 100644 src/assets/icons/close.svg create mode 100644 src/components/common/SideNavigation.tsx create mode 100644 src/constants/navigation.ts diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/assets/icons/arrowRight.svg b/src/assets/icons/arrowRight.svg new file mode 100644 index 0000000..6df401b --- /dev/null +++ b/src/assets/icons/arrowRight.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg new file mode 100644 index 0000000..c43942b --- /dev/null +++ b/src/assets/icons/close.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/common/SideNavigation.tsx b/src/components/common/SideNavigation.tsx new file mode 100644 index 0000000..5d54cdc --- /dev/null +++ b/src/components/common/SideNavigation.tsx @@ -0,0 +1,123 @@ +import { useEffect } from 'react'; + +import { Link } from 'react-router-dom'; +import styled from 'styled-components'; + +import { ReactComponent as ArrowIcon } from '@/assets/icons/arrowRight.svg'; +import { ReactComponent as CloseIcon } from '@/assets/icons/close.svg'; +import { PlainButton } from '@/components/common/PlainButton'; +import { NAVIGATION_MENU } from '@/constants/navigation'; + +interface SideNavigationProps { + isLoggedIn: boolean; + setOpen: (show: boolean) => void; +} + +export const SideNavigation = ({ isLoggedIn, setOpen }: SideNavigationProps) => { + useEffect(() => { + document.body.style.overflow = 'hidden'; + + return () => { + document.body.style.overflow = 'unset'; + }; + }, []); + + return ( + + + + + {NAVIGATION_MENU.map((item) => ( + + {item.menu} + + + ))} + + + {/* TODO: 각 페이지 path로 이동하도록 click 핸들러 추가 */} + {isLoggedIn ? ( + <> + + 마이페이지 + + + 로그아웃 + + + ) : ( + + 로그인 + + )} + + + + ); +}; + +const StyledContainer = styled.div` + display: flex; + justify-content: flex-end; + + width: 100%; + height: 100vh; + + position: fixed; + top: 0; + right: 0; + + background: ${({ theme }) => theme.color.bgModal}; +`; + +const StyledContent = styled.nav` + display: flex; + flex-direction: column; + justify-content: space-between; + + width: 320px; + height: 100%; + + background: ${({ theme }) => theme.color.white}; +`; + +const StyledMenuButtonList = styled.div` + display: flex; + flex-direction: column; + + .close-button { + margin: 16px 20px 16px auto; + } + + .menu-button { + display: flex; + justify-content: space-between; + align-items: center; + + padding: 12px 16px 12px 32px; + background: ${({ theme }) => theme.color.white}; + + span { + ${({ theme }) => theme.font.mobile.title1}; + color: ${({ theme }) => theme.color.gray800}; + } + + svg { + margin: 12px; + } + + &:hover { + background: ${({ theme }) => theme.color.gray100}; + } + } +`; + +const StyledUserButtonList = styled.div` + display: flex; + flex-direction: column; + gap: 16px; + + padding: 20px 32px; +`; diff --git a/src/constants/navigation.ts b/src/constants/navigation.ts new file mode 100644 index 0000000..9e1684c --- /dev/null +++ b/src/constants/navigation.ts @@ -0,0 +1,5 @@ +export const NAVIGATION_MENU = [ + //TODO: path 수정하기 + { menu: '진단하기', path: '/' }, + { menu: '경험하기', path: '/' }, +]; diff --git a/src/styles/global/GlobalStyle.ts b/src/styles/global/GlobalStyle.ts index 7c1f03b..10aa111 100644 --- a/src/styles/global/GlobalStyle.ts +++ b/src/styles/global/GlobalStyle.ts @@ -56,7 +56,7 @@ a{ text-decoration: none; color: inherit; } -image { +svg, image { display: block; } `; From 8e2c02bee3cf6b232c68764a250c4e630d4e75e6 Mon Sep 17 00:00:00 2001 From: aaminha Date: Mon, 29 Apr 2024 19:07:04 +0900 Subject: [PATCH 7/9] =?UTF-8?q?feat:=20TopNavigation=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/menu.svg | 5 + src/assets/icons/user.svg | 3 + src/assets/mainLogo.svg | 23 +++++ src/components/common/TopNavigation.tsx | 130 ++++++++++++++++++++++++ src/router.tsx | 2 +- 5 files changed, 162 insertions(+), 1 deletion(-) create mode 100644 src/assets/icons/menu.svg create mode 100644 src/assets/icons/user.svg create mode 100644 src/assets/mainLogo.svg create mode 100644 src/components/common/TopNavigation.tsx diff --git a/src/assets/icons/menu.svg b/src/assets/icons/menu.svg new file mode 100644 index 0000000..dd09869 --- /dev/null +++ b/src/assets/icons/menu.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/assets/icons/user.svg b/src/assets/icons/user.svg new file mode 100644 index 0000000..b0614aa --- /dev/null +++ b/src/assets/icons/user.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/mainLogo.svg b/src/assets/mainLogo.svg new file mode 100644 index 0000000..91f6437 --- /dev/null +++ b/src/assets/mainLogo.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/common/TopNavigation.tsx b/src/components/common/TopNavigation.tsx new file mode 100644 index 0000000..df1a729 --- /dev/null +++ b/src/components/common/TopNavigation.tsx @@ -0,0 +1,130 @@ +import { useState } from 'react'; + +import { Link, useNavigate } from 'react-router-dom'; +import styled from 'styled-components'; + +import { ReactComponent as MenuIcon } from '@/assets/icons/menu.svg'; +import { ReactComponent as UserIcon } from '@/assets/icons/user.svg'; +import { ReactComponent as MainLogo } from '@/assets/mainLogo.svg'; +import { SideNavigation } from '@/components/common/SideNavigation'; +import { SmallButton } from '@/components/common/SmallButton'; +import { NAVIGATION_MENU } from '@/constants/navigation'; + +export const TopNavigation = () => { + const [loggedIn, setLoggedIn] = useState(false); // 로그인 여부를 확인하기 위한 임시 코드 + const [showSideNav, setShowSideNav] = useState(false); + const navigate = useNavigate(); + + return ( + + + + + + + + {NAVIGATION_MENU.map((item) => ( + { + navigate(item.path); + }} + > + {item.menu} + + ))} + + {loggedIn ? ( + + + + ) : ( + { + // TODO: 로그인 페이지로 이동하도록 수정 + setLoggedIn((prev) => !prev); + }} + > + 로그인 + + )} + + { + //TODO: 마이페이지로 이동하도록 수정 + setShowSideNav((prev) => !prev); + }} + > + + + {showSideNav && } + + + ); +}; + +const StyledContainer = styled.header` + position: fixed; + top: 0; + left: 0; + + width: 100%; + + border-bottom: 1px solid ${({ theme }) => theme.color.primary100}; + background: rgba(255, 255, 255, 0.6); + backdrop-filter: blur(5px); + + @media ${({ theme }) => theme.device.mobile} { + background: ${({ theme }) => theme.color.white}; + } +`; + +const StyledInnerContainer = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + + max-width: 1280px; + padding: 20px 42px; + margin: 0 auto; + + @media ${({ theme }) => theme.device.mobile} { + padding: 16px 8px 16px 24px; + } +`; + +const StyledMenuContainer = styled.div` + display: flex; + gap: 16px; + align-items: center; + + @media ${({ theme }) => theme.device.mobile} { + display: none; + } +`; + +const StyledNavigationMenu = styled.div` + display: flex; +`; + +const StyledMenuButton = styled.button` + display: none; + padding: 0px 12px; + + @media ${({ theme }) => theme.device.mobile} { + display: block; + } +`; + +const StyledUserButton = styled.button` + padding: 8px; + + border-radius: 8px; + background: ${({ theme }) => theme.color.primary50}; + + path { + fill: ${({ theme }) => theme.color.primary500}; + } +`; diff --git a/src/router.tsx b/src/router.tsx index 1e36b4c..04cf2a6 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -1,6 +1,6 @@ import { Route, Routes } from 'react-router-dom'; -import { HomePage } from './pages/HomePage'; +import { HomePage } from '@/pages/HomePage'; export const Router = () => { return ( From 9af70dc12d5f7fc9aeae57a871572d3a840a7411 Mon Sep 17 00:00:00 2001 From: aaminha Date: Mon, 29 Apr 2024 19:38:30 +0900 Subject: [PATCH 8/9] =?UTF-8?q?style:=20=EA=B0=9C=ED=96=89=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/SmallButton.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/common/SmallButton.tsx b/src/components/common/SmallButton.tsx index d5a2d4c..f610780 100644 --- a/src/components/common/SmallButton.tsx +++ b/src/components/common/SmallButton.tsx @@ -1,4 +1,5 @@ import styled, { css } from 'styled-components'; + interface SmallButtonProps { children: React.ReactNode; filled?: boolean; From e27e1d0f483117ca29a643a17b7d3d09488de91b Mon Sep 17 00:00:00 2001 From: aaminha Date: Tue, 30 Apr 2024 00:35:15 +0900 Subject: [PATCH 9/9] =?UTF-8?q?design:=20=EC=9B=8C=EB=94=A9=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/.gitkeep | 0 src/constants/navigation.ts | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) delete mode 100644 src/constants/.gitkeep diff --git a/src/constants/.gitkeep b/src/constants/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/constants/navigation.ts b/src/constants/navigation.ts index 9e1684c..7620025 100644 --- a/src/constants/navigation.ts +++ b/src/constants/navigation.ts @@ -1,5 +1,5 @@ export const NAVIGATION_MENU = [ //TODO: path 수정하기 - { menu: '진단하기', path: '/' }, - { menu: '경험하기', path: '/' }, + { menu: '자기이해', path: '/' }, + { menu: '경험추천', path: '/' }, ];