상세하게 보여주기

아이스크림 가게에 들어가서 주문을 한다고 상상해보세요. 어떤 것을 주문했는지 정확히 보고 싶을 테니까요? 딸기를 추가했는지 확인하거나, 선택한 크기가 맞는지 확인하고 싶을 것입니다. 바로 이것이 우리 애플리케이션의 상세 뷰가 하는 일입니다 - 고객들에게 단지 한 번의 클릭으로 언제든 접근할 수 있는 주문의 완전하고 아름다운 요약을 제공합니다.

주문번호표와 상세 영수증의 차이처럼 생각해보세요. 요약 카드는 스텁과 같습니다 - 주문을 식별할 수 있도록 기본적인 정보를 보여줍니다. 하지만 상세 뷰는 모든 것을 보여주는 전체 영수증과 같습니다: 선택한 모든 토핑, 주문한 시간, 그리고 받을 준비가 되었는지까지. 아이스크림 주문의 완전한 이야기인 것이죠!

Akan.js에서 상세 뷰를 보여주는 것은 깔끔한 아키텍처 패턴을 따릅니다. 함께 작동하는 세 가지 주요 컴포넌트를 사용합니다:

🎯ViewWrapper (Util.tsx)

클릭하면 뷰 모달을 트리거하는 클릭 가능한 래퍼입니다. "상세보기" 버튼 기능이라고 생각하면 됩니다.

🖼️ViewModal (Model component)

고객이 세부사항을 보고 싶을 때 표시되는 모달 팝업입니다. 열기, 닫기, 데이터 로딩을 자동으로 처리합니다.

📋Detail View (View.tsx)

모달 안의 실제 내용으로, 모든 주문 정보를 아름답고 체계적인 레이아웃으로 표시합니다.

이러한 분리는 각 컴포넌트가 단일 책임을 갖도록 합니다: 래퍼는 클릭을 처리하고, 모달은 팝업 동작을 처리하며, 뷰는 표시 형식을 처리합니다.

보기/수정 모달 추가하기

이제 아이스크림 주문 페이지에 보기/수정 모달을 추가해봅시다. 이것은 고객들이 모든 주문 세부사항을 체계적인 형식으로 볼 수 있는 팝업 창을 생성합니다. 모달은 고객이 주문 정보를 검토하고 싶을 때 나타나는 상세 영수증처럼 기능합니다.

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

이 코드는 주문의 표시와 편집을 처리하는 모달 시스템을 생성합니다. 각 부분이 무엇을 하는지 살펴봅시다:

👆

Load.Units 컴포넌트: 모든 주문 카드를 목록 형식으로 렌더링하며, 각 카드는 기본 주문 정보를 표시합니다

📱

Model.ViewEditModal: 고객이 세부사항을 보기 위해 클릭할 때 나타나는 모달 팝업을 생성합니다. 주문 데이터를 자동으로 로드하고 구조화된 형식으로 표시합니다

ViewEditModal 컴포넌트는 열기, 닫기, 데이터 로딩, 콘텐츠 표시를 자동으로 처리합니다. 표시할 콘텐츠를 지정하면 기술적 구현을 관리해줍니다. 이러한 접근 방식을 통해 최소한의 코드로 애플리케이션 전체에 상세 뷰를 추가할 수 있습니다.

카드에 뷰 버튼 추가하기

이제 각 주문 카드에 "보기" 버튼을 추가해봅시다. 이 버튼은 고객이 상세한 주문 정보에 접근하기 위해 클릭할 수 있는 명확한 인터페이스 요소를 제공합니다. 버튼은 기존 카드 디자인과 통합되도록 배치되고 스타일링됩니다.

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

여기서 핵심 추가사항은 버튼 주변의 ViewWrapper입니다:

🎯

: 이것은 버튼을 감싸고 상세 뷰를 보여주는 클릭 기능을 처리합니다

상세 뷰 디자인하기

이제 View.tsx에서 모든 아이스크림 주문 정보를 구조화된 레이아웃으로 표시하는 상세 뷰 컴포넌트를 만들어봅시다. 이 컴포넌트는 모달이 열릴 때 주문 데이터를 읽기 쉬운 형식으로 구성하고 표시합니다.

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

구현 테스트하기

상세 뷰 구현을 테스트해봅시다. 아이스크림 주문 페이지로 이동해서 주문 카드의 "보기" 버튼을 클릭하여 시스템이 올바르게 작동하는지 확인하세요.

테스트 단계:

http://localhost:4201/icecreamOrder로 이동
주문이 없다면 새 아이스크림 주문을 생성
주문 카드의 '보기' 버튼 클릭
상세 주문 정보가 포함된 모달이 열리는지 확인
모든 필드가 적절한 번역과 함께 올바르게 표시되는지 확인

모든 주문 세부사항을 표시하는 모달 팝업이 나타나야 합니다: 사이즈, 토핑(색상 배지로), 상태(조건부 색상으로), 타임스탬프. 모달 밖을 클릭하거나 X 버튼을 누르면 모달이 닫힙니다.

상세 뷰 모범 사례

Akan.js에서 상세 뷰를 만들 때 따라야 할 중요한 모범 사례들입니다:

✅Dictionary 번역 사용

필드 이름과 값을 표시할 때는 항상 l()을 사용하세요. 이렇게 하면 일관성과 적절한 다국어 지원이 보장됩니다.

🎨일관된 시각적 계층구조

그리드 레이아웃, 일관된 간격, 다른 정보 간의 명확한 시각적 분리를 사용하세요.

🔧재사용 가능한 컴포넌트

ViewWrapper 로직을 실제 뷰 내용과 분리하세요. 이렇게 하면 래퍼를 다른 표시 맥락에서 재사용할 수 있습니다.

⚡빈 상태 처리

토핑 배열이 비어있을 때 "토핑 없음"을 표시하는 것처럼 빈 값이나 null 값에 대한 대체 표시를 항상 제공하세요.

다음은 무엇인가요?

아이스크림 주문에 대한 상세 뷰를 성공적으로 구현했습니다. 이제 고객들이 주문을 클릭해서 체계적인 형식으로 모든 세부사항을 볼 수 있습니다. 모달 시스템은 주문 정보를 보기 위한 깔끔한 인터페이스를 제공합니다.

🎉 달성한 것들:

✓ 재사용 가능한 ViewWrapper 컴포넌트 생성
✓ 주문 카드에 뷰 버튼 추가
✓ 포괄적인 상세 뷰 디자인
✓ 모달 팝업 기능 구현
✓ 적절한 번역과 스타일링 사용

다음 튜토리얼에서는 가게 직원이 주문을 "활성"에서 "처리중"으로, "완료"로 업데이트할 수 있는 상태 관리 기능을 추가할 것입니다. 이것으로 주문 워크플로우 시스템이 완성되고 아이스크림 주문에 대한 전체 생명주기 관리가 제공될 것입니다.