Stocodi · toothlessdev · Jan 19, 2024 · Jan 19, 2024 · Jan 19, 2024 · Jan 19, 2024
diff --git a/.env b/.env
@@ -5,4 +5,6 @@ VITE_COOKIE_NICKNAME = "stocodi-nickname"
 VITE_COOKIE_ACCESS = "member_access_token"
 VITE_COOKIE_REFRESH = "member_refresh_token"
 VITE_COOKIE_PATH = "/"
-VITE_COOKIE_DOMAIN = ".localhost"
+VITE_COOKIE_DOMAIN = ".localhost"
+
+VITE_KAKAO_API_KEY = "048a738db78a2ca8c2451d886ffdd8bf"
diff --git a/index.html b/index.html
@@ -6,6 +6,13 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Stocodi | 스토코디</title>
 
+        <!-- meta -->
+        <meta property="og:url" content="https://stocodi.com" />
+        <meta property="og:title" content="Stocodi | 스토코디" />
+        <meta property="og:type" content="website" />
+        <meta property="og:image" content="https://stocodi.com/test" />
+        <meta property="og:description" content="스토코디 | 금융역량 테스트하기" />
+
         <!--  Google Tag Manager -->
         <script>
             (function (w, d, s, l, i) {
@@ -20,6 +27,12 @@
             })(window, document, "script", "dataLayer", "GTM-WSLTT989");
         </script>
         <!-- End Google Tag Manager -->
+
+        <script
+            src="https://t1.kakaocdn.net/kakao_js_sdk/2.6.0/kakao.min.js"
+            integrity="sha384-6MFdIr0zOira1CHQkedUqJVql0YtcZA1P0nbPrQYJXVJZUkTk/oX4U9GhUIs3/z8"
+            crossorigin="anonymous"
+        ></script>
     </head>
     <body>
         <!-- Google Tag Manager (noscript) -->

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,16 +7,17 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "prettier" : "prettier --write **/*.{ts,tsx}",
+    "prettier": "prettier --write **/*.{ts,tsx}",
     "preview": "vite preview",
-    "start":"serve -s dist -l 3000"
+    "start": "serve -s dist -l 3000"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@reduxjs/toolkit": "^2.0.1",
     "axios": "^1.6.2",
+    "dom-to-image": "^2.6.0",
     "react": "^18.2.0",
     "react-cookie": "^6.1.1",
     "react-dom": "^18.2.0",
@@ -27,6 +28,7 @@
     "storybook": "^7.6.6"
   },
   "devDependencies": {
+    "@types/dom-to-image": "^2.6.7",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@typescript-eslint/eslint-plugin": "^5.61.0",

diff --git a/public/img/test-1.png b/public/img/test-1.png
diff --git a/public/img/test-10.png b/public/img/test-10.png
diff --git a/public/img/test-11.png b/public/img/test-11.png
diff --git a/public/img/test-12.png b/public/img/test-12.png
diff --git a/public/img/test-13.png b/public/img/test-13.png
diff --git a/public/img/test-2.png b/public/img/test-2.png
diff --git a/public/img/test-3.png b/public/img/test-3.png
diff --git a/public/img/test-4.png b/public/img/test-4.png
diff --git a/public/img/test-5.png b/public/img/test-5.png
diff --git a/public/img/test-6.png b/public/img/test-6.png
diff --git a/public/img/test-7.png b/public/img/test-7.png
diff --git a/public/img/test-8.png b/public/img/test-8.png
diff --git a/public/img/test-9.png b/public/img/test-9.png
diff --git a/src/api/env.ts b/src/api/env.ts
@@ -6,3 +6,5 @@ export const COOKIE_REFRESH = (import.meta.env.VITE_PRODUCTION_COOKIE_REFRESH as
 
 export const COOKIE_PATH = (import.meta.env.VITE_PRODUCTION_COOKIE_PATH as string) || (import.meta.env.VITE_COOKIE_PATH as string);
 export const COOKIE_DOMAIN = (import.meta.env.VITE_PRODUCTION_COOKIE_DOMAIN as string) || (import.meta.env.VITE_COOKIE_DOMAIN as string);
+
+export const KAKAO_SDK = import.meta.env.VITE_KAKAO_API_KEY as string;
diff --git a/src/components/test-page/AvatarSection.module.scss b/src/components/test-page/AvatarSection.module.scss
@@ -39,6 +39,11 @@
     }
 
     .speech_bubble {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 15px;
+
         width: 100%;
 
         border-radius: 24px;
@@ -47,17 +52,47 @@
         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;
         }
     }
 }
+
+@include mobile {
+    .avatar_section {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        padding: 20px;
+        .speech_bubble {
+            height: 90px;
+
+            padding: 10px 16px;
+            border-radius: 16px;
+            h1 {
+                font-size: 12px;
+            }
+            p {
+                font-size: 10px;
+            }
+        }
+    }
+
+    .avatar {
+        // flex-direction: column;
+        gap: 15px;
+
+        img {
+            width: 130px;
+            height: 130px;
+        }
+    }
+}
diff --git a/src/components/test-page/BreadCrumb.module.scss b/src/components/test-page/BreadCrumb.module.scss
@@ -5,7 +5,7 @@
     max-width: 900px;
 
     margin: 0px auto;
