클론 코딩 프로젝트 (22/12/2)

https://nazzzo.github.io/

오늘로서 5일간 진행한 클론코딩 프로젝트를 끝마쳤습니다

프로젝트에 대한 전반적인 소감은 여기에
(https://github.com/nazzzo/nazzzo.github.io)

이번 포스트에는 기능 구현에 중점을 둔 부분들을 모아서
자바스크립트 코드와 함께 아래에 정리합니다

1. 레이어 팝업

팝업창 하단의 '오늘 하루 그만보기'에 체크를 하면
그 시점의 날짜정보가 로컬 스토리지에 저장됩니다

로컬 스토리지에 저장된 시간 데이터와 현재 시간이 다를 경우
사이트를 새로고침해도 팝업창이 다시 열리지 않습니다

날짜 정보를 확인하기 위해 getDate() 메서드를 사용했습니다

const loadDay = new Date();
// 주어진 날짜의 현지 시간 기준 일을 반환합니다

const thisMinutes = loadDay.getMinutes()
const thisDay = loadDay.getDate();
console.log(thisMinutes)

const v_btn = document.querySelector(".v1")
const v_txt = document.querySelector(".v2")

v_btn.addEventListener ("click", function (e){
  v_btn.classList.toggle("v_checked")
  localStorage.setItem('today', thisDay);
  localStorage.setItem('Minutes', thisMinutes);
})
v_txt.addEventListener ("click", function (e){
  v_btn.classList.toggle("v_checked")
  localStorage.setItem('today', thisDay);
  localStorage.setItem('Minutes', thisMinutes);
})
// 날짜 정보를 로컬 스토리지에 저장합니다

const x_btn = document.querySelector(".x_btn")
const conf_btn = document.querySelector(".conf_btn")
const layer = document.querySelector(".layer_bg")
const popup = document.querySelector(".layer_popup")

x_btn.addEventListener("click", function (e) {
  layer.className="layer_off"
  popup.className="layer_off"
})
conf_btn.addEventListener("click", function (e) {
  layer.className="layer_off"
  popup.className="layer_off"
})

// 오늘 하루 다시 보지 않기
// if (localStorage.getItem('today') == thisDay) {
//   layer.className="layer_off"
//   popup.className="layer_off"
// }


// 1분간 다시 보지 않기
if (localStorage.getItem('Minutes') == thisMinutes) {
  layer.className="layer_off"
  popup.className="layer_off"
}

2. 스크롤 이벤트

• 화면의 Y축 좌표를 감지해서 설정한 좌표값에 도달하면 이벤트가 실행됩니다
• setTimeout 설정으로 아이템의 이벤트 발동 시점을 조금씩 다르게 조정했습니다

(스크롤을 감지할 때 pageYOFfest이나 scrollY를 쓰면서 다소 불편함과 버그를 경험했기 때문에
다음 번에 비슷한 이벤트를 만들어야 한다면 Intersection Observer API를 활용해야 할 것 같습니다)

const itemBox = document.querySelectorAll("#box_item1, #item_box2 > div")



for (let i = 0; i < itemBox.length; i++) {
  document.addEventListener("scroll", function (e) {
    if (window.pageYOffset > 500) {
      setTimeout(function () {
        itemBox[i].style.opacity = "1";
        itemBox[i].style.transition = "all 0.8s ease-out";
        itemBox[i].style.bottom = "0px";
      }, 100 * (i + (i + 2)));
    } else if (window.pageYOffset < 100) {
      itemBox[i].style.opacity = "0";
      itemBox[i].style.transition = "all 0.3s ease-out";
      itemBox[i].style.bottom = "-50px";
    }
  });
}

3. 무한 루프 슬라이드

슬라이드 효과를 무한 반복시키려면
화면 밖으로 넘어간 마지막 아이템의 좌표를
좌측의 0번 인덱스로 이동시켜야 합니다

class="on" : 화면에 비출 부분
class="off" : 좌측 밖으로 보낼 슬라이드
class="out" : 우측 밖으로 보낼 슬라이드

// 슬라이더 메뉴

const items = document.querySelectorAll("#slide > ul")
const prevBtn = document.querySelector(".prev_btn > button")
const nextBtn = document.querySelector(".next_btn > button")

let intervalId = 0
let count = 0



    function findIndex() {
        for (let i = 0; i < items.length; i++) {
            if (items[i].getAttribute("class") === "on") return i
        }
    }

    function slide() {
        let prev = count === 0 ? (items.length - 1) : (count - 1)
        items[count].className = "on"
        items[prev].className = "off"

        for (let i = 0; i < items.length; i++) {
            if (count !== i && prev !== i) { 
                items[i].className = "out"
            }
        }

        if (++count === 3) count = 0
    }
    slide()



    function prevHandler(e) {
        const current = findIndex()
        const index = current === 0 ? (items.length - 1) : (current - 1)
        items[current].className = "out"
        items[index].className = "on"

        for (let i = 0; i < items.length; i++) {
            if (current !== i && index !== i) {
                items[i].className = "off"
                const slide = document.querySelector("slide")
            count = index
            }
        }
    }

    function nextHandler(e) {
        const current = findIndex()
        const index = current === items.length - 1 ? 0 : current + 1
        items[current].className = "off"
        items[index].className = "on"

        for (let i = 0; i < items.length; i++) {
            if (current !== i && index !== i) { 
                items[i].className = "out"
            }
        count = index
        }
    }

    prevBtn.addEventListener("click", prevHandler)
    nextBtn.addEventListener("click", nextHandler)

#slideWrap {
    position: relative;
    width: 1440px;
    margin: 0 auto;
    overflow: hidden;
}


#slide {
    width: 1440px;
    height: 780px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    transition: all 0.5s ease-out;
}

#slide > ul {
    position: absolute;
    transform: translateX(1440px);
    z-index: 3;
}
#slide > ul.on {
    transition: all 0.2s ease-out;
    transform: translateX(0px);
    z-index: 3;
}
#slide > ul.off {
    transition: all 0.2s ease-out;
    transform: translateX(-1440px);
    z-index: 2;
}
#slide > ul.out {
    transition: all 0.2s ease-out;
    transform: translateX(1440px);
    z-index: 1;
}