From e3a4dffd7493473f9321784d3ea7a38baf7341b5 Mon Sep 17 00:00:00 2001 From: mango906 Date: Sun, 13 Feb 2022 03:15:27 +0900 Subject: [PATCH 01/11] =?UTF-8?q?Feat:=20logo=20=EC=97=90=EC=85=8B=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/logo-admin-272.svg | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/assets/svg/logo-admin-272.svg diff --git a/src/assets/svg/logo-admin-272.svg b/src/assets/svg/logo-admin-272.svg new file mode 100644 index 00000000..559be182 --- /dev/null +++ b/src/assets/svg/logo-admin-272.svg @@ -0,0 +1,5 @@ + + + + + From aded2ee8df48e25f71ea8275150f49d976d4e752 Mon Sep 17 00:00:00 2001 From: mango906 Date: Sun, 13 Feb 2022 03:16:13 +0900 Subject: [PATCH 02/11] =?UTF-8?q?Feat:=20Header=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/Header/Header.component.tsx | 47 +++++++++++++++++++ .../common/Header/Header.stories.tsx | 12 +++++ src/components/common/Header/Header.styled.ts | 17 +++++++ src/components/common/index.ts | 2 + 4 files changed, 78 insertions(+) create mode 100644 src/components/common/Header/Header.component.tsx create mode 100644 src/components/common/Header/Header.stories.tsx create mode 100644 src/components/common/Header/Header.styled.ts diff --git a/src/components/common/Header/Header.component.tsx b/src/components/common/Header/Header.component.tsx new file mode 100644 index 00000000..3eabffb1 --- /dev/null +++ b/src/components/common/Header/Header.component.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import * as Styled from './Header.styled'; + +import Logo from '@/assets/svg/logo-admin-272.svg'; +import { + NavigationItem, + NavigationSize, +} from '@/components/common/Navigation/Navigation.component'; +import { Team, Role } from '@/components/common/UserProfile/UserProfile.component'; + +import { colors } from '@/styles'; + +import { Navigation, UserProfile } from '@/components'; + +const navigationItems: NavigationItem[] = [ + { + label: '지원서 내역', + to: window.location.pathname, + }, + { + label: 'SMS 발송 내역', + to: '/1', + }, + { + label: '지원서 설문지 내역', + to: '/2', + }, +]; + +const Header = () => { + return ( + + + + + + + + ); +}; + +export default Header; diff --git a/src/components/common/Header/Header.stories.tsx b/src/components/common/Header/Header.stories.tsx new file mode 100644 index 00000000..a8f8013a --- /dev/null +++ b/src/components/common/Header/Header.stories.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import Header from './Header.component'; + +export default { + title: 'Header', + component: Header, +} as ComponentMeta; + +const Template: ComponentStory = () =>
; + +export const header = Template.bind({}); diff --git a/src/components/common/Header/Header.styled.ts b/src/components/common/Header/Header.styled.ts new file mode 100644 index 00000000..efcf59bd --- /dev/null +++ b/src/components/common/Header/Header.styled.ts @@ -0,0 +1,17 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +export const HeaderContainer = styled.header` + ${({ theme }) => css` + height: 7rem; + border-bottom: 0.1rem solid ${theme.colors.gray30}; + `} +`; + +export const HeaderContainerInner = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + max-width: 120rem; + margin: 0 auto; +`; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 91450353..7aa21e74 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -7,3 +7,5 @@ export { default as Checkbox } from './Checkbox/Checkbox.component'; export { default as ModalWrapper } from './ModalWrapper/ModalWrapper.component'; export { default as RadioButton } from './RadioButton/RadioButton.component'; export { default as ToggleButton } from './ToggleButton/ToggleButton.component'; +export { default as UserProfile } from './UserProfile/UserProfile.component'; +export { default as Header } from './Header/Header.component'; From cab7fff831412cc1de30af2c7146cb3bad024ea6 Mon Sep 17 00:00:00 2001 From: mango906 Date: Sun, 13 Feb 2022 03:18:05 +0900 Subject: [PATCH 03/11] =?UTF-8?q?Feat:=20Navigation=20Item=EC=97=90=20lett?= =?UTF-8?q?er-spacing=20=EC=98=B5=EC=85=98=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/Navigation/Navigation.styled.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/common/Navigation/Navigation.styled.ts b/src/components/common/Navigation/Navigation.styled.ts index fd45162c..19f50cbe 100644 --- a/src/components/common/Navigation/Navigation.styled.ts +++ b/src/components/common/Navigation/Navigation.styled.ts @@ -36,11 +36,12 @@ export const NavigationItem = styled(Link)` align-items: center; justify-content: center; color: ${active ? theme.colors.purple70 : inActiveColor}; + letter-spacing: -0.05em; ${active ? css` border-bottom: 0.2rem solid ${theme.colors.purple70}; ` - : ''} + : ''}; `} `; From 41ad571735d7ea0945b1a9f4e435c3265c30e463 Mon Sep 17 00:00:00 2001 From: mango906 Date: Sun, 13 Feb 2022 03:18:32 +0900 Subject: [PATCH 04/11] =?UTF-8?q?Feat:=20Layout=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/Layout/Layout.component.tsx | 18 ++++++++++++++++++ src/components/common/Layout/Layout.styled.ts | 7 +++++++ src/components/common/index.ts | 1 + 3 files changed, 26 insertions(+) create mode 100644 src/components/common/Layout/Layout.component.tsx create mode 100644 src/components/common/Layout/Layout.styled.ts diff --git a/src/components/common/Layout/Layout.component.tsx b/src/components/common/Layout/Layout.component.tsx new file mode 100644 index 00000000..1b8096d2 --- /dev/null +++ b/src/components/common/Layout/Layout.component.tsx @@ -0,0 +1,18 @@ +import React, { ReactNode } from 'react'; +import { Header } from '@/components'; +import * as Styled from './Layout.styled'; + +interface LayoutProps { + children: ReactNode; +} + +const Layout = ({ children }: LayoutProps) => { + return ( + <> +
+ {children} + + ); +}; + +export default Layout; diff --git a/src/components/common/Layout/Layout.styled.ts b/src/components/common/Layout/Layout.styled.ts new file mode 100644 index 00000000..1d3f397c --- /dev/null +++ b/src/components/common/Layout/Layout.styled.ts @@ -0,0 +1,7 @@ +import styled from '@emotion/styled'; + +export const Main = styled.main` + max-width: 120rem; + min-height: calc(100vh - 7rem); + margin: 0 auto; +`; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 7aa21e74..365830bc 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -9,3 +9,4 @@ export { default as RadioButton } from './RadioButton/RadioButton.component'; export { default as ToggleButton } from './ToggleButton/ToggleButton.component'; export { default as UserProfile } from './UserProfile/UserProfile.component'; export { default as Header } from './Header/Header.component'; +export { default as Layout } from './Layout/Layout.component'; From ac32a58d0c3e9b7c7613a4df87a087e2df010867 Mon Sep 17 00:00:00 2001 From: mango906 Date: Sun, 13 Feb 2022 03:19:11 +0900 Subject: [PATCH 05/11] =?UTF-8?q?Feat:=20Layout=20=EC=A0=84=EC=B2=B4?= =?UTF-8?q?=EC=A0=81=EC=9C=BC=EB=A1=9C=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index d98a0bc2..32b3c65f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,15 +4,18 @@ import { Routes, Route } from 'react-router-dom'; import { Global, ThemeProvider } from '@emotion/react'; import { theme, globalStyles } from '@/styles'; +import { Layout } from '@/components'; import Count from '@/components/Count'; const App = () => ( <> - - } /> - + + + } /> + + ); From b442f70a5d87e4b653115fcfda718dcfbace5f31 Mon Sep 17 00:00:00 2001 From: mango906 Date: Sun, 13 Feb 2022 04:12:40 +0900 Subject: [PATCH 06/11] =?UTF-8?q?Refactor:=20Layout=20Outlet=20=EC=93=B0?= =?UTF-8?q?=EB=8A=94=20=EB=B0=A9=EB=B2=95=EC=9C=BC=EB=A1=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/App.tsx | 8 ++++---- src/components/common/Layout/Layout.component.tsx | 13 ++++++------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 32b3c65f..781488e9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,11 +11,11 @@ const App = () => ( <> - - + + }> } /> - - + + ); diff --git a/src/components/common/Layout/Layout.component.tsx b/src/components/common/Layout/Layout.component.tsx index 1b8096d2..ffb42ade 100644 --- a/src/components/common/Layout/Layout.component.tsx +++ b/src/components/common/Layout/Layout.component.tsx @@ -1,16 +1,15 @@ -import React, { ReactNode } from 'react'; +import React from 'react'; +import { Outlet } from 'react-router-dom'; import { Header } from '@/components'; import * as Styled from './Layout.styled'; -interface LayoutProps { - children: ReactNode; -} - -const Layout = ({ children }: LayoutProps) => { +const Layout = () => { return ( <>
- {children} + + + ); }; From e1fe872352e6d6de81e100830ff87240a61d1c9f Mon Sep 17 00:00:00 2001 From: mango906 Date: Sun, 13 Feb 2022 04:13:48 +0900 Subject: [PATCH 07/11] =?UTF-8?q?Feat:=20Link=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=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/Link/Link.component.tsx | 9 +++++++++ src/components/common/index.ts | 1 + 2 files changed, 10 insertions(+) create mode 100644 src/components/common/Link/Link.component.tsx diff --git a/src/components/common/Link/Link.component.tsx b/src/components/common/Link/Link.component.tsx new file mode 100644 index 00000000..495f87e4 --- /dev/null +++ b/src/components/common/Link/Link.component.tsx @@ -0,0 +1,9 @@ +import React from 'react'; + +import { LinkProps as ReactRouterDomLinkProps, Link as ReactRouterDomLink } from 'react-router-dom'; + +const Link = ({ children, ...restProps }: ReactRouterDomLinkProps) => { + return {children}; +}; + +export default Link; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 365830bc..b4463a0f 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -10,3 +10,4 @@ export { default as ToggleButton } from './ToggleButton/ToggleButton.component'; export { default as UserProfile } from './UserProfile/UserProfile.component'; export { default as Header } from './Header/Header.component'; export { default as Layout } from './Layout/Layout.component'; +export { default as Link } from './Link/Link.component'; From 9466b34f3a35ceb2b936c7050e262c6bfe5a3c9d Mon Sep 17 00:00:00 2001 From: mango906 Date: Sun, 13 Feb 2022 04:14:42 +0900 Subject: [PATCH 08/11] =?UTF-8?q?Comment:=20=EC=A3=BC=EC=84=9D=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Header/Header.component.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/common/Header/Header.component.tsx b/src/components/common/Header/Header.component.tsx index 3eabffb1..ba49d569 100644 --- a/src/components/common/Header/Header.component.tsx +++ b/src/components/common/Header/Header.component.tsx @@ -12,6 +12,7 @@ import { colors } from '@/styles'; import { Navigation, UserProfile } from '@/components'; +// TODO: (@mango90): router 변경해주기 const navigationItems: NavigationItem[] = [ { label: '지원서 내역', From 35c486f9fe9fc5ba5a78fa116e00e4edf7fe757d Mon Sep 17 00:00:00 2001 From: mango906 Date: Sun, 13 Feb 2022 04:19:30 +0900 Subject: [PATCH 09/11] =?UTF-8?q?Feat:=20=EB=A1=9C=EA=B3=A0=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=EC=8B=9C=20=EB=A9=94=EC=9D=B8=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EA=B0=80=EA=B3=A0=20=ED=97=A4=EB=8D=94=20=EB=86=92=EC=9D=B4=20?= =?UTF-8?q?=EC=83=81=EC=88=98=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Header/Header.component.tsx | 5 ++++- src/components/common/Header/Header.styled.ts | 3 ++- src/components/common/Layout/Layout.styled.ts | 3 ++- src/constants/index.ts | 1 + src/constants/ui.ts | 1 + 5 files changed, 10 insertions(+), 3 deletions(-) create mode 100644 src/constants/index.ts create mode 100644 src/constants/ui.ts diff --git a/src/components/common/Header/Header.component.tsx b/src/components/common/Header/Header.component.tsx index ba49d569..b027b751 100644 --- a/src/components/common/Header/Header.component.tsx +++ b/src/components/common/Header/Header.component.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Link } from 'react-router-dom'; import * as Styled from './Header.styled'; import Logo from '@/assets/svg/logo-admin-272.svg'; @@ -32,7 +33,9 @@ const Header = () => { return ( - + + + css` - height: 7rem; + height: ${HEADER_HEIGHT}; border-bottom: 0.1rem solid ${theme.colors.gray30}; `} `; diff --git a/src/components/common/Layout/Layout.styled.ts b/src/components/common/Layout/Layout.styled.ts index 1d3f397c..4065165e 100644 --- a/src/components/common/Layout/Layout.styled.ts +++ b/src/components/common/Layout/Layout.styled.ts @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; +import { HEADER_HEIGHT } from '@/constants'; export const Main = styled.main` max-width: 120rem; - min-height: calc(100vh - 7rem); + min-height: calc(100vh - ${HEADER_HEIGHT}); margin: 0 auto; `; diff --git a/src/constants/index.ts b/src/constants/index.ts new file mode 100644 index 00000000..5ecdd1f3 --- /dev/null +++ b/src/constants/index.ts @@ -0,0 +1 @@ +export * from './ui'; diff --git a/src/constants/ui.ts b/src/constants/ui.ts new file mode 100644 index 00000000..e3eeff25 --- /dev/null +++ b/src/constants/ui.ts @@ -0,0 +1 @@ +export const HEADER_HEIGHT = '7rem'; From 418412116acc0ca70b1bcdd25e77fb409fe542e0 Mon Sep 17 00:00:00 2001 From: mango906 Date: Sun, 13 Feb 2022 04:27:18 +0900 Subject: [PATCH 10/11] =?UTF-8?q?Refactor:=20letter-spacing=20rem=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Navigation/Navigation.styled.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/Navigation/Navigation.styled.ts b/src/components/common/Navigation/Navigation.styled.ts index 19f50cbe..168cb485 100644 --- a/src/components/common/Navigation/Navigation.styled.ts +++ b/src/components/common/Navigation/Navigation.styled.ts @@ -36,7 +36,7 @@ export const NavigationItem = styled(Link)` align-items: center; justify-content: center; color: ${active ? theme.colors.purple70 : inActiveColor}; - letter-spacing: -0.05em; + letter-spacing: -0.08rem; ${active ? css` From 5360a8df0026d62f45255232862ac6c410105ccf Mon Sep 17 00:00:00 2001 From: mango906 Date: Mon, 14 Feb 2022 21:29:31 +0900 Subject: [PATCH 11/11] =?UTF-8?q?Feat:=20=EC=A0=91=EA=B7=BC=EC=84=B1?= =?UTF-8?q?=EC=9D=84=20=EC=9C=84=ED=95=B4=20VisualHidden=20=EB=A1=9C?= =?UTF-8?q?=EA=B3=A0=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/Header/Header.component.tsx | 1 + src/components/common/Header/Header.styled.ts | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/src/components/common/Header/Header.component.tsx b/src/components/common/Header/Header.component.tsx index b027b751..956db7d3 100644 --- a/src/components/common/Header/Header.component.tsx +++ b/src/components/common/Header/Header.component.tsx @@ -35,6 +35,7 @@ const Header = () => { + Mash-Up Adminsoo css` + ${theme.a11y.visuallyHidden}; + `} +`;