[Bug] 타임라인 포스트 중복 버그 해결

[nakyeonko3]

🚀 풀 리퀘스트 제안

@coderabbitai: i🤷‍♀️gnore

📋 작업 내용

• [bug] 이 타임라인에 들어갈 포스트들을 중복해서 가져오는 버그 해결 #93
• Hotfix/timeline-posts-duplicate-93
• fetchPosts.ts에 getPostsByNonFollowingUsers라는 팔로우 하지 않은 유저의 포스트들을 가져오는 함수를 만듬
• useFilteredPostsTimelinesQuery 커스텀 훅이 팔로우한 유저의 포스트들 우선적으로 가져오고 그다음에 다른 유저의 포스트들 가져오게함
• 포스트를 한 번에 3개씩 가져오게 함
• 자신이 포스팅한 포스트도 메인 타임라인 화면에 보이게함

🔧 변경 사항

• 팔로잉한 유저들의 포스트들을 우선적으로 가져오고, 그 다음에 팔로잉 하지 않은 유저의 포스트들을 가져오도록 수정함.
• 포스트들이 중복해서 나오는 것들을 수정함.
• 아래 빨간색 사각형 로직은 만약 더이상 팔로우 포스트들이 없을 때 다른 유저의 포스트들을 가져오게함.
  

📸 스크린샷 (선택 사항)

수정된 화면 또는 기능을 시연할 수 있는 스크린샷을 첨부해 주세요.

📄 기타

추가적으로 전달하고 싶은 내용이나 특별한 요구 사항이 있으면 작성해 주세요.

Summary by CodeRabbit

### Release Notes

#### New Feature
- `fetchPosts.ts`: Added `getPostsByNonFollowingUsers` function to fetch posts from non-followed users.
- `Home.tsx`: Introduced `LoadingMessage` component for displaying loading and completion messages.

#### Refactor
- `fetchPosts.ts`: Modified `getPostsByFollowingUsers` default count from 100 to 10, updated duplicate post handling, and removed unnecessary code.
- `useFilteredPostsTimelines.tsx`, `useFilteredPostsTimelines.ts`: Replaced `fetchFilteredPostsTimelines` with `getPostsByFollowingUsers` and `getPostsByNonFollowingUsers`. Adjusted logic to prioritize fetching posts from followed users.
- `Home.tsx`: Updated to use `MemoizedPostsTimeLine` instead of `PostsTimeLine`.

#### Style
- `Comment.tsx`: Changed import path for `CommentSection` to use uppercase.

[github-actions]

CodeRabbit

Walkthrough

이번 변경 사항은 팔로우한 유저와 팔로우하지 않은 유저의 포스트를 가져오는 로직을 개선하고, 중복 포스트 처리 및 불필요한 코드를 제거하여 성능과 유지보수성을 향상시켰습니다. 또한, 컴포넌트 최적화와 로딩 메시지 추가로 사용자 경험을 개선했습니다.

Changes

파일	요약
src/api/fetchPosts.ts	getPostsByNonFollowingUsers 함수 추가, getPostsByFollowingUsers 기본값 변경, 중복 포스트 처리 로직 변경, 불필요한 코드 제거, fetchFilteredPostsTimelines 일부 로직 삭제
src/hooks/useFilteredPostsTimelines.tsx, src/hooks/useFilteredPostsTimelines.ts	fetchFilteredPostsTimelines 함수를 getPostsByFollowingUsers와 getPostsByNonFollowingUsers로 대체, POSTS_FETCH_LIMIT 상수 추가, useFilteredPostsTimelinesQuery 함수 수정 및 관련 인터페이스 삭제
src/pages/Comment.tsx	CommentSection 컴포넌트 import 경로 대문자로 변경
src/pages/Home.tsx	memo를 사용하여 MemoizedPostsTimeLine 생성, LoadingMessage 컴포넌트 추가, 포스트가 없을 때의 메시지 스타일 업데이트, PostsTimeLine 대신 MemoizedPostsTimeLine 사용

🐇 "코드가 깔끔해졌네,
포스트도 빠르게 보이네.
로딩 메시지 반짝이며,
사용자 웃음 짓게 하네!" 🌟

---

Uplevel your code reviews with CodeRabbit Pro

CodeRabbit Pro

If you like this project, please support us by purchasing the Pro version. The Pro version has advanced context, superior noise reduction and several proprietary improvements compared to the open source version. Moreover, CodeRabbit Pro is free for open source projects.

[github-actions]

Visit the preview URL for this PR (updated for commit 2198451):

https://toy-project-2-team-4-pizza--preview-cuf8b9eo.web.app

_{(expires Sat, 07 Sep 2024 15:32:47 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 70fe82c823fc0ae3a244966b629012f11f284e3b}