💻 CGV Mobile

• 사이트명: CGV Mobile
• 사용언어: HTML, CSS, JavaScript
• 라이브러리: jQuery,Swiper,JSON
• 유형: Mobile적응형
• 📰 https://hallowmang.github.io/CGV-Mobile/

✅ Check Point

✔ header
✔ 탭전환
✔ Swiper
✔ 아코디언
✔ fetch() 함수를 활용 json데이터를 호출

---

1.header

📁 기존 모바일 cgv는 크기에 맞춰 줄어들어든 반면, overflow: auto를 사용하여, 화면 밖으로 나가게 되면 스크롤을 할 수 있는 영역으로 만들었다

.nav {
      overflow: auto;
      background: linear-gradient(to left,#ef642f,#fb4357);
}

🔴 기존 모바일 CGV

👉 작업한 CGV

---

2.탭 전환⭐⭐

무비차트, 상영예정을 누르면 밑의 콘테이너가 전환하는 것을 하고 싶었다. 영화 앱 뿐만아니라, 다양한 홈페이지에서 사용하기 때문에,
엄청나게 중요하다고 생각했다.

꼭 알아두자!!!

	.container-chart{
        display: none;
        /*이하생략*/
        &.active{
          display: block;
        }
      }
    .container-soon{
        display: none;
        /*이하생략*/
        &.active{
          display: block;
        }
      }

// .title-wrap 클래스 안에 있는 .name 클래스를 가진 요소가 클릭되었을 때 실행되는 함수
$('.title-wrap .name').click(function(){
    // 클릭된 요소의 data-container 속성 값을 가져와 containerName 변수에 할당
    containerName = $(this).data('container')
    
    // 클릭된 요소에 'active' 클래스를 추가하고, 형제 요소들의 'active' 클래스를 제거하여 선택 요소만 활성화
    $(this).addClass('active').siblings().removeClass('active')
    
    // containerName에 해당하는 요소에 'active' 클래스를 추가하고, 형제 요소들의 'active' 클래스를 제거하여 해당 컨테이너만 활성화
    $(containerName).addClass('active').siblings().removeClass('active');
})

$(this).addClass('active').siblings().removeClass('active')는 클릭된 탭에 'active' 클래스를 추가하여 해당 탭을 활성화하고, 다른 탭은 비활성화 이 부분은 탭 메뉴에서 현재 선택된 탭을 강조하고, 다른 탭들을 비활성화하는 역할을 한다.

$(containerName).addClass('active').siblings().removeClass('active');은 실제 탭과 연결된 컨텐츠를 활성화하고, 다른 컨텐츠는 비활성화합니다. 이 부분은 탭에 해당하는 컨텐츠를 화면에 나타내거나 사라지게 하여 사용자에게 선택된 탭의 내용을 보여주는 역할

즉, 두 줄이 함께 동작하여 탭 간 전환 효과를 만든다. 하나만 있으면 탭의 선택 상태는 변경되지만, 실제 컨텐츠의 전환은 이루어지지 않을 수 있다.

예매차트, 현재상영작, ICECON 등도 마찬가지로 같은 방식으로 하였다.

$('.hash-item').click(function(e){
    e.preventDefault();

    // 클릭된 요소의 data-list 속성 값을 가져와 tabName 변수에 할당
    tabName = $(this).data('list');

    // 클릭된 요소에 'active' 클래스를 추가하고, 형제 요소들의 'active' 클래스를 제거하여 선택 요소만 활성화
    $(this).addClass('active').siblings().removeClass('active');

    // tabName에 해당하는 요소에 'active' 클래스를 추가하고, 형제 요소들의 'active' 클래스를 제거하여 해당 탭 내용만 활성화
    $(tabName).addClass('active').siblings().removeClass('active');
})

---

3.Swiper

cgv 모바일에 Swiper가 많이 사용되었다.
🔍사이트 - https://swiperjs.com/

✅ slidesPerView
Swiper옵션중에 하나인 slidesPerView는 레이아웃의 뷰의 개수를 설정한다
✅ spaceBetween⭐
Swiper은 CSS에 직접적으로 padding이나 margin을 주는 것을 안 좋아한다
그래서 사용하는 것이 Swiper옵션 spaceBetween으로 여백을 주면 된다.

const contentSlide = new Swiper('.swiper.content-group',{
 slidesPerView:"auto",
 spaceBetween:10,
});

👉 적용 시

만약에, slidesPerView를 설정하지 않으면,

여백이 많이 남으며, 슬라이드가 끝까지 가면, 슬라이드가 안되는 현상이 발생한다. 또한 spaceBetween도 적용이 안되었다.

그리고 스와이퍼를 사용하면, CSS에 직접적으로 padding이나 margin을 주지 않도록 주의하자!!

---

4.아코디언

아코디언은 아코디언처럼 위아래로 움직이는 애니메이션 때문에 붙여진 이름같다.(뇌피셜)
아코디언을 쓰면 정말 멋진 애니메이션은 아니지만 정말 유용하게 쓰일만한 애니메이션같다. 알아두면 좋을듯!!

먼저 아코디언을 접어둔 상태

$('.cinema-title').click(function(e){
    e.preventDefault();

    // 클릭된 요소가 'active' 클래스를 가지고 있는지 확인
    if ($(this).hasClass('active')) {
        // 만약 클릭된 요소가 'active' 클래스를 가지고 있다면,
        // 'cinema-title' 클래스를 가진 모든 요소의 'active' 클래스를 제거하고,
        // 'cinema-imgbox' 클래스를 가진 형제 요소들을 위로 숨김(slides up)
        $('.cinema-title').removeClass('active').siblings('.cinema-imgbox').slideUp();
    } else {
        // 클릭된 요소가 'active' 클래스를 가지고 있지 않다면,
        // 'cinema-title' 클래스를 가진 모든 요소의 'active' 클래스를 제거하고,
        // 'cinema-imgbox' 클래스를 가진 형제 요소들을 위로 숨김(slides up)
        $('.cinema-title').removeClass('active').siblings('.cinema-imgbox').slideUp();
        
        // 현재 클릭된 요소에 'active' 클래스를 추가하고,
        // 'cinema-imgbox' 클래스를 가진 형제 요소들을 아래로 나타냄(slides down)
        $(this).addClass('active').siblings('.cinema-imgbox').slideDown();
    }
})

📁 .cinema-title를 클릭 했을 때, .active가 있는지 여부를 보고 형제요소인 .cinema-imgbox를 위로 숨기거나(slides up) 아래로 나타냄(slides down)

❗❗⭐⭐ 만약 else블록에 있는 $('.cinema-title').removeClass('active').siblings('.cinema-imgbox').slideUp();가 없으면
다른 .cinema-title를 클릭해도 계속 열린상태로 유지되니 꼭 추가해주자~

---

5. fetch 비동기통신 활용

👉 적용
예매차트, 현재상영작 ~ CGV Only 버튼을 누르면 분류된 데이터를 불러올 수 있도록 하였다.

1. json 파일을 만들어 불러올 데이터 만들기

카테고리별로 분류하기 위해 chartList,currentList,onlyList로 나누어 파일을 만들었다.

{
"chartList": [
    {
      "id": 0,
      "age": "All",
      "cgvOnly": false,
      "rank": 1,
      "thumbNail": "https://img.cgv.co.kr/Movie/Thumbnail/Poster/000087/87433/87433_320.jpg",
      "type": {
        "iMax": true,
        "4DX": false,
        "screenX": false
      },
      "title": "그대들은 어떻게 살 것인가",
      "rate": {
        "adv": "26.9%",
        "egg": "99%"
      },
      "view": null,
      "dDay": "D-7"
    },
    /*이하생략*/
  ],
  "currentList":[
    {
      "id":0,
      "age":"All",
      "cgvOnly":true,
      "rank":1,
      "thumbNail":"https://img.cgv.co.kr/Movie/Thumbnail/Poster/000087/87422/87422_320.jpg",
      "type":{
        "iMax":false,
        "4DX":false,
        "screenX":true
      },
      "title":"바람 따라 만나리 : 김호중의 계절",
      "rate":{
        "adv":"13.1%",
        "egg":"92%"
      },
      "view":170,
      "dDay":null
    },
    /*이하생략*/
  ],
  "iceconList":[
   /*생략*/
  ],
  "artList":[
   /*생략*/
  ],
  "onlyList":[
    {
      "id":0,
      "age":"All",
      "cgvOnly":true,
      "rank":1,
      "thumbNail":"https://img.cgv.co.kr/Movie/Thumbnail/Poster/000087/87500/87500_320.jpg",
      "type":{
        "iMax":false,
        "4DX":false,
        "screenX":false
      },
      "title":"팀 버튼의 크리스마스 악몽",
      "rate":{
        "adv":"3.2%",
        "egg":"?"
      },
      "view":"5.4만",
      "dDay":null
    },
    /*이하 생략*/
  ]
    }

2. 데이터 불러오기

fetch('./assets/data/movie.json')
.then(res=>res.json())
.then(json=>{
  // 다양한 카테고리에 해당하는 데이터들을 변수에 저장
  const booking = json.chartList; // 예매차트 데이터
    const current = json.currentList; // 현재 상영작 데이터
    const iceCon = json.iceconList; // 얼음관 데이터
    const artHouse = json.artList; // 아트하우스 데이터
    const cgvOnly = json.onlyList; // CGV Only 데이터
  
  /* 예매차트 */
  let bookingHtml = ``; // 예매차트에 대한 HTML을 저장할 변수
    // 예매차트 데이터를 순회하면서 HTML을 생성
    booking.forEach(() => {
      // 여기서 예매차트 데이터를 이용하여 HTML 생성하는 코드가 들어간다.
      bookingHtml += 
        `<li class="swiper-slide content-item">
    <div class="movie-poster">
      <a class="detail-link" href="#"></a>
      <div class="asdf">
        <div class="onlyage-wrap">
          ${only}
          <div class="screen-type">
            <img src="${screenTypeImage}" alt="" style="${displayStyle}">
          </div>
          <i class="age age${element.age}">
            <span class="blind">
              12세관람가
            </span>
          </i>
        </div>
        <img src="${element.thumbNail}" alt="">
        <span class="ranking">
          <span class="rank-img">
            <img src="./assets/images/ranknum${element.rank}.png" alt="">
          </span>
          <span class="per">${element.rate.adv}</span>
        </span>
      </div>
    </div>
/* 이하생략 */
`
    });
  
  /* 현재상영작 */
    let currentHtml = ``; // 현재상영작에 대한 HTML을 저장할 변수
    // 현재상영작 데이터를 순회하면서 HTML을 생성
    current.forEach(() => {
      // 현재상영작 데이터를 이용하여 HTML 생성하는 코드가 들어간다.
      currentHtml += `위의 방식과 비슷함`
    });

  .
  .							/* 생략 */
  .
  
  /* cgv only */
  let cgvOnlyHtml = ``; // CGV 전용에 대한 HTML을 저장할 변수
    // CGV Only 데이터를 순회하면서 HTML을 생성
    cgvOnly.forEach(() => {
      // CGV Only 데이터를 이용하여 HTML 생성하는 코드가 들어간다.
      cgvOnlyHtml += `위의 방식과 비슷함`
    });
}

${only}는 데이터파일에서 cgvOnly가 true, false에 따라서 나오기 때문에 조건식을 사용했다.

onlyEl = `
  <div class="only-box">
    <img src="https://img.cgv.co.kr/Movie/Thumbnail/PosterIcon/16231991733190.png" alt="" style="">
  </div>
`;

// `element.cgvOnly`가 존재하는지 확인한 후에 조건에 따라 `only` 변수에 할당
// `element.cgvOnly`가 존재하면 `onlyEl` 변수의 값을 할당하고, 그렇지 않으면 빈 문자열을 할당합니다.
let only = element.cgvOnly ? onlyEl : "";

${screenTypeImage}는 스크린이 iMax, 4DX, screenX에 따라서 나오는 이미지가 다르기 때문에 조건에 따라 이미지 URL을 할당하거나 null 값을 할당할 수 있게 조건식을 사용했다.

// 각 조건은 특정 종류의 영화 스크린 타입에 따라 다른 이미지를 사용
let screenTypeImage =
  element.type && element.type.iMax
    ? "https://img.cgv.co.kr/WebApp/images/main/@3x/ico_screenType0.png"
    : element.type && element.type["4DX"]
    ? "https://img.cgv.co.kr/WebApp/images/main/@3x/ico_screenType1.png"
    : element.type && element.type.screenX
    ? "https://img.cgv.co.kr/WebApp/images/main/@3x/ico_screenType2.png"
    : null;

// `screenTypeImage` 변수에 이미지 URL이 존재하는지 확인하여 `displayStyle` 변수에 CSS 스타일을 설정
// 이미지 URL이 존재하면 빈 문자열을, 그렇지 않으면 'display: none;' 스타일을 할당
let displayStyle = screenTypeImage ? '' : 'display: none;';

이런식으로 모든 카테고리에 조건식이 필요한 부분을 적용해서 데이터를 불렀다.