Skip to content

Commit 9d7730f

Browse files
KyujeniusKyujenius
authored
Feature/#34 - Test 페이지 퍼블리싱 (#35)
* refactor: comment 반영 - quiz -> test 로 명명법 수정 및 관심사 분리 * refactor: comment 반영 - Logo 컴포넌트화 * refactor: comment 반영 - Modal 스타일 변경 및 라우팅 수정 * refactor: comment 반영 - isCorrect 별로 내부 title 수정 * refactor: comment 반영 - animation 적용 * refactor: comment 반영 - Score 상수 적용 및 불필요 함수들 제거 * refactor: comment 반영 - 미사용 변수들 제거 및 최적화 * chore: prettier 적용 * fix: comment 반영 - Quiz 정답 내 줄바꿈 허용 * fix: comment 반영 - 중복되는 변수명 삭제
1 parent 3ab0e9e commit 9d7730f

File tree

13 files changed

+322
-334
lines changed

13 files changed

+322
-334
lines changed

‎apps/web/src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Route, Routes } from "react-router-dom";
33
import "@gotchai/ui/style.css";
44

55
import { IntroPage } from "./pages/intro";
6-
import { QuizPage } from "./pages/quiz";
6+
import { TestPage } from "./pages/test";
77
import { ResultPage } from "./pages/result";
88

