feat: useConfirmContext를 useConfirmModal로 변경

woowacourse-teams · May 13, 2024 · 8393cf9 · 8393cf9
1 parent 8f248e5
commit 8393cf9
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 25 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/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: (
             <>