♻️ refactor : Modal -> Popup

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 (
-    <Modal onCloseOutside={onClose}>
-      <div className="py-32">
-        <h4>간편 로그인</h4>
-        <Spacing size={8} />
-        <p>
-          로그인하면 북마크도 쓸 수 있어요!
-          <br />
-          간편 로그인으로 3초만에 가입해요.
-        </p>
-      </div>
+    <Popup
+      title="간편 로그인"
+      content={`로그인하면 북마크도 쓸 수 있어요!\n간편 로그인으로 3초만에 가입해요.`}
+      onClose={onClose}
+    >
       <div className="flex w-full flex-col gap-8 pb-16">
         <KakaoButton onClick={handleLogin} />
         <AppleButton onClick={() => alert('앱스토어 준비중입니다.')} />
       </div>
-    </Modal>
+    </Popup>
   );
 }

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={'포즈피드에 네컷사진을 업로드할 수 있어요'}
     >
       <PrimaryButton
-        onClick={() => open(({ exit }) => <PreparingModal onClose={exit} />)}
+        onClick={() => open(({ exit }) => <PreparingPopup onClose={exit} />)}
         text="포즈 등록하기"
         type="secondary"
       />

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 }) => <LinkShareModal onClose={exit} />);
+    open(({ exit }) => (
+      <Popup content="링크가 복사되었습니다.">
+        <PrimaryButton text="확인" onClick={exit} />
+      </Popup>
+    ));
   };
 
   return (

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 }) => (
+      <Popup
+        title="로그아웃"
+        content={`북마크는 로그인 시에만 유지되어요.\n정말 로그아웃하시겠어요?`}
+      >
+        <>
+          <PrimaryButton text={'로그아웃'} onClick={logout} type="secondary" />
+          <PrimaryButton text="로그인 유지" onClick={exit} />
+        </>
+      </Popup>
+    ));
+  }
 
   function handleDeleteAccount() {
     clearUser();

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 }) => <PreparingModal onClose={exit} />);
+        open(({ exit }) => <PreparingPopup onClose={exit} />);
       }}
     >
       <Icon icon={ICON.bookmark.white.empty} />

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 (
+    <div className="fixed inset-x-0 inset-y-0 z-30 flex items-center justify-center">
+      <div className="fixed inset-x-0 inset-y-0 bg-dimmed opacity-30" onClick={onClose} />
+      <div className="z-30 w-300 rounded-16 bg-white p-16 text-center">
+        {(title || content) && (
+          <div className="mb-16 py-16">
+            <h4 className="mb-8">{title}</h4>
+            <div>{content}</div>
+          </div>
+        )}
+        <div className="&:flex-1 flex w-full justify-evenly gap-8 [&>button]:flex-1">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Modal/PreparingPopup.tsx

@@ -0,0 +1,12 @@
+import Popup from './Popup';
+
+interface PreparingModalProps {
+  onClose: () => void;
+}
+export default function PreparingPopup({ onClose }: PreparingModalProps) {
+  return (
+    <Popup onClose={onClose}>
+      <div>{`해당 기능은 아직 준비중이에요!\n업데이트를 기대해 주세요.`}</div>
+    </Popup>
+  );
+}

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';