Skip to content

[OD-121] myPage 충돌 해결 #73

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 7 commits into from
Nov 30, 2024
Merged

[OD-121] myPage 충돌 해결 #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8dd6771
fix: 불필요한 파일 삭제
lalaurrel Nov 26, 2024
f76a691
Merge branch 'dev' of https://github.com/oodd-team/oodd-web-react int…
lalaurrel Nov 29, 2024
aa75a81
Merge branch 'dev' of https://github.com/oodd-team/oodd-web-react int…
lalaurrel Nov 29, 2024
44a9803
fix: mypage 충돌 해결
lalaurrel Nov 29, 2024
3acc378
Merge branch 'dev' of https://github.com/oodd-team/oodd-web-react int…
lalaurrel Nov 30, 2024
91f0de6
Merge branch 'dev' of https://github.com/oodd-team/oodd-web-react int…
lalaurrel Nov 30, 2024
519d031
fix: UserPostSummary로 수정
lalaurrel Nov 30, 2024
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
40 changes: 0 additions & 40 deletions src/pages/MyPage/dto.tsx
View file
Open in desktop

This file was deleted.

255 changes: 121 additions & 134 deletions src/pages/MyPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import {
ProfileContainer,
Header,
StatsContainer,
Stat,
StatNumber,
StatLabel,
PostsContainer,
AddButton,
} from './styles';
ProfileContainer,
Header,
StatsContainer,
Stat,
StatNumber,
StatLabel,
PostsContainer,
AddButton,
} from "./styles";
import { OODDFrame } from '../../components/Frame/Frame';
import NavbarProfile from '../../components/NavbarProfile';
import NavBar from '../../components/NavBar';
import ButtonSecondary from './ButtonSecondary';
import ButtonSecondary from "./ButtonSecondary";
import PostItem from '../../components/PostItem';
import imageBasic from '../../assets/default/defaultProfile.svg';
import Loading from '../../components/Loading';
Expand All @@ -26,141 +26,128 @@ import insta from '../../assets/default/insta.svg';
import photo from '../../assets/default/photo.svg';
import UserProfile from '../../components/UserProfile';

import { getUserPostListApi } from '../../apis/post';
import { UserPostSummary } from '../../apis/post/dto';
import { getUserPostListApi } from "../../apis/post";
import { UserPostSummary } from "../../apis/post/dto";

