[7주차/세미나] MVI 패턴을 사용한 UI 단의 설계, 같이 해봐요!

[jihyunniiii]

⚙️ 실습 타임 - MVI 패턴을 사용한 UI 단의 설계, 같이 해봐요!

이제 MVI 패턴을 사용했을 때의 UI 단 설계를 함께 진행해 봅시다.
공통 컴포넌트를 찾고, 뷰스케치와 화면 컴포넌트화 하는 작업은 이제 잘 하실 거라고 생각해서 오늘은 간단히 UI 로직 설계만 함께 진행해보도록 합시다!

기능 명세

위와 같은 뷰를 설계한다고 생각해봅시다. (뷰가 잘 안 보이시거나 플로우가 헷갈리시면 저를 불러주세요.)

✔️ 뷰 기능 명세
𝟏. 입력한 정보를 바탕으로 건빵집 리스트를 보여줍니다.

입력할 수 있는 정보

1. 정렬 (단일 선택) - 기본순/리뷰 많은순
2. 카테고리 필터링 (중복선택) - 하드빵류, 디저트류, 브런치류
3. 내 필터 적용 여부

𝟐. 정렬 버튼 클릭 시 바텀 시트가 올라오며 이를 통해 정렬을 선택할 수 있습니다.

𝟑. 검색 버튼 클릭 시 검색 뷰로 이동합니다.

𝟒. 리스트 아이템 클릭 시 빵집 상세페이지로 이동합니다

✔️ 관련 API 명세