19장. 실전 - 카테고리/리스트

필터/정렬/페이지네이션

화면 구조

Desktop (1440×900)

헤더 (80px)
├─ 브레드크럼 (48px)
├─ 카테고리 제목 + 상품 수 (60px)
└─ 본문 영역 (712px)
├─ 좌측 필터 (280px 고정)
│ ├─ 필터 헤더 + 초기화
│ ├─ 가격대 (슬라이더)
│ ├─ 브랜드 (체크박스)
│ ├─ 색상 (컬러 칩)
│ ├─ 사이즈 (버튼 그룹)
│ └─ 재질 (체크박스)
└─ 우측 상품 영역 (880px)
├─ 도구바 (56px)
│ ├─ 선택 필터 칩
│ ├─ 정렬 드롭다운
│ └─ 뷰 전환 (그리드/리스트)
├─ 상품 그리드 (4열)
└─ 페이지네이션 (60px)
푸터

Mobile (390×844)

헤더 (56px)
├─ 브레드크럼 (40px)
├─ 카테고리 제목 + 상품 수 (52px)
├─ 도구바 (48px)
│ ├─ 필터 버튼 (배지)
│ └─ 정렬 드롭다운
├─ 선택 필터 칩 (가변)
└─ 상품 그리드 (2열, 무한 스크롤)
바텀 내비게이션 (56px)

Figma Make 프롬프트

Desktop 전체 레이아웃

홈의 카테고리의 카드를 클릭했을 때 1440픽셀 너비의 상품 리스트 화면을 만들어줘.

상단 헤더 80픽셀 높이, 로고와 검색창 배치.

헤더 아래 브레드크럼 48픽셀 높이, 좌측 정렬로 "홈 > 의류 > 상의" 텍스트 표시, 구분자는 ">" 기호.

브레드크럼 아래 카테고리 헤더 영역 60픽셀 높이, 좌측에 "상의" 제목 28픽셀 굵은 글씨, 우측에 "총 245개 상품" 텍스트 16픽셀 회색.

본문 영역은 1200픽셀 중앙 정렬, 좌우 여백 120픽셀.
좌측에 필터 사이드바 280픽셀 너비, 흰색 배경, 테두리 1픽셀 연한 회색, 모서리 8픽셀 라운드.
필터 사이드바 내부:
- 상단 "필터" 제목 18픽셀 굵게, 우측에 "초기화" 버튼 14픽셀 파란색
- 가격대 섹션: 제목 "가격대" 15픽셀, 범위 슬라이더 두 개의 원형 핸들, 하단에 "10,000원 - 50,000원" 입력 필드
- 브랜드 섹션: 제목 "브랜드" 15픽셀, 체크박스 5개 (나이키, 아디다스, 자라, 유니클로, 에이치앤엠), 각 14픽셀
- 색상 섹션: 제목 "색상" 15픽셀, 원형 컬러 칩 8개 (검정, 흰색, 회색, 빨강, 파랑, 초록, 노랑, 핑크), 각 32픽셀 지름
- 사이즈 섹션: 제목 "사이즈" 15픽셀, 버튼 5개 (S, M, L, XL, XXL), 각 60×36픽셀- 섹션 간 구분선 1픽셀 연한 회색, 섹션 간격 24픽셀
우측 상품 영역 880픽셀 너비, 좌측 필터와 32픽셀 간격.
상품 영역 상단 도구바 56픽셀 높이:
- 좌측에 선택된 필터 칩 3개 (브랜드: 나이키 [X], 색상: 검정 [X], 사이즈: M [X]), 각 칩은 32픽셀 높이 파란 배경 모서리 16픽셀
- 우측에 정렬 드롭다운 "인기순" 160×40픽셀, 우측 화살표 아이콘
- 정렬 드롭다운 옆에 뷰 전환 아이콘 2개 (그리드, 리스트), 각 32×32픽셀
상품 그리드 영역:
- 4열 그리드, 각 상품 카드 202×300픽셀
- 카드 간 가로 간격 24픽셀, 세로 간격 32픽셀
- 상품 카드 구성: 이미지 202×202픽셀, 브랜드명 13픽셀 회색, 상품명 15픽셀 2줄, 가격 18픽셀
게
- 총 12개 상품 카드 배치 (4열 × 3행)
하단 페이지네이션 60픽셀 높이 중앙 정렬:
- 이전 화살표 버튼 32×32픽셀
- 페이지 번호 1, 2, 3, 4, 5 각 32×32픽셀, 현재 페이지는 파란 배경
- 다음 화살표 버튼 32×32픽셀
- 페이지 번호 간격 8픽셀

