Sprint 2 - 슬롯리스트 UX 고정 _ 필터_ 정렬
목표
탐색이 “빠르고 조용하게” 끝나도록 만든다.
사용자는 3초 안에 다음을 읽어야 한다: 사용 가능 시간, 혜택, 남은 수량, 거리.
금지
무한 스크롤을 기본으로 채택하지 않는다.
인기순/랭킹순/조회순 기본값 사용 금지.
S2-1 필터 모델 확정 및 store 연동
목적
필터 UI보다 먼저 “필터 데이터 구조”를 고정한다.
작업
FilterState 정의
radiusMeters (기본값 유지)
categories (업종)
timePreset (now / next1h / today)
onlyAvailableNow (boolean, timePreset으로 대체 가능하면 생략)
store에 필터 상태 저장/수정 액션 추가
필터 변경 시 getNearbySlots 재호출 트리거 설계(즉시/적용 버튼 방식 결정)
권장(초기)
- “적용” 버튼 방식(사용자 실수/호출 폭주 방지)
완료 조건
필터 상태가 store에 반영되고, HomeScreen이 이를 구독
필터 변경 후 목록 재조회 가능
S2-2 필터 UI (바텀시트) 구현
목적
한 화면에서 하나의 결정만 유도하는 구조.
작업
바텀시트(또는 모달)로 필터 패널 구현
구성(최소)
시간 프리셋(3개)
거리 반경(프리셋: 500m/1km/2km/5km)
업종 선택(초기 5~10개)
버튼
초기화
적용
완료 조건
필터 열기/닫기 UX 안정
적용 시 목록이 갱신됨
초기화 시 기본값으로 복귀
S2-3 기본 정렬 규칙 구현
목적
정렬이 “소비 유도”가 아니라 “즉시성” 기반이어야 한다.
정렬 우선순위(기본)
현재 시간 기준 사용 가능 여부
거리
시간 임박 순(시작/종료 임박)
작업
슬롯에 derived field 생성(클라이언트 계산)
isAvailableNow
minutesToStart / minutesToEnd
정렬 함수 구현 및 유닛테스트(간단 케이스)
완료 조건
같은 데이터 입력 시 항상 동일한 정렬 결과
now 슬롯이 항상 상단에 올라옴
S2-4 슬롯 카드 정보 위계 고정
목적
타임슬롯 중심 위계를 카드에서 확정한다.
카드 표시 순서(강제)
시간 범위
혜택 조건
남은 수량
거리
매장 정보(최소)
작업
SlotCard 레이아웃 확정
“임박” 강조 규칙
수량 임박(예: remainingQty <= 3)
시간 임박(예: minutesToEnd <= 30)
과도한 배지/강조 금지
완료 조건
카드만 봐도 3초 안에 핵심 4요소 확인 가능
임박 상태만 제한적으로 강조됨
S2-5 결과 수 제한 및 페이지네이션(무한 스크롤 지양)
목적
탐색을 “끝낼 수 있게” 만든다.
작업(선택 1)
A안: “더 보기” 버튼 페이지네이션
서버/쿼리 limit/offset 또는 cursor 설계
더 보기 클릭 시 다음 묶음 로드
B안: “결과 제한 + 필터 유도”
- 최대 50개만 보여주고, 추가는 필터로 좁히기 유도
권장(초기)
- B안(서버 복잡도 줄이고 UX 단순화)
완료 조건
결과가 많아도 UI가 무너지지 않음
사용자가 탐색을 종료할 수 있음
S2-6 빈 상태/에러 상태 문구 및 행동 설계
목적
빈 화면이 “막다른 길”이 되지 않게 한다.
작업
빈 상태 유형 분리
반경 내 슬롯 없음
필터가 너무 좁음
위치 불안정(정확도 낮음)
각 상태별 행동
반경 확장 제안
시간 프리셋 변경 제안
새로고침
에러 상태에서 재시도/오프라인 안내
완료 조건
어떤 상태에서도 사용자가 다음 행동을 선택 가능
문구는 광고성/과장 없이 차분하게
S2-7 성능/리렌더 최소화(리스트 최적화)
목적
리스트는 앱에서 가장 자주 그려진다. 여기서 무너지면 끝이다.
작업
FlatList 최적화
keyExtractor 고정
memoized renderItem
getItemLayout(가능하면)
필터 변경 시 불필요한 전체 리렌더 방지(메모/셀 분리)
이미지/아이콘 과다 사용 금지
완료 조건
스크롤이 끊기지 않음(개발 폰 기준)
필터 적용 시 UI 멈춤 최소
S2-8 홈 화면 상단 상태 표시(최소)
목적
사용자가 “지금 기준”을 이해한다.
작업
현재 기준 표시(예: “현재 위치 기준”, “반경 1km”, “지금 사용 가능”)
마지막 갱신 시각(작게)
완료 조건
사용자가 왜 이 목록이 나오는지 이해 가능
과한 정보/배너 형태 금지
Sprint 2 완료 정의
다음이 가능해야 한다.
필터(시간/거리/업종)로 탐색이 가능
기본 정렬이 즉시성/거리/임박 순으로 안정적으로 동작
카드 정보 위계가 시간 중심으로 고정
무한 스크롤 없이도 탐색이 완료 가능한 구조
빈/에러 상태가 다음 행동을 안내
Buy me a coffee