refactor: ModalContents 폴더 구조 변경 (#230)

morib-in · Dec 21, 2024 · ccff5a1 · ccff5a1
1 parent a6e3331
commit ccff5a1
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 20 deletions.
diff --git a/...ntents/Setting/components/ButtonAlert.tsx → ...ContentsAlert/ButtonAlert/ButtonAlert.tsx b/...ntents/Setting/components/ButtonAlert.tsx → ...ContentsAlert/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,4 @@
+export interface AlertModalProps {
+	handleClose?: () => void;
+	userEmail?: string;
+}