[Fix/#97] 비로그인 시 추천 카드 처리

[wantkdd]

✨ 작업 개요

비로그인 시 추천 카드 처리

📌 관련 이슈

• close [Bug] 비로그인 시 추천 카드 처리 #97

✅ 작업 내용

• 기존 유저데이터 없을 때의 처리 -> 로딩 추가하여 유저 데이터 없을 때의 처리

Summary by CodeRabbit

릴리스 노트

• New Features
  • 추천 용어 카드 클릭 시 상세 페이지로 이동하는 네비게이션 기능 추가
  • 추천 용어 로딩 중 스켈레톤 UI를 통한 개선된 로딩 상태 표시

_{✏️ 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	Preview	Comments	Updated (UTC)
gotit	Ready	Preview	Comment	Dec 1, 2025 4:55am

[coderabbitai]

Walkthrough

권장 용어 카드에 클라이언트 네비게이션을 추가하고 로딩 상태를 지원하기 위해 slug 필드를 데이터 모델에 추가했습니다. 새 스켈레톤 컴포넌트를 도입하고 권장 섹션에서 로딩 중에 스켈레톤을 표시하며 카드에서 라우팅 기능을 구현했습니다.

Changes

Cohort / File(s)	Summary
Data Model & API src/lib/recommendations.ts	RecommendedTerm 인터페이스에 slug: string 속성 추가. getRecommendedTerms 함수의 모든 반환 경로에서 slug 필드 포함
Card Component src/components/RecommendedTermCard.tsx	slug prop을 TermCardProps에 추가. useRouter 임포트하고 카드 클릭 시 /terms/{slug}로 네비게이션하는 onClick 핸들러 적용
Skeleton & Loading src/components/RecommendedTermCardSkeleton.tsx	로딩 상태용 스켈레톤 UI 컴포넌트 신규 추가. Tailwind 클래스로 카드 레이아웃을 모방하는 맥박 효과의 그레이 블록 렌더링
Section Component src/components/search/RecommendedTermsSection.tsx	useAuth에서 loading 상태 추출. 로딩 중 RecommendedTermCardSkeleton 표시, 로딩 후 카드 렌더링. 각 카드에 slug prop 전달. 로딩 가드 추가 및 effect 의존성 확장

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• src/lib/recommendations.ts에서 모든 데이터 경로에 slug 필드가 올바르게 포함되었는지 확인 필요
• RecommendedTermsSection.tsx의 로딩 상태 관리 및 effect 의존성 검증 (userData, loading 변경 시 재실행 확인)
• 라우터 네비게이션이 모든 환경에서 올바르게 작동하는지 테스트 필요

Possibly related PRs

• [Fix/#83] 검색화면 렌더링 오류 해결 및 클릭 시 용어 상세 연결 #89: 동일한 컴포넌트와 데이터 구조 수정—RecommendedTerm과 TermCardProps에 slug 추가, RecommendedTermCard에서 클라이언트 네비게이션 연결, RecommendedTermCardSkeleton/로딩 동작 도입
• [Refactor/#69] 검색화면, 대시보드 ux 개선 #70: 권장 용어 UI 데이터 타입에 slug 추가하여 전파하고, RecommendedTermsSection에서 가져온 권장 데이터 사용으로 수정

Poem

🐰 슬러그가 카드 위를 살금살금
스켈레톤으로 로딩을 기다리며
클릭하면 라우터가 춤을 춘다 ✨
용어의 길로 인도하는 마법
호두까기 인형처럼 우아하게!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목은 '비로그인 시 추천 카드 처리'로 변경 내용의 핵심을 명확하게 요약하고 있으며, 추천 카드에 slug 속성을 추가하고 스켈레톤 로딩을 구현하는 주요 변경 사항을 반영합니다.
Linked Issues check	✅ Passed	PR은 #97의 요구사항을 충족합니다. 스켈레톤 로딩 UI를 추가하여 비로그인 사용자가 로딩 상태를 볼 수 있도록 개선했고, slug 속성을 추가하여 개별 카드의 클릭 네비게이션을 구현했습니다.
Out of Scope Changes check	✅ Passed	모든 변경 사항이 #97의 요구사항과 관련이 있습니다. RecommendedTermCard에 slug 추가, RecommendedTermCardSkeleton 신규 생성, RecommendedTermsSection의 로딩 상태 처리, recommendations.ts의 slug 포함은 모두 비로그인 사용자 추천 카드 처리 구현을 위한 범위 내 변경입니다.

✨ 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 fix/recommendations

---

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 (2)

src/components/RecommendedTermCard.tsx (1)

1-61: 카드 클릭 네비게이션은 적절하지만, 접근성·재사용성 측면에서 소폭 개선 여지가 있습니다.

• 현재 div에 onClick만 걸려 있어 키보드 포커스로는 접근이 어렵습니다. button/a 또는 role="button" + tabIndex={0} + onKeyDown 등을 통해 키보드 사용자도 추천 카드를 탐색할 수 있게 하는 걸 고려해 보시면 좋겠습니다.
• TermCardProps가 RecommendedTerm 타입과 거의 동일하니, 가능하다면 type TermCardProps = RecommendedTerm; 형태로 재사용하면 타입 중복을 줄이고 데이터 구조 변경 시 추적이 더 쉬워질 것 같습니다.

src/components/search/RecommendedTermsSection.tsx (1)

47-66: 리스트 렌더링 시 key와 ‘더보기’ 버튼 노출 조건을 조금 더 다듬을 수 있습니다.

• displayedRecommendedTerms.map에서 key={index}를 사용하고 있는데, 추천 목록이 바뀌는 경우(카테고리 변경 등) DOM 재사용이 예상과 다를 수 있습니다. key={term.slug}처럼 고유 식별자를 사용하면 더 안전합니다.
• 추천 용어 개수가 3개 이하일 때도 항상 ‘더보기’ 버튼이 노출될 수 있습니다. !isLoading && recommendedTerms.length > 3 조건으로 감싸면 UX가 조금 더 자연스러울 것 같습니다.

Also applies to: 68-82

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 41ebf51 and 16bae60.

📒 Files selected for processing (4)

• src/components/RecommendedTermCard.tsx (3 hunks)
• src/components/RecommendedTermCardSkeleton.tsx (1 hunks)
• src/components/search/RecommendedTermsSection.tsx (3 hunks)
• src/lib/recommendations.ts (3 hunks)

🧰 Additional context used

🧬 Code graph analysis (3)

src/lib/recommendations.ts (3)

src/app/terms/[slug]/page.tsx (3)

• TermDetailPage (13-108)
• term (74-77)
• loadTerm (28-49)

src/types/terms.ts (1)

• TermIndexItem (6-16)

src/lib/terms.ts (1)

• getTermBySlug (83-93)

src/components/search/RecommendedTermsSection.tsx (4)

src/contexts/AuthContext.tsx (1)

• useAuth (269-275)

src/lib/recommendations.ts (2)

• RecommendedTerm (41-47)
• getRecommendedTerms (52-89)

src/components/RecommendedTermCardSkeleton.tsx (1)

• RecommendedTermCardSkeleton (1-22)

src/components/RecommendedTermCard.tsx (1)

• RecommendedTermCard (40-93)

src/components/RecommendedTermCard.tsx (1)

src/components/icons/ic_category_all.tsx (1)

• CategoryAllIcon (3-25)

🔇 Additional comments (3)

src/components/RecommendedTermCardSkeleton.tsx (1)

1-21: 추천 용어 스켈레톤 레이아웃 적절합니다.

실제 카드와 폭·모양이 잘 맞춰져 있어서 로딩 전환 시 레이아웃 점프 없이 자연스럽게 동작할 것 같습니다. 별도의 로직이나 상태가 없어 유지보수 측면에서도 단순해 보여요.

src/lib/recommendations.ts (1)

41-47: slug 필드 전파가 일관되게 잘 연결되었습니다.

RecommendedTerm 인터페이스에 slug를 추가하고, 용어 수 부족 분기와 셔플 분기 양쪽 모두에서 t.slug를 매핑해 주셔서 데이터 레이어–UI(카드/섹션) 간 계약이 깔끔하게 맞습니다. 비로그인/로그인 모두에서 동일한 구조로 동작할 수 있어 유지보수하기 좋아 보입니다.

Also applies to: 63-69, 78-84

src/components/search/RecommendedTermsSection.tsx (1)

14-36: Auth 로딩 상태와 추천어 로딩 상태 분리가 목적에 잘 맞습니다.

• loading이 끝날 때까지 조기 return 후, userData?.selectedCategory ?? "all"로 카테고리를 결정해서 비로그인 사용자의 경우에도 "all" 기준 추천을 보여주도록 한 구조가 이슈(#97)의 요구사항과 잘 맞습니다.
• 로컬 isLoading으로 추천어 fetch 상태만 분리해서 skeleton 노출을 제어한 것도 UI/상태 관리 측면에서 깔끔합니다.