ㄱㄱㄱ

src/app/menu/account/page.tsx

@@ -1,10 +1,23 @@
 'use client';
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import ChangePasswordModal from "../ChangePasswordModal";
+import PasswordChangeDoneModal from "../PasswordChangeDoneModal";
+import AccountDeleteModal from "../AccountDeleteModal";
+import MenuAccountOption from "@/app/menu/account/MenuAccountOption";
+
+type VerificationState = 'initial' | 'sent' | 'verified' | 'failed' | 'changed';
 
 export default function AccountPage() {
   const [open, setOpen] = useState(false);
+  const [verificationState, setVerificationState] = useState<VerificationState>('initial');
+  const [doneOpen, setDoneOpen] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+
+  // 개발 옵션에서 'changed'로 전환하면 완료 모달 표시
+  useEffect(() => {
+    setDoneOpen(verificationState === 'changed');
+  }, [verificationState]);
 
   return (
     <main className="flex w-full flex-col">
@@ -40,7 +53,11 @@ export default function AccountPage() {
           </div>
         </div>
         <div className="mt-6">
-          <button className="text-[15px] font-medium leading-[1.5] text-[#f64c4c] underline">
+          <button
+            type="button"
+            onClick={() => setDeleteOpen(true)}
+            className="text-[15px] font-medium leading-[1.5] text-[#f64c4c] underline cursor-pointer"
+          >
             회원 탈퇴하기
           </button>
         </div>
@@ -52,6 +69,28 @@ export default function AccountPage() {
         onSubmit={() => {
           // TODO: integrate API
         }}
+        devVerificationState={verificationState}
+      />
+
+      <MenuAccountOption
+        verificationState={verificationState}
+        setVerificationState={setVerificationState}
+        deleteOpen={deleteOpen}
+        setDeleteOpen={setDeleteOpen}
+      />
+
+      <PasswordChangeDoneModal
+        open={doneOpen}
+        onClose={() => setDoneOpen(false)}
+      />
+
+      <AccountDeleteModal
+        open={deleteOpen}
+        onClose={() => setDeleteOpen(false)}
+        onConfirm={() => {
+          // TODO: 탈퇴 API 연동
+          setDeleteOpen(false);
+        }}
       />
     </main>
   );