๐ŸŽž Movie Select(2. JavaScript)

wkahd01ยท2021๋…„ 5์›” 14์ผ
1

Toy-Project

๋ชฉ๋ก ๋ณด๊ธฐ
5/13

์ด๋ฒˆ ๋ฒจ๋กœ๊ทธ์—์„œ๋Š” javascript๋กœ ๋‚˜๋จธ์ง€ movie select๋ฅผ ์ฑ„์›Œ๋‚˜๊ฐ„๋‹ค.

โœˆ ์‹œ์ž‘

๐Ÿ“™ JavaScript part

๐Ÿ“Œ ๋ณ€์ˆ˜ ์„ค์ •

container, seats, count, total, movieSelect ์‚ฌ์šฉ

const container = document.querySelector('.container');
const seats = document.querySelectorAll('.row .seat:not(.occupied)');
const count = document.getElementById('count');
const total = document.getElementById('total');
const movieSelect = document.getElementById('movie');

์šฐ์„  ์ด๋ฒคํŠธ๋ฅผ ๋จผ์ € ๊ตฌ์„ฑํ•ด๋ณด์ž.

๐Ÿ“„ ์ด๋ฒคํŠธ ์„ค์ •

์˜ํ™” ์„ ํƒ ์ด๋ฒคํŠธ

์„ ํƒํ•œ ์˜ํ™”์˜ ์ •๋ณด๋กœ ์„ค์ •์„ ์‹œ์ผœ์•ผ ํ•œ๋‹ค.

movieSelect.addEventListener('change', e=>{
  ticketPrice = +e.target.value;
  setMoiveData(e.target.selectedIndex, e.target.value);
  updateSelectedCount();
});

๊ฐ๊ฐ์˜ ์˜ํ™”๋“ค(movie)์— ์ด๋ฒคํŠธ๋ฅผ ๋„ฃ์–ด์ฃผ๊ธฐ์—๋Š” ์ฝ”๋“œ๊ฐ€ ๋„ˆ๋ฌด ๋ณต์žกํ•ด์ง€๊ธฐ์—, ์ด๋ฒคํŠธ ์œ„์ž„์„ ์‚ฌ์šฉํ•ด movieSelect ์— ์ด๋ฒคํŠธ๋ฅผ ๊ฑธ์–ด์ค€๋‹ค.

์ด๋ฒคํŠธ ์œ„์ž„: ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํ•˜์œ„ DOM ์š”์†Œ์— ๊ฐ๊ฐ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ๋“ฑ๋กํ•˜๋Š” ๋Œ€์‹  ํ•˜๋‚˜์˜ ์ƒ์œ„ DOM ์š”์†Œ์— ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ๋“ฑ๋กํ•˜๋Š” ๋ฐฉ๋ฒ•

ticketPrice๋Š” ์ถ”ํ›„ let์œผ๋กœ ์ƒ์„ฑํ•  ํ‹ฐ์ผ“ ๊ฐ€๊ฒฉ ๋ณ€์ˆ˜์ด๋ฉฐ,
setMovieData์™€ updateSelectedCount๋Š” ์กฐ๊ธˆ ์žˆ๋‹ค ๋‹ค์‹œ ์‚ดํŽด๋ณด๊ธฐ๋กœ ํ•˜์ž.

์ขŒ์„ ํด๋ฆญ ์ด๋ฒคํŠธ

container.addEventListener('click', e=>{
  if(e.target.classList.contains('seat') && 
     !e.target.classList.contains('occupied')){
    e.target.classList.toggle('selected');
  }
  updateSelectedCount();
});

seat๋ฅผ ์ž์‹์œผ๋กœ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” container๋ฅผ ์ด๋ฒคํŠธ ์œ„์ž„์œผ๋กœ์„œ ์‚ฌ์šฉํ•œ๋‹ค.
์—ฌ๊ธฐ์„œ ์ฃผ์˜ํ•ด์•ผ ํ•  ์ ์€, ์ด๋ฒคํŠธ ์œ„์ž„์„ ์‚ฌ์šฉํ•˜๋ฉด seat ๋ฟ๋งŒ์ด ์•„๋‹Œ container๋ฅผ ํด๋ฆญํ•ด๋„ ์ด๋ฒคํŠธ๊ฐ€ ์ƒ์„ฑ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์กฐ๊ฑด๋ฌธ์„ ์‚ฌ์šฉํ•ด์„œ ๋ฒ”์œ„๋ฅผ seat๋กœ ํ•œ์ •ํ•ด์ค˜์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.

