Flet로 만든 별다방 키오스크(Kiosk)

Flet을 사용하여 전자 메뉴판을 구성하고, 사용자가 메뉴를 선택하면 주문 목록에 해당 메뉴가 추가되며 총 주문 금액과 개수가 업데이트되도록 설계되었습니다. 세 자리마다 쉼표를 넣어 금액을 표시하여 사용자에게 가독성을 높였습니다. 초기화 버튼으로 주문 목록을 비울 수 있으며, 그리드 뷰를 사용해 메뉴를 시각적으로 깔끔하게 배치했습니다.

import flet as ft

def main(page: ft.Page):
    page.title ="별다방 키오스크"
    page.theme_mode = ft.ThemeMode.DARK
    page.window.width = 750
    page.window.height = 1200

    page.scroll = "auto"
    page.padding = 20

    # List of available menu items
    menu_items = [
        {"name": "아이스 카페 아메리카노", "price": 4500, "image": "./assets/아이스_카페_아메리카노.jpg"},
        {"name": "카페 아메리카노", "price": 4500, "image": "./assets/카페_아메리카노.jpg"},
        {"name": "아이스 카라멜 마키아또", "price": 5900, "image": "./assets/아이스_카라멜_마키아또.jpg"},
        {"name": "카라멜 마키아또", "price": 5900, "image": "./assets/카라멜_마키아또.jpg"},
        {"name": "돌체 라떼", "price": 5900, "image": "./assets/돌체_라떼.jpg"},
        {"name": "바닐라 빈 라떼", "price": 6100, "image": "./assets/바닐라_빈_라떼.jpg"},
        {"name": "망고 바나나_ 렌디드", "price": 6400, "image": "./assets/망고_바나나_블렌디드.jpg"},
        {"name": "여수바다 자몽 피지오", "price": 7100, "image": "./assets/여수바다_자몽_피지오.jpg"},
        {"name": "제주팔삭 피지오", "price": 7100, "image": "./assets/제주팔삭_피지오.jpg"},
        {"name": "코튼 스카이 요거트 블렌디드", "price": 7900, "image": "./assets/코튼_스카이_요거트_블렌디드.jpg"},
    ]

    # Create the Order list
    order_list = ft.Column()

    # Totals and reset button
    total_price = ft.Text("0", size=20, weight="bold")
    total_count = ft.Text("0", size=20, weight="bold")

    def update_total():
        count = len(order_list.controls)
        price = sum([c.data for c in order_list.controls])
        total_count.value = f"{count}"
        total_price.value = f"{price:,} KRW"
        page.update()

    def reset_orders(e):
        order_list.controls.clear()
        update_total()

    # Top row layout with order list and summary info
    order_summary = ft.Container(
        content=ft.Column([
            ft.Row([ft.Text("Total Price: ", size=20), total_price]),
            ft.Row([ft.Text("Total Items: ", size=20), total_count]),
            ft.ElevatedButton("Reset Orders", on_click=reset_orders),
        ]),
        padding=10,
        alignment=ft.alignment.center
    )

    top_layout = ft.Row([
        ft.Container(content=order_list, width=300, height=300, padding=10, border=ft.border.all(1)),
        order_summary
    ])

    # Creating menu items to display in the grid
    def add_to_order(item):
        new_order = ft.Text(item["name"], size=16, data=item["price"])
        order_list.controls.append(new_order)
        update_total()

    menu_grid = ft.GridView(
        expand=1,
        runs_count=3,
        spacing=10,
        run_spacing=10,
        controls=[
            ft.Container(
                content=ft.Column([
                    ft.Image(src=item["image"], width=100, height=100),
                    ft.Text(item["name"], size=16, weight="bold"),
                    ft.Text(f"{item['price']:,} KRW", size=14),
                    ft.ElevatedButton("Add", on_click=lambda e, item=item: add_to_order(item)),
                ]),
                padding=10,
                border=ft.border.all(1),
                width=150,
                height=250
            )
            for item in menu_items
        ]
    )

    page.add(top_layout, menu_grid)

ft.app(target=main, assets_dir="assets")

 

별다방 키오스크

 

전체적인 코드 흐름

이 코드는 Flet 라이브러리를 사용해 간단한 키오스크 전자 메뉴판을 구현한 것입니다. 사용자가 메뉴를 선택하면 주문 목록이 업데이트되고, 총 금액 및 주문한 메뉴 수를 실시간으로 보여줍니다.

아래는 코드의 구성 요소와 그 역할에 대해 단계별로 설명하겠습니다.

1. 페이지 설정 (main 함수 정의)

먼저 main 함수에서 페이지 설정을 합니다.

def main(page: ft.Page):
    page.title ="별다방 키오스크"
    page.theme_mode = ft.ThemeMode.DARK
    page.window.width = 750
    page.window.height = 1200

    page.scroll = "auto"
    page.padding = 20

• page.scroll을 "auto"로 설정하여 필요할 때 스크롤을 추가합니다.
• page.padding을 통해 페이지 전체에 20픽셀의 여백을 줍니다.

2. 메뉴 아이템 목록 정의

