Feature/#38 - UT전 수정사항 (#39)

* chore: 사용하지 않는 파일 제거

* feat: 퀴즈 푼 이후 로딩 ui 적용

* refactor: url 상수 적용

* feat: 이미지 다운로드 기능 추가

* fix: 모바일 Toast 중앙 정렬 안되는 이슈 해결

Author: dohun31

apps/web/package.json

@@ -14,6 +14,7 @@
     "@vanilla-extract/css": "catalog:",
     "@vanilla-extract/recipes": "catalog:",
     "es-toolkit": "^1.39.8",
+    "html2canvas": "^1.4.1",
     "react": "catalog:react19",
     "react-dom": "catalog:react19",
     "react-router-dom": "^7.7.1"

apps/web/src/components/Loading/style.css.ts

@@ -53,5 +53,5 @@ export const textOutline = style({
   maskPosition: "0% 0px",
   WebkitMaskRepeat: "no-repeat",
   maskRepeat: "no-repeat",
-  animation: `${textMaskAnimation} 3s ease-in-out infinite`,
+  animation: `${textMaskAnimation} 2s ease-in-out infinite`,
 });

apps/web/src/components/QuizSubmitButton.tsx

@@ -0,0 +1,5 @@
+export const URLS = {
+  MAIN: "/",
+  TEST: "/test",
+  RESULT: (type: string) => `/result?type=${type}`,
+};

apps/web/src/components/ShareButton.tsx

@@ -11,6 +11,7 @@ import {
   introParticipant,
   introTitle,
 } from "./style.css";
+import { URLS } from "../../constants/urls";
 
 export const IntroPage = () => {
   return (
@@ -49,7 +50,7 @@ const IntroContent = () => {
       </div>
       <div className={introFooter}>
         <Text className={introParticipant}>참여자 수 | 435명</Text>
-        <Button variant="filled" onClick={() => navigate("/test")}>
+        <Button variant="filled" onClick={() => navigate(URLS.TEST)}>
           나는 얼마나 AI를 잘 찾을까?
         </Button>
       </div>

apps/web/src/constants/urls.ts

@@ -1,10 +1,13 @@
 import { Button, COLOR_VARS, Text, useToast } from "@gotchai/ui";
 import { useNavigate, useSearchParams } from "react-router-dom";
+import { useRef } from "react";
+import html2canvas from "html2canvas";
 
 import { Layout } from "../../components/Layout/Layout";
 import { ResultCard } from "../../components/ResultCard/ResultCard";
 import { CardResult } from "../../components/ResultCard/cardConfig";
 import { container, downloadSection, buttonContainer } from "./style.css";
+import { URLS } from "../../constants/urls";
 
 const getValidResult = (type: string | null): CardResult | null => {
   const validTypes = Object.values(CardResult).find((result) =>
@@ -18,30 +21,70 @@ export const ResultPage = () => {
   const { showToast } = useToast();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
+  const resultCardRef = useRef<HTMLDivElement>(null);
 
   const result = getValidResult(searchParams.get("type"));
 
   const handleClickReTry = () => {
-    navigate("/");
+    navigate(URLS.TEST);
   };
 
-  const handleClickDownload = () => {
-    showToast({
-      data: {
-        message: "이미지를 저장했어요.",
-      },
-    });
+  const handleClickDownload = async () => {
+    if (!resultCardRef.current) return;
+
+    try {
+      const canvas = await html2canvas(resultCardRef.current, {
+        scale: 2, // 고해상도
+        useCORS: true, // 외부 이미지 허용
+        allowTaint: true, // 외부 리소스 허용
+        backgroundColor: null, // 배경 투명
+        logging: false, // 로그 비활성화
+      });
+
+      canvas.toBlob(async (blob) => {
+        if (!blob) {
+          showToast({
+            data: {
+              message: "이미지 변환에 실패했어요.",
+            },
+          });
+          return;
+        }
+
+        try {
+          // 클립보드에 이미지 저장
+          const clipboardItem = new ClipboardItem({
+            "image/png": blob,
+          });
+          await navigator.clipboard.write([clipboardItem]);
+
+          showToast({
+            data: {
+              message: "이미지를 저장했어요.",
+            },
+          });
+        } catch (error) {
+          console.error("클립보드 저장 실패:", error);
+        }
+      }, "image/png");
+    } catch (error) {
+      console.error("이미지 변환 실패:", error);
+    }
   };
 
   return (
     <Layout>
       <div className={container}>
-        <ResultCard result={result as CardResult} />
+        <div ref={resultCardRef}>
+          <ResultCard result={result as CardResult} />
+        </div>
         <div className={downloadSection}>
           <Text color={COLOR_VARS.green[600]} size="lg" weight="medium">
             앱에서도 계속 퀴즈를 풀어볼까요?
           </Text>
-          <Button variant="filled">1분만에 다운로드하기</Button>
+          <Button variant="filled" disabled>
+            1분만에 다운로드하기
+          </Button>
         </div>
         <div className={buttonContainer}>
           <Button onClick={handleClickReTry}>다시하기</Button>

apps/web/src/pages/Components/index.tsx

@@ -14,12 +14,19 @@ import { QuizResultModal } from "../../components/QuizResultModal/QuizResultModa
 import { useNavigate } from "react-router-dom";
 import { CardResult } from "../../components/ResultCard/cardConfig";
 import { Layout } from "../../components/Layout/Layout";
+import { Loading } from "../../components/Loading/Loading";
+import { URLS } from "../../constants/urls";
 
 export const TestPage = () => {
+  const [isLoading, setIsLoading] = useState(false);
   const navigate = useNavigate();
 
   const onTestEnd = (result: CardResult) => {
-    navigate(`/result?type=${result}`);
+    setIsLoading(true);
+
+    setTimeout(() => {
+      navigate(URLS.RESULT(result));
+    }, 4_000);
   };
 
   const {
@@ -48,6 +55,14 @@ export const TestPage = () => {
     handleNextQuestion();
   };
 
+  if (isLoading) {
+    return (
+      <Layout>
+        <Loading />
+      </Layout>
+    );
+  }
+
   return (
     <Layout hideLogo>
       <Chip color="green" className={progressBadge}>

apps/web/src/pages/intro/index.tsx

@@ -10,7 +10,7 @@ export const toast = style({
   backgroundColor: COLOR_VARS.gray[800],
   padding: "16px 20px",
   borderRadius: 16,
-  margin: 0,
+  margin: "0 auto",
 
   ...media.mobile({
     borderRadius: 40,