Clone Website
PizzaHut

피자헛

PizzaHut
JSON을 이용하여 다양한 피자 종류와 상세 데이터들을 핸들링한 프로젝트입니다. 후에 어떤 피자가 추가되더라도 한 번의 작업으로 자동 등록될 수 있도록 제작했습니다. 피자 종류 확인과 간단한 장바구니 기능이 가능한 메인 페이지와 특정 피자를 주문할 수 있는 서브 페이지로 구성되어 있습니다. 사이트의 핵심 페이지 두 개를 골라 clone 하였습니다.
사이트 바로가기 기존 사이트 바로가기

Slick-slider Plugin

편리하고 빠르게 작업할 수 있는 Slick-slider Plugin을 이용해 현재 진행하고 있는 이벤트의 배너를 직관적으로 보여주었습니다.

Swiper Plugin

Swiper Plugin을 가져와 적용하여 내가 추가한 피자 목록을 스와이프 하여 이미지와 함께 볼 수 있도록 하였습니다.

Improvements : Order List

기존 사이트에서는 새로 피자를 추가할 시 추가한 내용이 장바구니 하단으로 쌓여 지금 추가한 피자가 어떤 피자인지 바로 알아보기 어려웠습니다. 또, 똑같은 피자를 눌러도 ‘2개’가 아닌 동일한 이름으로 1개, 1개, 1개,... 연달아 추가됨을 발견할 수 있었습니다.

Before

After

소비자의 입장에서 바라봤을 때 이런 방법에 불편함을 느낄 수 있겠다고 느껴 좌측과 같은 방법으로 이를 개선하였습니다. 피자를 추가할 시 배열 앞에 쌓이게 하여 새로 추가한 피자가 먼저 눈에 들어올 수 있도록 개선하였고, 중복된 내용의 피자는 배열에서 제외하고 개수만 바뀌게 하여 편리함을 더했습니다.

Select Option

각 토핑 정보와 이미지를 JSON으로 뿌려주어 후에 어떤 토핑이 추가되어도 JSON 파일에만 기입하면 자동으로 등록될 수 있도록 작업했습니다. 체크박스는 img src를 찾아 변경해 주었고 토핑, 사이드, 음료 목록은 slick-slider 사용해 넘겨볼 수 있게 하였습니다.

Order bar

윈도우 하단에 주문 바를 픽스 시켜놓아 추가한 사이드와 음료를 실시간으로 확인할 수 있게 제작했습니다. 사이드와 음료를 추가할 시 처음 추가한 제품은 그 이름이, 2개 이상 추가될 시 한’외 1개’, ‘외 2개’ ...의 형태로 추가되도록 작업하였습니다. 각 옵션은 최대로 추가할 수 있는 개수가 정해져있고, 이를 넘길 시 안내 창이 뜨도록 하였습니다. 총 가격은 옵션들의 가격을 배열에 담고 제거하는 형식으로 계산해 주었습니다.

Nutrition Popup

토핑 정보, 영양정보, 원산지 정보, 알레르기 정보는 클래스를 추가하고 없애는 방식으로 팝업 처리하였습니다. 동일한 형식이 반복되는 데이터는 JSON 사용하여 데이터를 뿌려주었습니다.