-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[#2]
- Loading branch information
Showing
4 changed files
with
126 additions
and
0 deletions.
There are no files selected for viewing
70 changes: 70 additions & 0 deletions
70
packages/frontend/src/components/quiz/SolvedModal/SolvedModal.css.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 }]); |
54 changes: 54 additions & 0 deletions
54
packages/frontend/src/components/quiz/SolvedModal/SolvedModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { SolvedModal } from "./SolvedModal"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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"; |