🐛Fix : 마이페이지 포스트 카드 조회

[KongMezu]

🔥 작업 내용

• 리다이랙트 경로 변경

PR Point (To Reviewer)

마이페이지 포스트 카드 조회 가능

리다이랙트 경로 변경으로 클릭시 상세 조회 가능하게 해놨습니다.

Summary by CodeRabbit

릴리스 노트

• 버그 수정

  • 저장한 엽서 이미지 URL 처리 개선으로 이미지 표시 안정성 강화
  • 엽서 카드 클릭 시 상세 페이지로 이동하는 네비게이션 기능 추가

• 개선 사항

  • 저장한 엽서 섹션의 렌더링 성능 최적화
  • 엽서 카드의 대체 텍스트 처리 단순화

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
af-fe	Ready	Preview	Comment	Nov 15, 2025 1:31pm

[coderabbitai]

Walkthrough

엽서 카드 렌더링 로직을 간소화하고, 카드 클릭 시 상세 페이지로 네비게이션하는 기능을 추가했습니다. 이미지 URL을 트림 처리하고 대체 텍스트를 단순화했으며, 비활성화 속성을 제거했습니다.

Changes

Cohort / File(s)	변경 요약
PostcardContainer 렌더링 로직 개선 src/pages/mypage/components/PostcardContainer.tsx	슬롯별 렌더링을 조건부 맵으로 교체; 이미지 URL 트림 처리 강제; alt 텍스트 단순화; disabled/aria-disabled 속성 제거; React 키 조정; Image 요소 조건부 래핑 제거
엽서 상세 페이지 네비게이션 src/pages/mypage/index.tsx	onClickCard 핸들러 추가로 /mypage/postcard/{id}로 라우팅; PostcardContainer에 onClickCard 프롭 전달; 컨테이너에 상대 위치 지정 및 z-index 적용
FlipCard 이미지 URL 처리 src/pages/mypage/postcard/[id].tsx	FlipCard의 frontSrc에 트림된 imageUrl 전달

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant PostcardContainer
    participant mypage/index
    participant Router
    participant postcard/[id]
    participant FlipCard

    User->>PostcardContainer: 엽서 카드 클릭
    PostcardContainer->>mypage/index: onClickCard(postcardId) 호출
    mypage/index->>Router: /mypage/postcard/{id}로 네비게이션
    Router->>postcard/[id]: 페이지 로드
    postcard/[id]->>postcard/[id]: imageUrl 트림 처리
    postcard/[id]->>FlipCard: 트림된 imageUrl을 frontSrc로 전달
    FlipCard-->>User: 엽서 상세 화면 렌더링

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• PostcardContainer의 렌더링 로직 변경은 명확하고 반복적인 패턴
• 네비게이션 기능 추가는 간단한 프롭 전달 방식
• 이미지 URL 트림 처리는 일관된 변경

Possibly related PRs

• 🔗API : MyPage API 연결 #115: PostcardContainer 컴포넌트의 프롭 구조 및 onClickCard 동작 수정 적용
• ✨Feat: postcard page layout #78: FlipCard 컴포넌트와 관련 레이아웃 스타일이 이번 PR의 imageUrl 처리에 직결
• Feat&Api: 마이페이지 postcard get api #121: PostcardContainer.tsx 파일의 엽서 플레이스홀더 및 이미지 렌더링 관련 변경

Suggested labels

comment

Suggested reviewers

• skyblue1232
• jjangminii

Poem

🐰 엽서 카드들이 주렁주렁,
클릭하면 상세 페이지로 훨훨~
이미지 URL 정리하고,
네비게이션 연결하면 완성!
저장한 추억들, 한 눈에 보기 ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Description check	❓ Inconclusive	PR 설명이 매우 간결하여 변경사항의 전체 범위를 파악하기 어렵습니다. 필수 섹션들이 대부분 미작성 상태입니다.	추후 작업 사항, 이슈 번호, 피그마 스크린샷 등 누락된 섹션들을 추가하고 변경사항을 더 상세히 설명해주세요.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 주요 변경사항을 명확하게 요약하고 있습니다. 마이페이지 포스트카드 조회 기능 수정이라는 핵심 내용이 잘 반영되어 있습니다.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch refact/mypage

---

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

[github-actions]

🏷️ Labeler has automatically applied labels based on your PR title, branch name, or commit message.
Please verify that they are correct before merging.

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (3)

