아이스크림 가게에 들어가서 주문을 한다고 상상해보세요. 어떤 것을 주문했는지 정확히 보고 싶을 테니까요? 딸기를 추가했는지 확인하거나, 선택한 크기가 맞는지 확인하고 싶을 것입니다. 바로 이것이 우리 애플리케이션의 상세 뷰가 하는 일입니다 - 고객들에게 단지 한 번의 클릭으로 언제든 접근할 수 있는 주문의 완전하고 아름다운 요약을 제공합니다.
좀 더 쉽게 설명해볼게요. 요약 카드는 주문 목록에서 "바닐라 콘"이라고 적힌 한 줄짜리 정보를 보는 것과 같아요. 내 주문이 어떤 건지 알아볼 수 있을 정도의 기본 정보만 보여주죠. 반면 상세 뷰는 그 항목을 눌렀을 때 나오는 전체 화면이에요. 내가 고른 정확한 크기, 추가한 모든 토핑, 언제 주문했는지, 준비가 다 됐는지까지 전부 다 보여줍니다. 한 줄 요약과 완전한 이야기의 차이인 거죠!
Akan.js에서 상세 뷰를 보여주는 것은 깔끔한 아키텍처 패턴을 따릅니다. 함께 작동하는 세 가지 주요 컴포넌트를 사용합니다:
🎯ViewWrapper (Util.tsx)
클릭하면 뷰 모달을 트리거하는 클릭 가능한 래퍼입니다. "상세보기" 버튼 기능이라고 생각하면 됩니다.
🖼️ViewModal (Model component)
고객이 세부사항을 보고 싶을 때 표시되는 모달 팝업입니다. 열기, 닫기, 데이터 로딩을 자동으로 처리합니다.
📋Detail View (View.tsx)
모달 안의 실제 내용으로, 모든 주문 정보를 아름답고 체계적인 레이아웃으로 표시합니다.
이러한 분리는 각 컴포넌트가 단일 책임을 갖도록 합니다: 래퍼는 클릭을 처리하고, 모달은 팝업 동작을 처리하며, 뷰는 표시 형식을 처리합니다.
