1. 현재 진행 상황

22-07-05
Resoft 회사 사이트 만들어 오기.
팀 명: 보람 3조

팀원이 중간에 2명이 빠졌던게 오늘 새로이 두명이 추가되셨다.
같이 좋은 결과물이 나왔으면 한다.

모든 파트가 다 분배가 되어 작업중인 상태이고, 약간 수정해 수요일에 html, CSS, 애니메이션을 합쳐보고 수정하기로 했다.

2. 어려웠던 점 및 해결방안

js로 계단형태로 서서히 협력사 로고가 나타나게 했지만, 해상도의 차이에 따라 나타나게 하는게 오류가 나서 뜨지 않았다. 알고 보니 이벤트 리스너가 'resize'라서 화면 크기를 조정할때 다시 동작되기는 했다. 문제는 화면이 로딩되자 마자 시작되어야 하기 때문에 임의로, 함수 실행을 한번 더 해 뜨자 마자 보이는 걸로 했지만, 다시 사이즈를 줄이고 새로고침 했을때 적용이 안되는 문제가 발생했다.

let clientsImg = document.querySelectorAll(".client_CI");
let clientImgWrap = document.querySelector("ul");

function  clientsImagesClass () {
   // let d = i+1;
   // clientsImg.className = classN;
   // clientImgWrap = parent;
   // clientsImg[i].style.animation = `0.${i}1s ease-in 0.1s`;
   // setTimeout(() => {
   //    clientsImagesClass(clientsImg[i], clientImgWrap);
   // }, i*1000);

      let v = 8;
      for (let i = 0; i < clientsImg.length; i++) {
         if (i < 9) {
            setTimeout(function () {
               clientsImg[i].style.opacity = 1;
            }, i * 900)
         } else if (i >= 9 && i < 18) {
            let j = i + v;
            let e = 26;
            v = v - 2;
            setTimeout(function () {
               clientsImg[j].style.opacity = 1;
               // i=i+1;
   
            }, (e - j) * 900)
   
         } else if(i>=18) {
               setTimeout(function () {
                  clientsImg[i].style.opacity = 1;
               }, i * 900)
            }
          
         }

   }

   function width1217(){
         
   let v = 7;
   for (let i = 0; i < clientsImg.length; i++) {
      if (i < 8) {
         setTimeout(function () {
            clientsImg[i].style.opacity = 1;
         }, i * 900)
      } else if (i >= 8 && i < 16) {
         let j = i + v;
         let e = 26;
         v = v - 2;
         setTimeout(function () {
            clientsImg[j].style.opacity = 1;
            // i=i+1;

         }, (e - j) * 900)

      } else if(i>=16) {
            setTimeout(function () {
               clientsImg[i].style.opacity = 1;
            }, i * 900)
         }
       
      }
   
   }

   function width940(){
      for (let i = 0; i < clientsImg.length; i++) {
            setTimeout(function () {
               clientsImg[i].style.opacity = 1;
            }, i * 900)
      }
     
   }
   // clientsImagesClass();
   // clearTimeout(clientsImagesClass, width1217, width940);

      
   const clientListAni = ()=> {
      if(window.innerWidth > 1218){
         clientsImagesClass();
      } else if(window.innerWidth >= 941 && window.innerWidth <= 1218){
         width1217(); 
      } else if(window.innerWidth < 941){
         width940();
       
      }
   }
   clientListAni();
   window.clearTimeout(clientListAni);
   window.addEventListener("resize", clientListAni);

추후에 해결이 필요한 상황이다.

3. 소감

몇가지 분배가 덜되었던 부분까지 신경쓰느라 좀 스트레스를 받았는데, 다른 조원분께서 자신의 파트만 맡아서 신경써 하는게 제일이라 너무 부담가질 필요가 없다는 조언을 해 주셨다. 이렇게 팀프로젝트로 하나 배워가는 것 같았다. 같이 행동해야 할것을 나도 모르게 너무 부담을 가진것 같다.