develop -> main : develop 브랜치 개발 완료된 부분 merge

[heeeeyong]

이하동일

Summary by CodeRabbit

• 신규 기능

  • 업로드 진행 상황을 표시하는 업로드 프로그레스 바가 추가되었습니다.
  • 팔로워/팔로잉 목록 및 다른 유저의 피드, 프로필 정보를 실시간으로 불러오고, 무한 스크롤을 지원합니다.
  • 피드 상세 페이지가 동적으로 데이터를 불러오도록 개선되었습니다.

• 기능 개선

  • 피드, 프로필, 팔로우, 댓글 등 다양한 API 연동이 추가되어 데이터가 실시간으로 반영됩니다.
  • 팔로우/언팔로우, 피드 저장/해제, 댓글 작성 등 주요 액션이 서버와 동기화됩니다.
  • 피드, 프로필, 댓글 등에서 alias 색상(aliasColor) 사용으로 스타일 명확성이 향상되었습니다.
  • 피드, 프로필, 팔로워/팔로잉, 댓글 등에서 prop 및 데이터 구조가 일관성 있게 개선되었습니다.
  • 업로드 완료 시 성공 메시지 스낵바가 표시됩니다.
  • 피드 목록에서 마지막 항목의 구분선이 표시되지 않도록 개선되었습니다.
  • 페이지 타이틀, 파비콘, 오픈그래프 메타태그가 업데이트되어 소셜 미디어 공유 시 정보가 명확하게 노출됩니다.

• 버그 수정

  • 중복 피드가 목록에 추가되는 현상이 방지되었습니다.
  • 무한 스크롤 시 중복 호출 및 오류 발생이 개선되었습니다.

• 스타일

  • 여러 컴포넌트의 스타일이 개선되어 가독성과 일관성이 향상되었습니다.

• 리팩터링

  • 내부 데이터 구조 및 props 명칭이 일관성 있게 정리되었습니다.

• 문서화

  • 주요 API 응답 구조 및 인터페이스가 명확하게 정의되었습니다.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

이 변경 사항은 피드, 프로필, 팔로우, 댓글, 기록(메모리) 등 다양한 기능에 걸쳐 대규모 리팩토링과 기능 확장을 포함합니다. 주요 변경점은 API 클라이언트 모듈 추가, 컴포넌트 prop 및 타입 네이밍 정비, 동적 데이터 로딩 도입, 업로드 진행률 표시 기능 추가, 그리고 일관된 타입 구조화입니다.

Changes

Cohort / File(s)	Change Summary
Feed/프로필 API 모듈 추가 및 타입 정의 src/api/feeds/getFeedDetail.ts, src/api/feeds/getMyFeed.ts, src/api/feeds/getMyProfile.ts, src/api/feeds/getOtherFeed.ts, src/api/feeds/getTotalFeed.ts, src/api/feeds/postSave.ts, src/types/profile.ts, src/types/follow.ts	피드 상세, 내 피드, 내 프로필, 타인 피드, 전체 피드, 피드 저장/해제 등 API 클라이언트 함수와 관련 타입 인터페이스 추가 및 정비.
댓글/답글 API 및 훅 리팩토링 src/api/comments/postReply.ts, src/hooks/useReplyActions.ts	댓글/답글 등록 API 모듈 신설 및 기존 훅에서 axios 직접 호출을 API 함수 호출로 변경. postType 등 타입 명시적 변경.
팔로우/언팔로우 및 팔로워/팔로잉 목록 API src/api/users/getFollowerList.ts, src/api/users/getFollowingList.ts, src/api/users/getOtherProfile.ts, src/api/users/postFollow.ts	팔로우/언팔로우, 팔로워/팔로잉 목록, 타인 프로필 조회 등 API 모듈 및 타입 추가.
피드/프로필/팔로우 UI 컴포넌트 리팩토링 src/components/feed/FeedDetailPost.tsx, src/components/feed/FeedPost.tsx, src/components/feed/MyFeed.tsx, src/components/feed/MyFollower.tsx, src/components/feed/OtherFeed.tsx, src/components/feed/Profile.tsx, src/components/feed/TotalFeed.tsx, src/components/feed/UserProfileItem.tsx, src/types/post.ts, src/types/user.ts	prop 및 타입 네이밍(titleColor→aliasColor, userName→nickName 등) 일관화, 동적 데이터 적용, API 연동, isLast 등 신규 prop 도입, 팔로우 버튼 및 팔로워 이미지 등 기능 강화.
댓글/답글/헤더 컴포넌트 네이밍 일관화 src/components/common/Post/PostHeader.tsx, src/components/common/Post/Reply.tsx, src/components/common/Post/SubReply.tsx, src/data/postData.ts	titleColor→aliasColor 등 prop 네이밍 일관화.
피드 상세/타인 피드/팔로워 리스트 페이지 동적화 src/pages/feed/FeedDetailPage.tsx, src/pages/feed/OtherFeedPage.tsx, src/pages/feed/FollowerListPage.tsx	기존 목데이터 기반에서 API 기반 동적 데이터 로딩 및 무한스크롤, 에러/로딩 핸들링 추가.
메모리(기록) 업로드 진행률/상태 관리 src/components/memory/MemoryContent/MemoryContent.tsx, src/components/memory/UploadProgressBar/UploadProgressBar.tsx, src/pages/memory/Memory.tsx, src/pages/pollwrite/PollWrite.tsx, src/pages/recordwrite/RecordWrite.tsx	업로드 진행률 표시 컴포넌트 및 상태 관리, 업로드 중 표시, 업로드 완료 콜백 처리, 관련 prop 및 데이터 구조 확장.
투표 작성 섹션 prop 네이밍 리팩토링 src/components/pollwrite/PollCreationSection.tsx	pollContent→content 등 prop 네이밍 일관화 및 useEffect로 focusStates 관리.
라우팅/기타 UI/기본 설정 src/pages/index.tsx, index.html, src/main.tsx, src/data/userData.ts	라우트 추가(팔로우/언팔로우), 메타태그/파비콘/타이틀 수정, React StrictMode 제거, 목데이터 prop 네이밍 일관화.

