Few Letter
AI가 요약한 뉴스를 카테고리별로 골라 이메일로 받는 구독 서비스입니다.
웹에서는 국내 · 해외 뉴스를 카테고리별로 모아 봅니다.
현재는 운영이 종료된 서비스입니다. 아래의 화면은 목업으로 구성되어 있습니다.
- Next.js 16 App Router
- React 19
- TypeScript
- TanStack Query 5
- Tailwind CSS 4
통신 레이어
로깅, 에러 변환, 쿼리 조립처럼 매 호출에 반복되던 일을 한 레이어가 전담합니다.
외부 HTTP 라이브러리 대신 fetch를 감싼 클라이언트를 두고 요청 · 응답 · 에러 세 지점에 미들웨어를 끼울 수 있게 해, 호출처에는 경로와 응답 타입만 남겼습니다.
데이터 페칭
쿼리 정의를 한 곳에 모아 서버 프리페치와 클라이언트 훅이 그대로 나눠 씁니다.
키와 페칭 함수와 캐시 정책을 한 곳에서만 정의해, 서버에서 미리 받아 둔 부분은 로딩 없이 그려지고, 키가 어긋나 프리페치가 버려지는 사고가 나지 않습니다.
목록 화면
목록을 offset이 아닌 커서 방식으로 붙입니다.
커서로 마지막 항목의 id를 보내서, 새 글이 들어와도 페이지 경계에서 항목이 중복되거나 누락되지 않습니다. 로딩 · 에러 · 빈 목록 · 정상 네 상태는 모두 화면으로 만들었습니다.
반응형 캐러셀
슬라이드 이동과 인디케이터가 반응형으로 지원되는 캐러셀을 라이브러리 없이 직접 구현했습니다.
항목 타입은 제네릭으로, 렌더링은 호출부가 넘긴 함수로 받아 어떤 목록에든 쓸 수 있습니다. 화면 폭에 따라 한 번에 보이는 개수가 바뀌는데, 나누어떨어지지 않으면 마지막 슬라이드의 이동량을 보정해 빈 칸을 없앴습니다. 터치 스와이프는 최소 이동 거리를 두어 세로 스크롤과 섞이지 않게 했습니다.
반응형
폭이 줄면 열 개수와 내비게이션 형태를 바꿉니다.
좁은 화면에서 헤더는 햄버거 메뉴가 됩니다. 넓은 화면에서는 탭과 구독 링크를 펼칩니다.
