손님들에게 아이스크림 주문 처리 현황을 실시간으로 대시보드를 보여주고자 합니다. 처리가 완료된 주문은 크게 보여주고, 진행중인 주문의 리스트도 보여줘야 합니다. 슬라이스를 사용하면 아이스크림 주문이라는 데이터에 대해 손님, 직원, 관리자 등 다양한 관점으로 실시간으로 보여줄 수 있습니다.

먼저, 고객들에게 보여줄 실시간 대시보드용 슬라이스를 선언해봅시다. 대시보드에는 대기중인 주문과 픽업 중인 주문을 조회해서 보여줄 수 있습니다.

inWaiting 슬라이스는 대기중인 주문을 조회하는 슬라이스이고, inPickup 슬라이스는 픽업 중인 주문을 조회하는 슬라이스입니다. 슬라이스가 선언되면 store의 상태와 액션이 자동으로 생성됩니다.

아이스크림 가게에서 선반마다 "픽업 대기", "제작 중"처럼 라벨을 붙이는 것처럼, 슬라이스에도 dictionary에서 적절한 이름을 부여해야 합니다. 이렇게 하면 UI에서 의미 있는 레이블이 표시되고 슬라이스 함수들이 적절히 문서화됩니다.

이제 고객들이 볼 실제 대시보드 페이지를 만들어봅시다. 카페에서 "현재 서빙 중: 주문 #42"를 보여주는 대형 디스플레이 화면처럼 생각해보세요 - 같은 주문 데이터의 다른 뷰를 동시에 보여줘야 합니다. Zone 컴포넌트를 사용해서 슬라이스를 UI에 연결하고 실시간으로 표시할 것입니다.

다국어를 위한 번역 레이블 추가를 잊지 마세요:

이 대시보드 페이지가 어떻게 작동하는지 살펴봅시다:

실시간 대시보드에서는 데이터가 항상 최신 상태여야 합니다. 직원이 주문 상태를 변경하면 디스플레이를 보고 있는 고객들이 자동으로 업데이트되는 것을 봐야 합니다. Zone 컴포넌트와 useInterval을 결합하면 이러한 "라이브" 경험을 만들 수 있습니다 - 공항 출발 게시판이 최신 비행 정보를 보여주기 위해 지속적으로 새로고침되는 것처럼요.

props와 자동 새로고침으로 디스플레이를 제어하는 방법을 살펴봅시다:

Unit 컴포넌트는 이제 액션 버튼 표시 여부를 결정하는 showControls prop을 받습니다. 이 간단한 플래그를 통해 같은 카드 컴포넌트를 직원 관리 뷰(컨트롤 포함)와 고객 대시보드 뷰(컨트롤 없음) 모두에서 사용할 수 있습니다.

이제 Zone 컴포넌트가 어떻게 자동 데이터 새로고침을 관리하는지 살펴봅시다:

이 Zone 컴포넌트의 주요 기능을 이해해봅시다:

Akan.js에서 슬라이스와 존을 사용할 때 일관된 패턴을 따르면 코드가 유지보수 가능하고 예측 가능하게 유지됩니다. 이러한 규칙을 아이스크림 가게의 "규정"이라고 생각해보세요 - 가게가 성장해도 모든 것이 원활하게 운영되도록 해줍니다.

다음 튜토리얼에서는 Akan.js의 Pages를 사용하여 동적 페이지 네비게이션과 사용자 경험을 만드는 방법을 살펴볼 것입니다. 이를 통해 고객들이 다단계 주문 흐름과 인터랙티브한 인터페이스를 탐색할 수 있게 됩니다.