feat : 내가 작성한 PIN 목록 조회 API 연동

[kim3360]

변경 내용

• GET /api/v1/pins/members/me API 연동
• useInfiniteMyPins 무한스크롤 훅 추가
• 내 PLIMAP > 전체 탭 mock 데이터를 실제 API 응답으로 교체 (MyAllPinsCard 매핑)

관련 이슈

Closes #156

변경 사항

• 새로운 기능 추가
• 버그 수정
• UI/UX 개선
• 리팩토링
• 문서 업데이트

테스트

• 브라우저에서 정상 동작 확인
• 기존 기능에 영향 없음 확인

스크린샷 (UI 변경시)

2026-08-01.6.23.41.mov

체크리스트

• 코드가 정상적으로 동작합니다
• 새로운 에러나 경고가 없습니다
• 필요시 문서를 업데이트했습니다
• 코드 포맷팅을 실행했습니다 (pnpm format)
• ESLint 검사를 통과했습니다 (pnpm lint:fix)

코드 품질 확인
PR 제출 전에 다음 명령어를 실행하여 코드 품질을 확인해주세요:

pnpm lint:fix
pnpm format

Summary by CodeRabbit

• 새 기능
  • 내 플림맵에서 사용자가 작성한 핀 목록을 실제 데이터로 조회합니다.
  • 핀 목록을 페이지 단위로 불러오며, 더 많은 핀이 있을 경우 계속해서 확인할 수 있습니다.
  • 핀, 앨범, 곡, 장소, 소개 및 태그 정보를 포함한 목록을 표시합니다.
  • 기본 선택 탭이 ‘좋아요’로 변경되었습니다.

[coderabbitai]

📝 Walkthrough

Walkthrough

getMyPins API와 useInfiniteMyPins 훅을 추가했습니다. MyPlimapPage는 목업 데이터 대신 커서 기반 페이지 데이터를 조회하고 MyAllPinsCard 형식으로 변환해 표시합니다.

Changes

내 PIN 목록 조회

Layer / File(s)	Summary
응답 계약과 커서 기반 조회 src/features/pin/types.ts, src/api/pin.ts, src/features/pin/queries/useMyPins.ts	GetMyPinsResponse에 PIN 목록과 페이지네이션 필드를 정의했습니다. /api/v1/pins/members/me 조회 API와 hasNext, nextCursor 기반 무한 쿼리를 추가했습니다.
MyPlimapPage 데이터 연결 src/pages/MyPlimapPage.tsx	목업 PIN 데이터를 제거했습니다. 조회한 페이지를 평탄화하고 MyAllPinsCard 표시 형식으로 변환합니다. 기본 탭을 'liked'로 변경했습니다.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant MyPlimapPage
  participant useInfiniteMyPins
  participant getMyPins
  participant PinsAPI
  MyPlimapPage->>useInfiniteMyPins: 내 PIN 목록 요청
  useInfiniteMyPins->>getMyPins: pageSize와 cursor 전달
  getMyPins->>PinsAPI: GET /api/v1/pins/members/me
  PinsAPI-->>getMyPins: PIN 목록과 페이지네이션 정보 반환
  getMyPins-->>useInfiniteMyPins: GetMyPinsResponse 반환
  useInfiniteMyPins-->>MyPlimapPage: 페이지 데이터 반환
  MyPlimapPage->>MyPlimapPage: PIN 데이터를 카드 형식으로 변환해 렌더링

Loading

Possibly related PRs

• UMC10th-PLIMAP/plimap-web#116: 커서 기반 내 PIN API와 무한 쿼리 훅을 추가한 변경입니다.
• UMC10th-PLIMAP/plimap-web#120: MyPlimapPage의 목업 PIN 데이터와 MyAllPinsCard 흐름을 추가한 변경입니다.
• UMC10th-PLIMAP/plimap-web#146: 다른 범위의 PIN 조회에 커서 기반 API, 응답 타입과 무한 쿼리를 추가한 변경입니다.

Suggested reviewers: jeonggyul, onebone

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	[#156] API, 타입, 무한 쿼리, UI 연동은 구현했지만 로딩·빈 목록·에러 상태 처리가 확인되지 않습니다.	[#156] 로딩, 빈 목록, 에러 상태를 명시적으로 처리하고 각 상태가 UI에 표시되도록 구현하세요.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목이 작성한 PIN 목록 조회 API 연동이라는 주요 변경 사항을 명확하게 설명합니다.
Out of Scope Changes check	✅ Passed	모든 변경 사항이 작성한 PIN 목록 API 연동과 무한스크롤 UI 연결 범위에 포함됩니다.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/156-my-pins-api

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/pages/MyPlimapPage.tsx`:
- Around line 13-16: Update MyPlimapPage and the all-pins query flow to consume
fetchNextPage, hasNextPage, isFetchingNextPage, and error state from
useInfiniteMyPins. When tab === 'all', connect useInfiniteScroll to a dedicated
sentinel and render the corresponding retry, loading, and empty-list states
instead of allowing pins.map() to produce an empty area; preserve the existing
liked-tab behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: f06adf7c-dbcc-4fde-900a-1c4b3b06de20

📥 Commits

Reviewing files that changed from the base of the PR and between 9cb59d3 and bdc4c9c.

📒 Files selected for processing (4)

• src/api/pin.ts
• src/features/pin/queries/useMyPins.ts
• src/features/pin/types.ts
• src/pages/MyPlimapPage.tsx

[github-actions]

https://pr-159.plimap.kr