푸터 영역.
전체 배경은 연한 회색 #F8F8F8.

Desktop 필터 열림/닫힘 상태

앞의 상품 리스트 레이아웃에서 필터 섹션이 접히고 펼쳐지는 2가지 상태를 만들어줘.

첫 번째 상태 (기본):
모든 필터 섹션이 펼쳐진 상태, 각 섹션 제목 우측에 위 화살표 아이콘 16×16픽셀.
두 번째 상태 (브랜드 접힘):
브랜드 섹션만 접힌 상태, 브랜드 제목 우측 아래 화살표 아이콘, 체크박스 목록 숨김, 섹션 높이 줄어듦.
세 번째 상태 (모두 접힘):
가격대만 펼쳐지고 나머지 섹션 모두 접힌 상태.

Desktop 정렬 드롭다운

상품 리스트의 정렬 드롭다운이 열린 상태를 만들어줘.

드롭다운 버튼 "인기순" 160×40픽셀 흰색 배경, 테두리 1픽셀 회색, 모서리 4픽셀, 우측 아래 화살표 아이콘.
드롭다운 메뉴가 버튼 아래 펼쳐진 상태:
- 메뉴 패널 160픽셀 너비, 흰색 배경, 그림자 0 4px 12px rgba(0,0,0,0.1), 모서리 4픽셀
- 메뉴 항목 5개:
1. 인기순 (체크 아이콘, 파란색 텍스트)
2. 신상품순
3. 낮은 가격순
4. 높은 가격순
5. 할인율순
- 각 항목 높이 40픽셀, 좌우 패딩 12픽셀
- 호버 시 배경 연한 회색 #F8F8F8

Desktop 리스트 뷰

상품 리스트에서 그리드 뷰, 리스트뷰 전환할 수 있게 만들고, 리스트 뷰 레이아웃을 만들어줘.

좌측 필터는 동일, 우측 상품 영역 880픽셀에 리스트 형태로 배치.
각 상품 항목:
- 가로 전체 880픽셀, 세로 200픽셀
- 좌측 상품 이미지 200×200픽셀
- 우측 정보 영역 656픽셀 (이미지와 24픽셀 간격)
- 상단: 브랜드명 14픽셀 회색
- 상품명 18픽셀 굵게 2줄
- 상품 설명 14픽셀 회색 3줄
- 하단 우측: 가격 22픽셀 굵게, 할인율 18픽셀 빨간색
- 하단 우측: "장바구니 담기" 버튼 140×44픽셀 파란 배경
항목 간 구분선 1픽셀 연한 회색, 간격 24픽셀.
총 6개 항목 표시.

Mobile 전체 레이아웃

Desktop과 동일하게 모바일 홈에서 카테고리 카드를 클릭하면 390픽셀 너비의 모바일 상품 리스트 화면을 만들어줘.

상단 헤더 56픽셀 높이, 뒤로가기 아이콘, 검색 아이콘, 장바구니 아이콘.
헤더 아래 브레드크럼 40픽셀 높이, "< 상의" 텍스트 14픽셀, 좌측 정렬.
카테고리 헤더 52픽셀 높이:
- "상의" 제목 20픽셀 굵게 좌측
- "총 245개" 텍스트 14픽셀 회색 우측
도구바 48픽셀 높이, 좌우 패딩 16픽셀:
- 좌측 "필터" 버튼 100×40픽셀, 필터 아이콘, 우측 상단 배지 "3" 빨간 원형 16픽셀
- 우측 정렬 드록다운 "인기순" 120×40픽셀, 아래 화살표
선택된 필터 칩 영역 가변 높이, 좌우 패딩 16픽셀:
- 칩 3개 가로 나열 (브랜드: 나이키 [X], 색상: 검정 [X], 사이즈: M [X])
- 각 칩 높이 32픽셀, 파란 배경, 모서리 16픽셀, 간격 8픽셀
- 칩이 넘치면 다음 줄로 줄 바꿈
상품 그리드 영역 좌우 패딩 16픽셀:
- 2열 그리드
- 각 상품 카드 171×260픽셀
- 카드 간 가로 간격 10픽셀, 세로 간격 16픽셀
- 상품 카드 구성: 이미지 171×171픽셀, 브랜드명 11픽셀, 상품명 13픽셀 2줄, 가격 15픽셀
- 총 8개 상품 표시
하단 "더보기" 영역 80픽셀 높이:
- "더 많은 상품 보기" 텍스트 14픽셀 회색 중앙
- 아래 화살표 아이콘 16×16픽셀
바텀 내비게이션 56픽셀 고정.

Mobile 필터 드로어

모바일 상품리스트 필터 드로어 화면을 만들어줘.

화면 전체 390×844픽셀을 덮는 반투명 검정 오버레이 opacity 0.5.
하단에서 올라오는 드로어 패널:
- 너비 390픽셀, 높이 720픽셀
- 흰색 배경, 상단 모서리 16픽셀 라운드
- 상단 핸들바 32×4픽셀 회색 중앙 정렬
드로어 헤더 56픽셀 높이:
- 좌측 "닫기" X 아이콘 24×24픽셀
- 중앙 "필터" 제목 18픽셀 굵게
- 우측 "초기화" 버튼 14픽셀 파란색
드로어 내용 스크롤 영역:
- 가격대 섹션: 제목 "가격대" 16픽셀, 범위 슬라이더, 입력 필드 2개
- 브랜드 섹션: 제목 "브랜드" 16픽셀, 체크박스 5개
- 색상 섹션: 제목 "색상" 16픽셀, 컬러 칩 8개 각 40픽셀
- 사이즈 섹션: 제목 "사이즈" 16픽셀, 버튼 5개 각 64×40픽셀
- 섹션 간 구분선, 간격 20픽셀
하단 고정 버튼 영역 80픽셀 높이:
- "선택 완료 (245개)" 버튼 358×52픽셀 파란 배경 중앙

Mobile 정렬 바텀시트

모바일 상품리스트 정렬 바텀시트를 만들어줘.

반투명 검정 오버레이.
하단 바텀시트 패널:
- 너비 390픽셀, 높이 360픽셀
- 흰색 배경, 상단 모서리 16픽셀
- 상단 핸들바
헤더 48픽셀:
- 중앙 "정렬" 제목 16픽셀 굵게
정렬 옵션 리스트:
- 5개 항목 (인기순, 신상품순, 낮은 가격순, 높은 가격순, 할인율순)
- 각 항목 56픽셀 높이
- 현재 선택 "인기순" 파란색 텍스트, 우측 체크 아이콘 20×20픽셀
- 항목 간 구분선 1픽셀

필터 결과 0건 (Desktop)

Desktop 상품리스트 레이아웃에서 필터 적용 후 상품이 0개인 상태를 만들어줘.

