Skip to content

fix: CLS 개선 및 SEO 강화#7

Merged
3rdflr merged 2 commits intomainfrom
dev
Feb 26, 2026
Merged

fix: CLS 개선 및 SEO 강화#7
3rdflr merged 2 commits intomainfrom
dev

Conversation

@3rdflr
Copy link
Owner

@3rdflr 3rdflr commented Feb 23, 2026

요약

CLS(Cumulative Layout Shift) 개선

  • Map.tsx: 지도 로딩 시 early return으로 컴포넌트를 완전히 교체하던 방식 제거
    • 항상 동일한 h-[80vh] 컨테이너를 유지하고, 로딩 중에는 absolute 오버레이로 스피너를 표시
    • DOM 트리 교체가 없어지므로 로딩 완료 시 레이아웃 시프트(CLS 0.61) 해소
  • page.tsx: 지도 sectioncontain-layout 추가하여 내부 레이아웃 변화가 외부에 영향을 주지 않도록 격리

sitemap SEO 강화

  • sitemap.ts: gacha_posts 테이블의 모든 게시글을 동적으로 sitemap에 포함
    • 각 게시글 created_atlastModified로 사용하여 크롤러 신뢰도 향상
    • 정적 라우트의 lastModified를 매 빌드마다 바뀌는 new Date() → 고정값으로 수정
    • 게시글 개별 URL이 구글에 색인되어 롱테일 키워드 유입 가능

테스트 체크리스트

  • 메인 페이지 진입 시 지도 로딩 중 레이아웃 흔들림 없음 확인
  • /sitemap.xml 접근 시 가챠보드 게시글 URL 포함 여부 확인
  • Vercel 빌드 에러 없음 확인

- Map.tsx: early return 제거 → 로딩 상태를 absolute 오버레이로 전환해 DOM 교체로 인한 CLS 제거
- page.tsx: section에 contain-layout 추가
- sitemap.ts: gacha_posts 전체를 동적으로 포함, lastModified를 각 게시글 created_at으로 설정
@vercel
Copy link

vercel bot commented Feb 23, 2026

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

Project Deployment Actions Updated (UTC)
gacha-map Ready Ready Preview, Comment Feb 26, 2026 10:35am

@github-actions
Copy link

PR #7 — fix: CLS 개선 및 SEO 강화

3rdflr/gacha_map · 6ce1c76 · JS/TS 3개 파일 변경


src/app/page.tsx

✏️ Home (Function) — 변경됨


src/app/sitemap.ts

Import 변화

  • supabase

src/components/Map.tsx

✏️ KakaoMap (Function) — 변경됨

  • (cond) !isMapLoaded

🛠 Auto-generated by github-mobile-reader. Do not edit manually.

카카오 동의 화면에서 취소를 누르면 error=access_denied 쿼리가 붙어
콜백 URL로 리다이렉트되는데, 이를 감지하지 못해 스피너가 무한히 돌던 문제 수정
- useSearchParams로 error 쿼리 파라미터 감지 후 즉시 홈으로 이동
- session/error 모두 없는 경우(직접 URL 접근)도 홈으로 처리
- useSearchParams 사용을 위해 Suspense로 래핑
@github-actions
Copy link

PR #7 — fix: CLS 개선 및 SEO 강화

3rdflr/gacha_map · 391a667 · JS/TS 4개 파일 변경


src/app/auth/callback/page.tsx

Import 변화

  • useSearchParams
  • Suspense

AuthCallbackInner (Component) — 새로 추가

✏️ handleAuth (Function) — 변경됨
변수: searchParams, errorParam

AuthCallback (Component) — 새로 추가
UI: <Suspense>
UI: <AuthCallbackInner>


src/app/page.tsx

✏️ Home (Function) — 변경됨


src/app/sitemap.ts

Import 변화

  • supabase

src/components/Map.tsx

✏️ KakaoMap (Function) — 변경됨

  • (cond) !isMapLoaded

🛠 Auto-generated by github-mobile-reader. Do not edit manually.

@3rdflr 3rdflr merged commit b94e1c1 into main Feb 26, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant