From 9dcae4ce5b98f5f0247277119e108fb3584d356e Mon Sep 17 00:00:00 2001
From: Jeong Ha Seung <88266129+HA-SEUNG-JEONG@users.noreply.github.com>
Date: Sat, 7 Feb 2026 18:16:11 +0900
Subject: [PATCH] =?UTF-8?q?refactor=20:=20=EB=AA=A8=EB=8B=AC=20=EA=B3=B5?=
 =?UTF-8?q?=ED=86=B5=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modals/account-info-modal.tsx  |  9 +-
 src/components/modals/add-account-modal.tsx   | 11 +--
 .../modals/admin-approve-settlement-modal.tsx |  8 +-
 .../admin-complete-settlement-modal.tsx       |  8 +-
 .../admin-forced-cancellation-modal.tsx       |  8 +-
 .../modals/admin-refund-approval-modal.tsx    | 14 +--
 .../modals/create-evaluation-modal.tsx        | 11 +--
 .../modals/create-mission-modal.tsx           | 15 +--
 .../modals/delete-evaluation-modal.tsx        | 10 +-
 .../modals/delete-homework-modal.tsx          | 10 +-
 .../modals/delete-mission-modal.tsx           | 10 +-
 .../modals/delete-peer-review-modal.tsx       | 10 +-
 .../modals/discretionary-evaluation-modal.tsx | 11 +--
 .../modals/edit-evaluation-modal.tsx          | 11 +--
 src/components/modals/edit-homework-modal.tsx | 11 +--
 src/components/modals/edit-mission-modal.tsx  | 11 +--
 src/components/modals/end-group-study.tsx     | 29 +++---
 .../modals/submit-homework-modal.tsx          | 11 +--
 src/components/ui/modal/index.tsx             | 91 +++++++++++++++++--
 19 files changed, 183 insertions(+), 116 deletions(-)

diff --git a/src/components/modals/account-info-modal.tsx b/src/components/modals/account-info-modal.tsx
index 0f46ddce..e7b3caa9 100644
--- a/src/components/modals/account-info-modal.tsx
+++ b/src/components/modals/account-info-modal.tsx
@@ -1,4 +1,3 @@
-import { XIcon } from 'lucide-react';
 import { useState } from 'react';
 import { SettlementAccountResponse } from '@/api/openapi';
 import Button from '@/components/ui/button';