๐Ÿ“„ localStorage์— ์˜ํ™”์˜ index์™€ ๊ฐ€๊ฒฉ ์„ค์ •

์šฐ์„  localStorage๋ž€,๋ธŒ๋ผ์šฐ์ € ์„ธ์…˜ ๊ฐ„์— ๊ณต์œ ๋˜๋Š” ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ์ด๋‹ค.
setItem์„ ํ†ตํ•ด ์ €์žฅํ•˜๊ณ , getItem์„ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜จ๋‹ค.

์•ž์—์„œ ์„ค๋ช…ํ–ˆ๋˜ ์˜ํ™” ์„ ํƒ ์ด๋ฒคํŠธ๋ฅผ ์˜ˆ์‹œ๋กœ ์„ค๋ช…ํ•˜์ž๋ฉด,
setMoiveData(e.target.selectedIndex, e.target.value);
ํด๋ฆญํ•œ ์š”์†Œ์˜ ์ธ๋ฑ์Šค์™€ value ๊ฐ’์„ ํ•จ์ˆ˜์˜ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ๋ฐ›์•„ localStorage์— ์ €์žฅํ•ด์ค€๋‹ค.


function setMovieData(movieIndex, moviePrice){
  localStorage.setItem('selectedMovieIndex', movieIndex);
  localStorage.setItem('selectedMoivePrice', moviePrice);
}

๐Ÿ“„ total๊ณผ count ์—…๋ฐ์ดํŠธ

  • const selectedSeats = document.querySelectorAll('.row .seat.selected');
    ์ขŒ์„ ํด๋ฆญ ์ด๋ฒคํŠธ๋กœ selected๋œ seat๋ฅผ selectedSeats๋กœ ์ €์žฅ์‹œํ‚จ๋‹ค.

  • const seatsIndex = [...selectedSeats].map(seat => [...seats].indexOf(seat));

  1. ์•ž์„œ ์ดˆ๊ธฐํ™”ํ–ˆ๋˜ ๋ณ€์ˆ˜ selectedSeats๋“ค์„ [...selectedSeats]๋กœ
    ์Šคํ”„๋ ˆ๋“œ ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•ด ๊ฐœ๋ณ„์  ๊ฐ’์„ ๋งŒ๋“  ํ›„, ๋ฐฐ์—ด๋กœ ๋งŒ๋“ ๋‹ค.
  2. map์„ ํ†ตํ•ด ๋ฐ˜๋ณต๋ฌธ์„ ๋Œ๋ฉฐ ๋ฐฐ์—ด ์•ˆ์˜ ์š”์†Œ๋“ค์„ [...seats].indexOf(seat)์™€ 1๋Œ€ 1๋กœ ์ง์ง€์–ด์ค€๋‹ค.
  • localStorage.setItem('selectedSeats', JSON.stringify(seatsIndex));
    setItem์— ํ‚ค๋กœ๋Š” 'selectedSeats', ๊ฐ’์œผ๋กœ๋Š” JSON.stringify(seatsIndex)๋ฅผ ์„ค์ •ํ•ด์ค€๋‹ค.

    JSON.stringify() ๋ฉ”์„œ๋“œ๋Š” JavaScript ๊ฐ’์ด๋‚˜ ๊ฐ์ฒด๋ฅผ JSON ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค

function updateSelectedCount() {
  const selectedSeats = document.querySelectorAll('.row .seat.selected');
  const seatsIndex = [...selectedSeats].map(seat => [...seats].indexOf(seat));
  localStorage.setItem('selectedSeats', JSON.stringify(seatsIndex));

  const selectedSeatsCount = selectedSeats.length;

  count.innerText = selectedSeatsCount;
  total.innerText = selectedSeatsCount * ticketPrice;

  setMovieData(movieSelect.selectedIndex, movieSelect.value);
}

๐Ÿ“„ localStorage์—์„œ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ, UI ์ฑ„์šฐ๊ธฐ

JSON.parse() ๋ฉ”์„œ๋“œ๋Š” JSON ๋ฌธ์ž์—ด์˜ ๊ตฌ๋ฌธ์„ ๋ถ„์„ํ•˜๊ณ , ๊ทธ ๊ฒฐ๊ณผ์—์„œ JavaScript ๊ฐ’์ด๋‚˜ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

