전체링크 디자인 및 API

[Seong-Myeong]

관련 이슈

• close 전체 링크 화면 디자인 및 api 연결 #338

PR 설명

• 피그마에 기재된 전체링크 페이지 구현했습니다.
• 디자인은 완료된 상태이고 API는 목데이터로 대체했습니다.

세부 작업사항은 다음과 같습니다.

• AllLink.tsx
  • API 호출 주석 처리 후 mockLinks로 초기 목록 세팅
  • 무한스크롤 적용(PAGE_SIZE 단위 로딩)
  • 헤더 타이포 font-title-md 적용
  • 헤더 고정 + 리스트 영역만 스크롤되도록 레이아웃 정리
• links.ts
  • 목데이터 30개로 확장
• layout-client.tsx
  • 사이드 네비/우측 패널 고정, 중앙 영역만 스크롤되도록 레이아웃 조정
• linkApi.ts
  • 리스트 쿼리 파라미터를 lastId, size 기준으로 정리
• useGetLinks.ts
  • enabled 옵션 추가(현재 AllLink에서 사용 주석)
• LinkApiDemo.tsx
  • 목록 요청 파라미터 정리

[coderabbitai]

Walkthrough

이 변경은 링크 목록 조회 기능을 페이지 기반 페이징에서 커서 기반 페이징으로 전환합니다. LinkListParams에서 page 속성을 제거하고 lastId를 추가하며, sort 옵션을 완전히 제거합니다. AllLink 컴포넌트에서 InfiniteScroll 지원을 도입하여 mockLinks를 초기 로드하고, 스크롤 시 추가 데이터를 로드합니다. useGetLinks 훅에 enabled 플래그를 제어하는 options 매개변수를 추가하고, mockLinks 데이터셋을 30개 항목으로 확장합니다.

Possibly related PRs

• 링크 관련 api 함수 구현 #277 #278: LinkListParams에서 page/sort 기반 페이징을 lastId 기반 커서 페이징으로 변경하는 동일한 API 수정 사항 포함
• InfiniteScroll 컴포넌트 구현 #197: AllLink.tsx에서 사용되는 InfiniteScroll 컴포넌트 구현
• mock 데이터 추가 및 전체 링크 페이지 목업 #290: mockLinks와 useLinkStore setLinks API를 활용한 데이터 관리 로직 확장

🚥 Pre-merge checks | ✅ 2 | ❌ 2

