Skip to content

Commit 9ceb44c

Browse files
gustn99gustn99
authored
Merge pull request #124 from oodd-team/feat/OD-173
[OD-173] profile, profileEdit, accountCancel, accountSetting getCurrentUserId로 수정
2 parents f889997 + 8541088 commit 9ceb44c

8 files changed

Lines changed: 588 additions & 592 deletions

File tree

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

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

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

88
import back from '@assets/arrow/left.svg';
9-
109
import BottomButton from '@components/BottomButton/index';
1110
import { OODDFrame } from '@components/Frame/Frame';
1211
import Modal from '@components/Modal/index';
1312
import { StyledText } from '@components/Text/StyledText';
1413
import TopBar from '@components/TopBar/index';
1514

1615
import {
17-
CancelContainer,
18-
SubTitle,
19-
Text,
20-
InfoBox,
21-
InfoItem,
22-
CheckboxWrapper,
23-
CheckboxInput,
24-
Label,
25-
StyledCheckboxText,
26-
StyledDiv,
27-
} from './styles'; // 상대 경로 index 명시
16+
CancelContainer,
17+
SubTitle,
18+
Text,
19+
InfoBox,
20+
InfoItem,
21+
CheckboxWrapper,
22+
CheckboxInput,
23+
Label,
24+
StyledCheckboxText,
25+
StyledDiv,
26+
} from './styles';
2827

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

136-
export default AccountCancel;
131+
export default AccountCancel;

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,12 @@ const AccountEdit: React.FC = () => {
4747
</SectionTitle>
4848
<SNSInfo>
4949
<SnsConnection>
50-
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
50+
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.tertiary}>
5151
SNS 연결
5252
</StyledText>
5353
</SnsConnection>
5454
<Text>
55-
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
55+
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.tertiary}>
5656
연결된 SNS계정으로 로그인되었습니다.
5757
</StyledText>
5858
</Text>
@@ -71,15 +71,15 @@ const AccountEdit: React.FC = () => {
7171
<MemberInfo>
7272
<MemberInfoRow>
7373
<Label>
74-
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
74+
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.tertiary}>
7575
이름
7676
</StyledText>
7777
</Label>
7878
<Info>-</Info>
7979
</MemberInfoRow>
8080
<MemberInfoRow>
8181
<Label>
82-
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
82+
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.tertiary}>
8383
연락처
8484
</StyledText>
8585
</Label>

‎src/pages/Account/AccountEdit/styles.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const SNSIcon = styled.img`
4646

4747
export const Text = styled.div`
4848
font-size: 0.875rem;
49-
color: ${({ theme }) => theme.colors.tertiary};
49+
color: ${({ theme }) => theme.colors.text.tertiary};
5050
margin-top: 2.1875rem;
5151
text-align: left;
5252
`;

0 commit comments

Comments
 (0)