+
+export const Bottom_Modal_Confirm: Story = {
+ render: () => {
+ const [{ isOpen }, setIsOpen] = useArgs()
+
+ const onClose = () => {
+ setIsOpen({ isOpen: false })
+ }
+ return (
+
+
+
+ }>
+
+
+ 링크가 복사되었습니다!
+
+ {'POLABO를\n지인들에게도 알려주세요!'}
+
+
+
+
+
+
+
+
+ )
+ },
+}
+
+export const Bottom_Modal_Confirm_Cancel: Story = {
+ render: () => {
+ const [{ isOpen }, setIsOpen] = useArgs()
+
+ const onClose = () => {
+ setIsOpen({ isOpen: false })
+ }
+ return (
+
+
+
+ }>
+
+
+ 링크가 복사되었습니다!
+
+ {'POLABO를\n지인들에게도 알려주세요!'}
+
+
+
+
+
+
+
+
+ )
+ },
+}
+
+export const Center_Modal_Confirm: Story = {
+ render: () => {
+ const [{ isOpen }, setIsOpen] = useArgs()
+
+ const onClose = () => {
+ setIsOpen({ isOpen: false })
+ }
+ return (
+
+
+
+ }>
+
+
+ 링크가 복사되었습니다!
+
+ {'POLABO를\n지인들에게도 알려주세요!'}
+
+
+
+
+
+
+
+
+ )
+ },
+}
+
+export const Center_Modal_Confirm_Cancel: Story = {
+ render: () => {
+ const [{ isOpen }, setIsOpen] = useArgs()
+
+ const onClose = () => {
+ setIsOpen({ isOpen: false })
+ }
+ return (
+
+
+
+ }>
+
+
+ 링크가 복사되었습니다!
+
+ {'POLABO를\n지인들에게도 알려주세요!'}
+
+
+
+
+
+
+
+
+ )
+ },
+}
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
new file mode 100644
index 0000000..6720404
--- /dev/null
+++ b/src/components/Modal/index.tsx
@@ -0,0 +1,225 @@
+'use client'
+
+import React, {
+ createContext,
+ ReactNode,
+ useContext,
+ useEffect,
+ useMemo,
+ useState,
+} from 'react'
+import ReactDOM from 'react-dom'
+import Close from 'public/icons/close.svg'
+import Button from '@/components/Button'
+
+interface ModalContextProps {
+ isVisible: boolean
+ onClose: () => void
+}
+
+const ModalContext = createContext({
+ isVisible: false,
+ onClose: () => {},
+})
+
+const ModalOverlay = ({
+ children,
+ handleTransitionEnd,
+}: {
+ children: ReactNode
+ handleTransitionEnd: () => void
+}) => {
+ const { isVisible, onClose } = useContext(ModalContext)
+
+ const handleClick = (event: React.MouseEvent) => {
+ if (event.target === event.currentTarget) {
+ onClose()
+ }
+ }
+
+ return (
+
+ {children}
+
+ )
+}
+
+interface ModalProps {
+ isOpen: boolean
+ onClose: () => void
+ children: ReactNode
+}
+
+function Modal({ isOpen, onClose, children }: ModalProps) {
+ const [isVisible, setIsVisible] = useState(false)
+
+ useEffect(() => {
+ setIsVisible(isOpen)
+ }, [isOpen])
+
+ const handleTransitionEnd = () => {
+ if (!isVisible) {
+ onClose()
+ }
+ }
+
+ const context = useMemo(
+ () => ({
+ isVisible,
+ onClose: () => setIsVisible(false),
+ }),
+ [isVisible, setIsVisible],
+ )
+
+ return isOpen
+ ? ReactDOM.createPortal(
+
+
+ {children}
+
+ ,
+ document.getElementById('modal-root') as HTMLElement,
+ )
+ : null
+}
+
+const CenterModal = ({
+ icon,
+ children,
+}: {
+ icon: ReactNode
+ children: ReactNode
+}) => {
+ return (
+
+ {icon && (
+
+ {icon}
+
+ )}
+ {children}
+
+ {icon && (
+
{icon}
+ )}
+ {children}
+
+ {children}
+
+ )
+}
+
+const ModalBodyTitle = ({ children }: { children: ReactNode }) => {
+ return (
+
+ {children}
+
+ )
+}
+
+const ModalBodyContent = ({ children }: { children: ReactNode }) => {
+ return (
+
+ {children}
+
+ )
+}
+
+const ModalFooter = ({ children }: { children: ReactNode }) => {
+ return {children}
+}
+
+const ModalFooterConfirm = ({
+ confirmText,
+ onConfirm = () => {},
+}: {
+ confirmText: string
+ onConfirm?: () => void
+}) => {
+ const { onClose } = useContext(ModalContext)
+
+ const clickHandler = () => {
+ onClose()
+ onConfirm()
+ }
+
+ return (
+
+ )
+}
+
+const ModalFooterConfirmCancel = ({
+ cancelText,
+ confirmText,
+ onConfirm = () => {},
+}: {
+ cancelText: string
+ confirmText: string
+ onConfirm?: () => void
+}) => {
+ const { onClose } = useContext(ModalContext)
+
+ const clickHandler = () => {
+ onClose()
+ onConfirm()
+ }
+
+ return (
+ <>
+
+
+
+ )
+}
+
+Modal.CenterModal = CenterModal
+Modal.BottomModal = BottomModal
+Modal.Close = ModalClose
+Modal.Body = ModalBody
+Modal.BodyTitle = ModalBodyTitle
+Modal.BodyContent = ModalBodyContent
+Modal.Footer = ModalFooter
+Modal.FooterConfirm = ModalFooterConfirm
+Modal.FooterConfirmCancel = ModalFooterConfirmCancel
+
+export default Modal
diff --git a/src/components/TagButton/index.tsx b/src/components/TagButton/index.tsx
index 7ae6202..3a5ce33 100644
--- a/src/components/TagButton/index.tsx
+++ b/src/components/TagButton/index.tsx
@@ -8,9 +8,9 @@ interface TagButtonProps extends React.ButtonHTMLAttributes {
}
function TagButton({
- className,
children,
- isSubmit,
+ className = '',
+ isSubmit = false,
disabled,
size,
...props
@@ -43,9 +43,4 @@ function TagButton({
)
}
-TagButton.defaultProps = {
- className: '',
- isSubmit: false,
-}
-
export default TagButton