Merge pull request #159 from Soohyuniii/feat/팝업-컴포넌트-공통-컴포넌트화-작업

Feat/팝업 컴포넌트 공통 컴포넌트화 작업

Author: Soohyuniii

src/components/Alert.tsx

@@ -0,0 +1,40 @@
+import AlertButton from "@/components/button/AlertButton";
+
+type AlertProps = {
+  title: string;
+  message: string[];
+  cancelText: string;
+  confirmText: string;
+  onCancel?: () => void;
+  onConfirm?: () => void;
+};
+
+const ActionConfirmModal = ({
+  title,
+  message,
+  cancelText,
+  confirmText,
+  onCancel,
+  onConfirm
+}: AlertProps) => {
+  return (
+    <div className="absolute inset-0 z-50 flex items-center justify-center bg-[#00000080]">
+      <div className="flex h-[200px] w-[294px] flex-col items-center justify-center rounded-2xl bg-white">
+        <h3 className="text-2xl font-bold">{title}</h3>
+        <p className="mt-[9px] text-center text-xl font-medium">
+          {message.map((line, index) => (
+            <span key={index} className="block">
+              {line}
+            </span>
+          ))}
+        </p>
+        <div className="mt-[19px] flex gap-3.5">
+          <AlertButton onClick={onCancel}>{cancelText}</AlertButton>
+          <AlertButton onClick={onConfirm}>{confirmText}</AlertButton>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ActionConfirmModal;

src/components/modal/ActionConfirmModal.tsx

@@ -1,23 +1,54 @@
+import { useState } from "react";
 import Header from "@/components/Header";
+import ActionConfirmModal from "@/components/modal/ActionConfirmModal";
+import useAuthStore from "@/store/useAuthStore";
+import { useNavigate } from "react-router-dom";
 
-interface MenuItem {
-  label: string;
-  onClick?: () => void;
-}
+type ModalType = "logout" | "withdraw" | "terms" | "privacy" | null;
 
-const menuItems: MenuItem[] = [
-  { label: "이용약관", onClick: () => console.log("이용약관 클릭") },
-  {
-    label: "개인정보처리방침",
-    onClick: () => console.log("개인정보처리방침 클릭")
+const alertConfig = {
+  logout: {
+    title: "로그아웃",
+    message: ["로그아웃 할까요?"],
+    cancelText: "취소",
+    confirmText: "확인"
   },
-  { label: "로그아웃", onClick: () => console.log("로그아웃 클릭") },
-  { label: "회원탈퇴", onClick: () => console.log("회원탈퇴 클릭") }
-];
+  withdraw: {
+    title: "회원탈퇴",
+    message: ["정말 탈퇴하시겠습니까?"],
+    cancelText: "취소",
+    confirmText: "확인"
+  }
+};
 
 const MyInfo = () => {
+  const [modalType, setModalType] = useState<ModalType>(null);
+  const { logout } = useAuthStore();
+  const navigate = useNavigate();
+
+  const handleCancel = () => {
+    setModalType(null);
+  };
+
+  const handleConfirm = () => {
+    if (modalType === "logout") {
+      logout();
+      navigate("/login");
+    } else if (modalType === "withdraw") {
+      console.log("회원탈퇴 실행"); //TODO: 회원탈퇴 기능 구현 시 추가 필요
+    }
+    setModalType(null);
+  };
+
+  const menuItems = [
+    { label: "이용약관", onClick: () => setModalType("terms") }, //TODO: 이용약관 팝업 구현 시 추가 필요
+    { label: "개인정보처리방침", onClick: () => setModalType("privacy") }, //TODO: 개인정보처리방침 팝업 구현 시 추가 필요
+    { label: "로그아웃", onClick: () => setModalType("logout") },
+    { label: "회원탈퇴", onClick: () => setModalType("withdraw") }
+  ];
+
   return (
-    <div className="flex w-[360px] flex-col bg-white md:w-[375px] lg:w-[500px]">
+    <div className="relative flex w-[360px] flex-col bg-white md:w-[375px] lg:w-[500px]">
       <Header title="내 정보" showShareIcon={false} />
 
       <ul className="mt-[10px] flex flex-col justify-between gap-[20px]">
@@ -27,7 +58,7 @@ const MyInfo = () => {
             className="flex h-[56px] cursor-pointer items-center justify-between px-5 py-4 hover:bg-gray-50"
             onClick={item.onClick}
           >
-            <span className="text-base text-[16px] leading-6 font-medium tracking-normal text-gray-900 ">
+            <span className="text-base font-medium text-gray-900">
               {item.label}
             </span>
             <img
@@ -38,6 +69,17 @@ const MyInfo = () => {
           </li>
         ))}
       </ul>
+
+      {modalType && (modalType === "logout" || modalType === "withdraw") && (
+        <ActionConfirmModal
+          title={alertConfig[modalType].title}
+          message={alertConfig[modalType].message}
+          cancelText={alertConfig[modalType].cancelText}
+          confirmText={alertConfig[modalType].confirmText}
+          onCancel={handleCancel}
+          onConfirm={handleConfirm}
+        />
+      )}
     </div>
   );
 };