Feature/result page 개발 한것까지 퍼블리싱

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>
     );

src/components/layout/RootLayout.tsx

@@ -6,7 +6,7 @@ export const Layout = styled.main`
     width: min(100%, 800px);
 
     margin: 0px auto;
-    padding: 10px;
+    padding: 1.25rem;
 `;
 
 export const RootLayout = () => {

src/components/layout/TopBar.styled.tsx

@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+
+export const TopBarWrapper = styled.div`
+    height: 60px;
+`;
+
+export const TopBarContainer = styled.div`
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    height: 56px;
+
+    justify-content: center;
+    align-items: center;
+
+    border-bottom: 1px solid #e0e0e0;
+    font-weight: 800;
+`;

src/components/layout/TopBar.tsx

@@ -0,0 +1,15 @@
+import { TopBarContainer, TopBarWrapper } from "./TopBar.styled";
+
+interface TopBarProps {
+    title: string;
+}
+
+const TopBar: React.FC<TopBarProps> = ({ title }) => {
+    return (
+        <TopBarWrapper>
+            <TopBarContainer>{title}</TopBarContainer>
+        </TopBarWrapper>
+    );
+};
+
+export default TopBar;

src/components/typography/Text.style.ts

@@ -21,10 +21,29 @@ export const TextElement = styled.span<TextProps>`
         }
     }};
 
+    font-weight: ${(props) => {
+        switch (props.weight) {
+            case "light":
+                return "var(--font-weight-light)";
+            case "regular":
+                return "var(--font-weight-regular)";
+            case "bold":
+                return "var(--font-weight-bold)";
+            case "extrabold":
+                return "var(--font-weight-extrabold)";
+            case "heavy":
+                return "var(--font-weight-heavy)";
+            default:
+                return "var(--font-weight-regular)";
+        }
+    }};
+
     color: ${(props) => {
         switch (props.color) {
             case "primary":
                 return "var(--color-primary)";
+            default:
+                return props.color;
         }
     }};
 `;

src/components/typography/Text.tsx

@@ -4,6 +4,7 @@ import { TextElement } from "./Text.style";
 
 export interface TextProps extends React.ComponentProps<"span"> {
     size: "xs" | "s" | "m" | "l" | "xl";
+    weight?: "light" | "regular" | "bold" | "extrabold" | "heavy";
     children: React.ReactNode;
 }
 

src/components/typography/index.ts

@@ -0,0 +1 @@
+export * from "./Text";

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;
+`;

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 />
+        </>
+    );
+}

src/styles/global.ts

@@ -29,6 +29,12 @@ export const GlobalStyle = css`
         --font-size-s: 16px;
         --font-size-xs: 13px;
 
+        --font-weight-light: 300;
+        --font-weight-regular: 400;
+        --font-weight-bold: 700;
+        --font-weight-extrabold: 800;
+        --font-weight-heavy: 900;
+
         --color-primary: #37cdcd;
         --color-primary-300: #64e4e0;
         --color-primary-200: #9df2ec;