한 회사에 지원했는데 처음으로 과제형 문제를 수행하게 되었다.
말로만 들었던 과제형 면접을 처음으로 수행하게 되었는데, react의 기초를 다지며 재미있게 진행했다. 디자인은 신경쓰지 않아도 된다고 해서 편했다.
목표: 커피 전문점의 POS 앱을 웹기술을 활용하여 개발
1. 구현 내용 : 하나의 페이지에 4개의 화면으로 구성.
-
메뉴 선택 화면 (홈 화면)
-
쿠폰 선택 화면
-
결제하기 화면
-
대기하기 화면
각 화면은 다음 화면으로 넘어가는 버튼이 있고 뒤로 갈 수 없다.
각 화면에서 아무런 선택을 하지 않으면 다음 화면으로 넘어갈 수 없다.
2. 화면 세부 설명
-
메뉴 선택 화면
-
각 메뉴의 + 버튼을 통해 구매할 음료를 추가할 수 있다
-
각 메뉴의 - 버튼을 통해 담겨있는 음료를 뺄 수 있다.
-
현재 담긴 음료를 화면 하단에서 확인할 수 있다.
-
"메뉴선택 완료" 버튼을 통해 다음 화면으로 넘어간다.
-
아무것도 담지 않고 "메뉴선택 완료" 버튼을 누를 시, alert창으로 알려준다.
-
-
쿠폰 선택 화면
-
5%, 7%, 10% 쿠폰 중 하나를 고를 수 있다.
-
아무것도 고르지 않고 "쿠폰선택 완료" 버튼을 누를 시, alert창으로 알려준다.
-
3. 결제하기 화면
-
결제 방법을 선택할 수 있다. (현금 / 카드)
-
결제하려는 상품의 이름, 수량, 할인가격이 적용된 최종 가격과 총 합계를 보여준다.
-
"결제하기" 버튼을 통해 다음 화면으로 넘어갈 수 있다.
-
결제방법을 고르지 않고 "결제하기" 버튼을 누를 시, alert창으로 알려준다.
-
대기하기 화면
-
주문 정보를 띄워준다.
-
"홈으로 돌아가기 버튼"을 통해 처음 화면으로 넘어갈 수 있다.
-
홈으로 돌아가면 모든 state는 초기화되고 주문 프로세스를 처음부터 다시 시작할 수 있다.
-
3. 구현 방법
- state로 관리되는 값들.
- cart: 현재 담긴 음료의 이름과 수량
- stateOfPage: 현재 보여지는 화면
- coupon: 선택한 쿠폰의 종류
- cardOrCash: 선택한 결제 방법
- 컴포넌트 구성
느낀점
state로 관리되는 cart변수에 기존 값을 그대로 두고 특정 메뉴의 수량만 바꾸는 코드를 짜는데 생각보다 조금 시간이 걸렸지만, 차근차근 디버깅해보며 성공했다.
const addToCart = (name) => {
setCart([
...cart.filter((ele) => ele.메뉴명 !== name),
{
메뉴명: name,
수량: cart.filter((ele) => ele.메뉴명 === name)[0].수량 + 1,
},
]);
};
// 특정 메뉴의 + 버튼을 눌렀을때 수량을 1 추가 해주는 코드구성이 복잡하지 않았던 만큼, 라이브러리를 최소화하고 간단하게 구현하기 위해 노력했다!
