From ccff5a1944c30e3e8a1794d3af2fe6b2bd977c87 Mon Sep 17 00:00:00 2001
From: suwonthugger <127329855+suwonthugger@users.noreply.github.com>
Date: Sat, 21 Dec 2024 21:10:46 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20ModalContents=20=ED=8F=B4=EB=8D=94?=
 =?UTF-8?q?=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD=20(#230)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ButtonAlert}/ButtonAlert.tsx                   |  2 +-
 .../Setting/ModalContentsAlert/Complete.tsx        |  8 ++++----
 .../Setting/ModalContentsAlert/DeleteAccount.tsx   | 14 +++++++-------
 .../Setting/ModalContentsAlert/Logout.tsx          | 10 +++++-----
 .../ModalContentsAlert/ModalContentsAlert.tsx      |  6 +++---
 .../Setting/ModalContentsAlert/types/index.ts      |  4 ++++
 6 files changed, 24 insertions(+), 20 deletions(-)
 rename src/pages/HomePage/ModalContents/Setting/{components => ModalContentsAlert/ButtonAlert}/ButtonAlert.tsx (83%)
 create mode 100644 src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/types/index.ts

diff --git a/src/pages/HomePage/ModalContents/Setting/components/ButtonAlert.tsx b/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/ButtonAlert/ButtonAlert.tsx
similarity index 83%
rename from src/pages/HomePage/ModalContents/Setting/components/ButtonAlert.tsx
rename to src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/ButtonAlert/ButtonAlert.tsx
index cb52cd87..aa54e587 100644
--- a/src/pages/HomePage/ModalContents/Setting/components/ButtonAlert.tsx
+++ b/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/ButtonAlert/ButtonAlert.tsx
@@ -13,7 +13,7 @@ const ButtonAlert = ({ children, variant = 'primary', className = '', ...props }
 	return (
 		<button
 			{...props}
-			className={`subhead-semibold-18 w-full rounded-[5px] px-[4.8rem] py-[1rem] text-center text-white ${buttonStyle} ${className}`}
+			className={`w-full rounded-[5px] px-[4.8rem] py-[1rem] text-center text-white subhead-semibold-18 ${buttonStyle} ${className}`}
 		>
 			{children}
 		</button>
diff --git a/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/Complete.tsx b/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/Complete.tsx
index d32f5436..b27ab6eb 100644
--- a/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/Complete.tsx
+++ b/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/Complete.tsx
@@ -1,11 +1,11 @@
-import { AlertModalProps } from '@/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/ModalContentsAlert';
-import ButtonAlert from '@/pages/HomePage/components/ModalContents/Setting/components/ButtonAlert';
+import ButtonAlert from './ButtonAlert/ButtonAlert';
+import { AlertModalProps } from './types/index';
 
 const Complete = ({ handleClose, userEmail }: AlertModalProps) => (
 	<div className="flex flex-col rounded-[0.8rem] bg-gray-bg-04 p-[3rem]">
 		<div className="w-[47.2rem]">
-			<p className="subhead-bold-22 flex justify-center text-white">{userEmail} 계정이</p>
-			<p className="subhead-bold-22 mb-[3rem] flex justify-center text-white"> 삭제되었습니다.</p>
+			<p className="flex justify-center text-white subhead-bold-22">{userEmail} 계정이</p>
+			<p className="mb-[3rem] flex justify-center text-white subhead-bold-22"> 삭제되었습니다.</p>
 			<ButtonAlert variant="primary" onClick={handleClose}>
 				확인
 			</ButtonAlert>
diff --git a/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/DeleteAccount.tsx b/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/DeleteAccount.tsx
index b09a38cb..a4631f6d 100644
--- a/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/DeleteAccount.tsx
+++ b/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/DeleteAccount.tsx
@@ -2,8 +2,8 @@ import { FormEvent, useRef, useState } from 'react';
 
 import IconWarning from '@/shared/assets/svgs/ic_delete_alert.svg?react';
 
-import { AlertModalProps } from '@/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/ModalContentsAlert';
-import ButtonAlert from '@/pages/HomePage/components/ModalContents/Setting/components/ButtonAlert';
+import ButtonAlert from './ButtonAlert/ButtonAlert';
+import { AlertModalProps } from './types/index';
 
 const DeleteAccount = ({ handleClose, userEmail }: AlertModalProps) => {
 	const inputRef = useRef<HTMLInputElement | null>(null);
@@ -27,22 +27,22 @@ const DeleteAccount = ({ handleClose, userEmail }: AlertModalProps) => {
 				<div className="mb-[3rem] flex justify-center">
 					<IconWarning width="5.4rem" />
 				</div>
-				<p className="subhead-bold-22 flex justify-center text-white">{userEmail} 계정이</p>
-				<p className="subhead-bold-22 mb-[3rem] flex justify-center text-white">
+				<p className="flex justify-center text-white subhead-bold-22">{userEmail} 계정이</p>
+				<p className="mb-[3rem] flex justify-center text-white subhead-bold-22">
 					영구적으로 삭제됩니다. 삭제하시겠습니까?
 				</p>
-				<p className="subhead-med-18 mb-[1rem] flex justify-center text-gray-05">이메일을 입력하여 확인해주세요.</p>
+				<p className="mb-[1rem] flex justify-center text-gray-05 subhead-med-18">이메일을 입력하여 확인해주세요.</p>
 				<form action="" onSubmit={handleSubmit}>
 					<input
 						ref={inputRef}
 						type="text"
 						placeholder={userEmail}
 						onChange={handleInputChange}
-						className={`${error ? 'border-[1px] border-error-01' : ''} subhead-med-18 placeholder-text-gray-03 w-full rounded-[5px] bg-gray-bg-02 p-[1rem] text-white outline-none`}
+						className={`${error ? 'border-[1px] border-error-01' : ''} placeholder-text-gray-03 w-full rounded-[5px] bg-gray-bg-02 p-[1rem] text-white outline-none subhead-med-18`}
 					/>
 					{error && (
 						<div className="absolute mt-[1rem]">
-							<p className="body-reg-16 mb-[3rem] text-error-01">계속하려면 “{userEmail}”을(를) 입력하세요.</p>
+							<p className="mb-[3rem] text-error-01 body-reg-16">계속하려면 “{userEmail}”을(를) 입력하세요.</p>
 						</div>
 					)}
 					<div className="mt-[5.7rem] flex gap-[1rem]">
diff --git a/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/Logout.tsx b/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/Logout.tsx
index 472d5942..6c9e99e5 100644
--- a/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/Logout.tsx
+++ b/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/Logout.tsx
@@ -1,13 +1,13 @@
-import { AlertModalProps } from '@/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/ModalContentsAlert';
-import ButtonAlert from '@/pages/HomePage/components/ModalContents/Setting/components/ButtonAlert';
+import ButtonAlert from './ButtonAlert/ButtonAlert';
+import { AlertModalProps } from './types/index';
 
 const Logout = ({ handleClose, userEmail }: AlertModalProps) => (
 	<div className="flex flex-col rounded-[0.8rem] bg-gray-bg-04 p-[3rem]">
-		<p className="subhead-bold-22 flex justify-center text-white">{userEmail} 계정이</p>
-		<p className="subhead-bold-22 mb-[1rem] flex justify-center text-white">
+		<p className="flex justify-center text-white subhead-bold-22">{userEmail} 계정이</p>
+		<p className="mb-[1rem] flex justify-center text-white subhead-bold-22">
 			본 기기를 포함한 모든 기기에서 로그아웃됩니다.
 		</p>
-		<p className="subhead-med-18 mb-[3rem] flex justify-center text-gray-05">로그아웃 하시겠습니까?</p>
+		<p className="mb-[3rem] flex justify-center text-gray-05 subhead-med-18">로그아웃 하시겠습니까?</p>
 		<div className="flex gap-[1rem]">
 			<ButtonAlert variant="danger" onClick={handleClose}>
 				로그아웃
diff --git a/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/ModalContentsAlert.tsx b/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/ModalContentsAlert.tsx
index 2168ef11..d19de14a 100644
--- a/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/ModalContentsAlert.tsx
+++ b/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/ModalContentsAlert.tsx
@@ -1,6 +1,6 @@
-import Complete from '@/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/Complete';
-import DeleteAccount from '@/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/DeleteAccount';
-import Logout from '@/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/Logout';
+import Complete from './Complete';
+import DeleteAccount from './DeleteAccount';
+import Logout from './Logout';
 
 export interface AlertModalProps {
 	handleClose?: () => void;
diff --git a/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/types/index.ts b/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/types/index.ts
new file mode 100644
index 00000000..0a0dd195
--- /dev/null
+++ b/src/pages/HomePage/ModalContents/Setting/ModalContentsAlert/types/index.ts
@@ -0,0 +1,4 @@
+export interface AlertModalProps {
+	handleClose?: () => void;
+	userEmail?: string;
+}