Skip to content

Commit c8771cf

Browse files
gustn99gustn99
authored
Merge pull request #86 from oodd-team/feat/OD-133
[OD-133] post 도메인 api 리스폰스 수정 및 적용
2 parents c8451e8 + 1eed66f commit c8771cf

4 files changed

Lines changed: 146 additions & 152 deletions

File tree

‎src/apis/post/dto.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,7 @@ export interface GetPostListData {
4343
meta: PaginationMeta;
4444
}
4545
export interface UserPostSummary {
46-
userId: number;
47-
postId: number;
46+
id: number;
4847
createdAt: Date;
4948
imageUrl: string;
5049
postLikesCount: number;

‎src/components/PostItem/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@ const PostItem: React.FC<PostItemProps> = ({ post, isMyPost = true }) => {
2020
const imageUrl = post.imageUrl;
2121

2222
const handleClick = () => {
23-
const path = isMyPost ? `/my-post/${post.postId}` : `/post/${post.postId}`;
23+
const path = isMyPost ? `/my-post/${post.id}` : `/post/${post.id}`;
2424
navigate(path);
2525
};
2626

2727
return (
2828
<PostItemContainer onClick={handleClick}>
2929
<PostImageContainer>
30-
<PostImage src={imageUrl} alt={`post-${post.postId}`} />
30+
<PostImage src={imageUrl} alt={`post-${post.id}`} />
3131
{post.isRepresentative && <PinSvg src={PinIcon} />}
3232
<LikesOverlay>
3333
<Icon src={HeartSvg} alt="heart icon" />

‎src/pages/MyPage/index.tsx‎

Lines changed: 141 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
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-
NoPostWrapper,
13-
} from "./styles";
4+
ProfileContainer,
5+
Header,
6+
StatsContainer,
7+
Stat,
8+
StatNumber,
9+
StatLabel,
10+
PostsContainer,
11+
AddButton,
12+
NoPostWrapper,
13+
} from './styles';
1414
import { OODDFrame } from '../../components/Frame/Frame';
1515
import NavbarProfile from '../../components/NavbarProfile';
1616
import NavBar from '../../components/NavBar';
17-
import ButtonSecondary from "./ButtonSecondary";
17+
import ButtonSecondary from './ButtonSecondary';
1818
import PostItem from '../../components/PostItem';
1919
import imageBasic from '../../assets/default/defaultProfile.svg';
2020
import Loading from '../../components/Loading';
@@ -28,153 +28,148 @@ import photo from '../../assets/default/photo.svg';
2828
import UserProfile from '../../components/UserProfile';
2929
import { StyledText } from '../../components/Text/StyledText';
3030

31-
import { getUserPostListApi } from "../../apis/post";
32-
import { UserPostSummary } from "../../apis/post/dto";
33-
import { getUserInfoApi } from "../../apis/user";
34-
import { UserInfoData } from "../../apis/user/dto";
31+
import { getUserPostListApi } from '../../apis/post';
32+
import { UserPostSummary } from '../../apis/post/dto';
33+
import { getUserInfoApi } from '../../apis/user';
34+
import { UserInfoData } from '../../apis/user/dto';
3535

3636
const MyPage: React.FC = () => {
37-
const [isLoading, setIsLoading] = useState(true);
38-
const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
39-
const [posts, setPosts] = useState<UserPostSummary[]>([]);
40-
const [totalPosts, setTotalPosts] = useState(0);
41-
const [userInfo, setUserInfo] = useState<UserInfoData | null>(null);
42-
const navigate = useNavigate();
37+
const [isLoading, setIsLoading] = useState(true);
38+
const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
39+
const [posts, setPosts] = useState<UserPostSummary[]>([]);
40+
const [totalPosts, setTotalPosts] = useState(0);
41+
const [userInfo, setUserInfo] = useState<UserInfoData | null>(null);
42+
const navigate = useNavigate();
4343

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

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

76-
const handleOpenSheet = () => {
77-
setIsBottomSheetOpen(true);
78-
};
76+
const handleOpenSheet = () => {
77+
setIsBottomSheetOpen(true);
78+
};
7979

80-
// 사용자 정보 조회 API
81-
const fetchUserInfo = async () => {
82-
try {
83-
const storedUserId = Number(localStorage.getItem('my_id'));
84-
if (!storedUserId) {
85-
console.error('User ID not found in localStorage');
86-
return;
87-
}
80+
// 사용자 정보 조회 API
81+
const fetchUserInfo = async () => {
82+
try {
83+
const storedUserId = Number(localStorage.getItem('my_id'));
84+
if (!storedUserId) {
85+
console.error('User ID not found in localStorage');
86+
return;
87+
}
8888

89-
const response = await getUserInfoApi(Number(storedUserId));
90-
setUserInfo(response.data);
91-
} catch (error) {
92-
console.error('Error fetching user info:', error);
93-
}
94-
};
95-
96-
// 게시물 리스트 조회 API
97-
const fetchPostList = async () => {
98-
try {
99-
const storedUserId = Number(localStorage.getItem('my_id'));
100-
if (!storedUserId) {
101-
console.error('User ID not found in localStorage');
102-
return;
103-
}
89+
const response = await getUserInfoApi(Number(storedUserId));
90+
setUserInfo(response.data);
91+
} catch (error) {
92+
console.error('Error fetching user info:', error);
93+
}
94+
};
10495

105-
const response = await getUserPostListApi(1, 10, Number(storedUserId));
106-
const { post, totalPostsCount } = response.data;
96+
// 게시물 리스트 조회 API
97+
const fetchPostList = async () => {
98+
try {
99+
const storedUserId = Number(localStorage.getItem('my_id'));
100+
if (!storedUserId) {
101+
console.error('User ID not found in localStorage');
102+
return;
103+
}
107104

108-
setPosts(post); // 게시물 목록 상태 업데이트 (UserPostSummary 사용!)
109-
setTotalPosts(totalPostsCount); // 총 게시물 수 상태 업데이트
110-
} catch (error) {
111-
console.error('Error fetching user post list:', error);
112-
} finally {
113-
setIsLoading(false); // 로딩 상태 종료
114-
}
115-
};
105+
const response = await getUserPostListApi(1, 10, Number(storedUserId));
106+
const { post, totalPostsCount } = response.data;
116107

117-
useEffect(() => {
118-
fetchPostList();
119-
fetchUserInfo();
120-
}, []);
108+
setPosts(post); // 게시물 목록 상태 업데이트 (UserPostSummary 사용!)
109+
setTotalPosts(totalPostsCount); // 총 게시물 수 상태 업데이트
110+
} catch (error) {
111+
console.error('Error fetching user post list:', error);
112+
} finally {
113+
setIsLoading(false); // 로딩 상태 종료
114+
}
115+
};
121116

122-
if (isLoading) {
123-
return <Loading />;
124-
}
117+
useEffect(() => {
118+
fetchPostList();
119+
fetchUserInfo();
120+
}, []);
125121

126-
return (
127-
<OODDFrame>
128-
<ProfileContainer>
129-
<AddButton onClick={handleOpenSheet}>
130-
<img src={button_plus} alt="Add" />
131-
</AddButton>
132-
<BottomSheet {...bottomSheetProps} />
133-
<NavbarProfile />
134-
<Header>
135-
<UserProfile
136-
userImg={userInfo?.profilePictureUrl || imageBasic}
137-
nickname={userInfo?.nickname || '알수없음'}
138-
bio={userInfo?.bio || '소개글이 없습니다.'}
139-
/>
140-
</Header>
141-
<ButtonSecondary />
142-
<StatsContainer>
143-
<Stat>
144-
<StatLabel>OOTD</StatLabel>
145-
<StatNumber>{totalPosts || 0}</StatNumber>
146-
</Stat>
147-
<Stat>
148-
<StatLabel>코멘트</StatLabel>
149-
<StatNumber>
150-
{posts.reduce((sum, post) => sum + (post.postCommentsCount || 0), 0)}
151-
</StatNumber>
152-
</Stat>
153-
<Stat>
154-
<StatLabel>좋아요</StatLabel>
155-
<StatNumber>
156-
{posts.reduce((sum, post) => sum + (post.postLikesCount || 0), 0)}
157-
</StatNumber>
158-
</Stat>
159-
</StatsContainer>
160-
<PostsContainer>
161-
{posts.length > 0 ? (
162-
posts
163-
.sort((a, b) => Number(b.isRepresentative) - Number(a.isRepresentative))
164-
.map((post) => <PostItem key={post.postId} post={post} />)
165-
) : (
166-
<NoPostWrapper>
167-
<StyledText $textTheme={{ style: 'headline1-medium' }} color="#8e8e93">
168-
게시물이 없어요.
169-
</StyledText>
170-
</NoPostWrapper>
171-
172-
)}
173-
</PostsContainer>
174-
<NavBar />
175-
</ProfileContainer>
176-
</OODDFrame>
177-
);
122+
if (isLoading) {
123+
return <Loading />;
124+
}
125+
126+
return (
127+
<OODDFrame>
128+
<ProfileContainer>
129+
<AddButton onClick={handleOpenSheet}>
130+
<img src={button_plus} alt="Add" />
131+
</AddButton>
132+
<BottomSheet {...bottomSheetProps} />
133+
<NavbarProfile />
134+
<Header>
135+
<UserProfile
136+
userImg={userInfo?.profilePictureUrl || imageBasic}
137+
nickname={userInfo?.nickname || '알수없음'}
138+
bio={userInfo?.bio || '소개글이 없습니다.'}
139+
/>
140+
</Header>
141+
<ButtonSecondary />
142+
<StatsContainer>
143+
<Stat>
144+
<StatLabel>OOTD</StatLabel>
145+
<StatNumber>{totalPosts || 0}</StatNumber>
146+
</Stat>
147+
<Stat>
148+
<StatLabel>코멘트</StatLabel>
149+
<StatNumber>{posts.reduce((sum, post) => sum + (post.postCommentsCount || 0), 0)}</StatNumber>
150+
</Stat>
151+
<Stat>
152+
<StatLabel>좋아요</StatLabel>
153+
<StatNumber>{posts.reduce((sum, post) => sum + (post.postLikesCount || 0), 0)}</StatNumber>
154+
</Stat>
155+
</StatsContainer>
156+
<PostsContainer>
157+
{posts.length > 0 ? (
158+
posts
159+
.sort((a, b) => Number(b.isRepresentative) - Number(a.isRepresentative))
160+
.map((post) => <PostItem key={post.id} post={post} />)
161+
) : (
162+
<NoPostWrapper>
163+
<StyledText $textTheme={{ style: 'headline1-medium' }} color="#8e8e93">
164+
게시물이 없어요.
165+
</StyledText>
166+
</NoPostWrapper>
167+
)}
168+
</PostsContainer>
169+
<NavBar />
170+
</ProfileContainer>
171+
</OODDFrame>
172+
);
178173
};
179174

180175
export default MyPage;

‎src/pages/ProfileViewer/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,10 +116,10 @@ const ProfileViewer: React.FC = () => {
116116
</CounterContainer>
117117
<PostListContainer>
118118
{representativePosts.map((post) => (
119-
<PostItem key={post.postId} post={post} isMyPost={false} />
119+
<PostItem key={post.id} post={post} isMyPost={false} />
120120
))}
121121
{otherPosts.map((post) => (
122-
<PostItem key={post.postId} post={post} isMyPost={false} />
122+
<PostItem key={post.id} post={post} isMyPost={false} />
123123
))}
124124
</PostListContainer>
125125
<OptionsBottomSheet {...optionsBottomSheetProps} />

0 commit comments

Comments
 (0)