feat: 내 띱 목록 API 연동 완료

[heeeeyong]

#️⃣연관된 이슈

#71 [API] feeds API 연동

📝작업 내용

내 띱 목록에서 기획 요구사항에 맞춰 내가 팔로잉한 유저들 중 가장 최근에 글을 작성한 순으로 상위 10명이 노출되도록 함

스크린샷

💬리뷰 요구사항

없음

Summary by CodeRabbit

• 신기능

  • 마이페이지에 ‘가이드’ 메뉴가 추가되었습니다.
  • ‘고객센터’ 메뉴에서 전용 안내 페이지로 이동할 수 있습니다.
  • ‘이용약관’이 ‘개인정보처리방침 & 이용약관’으로 통합되고 링크가 업데이트되었습니다.

• 스타일

  • 탭바에 슬라이딩 언더라인 효과가 도입되어 활성 탭 전환 애니메이션이 더욱 부드럽습니다.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

API 응답 필드 recentWriters가 myFollowingUsers로 변경되었고, FollowList는 이에 맞춰 상태/매핑을 갱신했습니다. TabBar는 탭별 보더 대신 슬라이딩 언더라인 컴포넌트를 도입했습니다. Mypage는 고객센터/가이드/약관 관련 외부 링크 핸들러를 추가·수정했습니다.

Changes

Cohort / File(s)	Summary
API 계약 업데이트 src/api/users/getRecentFollowing.ts	GetRecentFollowingResponse.data의 recentWriters: RecentWriterData[]를 myFollowingUsers: RecentWriterData[]로 필드명 변경. 함수 로직 및 기타 타입 불변.
FollowList 적응 변경 src/components/feed/FollowList.tsx	로컬 상태명 recentWriters→myFollowings로 변경. 응답 매핑 response.data.myFollowingUsers로 교체. 에러 처리 및 파생 UI 로직을 새로운 상태에 맞게 수정.
TabBar 프레젠테이션 갱신 src/components/feed/TabBar.tsx	탭별 보더 스타일 제거, 컨테이너 내부에 슬라이딩 ActiveIndicator 추가. activeIndex 계산 후 transform: translateX(...)로 언더라인 이동. TabButton 포지셔닝 조정.
Mypage 링크 핸들러 src/pages/mypage/Mypage.tsx	공지/가이드/고객센터 링크 오픈 핸들러 추가·수정. 메뉴 라벨과 onClick 매핑 업데이트(“개인정보처리방침 & 이용약관”, “가이드”, “고객센터”).

Sequence Diagram(s)

sequenceDiagram
  participant U as User
  participant FL as FollowList
  participant API as getRecentFollowing
  U->>FL: 페이지 진입/로드
  FL->>API: fetch recent following
  API-->>FL: { data: { myFollowingUsers: [...] } }
  FL->>FL: setMyFollowings(myFollowingUsers)
  FL-->>U: 최대 10개 목록 렌더

Loading

sequenceDiagram
  participant U as User
  participant TB as TabBar
  participant AI as ActiveIndicator
  U->>TB: 탭 클릭(activeTab 변경)
  TB->>TB: activeIndex = findIndex(activeTab)
  TB->>AI: translateX(activeIndex * 80px)
  AI-->>U: 슬라이딩 언더라인 표시

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• feat: 피드 메인페이지 - 내 띱 목록 API 연동 #104: 동일 API 필드명 변경(recentWriters→myFollowingUsers)과 FollowList 연계 수정.
• feat: add followlist page, followerlist page #48: FollowList 내 사용자/프로필 네비게이션 처리 변경으로 동일 컴포넌트 흐름과 연관.

Suggested labels

✨ Feature, 🎨 Html&css

Poem

밤하늘 코드를 톡톡, 토끼 발끝이 춤춰요 ✨
팔로우 목록은 새 이름, 줄 맞춰 반짝이고—
탭 아래 흰 선이 슉슉, 달빛처럼 미끄러져—
마이페이지 문을 열면, 길 안내 쪽지가 살랑—
깡총! 오늘도 머지의 들판에 캐롯 한 줌 🥕

---

📜 Recent review details

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

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between a933763 and ea3ca3e.

📒 Files selected for processing (4)

• src/api/users/getRecentFollowing.ts (1 hunks)
• src/components/feed/FollowList.tsx (3 hunks)
• src/components/feed/TabBar.tsx (2 hunks)
• src/pages/mypage/Mypage.tsx (3 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 chore/minor-updates

---

🪧 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.
  • 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.
• 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 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/Issue comments)

Type @coderabbitai help to get the list of available commands.

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

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• 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 GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
thip	Ready	Preview	Comment	Aug 17, 2025 7:40pm