src/pages/mypage/postcard/[id].tsx (1)

1-1: 'use client' 지시어를 제거하세요.

Pages Router에서는 'use client' 지시어가 불필요합니다. 이 프로젝트는 App Router가 아닌 Pages Router를 사용하고 있으므로, 해당 지시어를 제거해야 합니다.

Based on learnings

-'use client';

src/pages/mypage/index.tsx (1)

1-1: 'use client' 지시어를 제거하세요.

Pages Router에서는 'use client' 지시어가 불필요합니다. 이 프로젝트는 App Router가 아닌 Pages Router를 사용하고 있으므로, 해당 지시어를 제거해야 합니다.

Based on learnings

-'use client';
-
 import React, { useEffect } from 'react';

src/pages/mypage/components/PostcardContainer.tsx (1)

1-1: 'use client' 지시어를 제거하세요.

Pages Router에서는 'use client' 지시어가 불필요합니다. 이 프로젝트는 App Router가 아닌 Pages Router를 사용하고 있으므로, 해당 지시어를 제거해야 합니다.

Based on learnings

-'use client';
-
 import Image from 'next/image';

🧹 Nitpick comments (1)

src/pages/mypage/components/PostcardContainer.tsx (1)

85-106: 렌더링 로직 리팩토링이 잘 되었습니다.

조건부 맵을 사용한 렌더링 로직이 코드를 단순화하고 가독성을 향상시켰습니다. postcardId를 키로 사용하는 것도 적절합니다.

접근성 향상을 위해 button 요소에 aria-label을 추가하는 것을 고려해 보세요.

 <button
   key={card.postcardId}
   onClick={() => onClickCard?.(card.postcardId)}
   className={postcardCardStyle({ interactive: true })}
+  aria-label={`${card.placeName} 엽서 보기`}
 >

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 899901b and 565379a.

📒 Files selected for processing (3)

• src/pages/mypage/components/PostcardContainer.tsx (1 hunks)
• src/pages/mypage/index.tsx (2 hunks)
• src/pages/mypage/postcard/[id].tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-10-31T17:34:04.352Z

Learnt from: jjangminii
Repo: geulDa/FE PR: 64
File: src/pages/map/result/components/ResultMap.tsx:3-3
Timestamp: 2025-10-31T17:34:04.352Z
Learning: The geulDa/FE project uses Next.js Pages Router (not App Router), so components should import useRouter from 'next/router' and should not use the 'use client' directive.

Applied to files:

• src/pages/mypage/index.tsx

🧬 Code graph analysis (1)

src/pages/mypage/index.tsx (1)

src/pages/mypage/components/PostcardContainer.tsx (1)

• PostcardContainer (59-110)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build-and-deploy

🔇 Additional comments (4)

src/pages/mypage/postcard/[id].tsx (1)

61-61: 좋습니다!

이미지 URL에 trim()을 적용하여 불필요한 공백을 제거하는 것은 좋은 방어적 프로그래밍입니다.

src/pages/mypage/index.tsx (2)

136-136: 좋습니다!

엽서 클릭 시 상세 페이지로 이동하는 네비게이션 로직이 올바르게 구현되었습니다. 동적 라우트 구조(/mypage/postcard/[id])와 잘 매칭됩니다.

---

129-132: z-index 값 검증 결과 - 헤더 z-값 재확인 필요

검사 결과, 원본 주석의 전제가 정확하지 않습니다. Header 컴포넌트는 z-50이 아닌 z-[100]을 사용하고 있습니다.

그러나 실제 문제는 다릅니다:

• z-[100]은 Header, PopupSet과 동일한 값으로 중복 사용되고 있습니다
• 반면 map 관련 컴포넌트에서는 z-[2000], z-[9999] 같은 매우 높은 값이 사용되고 있어 z-index 전략 일관성이 부족합니다
• 현재 section은 relative 포지셔닝을 사용하므로 고정(fixed) 요소들과의 직접적인 스택 충돌 위험은 낮습니다

권장사항: 프로젝트 전체의 z-index 네이밍/값 전략을 검토하고 정의하세요 (예: 일관된 레이어 시스템 확립).

src/pages/mypage/components/PostcardContainer.tsx (1)

93-93: 좋습니다!

이미지 URL에 trim()을 적용하여 API 응답에 포함될 수 있는 불필요한 공백을 제거하는 것은 좋은 방어적 프로그래밍입니다.