feat(home): Followers bubble UI with People/Followers tab#55
Open
feat(home): Followers bubble UI with People/Followers tab#55
Conversation
Implements getFollowers() with server-only guard, 1-hour revalidation, and graceful error handling. Includes TDD tests covering success and failure cases. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…layout Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
… issue Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ports Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace separate People and Followers sections with unified tabbed section. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The tab component belongs in the left sidebar (aside), not the main content area. Layout.tsx now renders PeopleFollowersTabs in place of the old People component. Followers data is fetched client-side since layout is a client component. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ow Us button Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ple tab Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Featured usernames (defined in Followers.constants.ts) get the largest bubble size. If a featured user has unfollowed, a random follower fills the slot. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Featured followers always appear first with large bubbles, remaining followers are randomly shuffled on each page load. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
chaaerim
force-pushed
the
feat/follower-bubble
branch
from
d780902 to
413bda1
Compare
minsoo-web
reviewed
Apr 16, 2026
minsoo-web
approved these changes
Apr 22, 2026
Comment on lines
+65
to
+74
| useEffect(() => { | ||
| fetch('https://api.github.com/users/hamsurang/followers?per_page=100') | ||
| .then((res) => (res.ok ? res.json() : [])) | ||
| .then((data: GitHubFollower[]) => { | ||
| const { sorted, featuredCount: fc } = sortWithFeatured(data, FEATURED_FOLLOWERS) | ||
| setFollowers(sorted) | ||
| setFeaturedCount(fc) | ||
| }) | ||
| .catch(() => setFollowers([])) | ||
| }, []) |
Member
There was a problem hiding this comment.
요게 get-followers.ts의 내용과 다른가요..! 중복되어 따로 관리되고 있는 것 같은데 의도가 있으신지 궁금합니다
Member
There was a problem hiding this comment.
+ serverside에서 데이터를 fetching하고 client 컴포넌트에서 prop으로 받으면 useEffect로 인한 호출도 안 해도 될 것 같은데 어떠세요?!
Member
There was a problem hiding this comment.
전반적으로 svg가 인라인으로 그려지는 것을 icon 패키지로 옮겨서 처리할 수 있을까요?
Member
There was a problem hiding this comment.
이것 별도의 컴포넌트로 분리한 의도가 있으실지 궁금합니당
Comment on lines
+29
to
+32
| <svg viewBox="0 0 16 16" className="w-4 h-4 fill-current" aria-label="GitHub"> | ||
| <title>GitHub</title> | ||
| <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" /> | ||
| </svg> |
Member
There was a problem hiding this comment.
Github icon은 이미 icons 패키지에 있는데, 재활용이 어려울까요?
Comment on lines
+5
to
+14
| const res = await fetch('https://api.github.com/users/hamsurang/followers?per_page=100', { | ||
| next: { revalidate: 3600 }, | ||
| }) | ||
|
|
||
| if (!res.ok) { | ||
| console.warn(`[github] Failed to fetch followers: ${res.status}`) | ||
| return [] | ||
| } | ||
|
|
||
| return (await res.json()) as GitHubFollower[] |
Member
There was a problem hiding this comment.
요것 as 할당하기보다 데이터 형식이 다른지를 가드하는 처리가 있으면 좋을 것 같은데 어떠신가용
Member
There was a problem hiding this comment.
팔로워 컴포넌트가 사용처가 없는 것 같아요...! 의도하신 것일까용
Followers 컴포넌트가 FollowersBubble을 내장하고 있는데, Tab부분에서는 Bubble만 쓰고 있는 것 같아요
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Bubble UI 상세
yejineee,jcha0713) 2명은 항상 큰 버블로 고정 표시clip-path: circle(50%))로 밀집감 있는 레이아웃파일 구조
Followers/circle-pack.ts— 6단계 크기 + featured 지원 packing 알고리즘Followers/FollowersBubble.tsx— 원형 클라이언트 버블 컴포넌트Followers/Followers.constants.ts— featured followers 상수PeopleFollowersTabs/PeopleFollowersTabs.tsx— 탭 전환 클라이언트 컴포넌트PeopleFollowersTabs/PeopleFollowersSection.tsx— 서버 래퍼 컴포넌트Test plan
스크린샷
데스크탑
모바일
🤖 Generated with Claude Code