Sequence Diagram(s)

sequenceDiagram
actor User
participant FeedDetailPage
participant API (getFeedDetail)
participant FeedDetailPost

User->>FeedDetailPage: 방문 (feedId 포함)
FeedDetailPage->>API (getFeedDetail): feedId로 피드 상세 요청
API (getFeedDetail)-->>FeedDetailPage: 피드 상세 데이터 반환
FeedDetailPage->>FeedDetailPost: 데이터 전달 및 렌더링

Loading

sequenceDiagram
actor User
participant Profile
participant API (postFollow)

User->>Profile: 팔로우/언팔로우 버튼 클릭
Profile->>API (postFollow): 팔로우 상태 변경 요청
API (postFollow)-->>Profile: isFollowing 상태 반환
Profile-->>User: 버튼 상태 및 팔로워 수 갱신

Loading

sequenceDiagram
actor User
participant Memory
participant MemoryContent
participant UploadProgressBar

User->>Memory: 기록 업로드 시작
Memory->>MemoryContent: showUploadProgress=true
MemoryContent->>UploadProgressBar: isVisible=true
UploadProgressBar-->>User: 진행률 표시 및 완료 콜백

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• THIP-TextHip/THIP-Web#29: FeedPost 컴포넌트의 isLast prop 도입 및 하단 경계선 렌더링 조건부 처리와 직접적으로 연관됨.
• THIP-TextHip/THIP-Web#77: 동일한 피드/프로필/댓글 API 및 컴포넌트, prop 네이밍 일관화 등 전반적 구조 리팩토링과 중복되는 변경 다수 포함.
• THIP-TextHip/THIP-Web#50: FeedDetailPage.tsx의 동적 피드 상세 로딩 및 댓글/답글 기능 구현과 직접적으로 관련됨.

Poem

🐰
코드밭에 새싹이 돋네, aliasColor 물들인 봄
팔로우 누르면 API가 달려가고
피드엔 동적 데이터 바람 불어
업로드 바는 천천히 오르고
무한스크롤, 댓글, 프로필 춤추는
오늘도 토끼는 코드를 심어요!
🌱✨

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 215b4c9 and c7242cc.

⛔ Files ignored due to path filters (2)

• public/assets/custom_favicon.svg is excluded by !**/*.svg
• public/assets/thumbnail.png is excluded by !**/*.png

📒 Files selected for processing (43)

• index.html (1 hunks)
• src/api/comments/postReply.ts (1 hunks)
• src/api/feeds/getFeedDetail.ts (1 hunks)
• src/api/feeds/getMyFeed.ts (1 hunks)
• src/api/feeds/getMyProfile.ts (1 hunks)
• src/api/feeds/getOtherFeed.ts (1 hunks)
• src/api/feeds/getTotalFeed.ts (1 hunks)
• src/api/feeds/postSave.ts (1 hunks)
• src/api/users/getFollowerList.ts (1 hunks)
• src/api/users/getFollowingList.ts (1 hunks)
• src/api/users/getOtherProfile.ts (1 hunks)
• src/api/users/postFollow.ts (1 hunks)
• src/components/common/Post/PostFooter.tsx (2 hunks)
• src/components/common/Post/PostHeader.tsx (3 hunks)
• src/components/common/Post/Reply.tsx (2 hunks)
• src/components/common/Post/SubReply.tsx (2 hunks)
• src/components/feed/FeedDetailPost.tsx (2 hunks)
• src/components/feed/FeedPost.tsx (1 hunks)
• src/components/feed/MyFeed.tsx (2 hunks)
• src/components/feed/MyFollower.tsx (1 hunks)
• src/components/feed/OtherFeed.tsx (1 hunks)
• src/components/feed/Profile.tsx (2 hunks)
• src/components/feed/TotalFeed.tsx (1 hunks)
• src/components/feed/UserProfileItem.tsx (2 hunks)
• src/components/memory/MemoryContent/MemoryContent.tsx (4 hunks)
• src/components/memory/UploadProgressBar/UploadProgressBar.tsx (1 hunks)
• src/components/pollwrite/PollCreationSection.tsx (5 hunks)
• src/data/postData.ts (4 hunks)
• src/data/userData.ts (1 hunks)
• src/hooks/useReplyActions.ts (2 hunks)
• src/main.tsx (1 hunks)
• src/pages/feed/Feed.tsx (5 hunks)
• src/pages/feed/FeedDetailPage.tsx (4 hunks)
• src/pages/feed/FollowerListPage.tsx (2 hunks)
• src/pages/feed/OtherFeedPage.tsx (2 hunks)
• src/pages/index.tsx (1 hunks)
• src/pages/memory/Memory.tsx (7 hunks)
• src/pages/pollwrite/PollWrite.tsx (4 hunks)
• src/pages/recordwrite/RecordWrite.tsx (2 hunks)
• src/types/follow.ts (1 hunks)
• src/types/post.ts (3 hunks)
• src/types/profile.ts (1 hunks)
• src/types/user.ts (1 hunks)

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch develop

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
thip	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 6, 2025 3:40pm