Skip to content

Commit 91f90bf

Browse files
gustn99gustn99
authored
Merge pull request #73 from oodd-team/feat/OD-121
[OD-121] myPage 충돌 해결
2 parents f3ff240 + 519d031 commit 91f90bf

2 files changed

Lines changed: 121 additions & 174 deletions

File tree

‎src/pages/MyPage/dto.tsx‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎src/pages/MyPage/index.tsx‎

Lines changed: 121 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import React, { useState, useEffect } from 'react';
22
import { useNavigate } from 'react-router-dom';
33
import {
4-
ProfileContainer,
5-
Header,
6-
StatsContainer,
7-
Stat,
8-
StatNumber,
9-
StatLabel,
10-
PostsContainer,
11-
AddButton,
12-
} from './styles';
4+
ProfileContainer,
5+
Header,
6+
StatsContainer,
7+
Stat,
8+
StatNumber,
9+
StatLabel,
10+
PostsContainer,
11+
AddButton,
12+
} from "./styles";
1313
import { OODDFrame } from '../../components/Frame/Frame';
1414
import NavbarProfile from '../../components/NavbarProfile';
1515
import NavBar from '../../components/NavBar';
16-
import ButtonSecondary from './ButtonSecondary';
16+
import ButtonSecondary from "./ButtonSecondary";
1717
import PostItem from '../../components/PostItem';
1818
import imageBasic from '../../assets/default/defaultProfile.svg';
1919
import Loading from '../../components/Loading';
@@ -26,141 +26,128 @@ import insta from '../../assets/default/insta.svg';
2626
import photo from '../../assets/default/photo.svg';
2727
import UserProfile from '../../components/UserProfile';
2828

29-
import { getUserPostListApi } from '../../apis/post';
30-
import { UserPostSummary } from '../../apis/post/dto';
29+
import { getUserPostListApi } from "../../apis/post";
30+
import { UserPostSummary } from "../../apis/post/dto";
3131

