Skip to content

Commit 2b0feb6

Browse files
lalaurrellalaurrel
committed
refactor: accountSetting currentId
1 parent dfaa803 commit 2b0feb6

1 file changed

Lines changed: 111 additions & 108 deletions

File tree

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

Lines changed: 111 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useState, useEffect } 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 { getUserInfoApi } from '@apis/user';
77

88
import back from '@assets/arrow/left.svg';
@@ -16,115 +16,118 @@ import Loading from '@components/Loading/index';
1616
import { StyledText } from '@components/Text/StyledText';
1717
import TopBar from '@components/TopBar/index';
1818

19-
import type { UserInfoData } from '@apis/user/dto'; // type 명시
19+
import type { UserInfoData } from '@apis/user/dto';
2020

21-
import { ProfileEditContainer, ProfilePic, ProfilePicWrapper, Label, Row, List, ListItem } from './styles';
21+
import {
22+
ProfileEditContainer,
23+
ProfilePic,
24+
ProfilePicWrapper,
25+
Label,
26+
Row,
27+
List,
28+
ListItem
29+
} from './styles';
2230

2331
const AccountSetting: React.FC = () => {
24-
const navigate = useNavigate();
25-
const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
26-
const [userProfile, setUserProfile] = useState<UserInfoData | null>(null);
27-
const [isLoading, setIsLoading] = useState<boolean>(true);
28-
29-
// 사용자 정보 가져오기
30-
useEffect(() => {
31-
const getUserInfo = async () => {
32-
try {
33-
const storedUserId = Number(localStorage.getItem('my_id'));
34-
if (!storedUserId) {
35-
console.error('User is not logged in');
36-
return;
37-
}
38-
39-
const userId = Number(storedUserId);
40-
const response = await getUserInfoApi(userId);
41-
setUserProfile(response.data);
42-
} catch (error) {
43-
console.error('Error fetching user info:', error);
44-
} finally {
45-
setIsLoading(false);
46-
}
47-
};
48-
49-
getUserInfo();
50-
}, []);
51-
52-
const handleConfirmLogout = () => {
53-
// localStorage 비우기
54-
localStorage.clear();
55-
console.log('Logout confirmed');
56-
setIsLogoutModalOpen(false);
57-
58-
navigate('/login');
59-
};
60-
61-
const handleLogoutClick = () => {
62-
setIsLogoutModalOpen(true);
63-
};
64-
65-
const handleCloseModal = () => {
66-
setIsLogoutModalOpen(false);
67-
};
68-
69-
const handleDeleteAccountClick = () => {
70-
// 회원 탈퇴 로직 추가
71-
navigate('/account/cancel');
72-
};
73-
74-
if (isLoading) {
75-
return <Loading />;
76-
}
77-
78-
return (
79-
<OODDFrame>
80-
<ProfileEditContainer>
81-
<TopBar text="계정 관리" LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />
82-
83-
<ProfilePicWrapper>
84-
<ProfilePic>
85-
<img src={userProfile?.profilePictureUrl || imageBasic} alt="프로필 사진" />
86-
</ProfilePic>
87-
<Row>
88-
<Label>
89-
<StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.primary}>
90-
{userProfile?.nickname}
91-
</StyledText>
92-
</Label>
93-
</Row>
94-
<Row>
95-
<Label>
96-
<StyledText $textTheme={{ style: 'caption1-regular' }} color={theme.colors.tertiary}>
97-
{userProfile?.name} | {userProfile?.email}
98-
</StyledText>
99-
</Label>
100-
</Row>
101-
</ProfilePicWrapper>
102-
103-
<List>
104-
<ListItem onClick={handleLogoutClick}>
105-
<img src={leave} alt="로그아웃 아이콘" />
106-
<StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.primary}>
107-
Logout
108-
</StyledText>
109-
</ListItem>
110-
<ListItem onClick={handleDeleteAccountClick}>
111-
<img src={Profile_s} alt="회원 탈퇴 아이콘" />
112-
<StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.primary}>
113-
회원탈퇴
114-
</StyledText>
115-
</ListItem>
116-
</List>
117-
{isLogoutModalOpen && (
118-
<ConfirmationModal
119-
content="이 기기에서 정말 로그아웃 할까요?"
120-
isCancelButtonVisible={true}
121-
confirm={{ text: '로그아웃', action: handleConfirmLogout }}
122-
onCloseModal={handleCloseModal}
123-
/>
124-
)}
125-
</ProfileEditContainer>
126-
</OODDFrame>
127-
);
32+
const navigate = useNavigate();
33+
const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
34+
const [userProfile, setUserProfile] = useState<UserInfoData | null>(null);
35+
const [isLoading, setIsLoading] = useState<boolean>(true);
36+
37+
useEffect(() => {
38+
const getUserInfo = async () => {
39+
try {
40+
const currentUserId = getCurrentUserId();
41+
if (!currentUserId) {
42+
console.error('User is not logged in');
43+
return;
44+
}
45+
46+
const response = await getUserInfoApi(currentUserId);
47+
setUserProfile(response.data);
48+
} catch (error) {
49+
console.error('Error fetching user info:', error);
50+
} finally {
51+
setIsLoading(false);
52+
}
53+
};
54+
55+
getUserInfo();
56+
}, []);
57+
58+
const handleConfirmLogout = () => {
59+
localStorage.clear();
60+
console.log('Logout confirmed');
61+
setIsLogoutModalOpen(false);
62+
navigate('/login');
63+
};
64+
65+
const handleLogoutClick = () => {
66+
setIsLogoutModalOpen(true);
67+
};
68+
69+
const handleCloseModal = () => {
70+
setIsLogoutModalOpen(false);
71+
};
72+
73+
const handleDeleteAccountClick = () => {
74+
navigate('/account/cancel');
75+
};
76+
77+
if (isLoading) {
78+
return <Loading />;
79+
}
80+
81+
return (
82+
<OODDFrame>
83+
<ProfileEditContainer>
84+
<TopBar text="계정 관리" LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />
85+
<ProfilePicWrapper>
86+
<ProfilePic>
87+
<img src={userProfile?.profilePictureUrl || imageBasic} alt="프로필 사진" />
88+
</ProfilePic>
89+
<Row>
90+
<Label>
91+
<StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.primary}>
92+
{userProfile?.nickname}
93+
</StyledText>
94+
</Label>
95+
</Row>
96+
<Row>
97+
<Label>
98+
<StyledText $textTheme={{ style: 'caption1-regular' }} color={theme.colors.tertiary}>
99+
{userProfile?.name} | {userProfile?.email}
100+
</StyledText>
101+
</Label>
102+
</Row>
103+
</ProfilePicWrapper>
104+
105+
<List>
106+
<ListItem onClick={handleLogoutClick}>
107+
<img src={leave} alt="로그아웃 아이콘" />
108+
<StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.primary}>
109+
Logout
110+
</StyledText>
111+
</ListItem>
112+
<ListItem onClick={handleDeleteAccountClick}>
113+
<img src={Profile_s} alt="회원 탈퇴 아이콘" />
114+
<StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.primary}>
115+
회원탈퇴
116+
</StyledText>
117+
</ListItem>
118+
</List>
119+
120+
{isLogoutModalOpen && (
121+
<ConfirmationModal
122+
content="이 기기에서 정말 로그아웃 할까요?"
123+
isCancelButtonVisible={true}
124+
confirm={{ text: '로그아웃', action: handleConfirmLogout }}
125+
onCloseModal={handleCloseModal}
126+
/>
127+
)}
128+
</ProfileEditContainer>
129+
</OODDFrame>
130+
);
128131
};
129132

130-
export default AccountSetting;
133+
export default AccountSetting;

0 commit comments

Comments
 (0)