설정 모듈 사용하기

이제 요거트 가게는 많은 주문을 받고 처리할 수 있게 되었고, 손님들이 많이 와서 쉽게 품절되는 상황이 발생했습니다. 이제 재고를 관리하고 주문을 처리하는 방법을 알아봅시다.

당신은 매일 오전 가게에 남은 요거트와 토핑의 재고를 확인하고, 재고현황을 시스템에 설정한 후, 재고가 소진되면 자동으로 주문을 불가하게 하는 서비스를 추가해야 합니다.

스칼라 생성하기

먼저, 개별 재고 아이템을 표현하는 Scalar를 만들어봅시다. Scalar를 레고 조각처럼 재사용 가능한 데이터 빌딩 블록으로 생각해보세요 - 더 큰 구조물로 조합할 수 있습니다. 자체 데이터베이스 컬렉션을 가진 Model과 달리, Scalar는 다른 모델 안에 내장됩니다. 우리의 경우, Stock 스칼라는 Inventory 모델 안에서 사용될 것입니다.

CLI를 사용하여 스칼라 구조를 생성합니다:

Terminal

이제 아이템 유형과 수량 추적을 포함한 Stock 스칼라를 정의합니다:

apps/koyo/lib/__scalar/stock/stock.constant.ts

Stock 스칼라 구조를 이해해봅시다:

📦

StockType: 요거트 아이스크림과 모든 토핑을 결합한 열거형입니다. 이를 통해 모든 제품 유형의 재고를 하나의 시스템에서 추적할 수 있습니다.

📊

totalQty / currentQty: 시작 수량과 현재 남은 수량을 모두 추적합니다. 이를 통해 사용량을 계산하고 재입고가 필요한 시점을 파악할 수 있습니다.

스칼라에 대한 dictionary 항목을 추가합니다. icecreamOrder dictionary에서 토핑 번역을 재사용하는 방법에 주목하세요:

apps/koyo/lib/__scalar/stock/stock.dictionary.ts

인벤토리 생성하기

이제 일일 재고 기록을 관리하는 Inventory 모듈을 만들어봅시다. 이것은 가게 매니저가 매일 아침 작성하는 일일 재고 시트처럼 생각해보세요 - 특정 날짜의 모든 재고 아이템과 수량을 포함합니다.

CLI를 사용하여 inventory 모듈을 생성합니다:

Terminal

내장된 Stock 스칼라들을 포함한 Inventory 모델을 정의합니다:

apps/koyo/lib/inventory/inventory.constant.ts

Inventory 모델의 주요 특징:

📋stocks: field([Stock])

Stock 스칼라들의 배열입니다. 여기서 재사용 가능한 Scalar가 빛을 발합니다 - 여러 Stock 객체를 Inventory 문서에 직접 내장합니다.

📅at

현재 날짜의 자정으로 기본 설정되는 날짜 필드입니다. 이를 통해 하루에 하나의 재고 기록을 만들고 오늘의 재고를 쉽게 찾을 수 있습니다.

재고 작업에 대한 유용한 오류 메시지와 함께 dictionary 항목을 추가합니다:

apps/koyo/lib/inventory/inventory.dictionary.ts

비즈니스 로직

이제 재고 관리를 위한 핵심 비즈니스 로직을 구현해봅시다. 실제 아이스크림 가게에서 재고 사용과 보충에 대한 규칙이 필요하듯이, 이러한 작업을 document와 service 레이어에 인코딩해야 합니다.

먼저, 재고 작업과 일일 재고 생성을 위한 document 메서드를 정의합니다:

apps/koyo/lib/inventory/inventory.document.ts

주요 document 메서드들을 이해해봅시다:

📉useStock / useStocks

주문 시 재고 수량을 감소시킵니다. 재고가 존재하고 충분한 수량이 있는지 검증하며, 그렇지 않으면 dictionary 메시지와 함께 Revert 오류를 발생시킵니다.

🔄refill

모든 아이템을 기본 수량으로 재입고합니다. 필요한 만큼만 추가할 정도로 똑똑합니다 - 토핑 10개 중 3개가 남아있으면 7개를 더 추가합니다.

