Project Chiosk

팀 Chill의 Kiosk UI 구현 프로젝트, Chiosk입니다.

📚 Tech Stacks

👥 The Team

Names	GitHub	Development
강민성	@kangminseoung	주문 내역 (OrderSummaryView)
박민석	@maxminseok	메뉴 목록 (MenuListView)
이재건	@Quaker-Lee	상단 메뉴 (MenuCategoryController)
황도일	@DoyleHWorks	메인 페이지 (MainViewController)

⏰ Project Scope

• 시작일: 2024/11/25
• 종료일: 2024/11/29

📂 Folder Organization Map

Map Legend: (Superclass) // Components // 설명 // [Utilized Pattern]

App/
├── AppDelegate ─ (UIResponder, UIApplicationDelegate)
├── Info
├── LaunchScreen
└── SceneDelegate ─ (UIResponder, UIWindowSceneDelegate) UIWindow: MainViewController
Resources/
├── Fonts/ProtestRiot-Regular
├── Assets ─ 주요 색상
└── Media ─ 이미지
Sources/
├── Controllers/
│   ├── MainViewController ─ (UIViewController) MenuCategoryController, OrderSummaryView        [Delegate] [NotificationCenter]
│   │                                           주요 UI 관리 / 주요 버튼 액션 정의
│   └── MenuCategoryController ─ MenuCategorySegmentedControl, MenuList, MenuListView
├── Delegates/
│   └── MenuListViewDelegate ─ 메뉴 선택 이벤트 처리                                                ]  [
├── Extensions/
│   ├── ExtensionUIColor ─ 공통 색상 정의: Assets
│   └── NotificationNames ─ Notification 이름 관리                                                                 ]  [
├── Models/
│   ├── MenuList ─ 메뉴 데이터 관리: Media
│   └── OrderManager ─ 주문 데이터 관리 [Singleton]:
│                      MainViewController, OrderSummaryView, OrderSummaryViewCell에서 접근
└── Views/
    ├── MenuCategorySegmentedControl ─ (UISegmentedControl)
    ├── MenuListView ─ (UIView) UICollectionView                                       [Delegate] ..↑
    ├── MenuListViewCell ─ (UICollectionViewCell) UIImageView, UILabel
    ├── OrderSummaryView ─ (UIView) UIView, UILabel, UIButton, UICollectionView
    └── OrderSummaryViewCell ─ (UICollectionViewCell) UIView, UIImageView, UILabel, UIButton [NotificationCenter] ..↑

🖼️ App Preview

🏷 Main Features

• 메인 페이지

  • 앱 실행 시 사용자에게 첫 화면으로 보여지는 화면
  • 구성 화면: 메인 배너, 메뉴 카테고리 바, 메뉴 목록, 주문 내역
  • 로직: 각 버튼 클릭 시 적절한 뷰로 전환하는 역할 수행

• 상단 메뉴 카테고리 바

  • UISegmentedControl을 활용하여 카테고리를 표시
  • 카테고리 선택 시 해당 카테고리의 메뉴를 아래에 표시
  • 선택된 카테고리에 따라 MenuListView에 MenuList 데이터를 전달

• 메뉴 화면

  • UICollectionView를 활용하여 메뉴 항목들을 표시
  • 각 메뉴 항목은 이미지, 이름, 가격을 포함하며, 선택 시 주문 화면으로 데이터를 전달
  • Delegate 패턴을 사용하여 이벤트를 처리

• 주문 내역 화면

  • 사용자가 선택한 메뉴들을 확인하고, 수량을 조정할 수 있는 화면
  • 각 메뉴는 OrderSummaryViewCell로 표현되며, 수량 조절 버튼과 가격 표시를 포함
  • NotificationCenter를 통해 주문 정보 변경을 실시간으로 반영
  • 최대 주문 금액(1,000,000원)을 초과할 경우 알림 표시

• 각 버튼과 로직

  • 메뉴 선택: MenuListViewDelegate를 통해 주문 데이터에 메뉴 추가
  • 수량 조절: OrderSummaryViewCell의 버튼 클릭 시 OrderManager에서 수량 업데이트 및 NotificationCenter를 통한 데이터 동기화
  • 주문 요약: 주문 총 금액을 계산하여 화면 상단에 표시

🛠 Usage Patterns and Architecture

• Delegate 패턴

  • MenuListViewDelegate: 메뉴 선택 이벤트를 처리하여 MainViewController에서 필요한 동작을 수행
  • UICollectionViewDelegate: 메뉴와 주문 내역의 셀 선택 및 동작 처리

• Singleton 패턴

  • OrderManager: 주문 데이터를 관리하는 단일 인스턴스를 제공
  • 여러 뷰에서 접근 가능하며, 주문 추가/삭제 및 수량 업데이트 등의 로직을 수행

• NotificationCenter 패턴

  • 주문 데이터 변경 사항을 각 화면에 전달
  • OrderSummaryViewCell에서 수량 조절 시 orderUpdated Notification을 통해 UI 업데이트
  • 주문 한도 금액 초과 시 orderLimitExceeded 알림을 NotificationCenter로 전달

• 아키텍처

  • MVC (Model-View-Controller)
    • Model: MenuList, OrderManager
      • 데이터 관리 및 비즈니스 로직 처리
    • View: MenuListView, OrderSummaryView
      • UI 요소와 화면 레이아웃 담당
    • Controller: MainViewController, MenuCategoryController
      • 사용자 입력 처리 및 View와 Model 간의 데이터 흐름 조율

✨ Additional Considerations

• UX 개선

  • 직원 호출, 주문 취소, 주문 결제 버튼에 Alert를 띄워 사용자 의사를 확인

• 주문 한도 설정

  • 총 주문 금액이 1,000,000원을 초과할 경우 주문을 제한하고, 사용자에게 Alert로 경고 메시지를 표시

• 버튼 동적 스타일링

  • 수량이 1 이상일 때 minusButton 배경색을 활성화 상태로 변경, 1일 경우 기본값으로 복원.
  • 버튼 스타일은 setStyle 메서드를 통해 동적으로 설정.

• 개발자 경험 개선

  • 꼼꼼한 주석 처리: 주요 메서드와 UI 구성 요소에 주석을 추가하여 코드 가독성을 높이고 유지보수성을 강화
  • 디버그 프린트 활용: 이벤트 발생 시 print로 디버깅 정보를 출력하여 문제 추적 용이성 개선

📦 How to Install

• Clone this repository

https://github.com/SpartaCoding-iOS05-Chill/Chiosk.git