영화 티켓 예매 시스템 구축

소개

이 프로젝트에서는 영화 티켓 예매 시스템을 구축하는 방법을 배우게 됩니다. 이 프로젝트는 영화 데이터를 비동기적으로 가져오고, 웹 페이지에 영화 정보를 렌더링하며, 좌석 선택 및 총 가격 계산 기능을 구현하는 것을 포함합니다.

👀 미리보기

movie reservation system demo

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

axios 라이브러리를 사용하여 데이터를 비동기적으로 가져오는 방법
영화 이름, 가격, 좌석 가용성을 포함한 영화 정보를 웹 페이지에 렌더링하는 방법
좌석 선택 기능을 구현하고, 선택된 좌석 수와 총 가격을 적절하게 업데이트하는 방법
현재 선택된 좌석 수와 총 가격을 표시하도록 디스플레이를 업데이트하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

axios 라이브러리를 사용하여 데이터를 비동기적으로 가져오기
동적 콘텐츠를 표시하기 위해 DOM 을 조작하기
이벤트 핸들링을 통해 대화형 사용자 인터페이스 구현하기
사용자 작업에 따라 UI 업데이트하기

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├── css
│   └── style.css
├── data.json
├── index.html
├── effect.gif
└── js
    ├── axios.min.js
    └── script.js

그 중:

index.html은 메인 페이지입니다.
css/style.css는 제공된 페이지 스타일 파일입니다.
data.json은 요청해야 하는 데이터 파일입니다.
js/axios.min.js는 axios 요청 라이브러리 파일입니다.
js/script.js는 코드를 보충해야 하는 파일입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 페이지를 수동으로 새로 고쳐 브라우저에서 다음 효과를 확인합니다:

Image Description

비동기 데이터 가져오기 및 렌더링

이 단계에서는 axios 라이브러리를 사용하여 데이터를 비동기적으로 가져오고 영화 정보를 웹 페이지에 렌더링하는 방법을 배우게 됩니다.

js/script.js 파일을 엽니다.

axios.get()을 사용하여 data.json 파일에서 데이터를 가져옵니다:

let data = {};
axios
  .get("../data.json")
  .then((res) => {
    console.log(res);
    data = res.data;
    movieNameNode.innerHTML = data.name;
    moviePriceNode.innerHTML = data.price;
    data.seats.forEach((item) => {
      let row = document.createElement("div");
      row.className = "row";
      item.forEach((item) => {
        let seat = document.createElement("div");
        seat.className = "seat";
        row.appendChild(seat);
        if (item) {
          seat.classList.add("occupied");
        }
      });
      seatAreaNode.appendChild(row);
    });
  })
  .catch((err) => {
    console.log(err);
  });

위의 코드는 data.json 파일에서 데이터를 가져온 다음, 해당 DOM 노드에서 영화 이름과 가격을 업데이트합니다. 또한 data.seats 배열의 각 행에 대해 좌석 노드의 행을 생성하고 이미 예약된 좌석에 "occupied" 클래스를 추가하여 좌석 영역을 생성합니다.

좌석 선택 및 총 가격 계산

이 단계에서는 좌석 선택 및 총 가격 계산 기능을 구현합니다.

js/script.js 파일을 엽니다.
좌석 영역의 모든 좌석 노드를 가져오기 위해 변수를 초기화합니다:
```
const seatNodes = document.querySelectorAll(".seat");
```
선택된 좌석 수와 총 가격을 추적하기 위해 변수를 초기화합니다:
```
let selectedSeatsCount = 0;
let totalPrice = 0;
```

좌석 영역에 클릭 이벤트 리스너를 추가합니다:

seatAreaNode.addEventListener("click", (event) => {
  const clickedSeat = event.target;
  if (
    clickedSeat.classList.contains("seat") &&
    !clickedSeat.classList.contains("occupied")
  ) {
    clickedSeat.classList.toggle("selected");
    if (clickedSeat.classList.contains("selected")) {
      selectedSeatsCount++;
      totalPrice += data.price;
    } else {
      selectedSeatsCount--;
      totalPrice -= data.price;
    }

    updateDisplay();
  }
});

위의 코드는 좌석 영역에 클릭 이벤트 리스너를 추가합니다. 점유되지 않은 좌석을 클릭하면 좌석 노드에서 "selected" 클래스를 토글하고, 이에 따라 selectedSeatsCount 및 totalPrice 변수를 업데이트합니다.

updateDisplay() 함수를 구현하여 선택된 좌석 수와 총 가격을 업데이트합니다:
```
function updateDisplay() {
  count.textContent = selectedSeatsCount;
  total.textContent = totalPrice;
}
```
이 함수는 ID 가 "count" 및 "total"인 노드의 텍스트 내용을 업데이트하여 현재 선택된 좌석 수와 총 가격을 표시합니다.

이 단계를 완료하면 영화 티켓 예약 기능이 완전히 구현되어 사용자가 좌석을 선택하고 총 가격을 확인할 수 있습니다. 최종 페이지 효과는 다음과 같습니다:

Image Description

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.