[Refactor/#179] 모달 공통 컴포넌트화

src/pages/@owner/account/@modal/AccountModals.tsx

@@ -0,0 +1,83 @@
+import ConfirmModal from '@components/ui/modal-confirm/ConfirmModal';
+import type { AccountFormData } from '@pages/@owner/account/schemas/account.schema';
+
+interface ModalHandler {
+  isOpen: boolean;
+  handleClose: () => void;
+  handleConfirm: () => void;
+  handleCancel: () => void;
+}
+
+interface AccountPageModalsProps {
+  formData: AccountFormData;
+  exitModal: ModalHandler;
+  saveModal: ModalHandler;
+  deleteModal: ModalHandler;
+}
+
+export default function AccountModals({
+  formData,
+  exitModal,
+  saveModal,
+  deleteModal,
+}: AccountPageModalsProps) {
+  return (
+    <>
+      {/* 이탈 방지 모달*/}
+      <ConfirmModal
+        isOpen={exitModal.isOpen}
+        handleClose={exitModal.handleClose}
+        title={'정말 나가시겠어요?'}
+        description={`작성 중인 내용은 저장되지 않으며,\n나가면 모두 삭제됩니다.`}
+        leftLabel='나가기'
+        rightLabel='취소'
+        handleClickLeft={exitModal.handleConfirm}
+        handleClickRight={exitModal.handleCancel}
+      />
+      {/* 저장 전 확인 모달 */}
+      <ConfirmModal
+        isOpen={saveModal.isOpen}
+        handleClose={saveModal.handleClose}
+        title='저장정보 확인'
+        description={
+          <>
+            <div className='bg-grayscale-100 my-[1rem] h-[0.1rem] w-full' />
+            <div className='flex flex-col gap-[1rem]'>
+              <div className='flex items-center justify-between'>
+                <p className='title-sb-12 text-grayscale-500'>은행</p>
+                <p className='caption-m-12 text-grayscale-900'>
+                  {formData.bankName}
+                </p>
+              </div>
+              <div className='flex items-center justify-between'>
+                <p className='title-sb-12 text-grayscale-500'>예금주</p>
+                <p className='caption-m-12 text-grayscale-900'>
+                  {formData.accountHolderName}
+                </p>
+              </div>
+              <div className='flex items-center justify-between'>
+                <p className='title-sb-12 text-grayscale-500'>계좌번호</p>
+                <p className='caption-m-12 text-grayscale-900'>
+                  {formData.accountNumber}
+                </p>
+              </div>
+            </div>
+          </>
+        }
+        rightLabel='저장'
+        handleClickRight={saveModal.handleConfirm}
+        handleClickLeft={saveModal.handleCancel}
+      />
+      {/* 계좌 삭제 재확인 모달 */}
+      <ConfirmModal
+        isOpen={deleteModal.isOpen}
+        handleClose={deleteModal.handleClose}
+        title='이 계좌를 삭제할까요?'
+        description='삭제 후에는 되돌릴 수 없습니다.'
+        rightLabel='삭제'
+        handleClickRight={deleteModal.handleConfirm}
+        handleClickLeft={deleteModal.handleCancel}
+      />
+    </>
+  );
+}

src/pages/@owner/account/AccountForm.tsx

@@ -1,19 +1,15 @@
-import Button from '@ui/button/Button';
 import Information from '@components/information/Information';
-import Navigation from '@layout/navigation/Navigation';
-import Input from '@ui/input/Input';
-import { Icon } from '@icon/Icon';
-import { cn } from '@utils/cn';
+import FormFieldLayout from '@components/layout/form/FormFieldLayout';
 import ErrorText from '@form/error-text/ErrorText';
+import { Icon } from '@icon/Icon';
 import Loading from '@layout/loading/Loading';
+import Navigation from '@layout/navigation/Navigation';
+import SelectBankBottomSheet from '@pages/@owner/account/@bottom-sheet/SelectBankBottomSheet';
 import { useAccountPage } from '@pages/@owner/account/hooks/use-account-page';
-import {
-  SelectBankBottomSheet,
-  ConfirmExitModal,
-  SaveAccountModal,
-  ConfirmDeleteModal,
-} from '@pages/@owner/account/@modal';
-import FormFieldLayout from '@components/layout/form/FormFieldLayout';
+import Button from '@ui/button/Button';
+import Input from '@ui/input/Input';
+import { cn } from '@utils/cn';
+import AccountModals from './@modal/AccountModals';
 
 export default function Account() {
   const {
@@ -51,24 +47,11 @@ export default function Account() {
         handleChange={bankModal.handleChange}
         bank={formData.bankName}
       />
-      <ConfirmExitModal
-        isOpen={exitModal.isOpen}
-        handleClose={exitModal.handleClose}
-        handleClickConfirm={exitModal.handleConfirm}
-        handleClickCancel={exitModal.handleCancel}
-      />
-      <SaveAccountModal
-        isOpen={saveModal.isOpen}
-        handleClose={saveModal.handleClose}
-        handleConfirm={saveModal.handleConfirm}
-        handleCancel={saveModal.handleCancel}
+      <AccountModals
         formData={formData}
-      />
-      <ConfirmDeleteModal
-        isOpen={deleteModal.isOpen}
-        handleClose={deleteModal.handleClose}
-        handleClickConfirm={deleteModal.handleConfirm}
-        handleClickCancel={deleteModal.handleCancel}
+        exitModal={exitModal}
+        saveModal={saveModal}
+        deleteModal={deleteModal}
       />
       <Navigation
         centerContent={isEditMode ? '계좌 수정' : '계좌 등록'}