[request]: 어드민 위스키 등록 페이지의 tasting-tags 대량 조회 페이징 처리 필요

[Whale0928]

who

FE (담당자 지정 부탁드립니다) / BE (@Whale0928)

what

어드민 위스키 등록 페이지(https://admin.development.bottle-note.com/whisky/new) 진입 시 호출하는 GET /admin/api/v1/tasting-tags?size=500 응답이 비정상적으로 커서 페이지가 멈추는 현상.

대량 한방 조회 대신 페이징(또는 검색 기반 lazy load) 으로 전환 요청.

why

증상

• 응답 사이즈: raw 13MB / gzip 9.5MB
• 다운로드 시간: 약 5초
• 브라우저 메인 스레드 점유 (JSON 파싱)
• Chrome DevTools request content was evicted from inspector cache 메시지
• nginx 경고: an upstream response is buffered to a temporary file

원인

각 태그의 icon 필드가 PNG 이미지를 base64 Data URL로 인라인 저장되어 있음:

{
  "id": 1,
  "korName": "...",
  "engName": "...",
  "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...",
  "description": "...",
  "parent": null,
  "children": null
}

• 한 항목당 약 42KB (icon이 40KB 차지)
• 전체 319개 태그 → 약 13MB
• 비교: distilleries 한 항목 ~200 byte (정상적 페이로드 — 200배 outlier)

임시 조치 (BE, 완료)

응답 크기를 일시적으로 줄이기 위해 dev DB의 tasting_tag.icon 컬럼을 id=1을 제외한 모든 행에 대해 NULL 처리.

UPDATE tasting_tag SET icon = NULL WHERE id <> 1;

→ 이로 인해 dev에서 size=500 응답은 일시적으로 가벼운 상태이지만, icon 데이터를 잃은 임시 상태이며 근본 해결 아님.

요청 사항 (FE)

대량 한방 조회(size=500) 대신 다음 중 하나로 변경 부탁드립니다:

1. 페이징 적용 (page=0&size=20 등) — 응답 meta에 totalPages, totalElements, hasNext 이미 제공됨
2. 검색/필터 기반 lazy load — 사용자가 입력하는 키워드로 점진 조회 (/tasting-tags?keyword=...)
3. 무한 스크롤 / 가상 리스트

후속 작업 (BE, 별도 이슈로 분리 예정)

• icon 필드를 응답에서 분리하고 별도 URL/CDN 참조 방식으로 전환 (응답 페이로드 다이어트)
• DB icon 컬럼 마이그레이션 + 임시로 NULL 처리한 데이터 복구

참고 수치 (dev 환경 측정 — 임시 조치 전 기준)

항목	값
전체 태그 수 (meta.totalElements)	319
size=1 응답 크기	~30KB (gzip, id=1 icon 포함)
size=500 응답 크기 (임시 조치 전)	9.5MB (gzip), 13MB (raw)
size=500 응답 시간	~5s
비교: distilleries 9999개	4KB (gzip), 26KB (raw)

비고

• 본 이슈는 BE 응답 다이어트 작업과 무관하게 FE 단에서 페이징/lazy load 적용으로 우선 해결 가능
• BE 후속 작업이 완료되면 응답 크기는 자동으로 다이어트되지만, 페이징은 그와 별개로 모범 사례라 적용 권장

[hyejj19]

화면 멈춤은 reference api 응답 타입 변경에 대한 대응으로 인한 깨짐
이와 별개로 레이지 로딩은 적용함

[hyejj19]

급한건이라 운영까지 배포 진행했어요 @Whale0928 @200wonman