style: SolvedModal 스타일링

[#2]

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 }]);

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 (
+    <Modal onClose={onClose}>
+      <div className={styles.container}>
+        <h3 className={styles.title}>정답입니다 🥳</h3>
+        <strong className={styles.strong}>내 답안을 공유해볼까요?</strong>
+        <div className={styles.linkContainer}>
+          <input
+            className={styles.linkInput}
+            type="text"
+            defaultValue={link}
+            readOnly
+          />
+          <button type="button" className={styles.linkCopyButton}>
+            URL 복사
+          </button>
+        </div>
+        <div className={styles.buttonGroup}>
+          <Button full variant="primaryLow" onClick={handleShowAnswer}>
+            내 답안 보러가기
+          </Button>
+          {!lastQuiz ? (
+            <Button full variant="primaryFill" onClick={onNextQuiz}>
+              다음 문제 풀래요
+            </Button>
+          ) : null}
+        </div>
+      </div>
+    </Modal>
+  );
+}

packages/frontend/src/components/quiz/SolvedModal/index.ts

@@ -0,0 +1 @@
+export { SolvedModal } from "./SolvedModal";

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";