localStorage์—์„œ 'selectedSeats'๋ฅผ ํ‚ค๋กœ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๊ฐ’์„ ๊ฐ€์ ธ์™€ ๋ณ€์ˆ˜ selectedSeats์— ์ €์žฅํ•œ๋‹ค.
์กฐ๊ฑด๋ฌธ์€ 'selectedSeats'๊ฐ€ ์กด์žฌํ•˜๋Š” ๊ฒฝ์šฐ์—๋งŒ ์‹คํ–‰๋œ๋‹ค.

seats.forEach((seat, index) =>{
  if(selectedSeats.indexOf(index) > -1){
    seat.classList.add('selected');
  }
});

๋ถ€๋ถ„์—์„œ๋Š” seats ๋ฐฐ์—ด์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ์ˆœํšŒํ•˜๋ฉฐ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ๋ฐ˜๋ณต ํ˜ธ์ถœํ•œ๋‹ค.
ํ˜ธ์ถœ๋˜๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” localStorage์—์„œ ๊ฐ€์ ธ์˜จ selectedSeats์˜ ์ธ๋ฑ์Šค๊ฐ€ 0 ์ด์ƒ์ด๋ฉด ํ•ด๋‹นํ•˜๋Š” ์š”์†Œ์— 'selected' ํด๋ž˜์Šค๋ฅผ ๋ถ€์—ฌํ•œ๋‹ค.

function populateUI(){
  const selectedSeats = JSON.parse(localStorage.getItem('selectedSeats'));
  if(selectedSeats !== null && selectedSeats.length > 0){
    seats.forEach((seat, index) =>{
      if(selectedSeats.indexOf(index) > -1){
        seat.classList.add('selected');
      }
    });
  }
  const selectedMovieIndex = localStorage.getItem('selectedMovieIndex');
  if(selectedMovieIndex !=null){
    movieSelect.selectedIndex = selectedMovieIndex;
  }
}

โœ” ์™„์„ฑ๋œ JavaScript code

const container = document.querySelector('.container');
const seats = document.querySelectorAll('.row .seat:not(.occupied)');
const count = document.getElementById('count');
const total = document.getElementById('total');
const movieSelect = document.getElementById('movie');

populateUI();
let ticketPrice = +movieSelect.value;

// localStorage์— ์˜ํ™”์˜ index์™€ ๊ฐ€๊ฒฉ ์„ค์ •
function setMovieData(movieIndex, moviePrice){
  localStorage.setItem('selectedMovieIndex', movieIndex);
  localStorage.setItem('selectedMoivePrice', moviePrice);
}

// total๊ณผ count ์—…๋ฐ์ดํŠธ
function updateSelectedCount() {
  const selectedSeats = document.querySelectorAll('.row .seat.selected');
  const seatsIndex = [...selectedSeats].map(seat => [...seats].indexOf(seat));
  localStorage.setItem('selectedSeats', JSON.stringify(seatsIndex));

  const selectedSeatsCount = selectedSeats.length;

  count.innerText = selectedSeatsCount;
  total.innerText = selectedSeatsCount * ticketPrice;

  setMovieData(movieSelect.selectedIndex, movieSelect.value);
}

// localstorage์—์„œ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ, UI ์ฑ„์šฐ๊ธฐ
function populateUI(){
  const selectedSeats = JSON.parse(localStorage.getItem('selectedSeats'));
  if(selectedSeats !== null && selectedSeats.length > 0){
    seats.forEach((seat, index) =>{
      if(selectedSeats.indexOf(index) > -1){
        seat.classList.add('selected');
      }
    });
  }
  const selectedMovieIndex = localStorage.getItem('selectedMovieIndex');
  if(selectedMovieIndex !=null){
    movieSelect.selectedIndex = selectedMovieIndex;
  }
}

// ์ขŒ์„ ํด๋ฆญ ์ด๋ฒคํŠธ
container.addEventListener('click', e=>{
  if(e.target.classList.contains('seat') && 
     !e.target.classList.contains('occupied')){
    e.target.classList.toggle('selected');
  }
  updateSelectedCount();
});

// ์˜ํ™” ์„ ํƒ ์ด๋ฒคํŠธ
movieSelect.addEventListener('change', e=>{
  ticketPrice = +e.target.value;
  setMoiveData(e.target.selectedIndex, e.target.value);
  updateSelectedCount();
});

updateSelectedCount();
profile
๊พธ์ค€ํ•˜๊ฒŒ ๊ณต๋ถ€ํ•˜๊ธฐ

0๊ฐœ์˜ ๋Œ“๊ธ€