❌ Failed checks (2 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	PR 제목이 모호하고 구체적이지 않습니다. '전체링크 디자인 및 API'는 변경 사항의 범위가 불명확하며, API 변경이 구체적으로 무엇을 의미하는지 알기 어렵습니다.	제목을 더 구체적으로 개선하세요. 예: 'AllLink 페이지 구현 및 커서 기반 페이지네이션 도입' 또는 'AllLink 페이지 UI 완성 및 API 파라미터 정리'와 같은 형태가 더 명확합니다.
Out of Scope Changes check	❓ Inconclusive	layout-client.tsx의 높이 클래스 변경(min-h-screen → h-screen)이 #338의 범위와의 관계가 명확하지 않습니다. 이것이 AllLink 구현에 필수적인지 전체 레이아웃 개선인지 확인이 필요합니다.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description check	✅ Passed	PR 설명이 템플릿을 충분히 따르고 있으며, 관련 이슈(#338), 상세한 변경사항 설명이 포함되어 있습니다.
Linked Issues check	✅ Passed	모든 코드 변경사항이 #338의 목표(전체링크 페이지 구현 및 API 연결)를 충족합니다. AllLink 페이지 구현, 데이터 연결, 페이지네이션 개선이 모두 반영되었습니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/app/(route)/all-link/AllLink.tsx (1)

32-38: handleLoadMore에서 로딩 상태가 실제로 표시되지 않습니다.

현재 setIsLoadingMore(true)와 setIsLoadingMore(false)가 동기적으로 연속 호출되어 로딩 상태가 즉시 해제됩니다. 목 데이터 환경에서도 실제 API 연동 시의 UX를 시뮬레이션하려면 비동기 지연을 추가하는 것이 좋습니다.

♻️ 비동기 지연 추가 제안

 const handleLoadMore = async () => {
   if (!hasMore) return;
   setIsLoadingMore(true);
+  // 실제 API 연동 전까지 로딩 UX 시뮬레이션
+  await new Promise(resolve => setTimeout(resolve, 300));
   const nextCount = Math.min(links.length + PAGE_SIZE, mockLinks.length);
   setLinks(mockLinks.slice(0, nextCount));
   setIsLoadingMore(false);
 };

📜 Review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 207102d and b4b4f58.

📒 Files selected for processing (6)

• src/apis/linkApi.ts
• src/app/(route)/all-link/AllLink.tsx
• src/app/(route)/link-api-demo/LinkApiDemo.tsx
• src/app/layout-client.tsx
• src/hooks/useGetLinks.ts
• src/mocks/fixtures/links.ts

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-11-23T14:52:20.769Z

Learnt from: Bangdayeon
Repo: Team-SoFa/linkiving PR: 102
File: src/components/layout/SideNavigation/components/AddLinkModal/AddLinkModal.tsx:23-23
Timestamp: 2025-11-23T14:52:20.769Z
Learning: In src/components/layout/SideNavigation/components/AddLinkModal/AddLinkModal.tsx, the hardcoded '/file.svg' thumbnail is intentional as a placeholder because the backend API for fetching link metadata/thumbnails is still in preparation. The actual thumbnail fetch logic will be implemented after the backend is ready.

Applied to files:

• src/app/(route)/all-link/AllLink.tsx

🧬 Code graph analysis (5)

src/app/layout-client.tsx (1)

src/components/layout/SideNavigation/SideNavigation.tsx (1)

• SideNavigation (14-65)

src/app/(route)/link-api-demo/LinkApiDemo.tsx (2)

src/hooks/useGetLinks.ts (1)

• useGetLinks (9-17)

src/types/api/linkApi.ts (1)

• LinkListApiData (24-36)

src/hooks/useGetLinks.ts (5)

src/apis/linkApi.ts (2)

• LinkListParams (24-27)
• fetchLinks (69-83)

src/types/api/linkApi.ts (1)

• LinkListViewData (40-42)

src/hooks/usePostLinks.ts (2)

• usePostLinks (5-14)
• qc (10-12)

src/hooks/useUpdateLink.ts (3)

• useUpdateLink (5-15)
• updateLink (9-9)
• _data (10-13)

src/hooks/useUpdateLinkTitle.ts (1)

• useUpdateLinkTitle (5-14)

src/apis/linkApi.ts (2)

src/types/api/linkApi.ts (2)

• LinkListApiData (24-36)
• LinkRes (11-18)

src/types/link.ts (4)

• Pageable (40-47)
• Link (9-18)
• LinkSummaryState (3-7)
• PageResponse (49-61)

src/app/(route)/all-link/AllLink.tsx (2)

src/stores/linkStore.ts (1)

• useLinkStore (15-24)

src/mocks/fixtures/links.ts (1)

• mockLinks (21-363)

🔇 Additional comments (7)

src/app/layout-client.tsx (1)

14-18: LGTM!

레이아웃 변경이 적절합니다. h-screen과 overflow-hidden 조합으로 사이드 네비게이션과 상단 영역이 고정되고, 자식 컴포넌트(AllLink 등)에서 개별 스크롤 영역을 관리할 수 있게 됩니다. SideNavigation의 h-screen 설정과도 일관성 있습니다.

src/mocks/fixtures/links.ts (1)

123-362: LGTM!

무한 스크롤 테스트를 위한 목 데이터 확장이 적절합니다. ID가 순차적이고 기존 데이터 구조와 일관성 있게 작성되었습니다.

src/app/(route)/link-api-demo/LinkApiDemo.tsx (1)

27-27: LGTM!

커서 기반 페이징으로의 전환에 맞게 파라미터가 올바르게 수정되었습니다. 초기 로드 시에는 lastId 없이 size만 전달하는 것이 적절합니다.

src/hooks/useGetLinks.ts (1)

5-17: LGTM!

enabled 옵션 추가가 적절합니다. TanStack React Query v5 패턴을 올바르게 따르고 있으며, 기본값 true로 하위 호환성도 유지됩니다. AllLink 컴포넌트에서 목 데이터 사용 시 API 호출을 비활성화하는 데 유용하게 사용될 수 있습니다.

src/app/(route)/all-link/AllLink.tsx (2)

19-23: 초기 데이터 로딩 및 hasMore 로직이 적절합니다.

useEffect로 초기 데이터를 로드하고 hasMore로 추가 로딩 가능 여부를 판단하는 구조가 명확합니다. API 연동 시 useGetLinks의 enabled 옵션과 커서 기반 페이징으로 전환하면 됩니다.

---

48-71: InfiniteScroll 통합 및 레이아웃 구조가 잘 구성되었습니다.

스크롤 가능한 컨테이너(overflow-y-auto)와 InfiniteScroll 래퍼의 조합이 적절합니다. 빈 상태 처리와 그리드 레이아웃도 Figma 요구사항에 맞게 구현되었습니다.

src/apis/linkApi.ts (1)

24-38: 커서 기반 페이징 마이그레이션이 올바르게 완료되었습니다.

무한 스크롤에 적합한 lastId 기반 페이징으로의 변경이 적절하며, lastId의 null과 undefined를 구분 처리하는 로직도 정확합니다. 코드베이스 전반에 걸쳐 LinkListParams 사용처가 모두 새로운 인터페이스에 맞게 업데이트되었으며, 기존 page 또는 sort 파라미터는 발견되지 않습니다.