@@ -33,13 +32,11 @@ export default function AccountInfoModal({
         <Modal.Portal>
           <Modal.Overlay />
           <Modal.Content className="w-[840px]">
-            <Modal.Header className="border-border-default flex justify-between border-b">
+            <Modal.Header variant="form">
               <Modal.Title className="font-designer-20b text-text-strong">
                 계좌 정보
               </Modal.Title>
-              <Modal.Close onClick={() => onOpenChange(false)}>
-                <XIcon />
-              </Modal.Close>
+              <Modal.CloseButton onClick={() => onOpenChange(false)} />
             </Modal.Header>
 
             <Modal.Body>
@@ -64,7 +61,7 @@ export default function AccountInfoModal({
               </div>
             </Modal.Body>
 
-            <Modal.Footer className="flex justify-end gap-100">
+            <Modal.Footer variant="form">
               <Modal.Close asChild>
                 <Button
                   color="secondary"
diff --git a/src/components/modals/add-account-modal.tsx b/src/components/modals/add-account-modal.tsx
index 0817a091..a4aed870 100644
--- a/src/components/modals/add-account-modal.tsx
+++ b/src/components/modals/add-account-modal.tsx
@@ -1,5 +1,4 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { XIcon } from 'lucide-react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import Button from '@/components/ui/button';
@@ -38,13 +37,11 @@ export default function AddAccountModal({
       <Modal.Portal>
         <Modal.Overlay />
         <Modal.Content className="w-[840px]">
-          <Modal.Header className="border-border-default flex justify-between border-b">
+          <Modal.Header variant="form">
             <Modal.Title className="font-designer-20b text-text-strong">
               계좌 정보
             </Modal.Title>
-            <Modal.Close onClick={() => onOpenChange(false)}>
-              <XIcon />
-            </Modal.Close>
+            <Modal.CloseButton onClick={() => onOpenChange(false)} />
           </Modal.Header>
 
           <AddAccountForm
@@ -115,7 +112,7 @@ function AddAccountForm({ defaultValues, onClose }: AddAccountFormProps) {
 
   return (
     <FormProvider {...methods}>
-      <Modal.Body className="flex flex-col gap-400 px-400 py-300">
+      <Modal.Body variant="form">
         <form
           id="add-account"
           className="flex flex-col gap-300"
@@ -172,7 +169,7 @@ function AddAccountForm({ defaultValues, onClose }: AddAccountFormProps) {
         </form>
       </Modal.Body>
 
-      <Modal.Footer className="flex justify-end gap-100">
+      <Modal.Footer variant="form">
         <Modal.Close asChild>
           <Button color="secondary" size="large" onClick={onClose}>
             취소
diff --git a/src/components/modals/admin-approve-settlement-modal.tsx b/src/components/modals/admin-approve-settlement-modal.tsx
index b4e5e892..3d727065 100644
--- a/src/components/modals/admin-approve-settlement-modal.tsx
+++ b/src/components/modals/admin-approve-settlement-modal.tsx
@@ -19,15 +19,15 @@ export default function AdminApproveSettlementModal({
       <Modal.Portal>
         <Modal.Overlay />
         <Modal.Content size="small" className="w-[423px]">
-          <Modal.Header className="border-border-default flex justify-center border-b">
+          <Modal.Header variant="alert">
             <Modal.Title>정산 승인하기</Modal.Title>
           </Modal.Header>
 
-          <Modal.Body className="font-designer-14r text-text-default flex justify-center py-250">
-            <span>정산을 승인하시겠습니까?</span>
+          <Modal.Body variant="alert">
+            <span className="font-designer-14r">정산을 승인하시겠습니까?</span>
           </Modal.Body>
 
-          <Modal.Footer className="flex justify-center gap-200 border-t-0 py-250">
+          <Modal.Footer variant="alert">
             <Button
               color="secondary"
               className="w-[160px]"
diff --git a/src/components/modals/admin-complete-settlement-modal.tsx b/src/components/modals/admin-complete-settlement-modal.tsx
index 93dae880..930e4bc1 100644
--- a/src/components/modals/admin-complete-settlement-modal.tsx
+++ b/src/components/modals/admin-complete-settlement-modal.tsx
@@ -19,15 +19,15 @@ export default function AdminCompleteSettlementModal({
       <Modal.Portal>
         <Modal.Overlay />
         <Modal.Content size="small" className="w-[423px]">
-          <Modal.Header className="border-border-default flex justify-center border-b">
+          <Modal.Header variant="alert">
             <Modal.Title>정산 완료하기</Modal.Title>
           </Modal.Header>
 
-          <Modal.Body className="font-designer-14r text-text-default flex justify-center py-250">
-            <span>정산을 완료하시겠습니까?</span>
+          <Modal.Body variant="alert">
+            <span className="font-designer-14r">정산을 완료하시겠습니까?</span>
           </Modal.Body>
 
-          <Modal.Footer className="flex justify-center gap-200 border-t-0 py-250">
+          <Modal.Footer variant="alert">
             <Button
               color="secondary"
               className="w-[160px]"
diff --git a/src/components/modals/admin-forced-cancellation-modal.tsx b/src/components/modals/admin-forced-cancellation-modal.tsx
index 9e3d401e..51c23030 100644
--- a/src/components/modals/admin-forced-cancellation-modal.tsx
+++ b/src/components/modals/admin-forced-cancellation-modal.tsx
@@ -19,17 +19,17 @@ export default function AdminForcedCancellationModal({
       <Modal.Portal>
         <Modal.Overlay />
         <Modal.Content size="small" className="w-[423px]">
-          <Modal.Header className="border-border-default flex justify-center border-b">
+          <Modal.Header variant="alert">
             <Modal.Title>강제 취소</Modal.Title>
           </Modal.Header>
 
-          <Modal.Body className="font-designer-14r text-text-default flex justify-center py-250">
-            <span>
+          <Modal.Body variant="alert">
+            <span className="font-designer-14r">
               스터디 시작 이전 회원 제제, 유저 요청 등의 사유로 관리자 강제 취소
             </span>
           </Modal.Body>
 
-          <Modal.Footer className="flex justify-center gap-200 border-t-0 py-250">
+          <Modal.Footer variant="alert">
             <Button
               color="secondary"
               className="w-[160px]"
diff --git a/src/components/modals/admin-refund-approval-modal.tsx b/src/components/modals/admin-refund-approval-modal.tsx
index 6ca43510..e59bad49 100644
--- a/src/components/modals/admin-refund-approval-modal.tsx
+++ b/src/components/modals/admin-refund-approval-modal.tsx
@@ -35,19 +35,21 @@ export default function AdminRefundApprovalModal({
       <Modal.Portal>
         <Modal.Overlay />
         <Modal.Content size="small" className="w-[423px]">
-          <Modal.Header className="border-border-default flex justify-center border-b">
+          <Modal.Header variant="alert">
             <Modal.Title>환불 승인/반려</Modal.Title>
           </Modal.Header>
 
-          <Modal.Body className="font-designer-14r text-text-default flex flex-col items-center gap-100 py-250">
-            <span>{groupStudyName}</span>
-            <span>
+          <Modal.Body variant="alert" className="flex-col gap-100">
+            <span className="font-designer-14r">{groupStudyName}</span>
+            <span className="font-designer-14r">
               {paymentMemberName}({paymentMemberId})
             </span>
-            <span>{transactionAmount.toLocaleString()}원(무통장입금)</span>
+            <span className="font-designer-14r">
+              {transactionAmount.toLocaleString()}원(무통장입금)
+            </span>
           </Modal.Body>
 
-          <Modal.Footer className="flex justify-center gap-200 border-t-0 py-250">
+          <Modal.Footer variant="alert">
             <Button
               color="secondary"
               className="w-[160px]"
diff --git a/src/components/modals/create-evaluation-modal.tsx b/src/components/modals/create-evaluation-modal.tsx
index b10c198b..1645baa8 100644
--- a/src/components/modals/create-evaluation-modal.tsx
+++ b/src/components/modals/create-evaluation-modal.tsx
@@ -1,5 +1,4 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { XIcon } from 'lucide-react';
 import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -49,13 +48,11 @@ export default function CreateEvaluationModal({
       <Modal.Portal>
         <Modal.Overlay />
         <Modal.Content className="w-[840px]">
-          <Modal.Header className="border-border-default flex justify-between border-b">
+          <Modal.Header variant="form">
             <Modal.Title className="font-designer-20b text-text-strong">
               평가하기
             </Modal.Title>
-            <Modal.Close onClick={() => setOpen(false)}>
-              <XIcon />
-            </Modal.Close>
+            <Modal.CloseButton onClick={() => setOpen(false)} />
           </Modal.Header>
 
           <CreateEvaluationForm
@@ -119,7 +116,7 @@ function CreateEvaluationForm({
 
   return (
     <FormProvider {...methods}>
-      <Modal.Body className="flex flex-col gap-400 px-400 py-300">
+      <Modal.Body variant="form">
         <form
           id="create-evaluation"
           className="flex flex-col gap-300"
@@ -155,7 +152,7 @@ function CreateEvaluationForm({
         </form>
       </Modal.Body>
 
-      <Modal.Footer className="flex justify-end gap-100">
+      <Modal.Footer variant="form">
         <Modal.Close asChild>
           <Button color="secondary" size="large" onClick={onClose}>
             취소
diff --git a/src/components/modals/create-mission-modal.tsx b/src/components/modals/create-mission-modal.tsx
index ffd5c251..a4975506 100644
--- a/src/components/modals/create-mission-modal.tsx
+++ b/src/components/modals/create-mission-modal.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import dayjs from 'dayjs';
-import { Plus, XIcon } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { ChangeEvent, useState } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -78,13 +78,11 @@ export default function CreateMissionModal({
       <Modal.Portal>
         <Modal.Overlay />
         <Modal.Content className="w-[840px]">
-          <Modal.Header className="border-border-default flex justify-between border-b">
+          <Modal.Header variant="form">
             <Modal.Title className="font-designer-20b text-text-strong">
               새 미션 만들기
             </Modal.Title>
-            <Modal.Close onClick={() => setOpen(false)}>
-              <XIcon />
-            </Modal.Close>
+            <Modal.CloseButton onClick={() => setOpen(false)} />
           </Modal.Header>
 
           <CreateMissionForm
@@ -169,7 +167,7 @@ function CreateMissionForm({
 
   return (
     <FormProvider {...methods}>
-      <Modal.Body className="flex flex-col gap-400 px-400 py-300">
+      <Modal.Body variant="form">
         <form
           id="create-mission"
           className="flex flex-col gap-300"
@@ -257,7 +255,10 @@ function CreateMissionForm({
         </form>
       </Modal.Body>
 
-      <Modal.Footer className="flex items-center justify-between">
+      <Modal.Footer
+        variant="form"
+        className="flex items-center justify-between"
+      >
         <span className="font-designer-13r text-text-error">
           미션이 시작되면 수정 및 삭제가 불가합니다.
         </span>
diff --git a/src/components/modals/delete-evaluation-modal.tsx b/src/components/modals/delete-evaluation-modal.tsx
index 15c13582..cc7b0d53 100644
--- a/src/components/modals/delete-evaluation-modal.tsx
+++ b/src/components/modals/delete-evaluation-modal.tsx
@@ -44,15 +44,17 @@ export default function DeleteEvaluationModal({
       <Modal.Portal>
         <Modal.Overlay />
         <Modal.Content size="small" className="w-[423px]">
-          <Modal.Header className="border-border-default flex justify-center border-b py-200">
+          <Modal.Header variant="alert">
             <Modal.Title>평가를 삭제하시겠습니까?</Modal.Title>
           </Modal.Header>
 
-          <Modal.Body className="font-designer-14r text-text-default flex justify-center py-250">
-            해당 평가 정보가 영구적으로 삭제됩니다.
+          <Modal.Body variant="alert">
+            <span className="font-designer-14r">
+              해당 평가 정보가 영구적으로 삭제됩니다.
+            </span>
           </Modal.Body>
 
-          <Modal.Footer className="flex justify-center gap-200 border-t-0 py-250">
+          <Modal.Footer variant="alert">
             <Button
               color="secondary"
               className="font-designer-14b w-[160px]"
diff --git a/src/components/modals/delete-homework-modal.tsx b/src/components/modals/delete-homework-modal.tsx
index 06853ae4..383bd9db 100644
--- a/src/components/modals/delete-homework-modal.tsx
+++ b/src/components/modals/delete-homework-modal.tsx
@@ -47,15 +47,17 @@ export default function DeleteHomeworkModal({
       <Modal.Portal>
         <Modal.Overlay />
         <Modal.Content size="small" className="w-[423px]">
-          <Modal.Header className="border-border-default flex justify-center border-b py-200">
+          <Modal.Header variant="alert">
             <Modal.Title>과제를 삭제하시겠습니까?</Modal.Title>
           </Modal.Header>
 
-          <Modal.Body className="font-designer-14r text-text-default flex justify-center py-250">
-            제출한 과제가 영구적으로 삭제됩니다.
+          <Modal.Body variant="alert">
+            <span className="font-designer-14r">
+              해당 과제에 대해 학생들이 제출한 과제가 영구적으로 삭제됩니다.
+            </span>
           </Modal.Body>
 
-          <Modal.Footer className="flex justify-center gap-200 border-t-0 py-250">
+          <Modal.Footer variant="alert">
             <Button
               color="secondary"
               className="font-designer-14b w-[160px]"
diff --git a/src/components/modals/delete-mission-modal.tsx b/src/components/modals/delete-mission-modal.tsx
index fb08170d..9a20e74a 100644
--- a/src/components/modals/delete-mission-modal.tsx
+++ b/src/components/modals/delete-mission-modal.tsx
@@ -54,15 +54,17 @@ export default function DeleteMissionModal({
       <Modal.Portal>
         <Modal.Overlay />
         <Modal.Content size="small" className="w-[423px]">
-          <Modal.Header className="border-border-default flex justify-center border-b py-200">
+          <Modal.Header variant="alert">
             <Modal.Title>미션을 삭제하시겠습니까?</Modal.Title>
           </Modal.Header>
 
-          <Modal.Body className="font-designer-14r text-text-default flex justify-center py-250">
-            해당 미션과 연결된 제출 및 평가 정보가 사라집니다.
+          <Modal.Body variant="alert">
+            <span className="font-designer-14r">
+              해당 미션과 연결된 제출 및 평가 정보가 사라집니다.
+            </span>
           </Modal.Body>
 
-          <Modal.Footer className="flex justify-center gap-200 border-t-0 py-250">
+          <Modal.Footer variant="alert">
             <Button
               color="secondary"
               className="font-designer-14b w-[160px]"
diff --git a/src/components/modals/delete-peer-review-modal.tsx b/src/components/modals/delete-peer-review-modal.tsx
index c5e10d51..4a6142cd 100644
--- a/src/components/modals/delete-peer-review-modal.tsx
+++ b/src/components/modals/delete-peer-review-modal.tsx
@@ -35,15 +35,17 @@ export default function DeletePeerReviewModal({
       <Modal.Portal>
         <Modal.Overlay />
         <Modal.Content size="small" className="w-[423px]">
-          <Modal.Header className="border-border-default flex justify-center border-b py-200">
+          <Modal.Header variant="alert">
             <Modal.Title>피어 리뷰를 삭제하시겠습니까?</Modal.Title>
           </Modal.Header>
 
-          <Modal.Body className="font-designer-14r text-text-default flex justify-center py-250">
-            작성하신 피어 리뷰가 영구적으로 삭제됩니다.
+          <Modal.Body variant="alert">
+            <span className="font-designer-14r">
+              작성하신 피어 리뷰가 영구적으로 삭제됩니다.
+            </span>
           </Modal.Body>
 
-          <Modal.Footer className="flex justify-center gap-200 border-t-0 py-250">
+          <Modal.Footer variant="alert">
             <Button
               color="secondary"
               className="font-designer-14b w-[160px]"
diff --git a/src/components/modals/discretionary-evaluation-modal.tsx b/src/components/modals/discretionary-evaluation-modal.tsx
index 0bdd1a2e..618f7f26 100644
--- a/src/components/modals/discretionary-evaluation-modal.tsx
+++ b/src/components/modals/discretionary-evaluation-modal.tsx
@@ -1,5 +1,4 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { XIcon } from 'lucide-react';
 import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -44,7 +43,7 @@ export default function DiscretionaryEvaluationModal({
       <Modal.Portal>
         <Modal.Overlay />
         <Modal.Content className="w-[840px]">
-          <Modal.Header className="border-border-default flex justify-between border-b">
+          <Modal.Header variant="form">
             <div className="flex flex-col gap-50">
               <Modal.Title className="font-designer-20b text-text-strong">
                 재량 평가
@@ -53,9 +52,7 @@ export default function DiscretionaryEvaluationModal({
                 재량 평가는 최대 3회까지 가능하며, 각 평가별 5점씩 부여됩니다.
               </p>
             </div>
-            <Modal.Close onClick={() => setOpen(false)}>
-              <XIcon />
-            </Modal.Close>
+            <Modal.CloseButton onClick={() => setOpen(false)} />
           </Modal.Header>
 
           <DiscretionaryEvaluationForm
@@ -119,7 +116,7 @@ function DiscretionaryEvaluationForm({
 
   return (
     <FormProvider {...methods}>
-      <Modal.Body className="flex flex-col gap-400 px-400 py-300">
+      <Modal.Body variant="form">
         <form
           id="discretionary-evaluation"
           className="flex flex-col gap-300"
@@ -143,7 +140,7 @@ function DiscretionaryEvaluationForm({
         </form>
       </Modal.Body>
 
-      <Modal.Footer className="flex justify-end gap-100">
+      <Modal.Footer variant="form">
         <Modal.Close asChild>
           <Button color="secondary" size="large" onClick={onClose}>
             취소
diff --git a/src/components/modals/edit-evaluation-modal.tsx b/src/components/modals/edit-evaluation-modal.tsx
index ab2c3f46..2b6d0002 100644
--- a/src/components/modals/edit-evaluation-modal.tsx
+++ b/src/components/modals/edit-evaluation-modal.tsx
@@ -1,5 +1,4 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { XIcon } from 'lucide-react';
 import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -56,13 +55,11 @@ export default function EditEvaluationModal({
       <Modal.Portal>
         <Modal.Overlay />
         <Modal.Content className="w-[840px]">
-          <Modal.Header className="border-border-default flex justify-between border-b">
+          <Modal.Header variant="form">
             <Modal.Title className="font-designer-20b text-text-strong">
               평가 수정
             </Modal.Title>
-            <Modal.Close onClick={() => setOpen(false)}>
-              <XIcon />
-            </Modal.Close>
+            <Modal.CloseButton onClick={() => setOpen(false)} />
           </Modal.Header>
 
           <EditEvaluationForm
@@ -129,7 +126,7 @@ function EditEvaluationForm({
 
   return (
     <FormProvider {...methods}>
-      <Modal.Body className="flex flex-col gap-400 px-400 py-300">
+      <Modal.Body variant="form">
         <form
           id="edit-evaluation"
           className="flex flex-col gap-300"
@@ -165,7 +162,7 @@ function EditEvaluationForm({
         </form>
       </Modal.Body>
 
-      <Modal.Footer className="flex justify-end gap-100">
+      <Modal.Footer variant="form">
         <Modal.Close asChild>
           <Button color="secondary" size="large" onClick={onClose}>
             취소
diff --git a/src/components/modals/edit-homework-modal.tsx b/src/components/modals/edit-homework-modal.tsx
index 2df7f7e0..5dc1c398 100644
--- a/src/components/modals/edit-homework-modal.tsx
+++ b/src/components/modals/edit-homework-modal.tsx
@@ -1,5 +1,4 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { XIcon } from 'lucide-react';
 import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -47,13 +46,11 @@ export default function EditHomeworkModal({
       <Modal.Portal>
         <Modal.Overlay />
         <Modal.Content className="w-[840px]">
-          <Modal.Header className="border-border-default flex justify-between border-b">
+          <Modal.Header variant="form">
             <Modal.Title className="font-designer-20b text-text-strong">
               과제 수정하기
             </Modal.Title>
-            <Modal.Close onClick={() => setOpen(false)}>
-              <XIcon />
-            </Modal.Close>
+            <Modal.CloseButton onClick={() => setOpen(false)} />
           </Modal.Header>
 
           <EditHomeworkForm
@@ -119,7 +116,7 @@ function EditHomeworkForm({
 
   return (
     <FormProvider {...methods}>
-      <Modal.Body className="flex flex-col gap-300 px-400 py-300">
+      <Modal.Body variant="form">
         <form
           id="submit-homework"
           className="flex flex-col gap-300"
@@ -155,7 +152,7 @@ function EditHomeworkForm({
         </form>
       </Modal.Body>
 
-      <Modal.Footer className="flex justify-end gap-100">
+      <Modal.Footer variant="form">
         <Modal.Close asChild>
           <Button color="secondary" size="large" onClick={onClose}>
             취소
diff --git a/src/components/modals/edit-mission-modal.tsx b/src/components/modals/edit-mission-modal.tsx
index 50ca9b7d..a0137702 100644
--- a/src/components/modals/edit-mission-modal.tsx
+++ b/src/components/modals/edit-mission-modal.tsx
@@ -1,6 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import dayjs from 'dayjs';
-import { XIcon } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -74,13 +73,11 @@ export default function EditMissionModal({
       <Modal.Portal>
         <Modal.Overlay />
         <Modal.Content className="w-[840px]">
-          <Modal.Header className="border-border-default flex justify-between border-b">
+          <Modal.Header variant="form">
             <Modal.Title className="font-designer-20b text-text-strong">
               미션 수정
             </Modal.Title>
-            <Modal.Close onClick={() => setOpen(false)}>
-              <XIcon />
-            </Modal.Close>
+            <Modal.CloseButton onClick={() => setOpen(false)} />
           </Modal.Header>
 
           {isLoading ? (
@@ -198,7 +195,7 @@ function EditMissionForm({
 
   return (
     <FormProvider {...methods}>
-      <Modal.Body className="flex flex-col gap-400 px-400 py-300">
+      <Modal.Body variant="form">
         <form
           id="edit-mission"
           className="flex flex-col gap-300"
@@ -286,7 +283,7 @@ function EditMissionForm({
         </form>
       </Modal.Body>
 
-      <Modal.Footer className="flex items-center justify-between">
+      <Modal.Footer variant="form" className="justify-between">
         <span className="font-designer-13r text-text-error">
           미션이 시작되기 전까지 수정이 가능합니다.
         </span>
diff --git a/src/components/modals/end-group-study.tsx b/src/components/modals/end-group-study.tsx
index e1ead90d..dc7febc6 100644
--- a/src/components/modals/end-group-study.tsx
+++ b/src/components/modals/end-group-study.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { XIcon } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { startTransition, useState } from 'react';
 import { useKickMember } from '@/hooks/queries/group-study-member-api';
@@ -83,16 +82,20 @@ function Step1Modal({ onClose, onNext }: Step1ModalProps) {
         className="w-[423px]"
         onInteractOutside={onClose}
       >
-        <Modal.Header className="border-border-default flex justify-center border-b py-200">
+        <Modal.Header variant="alert">
           <Modal.Title>스터디 참여 종료하기</Modal.Title>
         </Modal.Header>
 
-        <Modal.Body className="font-designer-14r text-text-default flex flex-col items-center justify-center gap-100 py-250 text-center">
-          <p>지금까지의 참여 기록이 모두 종료됩니다.</p>
-          <p>조금만 더 도전해보시는 건 어떨까요?</p>
+        <Modal.Body variant="alert" className="flex-col gap-100">
+          <p className="font-designer-14r">
+            지금까지의 참여 기록이 모두 종료됩니다.
+          </p>
+          <p className="font-designer-14r">
+            조금만 더 도전해보시는 건 어떨까요?
+          </p>
         </Modal.Body>
 
-        <Modal.Footer className="flex justify-center gap-200 border-t-0 py-250">
+        <Modal.Footer variant="alert">
           <Button
             color="primary"
             className="font-designer-14b w-[160px]"
@@ -129,11 +132,9 @@ function Step2Modal({ onClose, onNext }: Step2ModalProps) {
         description="스터디 참여 종료하기"
         onInteractOutside={onClose}
       >
-        <Modal.Header className="border-border-default flex items-center justify-between border-b">
+        <Modal.Header variant="form" className="items-center">
           <Modal.Title>스터디 참여 종료하기</Modal.Title>
-          <button onClick={onClose}>
-            <XIcon className="h-5 w-5" />
-          </button>
+          <Modal.CloseButton onClick={onClose} />
         </Modal.Header>
         <Modal.Body className="space-y-400 text-sm">
           <p className="text-text-subtle">
@@ -207,7 +208,7 @@ function Step2Modal({ onClose, onNext }: Step2ModalProps) {
             </ul>
           </section>
         </Modal.Body>
-        <Modal.Footer className="flex justify-end gap-200">
+        <Modal.Footer variant="form" className="gap-200">
           <Button
             type="button"
             color="secondary"
@@ -268,15 +269,15 @@ function Step3Modal({
         className="w-[423px]"
         onInteractOutside={onClose}
       >
-        <Modal.Header className="border-border-default flex justify-center border-b py-200">
+        <Modal.Header variant="alert">
           <Modal.Title>스터디 참여 종료하기</Modal.Title>
         </Modal.Header>
 
-        <Modal.Body className="font-designer-14r text-text-default flex flex-col items-center justify-center gap-100 py-250 text-center">
+        <Modal.Body variant="alert" className="flex-col gap-100">
           <p>해당 스터디는 마이페이지 결제관리에서 확인하실 수 있습니다.</p>
         </Modal.Body>
 
-        <Modal.Footer className="flex justify-center gap-200 border-t-0 py-250">
+        <Modal.Footer variant="alert">
           <Button
             color="primary"
             className="font-designer-14b w-[160px]"
diff --git a/src/components/modals/submit-homework-modal.tsx b/src/components/modals/submit-homework-modal.tsx
index 5fd887c8..92b0f290 100644
--- a/src/components/modals/submit-homework-modal.tsx
+++ b/src/components/modals/submit-homework-modal.tsx
@@ -1,5 +1,4 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { XIcon } from 'lucide-react';
 import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -45,13 +44,11 @@ export default function SubmitHomeworkModal({
       <Modal.Portal>
         <Modal.Overlay />
         <Modal.Content className="w-[840px]">
-          <Modal.Header className="border-border-default flex justify-between border-b">
+          <Modal.Header variant="form">
             <Modal.Title className="font-designer-20b text-text-strong">
               과제 제출하기
             </Modal.Title>
-            <Modal.Close onClick={() => setOpen(false)}>
-              <XIcon />
-            </Modal.Close>
+            <Modal.CloseButton onClick={() => setOpen(false)} />
           </Modal.Header>
 
           <SubmitHomeworkForm
@@ -114,7 +111,7 @@ function SubmitHomeworkForm({
 
   return (
     <FormProvider {...methods}>
-      <Modal.Body className="flex flex-col gap-300 px-400 py-300">
+      <Modal.Body variant="form">
         <form
           id="submit-homework"
           className="flex flex-col gap-300"
@@ -150,7 +147,7 @@ function SubmitHomeworkForm({
         </form>
       </Modal.Body>
 
-      <Modal.Footer className="flex justify-end gap-100">
+      <Modal.Footer variant="form">
         <Modal.Close asChild>
           <Button color="secondary" size="large" onClick={onClose}>
             취소
diff --git a/src/components/ui/modal/index.tsx b/src/components/ui/modal/index.tsx
index 2d41b832..ba7fd000 100644
--- a/src/components/ui/modal/index.tsx
+++ b/src/components/ui/modal/index.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { XIcon } from 'lucide-react';
 import React from 'react';
 
 import { cn } from '@/components/ui/(shadcn)/lib/utils';
@@ -15,6 +16,13 @@ import {
   DialogDescription,
 } from '@/components/ui/(shadcn)/ui/dialog';
 
+/**
+ * Modal variant types:
+ * - 'alert': 확인/삭제형 모달 (w-[423px], 중앙 정렬, 작은 패딩)
+ * - 'form': 폼 입력 모달 (w-[840px], 양끝 정렬, 큰 패딩)
+ */
+export type ModalVariant = 'alert' | 'form';
+
 function ModalRoot({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
@@ -113,31 +121,78 @@ function ModalContent({
   );
 }
 
-function ModalHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function ModalHeader({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & {
+  variant?: ModalVariant;
+}) {
+  const variantClass = {
+    alert: 'border-border-default flex justify-center border-b py-200',
+    form: 'border-border-default flex justify-between border-b',
+  };
+
   return (
     <div
       data-slot="modal-header"
-      className={cn('px-400 pt-400 pb-300', className)}
+      className={cn(
+        'px-400 pt-400 pb-300',
+        variant && variantClass[variant],
+        className,
+      )}
       {...props}
     />
   );
 }
 
-function ModalBody({ className, ...props }: React.ComponentProps<'div'>) {
+function ModalBody({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & {
+  variant?: ModalVariant;
+}) {
+  const variantClass = {
+    alert:
+      'font-designer-14r text-text-default flex justify-center py-250 text-center',
+    form: 'flex flex-col gap-400 px-400 py-300',
+  };
+
   return (
     <div
       data-slot="modal-body"
-      className={cn('overflow-auto px-400 py-300', 'flex-1', className)}
+      className={cn(
+        'overflow-auto px-400 py-300',
+        'flex-1',
+        variant && variantClass[variant],
+        className,
+      )}
       {...props}
     />
   );
 }
 
-function ModalFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function ModalFooter({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & {
+  variant?: ModalVariant;
+}) {
+  const variantClass = {
+    alert: 'flex justify-center gap-200 border-t-0 py-250',
+    form: 'flex justify-end gap-100',
+  };
+
   return (
     <div
       data-slot="modal-footer"
-      className={cn('border-border-default border-t px-400 py-200', className)}
+      className={cn(
+        'border-border-default border-t px-400 py-200',
+        variant && variantClass[variant],
+        className,
+      )}
       {...props}
     />
   );
@@ -156,6 +211,29 @@ function ModalTitle({
   );
 }
 
+/**
+ * Form 모달 헤더 닫기 버튼 컴포넌트
+ * form variant 사용 시 헤더에 X 버튼 추가용
+ */
+function ModalCloseButton({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close> & {
+  className?: string;
+}) {
+  return (
+    <DialogClose
+      data-slot="modal-close-button"
+      className={cn('cursor-pointer', className)}
+      onClick={onClick}
+      {...props}
+    >
+      <XIcon />
+    </DialogClose>
+  );
+}
+
 export const Modal = {
   Root: ModalRoot,
   Trigger: ModalTrigger,
@@ -167,4 +245,5 @@ export const Modal = {
   Footer: ModalFooter,
   Body: ModalBody,
   Title: ModalTitle,
+  CloseButton: ModalCloseButton,
 } as const;