Merge pull request #103 from Devminjeong-eum/fix/DEV-132

[DEV-132] 퀴즈 페이지 QA 반영

src/components/pages/quiz/QuizPlay.tsx

@@ -139,7 +139,7 @@ export default function QuizPlay() {
                     handleAnswerOptionClick(data[currentQuiz].wordId, option)
                   }
                   className={clsx(
-                    'shadow-quiz-button w-[90%] font-medium h-[54px] rounded-[16px] mb-[8px] border-px border-[#F2F4F9]',
+                    'shadow-quiz-button w-[90%] font-medium h-[56px] rounded-[16px] mb-[8px] border-px border-[#F2F4F9] ring-1 ring-[#F2F4F9]',
                     selectOption === option &&
                       (option === data[currentQuiz].correct
                         ? 'bg-quiz-blue text-white'

src/components/pages/quiz/QuizResult.tsx

@@ -4,12 +4,17 @@ import BlackBackSpaceSVG from '@/components/svg-component/BlackBackSpaceSVG';
 import QuizScore from './QuizScore';
 import QuizResultDetail from './QuizResultDetail';
 import type { QuizResultWordData } from '@/fetcher/types';
-import { getQuizResultSharePath, QUIZ_PATH } from '@/routes/path';
+import {
+  getQuizResultSharePath,
+  QUIZ_PATH,
+  WORD_LIST_PATH,
+} from '@/routes/path';
 import { useRouter } from 'next/navigation';
 import ShareButtonSvg from '@/components/svg-component/ShareButtonSvg.tsx';
 import useAuthQuery from '@/hooks/query/useAuthQuery.ts';
 import { useState } from 'react';
 import LoginAlertModal from '@/components/common/LoginAlertModal.tsx';
+import Link from 'next/link';
 
 type Props = {
   quizResultId: string;
@@ -33,7 +38,6 @@ export default function QuizResult({
   const isGuest = quizResultId === 'guest';
 
   const handleNeedLogin = () => {
-    // NOTE: 2초간 로그인 toast UI
     setIsOpenModal(true);
     setTimeout(() => {
       setIsOpenModal(false);
@@ -69,14 +73,19 @@ export default function QuizResult({
       />
       <button
         onClick={() => router.replace(QUIZ_PATH)}
-        className="bg-[#4057DB] rounded-[16px] mt-[24px] mb-[48px] h-[50px] font-semibold text-white w-full text-[16px]"
+        className="bg-[#4057DB] rounded-[16px] mt-[24px] mb-[8px] h-[54px] font-semibold text-white w-full text-[16px]"
       >
         {data?.error && !isGuest ? (
           <span>나도 도전하러 가기</span>
         ) : (
           <span>다시 도전하러 가기</span>
         )}
       </button>
+      <Link href={WORD_LIST_PATH}>
+        <button className="rounded-[16px] mb-[31px] h-[54px] font-semibold text-[#4057DB] w-full text-[16px] border-[1px] border-[#EAEDFF]">
+          홈으로 가기
+        </button>
+      </Link>
       <LoginAlertModal isOpen={isOpenModal} />
     </div>
   );

src/components/pages/quiz/QuizResultDetail.tsx

@@ -42,7 +42,7 @@ export default function QuizResultDetail({
           <div className="inline-block space-x-1">
             <span className="inline-block h-2 w-2 rounded-full bg-quiz-blue"></span>
             <span className="text-[11px] pr-2">맞았어요</span>
-            <span className="inline-block h-2 w-2 rounded-full bg-quiz-red"></span>
+            <span className="inline-block h-2 w-2 rounded-full bg-[#A20101]"></span>
             <span className="text-[11px]">틀렸어요</span>
           </div>
         </div>

src/components/pages/quiz/QuizResultDetailWord.tsx

@@ -56,15 +56,15 @@ export default function QuizResultDetailWord({ data, correctWords }: Props) {
 
   return (
     <div
-      className="flex flex-col mt-[14px] mx-5 border-b-2 cursor-pointer"
+      className="flex flex-col mt-[14px] mx-5 border-b-[1px] cursor-pointer last:border-b-0"
       onClick={handleClickWordDetail}
     >
       <div className="flex items-center justify-between pb-3">
         <div>
           <div
             className={clsx(
               'text-[17px] font-semibold',
-              correctWords.includes(data) ? 'text-quiz-blue' : 'text-quiz-red',
+              correctWords.includes(data) ? 'text-quiz-blue' : 'text-[#A20101]',
             )}
           >
             {data.name}

src/components/pages/quiz/QuizScore.tsx

@@ -7,7 +7,8 @@ type Props = {
 
 export default function QuizScore({ score, userName }: Props) {
   return (
-    <div className="w-full max-h-[374px] overflow-hidden relative flex justify-center">
+    <div className="w-full relative flex justify-center">
+      <ScoreResultSvg />
       <div className="absolute top-[30%] text-center">
         <p>
           <span className="font-semibold text-[#313140] text-[18px] mr-1">
@@ -24,7 +25,6 @@ export default function QuizScore({ score, userName }: Props) {
           {score}점
         </div>
       </div>
-      <ScoreResultSvg />
     </div>
   );
 }

src/components/pages/quiz/index.tsx

@@ -28,7 +28,7 @@ export default function Quiz() {
   }
 
   return (
-    <div className="px-5 h-screen flex flex-col justify-center items-center bg-main-gradient-full relative">
+    <div className="px-5 h-full flex flex-col justify-center items-center bg-main-gradient-full relative">
       <header className="absolute top-6 left-5 cursor-pointer">
         <button onClick={router.back}>
           <BackButtonSvg />
@@ -41,15 +41,15 @@ export default function Quiz() {
         <div className="mb-[18px] font-gugi text-white text-[40px] text-center w-[220px]">
           개발 용어
           <br />
-          발음 테스트
+          발음 퀴즈
         </div>
-        <p className="text-white font-medium">나의 개발 용어 발음 지식은?</p>
+        <p className="text-[#ECEFF5] font-medium">
+          나의 개발 용어 발음 지식은?
+        </p>
       </div>
       <button
         onClick={handleClickPlayButton}
-        className="w-[calc(100%-40px)] flex justify-center items-center absolute bottom-[50px] h-12 rounded-[16px] bg-white/20 ring-1 ring-white/40 focus:ring-white/60 outline-none text-white
-        shadow-quiz
-        hover:cursor-pointer"
+        className="w-[calc(100%-40px)] flex justify-center items-center absolute bottom-[50px] h-12 rounded-[16px] bg-white/20 ring-1 ring-white/40 focus:ring-white/60 outline-none text-white"
       >
         테스트 시작하기
       </button>

src/components/svg-component/DefaultProfileIconSvg.tsx

@@ -26,7 +26,7 @@ export default function DefaultProfileIconSvg() {
         d="M52.4741 48.1904C51.4265 51.3333 47.9087 53.4285 43.5693 53.4285C39.2299 53.4285 35.7122 51.3333 34.6646 48.1904"
         stroke="white"
         stroke-width="2.09524"
-        stroke-linecap="round"
+        strokeLinecap="round"
       />
       <defs>
         <linearGradient

src/components/svg-component/HyphenSvg.tsx

@@ -3,7 +3,7 @@ import { ComponentProps } from 'react';
 export default function HyphenSvg(props: ComponentProps<'svg'>) {
   return (
     <svg width="8" height="2" viewBox="0 0 8 2" fill="currentColor" {...props}>
-      <path d="M1 1H7" stroke="currentColor" stroke-linecap="round" />
+      <path d="M1 1H7" stroke="currentColor" strokeLinecap="round" />
     </svg>
   );
 }

src/components/svg-component/ScoreResultSvg.tsx

@@ -2,10 +2,11 @@ export default function ScoreResultSvg() {
   return (
     <svg
       width="390"
-      height="390"
-      viewBox="0 0 321 301"
+      height="350"
+      viewBox="0 0 321 304"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="none"
     >
       <g filter="url(#filter0_d_450_4868)">
         <path

src/components/svg-component/ScoreSvg.tsx

@@ -2,39 +2,39 @@ export default function ScoreSVG() {
   return (
     <svg
       width="252"
-      height="315"
-      viewBox="0 0 252 315"
+      height="306"
+      viewBox="0 0 252 306"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <g opacity="0.1">
         <circle
-          cx="176.867"
-          cy="152.178"
+          cx="185.654"
+          cy="150.391"
           r="110"
-          transform="rotate(-17.2089 176.867 152.178)"
+          transform="rotate(-17.2089 185.654 150.391)"
           stroke="#8B84E3"
           strokeWidth="6"
         />
-        <path
-          d="M69.2641 309.074C67.6952 309.607 66.8552 311.31 67.3878 312.879C67.9204 314.448 69.6241 315.288 71.193 314.755L69.2641 309.074ZM71.193 314.755L353.712 218.84L351.783 213.159L69.2641 309.074L71.193 314.755Z"
-          fill="#8B84E3"
-        />
         <circle
           cx="185.655"
-          cy="149.456"
+          cy="150.391"
           r="97"
-          transform="rotate(-17.2089 185.655 149.456)"
+          transform="rotate(-17.2089 185.655 150.391)"
           stroke="#8B84E3"
           strokeWidth="4"
           strokeDasharray="9 9"
         />
         <path
-          d="M100.995 155.017C100.017 155.32 99.2994 154.806 98.8421 153.473C98.3721 152.1 98.667 151.249 99.7266 150.921C100.379 150.719 101.128 150.398 101.974 149.957C102.82 149.516 103.749 148.983 104.761 148.357C105.667 147.675 106.374 146.785 106.883 145.69C107.38 144.553 107.608 143.344 107.568 142.061C107.611 141.333 107.854 140.677 108.299 140.092C108.743 139.508 109.44 139.091 110.39 138.842C112.331 138.33 113.598 139.032 114.191 140.947L128.014 185.576C128.607 187.491 127.701 188.821 125.297 189.566C122.892 190.311 121.393 189.726 120.8 187.81L109.799 152.291L100.995 155.017ZM146.358 128.774C147.377 128.458 148.527 128.348 149.807 128.442C151.087 128.537 152.364 128.767 153.638 129.132L153.577 129.151C154.876 129.597 156.007 130.363 156.969 131.45C157.918 132.496 158.645 133.834 159.15 135.464L168.144 164.503C168.675 166.215 168.844 167.771 168.652 169.17C168.447 170.529 167.941 171.78 167.134 172.923C166.314 174.026 165.424 174.972 164.462 175.761C163.488 176.509 162.471 177.048 161.411 177.376L154.992 179.364C153.933 179.692 152.769 179.829 151.502 179.775C150.262 179.668 148.993 179.391 147.693 178.945C146.381 178.458 145.236 177.718 144.259 176.725C143.31 175.679 142.57 174.3 142.04 172.589L133.046 143.55C132.541 141.919 132.384 140.404 132.576 139.005C132.796 137.552 133.316 136.275 134.136 135.172L134.075 135.191C134.92 134.17 135.844 133.258 136.846 132.457C137.848 131.655 138.879 131.09 139.939 130.762L146.358 128.774ZM157.909 171.693C159.417 171.226 160.345 170.47 160.691 169.425C161.078 168.367 161.107 167.308 160.779 166.249L152.107 138.249C151.791 137.23 151.175 136.394 150.258 135.74C149.381 135.073 148.189 134.973 146.681 135.44L143.319 136.482C141.811 136.949 140.863 137.711 140.476 138.769C140.13 139.814 140.115 140.847 140.43 141.865L149.102 169.865C149.43 170.925 150.033 171.788 150.909 172.455C151.826 173.108 153.039 173.202 154.547 172.735L157.909 171.693ZM181.045 118.03C182.064 117.715 183.213 117.604 184.493 117.699C185.773 117.794 187.051 118.024 188.325 118.388L188.264 118.407C189.563 118.854 190.694 119.62 191.656 120.707C192.605 121.753 193.332 123.091 193.837 124.721L202.831 153.76C203.361 155.472 203.531 157.027 203.339 158.427C203.134 159.786 202.628 161.037 201.821 162.18C201.001 163.282 200.111 164.228 199.149 165.018C198.175 165.766 197.158 166.304 196.098 166.632L189.679 168.621C188.619 168.949 187.456 169.086 186.188 169.032C184.949 168.924 183.68 168.647 182.38 168.201C181.068 167.714 179.923 166.975 178.946 165.982C177.997 164.936 177.257 163.557 176.727 161.845L167.733 132.806C167.228 131.176 167.071 129.661 167.263 128.262C167.483 126.809 168.003 125.531 168.823 124.429L168.762 124.448C169.607 123.427 170.531 122.515 171.533 121.713C172.535 120.912 173.566 120.347 174.626 120.018L181.045 118.03ZM192.596 160.95C194.104 160.483 195.031 159.727 195.378 158.682C195.765 157.624 195.794 156.565 195.466 155.505L186.794 127.506C186.478 126.487 185.862 125.65 184.945 124.996C184.068 124.33 182.876 124.23 181.368 124.697L178.006 125.739C176.498 126.206 175.55 126.968 175.163 128.026C174.817 129.071 174.801 130.103 175.117 131.122L183.789 159.122C184.117 160.182 184.72 161.045 185.596 161.711C186.513 162.365 187.726 162.459 189.234 161.992L192.596 160.95ZM265.449 145.153C265.739 146.09 265.712 147.014 265.369 147.925C265.079 148.863 264.2 149.56 262.733 150.014L234.122 158.876C232.655 159.33 231.516 159.258 230.706 158.661C229.948 158.091 229.425 157.338 229.134 156.4L224.685 142.034C224.394 141.096 224.401 140.179 224.703 139.281C225.034 138.33 225.933 137.627 227.4 137.173L256.011 128.311C257.479 127.857 258.597 127.935 259.367 128.545C260.164 129.102 260.709 129.849 260.999 130.786L265.449 145.153ZM237.525 126.6C239.423 128.111 239.528 129.821 237.841 131.728C236.182 133.582 234.49 133.816 232.765 132.429L219.018 121.143L215.813 150.812C215.578 152.939 214.214 153.942 211.72 153.821C209.213 153.66 208.08 152.38 208.32 149.983L212.052 114.658L202.209 117.706C200.701 118.173 199.611 117.394 198.939 115.369C198.295 113.29 198.748 112.011 200.297 111.532L227.685 103.049C229.275 102.556 230.371 103.356 230.974 105.447C231.605 107.485 231.146 108.744 229.598 109.223L219.999 112.196L237.525 126.6ZM254.136 124.202C254.742 126.158 253.822 127.515 251.376 128.273C248.972 129.017 247.467 128.412 246.861 126.455L239.059 101.268C238.454 99.3115 239.353 97.9609 241.758 97.2162C244.203 96.4588 245.729 97.0582 246.334 99.0145L254.136 124.202ZM254.69 136.157C254.639 135.994 254.574 135.858 254.496 135.748C254.417 135.639 254.235 135.628 253.95 135.717L233.286 142.117C233.001 142.205 232.857 142.316 232.854 142.451C232.851 142.586 232.875 142.735 232.926 142.898L235.444 151.029C235.494 151.192 235.559 151.329 235.638 151.438C235.716 151.548 235.898 151.559 236.183 151.47L256.847 145.07C257.132 144.982 257.276 144.87 257.279 144.735C257.282 144.6 257.258 144.451 257.208 144.288L254.69 136.157ZM241.782 113.087C242.186 114.392 242.065 115.658 241.418 116.885C240.799 118.06 239.837 118.849 238.533 119.253C237.229 119.657 235.969 119.556 234.754 118.949C233.567 118.29 232.771 117.308 232.367 116.003C231.964 114.699 232.071 113.46 232.69 112.285C233.337 111.058 234.313 110.242 235.617 109.838C236.921 109.434 238.167 109.562 239.354 110.222C240.569 110.828 241.378 111.783 241.782 113.087Z"
+          d="M102.905 155.36C101.927 155.663 101.21 155.149 100.752 153.816C100.282 152.443 100.577 151.593 101.637 151.264C102.289 151.062 103.038 150.741 103.884 150.3C104.73 149.859 105.659 149.326 106.672 148.7C107.577 148.018 108.284 147.128 108.793 146.033C109.29 144.896 109.518 143.687 109.478 142.404C109.521 141.676 109.764 141.02 110.209 140.435C110.653 139.851 111.35 139.434 112.3 139.185C114.241 138.673 115.508 139.375 116.101 141.29L129.924 185.919C130.517 187.834 129.612 189.164 127.207 189.909C124.802 190.654 123.303 190.069 122.71 188.153L111.709 152.634L102.905 155.36ZM148.268 129.117C149.287 128.801 150.437 128.691 151.717 128.785C152.997 128.88 154.274 129.11 155.548 129.475L155.487 129.494C156.787 129.94 157.917 130.706 158.879 131.793C159.828 132.839 160.556 134.177 161.061 135.807L170.055 164.846C170.585 166.558 170.754 168.114 170.562 169.513C170.357 170.872 169.852 172.123 169.044 173.266C168.225 174.369 167.334 175.315 166.372 176.104C165.398 176.852 164.381 177.391 163.322 177.719L156.902 179.707C155.843 180.035 154.679 180.172 153.412 180.118C152.172 180.011 150.903 179.734 149.604 179.288C148.291 178.801 147.147 178.061 146.169 177.068C145.22 176.022 144.48 174.643 143.95 172.932L134.956 143.893C134.451 142.262 134.294 140.747 134.486 139.348C134.706 137.895 135.226 136.618 136.046 135.515L135.985 135.534C136.83 134.513 137.754 133.601 138.756 132.8C139.758 131.998 140.789 131.433 141.849 131.105L148.268 129.117ZM159.82 172.036C161.328 171.569 162.255 170.813 162.601 169.768C162.988 168.71 163.017 167.651 162.689 166.592L154.017 138.592C153.701 137.573 153.085 136.737 152.168 136.083C151.291 135.416 150.099 135.316 148.591 135.783L145.229 136.825C143.721 137.292 142.773 138.054 142.386 139.112C142.04 140.157 142.025 141.19 142.34 142.208L151.012 170.208C151.341 171.268 151.943 172.131 152.819 172.798C153.737 173.451 154.949 173.545 156.457 173.078L159.82 172.036ZM182.955 118.373C183.974 118.058 185.124 117.947 186.404 118.042C187.684 118.137 188.961 118.367 190.235 118.731L190.174 118.75C191.473 119.197 192.604 119.963 193.566 121.05C194.515 122.096 195.242 123.434 195.747 125.064L204.741 154.103C205.272 155.815 205.441 157.371 205.249 158.77C205.044 160.129 204.539 161.38 203.731 162.523C202.911 163.626 202.021 164.571 201.059 165.361C200.085 166.109 199.068 166.647 198.008 166.975L191.589 168.964C190.53 169.292 189.366 169.429 188.099 169.375C186.859 169.267 185.59 168.99 184.29 168.544C182.978 168.057 181.833 167.318 180.856 166.325C179.907 165.279 179.167 163.9 178.637 162.188L169.643 133.149C169.138 131.519 168.981 130.004 169.173 128.605C169.393 127.152 169.913 125.874 170.733 124.772L170.672 124.791C171.517 123.77 172.441 122.858 173.443 122.056C174.445 121.255 175.476 120.69 176.536 120.361L182.955 118.373ZM194.506 161.293C196.014 160.826 196.942 160.07 197.288 159.025C197.675 157.967 197.704 156.908 197.376 155.848L188.704 127.849C188.388 126.83 187.772 125.993 186.855 125.339C185.978 124.673 184.786 124.573 183.278 125.04L179.916 126.082C178.408 126.549 177.46 127.311 177.073 128.369C176.727 129.414 176.712 130.446 177.027 131.465L185.699 159.465C186.028 160.525 186.63 161.388 187.506 162.054C188.423 162.708 189.636 162.802 191.144 162.335L194.506 161.293ZM267.359 145.496C267.649 146.433 267.623 147.357 267.279 148.268C266.989 149.206 266.111 149.903 264.643 150.357L236.032 159.219C234.565 159.673 233.426 159.601 232.616 159.004C231.859 158.434 231.335 157.681 231.045 156.743L226.595 142.377C226.305 141.439 226.311 140.522 226.613 139.624C226.944 138.673 227.843 137.97 229.31 137.516L257.921 128.654C259.389 128.2 260.507 128.278 261.277 128.888C262.075 129.445 262.619 130.192 262.909 131.129L267.359 145.496ZM239.436 126.943C241.333 128.454 241.438 130.164 239.751 132.071C238.092 133.925 236.4 134.159 234.675 132.772L220.929 121.486L217.723 151.155C217.488 153.282 216.124 154.285 213.63 154.164C211.123 154.003 209.99 152.723 210.23 150.326L213.962 115.001L204.119 118.049C202.611 118.516 201.521 117.737 200.849 115.712C200.206 113.633 200.658 112.354 202.207 111.875L229.595 103.392C231.185 102.899 232.281 103.699 232.884 105.79C233.515 107.828 233.056 109.087 231.508 109.566L221.91 112.539L239.436 126.943ZM256.046 124.545C256.652 126.501 255.732 127.858 253.287 128.616C250.882 129.36 249.377 128.755 248.771 126.798L240.97 101.611C240.364 99.6545 241.263 98.304 243.668 97.5592C246.113 96.8018 247.639 97.4012 248.245 99.3576L256.046 124.545ZM256.6 136.5C256.549 136.337 256.485 136.201 256.406 136.091C256.327 135.982 256.145 135.971 255.86 136.06L235.197 142.46C234.911 142.548 234.767 142.66 234.764 142.794C234.761 142.929 234.785 143.078 234.836 143.241L237.354 151.372C237.404 151.535 237.469 151.672 237.548 151.781C237.626 151.891 237.808 151.902 238.094 151.813L258.757 145.413C259.042 145.325 259.187 145.213 259.189 145.078C259.192 144.943 259.168 144.794 259.118 144.631L256.6 136.5ZM243.692 113.43C244.096 114.735 243.975 116.001 243.328 117.228C242.709 118.403 241.747 119.192 240.443 119.596C239.139 120 237.879 119.899 236.664 119.292C235.477 118.633 234.682 117.651 234.278 116.346C233.874 115.042 233.981 113.803 234.6 112.629C235.247 111.401 236.223 110.585 237.527 110.181C238.831 109.777 240.077 109.905 241.264 110.565C242.479 111.171 243.288 112.126 243.692 113.43Z"
           fill="#8C85E3"
         />
         <path
-          d="M46.9347 237.062C45.3702 237.607 44.5439 239.317 45.0893 240.882C45.6346 242.447 47.345 243.273 48.9095 242.727L46.9347 237.062ZM48.9095 242.727L315.243 149.898L313.269 144.232L46.9347 237.062L48.9095 242.727Z"
+          d="M46.9347 237.997C45.3702 238.542 44.5439 240.252 45.0893 241.817C45.6346 243.381 47.345 244.208 48.9095 243.662L46.9347 237.997ZM48.9095 243.662L315.243 150.833L313.269 145.167L46.9347 237.997L48.9095 243.662Z"
+          fill="#8B84E3"
+        />
+        <path
+          d="M54.0351 250.159C52.4662 250.692 51.6262 252.396 52.1588 253.965C52.6914 255.533 54.3951 256.374 55.964 255.841L54.0351 250.159ZM55.964 255.841L338.483 159.926L336.554 154.244L54.0351 250.159L55.964 255.841Z"
           fill="#8B84E3"
         />
       </g>