refactor: Update user delete modal layout and content

Myongji-Graduate · Jun 30, 2024 · a4090b5 · a4090b5
1 parent a91daab
commit a4090b5
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git a/app/business/services/user/user.command.ts b/app/business/services/user/user.command.ts
@@ -23,6 +23,7 @@ export async function signOut() {
   redirect('/sign-in');
 }
 
+// 동기화 -> 서버 측 에러 인지 확인 필요
 export async function deleteUser(prevState: FormState, formData: FormData): Promise<FormState> {
   try {
     const body: UserDeleteRequestBody = {

diff --git a/app/ui/user/user-info-navigator/user-delete-modal.tsx b/app/ui/user/user-info-navigator/user-delete-modal.tsx
@@ -3,23 +3,25 @@ import Modal from '../../view/molecule/modal/modal';
 import Form from '../../view/molecule/form';
 import { deleteUser } from '@/app/business/services/user/user.command';
 import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
+import TitleBox from '../../view/molecule/title-box/title-box';
 
 export default function UserDeleteModal() {
   return (
     <Modal modalKey={DIALOG_KEY.USER_DELETE}>
-      <div className="max-w-sm mx-auto my-12 p-6 border rounded-lg shadow-md bg-white">
-        <h2 className="text-xl font-bold text-center">회원 탈퇴</h2>
-        <div className="h-1 w-10 bg-blue-600 mx-auto my-3" />
-        <p className="text-sm text-center my-4">
-          회원탈퇴를 진행하시겠습니까? 탈퇴를 진행하려면 비밀번호 입력이 필요합니다.
-        </p>
-        <div className="my-4">
-          <Form failMessageControl={'toast'} action={deleteUser} id={'user-delete'}>
-            <Form.PasswordInput label="비밀번호" id="password" placeholder="비밀번호를 입력하세요" required={true} />
-            <Form.SubmitButton label="탈퇴하기" position="center" variant="primary" />
-          </Form>
-        </div>
-        <p className="text-xs text-center my-4">정보를 누락하여 서비스를 이용해 주셔서 감사합니다.</p>
+      <div className="max-lg:w-72 lg:p-6">
+        <TitleBox title="회원 탈퇴">
+          <div className="text-sm text-center my-4">
+            <p>회원탈퇴를 진행하시겠습니까?</p>
+            <p>탈퇴를 진행하려면 비밀번호 입력이 필요합니다.</p>
+          </div>
+          <div className="w-full">
+            <Form className="space-y-4" failMessageControl={'toast'} action={deleteUser} id={'user-delete'}>
+              <Form.PasswordInput label="비밀번호" id="password" placeholder="비밀번호를 입력하세요" required={true} />
+              <Form.SubmitButton label="탈퇴하기" position="center" variant="primary" />
+            </Form>
+          </div>
+          <p className="text-xs text-center my-4">졸업을 부탁해 서비스를 이용해 주셔서 감사합니다.</p>
+        </TitleBox>
       </div>
     </Modal>
   );