📅generateTodaysInventory

오늘의 재고 기록이 없으면 자동으로 새로 생성합니다. 이미 생성되어 있으면 기존 재고를 반환합니다 - 하루에 하나의 기록만 보장합니다.

이제 이러한 작업을 노출하는 서비스 레이어를 만듭니다:

apps/koyo/lib/inventory/inventory.service.ts

서비스 연결하기

이제 마법이 시작됩니다 - 재고 시스템을 기존 아이스크림 주문 흐름에 연결합니다. 고객이 주문을 하면 시스템이 자동으로 사용된 재료를 재고에서 차감해야 합니다. 이는 실제 POS 시스템이 판매가 이루어질 때 실시간으로 재고 수량을 업데이트하는 것과 같습니다.

InventoryService를 IcecreamOrderService에 주입하고 _preCreate 훅을 사용하여 재고를 차감합니다:

apps/koyo/lib/icecreamOrder/icecreamOrder.service.ts

이 통합의 핵심 측면:

🔌

service<srv.InventoryService>(): 의존성 주입을 통해 IcecreamOrderService가 InventoryService 메서드에 접근할 수 있습니다

⚡

_preCreate: 새 주문을 생성하기 전에 실행되는 라이프사이클 훅입니다. 검증과 재고 차감 같은 부수 효과에 완벽합니다.

🍦

사용량 계산: 주문 사이즈가 요거트 사용량을 결정하고, 각 토핑은 재고에서 1단위를 사용합니다.

신호 연결하기

프론트엔드가 재고와 상호작용할 수 있도록 API 엔드포인트가 필요합니다. 직원은 오늘의 재고를 보고 재고가 부족할 때 보충할 수 있어야 합니다. 시그널 엔드포인트와 프론트엔드 스토어를 만들어봅시다.

inventory 엔드포인트를 생성합니다:

apps/koyo/lib/inventory/inventory.signal.ts

엔드포인트에 대한 dictionary 항목을 추가합니다:

apps/koyo/lib/inventory/inventory.dictionary.ts

이제 재고 상태를 관리하는 프론트엔드 스토어를 만듭니다:

apps/koyo/lib/inventory/inventory.store.ts

UI와 상호작용하기

이제 모든 것을 UI에서 하나로 모아봅시다. 고객용 주문 양식은 재고를 확인하고 품절된 옵션을 비활성화해야 합니다. 직원도 재고 수준을 모니터링하고 필요할 때 보충할 수 있는 대시보드가 필요합니다. 이것으로 완전한 재고 관리 시스템이 만들어집니다!

먼저, 옵션을 표시하기 전에 재고를 확인하도록 주문 템플릿을 업데이트합니다:

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

재고 인식 템플릿의 주요 기능:

🔄loadTodaysInventory

컴포넌트가 마운트될 때 재고 데이터를 로드하기 위해 useEffect에서 호출됩니다. 데이터가 준비될 때까지 로딩 스피너를 보여줍니다.

🚫품절 확인

요거트 아이스크림이 완전히 품절이면 양식 대신 친절한 메시지를 보여줍니다. 만들 수 없다면 주문을 받을 필요가 없습니다!

⚠️disabled: !isInStock

각 사이즈와 토핑 옵션이 충분한 재고가 있는지 확인합니다. 비활성화된 옵션은 회색으로 표시되지만 여전히 보이므로, 고객이 평소에 무엇이 가능한지 알 수 있습니다.

Inventory 상수에 isInStock 헬퍼 메서드를 추가합니다:

apps/koyo/lib/inventory/inventory.constant.ts

이제 직원이 재고를 보충할 수 있는 유틸리티 컴포넌트를 만들어봅시다:

apps/koyo/lib/inventory/Inventory.Util.tsx

색상으로 구분된 상태 표시기와 함께 재고 수준을 보여주는 시각적 대시보드를 만듭니다:

apps/koyo/lib/inventory/Inventory.View.tsx

상태 계산을 위한 헬퍼 메서드를 Stock 스칼라에 추가합니다: