슬라이스로 보여주기

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

대시보드 슬라이스

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

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

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

📦Load.Page

Load.Page 컴포넌트는 렌더링 전에 데이터 로딩을 처리합니다. Promise.all을 사용하여 대기 중인 주문과 픽업 주문을 동시에 가져와 최적의 성능을 제공합니다.

🎯IcecreamOrder.Zone.Card

Zone 컴포넌트는 슬라이스 데이터를 UI 렌더링에 연결합니다. init 데이터와 slice를 전달하면 Zone이 자동으로 해당 슬라이스의 실시간 업데이트를 구독합니다.

🚫showControls={false}

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

슬라이스를 사용한 Zone

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

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

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

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

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

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

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

⏱️useInterval

useInterval 훅은 3초마다 슬라이스 데이터를 새로고침합니다. 이렇게 하면 사용자의 수동 상호작용 없이도 대시보드가 최신 상태를 유지합니다 - 실시간 주문 상태를 보여줘야 하는 디스플레이에 완벽합니다.

🔄refreshIcecreamOrder

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

📋Load.Units

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

슬라이스 컴포넌트 규칙

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

1️⃣하나의 슬라이스, 하나의 목적

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

2️⃣존은 슬라이스와 매칭

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

3️⃣Props로 동작 제어

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

4️⃣모든 레이블에 Dictionary 사용

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

🎉 달성한 것들:

✓ 다양한 데이터 뷰를 위한 여러 슬라이스 생성
✓ 실시간 고객 대시보드 구축
✓ 슬라이스를 Zone 컴포넌트에 연결
✓ 자동 데이터 새로고침 구현
✓ 슬라이스 컴포넌트 모범 사례 학습

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