Refactor/#570 confirmPopup을 overlay를 활용하도록 변경 (#571)

* refactor: Modal을 활용하여 ConfirmModal 리팩터링 * feat: overlay를 활용한 useConfirmModal 훅 구현 및 ConfirmModalContext 제거 * feat: useConfirmContext를 useConfirmModal로 변경
woowacourse-teams · May 13, 2024 · ed0666b · ed0666b
1 parent 4c6a317
commit ed0666b
Show file tree

Hide file tree

Showing 9 changed files with 97 additions and 196 deletions.
diff --git a/frontend/src/features/killingParts/components/RegisterPart.tsx b/frontend/src/features/killingParts/components/RegisterPart.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { useAuthContext } from '@/features/auth/components/AuthProvider';
 import useCollectingPartContext from '@/features/killingParts/hooks/useCollectingPartContext';
 import useVideoPlayerContext from '@/features/youtube/hooks/useVideoPlayerContext';
-import { useConfirmContext } from '@/shared/components/ConfirmModal/hooks/useConfirmContext';
+import { useConfirmModal } from '@/shared/components/ConfirmModal/hooks/useConfirmModal';
 import Spacing from '@/shared/components/Spacing';
 import { useMutation } from '@/shared/hooks/useMutation';
 import { toPlayingTimeText } from '@/shared/utils/convertTime';
@@ -13,7 +13,7 @@ const RegisterPart = () => {
   const { user } = useAuthContext();
   const { interval, partStartTime, songId } = useCollectingPartContext();
   const video = useVideoPlayerContext();
-  const { confirmPopup } = useConfirmContext();
+  const { openConfirmModal } = useConfirmModal();
   const voteTimeText = toPlayingTimeText(partStartTime, partStartTime + interval);
   const { mutateData: createKillingPart } = useMutation(postKillingPart);
   const navigate = useNavigate();
@@ -24,7 +24,7 @@ const RegisterPart = () => {
   const submitKillingPart = async () => {
     video.pause();
 
-    const isConfirmed = await confirmPopup({
+    const isConfirmed = await openConfirmModal({
       title: `${user?.nickname}님의 파트 저장`,
       content: (
         <ContentContainer>

diff --git a/frontend/src/features/songs/components/KillingPartTrack.tsx b/frontend/src/features/songs/components/KillingPartTrack.tsx
@@ -8,7 +8,7 @@ import { useAuthContext } from '@/features/auth/components/AuthProvider';
 import LoginModal from '@/features/auth/components/LoginModal';
 import { deleteMemberParts } from '@/features/member/remotes/memberParts';
 import useVideoPlayerContext from '@/features/youtube/hooks/useVideoPlayerContext';
-import { useConfirmContext } from '@/shared/components/ConfirmModal/hooks/useConfirmContext';
+import { useConfirmModal } from '@/shared/components/ConfirmModal/hooks/useConfirmModal';
 import useTimerContext from '@/shared/components/Timer/hooks/useTimerContext';
 import useToastContext from '@/shared/components/Toast/hooks/useToastContext';
 import { GA_ACTIONS, GA_CATEGORIES } from '@/shared/constants/GAEventName';
@@ -45,7 +45,7 @@ const KillingPartTrack = ({
 }: KillingPartTrackProps) => {
   const { showToast } = useToastContext();
   const { seekTo, pause, playerState, videoPlayer } = useVideoPlayerContext();
-  const { confirmPopup } = useConfirmContext();
+  const { openConfirmModal } = useConfirmModal();
   const { heartIcon, toggleKillingPartLikes } = useKillingPartLikes({
     likeCount,
     likeStatus,
@@ -154,7 +154,7 @@ const KillingPartTrack = ({
   const { mutateData: deleteMemberPart } = useMutation(() => deleteMemberParts(partId));
 
   const handleClickDeletePart = async () => {
-    const isConfirmed = await confirmPopup({
+    const isConfirmed = await openConfirmModal({
       title: '내 파트 삭제',
       content: <h3>정말 삭제하시겠습니까?</h3>,
       confirmation: '삭제',

diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
-import ConfirmModalProvider from '@/shared/components/ConfirmModal/ConfirmModalProvider';
 import GlobalStyles from '@/shared/styles/GlobalStyles';
 import AuthProvider from './features/auth/components/AuthProvider';
 import { loadIFrameApi } from './features/youtube/remotes/loadIframeApi';
@@ -37,9 +36,7 @@ async function main() {
         <ThemeProvider theme={theme}>
           <ToastProvider>
             <QueryClientProvider client={queryClient}>
-              <ConfirmModalProvider>
-                <RouterProvider router={router} />
-              </ConfirmModalProvider>
+              <RouterProvider router={router} />
               <ReactQueryDevtools />
             </QueryClientProvider>
           </ToastProvider>

diff --git a/frontend/src/pages/EditProfilePage.tsx b/frontend/src/pages/EditProfilePage.tsx
@@ -4,14 +4,14 @@ import shookshook from '@/assets/icon/shookshook.svg';
 import { useAuthContext } from '@/features/auth/components/AuthProvider';
 import WITHDRAWAL_MESSAGE from '@/features/member/constants/withdrawalMessage';
 import { deleteMember } from '@/features/member/remotes/member';
-import { useConfirmContext } from '@/shared/components/ConfirmModal/hooks/useConfirmContext';
+import { useConfirmModal } from '@/shared/components/ConfirmModal/hooks/useConfirmModal';
 import Spacing from '@/shared/components/Spacing';
 import ROUTE_PATH from '@/shared/constants/path';
 import { useMutation } from '@/shared/hooks/useMutation';
 
 const EditProfilePage = () => {
   const { user, logout } = useAuthContext();
-  const { confirmPopup } = useConfirmContext();
+  const { openConfirmModal } = useConfirmModal();
   const { mutateData: withdrawal } = useMutation(deleteMember);
   const navigate = useNavigate();
 
@@ -21,7 +21,7 @@ const EditProfilePage = () => {
   }
 
   const handleClickWithdrawal = async () => {
-    const isConfirmed = await confirmPopup({
+    const isConfirmed = await openConfirmModal({
       title: '회원 탈퇴',
       content: <ModalContent>{WITHDRAWAL_MESSAGE}</ModalContent>,
       confirmation: '탈퇴',

diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx
@@ -1,31 +1,22 @@
 import styled from 'styled-components';
-import ConfirmModalProvider from './ConfirmModalProvider';
-import { useConfirmContext } from './hooks/useConfirmContext';
+import { useConfirmModal } from './hooks/useConfirmModal';
 import type { Meta, StoryObj } from '@storybook/react';
 
-const meta: Meta<typeof ConfirmModalProvider> = {
-  title: 'shared/Confirm',
-  component: ConfirmModalProvider,
-  decorators: [
-    (Story) => (
-      <ConfirmModalProvider>
-        <Story />
-      </ConfirmModalProvider>
-    ),
-  ],
+const meta: Meta = {
+  title: 'shared/ConfirmModal',
 };
 
 export default meta;
 
-type Story = StoryObj<typeof ConfirmModalProvider>;
+type Story = StoryObj;
 
 export const Example: Story = {
   render: () => {
     const Modal = () => {
-      const { confirmPopup } = useConfirmContext();
+      const { openConfirmModal } = useConfirmModal();
 
       const clickHiByeBtn = async () => {
-        const isConfirmed = await confirmPopup({
+        const isConfirmed = await openConfirmModal({
           title: '하이바이 모달',
           content: (
             <>
@@ -47,7 +38,7 @@ export const Example: Story = {
 
       // denial과 confirmation 기본값은 '닫기'와 '확인'입니다.
       const clickOpenCloseBtn = async () => {
-        const isConfirmed = await confirmPopup({
+        const isConfirmed = await openConfirmModal({
           title: '오쁜클로즈 모달',
           content: (
             <>

diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx
@@ -1,9 +1,12 @@
 import { Flex } from 'shook-layout';
 import styled, { css } from 'styled-components';
+import Modal from '../Modal/Modal';
 import Spacing from '../Spacing';
 import type { ReactNode } from 'react';
 
 interface ConfirmModalProps {
+  isOpen: boolean;
+  closeModal: () => void;
   title: string;
   content: ReactNode;
   denial: string;
@@ -13,6 +16,8 @@ interface ConfirmModalProps {
 }
 
 const ConfirmModal = ({
+  isOpen,
+  closeModal,
   title,
   content,
   denial,
@@ -25,62 +30,27 @@ const ConfirmModal = ({
   };
 
   return (
-    <>
-      <Backdrop role="dialog" aria-modal="true" />
-      <Container>
-        <Title ref={focusTitle} tabIndex={0}>
-          {title}
-        </Title>
-        <Spacing direction="vertical" size={10} />
-        <Content>{content}</Content>
-        <Spacing direction="vertical" size={10} />
-        <ButtonFlex $gap={16}>
-          <DenialButton type="button" onClick={onDeny}>
-            {denial}
-          </DenialButton>
-          <ConfirmButton type="button" onClick={onConfirm}>
-            {confirmation}
-          </ConfirmButton>
-        </ButtonFlex>
-      </Container>
-    </>
+    <Modal isOpen={isOpen} closeModal={closeModal}>
+      <Title ref={focusTitle} tabIndex={0}>
+        {title}
+      </Title>
+      <Spacing direction="vertical" size={10} />
+      <Content>{content}</Content>
+      <Spacing direction="vertical" size={10} />
+      <ButtonFlex $gap={16}>
+        <DenialButton type="button" onClick={onDeny}>
+          {denial}
+        </DenialButton>
+        <ConfirmButton type="button" onClick={onConfirm}>
+          {confirmation}
+        </ConfirmButton>
+      </ButtonFlex>
+    </Modal>
   );
 };
 
 export default ConfirmModal;
 
-const Backdrop = styled.div`
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-
-  background-color: rgba(0, 0, 0, 0.7);
-`;
-
-const Container = styled.section`
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  min-width: 320px;
-  margin: 0 auto;
-  padding: 24px;
-
-  color: ${({ theme: { color } }) => color.white};
-
-  background-color: ${({ theme: { color } }) => color.black300};
-  border: none;
-  border-radius: 16px;
-`;
-
 const ButtonFlex = styled(Flex)`
   width: 100%;
 `;

diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx
diff --git a/frontend/src/shared/components/ConfirmModal/hooks/useConfirmContext.ts b/frontend/src/shared/components/ConfirmModal/hooks/useConfirmContext.ts