좌측 필터 영역은 동일, 선택된 필터 칩 3개 표시.
우측 상품 영역 중앙에 Empty 상태:
- 빈 박스 일러스트 120×120픽셀 회색
- "조건에 맞는 상품이 없습니다" 텍스트 18픽셀 중앙
- "필터를 조정하거나 초기화해 보세요" 텍스트 14픽셀 회색 중앙
- "필터 초기화" 버튼 160×48픽셀 파란 테두리 중앙
전체 높이 500픽셀 회색 배경 #F8F8F8, 모서리 8픽셀.

필터 결과 0건 (Mobile)

Mobile 상품리스트 레이아웃에서 필터 적용 후 상품이 0개인 상태를 만들어줘.

도구바와 필터 칩은 동일.
상품 영역 중앙 Empty 상태:
- 빈 박스 아이콘 80×80픽셀
- "상품이 없습니다" 16픽셀 중앙
- "다른 조건으로 검색해 보세요" 13픽셀 회색 중앙
- "필터 초기화" 버튼 280×48픽셀 파란 테두리
높이 400픽셀.

Loading 상태 (Desktop)

Desktop 상품리스트 레이아웃에서 로딩 중인 상태를 만들어줘.

좌측 필터 영역:
- 각 섹션 제목은 표시
- 체크박스, 슬라이더, 컬러 칩 대신 스켈레톤
- 스켈레톤: 회색 #F0F0F0, 모서리 4픽셀
우측 상품 영역:
- 12개 상품 카드 스켈레톤
- 각 카드: 이미지 영역 202×202픽셀 스켈레톤, 텍스트 4줄 스켈레톤
- shimmer 효과: 그라디언트 애니메이션
도구바는 비활성화된 상태로 표시.

Error 상태 (Desktop)

Desktop 상품리스트 레이아웃에서 에러 상태를 만들어줘.

좌측 필터는 비활성화 회색 처리.
우측 상품 영역 중앙 Error 상태:
- 느낌표 원형 아이콘 100×100픽셀 빨간색
- "상품을 불러올 수 없습니다" 20픽셀 굵게 중앙
- "네트워크 연결을 확인하고 다시 시도해 주세요" 15픽셀 회색 중앙
- "새로고침" 버튼 160×48픽셀 파란 배경 중앙
전체 높이 500픽셀 연한 빨강 배경 #FFF5F5, 테두리 1픽셀 #FFE0E0.

상태 정의

Idle (정상)

필터 미적용: 전체 상품 표시, 기본 정렬 "인기순"

필터 적용: 선택 필터 칩 표시, 조건 맞는 상품만 표시

페이지네이션 활성화

Loading

필터/정렬 변경 시: 0.5초 이상 소요 시 스켈레톤 표시

페이지 전환 시: 상품 영역만 스켈레톤

무한 스크롤 로딩: 하단 스피너

Empty

필터 결과 0건: Empty 상태 + 필터 초기화 제안

카테고리 상품 없음: "준비 중입니다" + 다른 카테고리 추천

Error

API 실패: Error 상태 + 새로고침 버튼

네트워크 오류: 연결 확인 안내

NOTE 문서화

N.기능.리스트필터.01

목적: 고객이 원하는 조건으로 상품을 빠르게 필터링
대상: 전체 고객 필터
항목: 가격대·브랜드·색상·사이즈·재질 (카테고리별 상이)
최대 선택: 브랜드 5개, 색상 3개, 사이즈 5개 동시 선택 가능
초기화: 전체 초기화 또는 칩별 개별 제거

N.상태.리스트필터.02

조건: 필터 미적용 시 전체 상품, 적용 시 AND 조건 (브랜드·색상·사이즈 모두 충족)
표시: 선택 필터 칩 상단 표시, 칩 클릭 시 해당 필터 제거
전환: 필터 변경 시 → Loading 0.5초 → 결과 표시 또는 Empty

N.데이터.리스트필터.03

