From e345a9c80ea12f9f51889df258c9c65337d8642d Mon Sep 17 00:00:00 2001
From: Buyeon Hwang <arpa1705@gmail.com>
Date: Wed, 28 Aug 2024 21:05:50 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B2=B0=EA=B3=BC=EB=B3=B4=EA=B8=B0=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B0=9C=EB=B0=9C=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Router.tsx                 |  2 ++
 src/pages/ResultPage.styled.ts | 14 ++++++++++++++
 src/pages/ResultPage.tsx       | 21 +++++++++++++++++++++
 3 files changed, 37 insertions(+)
 create mode 100644 src/pages/ResultPage.styled.ts
 create mode 100644 src/pages/ResultPage.tsx

diff --git a/src/Router.tsx b/src/Router.tsx
index 7aca3dc..01b07c5 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -2,12 +2,14 @@ import { Route, Routes } from "react-router-dom";
 
 import { RootLayout } from "./components/layout/RootLayout";
 import HomePage from "./pages/HomePage";
+import ResultPage from "./pages/ResultPage";
 
 export const Router = () => {
     return (
         <Routes>
             <Route path="/" element={<RootLayout />}>
                 <Route index element={<HomePage />}></Route>
+                <Route path="/result" element={<ResultPage />}></Route>
             </Route>
         </Routes>
     );
diff --git a/src/pages/ResultPage.styled.ts b/src/pages/ResultPage.styled.ts
new file mode 100644
index 0000000..7794b02
--- /dev/null
+++ b/src/pages/ResultPage.styled.ts
@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+
+export const TitleContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+`;
+
+export const Line = styled.hr`
+    width: 100%;
+    margin: 1.25rem 0;
+    height: 1px;
+    border: 1px solid #e0e0e0;
+`;
diff --git a/src/pages/ResultPage.tsx b/src/pages/ResultPage.tsx
new file mode 100644
index 0000000..0316ec8
--- /dev/null
+++ b/src/pages/ResultPage.tsx
@@ -0,0 +1,21 @@
+import TopBar from "@/components/layout/TopBar";
+import { Text } from "@/components/typography";
+
+import { Line, TitleContainer } from "./ResultPage.styled";
+
+export default function ResultPage() {
+    return (
+        <>
+            <TopBar title="결과 보기" />
+            <TitleContainer>
+                <Text size="s" color="gray">
+                    OOO님의 동BTI는...
+                </Text>
+                <Text size="xl" color="primary" weight="bold">
+                    무대를 좋아하는 연주가형
+                </Text>
+            </TitleContainer>
+            <Line />
+        </>
+    );
+}