고객을 위한 키오스크

가게의 손님이 너무 많아져 직원이 주문을 처리하기 어려워졌습니다. 이제 손님들이 주문을 할 수 있도록 키오스크를 만들어야 합니다. 직원을 위한 기능은 복잡해도 괜찮지만, 손님을 위한 주문 기능은 단순하고 사용자 친화적인 화면을 제공해야 합니다.

스키마 추가

고객이 키오스크에서 직접 주문하기 위해서는 현재 스키마에서는 부족한 정보가 있습니다. 서빙방식, 연락처 정보를 추가해야 합니다. 스키마를 추가해서 기능을 확장해봅시다.

apps/koyo/lib/icecreamOrder/icecreamOrder.constant.ts

새로운 스키마 추가 사항을 이해해봅시다:

🍽️

ServeType: 고객이 주문을 어떻게 받길 원하는지 정의하는 열거형 - 매장 식사, 포장, 또는 배달

📱

phone: 픽업 알림을 위해 isPhoneNumber로 유효성 검사되는 고객 전화번호

📋

LightIcecreamOrder: 주문 목록과 대시보드에서 표시하기 위해 serveType을 포함하도록 업데이트됨

다음으로, 새 필드와 열거형 값에 대한 dictionary 항목을 추가해야 합니다:

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

다음으로, 직원이 주문을 생성하는 템플릿에서 서빙 타입과 전화번호를 선택할 수 있도록 해봅시다.

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

마지막으로, 주문 카드에 serveType을 표시해서 고객의 주문이 매장 식사인지 포장 주문인지 등을 명확하게 표시해봅시다.

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

키오스크 랜딩 페이지

고객이 키오스크에 다가갈 때 가장 먼저 보는 것이 랜딩 페이지입니다. 패스트푸드 레스토랑 키오스크의 환영 화면처럼 생각해보세요 - 친근하고 이해하기 쉬우며 고객을 첫 번째 선택인 "매장 식사" 또는 "포장 주문"으로 안내해야 합니다.

주문하는 것이 즐거운 경험처럼 느껴지도록 매력적인 랜딩 페이지를 만들어봅시다:

apps/koyo/page/icecreamOrder.tsx

이 랜딩 페이지의 주요 기능을 살펴봅시다:

🌍Link.Lang

언어 전환 버튼을 통해 고객이 원하는 언어를 선택할 수 있습니다. 이는 관광지나 다문화 지역의 키오스크에 필수적입니다.

🔗Link with Query Params

"매장 식사"와 "포장 주문" 버튼은 serveType을 쿼리 파라미터로 다음 페이지에 전달합니다. 이를 통해 주문 양식에 고객의 선택이 미리 채워집니다.

✨비주얼 디자인

이모지가 있는 큰 버튼은 인터페이스를 터치하기 쉽고 직관적으로 만듭니다. 그라데이션 배경과 호버 효과가 현대적이고 매력적인 경험을 만들어냅니다.

고객이 주문을 완료하면 확인 페이지가 필요합니다. 고객을 안심시키는 성공 페이지를 만들어봅시다:

apps/koyo/page/icecreamOrder/success.tsx

성공 페이지는 고객에게 중요한 피드백을 제공합니다:

✓

큰 체크 아이콘이 주문이 성공했음을 즉시 시각적으로 확인시켜줍니다

📢

명확한 안내가 고객에게 주문 번호가 호출될 때까지 기다리라고 알려줍니다

🏠

'새 주문하기' 버튼을 통해 다음 고객이 새로 시작할 수 있습니다

주문 양식 페이지

키오스크의 핵심은 주문 양식 페이지입니다. 이곳에서 고객이 실제로 아이스크림을 커스터마이즈합니다 - 사이즈를 선택하고, 토핑을 추가하고, 픽업 알림을 위한 전화번호를 입력합니다. 버블티 가게에서 음료 사이즈와 추가 옵션을 선택하는 메인 주문 화면처럼 생각해보세요.

이 페이지는 랜딩 페이지에서 전달된 쿼리 파라미터를 처리하고 직관적인 폼 경험을 제공해야 합니다:

apps/koyo/page/icecreamOrder/new.tsx

이 주문 양식 페이지의 주요 구성 요소를 이해해봅시다:

🔍searchParams

Next.js는 URL 쿼리 파라미터를 포함하는 Promise로 searchParams를 제공합니다. serveType을 추출하여 랜딩 페이지에서 고객이 선택한 내용으로 주문 양식을 미리 채웁니다.

📝Load.Edit

Load.Edit 컴포넌트는 폼 상태 관리, 유효성 검사, 제출을 처리합니다. 데이터 저장을 위해 슬라이스에 연결되고 제출 시 자동으로 성공 페이지로 이동합니다.

↩️onCancel="back"

onCancel을 "back"으로 설정하면 취소 버튼이 이전 페이지로 돌아갑니다. 이를 통해 고객이 쉽게 마음을 바꿀 수 있습니다.

이제 아름다운 키오스크 경험을 위해 Template 컴포넌트를 스타일링해봅시다. 각 섹션은 아이콘이 있는 카드로 감싸져 있습니다:

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

Template 컴포넌트는 키오스크 친화적인 입력을 위해 다음 Field 컴포넌트들을 사용합니다:

📏

Field.ToggleSelect: 단일 옵션(사이즈) 선택을 위한 크고 터치하기 쉬운 버튼

🍓

Field.MultiToggleSelect: 시각적 피드백과 함께 여러 옵션(토핑)을 선택할 수 있습니다

📱

Field.Phone: 형식 지정과 유효성 검사가 내장된 전화번호 입력

페이지 UX 모범 사례

키오스크와 같은 고객용 페이지를 구축할 때 UX 모범 사례를 따르면 부드럽고 즐거운 경험을 보장할 수 있습니다. 우리가 적용한 핵심 원칙들입니다:

1️⃣명확한 네비게이션 흐름

고객을 선형 흐름으로 안내합니다: 랜딩 → 주문 양식 → 성공. 각 단계는 하나의 명확한 목적을 가져 혼란을 줄입니다.

2️⃣터치 친화적 디자인

큰 버튼(py-6), 적절한 간격, 상호작용 시 시각적 피드백이 터치스크린에서 인터페이스를 사용하기 쉽게 만듭니다.

3️⃣아이콘을 통한 시각적 계층

이모지와 아이콘은 고객이 텍스트를 자세히 읽지 않고도 각 섹션을 이해할 수 있도록 즉각적인 시각적 단서를 제공합니다.

4️⃣상태 보존

쿼리 파라미터와 Load.Edit를 사용하면 고객의 선택이 페이지 간에 보존되어 끊김 없는 경험을 만들어냅니다.

🎉 달성한 것들:

✓ 키오스크 주문을 위한 새 필드로 스키마 확장
✓ 언어 전환 기능이 있는 매력적인 랜딩 페이지 구축
✓ Field 컴포넌트로 터치 친화적인 주문 양식 생성
✓ 명확한 고객 피드백이 있는 성공 페이지 구현
✓ 키오스크 애플리케이션을 위한 페이지 UX 모범 사례 학습

다음 튜토리얼에서는 계산된 값과 집계를 위한 Scalar 사용법을 살펴볼 것입니다. 이를 통해 주문 합계, 대기 시간, 통계와 같은 동적 정보를 실시간으로 표시할 수 있게 됩니다.