From 6ca5ede45784019327cfedfc43def34517318341 Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Wed, 29 Nov 2023 14:54:56 +0900 Subject: [PATCH 1/9] =?UTF-8?q?feat:=20=EC=A0=84=EC=97=AD=EC=97=90=20Confi?= =?UTF-8?q?rmModalProvider=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 67e866ffc..f091b2a4f 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -2,6 +2,7 @@ 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'; @@ -31,7 +32,9 @@ async function main() { - + + + From 085f444326cc6407e97da47b17b4948ed13b66a8 Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Wed, 29 Nov 2023 14:57:14 +0900 Subject: [PATCH 2/9] =?UTF-8?q?refactor:=20=EB=82=98=EB=A7=8C=EC=9D=98=20?= =?UTF-8?q?=ED=8C=8C=ED=8A=B8=20=EB=93=B1=EB=A1=9D=20=EC=8B=9C=EC=97=90=20?= =?UTF-8?q?=ED=99=95=EC=9D=B8=20=EB=AA=A8=EB=8B=AC=EC=97=90=20useConfirm?= =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../killingParts/components/RegisterPart.tsx | 106 +++++------------- 1 file changed, 30 insertions(+), 76 deletions(-) diff --git a/frontend/src/features/killingParts/components/RegisterPart.tsx b/frontend/src/features/killingParts/components/RegisterPart.tsx index e5a388415..417658df3 100644 --- a/frontend/src/features/killingParts/components/RegisterPart.tsx +++ b/frontend/src/features/killingParts/components/RegisterPart.tsx @@ -4,59 +4,44 @@ import { useAuthContext } from '@/features/auth/components/AuthProvider'; import useCollectingPartContext from '@/features/killingParts/hooks/useCollectingPartContext'; import { usePostKillingPart } from '@/features/killingParts/remotes/usePostKillingPart'; import useVideoPlayerContext from '@/features/youtube/hooks/useVideoPlayerContext'; -import useModal from '@/shared/components/Modal/hooks/useModal'; -import Modal from '@/shared/components/Modal/Modal'; +import { useConfirmContext } from '@/shared/components/ConfirmModal/hooks/useConfirmContext'; import Spacing from '@/shared/components/Spacing'; import { toPlayingTimeText } from '@/shared/utils/convertTime'; const RegisterPart = () => { - const { isOpen, openModal, closeModal } = useModal(); + const navigate = useNavigate(); const { user } = useAuthContext(); const { interval, partStartTime, songId } = useCollectingPartContext(); const video = useVideoPlayerContext(); + const { confirmPopup } = useConfirmContext(); const { createKillingPart } = usePostKillingPart(); - const navigate = useNavigate(); + + const voteTimeText = toPlayingTimeText(partStartTime, partStartTime + interval); // 현재 useMutation 훅이 response 객체를 리턴하지 않고 내부적으로 처리합니다. // 때문에 컴포넌트 단에서 createKillingPart 성공 여부에 따라 등록 완료 만료를 처리를 할 수 없어요! - // 현재 비로그인 시에 등록을 누르면 두 개의 모달이 뜹니다.정 - const submitKillingPart = async () => { - await createKillingPart(songId, { startSecond: partStartTime, length: interval }); - navigate(-1); - }; - - const openRegisterModal = () => { + // 현재 비로그인 시에 등록을 누르면 두 개의 모달이 뜹니다. + const onClickRegisterPart = async () => { video.pause(); - openModal(); + const isConfirmed = await confirmPopup({ + title: `${user?.nickname}님의 파트 저장`, + content: ( + + + {voteTimeText} + + 나만의 파트로 등록하시겠습니까? + + ), + }); + + if (isConfirmed) { + await createKillingPart(songId, { startSecond: partStartTime, length: interval }); + navigate(-1); + } }; - const voteTimeText = toPlayingTimeText(partStartTime, partStartTime + interval); - - return ( - <> - 등록 - - - {user?.nickname}님의 파트 저장 - - - - {voteTimeText} - - - 나만의 파트로 등록하시겠습니까? - - - - 취소 - - - 등록 - - - - - ); + return 등록; }; export default RegisterPart; @@ -79,45 +64,8 @@ const RegisterButton = styled.button` } `; -const ModalTitle = styled.h3``; - -const TitleColumn = styled.div` - text-align: center; -`; - -const ModalContent = styled.div` - padding: 16px 0; - - font-size: 16px; - color: #b5b3bc; - text-align: center; - white-space: pre-line; -`; - const Message = styled.div``; -const Button = styled.button` - height: 36px; - color: ${({ theme: { color } }) => color.white}; - border-radius: 10px; -`; - -const Cancel = styled(Button)` - flex: 1; - background-color: ${({ theme: { color } }) => color.secondary}; -`; - -const Confirm = styled(Button)` - flex: 1; - background-color: ${({ theme: { color } }) => color.primary}; -`; - -const ButtonContainer = styled.div` - display: flex; - gap: 16px; - width: 100%; -`; - const Part = styled.span` padding: 6px 11px; @@ -127,3 +75,9 @@ const Part = styled.span` background-color: ${({ theme: { color } }) => color.disabled}; border-radius: 10px; `; + +const ContentContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; +`; From 1ffc1528e1632ec05b825ef5439202cc5def2ec1 Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Wed, 29 Nov 2023 15:10:35 +0900 Subject: [PATCH 3/9] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=20=EB=84=88?= =?UTF-8?q?=EB=B9=84=EB=A5=BC=20=EA=B3=A0=EB=A0=A4=ED=95=98=EC=97=AC=20?= =?UTF-8?q?=ED=9A=8C=EC=9B=90=20=ED=83=88=ED=87=B4=20=EB=A9=94=EC=84=B8?= =?UTF-8?q?=EC=A7=80=20=EA=B8=B8=EC=9D=B4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/features/member/constants/withdrawalMessage.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/features/member/constants/withdrawalMessage.ts b/frontend/src/features/member/constants/withdrawalMessage.ts index 9652ddd85..fb1945d9d 100644 --- a/frontend/src/features/member/constants/withdrawalMessage.ts +++ b/frontend/src/features/member/constants/withdrawalMessage.ts @@ -1,3 +1,3 @@ -const WITHDRAWAL_MESSAGE = '회원 탈퇴시 활동한 모든 이력이 삭제됩니다.\n정말 회원 탈퇴하겠습니까?'; +const WITHDRAWAL_MESSAGE = '회원 탈퇴시 모든 이력이 삭제됩니다.\n정말 회원 탈퇴하겠습니까?'; export default WITHDRAWAL_MESSAGE; From 728808efb0fc7021e3587378c31dab20e6023bef Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Wed, 29 Nov 2023 15:12:07 +0900 Subject: [PATCH 4/9] =?UTF-8?q?design:=20confirm=20modal=20=EB=84=88?= =?UTF-8?q?=EB=B9=84=20300=EC=97=90=EC=84=9C=20320=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 - 짧은 문장도 잘 담지 못해서 줄바꿈이 일어남. 그래서 너비를 늘림 --- frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx index d8920af3e..0db6f83e6 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx @@ -70,7 +70,7 @@ const Container = styled.section` left: 50%; transform: translate(-50%, -50%); - min-width: 300px; + min-width: 320px; margin: 0 auto; padding: 24px; From 09227be9811df3f58e92782321ac2ef608c5247c Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Wed, 29 Nov 2023 15:14:23 +0900 Subject: [PATCH 5/9] =?UTF-8?q?refactor:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=ED=9A=8C=EC=9B=90=20=ED=83=88=ED=87=B4=20=EC=8B=9C?= =?UTF-8?q?=20useConfirm=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/EditProfilePage.tsx | 35 +++++++++++++++++++------- 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/frontend/src/pages/EditProfilePage.tsx b/frontend/src/pages/EditProfilePage.tsx index 4191e8e0c..3caf68bfc 100644 --- a/frontend/src/pages/EditProfilePage.tsx +++ b/frontend/src/pages/EditProfilePage.tsx @@ -2,16 +2,16 @@ import { useNavigate } from 'react-router-dom'; import styled, { css } from 'styled-components'; import shookshook from '@/assets/icon/shookshook.svg'; import { useAuthContext } from '@/features/auth/components/AuthProvider'; -import WithdrawalModal from '@/features/member/components/WithdrawalModal'; +import WITHDRAWAL_MESSAGE from '@/features/member/constants/withdrawalMessage'; import { deleteMember } from '@/features/member/remotes/member'; -import useModal from '@/shared/components/Modal/hooks/useModal'; +import { useConfirmContext } from '@/shared/components/ConfirmModal/hooks/useConfirmContext'; 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 { isOpen, openModal, closeModal } = useModal(); + const { confirmPopup } = useConfirmContext(); const { mutateData } = useMutation(deleteMember(user?.memberId)); const navigate = useNavigate(); @@ -20,10 +20,19 @@ const EditProfilePage = () => { return; } - const handleWithdrawal = async () => { - await mutateData(); - logout(); - navigate(ROUTE_PATH.ROOT); + const handleClickWithdrawal = async () => { + const isConfirmed = await confirmPopup({ + title: '회원 탈퇴', + content: {WITHDRAWAL_MESSAGE}, + confirmation: '탈퇴', + denial: '닫기', + }); + + if (isConfirmed) { + await mutateData(); + logout(); + navigate(ROUTE_PATH.ROOT); + } }; return ( @@ -39,9 +48,8 @@ const EditProfilePage = () => {