From 2049cf96f63971849f5c8003354d8894ff11d64f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B0=95=EC=84=9D=ED=98=84?= <tjrgus0713@gmail.com>
Date: Sat, 22 Oct 2022 22:34:42 +0900
Subject: [PATCH] =?UTF-8?q?(#2)=20feat:=20router=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx          | 23 +++++------------------
 src/Router.tsx       | 13 +++++++++++++
 src/index.tsx        |  5 ++---
 src/pages/Policy.tsx | 34 ++++++++++++++++++++++++++++++++++
 4 files changed, 54 insertions(+), 21 deletions(-)
 create mode 100644 src/Router.tsx
 create mode 100644 src/pages/Policy.tsx

diff --git a/src/App.tsx b/src/App.tsx
index a53698a..3abd8cb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,25 +1,12 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import Router from './Router';
+import { StyledProvider } from 'aliens-design-system-front';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <StyledProvider>
+      <Router />
+    </StyledProvider>
   );
 }
 
diff --git a/src/Router.tsx b/src/Router.tsx
new file mode 100644
index 0000000..37ecdc6
--- /dev/null
+++ b/src/Router.tsx
@@ -0,0 +1,13 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { Policy } from './pages/Policy';
+
+const Router = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/sign-up-policy" element={<Policy />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+export default Router;
diff --git a/src/index.tsx b/src/index.tsx
index 032464f..cf1c08f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,16 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById('root') as HTMLElement,
 );
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
 
 // If you want to start measuring performance in your app, pass a function
diff --git a/src/pages/Policy.tsx b/src/pages/Policy.tsx
new file mode 100644
index 0000000..e8349f3
--- /dev/null
+++ b/src/pages/Policy.tsx
@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+export const Policy = () => {
+  return (
+    <_Wrapper>
+      <_PolicyContent>
+        당신은 회원가입 약관 동의하십니까? 당신은 회원가입 약관
+        동의하십니까?당신은 회원가입 약관 동의하십니까?당신은 회원가입 약관
+        동의하십니까?당신은 회원가입 약관 동의하십니까?당신은 회원가입 약관
+        동의하십니까?당신은 회원가입 약관 동의하십니까?당신은 회원가입 약관
+        동의하십니까?당신은 회원가입 약관 동의하십니까?당신은 회원가입 약관
+        동의하십니까?당신은 회원가입 약관 동의하십니까?당신은 회원가입약관
+        동의하십니까?당신은 회원가입 약관 동의하십니까?당신은 회원가입 약관
+        동의하십니까?당신은 회원가입 약관 동의하십니까?당신은 회원가입 약관
+        동의하십니까? 당신은 회원가입 약관 동의하십니까?당신은 회원가입 약관
+        동의하십니까?당신은 회원가입 약관 동의하십니까?당신은 회원가입 약관
+        동의하십니까?당신은 회원가입 약관 동의하십니까?당신은 회원가입 약관
+        동의하십니까?당신은 회원가입 약관 동의하십니까?당신은 회원가입 약관
+        동의하십니까? 당신은 회원가입 약관 동의하십니까?당신은 회원가입 약관
+        동의하십니까?당신은 회원가입 약관 동의하십니까?당신은
+      </_PolicyContent>
+    </_Wrapper>
+  );
+};
+
+const _Wrapper = styled.section`
+  width: 100%;
+`;
+
+const _PolicyContent = styled.strong`
+  font-size: ${({ theme }) => theme.textFont.xs.size}px;
+  font-weight: ${({ theme }) => theme.textFont.xs.weight};
+  color: ${({ theme }) => theme.color.gray5};
+`;