가격대: 슬라이더 min 0원 max 200,000원, 단위 1,000원, 입력 직접 가능
브랜드: 체크박스, 다중 선택, 알파벳 순 정렬
색상: 컬러 칩 HEX 코드, 단일 또는 다중 선택
사이즈: 카테고리별 사이즈 테이블 (의류: S/M/L/XL/XXL, 신발: 230-280mm)
API: POST /products/filter, 파라미터 {category_id, price_min, price_max, brands[], colors[], sizes[]}

N.이벤트.리스트필터.04

Desktop: 체크박스·슬라이더 변경 즉시 적용, 디바운스 500ms
Mobile: 드로어에서 선택 후 "선택 완료" 탭 시 일괄 적용
칩 제거: 칩 [X] 클릭 → 해당 필터 해제 → API 재호출 → 결과
업데이트 초기화: "초기화" 클릭 → 모든 필터 해제 → 전체 상품 표시

N.기능.리스트정렬.01

목적: 고객 선호 순서로 상품 재정렬
옵션: 인기순(기본)·신상품순·낮은 가격순·높은 가격순·할인율순
인기순 기준: 최근 7일 판매량 + 찜 수 + 조회수 가중치 (6:3:1)
신상품순: created_at DESC
가격순: sale_price 또는 price ASC/DESC
할인율순: discount_rate DESC

N.상태.리스트정렬.02

기본값: 인기순
변경 시: 드롭다운 열림 → 옵션 선택 → 드롭다운 닫힘 → Loading → 재정렬된 결과
유지: 필터 변경 시에도 정렬 순서 유지 (예: 가격순 선택 후 브랜드 필터 추가 → 가격순 유지)

N.이벤트.리스트정렬.03

Desktop: 드롭다운 클릭 → 메뉴 펼침 → 옵션 호버 배경 #F8F8F8 → 클릭 → API 재호출
Mobile: 드롭다운 탭 → 바텀시트 슬라이드업 → 옵션 탭 → 바텀시트 닫힘 → 결과 업데이트
API: GET /products/list?sort=popular (popular, newest, price_asc, price_desc, discount)

N.기능.리스트페이지.01

Desktop: 페이지네이션 (페이지당 24개)
Mobile: 무한 스크롤 (1회 12개 로드)
페이지네이션: 최대 5개 페이지 번호 표시, 현재 페이지 중앙, 이전/다음 화살표
무한 스크롤: 하단 200px 이내 → 스피너 표시 → API 호출 → 추가 로드 → 스크롤 위치 유지

N.상태.리스트페이지.02

페이지네이션: 첫 페이지 시 이전 버튼 비활성, 마지막 페이지 시 다음 버튼 비활성
무한 스크롤: 마지막 도달 시 "마지막 상품입니다" 텍스트 표시, 로딩 중단 Empty: 첫 페이지부터 0건 → Empty 상태

N.데이터.리스트카드.01

상품 카드 정보: product_id, image_url, brand, name, price, sale_price, discount_rate, is_soldout, is_new
이미지: 정사각형 비율, WebP 압축 85%, Lazy loading
텍스트: 브랜드명 1줄 말줄임, 상품명 2줄 말줄임, 가격 천 단위 콤마 + "원" 배지: 품절 시 "품절", 신상품(7일 이내) "NEW", 할인율 10% 이상 시 표시

N.이벤트.리스트카드.02

Desktop: 호버 → 그림자 + "장바구니 담기" 버튼 페이드인 0.3초 → 버튼 클릭 → 토스트 "장바구니에 담았습니다"
Mobile: 카드 탭 → 상품 상세 페이지 이동 (장바구니 버튼 없음) 품절
카드: 호버 → "재입고 알림" 버튼 표시

N.데이터.리스트성능.01

이미지 최적화: WebP, 압축 85%, Desktop 202×202px / Mobile 171×171px
Lazy loading: Intersection Observer, 뷰포트 200px 전 로드
API 캐싱: 동일 필터·정렬 조합 5분간 캐시
디바운스: 필터 슬라이더 500ms, 검색 입력 300ms

