feat: Layout 컴포넌트 구현 (#14)

apps/admin/src/App.tsx

@@ -6,6 +6,7 @@ import SignUpCompletePage from './pages/SignUpComplete/SignUpCompletePage';
 import 'the-new-css-reset/css/reset.css';
 import './index.css';
 import { PATH } from './constants/routes';
+import HomePage from './pages/HomePage/HomePage';
 
 const router = createBrowserRouter([
   {
@@ -20,7 +21,7 @@ const router = createBrowserRouter([
     path: PATH.SIGNUP_COMPLETE,
     element: <SignUpCompletePage />,
   },
-  { path: PATH.HOME, element: <></> },
+  { path: PATH.HOME, element: <HomePage /> },
   {
     path: '*',
     element: <Navigate to={PATH.INDEX} replace />,

apps/admin/src/components/Header/Header.styles.ts

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+
+const Header = styled.div`
+  height: 68px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const HeaderLeft = styled.div``;
+
+const HeaderRight = styled.div``;
+
+export default {
+  Header,
+  HeaderLeft,
+  HeaderRight,
+};

apps/admin/src/components/Header/Header.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Styled from './Header.styles';
+
+interface HeaderProps {
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+}
+
+const Header = ({ left, right }: HeaderProps) => {
+  return (
+    <Styled.Header>
+      <Styled.HeaderLeft>{left}</Styled.HeaderLeft>
+      <Styled.HeaderRight>{right}</Styled.HeaderRight>
+    </Styled.Header>
+  );
+};
+
+export default Header;

apps/admin/src/components/Layout/Layout.styles.ts

@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+
+const Layout = styled.div`
+  background-color: ${({ theme }) => theme.palette.grey.g00};
+`;
+
+const HeaderContainer = styled.div`
+  background-color: ${({ theme }) => theme.palette.grey.w};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.grey.g30};
+`;
+
+const Header = styled.header`
+  width: ${({ theme }) => theme.breakpoint.desktop};
+  margin: 0 auto;
+  padding: 0 20px;
+`;
+
+const ContentContainer = styled.div``;
+
+const Content = styled.div`
+  width: ${({ theme }) => theme.breakpoint.desktop};
+  margin: 0 auto;
+`;
+
+export default {
+  Layout,
+  HeaderContainer,
+  Header,
+  ContentContainer,
+  Content,
+};

apps/admin/src/components/Layout/Layout.tsx

@@ -0,0 +1,23 @@
+import Styled from './Layout.styles';
+
+interface LayoutProps {
+  children: React.ReactNode;
+  header?: React.ReactNode;
+}
+
+const Layout = ({ children, header }: LayoutProps) => {
+  return (
+    <Styled.Layout>
+      {header && (
+        <Styled.HeaderContainer>
+          <Styled.Header>{header}</Styled.Header>
+        </Styled.HeaderContainer>
+      )}
+      <Styled.ContentContainer>
+        <Styled.Content>{children}</Styled.Content>
+      </Styled.ContentContainer>
+    </Styled.Layout>
+  );
+};
+
+export default Layout;

apps/admin/src/pages/HomePage/HomePage.styles.ts

@@ -0,0 +1,28 @@
+import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
+
+const Logo = styled.div`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ theme }) => theme.palette.grey.g40};
+  width: 174px;
+  height: 44px;
+`;
+
+const LogoutLink = styled(Link)`
+  display: inline-flex;
+  align-items: center;
+  height: 44px;
+  padding: 0 18px;
+  ${({ theme }) => theme.typo.sh1};
+  color: ${({ theme }) => theme.palette.grey.g90};
+`;
+
+const HomePage = styled.div``;
+
+export default {
+  Logo,
+  LogoutLink,
+  HomePage,
+};

apps/admin/src/pages/HomePage/HomePage.tsx

@@ -0,0 +1,21 @@
+import Header from '../../components/Header/Header';
+import Layout from '../../components/Layout/Layout';
+import { PATH } from '../../constants/routes';
+import Styled from './HomePage.styles';
+
+const HomePage = () => {
+  return (
+    <Layout
+      header={
+        <Header
+          left={<Styled.Logo>Boolti Logo</Styled.Logo>}
+          right={<Styled.LogoutLink to={PATH.LOGIN}>로그아웃</Styled.LogoutLink>}
+        />
+      }
+    >
+      <h2>HomePage</h2>
+    </Layout>
+  );
+};
+
+export default HomePage;

apps/admin/src/styles/ThemeProvider.tsx

@@ -2,10 +2,12 @@ import { ThemeProvider as BaseThemeProvider } from '@emotion/react';
 
 import palette from './palette';
 import typo from './typo';
+import breakpoint from './breakpoint';
 
 const theme = {
   palette,
   typo,
+  breakpoint,
 };
 
 interface ThemeProviderProps {

apps/admin/src/styles/breakpoint.ts

@@ -0,0 +1,5 @@
+const breakpoint = {
+  desktop: '1280px',
+} as const;
+
+export default breakpoint;

apps/admin/src/styles/emotion.d.ts

@@ -2,10 +2,12 @@ import '@emotion/react';
 
 import palette from './palette';
 import typo from './typo';
+import breakpoint from './breakpoint';
 
 declare module '@emotion/react' {
   export interface Theme {
     palette: typeof palette;
     typo: typeof typo;
+    breakpoint: typeof breakpoint;
   }
 }