Feature/share 결과 공유 페이지

src/Router.tsx

@@ -2,6 +2,7 @@ import { Route, Routes } from "react-router-dom";
 
 import { RootLayout } from "./components/layout/RootLayout";
 import HomePage from "./pages/HomePage";
+import ResultShare from "./pages/ResultShare";
 import ResultPage from "./pages/ResultPage";
 
 export const Router = () => {
@@ -10,6 +11,7 @@ export const Router = () => {
             <Route path="/" element={<RootLayout />}>
                 <Route index element={<HomePage />}></Route>
                 <Route path="/result" element={<ResultPage />}></Route>
+                <Route path="/share" element={<ResultShare />}></Route>
             </Route>
         </Routes>
     );

src/components/navigation/AppBar.style.ts

@@ -0,0 +1,26 @@
+import { AppBarProps } from "./AppBar";
+import styled from "@emotion/styled";
+
+export const AppBarElement = styled.span<AppBarProps>`
+    position: relative;
+
+    width: 100%;
+    height: 60px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    box-sizing: border-box;
+
+    border-bottom: 2px solid #0000001f;
+
+    & > span {
+        font-weight: 800;
+    }
+
+    & > img {
+        position: absolute;
+        left: 15px;
+    }
+`;

src/components/navigation/AppBar.tsx

@@ -0,0 +1,15 @@
+import { forwardRef } from "react";
+
+import { AppBarElement } from "./AppBar.style";
+
+export interface AppBarProps extends React.ComponentProps<"div"> {
+    children: React.ReactNode;
+}
+
+export const AppBar = forwardRef<HTMLDivElement, AppBarProps>(({ children, ...props }, ref) => {
+    return (
+        <AppBarElement ref={ref} {...props}>
+            {children}
+        </AppBarElement>
+    );
+});

src/pages/ResultShare.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+
+import { AppBar } from "@/components/navigation/AppBar";
+import { Text } from "@/components/typography/Text";
+
+import BackIcon from "@/assets/back.svg";
+import ShareIcon from "@/assets/shareLarge.svg";
+
+import styled from "@emotion/styled";
+
+const Header = styled.div`
+    margin-top: 20px;
+    margin-left: 30px;
+
+    & > img {
+        margin-bottom: 20px;
+    }
+`;
+
+export default function ResultShare() {
+    const [name, setName] = useState<string>("");
+
+    useEffect(() => {
+        // 전역 상태에서 이름을 불러와서 setName으로 디스플레이 이름을 변경합니다.
+        setName("홍길동");
+    }, []);
+
+    return (
+        <>
+            {/* 나중에 통일된 Header||AppBar로 변경해도 됩니다. */}
+            <AppBar>
+                <img src={BackIcon} />
+                <Text size="m">결과 공유</Text>
+            </AppBar>
+            <Header>
+                <img src={ShareIcon} />
+                <Text size="xl">
+                    {name}님의 동BTI를
+                    <br />
+                    공유해보세요
+                </Text>
+            </Header>
+        </>
+    );
+}