20.06.13_mini 해커톤

[오늘 공부한 것]

: POS기 만들기 중 프론트 작업

- 내가 맡은 역할 : 프론트엔드로서 HTML 하드코딩하기

- 진행상황 : MVP 설정, 와이어프레임 만들기, 프로토타이핑, HTML 구조 하드코딩까지. 대략적인 css로 위치조정은 마침

 

 

---

 

MVP 설정 및 와이어프레임 기획

<POS기 기능 목록>

• 특정 메뉴를 누르면 구매 목록에 추가되고 해당 가격이 총 금액 화면에 출력되도록 하는 기능 (가격 및 갯수 포함)

• 추가한 순서대로 구매 목록에 추가 되도록 하는 함수 구현

• 추가한 구매 목록에서 삭제할 수 있는 기능 추가

• 상품 카테고리에 따른 탭 추가

• 추가한 구매 목록에서 수량 변경할 수 있는 셀렉터 추가

• 음료 탭을 선택했을 때 HOT/ICE 선택할 수 있는 메뉴 추가로 띄워주기

<Advanced 과제>

• 관리자 메뉴 추가

1. 상품 추가 ( 금액, 카테고리, 사진 )

2. 상품 삭제

3. 상품 수정

• 오늘 판매한 품목 갯수 총합 및 총 매출 볼 수 있는 정산 화면 추가

<MVP 목록>

• 아이디: admin (고정)

• 비밀번호: 1234

상품

• 상품 이름: 10자 (string)

• 카테고리: 미리 설정한 카테고리에서 선택할 수 있게 함

• 금액: 숫자 (Number, 0이나 마이너스만 아니면 )

 

 

 

pos 레이아웃 디자인

처음에는 열정넘치게 디자인에만 집중해서 이렇게 만들다가 태그 네이밍은

하지 못하였다. 그러고 HTML 작성시 모두 멘붕..

다시 아래와 같이 와이어프레임을 설계하였다. 사람들이 이렇게 하는데는 이유가 있었다. 

 

 

 

 

pos 와이어 프레임

 

 

---

 

해커톤 끝난 직후 상황 : 

https://codepen.io/hanseul__8/pen/NWxrqar?editors=1100

 

 

 

[피드백]

• 디자인에 몰두한 나머지 시간이 부족했는데 그때 그때 업무 분담을 잘 해서 시간내에 어느정도 형태를 만들어 낸 점을 칭찬하셨다.
• 몇몇 네이밍에 대해서 보다 명확한 명칭을 쓰길 바라셔서 수정해서 올린 상황이 위 그림의 상태. 
• 다음 주에 MVP대로 얼마만큼 기능구현을 하는지가 문제인것 같다. 

 

<스스로의 피드백>

•  해커톤 전에 미리 준비하고 공부하기로 했으나 진행하지 못하였다. 그로 인해 스스로도 css 적용시에 많이 헤맸다.