N.이벤트.리스트분석.01

GA4 이벤트:
view_item_list: 리스트 진입 시, item_list_id/name
filter_apply: 필터 적용, filter_type/value
sort_change: 정렬 변경, sort_type
view_item: 상품 클릭, item_id/name/index
add_to_cart: 장바구니 담기, item_id/name/price

컴포넌트화

필터 컴포넌트

Filter/Desktop/Sidebar → 전체 필터 영역

FilterSection/PriceRange → 가격대 슬라이더

FilterSection/Checkbox → 브랜드, 재질

FilterSection/ColorChip → 색상 선택

FilterSection/ButtonGroup → 사이즈 선택

Filter/Mobile/Drawer → 모바일 드로어

정렬 컴포넌트

SortDropdown/Desktop/Closed → 닫힌 상태

SortDropdown/Desktop/Open → 열린 상태

SortBottomSheet/Mobile → 바텀시트

상품 카드 재사용

18장 ProductCard 컴포넌트 재사용

Variants: Default, Hover, Soldout

페이지네이션 컴포넌트

Pagination/Desktop → 페이지 번호 + 화살표

InfiniteScroll/Mobile/Loading → 스피너

InfiniteScroll/Mobile/End → "마지막 상품입니다"

90_Spec_Components 페이지 구성

Section: List Components
├─ Subsection: Filter
│ ├─ Filter/Desktop/Sidebar
│ ├─ FilterSection/PriceRange
│ ├─ FilterSection/Checkbox
│ ├─ FilterSection/ColorChip
│ ├─ FilterSection/ButtonGroup
│ └─ Filter/Mobile/Drawer
├─ Subsection: Sort
│ ├─ SortDropdown/Desktop/Closed
│ ├─ SortDropdown/Desktop/Open
│ └─ SortBottomSheet/Mobile
├─ Subsection: Pagination
│ ├─ Pagination/Desktop
│ ├─ InfiniteScroll/Mobile/Loading
│ └─ InfiniteScroll/Mobile/End
└─ Subsection: States
├─ List/Loading/Desktop
├─ List/Loading/Mobile
├─ List/Empty/Desktop
├─ List/Empty/Mobile
├─ List/Error/Desktop
└─ List/Error/Mobile

Figma 프로토타입 설정

필터 인터랙션

Desktop 필터 섹션 접기/펼치기

섹션 제목 클릭 → 화살표 회전 + 내용 슬라이드 애니메이션 Smart animate 300ms

필터 적용

체크박스 클릭 → 체크 상태 토글

슬라이더 드래그 → 값 변경 (Figma 제약: 실제 드래그 어려움, 프리셋 값 3개 상태로 시뮬레이션)

컬러 칩 클릭 → 테두리 파란색 2px

"초기화" 클릭 → 모든 선택 해제 상태로 전환

Mobile 필터 드로어

"필터" 버튼 탭 → 드로어 슬라이드업 Smart animate 400ms

오버레이 탭 또는 "닫기" 탭 → 드로어 슬라이드다운 Smart animate 400ms

"선택 완료" 탭 → 드로어 닫기 + 필터 칩 표시

정렬 인터랙션

Desktop 드롭다운

드롭다운 클릭 → 메뉴 펼침 Dissolve 200ms

메뉴 항목 호버 → 배경 #F8F8F8 Instant

메뉴 항목 클릭 → 메뉴 닫기 + 선택 항목 표시

Mobile 바텀시트

드롭다운 탭 → 바텀시트 슬라이드업 Smart animate 350ms

오버레이 탭 → 바텀시트 닫기 Smart animate 350ms

옵션 탭 → 체크 아이콘 표시 + 바텀시트 닫기

페이지네이션

Desktop 페이지 번호 클릭 → 해당 페이지 프레임으로 Navigate to Instant

