이전 포스팅에서 보면 알 수 있는데 원래 아래처럼 카테고리섹션(왼쪽부분), 주문섹션(오른쪽부분)은 화면에 고정하고 가운데부분(메뉴)를 스크롤하는 화면으로 구성했었는데 실제 구현을 하다보니 왼쪽,오른쪽화면이 고정된채로 가운데섹션을 스크롤 하는 게 쉽지 않았다. 해결해보려고 노력을 해봤는데 해결되지 않아 새로운 ui를 구성해봤다.
새로 구성한 메인화면이다.
위아래 2등분으로 화면을 구성했다.
위섹션에서는 카테고리 영역이다. 즉 원하는 메뉴의 카테고리를 클릭하면 해당 메뉴가 쭉 나와있는 화면으로 이동한다.
아래섹션에서는 주문 영역이다. 원하는 음식을 담으면 주문목록아래에 내가 선택한 음식이 나오도록 하였다.
아래는 카테고리에서 음식종류를 클릭하였을때 보이는 화면입니다.
해당하는 음식들을 보여주는데 왼쪽에는 음식의 사진 오른쪽에는 해당 음식의 이름,가격,설명을 텍스트로 보여줍니다.
그리고 아래의 담기 버튼을 누르면 해당 음식을 세부적으로 선택할 수 있는 화면으로 넘어가게 됩니다.
담기버튼을 눌렀을때 보여지는 화면입니다.
해당 음식의 옵션들을 선택할 수 있습니다.
위의 ui를 한번 구현해보겠습니다. 대략적으로 구현한거라 스타일은 퀄리티가 떨어질 수 있습니다.
먼저 메인화면입니다. 위의 ui처럼 2개의 섹션으로 나눠 구현했습니다. 위의 카테고리들은 버튼으로 구성하여 해당 버튼을 클릭하면 해당하는 음식들을 보여주는 화면으로 넘어가게해줬습니다.
1인정식을 눌렀을 경우의 화면입니다.
데이터들은 임시입니다.
해당 음식들이 보여지고 담기 버튼을 누르면 세부 선택화면으로 넘어가게 됩니다.
담기버튼을 눌렀을 경우의 화면입니다.
옵션들을 선택할 수 있습니다.
선택이 2가지 나눠지는데 위의 선택은 추가적으로 선택하는 옵션이라 check box로 구성했습니다.
아래 선택은 필수적이고 하나만 선택하는 옵션이라 radio button 으로 구성했습니다.
그리고 해당 옵션을 선택할때마다 오른쪽에 선택된 옵션이 나오고 음식의 가격도 옵션에 맞게 변경됩니다.
여기 까지 구현하는데에는 큰 문제는 없었습니다. 그러나 담기버튼을누르고 담았다는 정보를 메인화면으로 보내야하는데 여기서 문제가 발생했습니다.
문제점
세부옵션선택화면에서 담기버튼을 누르면 그 담았다는 정보를 메인화면에 주문서에 담겨야하는데 공유하는 변수를 일일이 하나하나 만드는데에는 한계가 존재했습니다. 그래서
데이터베이스를 만들어야 할거 같습니다.
일단 먼저 db를 모델링하고 다시 진행해야 할거같습니다. 다음 포스팅에는 db를 모델링해보겠습니다.
'로우코드(Lowcode) > OutSystems프로젝트' 카테고리의 다른 글
| outsystems - 5.상세화면설계(메뉴 id전달) (0) | 2023.05.22 |
|---|---|
| outsystems - 4.2 메인화면 설계 (0) | 2023.05.20 |
| outsystems - 4.1 메인화면설계 (0) | 2023.05.20 |
| outsystems - 3.kiosk만들기 (0) | 2023.05.16 |
| outsystems - 1.kiosk만들기 (0) | 2023.04.29 |
