Skip to content

feat: 큐레이션 페이지 리디자인 + 2차 개선#12

Merged
bbbang105 merged 9 commits intodevfrom
feature/curation-redesign
Mar 2, 2026
Merged

feat: 큐레이션 페이지 리디자인 + 2차 개선#12
bbbang105 merged 9 commits intodevfrom
feature/curation-redesign

Conversation

@bbbang105
Copy link
Copy Markdown
Owner

🎯 Summary

큐레이션 페이지를 무한스크롤 기반으로 리디자인하고, 맞춤 탭·검색·접근성·보안을 강화한 2차 개선까지 포함


🔴 AS-IS

  • offset 기반 페이지네이션 (중복/누락 이슈)
  • 카테고리 필터만 존재, 검색 없음
  • 태그 선택 4개 제한
  • 개인화 정렬 없음
  • 접근성/보안 미흡

🟢 TO-BE

  • cursor 기반 무한스크롤 (IntersectionObserver)
  • 맞춤(recommended) 탭: 사용자 관심사 기반 태그 겹침 점수 정렬
  • 제목/설명 ILIKE 검색 (300ms debounce)
  • 태그 제한 제거 + # 접두사 + 카드 태그 칩 표시
  • 모바일 태그 토글 (접기/펼치기)
  • WCAG 2.1 AA 접근성 준수
  • ILIKE 와일드카드 이스케이프, 입력 검증, UUID 포맷 체크

📁 Changes

파일 변경
packages/web/src/app/(user)/curation/page.tsx 전체 리디자인: 무한스크롤, 맞춤탭, 검색UI, 태그개선, 접근성
packages/web/src/app/api/curation/route.ts cursor 페이지네이션, search/sort 파라미터, 보안 강화
packages/web/src/lib/curation-utils.ts 그라디언트/상대시간 유틸, recommended 카테고리 스타일
packages/web/src/app/globals.css scrollbar-hide 유틸리티
packages/web/src/app/api/admin/curation/crawl/route.ts 관리자 크롤링 API
packages/shared/src/db/schema.ts description, thumbnailUrl 컬럼 추가
scripts/seed-conference-sources.ts 컨퍼런스 소스 시드 스크립트 (8개)
packages/web/next-env.d.ts Next.js 16 TypeScript 선언

🏗 Design Decisions

결정 이유
cursor-based pagination offset 대비 중복/누락 방지, 무한스크롤에 최적
3-part cursor (overlap|date|id) recommended 정렬의 복합 키 지원
INTERSECT 서브쿼리 intarray 확장 없이 text[] 겹침 계산
cursorRef 패턴 IntersectionObserver stale closure 방지
escapeIlike() ILIKE 와일드카드 인젝션 방지
semantic <button> for tags <Badge onClick> 대비 키보드 접근성 보장
motion-safe: prefix 동작 민감 사용자 대응

✅ Test Plan

  • 맞춤 탭: 관심사 겹침 순 정렬 확인
  • 전체/컨퍼런스/아티클 탭: 최신순 정렬 확인
  • 검색: 제목/설명 검색 + 특수문자(%_) 입력 테스트
  • 태그: 5개 이상 선택 가능, # 접두사 표시, 카드 태그 칩
  • 모바일: 태그 접기/펼치기 + 선택 개수 표시
  • 무한스크롤: 중복 없이 페이지네이션
  • 키보드: Tab으로 모든 인터랙티브 요소 탐색 가능
  • pnpm typecheck
  • pnpm build

💬 참고사항

  • 컨퍼런스 소스 시드 스크립트(scripts/seed-conference-sources.ts)는 수동 실행 필요
  • 맞춤 탭은 사용자 관심사 미등록 시 최신순으로 자동 fallback
  • 1차 리디자인(무한스크롤) + 2차 개선(맞춤/검색/접근성/보안) 통합 PR

🤖 Generated with Claude Code

bbbang105 and others added 8 commits March 1, 2026 18:24
- NormalizedFeedItem에 description 필드 추가
- 각 피드 포맷(Atom/RSS/JSON/RDF)에서 description 추출
- sanitizeDescription: HTML 태그 제거 + 300자 truncate
- extractOgImage: 블로그 URL에서 og:image 메타태그 추출 (5초 타임아웃)
- curation_items INSERT 시 description, thumbnailUrl 저장

Co-Authored-By: Claude <noreply@anthropic.com>
- 단일 publishedAt cursor → 복합 cursor (publishedAt|id)로 변경
- 동일 publishedAt 아이템 간 id로 정확한 경계 구분
- publishedAt NULL 케이스 처리
- ORDER BY에 NULLS LAST 추가

Co-Authored-By: Claude <noreply@anthropic.com>
Drizzle sql 템플릿에서 Date 객체를 직접 바인딩하면
ERR_INVALID_ARG_TYPE 에러 발생. ISO 문자열 + ::timestamptz 캐스팅으로 수정.

Co-Authored-By: Claude <noreply@anthropic.com>
- 맞춤(recommended) 탭: 사용자 관심사 기반 태그 겹침 점수 정렬
- 검색 기능: 제목/설명 ILIKE 검색 + 300ms debounce
- 태그 # 접두사 + 카드 태그 칩 표시 + 4개 제한 제거
- 모바일 태그 토글 (접기/펼치기)
- 보안: ILIKE 와일드카드 이스케이프, 입력 검증, UUID 포맷 체크
- 접근성: aria-pressed/expanded/live, focus-visible, motion-safe
- 코드 품질: BASE_SELECT/serializeItem 추출, cursorRef 패턴
- 컨퍼런스 소스 시드 스크립트 추가

Co-Authored-By: Claude <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 2, 2026

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

Project Deployment Actions Updated (UTC)
study-admin-web Ready Ready Preview, Comment Mar 2, 2026 3:26am

@bbbang105 bbbang105 added 🚀 feat 새로운 기능 추가 / 일부 코드 추가 / 일부 코드 수정 (리팩토링과 구분) / 디자인 요소 수정 🚨 fix 버그 수정 / 에러 해결 labels Mar 2, 2026
react-hooks/set-state-in-effect 린트 에러 수정

Co-Authored-By: Claude <noreply@anthropic.com>
@bbbang105 bbbang105 merged commit 8b49e6a into dev Mar 2, 2026
7 checks passed
@bbbang105 bbbang105 deleted the feature/curation-redesign branch March 2, 2026 03:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🚀 feat 새로운 기능 추가 / 일부 코드 추가 / 일부 코드 수정 (리팩토링과 구분) / 디자인 요소 수정 🚨 fix 버그 수정 / 에러 해결

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant