[포스코x코딩온] 웹개발자 풀스택 과정 3주차 회고 | 팀프로젝트

---

처음으로 팀프로젝트를 시작했다. 2주간 배운 내용으로 1주일동안 프로젝트를 진행했는데 처음은 쉽게 해본다고 Wadiz 구현을 주제로 잡았다.❗️

내가 맡은 파트는 상세페이지 구현이다. 보자마자 막막함이... 구조부터... 기능까지 할게 너무 많아서 당황했다. 그래도 하다보니 비슷하게 구현을 해보았다.

이틀 동안 작업했더니 기가 빨린다... ㅎㅎ

시간이 부족해서 이름을 너무 막 만들어서 그런지 나도 힘들다... 다음에는 리팩토링까지 생각하면서 작업을 해야겠다는 들었다.

슬라이더 기능 추가

let slide_box = document.querySelector('.box_first')
let slides = document.querySelector('.slider');
let slide = document.querySelectorAll('.slide');
let currentIdx = 0;
let slideCount = slide.length;
let slideWidth = 704;
let slideMargin = 30;
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

 

makeClone();

function makeClone(){
    for(let i = 0; i < slideCount; i++){
        //a.cloneNode(), a.cloneNode(true)
        var cloneSlide = slide[i].cloneNode(true);
        cloneSlide.classList.add('clone')
        slides.appendChild(cloneSlide);
    }

    for(var i = slideCount -1; i>=0; i--){
        var cloneSlide = slide[i].cloneNode(true);
        cloneSlide.classList.add('clone');
        //a.prepend(b)
        slides.prepend(cloneSlide);
    }
    updateWidth();
    setInitialPos();
    setTimeout(function(){
        slides.classList.add('animated');
    }, 100);
}



function updateWidth(){
    var currentSlides = document.querySelectorAll('.slide');
    // var newSlideCount = currentSlides.length;
    var newWidth = slideWidth;
    slides.style.width = newWidth;
}

function setInitialPos(){
    var initialTranslateValue = -(slideWidth + slideMargin)*slideCount;
    //slides { transform:translateX(-1000px)}
    slides.style.transform = 'translateX(' + initialTranslateValue+'px)';
}

nextBtn.addEventListener('click', function(){
    moveSlide(currentIdx + 1);
})

prevBtn.addEventListener('click', function(){
    moveSlide(currentIdx - 1);
})

function moveSlide(num) {
    slides.style.left = -num * (slideWidth + slideMargin) +'px';
    currentIdx = num
    if(currentIdx == slideCount || currentIdx  == -slideCount){

        setTimeout(function(){
            slides.classList.remove('animated')
            slides.style.left = '0px'
            currentIdx = 0;
        },500);

        setTimeout(function(){
            slides.classList.add('animated');
        },600)
    }
}




// clearInterver(timer)

var timer = undefined;

function autoSlide(){
    if(timer == undefined){
        timer = setInterval(function(){
            moveSlide(currentIdx + 1);
        }, 1500)
    }
}

autoSlide();

function stopSlide(){
    clearInterval(timer);

    timer = undefined;
    console.log(timer);
}

slide_box.addEventListener('mouseover', function(){
    stopSlide();
})

slide_box.addEventListener('mouseleave', function(){
    autoSlide();
})

짧은 시간동안 부족한 점을 많이 깨달았다는 점이 좋았다. 부족한 점이 있다는게 열심히 공부해야한다는 생각이 들었다.ㅠㅠ