Merge branch 'main' into feat/ui-package

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/emotion.d.ts

@@ -1,10 +1,11 @@
 import '@emotion/react';
 
-import { palette, typo } from '@boolti/ui';
+import { palette, typo, breakpoint } from '@boolti/ui';
 
 declare module '@emotion/react' {
   export interface Theme {
     palette: typeof palette;
     typo: typeof typo;
+    breakpoint: typeof breakpoint;
   }
 }

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/preview/src/App.tsx

@@ -3,8 +3,8 @@ import { Button, ThemeProvider } from '@boolti/ui';
 const Icon = () => (
   <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17Z"
       fill="currentColor"
     />

packages/ui/src/components/ThemeProvider/index.tsx

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

packages/ui/src/systems/breakpoint.ts

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