1+ import { useState } from 'react' ;
2+ import { useDeleteUser } from '../../api/userSetting/useDeleteUser' ;
3+
4+ interface DeleteAccountModalProps {
5+ isOpen : boolean ;
6+ onClose : ( ) => void ;
7+ }
8+
9+ export default function DeleteAccountModal ( { isOpen, onClose } : DeleteAccountModalProps ) {
10+ const [ confirmText , setConfirmText ] = useState ( '' ) ;
11+ const { deleteUserAccount, isLoading } = useDeleteUser ( ) ;
12+
13+ const CONFIRM_TEXT = '계정삭제' ;
14+ const isConfirmValid = confirmText === CONFIRM_TEXT ;
15+
16+ const handleDelete = ( ) => {
17+ if ( isConfirmValid ) {
18+ deleteUserAccount ( ) ;
19+ onClose ( ) ; // 모달 닫기
20+ }
21+ } ;
22+
23+ const handleClose = ( ) => {
24+ setConfirmText ( '' ) ;
25+ onClose ( ) ;
26+ } ;
27+
28+ if ( ! isOpen ) return null ;
29+
30+ return (
31+ < div style = { {
32+ position : 'fixed' ,
33+ top : 0 ,
34+ left : 0 ,
35+ right : 0 ,
36+ bottom : 0 ,
37+ backgroundColor : 'rgba(0, 0, 0, 0.5)' ,
38+ display : 'flex' ,
39+ alignItems : 'center' ,
40+ justifyContent : 'center' ,
41+ zIndex : 1000
42+ } } >
43+ < div style = { {
44+ backgroundColor : 'white' ,
45+ padding : '30px' ,
46+ borderRadius : '10px' ,
47+ maxWidth : '400px' ,
48+ width : '90%' ,
49+ boxShadow : '0 4px 20px rgba(0, 0, 0, 0.1)'
50+ } } >
51+ < h2 style = { { color : '#dc3545' , marginBottom : '20px' , textAlign : 'center' } } >
52+ ⚠️ 계정 삭제
53+ </ h2 >
54+
55+ < div style = { { marginBottom : '20px' , lineHeight : '1.6' } } >
56+ < p style = { { marginBottom : '15px' } } >
57+ < strong > 계정을 삭제하면 다음과 같은 데이터가 영구적으로 삭제됩니다:</ strong >
58+ </ p >
59+ < ul style = { { paddingLeft : '20px' , marginBottom : '15px' } } >
60+ < li > 프로필 정보</ li >
61+ < li > 관심사 설정</ li >
62+ < li > 포인트 및 활동 기록</ li >
63+ < li > 모든 개인 데이터</ li >
64+ </ ul >
65+ < p style = { { color : '#dc3545' , fontWeight : 'bold' } } >
66+ 이 작업은 되돌릴 수 없습니다.
67+ </ p >
68+ </ div >
69+
70+ < div style = { { marginBottom : '20px' } } >
71+ < label style = { { display : 'block' , marginBottom : '10px' , fontWeight : 'bold' } } >
72+ 계속하려면 '< span style = { { color : '#dc3545' } } > { CONFIRM_TEXT } </ span > '를 입력하세요:
73+ </ label >
74+ < input
75+ type = "text"
76+ value = { confirmText }
77+ onChange = { ( e ) => setConfirmText ( e . target . value ) }
78+ placeholder = { CONFIRM_TEXT }
79+ style = { {
80+ width : '100%' ,
81+ padding : '10px' ,
82+ border : '2px solid #ddd' ,
83+ borderRadius : '5px' ,
84+ fontSize : '16px' ,
85+ borderColor : isConfirmValid ? '#28a745' : '#ddd'
86+ } }
87+ disabled = { isLoading }
88+ />
89+ </ div >
90+
91+ < div style = { { display : 'flex' , gap : '10px' , justifyContent : 'flex-end' } } >
92+ < button
93+ onClick = { handleClose }
94+ disabled = { isLoading }
95+ style = { {
96+ padding : '10px 20px' ,
97+ backgroundColor : '#6c757d' ,
98+ color : 'white' ,
99+ border : 'none' ,
100+ borderRadius : '5px' ,
101+ cursor : isLoading ? 'not-allowed' : 'pointer' ,
102+ opacity : isLoading ? 0.6 : 1
103+ } }
104+ >
105+ 취소
106+ </ button >
107+
108+ < button
109+ onClick = { handleDelete }
110+ disabled = { ! isConfirmValid || isLoading }
111+ style = { {
112+ padding : '10px 20px' ,
113+ backgroundColor : isConfirmValid ? '#dc3545' : '#ccc' ,
114+ color : 'white' ,
115+ border : 'none' ,
116+ borderRadius : '5px' ,
117+ cursor : ( ! isConfirmValid || isLoading ) ? 'not-allowed' : 'pointer' ,
118+ opacity : ( ! isConfirmValid || isLoading ) ? 0.6 : 1
119+ } }
120+ >
121+ { isLoading ? '삭제 중...' : '계정 삭제' }
122+ </ button >
123+ </ div >
124+ </ div >
125+ </ div >
126+ ) ;
127+ }
0 commit comments