Skip to content

Commit 6be0f0c

Browse files
gustn99gustn99
committed
Fix: pages 린트 오류 수정
1 parent da6141f commit 6be0f0c

9 files changed

Lines changed: 583 additions & 580 deletions

File tree

‎src/pages/Account/AccountCancel/index.tsx‎

Lines changed: 114 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -2,130 +2,132 @@ import { useState } from 'react';
22
import { useNavigate } from 'react-router-dom';
33

44
import theme from '@styles/theme';
5-
import { getCurrentUserId } from '@utils/getCurrentUserId';
5+
66
import { patchUserWithdrawApi } from '@apis/user';
7+
import { getCurrentUserId } from '@utils/getCurrentUserId';
78

89
import back from '@assets/arrow/left.svg';
10+
911
import BottomButton from '@components/BottomButton/index';
1012
import { OODDFrame } from '@components/Frame/Frame';
1113
import Modal from '@components/Modal/index';
1214
import { StyledText } from '@components/Text/StyledText';
1315
import TopBar from '@components/TopBar/index';
1416

1517
import {
16-
CancelContainer,
17-
SubTitle,
18-
Text,
19-
InfoBox,
20-
InfoItem,
21-
CheckboxWrapper,
22-
CheckboxInput,
23-
Label,
24-
StyledCheckboxText,
25-
StyledDiv,
18+
CancelContainer,
19+
SubTitle,
20+
Text,
21+
InfoBox,
22+
InfoItem,
23+
CheckboxWrapper,
24+
CheckboxInput,
25+
Label,
26+
StyledCheckboxText,
27+
StyledDiv,
2628
} from './styles';
2729

