fix: 공유페이지 등 동적 라우팅에서는 썸네일이 적용되지 않는 버그 수정

[KwonDeaGeun]

Summary

관련 있는 Issue를 태그해주세요. (e.g. > - #100)

• [Fix]: 공유페이지 등 동적 라우팅에서는 썸네일이 적용되지 않는 버그 수정 #127

해당 PR에 대한 작업 내용을 요약하여 작성해주세요.

Tasks

• 해당 PR에 수행한 작업을 작성해주세요.
• 공유페이지 등 동적 라우팅에서는 썸네일이 적용되지 않는 버그 수정

Summary by CodeRabbit

릴리스 노트

• 개선 사항
  • 단일 진입점 기반 라우팅 처리로 SPA 내비게이션 안정성 향상.
  • 글로벌 헤더 기반 캐시 정책 도입:
    • 페이지(엔트리)는 항상 최신 상태 유지(즉시 재검증).
    • 정적 자산은 장기(약 1년) 캐시 및 불변 설정으로 성능 개선.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

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

Project	Deployment	Review	Updated (UTC)
2025-seasonthon-team-80-fe	Ready	Preview, Comment	Dec 13, 2025 5:39pm

[coderabbitai]

Warning

Rate limit exceeded

@KwonDeaGeun has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 4 minutes and 5 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between b316254 and 6d90a09.

📒 Files selected for processing (1)

• vercel.json (1 hunks)

Walkthrough

vercel.json에서 파일시스템 핸들러를 제거하고 모든 경로를 /index.html로 리라이트하는 규칙을 추가했으며, /index.html과 /assets/(.*)에 대한 캐시 제어 헤더를 선언했습니다.

Changes

Cohort / File(s)	Summary
Vercel 배포 설정 vercel.json	"routes": [{ "handle": "filesystem" }]를 제거하고 "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]를 추가. 또한 /index.html에 Cache-Control: public, max-age=0, must-revalidate와 /assets/(.*)에 Cache-Control: public, max-age=31536000, immutable 헤더 규칙을 추가.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• 검토 포인트:
  • 리라이트가 SPA 라우팅 및 서브경로 처리에 의도한 대로 작동하는지 (서버/정적 파일 접근 영향)
  • /assets/ 캐시 정책이 빌드/배포된 자산과 파일명 해시 전략과 일치하는지
  • /index.html의 짧은 캐시 설정이 새 콘텐츠 배포 시 예상 동작을 보장하는지

Possibly related issues

• [Fix]: 공유페이지 등 동적 라우팅에서는 썸네일이 적용되지 않는 버그 수정 #127: 모든 경로를 /index.html로 리라이트하면 동적 라우트 처리 방식이 변해 썸네일 렌더링 또는 공유 페이지의 동적 라우팅 문제와 관련될 수 있음

Poem

🐰 난토끼, 설정을 살짝 바꿨네
모든 길은 인덱스로 모이고
자산은 오래, 페이지는 새로고침
캐시 한 줄로 질서 잡히니
배포의 숲에 햇살 비치네 ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	PR 설명이 필수 섹션을 포함하고 있으나, Summary 섹션의 작업 내용 요약과 Tasks 섹션의 첫 번째 항목이 미작성되어 있습니다.	Summary 섹션에 이번 PR의 상세한 작업 내용을 작성하고, Tasks 섹션의 첫 번째 항목도 구체적으로 기재해주세요.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 변경 사항의 핵심을 명확하게 설명하고 있습니다. vercel.json 파일의 라우팅 및 캐싱 설정 변경이 동적 라우팅에서의 썸네일 버그를 수정하는 것과 일치합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

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]

✨ Storybook: 🔗 https://690458540424857aa71aec97-elvlkkcvvw.chromatic.com/

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 33bc7a8 and c053d98.

📒 Files selected for processing (1)

• vercel.json (1 hunks)

🔇 Additional comments (1)

vercel.json (1)

2-7: 동적 라우팅 수정 사항을 검증하세요.

SPA 리라이트 규칙이 추가되었으나, 썸네일(메타 태그) 문제가 완전히 해결되었는지 확인이 필요합니다. 소셜 미디어 공유 시 동적 페이지의 썸네일이 올바르게 표시되려면:

1. 서버 사이드 렌더링(SSR) 또는 정적 생성(SSG)으로 동적 경로의 메타 태그 주입
2. Open Graph API를 활용한 동적 메타 태그 생성
3. 또는 Next.js ISR(Incremental Static Regeneration) 활용

이 설정 변경만으로는 메타 태그가 자동으로 생성되지 않습니다. 메타 태그 주입 로직(미들웨어, API 라우트 등)이 구현되어 있는지 확인하세요.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

vercel.json (1)

19-19: 선택사항: 패턴 문법 통일 제안

Vercel 설정의 관례상 정적 자산 패턴을 /assets/(.*)에서 /assets/:path*로 변경하면 더욱 일관성 있는 코드가 될 것입니다. 두 패턴 모두 동등하게 작동하지만, :path* 문법이 Vercel의 현대적 설정 스타일과 더 잘 맞습니다.

-      "source": "/assets/(.*)",
+      "source": "/assets/:path*",

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c053d98 and b316254.

📒 Files selected for processing (1)

• vercel.json (1 hunks)

🔇 Additional comments (3)

vercel.json (3)

2-7: ✅ 라우팅 규칙 수정으로 동적 라우팅 버그 해결

파일시스템 핸들러를 제거하고 모든 경로를 /index.html로 리라이트하는 규칙을 추가하는 것은 SPA(Single Page Application) 클라이언트 라우팅을 올바르게 구성하는 표준 패턴입니다. 이 변경으로 동적 라우팅(공유페이지 등)에서 썸네일이 제대로 적용되지 않던 버그가 해결될 것으로 예상됩니다.

---

8-27: ✅ 이전 리뷰 피드백 반영된 캐시 정책

HTML과 정적 자산에 대한 캐시 정책을 명확히 분리하는 좋은 개선입니다. 이전 리뷰에서 지적한 과도하게 제한적인 캐시 정책을 올바르게 해결했습니다:

• /index.html은 max-age=0으로 유지하여 항상 최신 버전을 제공
• /assets/(.*)는 max-age=31536000, immutable으로 설정하여 Vite의 콘텐츠 기반 해시 파일명 전략을 최대한 활용

---

1-27: 검증 요청: 동적 라우팅에서 썸네일 표시 확인

구성 변경이 올바른 것으로 보이지만, 실제 배포 후 동작을 확인해주시기 바랍니다:

1. 공유페이지(또는 다른 동적 라우트)에서 썸네일이 제대로 표시되는지 확인
2. 정적 자산(/assets/ 파일들)이 여전히 올바르게 제공되는지 확인
3. 다른 라우트나 기능에 영향이 없는지 확인