3232
const MyPage: React.FC = () => {
33-
const [isLoading, setIsLoading] = useState(true);
34-
const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
35-
const [posts, setPosts] = useState<UserPostSummary[]>([]);
36-
const [totalStats, setTotalStats] = useState<{
37-
totalPostsCount: number;
38-
totalPostCommentsCount: number;
39-
totalPostLikesCount: number;
40-
}>();
41-
const navigate = useNavigate();
33+
const [isLoading, setIsLoading] = useState(true);
34+
const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
35+
const [posts, setPosts] = useState<UserPostSummary[]>([]);
36+
const [totalPosts, setTotalPosts] = useState(0);
37+
const navigate = useNavigate();
4238

43-
const bottomSheetMenuProps: BottomSheetMenuProps = {
44-
items: [
45-
{
46-
text: '인스타 피드 가져오기',
47-
action: () => {
48-
setIsBottomSheetOpen(false);
49-
navigate('/insta-connect');
50-
},
51-
icon: insta,
52-
},
53-
{
54-
text: '사진 올리기',
55-
action: () => {
56-
setIsBottomSheetOpen(false);
57-
navigate('/image-select');
58-
},
59-
icon: photo,
60-
},
61-
],
62-
marginBottom: '50px',
63-
};
39+
const bottomSheetMenuProps: BottomSheetMenuProps = {
40+
items: [
41+
{
42+
text: '인스타 피드 가져오기',
43+
action: () => {
44+
setIsBottomSheetOpen(false);
45+
navigate('/insta-connect');
46+
},
47+
icon: insta,
48+
},
49+
{
50+
text: '사진 올리기',
51+
action: () => {
52+
setIsBottomSheetOpen(false);
53+
navigate('/image-select');
54+
},
55+
icon: photo,
56+
},
57+
],
58+
marginBottom: '50px',
59+
};
6460

65-
const bottomSheetProps: BottomSheetProps<BottomSheetMenuProps> = {
66-
isOpenBottomSheet: isBottomSheetOpen,
67-
isHandlerVisible: true,
68-
Component: BottomSheetMenu,
69-
componentProps: bottomSheetMenuProps,
70-
onCloseBottomSheet: () => {
71-
setIsBottomSheetOpen(false);
72-
},
73-
};
61+
const bottomSheetProps: BottomSheetProps<BottomSheetMenuProps> = {
62+
isOpenBottomSheet: isBottomSheetOpen,
63+
isHandlerVisible: true,
64+
Component: BottomSheetMenu,
65+
componentProps: bottomSheetMenuProps,
66+
onCloseBottomSheet: () => {
67+
setIsBottomSheetOpen(false);
68+
},
69+
};
7470

75-
const handleOpenSheet = () => {
76-
setIsBottomSheetOpen(true);
77-
};
71+
const handleOpenSheet = () => {
72+
setIsBottomSheetOpen(true);
73+
};
7874

79-
//게시물 리스트 조회 api - 콘솔 삭제 예정!
80-
const fetchPostList = async () => {
81-
try {
82-
const storedUserId = localStorage.getItem('my_id'); // my_id로 변경되었음
83-
if (!storedUserId) {
84-
console.error('User ID not found in localStorage');
85-
return;
86-
}
75+
// 게시물 리스트 조회 API
76+
const fetchPostList = async () => {
77+
try {
78+
const storedUserId = localStorage.getItem('my_id');
79+
if (!storedUserId) {
80+
console.error('User ID not found in localStorage');
81+
return;
82+
}
8783

88-
console.log('Fetching posts for user ID:', storedUserId); // 디버깅: User ID 확인
84+
const response = await getUserPostListApi(1, 10, Number(storedUserId));
85+
const { post, totalPostsCount } = response.data;
8986

90-
// API 호출
91-
const response = await getUserPostListApi(1, 10, Number(storedUserId));
92-
console.log('API Response:', response); // 디버깅: API 응답 확인
87+
setPosts(post); // 게시물 목록 상태 업데이트 (UserPostSummary 사용!)
88+
setTotalPosts(totalPostsCount); // 총 게시물 수 상태 업데이트
89+
} catch (error) {
90+
console.error('Error fetching user post list:', error);
91+
} finally {
92+
setIsLoading(false); // 로딩 상태 종료
93+
}
94+
};
9395

94-
const { post, totalPostsCount, totalPostCommentsCount, totalPostLikesCount, meta } = response.data;
96+
useEffect(() => {
97+
fetchPostList();
98+
}, []);
9599

96-
console.log('Post List:', post); // 디버깅: 게시물 리스트 확인
97-
console.log('Pagination Meta:', meta); // 디버깅: 페이지네이션 정보 확인
100+
if (isLoading) {
101+
return <Loading />;
102+
}
98103

99-
// 상태 업데이트
100-
setPosts(post);
101-
setTotalStats({ totalPostsCount, totalPostCommentsCount: totalPostCommentsCount ?? 0, totalPostLikesCount });
102-
103-
if (totalPostsCount === 0) {
104-
console.log('No posts available for the user.');
105-
}
106-
} catch (error) {
107-
console.error('Error fetching post list:', error); // 디버깅: 에러 확인
108-
} finally {
109-
setIsLoading(false);
110-
console.log('Loading completed.'); // 디버깅: 로딩 완료 확인
111-
}
112-
};
113-
useEffect(() => {
114-
fetchPostList();
115-
}, []);
116-
117-
if (isLoading) {
118-
return <Loading />;
119-
}
120-
121-
return (
122-
<OODDFrame>
123-
<ProfileContainer>
124-
<AddButton onClick={handleOpenSheet}>
125-
<img src={button_plus} alt="Add" />
126-
</AddButton>
127-
<BottomSheet {...bottomSheetProps} />
128-
<NavbarProfile />
129-
<Header>
130-
<UserProfile userImg={imageBasic} nickname={'김아무개...'} bio={'소개글이 없습니다.'} />
131-
</Header>
132-
<ButtonSecondary />
133-
<StatsContainer>
134-
<Stat>
135-
<StatLabel>OOTD</StatLabel>
136-
<StatNumber>{totalStats?.totalPostsCount}</StatNumber>
137-
</Stat>
138-
<Stat>
139-
<StatLabel>코멘트</StatLabel>
140-
<StatNumber>{totalStats?.totalPostCommentsCount}</StatNumber>
141-
</Stat>
142-
<Stat>
143-
<StatLabel>좋아요</StatLabel>
144-
<StatNumber>{totalStats?.totalPostLikesCount}</StatNumber>
145-
</Stat>
146-
</StatsContainer>
147-
<PostsContainer>
148-
{posts.length > 0 ? (
149-
posts
150-
.sort((a, b) => {
151-
if (b.isRepresentative && !a.isRepresentative) return 1;
152-
if (a.isRepresentative && !b.isRepresentative) return -1;
153-
return 0;
154-
})
155-
.map((post) => <PostItem key={post.postId} post={post} />)
156-
) : (
157-
<p>게시물이 없습니다.</p>
158-
)}
159-
</PostsContainer>
160-
<NavBar />
161-
</ProfileContainer>
162-
</OODDFrame>
163-
);
104+
return (
105+
<OODDFrame>
106+
<ProfileContainer>
107+
<AddButton onClick={handleOpenSheet}>
108+
<img src={button_plus} alt="Add" />
109+
</AddButton>
110+
<BottomSheet {...bottomSheetProps} />
111+
<NavbarProfile />
112+
<Header>
113+
<UserProfile
114+
userImg={imageBasic}
115+
nickname={'김아무개...'}
116+
bio={'소개글이 없습니다.'}
117+
/>
118+
</Header>
119+
<ButtonSecondary />
120+
<StatsContainer>
121+
<Stat>
122+
<StatLabel>OOTD</StatLabel>
123+
<StatNumber>{totalPosts || 0}</StatNumber>
124+
</Stat>
125+
<Stat>
126+
<StatLabel>코멘트</StatLabel>
127+
<StatNumber>
128+
{posts.reduce((sum, post) => sum + (post.postCommentsCount || 0), 0)}
129+
</StatNumber>
130+
</Stat>
131+
<Stat>
132+
<StatLabel>좋아요</StatLabel>
133+
<StatNumber>
134+
{posts.reduce((sum, post) => sum + (post.postLikesCount || 0), 0)}
135+
</StatNumber>
136+
</Stat>
137+
</StatsContainer>
138+
<PostsContainer>
139+
{posts.length > 0 ? (
140+
posts
141+
.sort((a, b) => Number(b.isRepresentative) - Number(a.isRepresentative))
142+
.map((post) => <PostItem key={post.postId} post={post} />)
143+
) : (
144+
<p>게시물이 없습니다.</p>
145+
)}
146+
</PostsContainer>
147+
<NavBar />
148+
</ProfileContainer>
149+
</OODDFrame>
150+
);
164151
};
165152

166153
export default MyPage;

0 commit comments

Comments
 (0)