이전/다음 화살표 클릭 → 이전/다음 페이지로 Navigate to

Mobile 무한 스크롤: Figma 제약으로 "더보기" 버튼 탭 → 상품 추가된 프레임으로 전환

상품 카드

18장 ProductCard 프로토타입 재사용

Desktop: 호버 → "장바구니 담기" 버튼 표시 → 버튼 클릭 → 토스트 오버레이

Mobile: 카드 탭 → Open URL (상품 상세 페이지)

체크리스트

디자인 검증

[ ] Desktop 필터 280px 고정 너비

[ ] Mobile 필터 드로어 상단 모서리 16px 라운드

[ ] 필터 칩 최대 3줄, 넘치면 "외 N개" 표시

[ ] 정렬 드롭다운 현재 선택 항목 체크 아이콘

[ ] 상품 카드 간격 일관성 (Desktop 24px, Mobile 10px)

[ ] 페이지네이션 현재 페이지 파란 배경

[ ] Empty 상태 일러스트 + 안내 문구 + CTA 버튼

[ ] Error 상태 느낌표 아이콘 + 새로고침 버튼

콘텐츠 검증

[ ] 브랜드명 알파벳 순 정렬

[ ] 가격대 min/max 값 확인

[ ] 색상 칩 HEX 코드 정확성

[ ] "총 N개 상품" 텍스트 동적 변경

[ ] 필터 칩 라벨 명확성 (브랜드: 나이키, 색상: 검정)

[ ] 정렬 옵션 5개 모두 표시

[ ] Empty 문구 "조건에 맞는 상품이 없습니다"

[ ] Error 문구 "상품을 불러올 수 없습니다"

인터랙션 검증

[ ] Desktop 필터 섹션 접기/펼치기 동작

[ ] Desktop 필터 체크박스 즉시 적용

[ ] Mobile 필터 드로어 스와이프 다운 닫기

[ ] Mobile "선택 완료" 버튼 탭 시 드로어 닫힘

[ ] 필터 칩 [X] 클릭 시 해당 필터 제거

[ ] "초기화" 클릭 시 모든 필터 해제

[ ] 정렬 드롭다운/바텀시트 열기/닫기

[ ] 페이지네이션 번호 클릭 이동

[ ] 상품 카드 클릭 상세 이동

상태 검증

[ ] Idle: 필터 미적용 전체 상품 표시

[ ] Loading: 스켈레톤 shimmer 효과 동작

[ ] Empty: 필터 결과 0건 시 Empty 상태 표시

[ ] Error: API 실패 시 Error 상태 + 새로고침 버튼

[ ] 필터 적용 상태: 선택 필터 칩 표시

[ ] 페이지네이션: 첫/마지막 페이지 화살표 비활성

[ ] Mobile 무한 스크롤: "마지막 상품입니다" 표시

프로토타입 검증

[ ] Desktop 필터 접기/펼치기 애니메이션 300ms

[ ] Mobile 드로어 슬라이드 애니메이션 400ms

[ ] 정렬 드롭다운/바텀시트 열림 애니메이션

[ ] 필터 칩 [X] 클릭 시 제거 동작

[ ] "초기화" 클릭 시 전체 해제

[ ] 상품 카드 호버 효과 (Desktop)

[ ] 페이지 번호 클릭 시 해당 페이지 이동

[ ] "더보기" 버튼 탭 시 상품 추가 (Mobile)

---

위의 프롬프트는 예시이다. 그대로 사용하기보다는 예시안을 보고 구성을 파악하는게 좋다. 쇼핑몰 이외 사이트에서도 동일한 프롬프트 구성으로 작성하면 원하는 결과를 얻을 수 있다. 프롬프트를 직접 작성하는데 초점을 맞춰 진행하는게 더 도움이 된다.

프로토타입 결과 예시 : https://ide-python-61918998.figma.site/

Desktop E-commerce Header

---