99
import "./styles";
@@ -12,7 +12,7 @@ export const App = () => {
1212
return (
1313
<Routes>
1414
<Route path="/" element={<IntroPage />} />
15-
<Route path="/quiz" element={<QuizPage />} />
15+
<Route path="/test" element={<TestPage />} />
1616
<Route path="/result" element={<ResultPage />} />
1717
</Routes>
1818
);

apps/web/src/assets/svg/Logo.tsx renamed to apps/web/src/components/Logo.tsx

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,16 @@
1-
import React from "react";
1+
import { SVGProps } from "react";
22

3-
interface LogoProps {
4-
width?: number;
5-
height?: number;
6-
fill?: string;
7-
className?: string;
8-
}
9-
10-
export const Logo: React.FC<LogoProps> = ({
11-
width = 57,
12-
height = 12,
3+
export const Logo = ({
134
fill = "currentColor",
145
className,
15-
}) => {
6+
...props
7+
}: SVGProps<SVGSVGElement>) => {
168
return (
179
<svg
18-
width={width}
19-
height={height}
2010
fill={fill}
2111
xmlns="http://www.w3.org/2000/svg"
2212
className={className}
13+
{...props}
2314
>
2415
<g clipPath="url(#prefix__clip0_636_2726)">
2516
<path d="M9.244 10.23c-.22.288-.493.54-.815.752-.325.213-.67.391-1.042.534a6.458 6.458 0 01-2.252.424 4.502 4.502 0 01-3.359-1.43 4.84 4.84 0 01-.974-1.575 5.356 5.356 0 01-.35-1.95 6.923 6.923 0 01.68-2.999c.218-.45.486-.866.8-1.24.314-.378.67-.704 1.07-.977a4.959 4.959 0 011.31-.636C4.783.982 5.29.906 5.83.906c.203 0 .418.008.647.025.228.016.457.045.686.089.228.04.449.1.665.172.215.073.413.165.592.27l-.198 2.791a3.374 3.374 0 00-.813-.207 6.131 6.131 0 00-.82-.054c-.375 0-.725.059-1.053.178a2.422 2.422 0 00-1.426 1.332c-.14.32-.21.685-.21 1.09 0 .253.034.498.099.733.065.237.166.445.298.629.133.183.302.329.5.442.2.113.43.167.693.167.179 0 .363-.024.553-.073.19-.048.353-.132.488-.248l.029-.569-1.689-.03.086-2.192c.699-.025 1.398-.046 2.096-.062.7-.017 1.403-.04 2.112-.07l.084 4.908-.006.003zM18.648 6.564c0 .442-.05.871-.148 1.281a5.133 5.133 0 01-.426 1.157 4.74 4.74 0 01-.676.99c-.265.3-.564.555-.893.771-.33.213-.691.38-1.081.502a4.23 4.23 0 01-1.24.178c-.436 0-.823-.057-1.207-.167a4.536 4.536 0 01-1.073-.472 4.34 4.34 0 01-.904-.731 4.53 4.53 0 01-.688-.95 5.062 5.062 0 01-.445-1.121 4.818 4.818 0 01-.158-1.25c0-.433.05-.838.148-1.245a5.11 5.11 0 01.426-1.152c.184-.361.41-.69.673-.992.262-.302.556-.561.883-.782a4.225 4.225 0 011.06-.513 3.862 3.862 0 011.203-.183c.68 0 1.301.11 1.862.329a4.01 4.01 0 011.437.938c.397.408.704.898.922 1.476.218.577.327 1.221.327 1.933l-.002.003zm-3.125.192c0-.21-.029-.413-.089-.61a1.692 1.692 0 00-.257-.526 1.311 1.311 0 00-.418-.372 1.145 1.145 0 00-.574-.143c-.216 0-.418.04-.592.124a1.375 1.375 0 00-.447.34 1.535 1.535 0 00-.286.504 1.895 1.895 0 00-.099.61c0 .213.029.41.086.615.057.205.14.388.252.555.112.167.252.3.418.402.167.103.361.154.58.154.218 0 .418-.046.594-.135.177-.089.325-.213.447-.364a1.67 1.67 0 00.28-.529c.066-.2.1-.407.1-.62l.005-.005zM26.575 1.273l-.07 3.1-2.096.088-.535 6.926-2.97.162.014-6.926-2.097.116.086-3.45 7.671-.013-.003-.003zM33.792 1.449l-.395 3.082a2.727 2.727 0 00-.408-.08 4.127 4.127 0 00-.407-.022c-.349 0-.678.048-.993.143-.314.094-.592.24-.834.434a2.1 2.1 0 00-.576.73 2.322 2.322 0 00-.216 1.031c0 .254.04.472.117.658a1.245 1.245 0 00.826.731c.192.057.403.09.634.09.174 0 .353-.02.543-.06a4.863 4.863 0 001.091-.372c.174-.084.332-.168.478-.257l-.28 3.434a4.354 4.354 0 01-.596.258c-.213.076-.433.14-.657.197-.226.057-.45.1-.675.127-.226.03-.442.043-.647.043-.595 0-1.15-.113-1.668-.342a4.149 4.149 0 01-1.343-.941 4.43 4.43 0 01-.896-1.414 4.656 4.656 0 01-.327-1.755c0-.834.114-1.619.345-2.358a5.83 5.83 0 011.013-1.939 4.787 4.787 0 011.658-1.316c.66-.32 1.418-.483 2.275-.483.325 0 .655.027.995.081.34.054.655.154.946.3h-.003zM42.588 11.722l-3.518.175-.028-3.374h-1.619l-.098 3.199h-3.151l.267-10.273 3.349.162-.21 5.245h1.56l.014-5.64 3.208.09.226 10.418v-.002zM52.581 11.093l-3.49.467-.424-1.651H47.06l-.35 1.65-3.588-.364 2.8-9.73 3.913-.205 2.743 9.833h.002zm-4.164-3.42l-.535-2.543-.52 2.543h1.055zM53.363 3.235c.143.143.31.254.496.337.187.084.387.122.6.119.216-.005.416-.051.6-.143a1.66 1.66 0 00.483-.359c.138-.148.245-.323.322-.523.078-.2.115-.41.11-.628a1.644 1.644 0 00-.133-.623 1.656 1.656 0 00-.34-.502 1.552 1.552 0 00-.496-.334 1.494 1.494 0 00-1.683.378c-.138.148-.247.32-.325.514-.08.195-.117.405-.115.629.006.218.05.426.138.623.088.197.203.367.345.51l-.002.002zM53.373 4.336l-.194 7.63 3.374-.356-.782-7.325-2.398.051z" />

‎apps/web/src/components/QuizResultModal/QuizResultModal.tsx‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,47 +6,55 @@ import {
66
titleContainer,
77
divider,
88
nextButton,
9+
answerText,
910
} from "./style.css";
1011
import { COLORS, Modal } from "@gotchai/ui";
1112
import { Button, Text, Title } from "@gotchai/ui";
1213

1314
export type QuizResultModalProps = HTMLAttributes<HTMLDivElement> & {
1415
isOpen: boolean;
15-
icon: React.ReactNode;
16-
title: string;
16+
isCorrect: boolean;
1717
onClose: () => void;
18-
onClickNext: () => void;
1918
answer: string;
2019
};
2120

2221
export const QuizResultModal = ({
2322
isOpen,
24-
icon,
25-
title,
23+
isCorrect,
2624
answer,
2725
onClose,
28-
onClickNext,
2926
}: QuizResultModalProps) => {
3027
return (
3128
<Modal isOpen={isOpen} onClose={onClose}>
3229
<div className={modalContent}>
33-
<div className={iconContainer}>{icon}</div>
30+
<div className={iconContainer}>
31+
{isCorrect ? (
32+
<img src="/assets/quiz-correct.png" alt="correct" />
33+
) : (
34+
<img src="/assets/quiz-wrong.png" alt="wrong" />
35+
)}
36+
</div>
3437
<div className={titleContainer}>
3538
<Title order={5} color={COLORS.gray[50]}>
36-
{title}
39+
{isCorrect ? "Ai를 찾아냈어요!" : "사람이 작성한 대답이에요"}
3740
</Title>
3841
</div>
3942
<div className={answerContainer}>
4043
<Text size="lg" color={COLORS.gray[200]} weight="medium">
4144
정답 공개
4245
</Text>
4346
<div className={divider} />
44-
<Text size="xl" color={COLORS.white} weight="medium">
47+
<Text
48+
size="xl"
49+
color={COLORS.white}
50+
weight="medium"
51+
className={answerText}
52+
>
4553
{answer}
4654
</Text>
4755
</div>
4856

49-
<Button variant="filled" onClick={onClickNext} className={nextButton}>
57+
<Button variant="filled" onClick={onClose} className={nextButton}>
5058
다음
5159
</Button>
5260
</div>

‎apps/web/src/components/QuizResultModal/style.css.ts‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,18 @@
1-
import { style } from "@vanilla-extract/css";
1+
import { style, keyframes } from "@vanilla-extract/css";
22
import { COLORS } from "@gotchai/ui";
33

4+
/* 모달 슬라이드 인 */
5+
const modalSlideIn = keyframes({
6+
"0%": {
7+
opacity: 0,
8+
transform: "scale(0.9) translateY(20px)",
9+
},
10+
"100%": {
11+
opacity: 1,
12+
transform: "scale(1) translateY(0)",
13+
},
14+
});
15+
416
export const modalContent = style({
517
width: "100%",
618
padding: "40px 24px 24px 24px",
@@ -13,6 +25,8 @@ export const modalContent = style({
1325
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
1426
opacity: 1,
1527
outline: "none",
28+
transform: "scale(1)",
29+
animation: `${modalSlideIn} 0.2s cubic-bezier(0.4, 0, 0.2, 1)`,
1630
});
1731

1832
export const iconContainer = style({
@@ -56,3 +70,8 @@ export const buttonContainer = style({
5670
export const nextButton = style({
5771
marginTop: "32px",
5872
});
73+
74+
export const answerText = style({
75+
textAlign: "start",
76+
whiteSpace: "pre-wrap",
77+
});

‎apps/web/src/components/ResultCard/ResultCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
} from "./style.css";
1212
import { CardResult, CARD_CONTENTS } from "./cardConfig";
1313
import { CONTENT_COLORS } from "./cardConfig";
14-
import Logo from "../../assets/svg/Logo";
14+
import Logo from "../Logo";
1515

1616
interface CardProps {
1717
result: CardResult;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const IntroContent = () => {
4949
</div>
5050
<div className={introFooter}>
5151
<Text className={introParticipant}>참여자 수 | 435명</Text>
52-
<Button variant="filled" onClick={() => navigate("/quiz")}>
52+
<Button variant="filled" onClick={() => navigate("/test")}>
5353
나는 얼마나 AI를 잘 찾을까?
5454
</Button>
5555
</div>

‎apps/web/src/pages/quiz/index.tsx‎

Lines changed: 0 additions & 103 deletions
This file was deleted.

0 commit comments

Comments
 (0)