[ Style ] 설정 뷰 내의 경고 모달 뷰 구현 (#227)

* feat: alert모달 내 버튼 공통 컴포넌트 생성 (#222)

* feat: ModalContentsAlert 생성 (#222)

* feat: input창 에러일 때 추가

* fix: 필요없는 코드 삭제 (#222)

* refactor: 약간의 로직분리 .. (#222)

* code review: user email prop 추가, 모달 컴포넌트 하나의 객체로 export 하도록 수정

* style: 스타일 누락된 것 추가

* refactor: userEmail props 추가 누락된 부분 수정

src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/Complete.tsx

@@ -0,0 +1,16 @@
+import { AlertModalProps } from '@/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/ModalContentsAlert';
+import ButtonAlert from '@/pages/HomePage/components/ModalContents/Setting/components/ButtonAlert';
+
+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>
+			<ButtonAlert variant="primary" onClick={handleClose}>
+				확인
+			</ButtonAlert>
+		</div>
+	</div>
+);
+
+export default Complete;

src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/DeleteAccount.tsx

@@ -0,0 +1,62 @@
+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';
+
+const DeleteAccount = ({ handleClose, userEmail }: AlertModalProps) => {
+	const inputRef = useRef<HTMLInputElement | null>(null);
+	const [error, setError] = useState(false);
+	const handleSubmit = (e: FormEvent) => {
+		e.preventDefault();
+
+		if (String(inputRef.current?.value) !== userEmail) {
+			setError(true);
+		}
+	};
+
+	const handleInputChange = () => {
+		if (inputRef.current) {
+			setError(false);
+		}
+	};
+	return (
+		<div className="flex flex-col rounded-[0.8rem] bg-gray-bg-04 p-[3rem]">
+			<div className="w-[62rem]">
+				<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>
+				<p className="subhead-med-18 mb-[1rem] flex justify-center text-gray-05">이메일을 입력하여 확인해주세요.</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`}
+					/>
+					{error && (
+						<div className="absolute mt-[1rem]">
+							<p className="body-reg-16 mb-[3rem] text-error-01">계속하려면 “{userEmail}”을(를) 입력하세요.</p>
+						</div>
+					)}
+					<div className="mt-[5.7rem] flex gap-[1rem]">
+						<ButtonAlert variant="danger" onClick={handleClose} type="submit">
+							계정 영구 삭제
+						</ButtonAlert>
+						<ButtonAlert variant="primary" onClick={handleClose}>
+							취소하기
+						</ButtonAlert>
+					</div>
+				</form>
+			</div>
+		</div>
+	);
+};
+
+export default DeleteAccount;

src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/Logout.tsx

@@ -0,0 +1,22 @@
+import { AlertModalProps } from '@/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/ModalContentsAlert';
+import ButtonAlert from '@/pages/HomePage/components/ModalContents/Setting/components/ButtonAlert';
+
+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>
+		<p className="subhead-med-18 mb-[3rem] flex justify-center text-gray-05">로그아웃 하시겠습니까?</p>
+		<div className="flex gap-[1rem]">
+			<ButtonAlert variant="danger" onClick={handleClose}>
+				로그아웃
+			</ButtonAlert>
+			<ButtonAlert variant="primary" onClick={handleClose}>
+				취소하기
+			</ButtonAlert>
+		</div>
+	</div>
+);
+
+export default Logout;

src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/ModalContentsAlert.tsx

@@ -0,0 +1,16 @@
+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';
+
+export interface AlertModalProps {
+	handleClose?: () => void;
+	userEmail?: string;
+}
+
+const ModalContentsAlert = {
+	Logout: Logout,
+	DeleteAccount: DeleteAccount,
+	Complete: Complete,
+};
+
+export default ModalContentsAlert;

src/pages/HomePage/components/ModalContents/Setting/components/ButtonAlert.tsx

@@ -0,0 +1,23 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+interface ButtonAlertProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+	variant?: 'primary' | 'danger';
+	children: ReactNode;
+	className?: string;
+}
+
+const ButtonAlert = ({ children, variant = 'primary', className = '', ...props }: ButtonAlertProps) => {
+	const primaryStyle = 'bg-gray-bg-06 hover:bg-gray-bg-04 active:bg-gray-bg-05';
+	const dangerStyle = 'bg-error-01 hover:bg-error-03 active:bg-error-03 active:text-gray-04';
+	const buttonStyle = variant === 'primary' ? primaryStyle : dangerStyle;
+	return (
+		<button
+			{...props}
+			className={`subhead-semibold-18 w-full rounded-[5px] px-[4.8rem] py-[1rem] text-center text-white ${buttonStyle} ${className}`}
+		>
+			{children}
+		</button>
+	);
+};
+
+export default ButtonAlert;