From 1124bdd2cbe4334b51c47eef9313a8614a935e49 Mon Sep 17 00:00:00 2001 From: seondal Date: Wed, 20 Mar 2024 04:11:16 +0900 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20:=20=20Modal=20?= =?UTF-8?q?->=20Popup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(Main)/mypose/components/LoginModal.tsx | 20 +++++-------- src/app/(Main)/mypose/page.tsx | 4 +-- .../detail/[id]/components/DetailSection.tsx | 8 +++-- .../detail/[id]/components/LinkShareModal.tsx | 16 ---------- .../(Sub)/menu/components/MenuListSection.tsx | 19 +++++++++++- src/components/Feed/BookmarkButton.tsx | 4 +-- src/components/Modal/MenuModal.tsx | 24 --------------- src/components/Modal/Modal.tsx | 29 ------------------- src/components/Modal/Popup.tsx | 26 +++++++++++++++++ src/components/Modal/PreparingModal.tsx | 13 --------- src/components/Modal/PreparingPopup.tsx | 12 ++++++++ src/components/Modal/index.ts | 4 +-- 12 files changed, 75 insertions(+), 104 deletions(-) delete mode 100644 src/app/(Sub)/detail/[id]/components/LinkShareModal.tsx delete mode 100644 src/components/Modal/MenuModal.tsx delete mode 100644 src/components/Modal/Modal.tsx create mode 100644 src/components/Modal/Popup.tsx delete mode 100644 src/components/Modal/PreparingModal.tsx create mode 100644 src/components/Modal/PreparingPopup.tsx diff --git a/src/app/(Main)/mypose/components/LoginModal.tsx b/src/app/(Main)/mypose/components/LoginModal.tsx index 00ae4654..56519023 100644 --- a/src/app/(Main)/mypose/components/LoginModal.tsx +++ b/src/app/(Main)/mypose/components/LoginModal.tsx @@ -3,8 +3,7 @@ import { useRouter } from 'next/navigation'; import { AppleButton, KakaoButton } from './LoginButton'; -import { Modal } from '@/components/Modal'; -import { Spacing } from '@/components/Spacing'; +import { Popup } from '@/components/Modal'; import { KAKAO_AUTHORIZE } from '@/constants/env'; interface LoginModalProps { @@ -19,20 +18,15 @@ export default function LoginModal({ onClose }: LoginModalProps) { }; return ( - -
-

간편 로그인

- -

- 로그인하면 북마크도 쓸 수 있어요! -
- 간편 로그인으로 3초만에 가입해요. -

-
+
alert('앱스토어 준비중입니다.')} />
- + ); } diff --git a/src/app/(Main)/mypose/page.tsx b/src/app/(Main)/mypose/page.tsx index c7de49c1..a8e96e59 100644 --- a/src/app/(Main)/mypose/page.tsx +++ b/src/app/(Main)/mypose/page.tsx @@ -2,7 +2,7 @@ import { PrimaryButton } from '@/components/Button'; import EmptyCase from '@/components/Feed/EmptyCase'; -import { PreparingModal } from '@/components/Modal'; +import { PreparingPopup } from '@/components/Modal'; import { useOverlay } from '@/components/Overlay/useOverlay'; export default function Page() { @@ -14,7 +14,7 @@ export default function Page() { text={'포즈피드에 네컷사진을 업로드할 수 있어요'} > open(({ exit }) => )} + onClick={() => open(({ exit }) => )} text="포즈 등록하기" type="secondary" /> diff --git a/src/app/(Sub)/detail/[id]/components/DetailSection.tsx b/src/app/(Sub)/detail/[id]/components/DetailSection.tsx index 07844a36..3a669465 100644 --- a/src/app/(Sub)/detail/[id]/components/DetailSection.tsx +++ b/src/app/(Sub)/detail/[id]/components/DetailSection.tsx @@ -3,11 +3,11 @@ import Image from 'next/image'; import { usePathname } from 'next/navigation'; -import LinkShareModal from './LinkShareModal'; import Source from './Source'; import TagButton from './TagButton'; import { usePoseDetailQuery } from '@/apis'; import { BottomFixedDiv, PrimaryButton } from '@/components/Button'; +import { Popup } from '@/components/Modal'; import ImageModal from '@/components/Modal/ImageModal.client'; import { useOverlay } from '@/components/Overlay/useOverlay'; import { BASE_SITE_URL } from '@/constants/env'; @@ -30,7 +30,11 @@ export default function DetailSection({ poseId }: DetailSectionProps) { const handleShareLink = async () => { await copy(BASE_SITE_URL + pathname); - open(({ exit }) => ); + open(({ exit }) => ( + + + + )); }; return ( diff --git a/src/app/(Sub)/detail/[id]/components/LinkShareModal.tsx b/src/app/(Sub)/detail/[id]/components/LinkShareModal.tsx deleted file mode 100644 index a32daafb..00000000 --- a/src/app/(Sub)/detail/[id]/components/LinkShareModal.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { PrimaryButton } from '@/components/Button'; -import { Modal } from '@/components/Modal'; -import { Spacing } from '@/components/Spacing'; - -interface LinkShareModalProps { - onClose: () => void; -} -export default function LinkShareModal({ onClose }: LinkShareModalProps) { - return ( - -

링크가 복사되었습니다.

- - - - ); -} diff --git a/src/app/(Sub)/menu/components/MenuListSection.tsx b/src/app/(Sub)/menu/components/MenuListSection.tsx index 0e588cce..cee5d475 100644 --- a/src/app/(Sub)/menu/components/MenuListSection.tsx +++ b/src/app/(Sub)/menu/components/MenuListSection.tsx @@ -1,18 +1,35 @@ 'use client'; import { patchLogout } from '@/apis'; +import { PrimaryButton } from '@/components/Button'; +import { Popup } from '@/components/Modal'; +import { useOverlay } from '@/components/Overlay/useOverlay'; import { menuList } from '@/constants/data'; import useUserState from '@/context/userState'; export default function MenuListSection() { const { isLogin, accessToken, clearUser } = useUserState(); + const { open } = useOverlay(); - function handleLogout() { + function logout() { if (accessToken) { clearUser(); patchLogout(accessToken, accessToken); } } + function handleLogout() { + open(({ exit }) => ( + + <> + + + + + )); + } function handleDeleteAccount() { clearUser(); diff --git a/src/components/Feed/BookmarkButton.tsx b/src/components/Feed/BookmarkButton.tsx index 00ba721d..ec951d6b 100644 --- a/src/components/Feed/BookmarkButton.tsx +++ b/src/components/Feed/BookmarkButton.tsx @@ -1,7 +1,7 @@ 'use client'; import { Icon } from '../Button/Icon'; -import { PreparingModal } from '@/components/Modal'; +import { PreparingPopup } from '@/components/Modal'; import { useOverlay } from '@/components/Overlay/useOverlay'; import { ICON } from '@/constants/icon'; @@ -13,7 +13,7 @@ export default function BookmarkButton() { className="absolute bottom-6 right-6 h-36 w-36 rounded-24 bg-[#141218] bg-opacity-30 p-6" onClick={(e) => { e.preventDefault(); - open(({ exit }) => ); + open(({ exit }) => ); }} > diff --git a/src/components/Modal/MenuModal.tsx b/src/components/Modal/MenuModal.tsx deleted file mode 100644 index be2686f0..00000000 --- a/src/components/Modal/MenuModal.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { PropsWithChildren } from 'react'; - -import { PrimaryButton } from '@/components/Button'; -import { Modal } from '@/components/Modal'; -import { Spacing } from '@/components/Spacing'; - -interface MenuModalProps extends PropsWithChildren { - onConfirm?: () => void; - onClose: () => void; -} - -export default function MenuModal({ children, onConfirm, onClose }: MenuModalProps) { - return ( - - - {children} - -
- - -
- - ); -} diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx deleted file mode 100644 index 6791df48..00000000 --- a/src/components/Modal/Modal.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import ModalWrapper from './ModalWrapper'; -import { StrictPropsWithChildren } from '@/types'; -import cn from '@/utils/cn'; - -interface ModalProps extends React.HTMLAttributes { - className?: string; - onCloseOutside?: () => void; -} - -export default function Modal({ - className, - children, - onCloseOutside, - ...props -}: StrictPropsWithChildren) { - return ( - -
- {children} -
- - ); -} diff --git a/src/components/Modal/Popup.tsx b/src/components/Modal/Popup.tsx new file mode 100644 index 00000000..aa320033 --- /dev/null +++ b/src/components/Modal/Popup.tsx @@ -0,0 +1,26 @@ +import { PropsWithChildren } from 'react'; + +interface PopupI extends PropsWithChildren { + title?: string; + content?: string; + onClose?: () => void; +} + +export default function Popup({ title, content, children, onClose }: PopupI) { + return ( +
+
+
+ {(title || content) && ( +
+

{title}

+
{content}
+
+ )} +
+ {children} +
+
+
+ ); +} diff --git a/src/components/Modal/PreparingModal.tsx b/src/components/Modal/PreparingModal.tsx deleted file mode 100644 index 7753cd5e..00000000 --- a/src/components/Modal/PreparingModal.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Modal } from '.'; - -interface PreparingModalProps { - onClose: () => void; -} -export default function PreparingModal({ onClose }: PreparingModalProps) { - return ( - -

해당 기능은 아직 준비중이에요!

-

업데이트를 기대해 주세요.

- - ); -} diff --git a/src/components/Modal/PreparingPopup.tsx b/src/components/Modal/PreparingPopup.tsx new file mode 100644 index 00000000..5d0be258 --- /dev/null +++ b/src/components/Modal/PreparingPopup.tsx @@ -0,0 +1,12 @@ +import Popup from './Popup'; + +interface PreparingModalProps { + onClose: () => void; +} +export default function PreparingPopup({ onClose }: PreparingModalProps) { + return ( + +
{`해당 기능은 아직 준비중이에요!\n업데이트를 기대해 주세요.`}
+ + ); +} diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts index aff30a87..dad60ceb 100644 --- a/src/components/Modal/index.ts +++ b/src/components/Modal/index.ts @@ -1,3 +1,3 @@ -export { default as Modal } from './Modal'; +export { default as Popup } from './Popup'; export { default as ImageModal } from './ImageModal.client'; -export { default as PreparingModal } from './PreparingModal'; +export { default as PreparingPopup } from './PreparingPopup';