-    padding: 20px 50px;
+    padding: 20px 0px;
 
     border: 2px solid #0eca80;
 }
@@ -15,13 +15,42 @@
     justify-content: center;
     gap: 30px;
 
+    .active {
+        color: #000;
+    }
+
     div {
         font-size: 20px;
         font-family: "SCDream";
         color: #bdbdbd;
     }
-
     div:last-child {
         display: none;
     }
 }
+
+@include mobile {
+    .breadcrumb {
+        padding: 10px 0px;
+        background-color: #0eca80;
+        border-radius: 12px;
+    }
+    .breadcrumb_container {
+        display: flex;
+        justify-content: center;
+        gap: 30px;
+
+        .active {
+            font-size: 16px;
+            color: #fff;
+        }
+
+        div:not(.active) {
+            display: none;
+        }
+
+        div:last-child {
+            display: none;
+        }
+    }
+}
diff --git a/src/components/test-page/BreadCrumb.tsx b/src/components/test-page/BreadCrumb.tsx
@@ -17,7 +17,7 @@ export const BreadCrumb: React.FC<IBreadCrumb> = ({ items, cursor }) => {
                 {items.map((element, index) => {
                     return (
                         <Fragment key={index}>
-                            <div style={cursor === index + 1 ? { color: "black" } : {}}>{element}</div>
+                            <div className={cursor === index + 1 ? styles.active : ""}>{element}</div>
                             <div>
                                 <FontAwesomeIcon icon={faChevronRight} />
                             </div>

diff --git a/src/components/test-page/LectureRedirectCard.module.scss b/src/components/test-page/LectureRedirectCard.module.scss
@@ -48,6 +48,9 @@
         svg {
             margin: 0px 3px;
         }
+        &:hover {
+            cursor: pointer;
+        }
     }
 }
 
@@ -61,3 +64,33 @@
 
     object-fit: cover;
 }
+
+.lecture_redirect_link {
+    display: none;
+
+    margin: 10px 0px;
+
+    a {
+        span {
+            font-size: 16px;
+            font-family: "SCDream";
+            text-align: right;
+        }
+        svg {
+            margin: 0px 10px;
+        }
+        &:hover {
+            color: #000;
+        }
+    }
+}
+
+@include mobile {
+    .lecture_redirect_card {
+        display: none;
+    }
+
+    .lecture_redirect_link {
+        display: block;
+    }
+}
diff --git a/src/components/test-page/LectureRedirectCard.tsx b/src/components/test-page/LectureRedirectCard.tsx
@@ -1,23 +1,31 @@
+import { Link, useNavigate } from "react-router-dom";
+
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import styles from "./LectureRedirectCard.module.scss";
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import styles from "./LectureRedirectCard.module.scss";
 
 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 }) => {
+export interface ILectureRedirectLink {
+    label: string;
+    link: string;
+}
+
+export const LectureRedirectCard: React.FC<ILectureRedirectCard> = ({ width, height, imgSrc, label }) => {
+    const navigate = useNavigate();
+
     return (
         <div className={styles.lecture_redirect_card} style={{ width: width, height: height }}>
             <div className={styles.body}>
                 <p>{label}</p>
 
-                <button onClick={onClick}>
+                <button onClick={() => navigate("/")}>
                     <span>강의 보러가기</span>
                     <FontAwesomeIcon icon={faArrowRight} />
                 </button>
@@ -27,3 +35,14 @@ export const LectureRedirectCard: React.FC<ILectureRedirectCard> = ({ width, hei
         </div>
     );
 };
+
+export const LectureRedirectLink: React.FC<ILectureRedirectLink> = ({ label, link }) => {
+    return (
+        <div className={styles.lecture_redirect_link}>
+            <Link to={link}>
+                <span>{label}</span>
+                <FontAwesomeIcon icon={faArrowRight} />
+            </Link>
+        </div>
+    );
+};
diff --git a/src/components/test-page/ProsConsContainer.module.scss b/src/components/test-page/ProsConsContainer.module.scss
@@ -35,3 +35,17 @@
         }
     }
 }
+
+@include mobile {
+    .pros_cons_container {
+        gap: 20px;
+        div {
+            p {
+                font-size: 16px;
+            }
+            h1 {
+                font-size: 26px;
+            }
+        }
+    }
+}
diff --git a/src/components/test-page/Question.module.scss b/src/components/test-page/Question.module.scss
@@ -18,3 +18,13 @@
 
     margin: 10px 0px;
 }
+
+@include mobile {
+    .question {
+        margin: 40px auto;
+        padding: 0px 20px;
+        p {
+            font-size: 16px;
+        }
+    }
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,3 +6,5 @@ export const COOKIE_REFRESH = (import.meta.env.VITE_PRODUCTION_COOKIE_REFRESH as

		export const COOKIE_PATH = (import.meta.env.VITE_PRODUCTION_COOKIE_PATH as string) \|\| (import.meta.env.VITE_COOKIE_PATH as string);
		export const COOKIE_DOMAIN = (import.meta.env.VITE_PRODUCTION_COOKIE_DOMAIN as string) \|\| (import.meta.env.VITE_COOKIE_DOMAIN as string);

		export const KAKAO_SDK = import.meta.env.VITE_KAKAO_API_KEY as string;