Skip to content

[OD-173] profile, profileEdit, accountCancel, accountSetting getCurrentUserId로 수정 #124

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gustn99 merged 6 commits into from
Jan 5, 2025
Merged

[OD-173] profile, profileEdit, accountCancel, accountSetting getCurrentUserId로 수정 #124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dfaa803
refctor: accountCancel currentId
lalaurrel Dec 29, 2024
2b0feb6
refactor: accountSetting currentId
lalaurrel Dec 29, 2024
694731b
refactor: profile currentId
lalaurrel Dec 29, 2024
cc9ed23
refactor: 글씨 색상 수정
lalaurrel Dec 29, 2024
6e0027e
refactor: profileEdit currentId
lalaurrel Dec 29, 2024
8541088
refactor: text.tertiar로 접근
lalaurrel Jan 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
231 changes: 113 additions & 118 deletions src/pages/Account/AccountCancel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,135 +2,130 @@ import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

import theme from '@styles/theme';

import { getCurrentUserId } from '@utils/getCurrentUserId';
import { patchUserWithdrawApi } from '@apis/user';

import back from '@assets/arrow/left.svg';

import BottomButton from '@components/BottomButton/index';
import { OODDFrame } from '@components/Frame/Frame';
import Modal from '@components/Modal/index';
import { StyledText } from '@components/Text/StyledText';
import TopBar from '@components/TopBar/index';

import {
CancelContainer,
SubTitle,
Text,
InfoBox,
InfoItem,
CheckboxWrapper,
CheckboxInput,
Label,
StyledCheckboxText,
StyledDiv,
} from './styles'; // 상대 경로 index 명시
CancelContainer,
SubTitle,
Text,
InfoBox,
InfoItem,
CheckboxWrapper,
CheckboxInput,
Label,
StyledCheckboxText,
StyledDiv,
} from './styles';