메뉴에는 여러 종류의 음료가 있습니다. 각 메뉴 아이템에는 이름, 가격, 이미지 경로가 포함됩니다.

  # List of available menu items
    menu_items = [
        {"name": "아이스 카페 아메리카노", "price": 4500, "image": "./assets/아이스_카페_아메리카노.jpg"},
        {"name": "카페 아메리카노", "price": 4500, "image": "./assets/카페_아메리카노.jpg"},
        {"name": "아이스 카라멜 마키아또", "price": 5900, "image": "./assets/아이스_카라멜_마키아또.jpg"},
        {"name": "카라멜 마키아또", "price": 5900, "image": "./assets/카라멜_마키아또.jpg"},
        {"name": "돌체 라떼", "price": 5900, "image": "./assets/돌체_라떼.jpg"},
        {"name": "바닐라 빈 라떼", "price": 6100, "image": "./assets/바닐라_빈_라떼.jpg"},
        {"name": "망고 바나나_ 렌디드", "price": 6400, "image": "./assets/망고_바나나_블렌디드.jpg"},
        {"name": "여수바다 자몽 피지오", "price": 7100, "image": "./assets/여수바다_자몽_피지오.jpg"},
        {"name": "제주팔삭 피지오", "price": 7100, "image": "./assets/제주팔삭_피지오.jpg"},
        {"name": "코튼 스카이 요거트 블렌디드", "price": 7900, "image": "./assets/코튼_스카이_요거트_블렌디드.jpg"},
    ]

• menu_items는 각 메뉴에 대한 정보를 포함하는 딕셔너리로 이루어진 리스트입니다.
• 각 딕셔너리에는 이름(name), 가격(price), 이미지 경로(image)가 있습니다.
• 이미지는 assets 디렉토리에 위치하고 있습니다.

3. 주문 리스트 및 합계 정보 설정

주문 목록을 보여줄 Column 객체와 총 주문 금액 및 주문 개수를 나타낼 텍스트 요소를 정의합니다.

    # Create the Order list
    order_list = ft.Column()

    # Totals and reset button
    total_price = ft.Text("0", size=20, weight="bold")
    total_count = ft.Text("0", size=20, weight="bold")

• order_list는 사용자가 선택한 메뉴들을 목록으로 보여줍니다.
• total_price와 total_count는 각각 총 주문 금액과 주문 개수를 보여주기 위한 텍스트입니다.

4. 합계 업데이트 함수 (update_total)와 초기화 함수 (reset_orders)

사용자가 메뉴를 선택하거나 초기화할 때 주문 목록을 갱신하고 총 금액과 주문 개수를 업데이트합니다.

    def update_total():
        count = len(order_list.controls)
        price = sum([c.data for c in order_list.controls])
        total_count.value = f"{count}"
        total_price.value = f"{price:,} KRW"
        page.update()

• update_total() 함수는 order_list의 아이템 개수를 계산하고, 총 가격을 계산하여 total_count와 total_price를 업데이트합니다.
• price를 업데이트할 때 :, 포맷을 사용하여 금액을 세 자리마다 쉼표로 구분해서 보여줍니다.

def reset_orders(e):
    order_list.controls.clear()
    update_total()

• reset_orders() 함수는 주문 목록을 비우고 합계를 초기화합니다.

5. 상단 레이아웃 설정

주문 목록과 주문 합계를 나란히 보여주는 상단 레이아웃을 설정합니다.

    # Top row layout with order list and summary info
    order_summary = ft.Container(
        content=ft.Column([
            ft.Row([ft.Text("Total Price: ", size=20), total_price]),
            ft.Row([ft.Text("Total Items: ", size=20), total_count]),
            ft.ElevatedButton("Reset Orders", on_click=reset_orders),
        ]),
        padding=10,
        alignment=ft.alignment.center
    )

    top_layout = ft.Row([
        ft.Container(content=order_list, width=300, height=300, padding=10, border=ft.border.all(1)),
        order_summary
    ])

• order_summary는 총 주문 금액, 주문 개수, 초기화 버튼을 포함합니다.
• top_layout은 order_list와 order_summary를 하나의 Row에 넣어 화면 상단에 배치합니다.

6. 메뉴 아이템 추가 함수 (add_to_order)

사용자가 메뉴를 선택했을 때 주문 목록에 해당 아이템을 추가하는 함수입니다.

    # Creating menu items to display in the grid
    def add_to_order(item):
        new_order = ft.Text(item["name"], size=16, data=item["price"])
        order_list.controls.append(new_order)
        update_total()

• add_to_order() 함수는 선택한 메뉴의 이름을 order_list에 추가하고, 가격 정보를 data 속성에 저장합니다.
• update_total()을 호출하여 총 금액과 주문 개수를 업데이트합니다.

7. 하단 메뉴 그리드 설정 (menu_grid)

모든 메뉴 아이템을 그리드 형태로 하단에 배치합니다.

    menu_grid = ft.GridView(
        expand=1,
        runs_count=3,
        spacing=10,
        run_spacing=10,
        controls=[
            ft.Container(
                content=ft.Column([
                    ft.Image(src=item["image"], width=100, height=100),
                    ft.Text(item["name"], size=16, weight="bold"),
                    ft.Text(f"{item['price']:,} KRW", size=14),
                    ft.ElevatedButton("Add", on_click=lambda e, item=item: add_to_order(item)),
                ]),
                padding=10,
                border=ft.border.all(1),
                width=150,
                height=250
            )
            for item in menu_items
        ]
    )

• menu_grid는 메뉴 아이템들을 GridView로 보여줍니다. 한 줄에 3개의 아이템이 표시되며, 아이템 사이에는 일정 간격(spacing, run_spacing)이 있습니다.
• 각 아이템은 이미지, 이름, 가격, 추가 버튼으로 구성됩니다.
• 가격 표시 부분에서도 :, 포맷을 사용하여 세 자리마다 쉼표가 들어가도록 표시합니다.

8. 페이지에 레이아웃 추가 (page.add)

상단 레이아웃과 하단 메뉴 그리드를 페이지에 추가합니다.

page.add(top_layout, menu_grid)

• top_layout과 menu_grid를 페이지에 추가하여 전체 화면을 구성합니다.