TJ 노래방 공식 차트 API 연동으로 popular 페이지 개편

[GulSam00]

TJ미디어 공식 사이트(tjmedia.com)에서 제공하는 topAndHot100 API를 매달 1일 배치로 크롤링하여 Supabase에 저장하고, popular 페이지에서 장르별/월별로 조회할 수 있도록 개편한다.

• API: https://www.tjmedia.com/legacy/api/topAndHot100?chartType=TOP&searchStartDate=YYYY-MM-01&searchEndDate=YYYY-MM-DD&strType=N
• CORS 제약 없음 (APIDOG 테스트로 확인됨)
• strType 값에 따라 장르가 달라짐 (참고: https://www.tjmedia.com/chart/top100)
• 기존 popular 페이지는 포인트 기반 자체 추천(엄지척) 시스템으로 동작 중 — 이번 작업으로 TJ 공식 차트 데이터 기반으로 대체

확정된 결정 사항

• HOT100(chartType=HOT)은 이번 범위에서 제외, TOP100만 수집
• 기존 thumb_logs//api/songs/thumb-up/ThumbUpModal은 코드 그대로 유지, popular 페이지 노출 데이터만 TJ 차트로 교체
• str_type은 별도 공유 패키지 없이 크롤링/웹 양쪽에 각각 enum으로 중복 정의 (의도적)
• num_tj 매칭 실패 곡은 저장하지 않고 로그 파일에만 기록 (자동 생성 안 함)

작업 체크리스트

• packages/crawling에 TJ topAndHot100 API 호출 스크립트 추가 — src/cron/crawlTjChart.ts
• strType ↔ 장르 매핑 정의 — StrType enum (crawling: src/types.ts, web: src/types/tjChart.ts)
• Supabase 테이블 스키마 설계 (tj_chart_rankings: chart_month, str_type, rank, song_id) — SQL 작성 완료, 실제 테이블 생성은 아직 안 함 (아래 "남은 작업" 참고)
• crawl_tj_chart.yml GitHub Actions 워크플로우 추가 (매달 1일 KST + 수동 실행)
• popular 페이지 조회용 API 라우트 추가 — /api/tj-chart (month, genre 파라미터)
• popular 페이지 UI를 장르별/월별 필터 UI로 개편 — TjChartRankingList.tsx
• 기존 thumb_count 기반 추천 시스템 처리 방향 결정 — 유지, 페이지 노출만 교체로 확정

남은 작업 (다음 세션에서 이어서 할 것)

• Supabase 대시보드 SQL 에디터에서 tj_chart_rankings 테이블 실제 생성 (사용자 수동 실행 필요)

  create table tj_chart_rankings (
    id uuid primary key default gen_random_uuid(),
    chart_month date not null,
    str_type text not null default '',
    rank smallint not null,
    song_id uuid not null references songs(id),
    created_at timestamptz not null default now(),
    unique (chart_month, str_type, rank)
  );

• 테이블 생성 후 packages/crawling에서 pnpm tj-chart 최초 1회 수동 실행해 데이터 채우기 + 결과 확인 (매칭/미매칭 건수, src/assets/tjChartUnmatched.txt)
• /popular 페이지 브라우저에서 직접 확인 (월/장르 필터 동작, 빈 데이터 상태 UI 등)
• /refactor (선택)
• /verify — build, lint, format 전체 검증 (필수, 아직 미실행)
• /commit
• /pr

현재 상태

• 브랜치: feat/295-tjChartApi
• 코드 구현 완료 (/green 완료), 커밋은 아직 안 함
• tsc/eslint/prettier로 정적 검증만 완료, pnpm build/pnpm dev 실제 구동 확인은 안 함