code-zero-to-one · HA-SEUNG-JEONG · Feb 7, 2026 · Feb 7, 2026
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}>
             취소