슬라이스로 보여주기

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

대시보드 슬라이스

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

apps/koyo/lib/icecreamOrder/icecreamOrder.signal.ts

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

apps/koyo/lib/icecreamOrder/icecreamOrder.dictionary.ts

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

존과 연결하기

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

apps/koyo/page/dashboard.tsx

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

apps/koyo/lib/icecreamOrder/icecreamOrder.dictionary.ts

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

fetch.initIcecreamOrderIn*()

await가 없다는 점에 주목하세요. 두 슬라이스 쿼리는 호출되는 순간 이미 출발하고, 결과를 구조분해하면 해소된 객체가 아니라 필드별 promise를 얻습니다. 각 promise는 그것을 렌더링하는 Zone에 그대로 전달되므로 픽업 보드와 대기 보드가 서로 독립적으로 도착합니다 — 한쪽 쿼리가 느려도 다른 쪽이 기다리지 않고, 페이지 제목은 둘 중 어느 것도 도착하기 전에 이미 전송됩니다.

IcecreamOrder.Zone.Card

Zone 컴포넌트는 슬라이스 데이터를 UI 렌더링에 연결합니다. init은 라우트가 이미 해소한 윈도우이고, slice는 Zone이 하이드레이션하고 컨트롤이 다시 기록할 스토어 슬라이스를 지정합니다.

showControls={false}

고객용 대시보드에서는 액션 컨트롤을 숨깁니다. 고객은 상태만 볼 수 있고 주문을 수정할 수 없어야 합니다. 이것은 읽기 전용 디스플레이의 일반적인 패턴입니다.

슬라이스를 사용한 Zone

실시간 대시보드에서는 데이터가 항상 최신 상태여야 합니다. 직원이 주문 상태를 변경하면 디스플레이를 보고 있는 고객들이 알아서 업데이트되는 것을 봐야 합니다. Zone 컴포넌트와 useInterval을 결합하면 보드가 타이머에 맞춰 새로고침됩니다 - 공항 출발 게시판이 몇 초마다 시간표를 다시 읽는 것처럼요.

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

apps/koyo/lib/icecreamOrder/IcecreamOrder.Unit.tsx

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

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

apps/koyo/lib/icecreamOrder/IcecreamOrder.Zone.tsx

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

useInterval

이것은 단순한 3초 폴링입니다. 마운트된 Zone마다 변경 여부와 무관하게 슬라이스 쿼리를 다시 실행하며, 가게 한 곳의 보드에는 이 정도로 충분합니다. 진짜 답은 live sync입니다 - 슬라이스가 .live()를 선언하면 변경분이 구독자에게 푸시되고, Load.Units가 알아서 구독하므로 interval이 아예 필요 없습니다.

refreshIcecreamOrder

새로고침 함수는 각 슬라이스에 대해 자동으로 생성됩니다. 슬라이스에 정의된 동일한 조건을 사용하여 데이터를 다시 쿼리하므로 일관된 데이터 가져오기가 보장됩니다.

Load.Units

Load.Units는 적절한 로딩 상태와 함께 아이템 목록의 렌더링을 처리합니다. 슬라이스 데이터에서 개별 Unit 카드로의 매핑을 자동으로 관리합니다.

슬라이스 컴포넌트 규칙

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

하나의 슬라이스, 하나의 목적

각 슬라이스는 명확하고 단일한 목적을 가져야 합니다. inWaiting은 대기 중인 주문을, inPickup은 준비된 주문을 보여줍니다. 모든 것을 하는 슬라이스를 만들려고 하지 말고, 여러 개의 집중된 슬라이스를 만드세요.

존은 슬라이스와 매칭

항상 Zone 컴포넌트에 올바른 slice를 전달하세요. slice는 Zone을 데이터 소스에 연결하고 새로고침 액션이 올바른 슬라이스를 대상으로 하도록 보장합니다.

Props로 동작 제어

showControls 같은 props를 사용하여 다양한 컨텍스트에 맞게 컴포넌트 동작을 조정하세요. 이렇게 하면 직원 뷰와 고객 디스플레이에서 동일한 컴포넌트를 재사용할 수 있습니다.

모든 레이블에 Dictionary 사용

항상 슬라이스 이름과 관련 번역을 dictionary에 정의하세요. 이렇게 하면 애플리케이션 전체에서 일관된 레이블링이 보장되고 적절한 국제화가 가능해집니다.

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

이전서비스 내에서 상호작용 다음페이지를 통한 UX