const AccountCancel: React.FC = () => {
const [isChecked, setIsChecked] = useState(false);
const [modalContent, setModalContent] = useState<string | null>(null);
const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
const navigate = useNavigate();

const handleCheckboxChange = () => {
setIsChecked(!isChecked);
};

const handleModalClose = () => {
setIsModalVisible(false);
setModalContent(null);
};

const handleDeleteAccount = async () => {
try {
if (!isChecked) {
setModalContent('탈퇴 안내사항에 동의해야 합니다.');
setIsModalVisible(true);
return;
}

const storedUserId = Number(localStorage.getItem('my_id'));
const token = localStorage.getItem('new_jwt_token');

if (!storedUserId || !token) {
setModalContent('사용자 정보를 찾을 수 없습니다.');
setIsModalVisible(true);
return;
}

// API 요청
const response = await patchUserWithdrawApi(storedUserId);

if (response.isSuccess) {
setModalContent('계정이 성공적으로 삭제되었습니다.');
setIsModalVisible(true);

// 계정 삭제 시 localStorage에서 사용자 정보 제거
localStorage.clear();

setTimeout(() => {
navigate('/login');
}, 2000);
} else {
setModalContent(response.code || '알 수 없는 오류가 발생했습니다.');
setIsModalVisible(true);
}
} catch (error) {
console.error('계정 삭제하는데 오류남:', error);
setModalContent('계정을 삭제하는 동안 오류가 발생했습니다. 다시 시도해 주세요.');
setIsModalVisible(true);
}
};

return (
<OODDFrame>
<CancelContainer>
<TopBar text="회원 탈퇴" LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />

<SubTitle>
<StyledText as="div" $textTheme={{ style: 'headline2-medium' }} color={theme.colors.primary}>
OOTD 탈퇴 전 확인하세요!
</StyledText>
</SubTitle>
<Text as="div">
<StyledText as="div" $textTheme={{ style: 'caption1-regular' }} color={theme.colors.primary}>
{`탈퇴하시면 이용 중인 서비스가 폐쇄되며,\n모든 데이터는 복구할 수 없습니다.`}
</StyledText>
</Text>
<InfoBox>
<InfoItem as="div">
<StyledText
as="div"
$textTheme={{ style: 'body1-medium' }}
color={theme.colors.primary}
style={{ whiteSpace: 'nowrap' }}
>
지금까지 OODD를 이용해주셔서 감사합니다!
</StyledText>
</InfoItem>
</InfoBox>
<CheckboxWrapper as="div">
<Label>
<CheckboxInput type="checkbox" checked={isChecked} onChange={handleCheckboxChange} />
<StyledCheckboxText as="span" $textTheme={{ style: 'body2-regular' }}>
안내사항을 모두 확인하였으며, 이에 동의합니다.
</StyledCheckboxText>
</Label>
</CheckboxWrapper>
</CancelContainer>
<StyledDiv isChecked={isChecked}>
<BottomButton content="탈퇴하기" onClick={handleDeleteAccount} disabled={!isChecked} />
</StyledDiv>
{isModalVisible && (
<Modal
content={modalContent || ''} // null일 경우 빈 문자열로 처리
onClose={handleModalClose}
isCloseButtonVisible={true}
button={{ content: '확인', onClick: handleModalClose }}
/>
)}
</OODDFrame>
);
const [isChecked, setIsChecked] = useState(false);
const [modalContent, setModalContent] = useState<string | null>(null);
const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
const navigate = useNavigate();

const handleCheckboxChange = () => {
setIsChecked(!isChecked);
};

const handleModalClose = () => {
setIsModalVisible(false);
setModalContent(null);
};

const handleDeleteAccount = async () => {
try {
if (!isChecked) {
setModalContent('탈퇴 안내사항에 동의해야 합니다.');
setIsModalVisible(true);
return;
}

const currentUserId = getCurrentUserId();
const token = localStorage.getItem('new_jwt_token');

if (!currentUserId || !token) {
setModalContent('사용자 정보를 찾을 수 없습니다.');
setIsModalVisible(true);
return;
}

const response = await patchUserWithdrawApi(currentUserId);

if (response.isSuccess) {
setModalContent('계정이 성공적으로 삭제되었습니다.');
setIsModalVisible(true);
localStorage.clear();

setTimeout(() => {
navigate('/login');
}, 2000);
} else {
setModalContent(response.code || '알 수 없는 오류가 발생했습니다.');
setIsModalVisible(true);
}
} catch (error) {
console.error('계정 삭제하는데 오류남:', error);
setModalContent('계정을 삭제하는 동안 오류가 발생했습니다. 다시 시도해 주세요.');
setIsModalVisible(true);
}
};

return (
<OODDFrame>
<CancelContainer>
<TopBar text="회원 탈퇴" LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />
<SubTitle>
<StyledText as="div" $textTheme={{ style: 'headline2-medium' }} color={theme.colors.primary}>
OOTD 탈퇴 전 확인하세요!
</StyledText>
</SubTitle>
<Text as="div">
<StyledText as="div" $textTheme={{ style: 'caption1-regular' }} color={theme.colors.primary}>
{`탈퇴하시면 이용 중인 서비스가 폐쇄되며,\n모든 데이터는 복구할 수 없습니다.`}
</StyledText>
</Text>
<InfoBox>
<InfoItem as="div">
<StyledText
as="div"
$textTheme={{ style: 'body1-medium' }}
color={theme.colors.primary}
style={{ whiteSpace: 'nowrap' }}
>
지금까지 OODD를 이용해주셔서 감사합니다!
</StyledText>
</InfoItem>
</InfoBox>
<CheckboxWrapper as="div">
<Label>
<CheckboxInput type="checkbox" checked={isChecked} onChange={handleCheckboxChange} />
<StyledCheckboxText as="span" $textTheme={{ style: 'body2-regular' }}>
안내사항을 모두 확인하였으며, 이에 동의합니다.
</StyledCheckboxText>
</Label>
</CheckboxWrapper>
</CancelContainer>
<StyledDiv isChecked={isChecked}>
<BottomButton content="탈퇴하기" onClick={handleDeleteAccount} disabled={!isChecked} />
</StyledDiv>
{isModalVisible && (
<Modal
content={modalContent || ''}
onClose={handleModalClose}
isCloseButtonVisible={true}
button={{ content: '확인', onClick: handleModalClose }}
/>
)}
</OODDFrame>
);
};

export default AccountCancel;
export default AccountCancel;
8 changes: 4 additions & 4 deletions src/pages/Account/AccountEdit/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,12 @@ const AccountEdit: React.FC = () => {
</SectionTitle>
<SNSInfo>
<SnsConnection>
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.tertiary}>
SNS 연결
</StyledText>
</SnsConnection>
<Text>
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.tertiary}>
연결된 SNS계정으로 로그인되었습니다.
</StyledText>
</Text>
Expand All @@ -71,15 +71,15 @@ const AccountEdit: React.FC = () => {
<MemberInfo>
<MemberInfoRow>
<Label>
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.tertiary}>
이름
</StyledText>
</Label>
<Info>-</Info>
</MemberInfoRow>
<MemberInfoRow>
<Label>
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.tertiary}>
연락처
</StyledText>
</Label>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Account/AccountEdit/styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export const SNSIcon = styled.img`

export const Text = styled.div`
font-size: 0.875rem;
color: ${({ theme }) => theme.colors.tertiary};
color: ${({ theme }) => theme.colors.text.tertiary};
margin-top: 2.1875rem;
text-align: left;
`;
Expand Down
Loading
Loading