diff --git a/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.css.ts b/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.css.ts new file mode 100644 index 00000000..e4189537 --- /dev/null +++ b/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.css.ts @@ -0,0 +1,70 @@ +import { style } from "@vanilla-extract/css"; + +import color from "../../../design-system/tokens/color"; +import typography from "../../../design-system/tokens/typography"; +import { + border, + flexAlignCenter, + flexCenter, +} from "../../../design-system/tokens/utils.css"; + +const BORDER_RADIUS = 8; + +export const container = style({ + width: 336, +}); + +export const title = style([ + typography.$semantic.h1, + { + marginBottom: 33, + textAlign: "center", + color: color.$scale.grey700, + }, +]); + +export const strong = style([ + typography.$semantic.title3Bold, + { + display: "block", + marginBottom: 10, + color: color.$scale.grey700, + }, +]); + +export const linkContainer = style([ + flexAlignCenter, + { + marginBottom: 30, + color: color.$scale.grey600, + }, +]); + +export const linkInput = style([ + border.all, + typography.$semantic.body2Regular, + { + flex: "1 0", + borderTopLeftRadius: BORDER_RADIUS, + borderBottomLeftRadius: BORDER_RADIUS, + padding: "9px 13px", + color: "inherit", + backgroundColor: color.$scale.grey00, + outline: "none", + }, +]); + +export const linkCopyButton = style([ + border.all, + typography.$semantic.body2Regular, + { + borderLeft: "none", + borderTopRightRadius: BORDER_RADIUS, + borderBottomRightRadius: BORDER_RADIUS, + padding: "9px 19px", + color: "inherit", + backgroundColor: color.$scale.grey50, + }, +]); + +export const buttonGroup = style([flexCenter, { gap: 4 }]); diff --git a/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.tsx b/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.tsx new file mode 100644 index 00000000..88fb6237 --- /dev/null +++ b/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.tsx @@ -0,0 +1,54 @@ +import { useRouter } from "next/router"; + +import { Button, Modal } from "../../../design-system/components/common"; + +import * as styles from "./SolvedModal.css"; + +interface SolvedModalProps { + link: string; + lastQuiz: boolean; + onClose: () => void; + onNextQuiz: () => void; +} + +export function SolvedModal({ + link, + lastQuiz, + onClose, + onNextQuiz, +}: SolvedModalProps) { + const router = useRouter(); + const handleShowAnswer = () => { + router.push(link); + }; + + return ( + +
+

정답입니다 🥳

+ 내 답안을 공유해볼까요? +
+ + +
+
+ + {!lastQuiz ? ( + + ) : null} +
+
+
+ ); +} diff --git a/packages/frontend/src/components/quiz/SolvedModal/index.ts b/packages/frontend/src/components/quiz/SolvedModal/index.ts new file mode 100644 index 00000000..56aa935d --- /dev/null +++ b/packages/frontend/src/components/quiz/SolvedModal/index.ts @@ -0,0 +1 @@ +export { SolvedModal } from "./SolvedModal"; diff --git a/packages/frontend/src/components/quiz/index.ts b/packages/frontend/src/components/quiz/index.ts index 2e8fa5cc..44c62704 100644 --- a/packages/frontend/src/components/quiz/index.ts +++ b/packages/frontend/src/components/quiz/index.ts @@ -1,3 +1,4 @@ export { default as QuizContent } from "./QuizContent"; export { default as QuizLocation } from "./QuizLocation"; export { default as CommandAccordion } from "./CommandAccordion"; +export { SolvedModal } from "./SolvedModal";