# 기여도

🎨 디자인 100%
📝 퍼블리싱 100%
🛠 스크립트구현 80%

# 작업 환경 및 기술스택

DESIGN
⭐️ XD
⭐️ Photoshop

VCS
⭐️ Git

IDE
⭐️ IntelliJ

FRONT
⭐️ Slick
⭐️ Java Script(es5)

# 작업 내용

🗓 작업기간 2022. 06. 09 ~ 2022. 07. 07

📌 디자인 시안 작업

📌 웹/모바일 반응형 리뉴얼 작업

📌 자바스크립트를 이용한 메뉴 랜더링 구현

📌 자바스크립트를 이용한 화면 인터렉티브 구현

var mobileVisual = function(){...}

화면 랜더를 위한 구현체를 생성하였다.

var menuAniInfos = [
      {
         id:1,
         content: document.querySelectorAll('.menu-item')[0],
         transform: " translateX(-28px) translateY(-28px)",
         transform_s: "translateX(-28px) translateY(-10px)",
         delay: "0s"
      },
      ...
   ]

menuAniInfos 객체를 만들어 구현에 필요한 정보를 담아두었다.
content에는 조작할 돔을 넣었고, transform은 조작할 돔에 넣어줄 값을 지정하였다.
디바이스 호환을 위해 transform_s를 만들어 작은 디바이스에도 틀어지지 않는 화면을 랜더링 해주었다.
메뉴 활성화 버튼을 클릭하면 menuAniInfos객체를 foreach로 돌려 openBox 함수에 데이터를 전달한다.

var menuBtn = document.getElementById('btn');

menuBtn.addEventListener("click",function(){
   var menuCheck = document.getElementById('check');
   if(!menuCheck.checked){
      menuAniInfos.forEach(function(a){
         var target = a.content;
         openBox(target,a);
      })
   }else{
      menuAniInfos.forEach(function(a){
         var target = a.content;
         closeBox(target);
      })
   }
});

function openBox(target,a){
   if( window.innerWidth < 340 ){
      target.style.transform = a.transform_s;
   }else{
      target.style.transform = a.transform;
   }
   target.style.transitionDelay = a.delay;
   target.style.opacity="1";
   backClose();
};

function closeBox(target){
   target.style.transform = "none";
   target.style.opacity="0";
   backActive();
};

이벤트는 버튼을 클릭하면 실행된다.
openBox는 전달받은 데이터를 받아 알맞은 속성을 부여해준다. 😀

var initMainPageEvent = function() {
   mobileVisual();
   window.addEventListener('DOMContentLoaded', execMainBtnEvent)
};

(function(){
   initMainPageEvent();
})();

화면에 진입하면 호출될 함수를 작성했다 ✌️