-
퀴즈를 그만두시겠어요?
-
-
{totalProblem - currentProblem}
-
문제밖에 남지 않았어요!
+
+
+
+
퀴즈를 그만두시겠어요?
+
+
{totalProblem - currentProblem}
+
문제밖에 남지 않았어요!
+
+
+ 지금 그만두면 다시 처음부터 진행해야해요.
+
- 지금 그만두면 다시 처음부터 진행해야해요.
-
-
-
-
-
-
-
+
+
+
+
+
+
)
}
From bc978233b65a8a982c5b5a1aa7837bcd2b6eee66 Mon Sep 17 00:00:00 2001
From: Mijin Sim <80371353+azure-553@users.noreply.github.com>
Date: Wed, 18 Sep 2024 22:49:59 +0900
Subject: [PATCH 7/7] =?UTF-8?q?chore:=20=EB=AA=A8=EB=8B=AC=EC=B0=BD=20?=
=?UTF-8?q?=EB=B0=B1=EA=B7=B8=EB=9D=BC=EC=9A=B4=EB=93=9C=20=EB=B0=8F=20?=
=?UTF-8?q?=EA=B0=84=EA=B2=A9=20=EC=88=98=EC=A0=95=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/common/Modal/Modal.stories.tsx | 39 ++++++++++++++--
src/components/common/Modal/index.tsx | 24 +++++++---
.../shared/QuizProblemStopModal/index.tsx | 46 ++++++++++---------
3 files changed, 77 insertions(+), 32 deletions(-)
diff --git a/src/components/common/Modal/Modal.stories.tsx b/src/components/common/Modal/Modal.stories.tsx
index 6a48b982..8c15a35a 100644
--- a/src/components/common/Modal/Modal.stories.tsx
+++ b/src/components/common/Modal/Modal.stories.tsx
@@ -1,7 +1,9 @@
-import React from 'react'
+import React, { useState } from 'react'
import type { Meta, StoryObj } from '@storybook/react'
import QuizProblemStopModal from '@/components/shared/QuizProblemStopModal'
import Modal from '.'
+import Image from 'next/image'
+import Button from '../Button'
const meta: Meta
= {
title: 'components/common/Modal',
@@ -19,19 +21,48 @@ export default meta
type Story = StoryObj
export const Default: Story = {
- args: {
- children: 'Modal',
+ render: () => {
+ const [isModalOpen, setIsModalOpen] = useState(false)
+
+ const closeModal = () => {
+ setIsModalOpen(false)
+ }
+
+ return (
+ <>
+
+
+ 모달의 내용 부분입니다
+
+
+ )
},
}
export const QuizProblemStopModalStory: Story = {
render: () => {
+ const [isModalOpen, setIsModalOpen] = useState(false)
+
+ const closeModal = () => {
+ setIsModalOpen(false)
+ }
+
return (
<>
+ setIsModalOpen(true)}
+ width={20}
+ height={20}
+ />
)
diff --git a/src/components/common/Modal/index.tsx b/src/components/common/Modal/index.tsx
index 8c35f16c..43406e6d 100644
--- a/src/components/common/Modal/index.tsx
+++ b/src/components/common/Modal/index.tsx
@@ -1,14 +1,26 @@
type ModalType = {
children: React.ReactNode
+ isModalOpen: boolean
+ closeModal: () => void
}
-export default function Modal({ children }: ModalType) {
+export default function Modal({
+ children,
+ isModalOpen,
+ closeModal,
+}: ModalType) {
+ if (!isModalOpen) return null
return (
-
-
-
+
)
}
diff --git a/src/components/shared/QuizProblemStopModal/index.tsx b/src/components/shared/QuizProblemStopModal/index.tsx
index 372ac8bb..86e64c7c 100644
--- a/src/components/shared/QuizProblemStopModal/index.tsx
+++ b/src/components/shared/QuizProblemStopModal/index.tsx
@@ -1,6 +1,6 @@
+import { Dialog } from '@ark-ui/react'
import Button from '@/components/common/Button'
import Modal from '@/components/common/Modal'
-import { Dialog } from '@ark-ui/react'
interface QuizProblemStopModalProps {
isModalOpen: boolean
@@ -15,31 +15,33 @@ export default function QuizProblemStopModal({
totalProblem,
currentProblem,
}: QuizProblemStopModalProps) {
- if (!isModalOpen) return null
-
return (
-
-
-
퀴즈를 그만두시겠어요?
-
-
{totalProblem - currentProblem}
-
문제밖에 남지 않았어요!
+
+
+
+
퀴즈를 그만두시겠어요?
+
+
+ {totalProblem - currentProblem}
+
+
문제밖에 남지 않았어요!
+
+
+ 지금 그만두면 다시 처음부터 진행해야해요.
+
- 지금 그만두면 다시 처음부터 진행해야해요.
-
-
-
-
-
-
-
+
+
+
+
+
+
)
}