Merge pull request #15 from Duri-Salon/feat/mobile-layout(DURI-313)

[feat] 모바일 레이아웃 구현

apps/salon/src/App.tsx

@@ -11,7 +11,6 @@ function App() {
     <BrowserRouter>
       <Global styles={globalStyle} />
       <Home />
-      <div>하이</div>
     </BrowserRouter>
   );
 }

apps/salon/src/pages/Home.tsx

@@ -1,5 +1,16 @@
+import { MobileLayout, NavBar } from "@duri-fe/ui";
+
 const Home = () => {
-  return <div>안녕하세요!</div>;
+  return (
+    <>
+      <MobileLayout>
+        <h1>Home</h1>
+        <h1>Home</h1>
+        <h1>Home</h1>
+      </MobileLayout>
+      <NavBar />
+    </>
+  )
 };
 
 export default Home;

packages/ui/src/components/FakeNavBar/NavBar.tsx

@@ -0,0 +1,14 @@
+import { theme } from "@duri-fe/ui";
+import styled from "@emotion/styled";
+
+export const NavBar = styled.div`
+  width: 100%;
+  max-width: 480px;
+  height: 50px;
+  background-color: ${theme.palette.Gray700};
+
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+`

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

@@ -0,0 +1 @@
+export { NavBar } from './NavBar';

packages/ui/src/components/MobileLayout/MobileLayout.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { Flex, theme } from "@duri-fe/ui";
+import styled from "@emotion/styled";
+
+const Container = styled(Flex)`
+  max-width: 480px;
+  min-height: 100vh;
+  box-sizing: border-box;
+`
+
+export const MobileLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Container 
+      direction="column"
+      margin="0 auto"
+      justify="flex-start"
+      align="flex-start"
+      backgroundColor={theme.palette.White}
+    >
+      {children}
+    </Container>
+  )
+}

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

@@ -0,0 +1 @@
+export { MobileLayout } from './MobileLayout';

packages/ui/src/components/index.tsx

@@ -2,3 +2,5 @@ export * from './FlexBox';
 export * from './Button';
 export * from './Typo';
 export * from './TextField';
+export * from './MobileLayout';
+export * from './FakeNavBar';

packages/ui/src/styles/GlobalStyles.ts

@@ -1,6 +1,8 @@
 import { css } from '@emotion/react';
 import emotionReset from 'emotion-reset';
 
+import { theme } from './theme';
+
 export const globalStyle = css`
   ${emotionReset}
   body {
@@ -10,6 +12,7 @@ export const globalStyle = css`
       scroll: smooth;
     }
     font-family: 'Pretendard';
+    background-color: ${theme.palette.Normal50};
   }
   button {
     background: inherit;