const MyPage: React.FC = () => {
const [isLoading, setIsLoading] = useState(true);
const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
const [posts, setPosts] = useState<UserPostSummary[]>([]);
const [totalStats, setTotalStats] = useState<{
totalPostsCount: number;
totalPostCommentsCount: number;
totalPostLikesCount: number;
}>();
const navigate = useNavigate();
const [isLoading, setIsLoading] = useState(true);
const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
const [posts, setPosts] = useState<UserPostSummary[]>([]);
const [totalPosts, setTotalPosts] = useState(0);
const navigate = useNavigate();

const bottomSheetMenuProps: BottomSheetMenuProps = {
items: [
{
text: '인스타 피드 가져오기',
action: () => {
setIsBottomSheetOpen(false);
navigate('/insta-connect');
},
icon: insta,
},
{
text: '사진 올리기',
action: () => {
setIsBottomSheetOpen(false);
navigate('/image-select');
},
icon: photo,
},
],
marginBottom: '50px',
};
const bottomSheetMenuProps: BottomSheetMenuProps = {
items: [
{
text: '인스타 피드 가져오기',
action: () => {
setIsBottomSheetOpen(false);
navigate('/insta-connect');
},
icon: insta,
},
{
text: '사진 올리기',
action: () => {
setIsBottomSheetOpen(false);
navigate('/image-select');
},
icon: photo,
},
],
marginBottom: '50px',
};

const bottomSheetProps: BottomSheetProps<BottomSheetMenuProps> = {
isOpenBottomSheet: isBottomSheetOpen,
isHandlerVisible: true,
Component: BottomSheetMenu,
componentProps: bottomSheetMenuProps,
onCloseBottomSheet: () => {
setIsBottomSheetOpen(false);
},
};
const bottomSheetProps: BottomSheetProps<BottomSheetMenuProps> = {
isOpenBottomSheet: isBottomSheetOpen,
isHandlerVisible: true,
Component: BottomSheetMenu,
componentProps: bottomSheetMenuProps,
onCloseBottomSheet: () => {
setIsBottomSheetOpen(false);
},
};

const handleOpenSheet = () => {
setIsBottomSheetOpen(true);
};
const handleOpenSheet = () => {
setIsBottomSheetOpen(true);
};

//게시물 리스트 조회 api - 콘솔 삭제 예정!
const fetchPostList = async () => {
try {
const storedUserId = localStorage.getItem('my_id'); // my_id로 변경되었음
if (!storedUserId) {
console.error('User ID not found in localStorage');
return;
}
// 게시물 리스트 조회 API
const fetchPostList = async () => {
try {
const storedUserId = localStorage.getItem('my_id');
if (!storedUserId) {
console.error('User ID not found in localStorage');
return;
}

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

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

const { post, totalPostsCount, totalPostCommentsCount, totalPostLikesCount, meta } = response.data;
useEffect(() => {
fetchPostList();
}, []);

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

// 상태 업데이트
setPosts(post);
setTotalStats({ totalPostsCount, totalPostCommentsCount: totalPostCommentsCount ?? 0, totalPostLikesCount });

if (totalPostsCount === 0) {
console.log('No posts available for the user.');
}
} catch (error) {
console.error('Error fetching post list:', error); // 디버깅: 에러 확인
} finally {
setIsLoading(false);
console.log('Loading completed.'); // 디버깅: 로딩 완료 확인
}
};
useEffect(() => {
fetchPostList();
}, []);

if (isLoading) {
return <Loading />;
}

return (
<OODDFrame>
<ProfileContainer>
<AddButton onClick={handleOpenSheet}>
<img src={button_plus} alt="Add" />
</AddButton>
<BottomSheet {...bottomSheetProps} />
<NavbarProfile />
<Header>
<UserProfile userImg={imageBasic} nickname={'김아무개...'} bio={'소개글이 없습니다.'} />
</Header>
<ButtonSecondary />
<StatsContainer>
<Stat>
<StatLabel>OOTD</StatLabel>
<StatNumber>{totalStats?.totalPostsCount}</StatNumber>
</Stat>
<Stat>
<StatLabel>코멘트</StatLabel>
<StatNumber>{totalStats?.totalPostCommentsCount}</StatNumber>
</Stat>
<Stat>
<StatLabel>좋아요</StatLabel>
<StatNumber>{totalStats?.totalPostLikesCount}</StatNumber>
</Stat>
</StatsContainer>
<PostsContainer>
{posts.length > 0 ? (
posts
.sort((a, b) => {
if (b.isRepresentative && !a.isRepresentative) return 1;
if (a.isRepresentative && !b.isRepresentative) return -1;
return 0;
})
.map((post) => <PostItem key={post.postId} post={post} />)
) : (
<p>게시물이 없습니다.</p>
)}
</PostsContainer>
<NavBar />
</ProfileContainer>
</OODDFrame>
);
return (
<OODDFrame>
<ProfileContainer>
<AddButton onClick={handleOpenSheet}>
<img src={button_plus} alt="Add" />
</AddButton>
<BottomSheet {...bottomSheetProps} />
<NavbarProfile />
<Header>
<UserProfile
userImg={imageBasic}
nickname={'김아무개...'}
bio={'소개글이 없습니다.'}
/>
</Header>
<ButtonSecondary />
<StatsContainer>
<Stat>
<StatLabel>OOTD</StatLabel>
<StatNumber>{totalPosts || 0}</StatNumber>
</Stat>
<Stat>
<StatLabel>코멘트</StatLabel>
<StatNumber>
{posts.reduce((sum, post) => sum + (post.postCommentsCount || 0), 0)}
</StatNumber>
</Stat>
<Stat>
<StatLabel>좋아요</StatLabel>
<StatNumber>
{posts.reduce((sum, post) => sum + (post.postLikesCount || 0), 0)}
</StatNumber>
</Stat>
</StatsContainer>
<PostsContainer>
{posts.length > 0 ? (
posts
.sort((a, b) => Number(b.isRepresentative) - Number(a.isRepresentative))
.map((post) => <PostItem key={post.postId} post={post} />)
) : (
<p>게시물이 없습니다.</p>
)}
</PostsContainer>
<NavBar />
</ProfileContainer>
</OODDFrame>
);
};

export default MyPage;