From d3aee9e1ae14b4d3dd04d4df43d17b28894d9a25 Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Fri, 3 Nov 2023 16:38:52 +0900 Subject: [PATCH 01/22] =?UTF-8?q?feat:=20confirm=20provider=20=EB=BC=88?= =?UTF-8?q?=EB=8C=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ConfirmModal/ConfirmModal.tsx | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx new file mode 100644 index 00000000..274fd9a5 --- /dev/null +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx @@ -0,0 +1,56 @@ +import { createContext, useState } from 'react'; +import { createPortal } from 'react-dom'; +import { Flex } from 'shook-layout'; +import styled from 'styled-components'; +import type { ReactNode } from 'react'; + +const ConfirmContext = createContext(null); + +const Backdrop = styled.div``; +const ContainerFlex = styled(Flex)``; +const ButtonFlex = styled(Flex)``; +const Title = styled.header``; +const Content = styled.div``; +const CancelButton = styled.button``; +const ConfirmButton = styled.button``; + +interface ModalState { + title: string; + content: ReactNode; + cancelName: string; + confirmName: string; +} + +const ConfirmProvider = (children: ReactNode) => { + const [isOpen, setIsOpen] = useState(false); + const [modalState, setModalState] = useState({ + title: '', + content: '', + cancelName: '닫기', + confirmName: '확인', + }); + const { title, content, cancelName, confirmName } = modalState; + + return ( + + {children} + {isOpen && + createPortal( + <> + + + {title} + {content} + + {cancelName} + {confirmName} + + + , + document.body + )} + + ); +}; + +export default ConfirmProvider; From 3a8246eb3fd7981a1014cdd37bc3b64b3f27ea0b Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Fri, 3 Nov 2023 18:31:34 +0900 Subject: [PATCH 02/22] =?UTF-8?q?feat:=20confirm=20modal=20=EC=88=98?= =?UTF-8?q?=EB=9D=BD=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ConfirmModal/ConfirmModal.tsx | 51 ++++++++++++++++--- 1 file changed, 45 insertions(+), 6 deletions(-) diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx index 274fd9a5..4130abbe 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx @@ -4,7 +4,9 @@ import { Flex } from 'shook-layout'; import styled from 'styled-components'; import type { ReactNode } from 'react'; -const ConfirmContext = createContext(null); +const ConfirmContext = createContext Promise; +}>(null); const Backdrop = styled.div``; const ContainerFlex = styled(Flex)``; @@ -17,12 +19,24 @@ const ConfirmButton = styled.button``; interface ModalState { title: string; content: ReactNode; - cancelName: string; - confirmName: string; + cancelName?: string; + confirmName?: string; } +type Resolver = (value: T) => void; + +const createPromise = () => { + let resolver: Resolver | null = null; + const promise = new Promise((resolve) => { + resolver = resolve; + }); + + return { promise, resolver }; +}; + const ConfirmProvider = (children: ReactNode) => { const [isOpen, setIsOpen] = useState(false); + const [resolve, setResolve] = useState<((value: boolean) => void) | null>(null); const [modalState, setModalState] = useState({ title: '', content: '', @@ -31,8 +45,33 @@ const ConfirmProvider = (children: ReactNode) => { }); const { title, content, cancelName, confirmName } = modalState; + const getConfirmation = ({ + cancelName = '닫기', + confirmName = '확인', + ...restState + }: ModalState): Promise => { + const { promise, resolver } = createPromise(); + setResolve(resolver); + setModalState({ + cancelName, + confirmName, + ...restState, + }); + setIsOpen(true); + + return promise; + }; + + const onClick = (status: boolean) => { + setIsOpen(false); + + if (resolve) { + resolve(status); + } + }; + return ( - + {children} {isOpen && createPortal( @@ -42,8 +81,8 @@ const ConfirmProvider = (children: ReactNode) => { {title} {content} - {cancelName} - {confirmName} + onClick(false)}>{cancelName} + onClick(true)}>{confirmName} , From 31ecdd03c1251d3699b05e2d8e9631629b00030a Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Sat, 4 Nov 2023 21:06:57 +0900 Subject: [PATCH 03/22] =?UTF-8?q?feat:=20confirmModal=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EB=B0=8F=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ConfirmModal/ConfirmModal.tsx | 172 ++++++++++-------- 1 file changed, 94 insertions(+), 78 deletions(-) diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx index 4130abbe..c59253c7 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx @@ -1,95 +1,111 @@ -import { createContext, useState } from 'react'; -import { createPortal } from 'react-dom'; +import { useEffect } from 'react'; import { Flex } from 'shook-layout'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; +import Spacing from '../Spacing'; import type { ReactNode } from 'react'; -const ConfirmContext = createContext Promise; -}>(null); - -const Backdrop = styled.div``; -const ContainerFlex = styled(Flex)``; -const ButtonFlex = styled(Flex)``; -const Title = styled.header``; -const Content = styled.div``; -const CancelButton = styled.button``; -const ConfirmButton = styled.button``; - -interface ModalState { +interface ConfirmModalProps { title: string; content: ReactNode; - cancelName?: string; - confirmName?: string; + cancelName: string; + confirmName: string; + onCancel: () => void; + onConfirm: () => void; + onKeyDown: (event: KeyboardEvent) => void; } -type Resolver = (value: T) => void; +const ConfirmModal = ({ + title, + content, + cancelName, + confirmName, + onCancel, + onConfirm, + onKeyDown, +}: ConfirmModalProps) => { + useEffect(() => { + document.addEventListener('keydown', onKeyDown); + document.body.style.overflow = 'hidden'; -const createPromise = () => { - let resolver: Resolver | null = null; - const promise = new Promise((resolve) => { - resolver = resolve; - }); + return () => { + document.removeEventListener('keydown', onKeyDown); + document.body.style.overflow = 'auto'; + }; + }, []); - return { promise, resolver }; + return ( + <> + + + {title} + + {content} + + + {cancelName} + {confirmName} + + + + ); }; -const ConfirmProvider = (children: ReactNode) => { - const [isOpen, setIsOpen] = useState(false); - const [resolve, setResolve] = useState<((value: boolean) => void) | null>(null); - const [modalState, setModalState] = useState({ - title: '', - content: '', - cancelName: '닫기', - confirmName: '확인', - }); - const { title, content, cancelName, confirmName } = modalState; +export default ConfirmModal; - const getConfirmation = ({ - cancelName = '닫기', - confirmName = '확인', - ...restState - }: ModalState): Promise => { - const { promise, resolver } = createPromise(); - setResolve(resolver); - setModalState({ - cancelName, - confirmName, - ...restState, - }); - setIsOpen(true); +const Backdrop = styled.div` + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; - return promise; - }; + width: 100%; + height: 100%; + margin: 0; + padding: 0; - const onClick = (status: boolean) => { - setIsOpen(false); + background-color: rgba(0, 0, 0, 0.7); +`; - if (resolve) { - resolve(status); - } - }; +const Container = styled.section` + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); - return ( - - {children} - {isOpen && - createPortal( - <> - - - {title} - {content} - - onClick(false)}>{cancelName} - onClick(true)}>{confirmName} - - - , - document.body - )} - - ); -}; + min-width: 300px; + margin: 0 auto; + padding: 24px; + + color: #ffffff; + + background-color: #17171c; + border: none; + border-radius: 16px; +`; +const ButtonFlex = styled(Flex)` + width: 100%; +`; +const Title = styled.header` + text-align: left; + font-size: 18px; +`; +const Content = styled.div``; + +const buttonStyle = css` + flex: 1; + height: 36px; + color: ${({ theme: { color } }) => color.white}; + width: 100%; + + border-radius: 10px; +`; -export default ConfirmProvider; +const CancelButton = styled.button` + background-color: ${({ theme: { color } }) => color.secondary}; + ${buttonStyle} +`; +const ConfirmButton = styled.button` + background-color: ${({ theme: { color } }) => color.primary}; + ${buttonStyle} +`; From 580124dc2d133e725cb15eb3722b12634dc62e62 Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Sat, 4 Nov 2023 21:09:00 +0900 Subject: [PATCH 04/22] =?UTF-8?q?feat:=20ConfirmProvider=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ConfirmModal/ConfirmModalProvider.tsx | 111 ++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx new file mode 100644 index 00000000..7b850b2f --- /dev/null +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx @@ -0,0 +1,111 @@ +/* eslint-disable react-hooks/exhaustive-deps */ +import { createContext, useCallback, useContext, useState } from 'react'; +import { createPortal } from 'react-dom'; +import ConfirmModal from './ConfirmModal'; +import type { ReactNode } from 'react'; + +const ConfirmContext = createContext Promise; +}>(null); + +interface ModalState { + title: string; + content: ReactNode; + cancelName?: string; + confirmName?: string; +} + +const ConfirmProvider = ({ children }: { children: ReactNode }) => { + const [isOpen, setIsOpen] = useState(false); + const [resolver, setResolver] = useState<{ + resolve: (value: boolean | PromiseLike) => void; + } | null>(null); + const [modalState, setModalState] = useState({ + title: '', + content: '', + cancelName: '닫기', + confirmName: '확인', + }); + const { title, content, cancelName, confirmName } = modalState; + + const confirm = async (modal: ModalState) => { + openModal(); + setModalState(modal); + + const promise = await new Promise((resolve) => { + setResolver({ resolve }); + }); + + return promise; + }; + + const closeModal = () => { + setIsOpen(false); + }; + + const openModal = () => { + setIsOpen(true); + }; + + const resolveConfirmation = (status: boolean) => { + if (!resolver) return; + + resolver.resolve(status); + }; + + const onCancel = useCallback(() => { + resolveConfirmation(false); + closeModal(); + }, []); + + const onConfirm = useCallback(() => { + resolveConfirmation(true); + closeModal(); + }, []); + + const onKeyDown = useCallback((event: KeyboardEvent) => { + const { key } = event; + if (key === 'Enter') { + event.preventDefault(); + resolveConfirmation(false); + closeModal(); + return; + } + + if (key === 'Escape') { + resolveConfirmation(false); + closeModal(); + return; + } + }, []); + + return ( + + {children} + {isOpen && + createPortal( + , + document.body + )} + + ); +}; + +export default ConfirmProvider; + +export const useConfirm = () => { + const contextValue = useContext(ConfirmContext); + if (!contextValue) { + throw new Error('ConfirmContext Provider 내부에서 사용 가능합니다.'); + } + + return contextValue; +}; From 3273fa708551a9027f8bf54b669452f80978a151 Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Sat, 4 Nov 2023 21:09:17 +0900 Subject: [PATCH 05/22] =?UTF-8?q?feat:=20ConfirmModal=20storybook=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ConfirmModal/ConfirmModal.stories.tsx | 67 +++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx new file mode 100644 index 00000000..a259f72f --- /dev/null +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx @@ -0,0 +1,67 @@ +import styled from 'styled-components'; +import ConfirmProvider, { useConfirm } from './ConfirmModalProvider'; +import type { Meta, StoryObj } from '@storybook/react'; + +const meta: Meta = { + title: 'shared/Confirm', + component: ConfirmProvider, + decorators: [ + (Story) => ( + + + + ), + ], +}; + +export default meta; + +type Story = StoryObj; + +export const Example: Story = { + render: () => { + const RegistrationModal = () => { + const { confirm } = useConfirm(); + + const clickModalBtn = async () => { + const isConfirmed = await confirm({ + title: '제목', + content: ( + <> +

도밥은 정말 도밥입니까?

+

코난은 정말 코난입니까?

+ + ), + }); + + console.log('isConfirmed', isConfirmed); + + if (isConfirmed) { + console.log('confirmed'); + return; + } + + console.log('denied'); + }; + + return ( + + + + ); + }; + + return ; + }, +}; + +const Body = styled.div` + height: 2400px; +`; + +const Button = styled.button` + color: white; + border: 2px solid white; + padding: 4px 11px; + border-radius: 4px; +`; From c25781df82115fe13d987cc840697d1de35a6fe8 Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Sun, 5 Nov 2023 11:18:10 +0900 Subject: [PATCH 06/22] =?UTF-8?q?feat:=20storybook=20=EC=98=88=EC=8B=9C=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ConfirmModal/ConfirmModal.stories.tsx | 35 +++++++++++++++---- 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx index a259f72f..c72b7294 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx @@ -1,5 +1,6 @@ import styled from 'styled-components'; -import ConfirmProvider, { useConfirm } from './ConfirmModalProvider'; +import ConfirmProvider from './ConfirmModalProvider'; +import { useConfirm } from './hooks/useConfirm'; import type { Meta, StoryObj } from '@storybook/react'; const meta: Meta = { @@ -23,30 +24,50 @@ export const Example: Story = { const RegistrationModal = () => { const { confirm } = useConfirm(); - const clickModalBtn = async () => { + const clickHiByeBtn = async () => { const isConfirmed = await confirm({ - title: '제목', + title: '하이바이 모달', content: ( <>

도밥은 정말 도밥입니까?

코난은 정말 코난입니까?

), + cancelName: '바이', + confirmName: '하이', }); - console.log('isConfirmed', isConfirmed); + if (isConfirmed) { + alert('confirmed'); + return; + } + + alert('denied'); + }; + + const clickOpenCloseBtn = async () => { + const isConfirmed = await confirm({ + title: '오쁜클로즈 모달', + content: ( + <> +

코난은 정말 코난입니까?

+

도밥은 정말 도밥입니까?

+ + ), + }); if (isConfirmed) { - console.log('confirmed'); + alert('confirmed'); return; } - console.log('denied'); + alert('denied'); }; return ( - + + ); }; From d526aa94b94f62823a67d24bee0546fb7b365498 Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Sun, 5 Nov 2023 11:18:28 +0900 Subject: [PATCH 07/22] =?UTF-8?q?refactor:=20useConfirm=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ConfirmModal/hooks/useConfirm.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 frontend/src/shared/components/ConfirmModal/hooks/useConfirm.ts diff --git a/frontend/src/shared/components/ConfirmModal/hooks/useConfirm.ts b/frontend/src/shared/components/ConfirmModal/hooks/useConfirm.ts new file mode 100644 index 00000000..4a01fa1a --- /dev/null +++ b/frontend/src/shared/components/ConfirmModal/hooks/useConfirm.ts @@ -0,0 +1,11 @@ +import { useContext } from 'react'; +import { ConfirmContext } from '../ConfirmModalProvider'; + +export const useConfirm = () => { + const contextValue = useContext(ConfirmContext); + if (!contextValue) { + throw new Error('ConfirmContext Provider 내부에서 사용 가능합니다.'); + } + + return contextValue; +}; From e38205065941d53b5a13d26d9060bf2ed08b7f60 Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Sun, 5 Nov 2023 11:19:07 +0900 Subject: [PATCH 08/22] =?UTF-8?q?refactor:=20confirm=20modal=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EC=9D=91=EC=A7=91=ED=95=98=EA=B8=B0=20=EC=9C=84?= =?UTF-8?q?=ED=95=B4=20useEffect=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ConfirmModal/ConfirmModal.tsx | 13 --------- .../ConfirmModal/ConfirmModalProvider.tsx | 28 +++++++++---------- 2 files changed, 14 insertions(+), 27 deletions(-) diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx index c59253c7..0135991f 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx @@ -1,4 +1,3 @@ -import { useEffect } from 'react'; import { Flex } from 'shook-layout'; import styled, { css } from 'styled-components'; import Spacing from '../Spacing'; @@ -11,7 +10,6 @@ interface ConfirmModalProps { confirmName: string; onCancel: () => void; onConfirm: () => void; - onKeyDown: (event: KeyboardEvent) => void; } const ConfirmModal = ({ @@ -21,18 +19,7 @@ const ConfirmModal = ({ confirmName, onCancel, onConfirm, - onKeyDown, }: ConfirmModalProps) => { - useEffect(() => { - document.addEventListener('keydown', onKeyDown); - document.body.style.overflow = 'hidden'; - - return () => { - document.removeEventListener('keydown', onKeyDown); - document.body.style.overflow = 'auto'; - }; - }, []); - return ( <> diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx index 7b850b2f..e2ff7d4b 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx @@ -1,10 +1,10 @@ /* eslint-disable react-hooks/exhaustive-deps */ -import { createContext, useCallback, useContext, useState } from 'react'; +import { createContext, useCallback, useEffect, useState } from 'react'; import { createPortal } from 'react-dom'; import ConfirmModal from './ConfirmModal'; import type { ReactNode } from 'react'; -const ConfirmContext = createContext Promise; }>(null); @@ -69,16 +69,26 @@ const ConfirmProvider = ({ children }: { children: ReactNode }) => { event.preventDefault(); resolveConfirmation(false); closeModal(); - return; } if (key === 'Escape') { resolveConfirmation(false); closeModal(); - return; } }, []); + useEffect(() => { + if (isOpen) { + document.addEventListener('keydown', onKeyDown); + document.body.style.overflow = 'hidden'; + } + + return () => { + document.removeEventListener('keydown', onKeyDown); + document.body.style.overflow = 'auto'; + }; + }, []); + return ( {children} @@ -91,7 +101,6 @@ const ConfirmProvider = ({ children }: { children: ReactNode }) => { confirmName={confirmName ?? '확인'} onCancel={onCancel} onConfirm={onConfirm} - onKeyDown={onKeyDown} />, document.body )} @@ -100,12 +109,3 @@ const ConfirmProvider = ({ children }: { children: ReactNode }) => { }; export default ConfirmProvider; - -export const useConfirm = () => { - const contextValue = useContext(ConfirmContext); - if (!contextValue) { - throw new Error('ConfirmContext Provider 내부에서 사용 가능합니다.'); - } - - return contextValue; -}; From a526142e2122f4b6627d1cb70d5e68ee286fb4e2 Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Sun, 5 Nov 2023 12:50:55 +0900 Subject: [PATCH 09/22] =?UTF-8?q?fix:=20promise=EC=97=90=EC=84=9C=20resolv?= =?UTF-8?q?e=20=ED=95=A8=EC=88=98=20=EC=83=81=ED=83=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20=EC=8B=A4=ED=8C=A8=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20?= =?UTF-8?q?ref=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ConfirmModal/ConfirmModalProvider.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx index e2ff7d4b..3de4659a 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx @@ -1,5 +1,5 @@ /* eslint-disable react-hooks/exhaustive-deps */ -import { createContext, useCallback, useEffect, useState } from 'react'; +import { createContext, useCallback, useEffect, useState, useRef } from 'react'; import { createPortal } from 'react-dom'; import ConfirmModal from './ConfirmModal'; import type { ReactNode } from 'react'; @@ -17,7 +17,7 @@ interface ModalState { const ConfirmProvider = ({ children }: { children: ReactNode }) => { const [isOpen, setIsOpen] = useState(false); - const [resolver, setResolver] = useState<{ + const resolverRef = useRef<{ resolve: (value: boolean | PromiseLike) => void; } | null>(null); const [modalState, setModalState] = useState({ @@ -28,12 +28,12 @@ const ConfirmProvider = ({ children }: { children: ReactNode }) => { }); const { title, content, cancelName, confirmName } = modalState; - const confirm = async (modal: ModalState) => { + const confirm = (modal: ModalState) => { openModal(); setModalState(modal); - const promise = await new Promise((resolve) => { - setResolver({ resolve }); + const promise = new Promise((resolve) => { + resolverRef.current = { resolve }; }); return promise; @@ -48,9 +48,9 @@ const ConfirmProvider = ({ children }: { children: ReactNode }) => { }; const resolveConfirmation = (status: boolean) => { - if (!resolver) return; - - resolver.resolve(status); + if (resolverRef?.current) { + resolverRef.current.resolve(status); + } }; const onCancel = useCallback(() => { From 1179f3557464614bf4c23cca94bcb8921342f8a5 Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Sun, 5 Nov 2023 12:51:19 +0900 Subject: [PATCH 10/22] =?UTF-8?q?refactor:=20createPortal=EB=A5=BC=20Confi?= =?UTF-8?q?rmModal=20=EB=82=B4=EB=B6=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/shared/components/ConfirmModal/ConfirmModal.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx index 0135991f..5a25aa03 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx @@ -1,3 +1,4 @@ +import { createPortal } from 'react-dom'; import { Flex } from 'shook-layout'; import styled, { css } from 'styled-components'; import Spacing from '../Spacing'; @@ -20,7 +21,7 @@ const ConfirmModal = ({ onCancel, onConfirm, }: ConfirmModalProps) => { - return ( + return createPortal( <> @@ -33,7 +34,8 @@ const ConfirmModal = ({ {confirmName} - + , + document.body ); }; From dbc1c32de1aca7dd60768062fd9e82dcc6ab8111 Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Sun, 5 Nov 2023 13:01:25 +0900 Subject: [PATCH 11/22] =?UTF-8?q?refactor:=20=EC=9D=98=EB=AF=B8=EC=9E=88?= =?UTF-8?q?=EB=8A=94=20=EB=84=A4=EC=9D=B4=EB=B0=8D=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ConfirmModal/ConfirmModal.stories.tsx | 9 +++--- .../components/ConfirmModal/ConfirmModal.tsx | 16 +++++----- .../ConfirmModal/ConfirmModalProvider.tsx | 29 ++++++++++--------- 3 files changed, 28 insertions(+), 26 deletions(-) diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx index c72b7294..8c64a52b 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx @@ -21,7 +21,7 @@ type Story = StoryObj; export const Example: Story = { render: () => { - const RegistrationModal = () => { + const Modal = () => { const { confirm } = useConfirm(); const clickHiByeBtn = async () => { @@ -33,8 +33,8 @@ export const Example: Story = {

코난은 정말 코난입니까?

), - cancelName: '바이', - confirmName: '하이', + denial: '바이', + confirmation: '하이', }); if (isConfirmed) { @@ -45,6 +45,7 @@ export const Example: Story = { alert('denied'); }; + // denial과 confirmation 기본값은 '닫기'와 '확인'입니다. const clickOpenCloseBtn = async () => { const isConfirmed = await confirm({ title: '오쁜클로즈 모달', @@ -72,7 +73,7 @@ export const Example: Story = { ); }; - return ; + return ; }, }; diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx index 5a25aa03..3c9d5b40 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx @@ -7,18 +7,18 @@ import type { ReactNode } from 'react'; interface ConfirmModalProps { title: string; content: ReactNode; - cancelName: string; - confirmName: string; - onCancel: () => void; + denial: string; + confirmation: string; + onDeny: () => void; onConfirm: () => void; } const ConfirmModal = ({ title, content, - cancelName, - confirmName, - onCancel, + denial, + confirmation, + onDeny, onConfirm, }: ConfirmModalProps) => { return createPortal( @@ -30,8 +30,8 @@ const ConfirmModal = ({ {content} - {cancelName} - {confirmName} + {denial} + {confirmation} , diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx index 3de4659a..56a731e0 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx @@ -5,14 +5,14 @@ import ConfirmModal from './ConfirmModal'; import type { ReactNode } from 'react'; export const ConfirmContext = createContext Promise; + confirm: (modalState: ModalContents) => Promise; }>(null); -interface ModalState { +interface ModalContents { title: string; content: ReactNode; - cancelName?: string; - confirmName?: string; + denial?: string; + confirmation?: string; } const ConfirmProvider = ({ children }: { children: ReactNode }) => { @@ -20,17 +20,18 @@ const ConfirmProvider = ({ children }: { children: ReactNode }) => { const resolverRef = useRef<{ resolve: (value: boolean | PromiseLike) => void; } | null>(null); - const [modalState, setModalState] = useState({ + const [modalContents, setModalContents] = useState({ title: '', content: '', - cancelName: '닫기', - confirmName: '확인', + denial: '닫기', + confirmation: '확인', }); - const { title, content, cancelName, confirmName } = modalState; + const { title, content, denial, confirmation } = modalContents; - const confirm = (modal: ModalState) => { + // ContextAPI를 통해 confirm 함수만 제공합니다. + const confirm = (contents: ModalContents) => { openModal(); - setModalState(modal); + setModalContents(contents); const promise = new Promise((resolve) => { resolverRef.current = { resolve }; @@ -53,7 +54,7 @@ const ConfirmProvider = ({ children }: { children: ReactNode }) => { } }; - const onCancel = useCallback(() => { + const onDeny = useCallback(() => { resolveConfirmation(false); closeModal(); }, []); @@ -97,9 +98,9 @@ const ConfirmProvider = ({ children }: { children: ReactNode }) => { , document.body From 2af5e0ba3be32c339b089befc7256aff8719764d Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Tue, 7 Nov 2023 02:14:45 +0900 Subject: [PATCH 12/22] =?UTF-8?q?fix:=20keydown=20=EC=9D=B4=EB=B2=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=A0=81=EC=9A=A9=EB=90=98=EC=A7=80=20=EC=95=8A?= =?UTF-8?q?=EB=8A=94=20=ED=98=84=EC=83=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/shared/components/ConfirmModal/ConfirmModalProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx index 56a731e0..0a49d3f8 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx @@ -88,7 +88,7 @@ const ConfirmProvider = ({ children }: { children: ReactNode }) => { document.removeEventListener('keydown', onKeyDown); document.body.style.overflow = 'auto'; }; - }, []); + }, [isOpen]); return ( From 6441a12d4d4ea321aab83e16cb1d20783c96ff96 Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Tue, 7 Nov 2023 02:19:29 +0900 Subject: [PATCH 13/22] =?UTF-8?q?style:=20style=20lint=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9=20=EB=B0=8F=20=EA=B0=9C=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../features/killingParts/components/RegisterPart.tsx | 1 - .../components/ConfirmModal/ConfirmModal.stories.tsx | 2 +- .../shared/components/ConfirmModal/ConfirmModal.tsx | 10 ++++++++-- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/frontend/src/features/killingParts/components/RegisterPart.tsx b/frontend/src/features/killingParts/components/RegisterPart.tsx index 8e72cc36..e5a38841 100644 --- a/frontend/src/features/killingParts/components/RegisterPart.tsx +++ b/frontend/src/features/killingParts/components/RegisterPart.tsx @@ -75,7 +75,6 @@ const RegisterButton = styled.button` @media (min-width: ${({ theme }) => theme.breakPoints.md}) { padding: 11px 15px; - font-size: 18px; } `; diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx index 8c64a52b..8edc75be 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx @@ -82,8 +82,8 @@ const Body = styled.div` `; const Button = styled.button` + padding: 4px 11px; color: white; border: 2px solid white; - padding: 4px 11px; border-radius: 4px; `; diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx index 3c9d5b40..3bd57690 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx @@ -72,20 +72,25 @@ const Container = styled.section` border: none; border-radius: 16px; `; + const ButtonFlex = styled(Flex)` width: 100%; `; + const Title = styled.header` - text-align: left; font-size: 18px; + text-align: left; `; + const Content = styled.div``; const buttonStyle = css` flex: 1; + + width: 100%; height: 36px; + color: ${({ theme: { color } }) => color.white}; - width: 100%; border-radius: 10px; `; @@ -94,6 +99,7 @@ const CancelButton = styled.button` background-color: ${({ theme: { color } }) => color.secondary}; ${buttonStyle} `; + const ConfirmButton = styled.button` background-color: ${({ theme: { color } }) => color.primary}; ${buttonStyle} From 3f60df511e867866a687968d2a006f2761173850 Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Tue, 14 Nov 2023 09:59:34 +0900 Subject: [PATCH 14/22] =?UTF-8?q?chore:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/practice.js | 1 - 1 file changed, 1 deletion(-) delete mode 100644 frontend/practice.js diff --git a/frontend/practice.js b/frontend/practice.js deleted file mode 100644 index b85d61ba..00000000 --- a/frontend/practice.js +++ /dev/null @@ -1 +0,0 @@ -const a = new Date(); //? From a225ac0c28b53abc88ea4a876254dd4e06b7ae32 Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Tue, 14 Nov 2023 09:59:52 +0900 Subject: [PATCH 15/22] =?UTF-8?q?fix:=20resolverRef=20=ED=83=80=EC=9E=85?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/shared/components/ConfirmModal/ConfirmModalProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx index 0a49d3f8..f2b2a194 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx @@ -18,7 +18,7 @@ interface ModalContents { const ConfirmProvider = ({ children }: { children: ReactNode }) => { const [isOpen, setIsOpen] = useState(false); const resolverRef = useRef<{ - resolve: (value: boolean | PromiseLike) => void; + resolve: (value: boolean) => void; } | null>(null); const [modalContents, setModalContents] = useState({ title: '', From aab67ba790e6e888271e4eadab34a389c4c5cdd8 Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Tue, 14 Nov 2023 10:02:38 +0900 Subject: [PATCH 16/22] =?UTF-8?q?feat:=20=EB=8B=AB=EA=B8=B0,=20=EC=88=98?= =?UTF-8?q?=EB=9D=BD=20button=EC=97=90=20type=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/shared/components/ConfirmModal/ConfirmModal.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx index 3bd57690..d33d35ac 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx @@ -30,8 +30,12 @@ const ConfirmModal = ({ {content} - {denial} - {confirmation} + + {denial} + + + {confirmation} + , From 67963b6ee2e0ae9ac15c5abd973385a682137fea Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Tue, 14 Nov 2023 10:03:25 +0900 Subject: [PATCH 17/22] =?UTF-8?q?refactor:=20=EB=84=A4=EC=9D=B4=EB=B0=8D?= =?UTF-8?q?=20cancel=EC=97=90=EC=84=9C=20denial=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/shared/components/ConfirmModal/ConfirmModal.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx index d33d35ac..9f9a9e57 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx @@ -30,9 +30,9 @@ const ConfirmModal = ({ {content} - + {denial} - + {confirmation} @@ -99,7 +99,7 @@ const buttonStyle = css` border-radius: 10px; `; -const CancelButton = styled.button` +const DenialButton = styled.button` background-color: ${({ theme: { color } }) => color.secondary}; ${buttonStyle} `; From b1ad8a7068fb52e829b188ac41a1d59cbd2f99ba Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Tue, 14 Nov 2023 11:27:22 +0900 Subject: [PATCH 18/22] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=20=EC=97=B4?= =?UTF-8?q?=EB=A6=B4=20=EB=95=8C=20=EB=B0=94=EB=A1=9C=20title=EB=A1=9C=20?= =?UTF-8?q?=ED=8F=AC=EC=BB=A4=EC=8A=A4=20=EC=9D=B4=EB=8F=99=ED=95=A0=20?= =?UTF-8?q?=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/shared/components/ConfirmModal/ConfirmModal.tsx | 8 +++++++- .../components/ConfirmModal/ConfirmModalProvider.tsx | 9 +-------- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx index 9f9a9e57..74f8fe6a 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx @@ -21,11 +21,17 @@ const ConfirmModal = ({ onDeny, onConfirm, }: ConfirmModalProps) => { + const focusTitle: React.RefCallback = (dom) => { + dom && dom.focus(); + }; + return createPortal( <> - {title} + + {title} + {content} diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx index f2b2a194..e5aa7a6d 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx @@ -64,14 +64,7 @@ const ConfirmProvider = ({ children }: { children: ReactNode }) => { closeModal(); }, []); - const onKeyDown = useCallback((event: KeyboardEvent) => { - const { key } = event; - if (key === 'Enter') { - event.preventDefault(); - resolveConfirmation(false); - closeModal(); - } - + const onKeyDown = useCallback(({ key }: KeyboardEvent) => { if (key === 'Escape') { resolveConfirmation(false); closeModal(); From ac5d64c8bc494712a2db79a455d12625c96cba0c Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Thu, 16 Nov 2023 09:57:35 +0900 Subject: [PATCH 19/22] =?UTF-8?q?refactor:=20=EC=A4=91=EB=B3=B5=EB=90=9C?= =?UTF-8?q?=20createPortal=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/shared/components/ConfirmModal/ConfirmModal.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx index 74f8fe6a..3db8a380 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx @@ -1,4 +1,3 @@ -import { createPortal } from 'react-dom'; import { Flex } from 'shook-layout'; import styled, { css } from 'styled-components'; import Spacing from '../Spacing'; @@ -25,7 +24,7 @@ const ConfirmModal = ({ dom && dom.focus(); }; - return createPortal( + return ( <> @@ -44,8 +43,7 @@ const ConfirmModal = ({ - , - document.body + ); }; From f27bd28347b3f046f83ba67b405a56a8378fb2ae Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Fri, 17 Nov 2023 09:21:36 +0900 Subject: [PATCH 20/22] =?UTF-8?q?refactor:=20theme=20=ED=99=9C=EC=9A=A9?= =?UTF-8?q?=ED=95=98=EC=97=AC=20=EC=83=89=EC=83=81=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx index 3db8a380..44ea2f3a 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx @@ -74,9 +74,9 @@ const Container = styled.section` margin: 0 auto; padding: 24px; - color: #ffffff; + color: ${({ theme: color }) => color.white}; - background-color: #17171c; + background-color: ${({ theme: color }) => color.black300}; border: none; border-radius: 16px; `; From a6eb162e7738cc3146373d022a8f7700e2938e2d Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Fri, 17 Nov 2023 09:29:38 +0900 Subject: [PATCH 21/22] =?UTF-8?q?refactor:=20=EC=A0=84=EB=B0=98=EC=A0=81?= =?UTF-8?q?=EC=9D=B8=20ConfirmModal=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ConfirmProvider > ConfirmModalProvider - useConfirm > useConfirmContext - confirm > confirmPopup --- .../ConfirmModal/ConfirmModal.stories.tsx | 20 +++++++++---------- .../ConfirmModal/ConfirmModalProvider.tsx | 10 +++++----- .../{useConfirm.ts => useConfirmContext.ts} | 2 +- 3 files changed, 16 insertions(+), 16 deletions(-) rename frontend/src/shared/components/ConfirmModal/hooks/{useConfirm.ts => useConfirmContext.ts} (87%) diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx index 8edc75be..9bc0284e 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx @@ -1,31 +1,31 @@ import styled from 'styled-components'; -import ConfirmProvider from './ConfirmModalProvider'; -import { useConfirm } from './hooks/useConfirm'; +import ConfirmModalProvider from './ConfirmModalProvider'; +import { useConfirmContext } from './hooks/useConfirmContext'; import type { Meta, StoryObj } from '@storybook/react'; -const meta: Meta = { +const meta: Meta = { title: 'shared/Confirm', - component: ConfirmProvider, + component: ConfirmModalProvider, decorators: [ (Story) => ( - + - + ), ], }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Example: Story = { render: () => { const Modal = () => { - const { confirm } = useConfirm(); + const { confirmPopup } = useConfirmContext(); const clickHiByeBtn = async () => { - const isConfirmed = await confirm({ + const isConfirmed = await confirmPopup({ title: '하이바이 모달', content: ( <> @@ -47,7 +47,7 @@ export const Example: Story = { // denial과 confirmation 기본값은 '닫기'와 '확인'입니다. const clickOpenCloseBtn = async () => { - const isConfirmed = await confirm({ + const isConfirmed = await confirmPopup({ title: '오쁜클로즈 모달', content: ( <> diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx index e5aa7a6d..3a6b0145 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx @@ -5,7 +5,7 @@ import ConfirmModal from './ConfirmModal'; import type { ReactNode } from 'react'; export const ConfirmContext = createContext Promise; + confirmPopup: (modalState: ModalContents) => Promise; }>(null); interface ModalContents { @@ -15,7 +15,7 @@ interface ModalContents { confirmation?: string; } -const ConfirmProvider = ({ children }: { children: ReactNode }) => { +const ConfirmModalProvider = ({ children }: { children: ReactNode }) => { const [isOpen, setIsOpen] = useState(false); const resolverRef = useRef<{ resolve: (value: boolean) => void; @@ -29,7 +29,7 @@ const ConfirmProvider = ({ children }: { children: ReactNode }) => { const { title, content, denial, confirmation } = modalContents; // ContextAPI를 통해 confirm 함수만 제공합니다. - const confirm = (contents: ModalContents) => { + const confirmPopup = (contents: ModalContents) => { openModal(); setModalContents(contents); @@ -84,7 +84,7 @@ const ConfirmProvider = ({ children }: { children: ReactNode }) => { }, [isOpen]); return ( - + {children} {isOpen && createPortal( @@ -102,4 +102,4 @@ const ConfirmProvider = ({ children }: { children: ReactNode }) => { ); }; -export default ConfirmProvider; +export default ConfirmModalProvider; diff --git a/frontend/src/shared/components/ConfirmModal/hooks/useConfirm.ts b/frontend/src/shared/components/ConfirmModal/hooks/useConfirmContext.ts similarity index 87% rename from frontend/src/shared/components/ConfirmModal/hooks/useConfirm.ts rename to frontend/src/shared/components/ConfirmModal/hooks/useConfirmContext.ts index 4a01fa1a..e9bcfc94 100644 --- a/frontend/src/shared/components/ConfirmModal/hooks/useConfirm.ts +++ b/frontend/src/shared/components/ConfirmModal/hooks/useConfirmContext.ts @@ -1,7 +1,7 @@ import { useContext } from 'react'; import { ConfirmContext } from '../ConfirmModalProvider'; -export const useConfirm = () => { +export const useConfirmContext = () => { const contextValue = useContext(ConfirmContext); if (!contextValue) { throw new Error('ConfirmContext Provider 내부에서 사용 가능합니다.'); From a2fb196f559daa7e1e8d3c35a2ff531f4bc849e6 Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Fri, 17 Nov 2023 09:32:46 +0900 Subject: [PATCH 22/22] =?UTF-8?q?fix:=20theme=20color=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=20=EC=8B=9C=20=EA=B0=9D=EC=B2=B4=EB=B6=84=ED=95=B4=ED=95=A0?= =?UTF-8?q?=EB=8B=B9=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx index 44ea2f3a..d8920af3 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx @@ -74,9 +74,9 @@ const Container = styled.section` margin: 0 auto; padding: 24px; - color: ${({ theme: color }) => color.white}; + color: ${({ theme: { color } }) => color.white}; - background-color: ${({ theme: color }) => color.black300}; + background-color: ${({ theme: { color } }) => color.black300}; border: none; border-radius: 16px; `;