Merge pull request #41 from mash-up-kr/feature/header

Header, Layout 컴포넌트 추가

src/App.tsx

@@ -4,14 +4,17 @@ 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 = () => (
   <>
     <Global styles={globalStyles} />
     <ThemeProvider theme={theme}>
       <Routes>
-        <Route path="/" element={<Count />} />
+        <Route path="/" element={<Layout />}>
+          <Route path="/" element={<Count />} />
+        </Route>
       </Routes>
     </ThemeProvider>
   </>

src/components/common/Header/Header.component.tsx

@@ -0,0 +1,52 @@
+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';
+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';
+
+// TODO: (@mango90): router 변경해주기
+const navigationItems: NavigationItem[] = [
+  {
+    label: '지원서 내역',
+    to: window.location.pathname,
+  },
+  {
+    label: 'SMS 발송 내역',
+    to: '/1',
+  },
+  {
+    label: '지원서 설문지 내역',
+    to: '/2',
+  },
+];
+
+const Header = () => {
+  return (
+    <Styled.HeaderContainer>
+      <Styled.HeaderContainerInner>
+        <Link to="/">
+          <Logo />
+          <Styled.VisuallyHiddenLogo>Mash-Up Adminsoo</Styled.VisuallyHiddenLogo>
+        </Link>
+        <Navigation
+          size={NavigationSize.md}
+          items={navigationItems}
+          inActiveColor={colors.gray70}
+          showBottomBorder={false}
+        />
+        <UserProfile team={Team.branding} role={Role.subLeader} />
+      </Styled.HeaderContainerInner>
+    </Styled.HeaderContainer>
+  );
+};
+
+export default Header;

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<typeof Header>;
+
+const Template: ComponentStory<typeof Header> = () => <Header />;
+
+export const header = Template.bind({});

src/components/common/Header/Header.styled.ts

@@ -0,0 +1,24 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { HEADER_HEIGHT } from '@/constants';
+
+export const HeaderContainer = styled.header`
+  ${({ theme }) => css`
+    height: ${HEADER_HEIGHT};
+    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;
+`;
+
+export const VisuallyHiddenLogo = styled.h2`
+  ${({ theme }) => css`
+    ${theme.a11y.visuallyHidden};
+  `}
+`;

src/components/common/Layout/Layout.component.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { Header } from '@/components';
+import * as Styled from './Layout.styled';
+
+const Layout = () => {
+  return (
+    <>
+      <Header />
+      <Styled.Main>
+        <Outlet />
+      </Styled.Main>
+    </>
+  );
+};
+
+export default Layout;

src/components/common/Layout/Layout.styled.ts

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+import { HEADER_HEIGHT } from '@/constants';
+
+export const Main = styled.main`
+  max-width: 120rem;
+  min-height: calc(100vh - ${HEADER_HEIGHT});
+  margin: 0 auto;
+`;

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 <ReactRouterDomLink {...restProps}>{children}</ReactRouterDomLink>;
+};
+
+export default Link;

src/components/common/Navigation/Navigation.styled.ts

@@ -36,11 +36,12 @@ export const NavigationItem = styled(Link)<StyledNavigationItemProps>`
     align-items: center;
     justify-content: center;
     color: ${active ? theme.colors.purple70 : inActiveColor};
+    letter-spacing: -0.08rem;
 
     ${active
       ? css`
           border-bottom: 0.2rem solid ${theme.colors.purple70};
         `
-      : ''}
+      : ''};
   `}
 `;

src/components/common/index.ts

@@ -7,3 +7,7 @@ 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';
+export { default as Layout } from './Layout/Layout.component';
+export { default as Link } from './Link/Link.component';

src/constants/index.ts

@@ -0,0 +1 @@
+export * from './ui';

src/constants/ui.ts

@@ -0,0 +1 @@
+export const HEADER_HEIGHT = '7rem';