2830
const AccountCancel: React.FC = () => {
29-
const [isChecked, setIsChecked] = useState(false);
30-
const [modalContent, setModalContent] = useState<string | null>(null);
31-
const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
32-
const navigate = useNavigate();
33-
34-
const handleCheckboxChange = () => {
35-
setIsChecked(!isChecked);
36-
};
37-
38-
const handleModalClose = () => {
39-
setIsModalVisible(false);
40-
setModalContent(null);
41-
};
42-
43-
const handleDeleteAccount = async () => {
44-
try {
45-
if (!isChecked) {
46-
setModalContent('탈퇴 안내사항에 동의해야 합니다.');
47-
setIsModalVisible(true);
48-
return;
49-
}
50-
51-
const currentUserId = getCurrentUserId();
52-
const token = localStorage.getItem('new_jwt_token');
53-
54-
if (!currentUserId || !token) {
55-
setModalContent('사용자 정보를 찾을 수 없습니다.');
56-
setIsModalVisible(true);
57-
return;
58-
}
59-
60-
const response = await patchUserWithdrawApi(currentUserId);
61-
62-
if (response.isSuccess) {
63-
setModalContent('계정이 성공적으로 삭제되었습니다.');
64-
setIsModalVisible(true);
65-
localStorage.clear();
66-
67-
setTimeout(() => {
68-
navigate('/login');
69-
}, 2000);
70-
} else {
71-
setModalContent(response.code || '알 수 없는 오류가 발생했습니다.');
72-
setIsModalVisible(true);
73-
}
74-
} catch (error) {
75-
console.error('계정 삭제하는데 오류남:', error);
76-
setModalContent('계정을 삭제하는 동안 오류가 발생했습니다. 다시 시도해 주세요.');
77-
setIsModalVisible(true);
78-
}
79-
};
80-
81-
return (
82-
<OODDFrame>
83-
<CancelContainer>
84-
<TopBar text="회원 탈퇴" LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />
85-
<SubTitle>
86-
<StyledText as="div" $textTheme={{ style: 'headline2-medium' }} color={theme.colors.primary}>
87-
OOTD 탈퇴 전 확인하세요!
88-
</StyledText>
89-
</SubTitle>
90-
<Text as="div">
91-
<StyledText as="div" $textTheme={{ style: 'caption1-regular' }} color={theme.colors.primary}>
92-
{`탈퇴하시면 이용 중인 서비스가 폐쇄되며,\n모든 데이터는 복구할 수 없습니다.`}
93-
</StyledText>
94-
</Text>
95-
<InfoBox>
96-
<InfoItem as="div">
97-
<StyledText
98-
as="div"
99-
$textTheme={{ style: 'body1-medium' }}
100-
color={theme.colors.primary}
101-
style={{ whiteSpace: 'nowrap' }}
102-
>
103-
지금까지 OODD를 이용해주셔서 감사합니다!
104-
</StyledText>
105-
</InfoItem>
106-
</InfoBox>
107-
<CheckboxWrapper as="div">
108-
<Label>
109-
<CheckboxInput type="checkbox" checked={isChecked} onChange={handleCheckboxChange} />
110-
<StyledCheckboxText as="span" $textTheme={{ style: 'body2-regular' }}>
111-
안내사항을 모두 확인하였으며, 이에 동의합니다.
112-
</StyledCheckboxText>
113-
</Label>
114-
</CheckboxWrapper>
115-
</CancelContainer>
116-
<StyledDiv isChecked={isChecked}>
117-
<BottomButton content="탈퇴하기" onClick={handleDeleteAccount} disabled={!isChecked} />
118-
</StyledDiv>
119-
{isModalVisible && (
120-
<Modal
121-
content={modalContent || ''}
122-
onClose={handleModalClose}
123-
isCloseButtonVisible={true}
124-
button={{ content: '확인', onClick: handleModalClose }}
125-
/>
126-
)}
127-
</OODDFrame>
128-
);
31+
const [isChecked, setIsChecked] = useState(false);
32+
const [modalContent, setModalContent] = useState<string | null>(null);
33+
const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
34+
const navigate = useNavigate();
35+
36+
const handleCheckboxChange = () => {
37+
setIsChecked(!isChecked);
38+
};
39+
40+
const handleModalClose = () => {
41+
setIsModalVisible(false);
42+
setModalContent(null);
43+
};
44+
45+
const handleDeleteAccount = async () => {
46+
try {
47+
if (!isChecked) {
48+
setModalContent('탈퇴 안내사항에 동의해야 합니다.');
49+
setIsModalVisible(true);
50+
return;
51+
}
52+
53+
const currentUserId = getCurrentUserId();
54+
const token = localStorage.getItem('new_jwt_token');
55+
56+
if (!currentUserId || !token) {
57+
setModalContent('사용자 정보를 찾을 수 없습니다.');
58+
setIsModalVisible(true);
59+
return;
60+
}
61+
62+
const response = await patchUserWithdrawApi(currentUserId);
63+
64+
if (response.isSuccess) {
65+
setModalContent('계정이 성공적으로 삭제되었습니다.');
66+
setIsModalVisible(true);
67+
localStorage.clear();
68+
69+
setTimeout(() => {
70+
navigate('/login');
71+
}, 2000);
72+
} else {
73+
setModalContent(response.code || '알 수 없는 오류가 발생했습니다.');
74+
setIsModalVisible(true);
75+
}
76+
} catch (error) {
77+
console.error('계정 삭제하는데 오류남:', error);
78+
setModalContent('계정을 삭제하는 동안 오류가 발생했습니다. 다시 시도해 주세요.');
79+
setIsModalVisible(true);
80+
}
81+
};
82+
83+
return (
84+
<OODDFrame>
85+
<CancelContainer>
86+
<TopBar text="회원 탈퇴" LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />
87+
<SubTitle>
88+
<StyledText as="div" $textTheme={{ style: 'headline2-medium' }} color={theme.colors.primary}>
89+
OOTD 탈퇴 전 확인하세요!
90+
</StyledText>
91+
</SubTitle>
92+
<Text as="div">
93+
<StyledText as="div" $textTheme={{ style: 'caption1-regular' }} color={theme.colors.primary}>
94+
{`탈퇴하시면 이용 중인 서비스가 폐쇄되며,\n모든 데이터는 복구할 수 없습니다.`}
95+
</StyledText>
96+
</Text>
97+
<InfoBox>
98+
<InfoItem as="div">
99+
<StyledText
100+
as="div"
101+
$textTheme={{ style: 'body1-medium' }}
102+
color={theme.colors.primary}
103+
style={{ whiteSpace: 'nowrap' }}
104+
>
105+
지금까지 OODD를 이용해주셔서 감사합니다!
106+
</StyledText>
107+
</InfoItem>
108+
</InfoBox>
109+
<CheckboxWrapper as="div">
110+
<Label>
111+
<CheckboxInput type="checkbox" checked={isChecked} onChange={handleCheckboxChange} />
112+
<StyledCheckboxText as="span" $textTheme={{ style: 'body2-regular' }}>
113+
안내사항을 모두 확인하였으며, 이에 동의합니다.
114+
</StyledCheckboxText>
115+
</Label>
116+
</CheckboxWrapper>
117+
</CancelContainer>
118+
<StyledDiv isChecked={isChecked}>
119+
<BottomButton content="탈퇴하기" onClick={handleDeleteAccount} disabled={!isChecked} />
120+
</StyledDiv>
121+
{isModalVisible && (
122+
<Modal
123+
content={modalContent || ''}
124+
onClose={handleModalClose}
125+
isCloseButtonVisible={true}
126+
button={{ content: '확인', onClick: handleModalClose }}
127+
/>
128+
)}
129+
</OODDFrame>
130+
);
129131
};
130132

131-
export default AccountCancel;
133+
export default AccountCancel;

0 commit comments

Comments
 (0)