Release: 금융역량테스트 요구사항 반영

src/App.tsx

@@ -21,6 +21,7 @@ import LectureUploadPage from "./pages/lecture-page/LectureUploadPage";
 import TestPage from "./pages/test-page/TestPage";
 import QuestionPage from "./pages/test-page/QuestionPage";
 import ResultPage from "./pages/test-page/ResultPage";
+import ResultDetailPage from "./pages/test-page/ResultDetailPage";
 
 import PageNotFound from "./pages/PageNotFound";
 import ServiceNotAvailablePage from "./pages/ServiceNotAvailable";
@@ -62,6 +63,7 @@ export default function App() {
                         <Route index element={<TestPage />} />
                         <Route path="question" element={<QuestionPage />} />
                         <Route path="result" element={<ResultPage />}></Route>
+                        <Route path="result/detail" element={<ResultDetailPage />}></Route>
                     </Route>
                 </Routes>
             </Provider>

src/components/test-page/AvatarSection.module.scss

@@ -0,0 +1,63 @@
+@import "@/styles/utils";
+
+.avatar_section {
+    position: relative;
+    z-index: -2;
+
+    height: 260px;
+    padding: 50px;
+
+    background-color: #6de0a9;
+
+    .bg {
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+.avatar {
+    position: relative;
+    z-index: 0;
+
+    display: flex;
+    gap: 20px;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+
+    img {
+        width: 170px;
+        height: 170px;
+        border-radius: 50%;
+        object-fit: cover;
+    }
+
+    .speech_bubble {
+        width: 100%;
+
+        border-radius: 24px;
+        padding: 25px;
+
+        background-color: #fff;
+
+        h1 {
+            margin: 10px 0px;
+            font-size: 18px;
+            font-family: "SCDream";
+            color: #444444;
+        }
+        p {
+            margin: 10px 0px;
+            text-align: right;
+            font-size: 14px;
+            font-family: "SCDream";
+            color: #bbbbbb;
+        }
+    }
+}

src/components/test-page/AvatarSection.tsx

@@ -0,0 +1,24 @@
+import styles from "./AvatarSection.module.scss";
+
+import dollarBackground from "@/assets/dollar-bg.png";
+
+export interface IAvatarSection {
+    avatarImg: string;
+    phrase: string;
+    author: string;
+}
+
+export const AvatarSection: React.FC<IAvatarSection> = ({ avatarImg, phrase, author }) => {
+    return (
+        <div className={styles.avatar_section}>
+            <img className={styles.bg} src={dollarBackground} alt="" />
+            <div className={styles.avatar}>
+                <img src={avatarImg} alt="avatar-img" />
+                <div className={styles.speech_bubble}>
+                    <h1>{phrase}</h1>
+                    <p>{author}</p>
+                </div>
+            </div>
+        </div>
+    );
+};

src/components/test-page/BreadCrumb.module.scss

@@ -1,83 +1,27 @@
 @import "@/styles/utils";
 
 .breadcrumb {
-    @include horizontal-center;
+    width: 100%;
+    max-width: 900px;
 
-    margin: 50px 0px;
-}
-
-.breadcrumb_container {
-    @include horizontal-center;
-
-    width: auto;
-
-    margin: 10px;
-    padding: 20px;
+    margin: 0px auto;
+    padding: 20px 50px;
 
     border: 2px solid #0eca80;
-    font-size: 20px;
-    font-family: "SCDream";
-
-    span {
-        margin: 0px 10px;
-        color: #bdbdbd;
-    }
-
-    span > svg {
-        color: #bdbdbd;
-    }
-}
-
-// .breadcrumb_item {
-// }
-
-.current {
-    color: #000 !important;
 }
 
-@include tablet {
-    .breadcrumb {
-        margin: 0px;
-    }
-
-    .breadcrumb_container {
-        flex-direction: row;
-        padding: 15px;
-
-        text-align: center;
-    }
-
-    .breadcrumb_item {
-        span:first-child {
-            font-size: 20px;
-        }
-        span:last-child {
-            display: none;
-        }
-    }
-}
-
-@include mobile {
-    .breadcrumb {
-        margin: 0px;
-    }
-
-    .breadcrumb_container {
-        flex-direction: column;
-        padding: 15px;
+.breadcrumb_container {
+    display: flex;
+    justify-content: center;
+    gap: 30px;
 
-        text-align: center;
+    div {
+        font-size: 20px;
+        font-family: "SCDream";
+        color: #bdbdbd;
     }
 
-    .breadcrumb_item {
-        span:first-child {
-            font-size: 20px;
-        }
-        span:last-child {
-            display: none;
-        }
-        span:not(.current) {
-            display: none;
-        }
+    div:last-child {
+        display: none;
     }
 }

src/components/test-page/BreadCrumb.tsx

@@ -1,6 +1,7 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import styles from "./BreadCrumb.module.scss";
+import { Fragment } from "react";
 
 export interface IBreadCrumb {
     items: string[];
@@ -15,14 +16,12 @@ export const BreadCrumb: React.FC<IBreadCrumb> = ({ items, cursor }) => {
             <div className={styles.breadcrumb_container}>
                 {items.map((element, index) => {
                     return (
-                        <div className={styles.breadcrumb_item} key={index}>
-                            <span className={index === cursor ? `${styles.current}` : ``}>{element}</span>
-                            {index !== items.length - 1 && (
-                                <span className={`${styles.current}`}>
-                                    <FontAwesomeIcon icon={faChevronRight} />
-                                </span>
-                            )}
-                        </div>
+                        <Fragment key={index}>
+                            <div style={cursor === index + 1 ? { color: "black" } : {}}>{element}</div>
+                            <div>
+                                <FontAwesomeIcon icon={faChevronRight} />
+                            </div>
+                        </Fragment>
                     );
                 })}
             </div>

src/components/test-page/LectureRedirectCard.module.scss

@@ -0,0 +1,63 @@
+@import "@/styles/utils";
+
+.lecture_redirect_card {
+    position: relative;
+    z-index: 0;
+
+    aspect-ratio: 1/1;
+
+    border-radius: 16px;
+
+    font-family: "SCDream";
+    font-size: 14px;
+
+    overflow: hidden;
+}
+
+.body {
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    padding: 16px;
+
+    background: rgba(0, 0, 0, 0.6);
+
+    p {
+        font-family: "SCDream";
+        font-size: 14px;
+        color: #fff;
+    }
+
+    button {
+        display: block;
+        width: 100%;
+        height: 40px;
+
+        border: 2px solid #2de39c;
+        border-radius: 100px;
+        padding: 5px;
+
+        font-family: "SCDream";
+
+        color: #2de39c;
+        background-color: transparent;
+        svg {
+            margin: 0px 3px;
+        }
+    }
+}
+
+.background {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+
+    width: 100%;
+    height: 100%;
+
+    object-fit: cover;
+}

src/components/test-page/LectureRedirectCard.tsx

@@ -0,0 +1,29 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import styles from "./LectureRedirectCard.module.scss";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+
+export interface ILectureRedirectCard {
+    width: string;
+    height: string;
+
+    imgSrc: string;
+    label: string;
+    onClick: React.MouseEventHandler;
+}
+
+export const LectureRedirectCard: React.FC<ILectureRedirectCard> = ({ width, height, imgSrc, label, onClick }) => {
+    return (
+        <div className={styles.lecture_redirect_card} style={{ width: width, height: height }}>
+            <div className={styles.body}>
+                <p>{label}</p>
+
+                <button onClick={onClick}>
+                    <span>강의 보러가기</span>
+                    <FontAwesomeIcon icon={faArrowRight} />
+                </button>
+            </div>
+
+            <img className={styles.background} src={imgSrc} alt="lecture-redirect-bg" />
+        </div>
+    );
+};

src/components/test-page/ProsConsContainer.module.scss

@@ -0,0 +1,37 @@
+@import "@/styles/utils";
+
+.pros_cons_container {
+    display: flex;
+
+    height: 100%;
+
+    border-radius: 16px;
+    padding: 20px;
+
+    background: #fff;
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+
+    img {
+        width: 100px;
+        height: 100px;
+    }
+
+    div {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 10px;
+
+        margin: 0px 10px;
+
+        p {
+            font-family: "SCDream";
+            font-size: 16px;
+        }
+        h1 {
+            font-family: "SCDream";
+            font-size: 28px;
+            color: #0ecb81;
+        }
+    }
+}