# 211102 TIL

장기현장실습

PLSnote 이슈

#2731 대쉬보드 화면 추가 이슈 진행중 

• 토글 버튼 애니메이션과 관련해 이슈 발생 
  • 관계 없는 토글에 애니메이션이 적용되는 문제 해결 
    • 애니메이션 클래스를 add하는 코드를 반복문 안에 넣어주어 해결

      [...document.getElementsByClassName("open-content-icon")].forEach((el) => { 
      	if ((el !== event.target) && el.classList.contains("fa-angle-up")) { 
      		el.classList.replace("fa-angle-up", "fa-angle-down"); 
      		el.classList.add('animated', 'rotateIn'); 
      	} 
      });

 

#2629 전략 네비게이션 개선 의견 이슈 진행중 

• 사용자가 버튼이 아닌 메뉴명을 클릭해도 하위 리스트가 펼쳐지는데 이 때 토글 버튼 모양이 같이 바뀌도록 수정 완료 
  • openMenuList로 합쳤던 함수를 다시 openDetailedStrategy와 openProject로 나눔 
    • 하나의 전략이 펼쳐지면 다른 전략은 접히게 하는 기능을 추가해서 전략과 세부전략에 참조할 클래스가 달라서

      document.querySelectorAll('.list-inline').forEach((el) => { 
      	el.classList.remove('d-none'); 
      }); 
      document.querySelectorAll('.strategy-body').forEach((el) => { 
      	el.classList.add('d-none'); 
      });

    • Fa-angle-up이 된 버튼이 선택되지 않았을 때 fa-angle-down으로 바뀌는 과정에서 전략, 세부전략의 버튼을 모두 인식해버리는 문제가 있어 차이를 두기 위해서

      [...document.getElementsByClassName("open-content-icon")].forEach((el) => { 
      	if ((el !== event.target) && el.classList.contains("fa-angle-up") && el.classList.contains("project-list")) { 
      		el.classList.replace("fa-angle-up", "fa-angle-down"); 
      		el.classList.add('animated', 'rotateIn'); 
      	} 
      });

• 전략, 세부전략 명을 클릭했을 때 토글 버튼이 잘 바뀌고 나서 그 버튼을 클릭하면 똑같은 동작을 한 번 더 하는 문제 발견
  • 기존에 fa-angle-down 클래스를 삭제하고, 삼항연산자를 통해 클래스명을 부여했다. 이름을 클릭했을 때는 fa-angle-up 클래스를 주고, 클릭하지 않았을 때는 fa-angle-down을 주어 문제를 해결했다.

    class="#{is_selected_strategy?(strategy) ? 'fa-angle-up' : 'fa-angle-down'}"

    class="#{is_selected_detailed_strategy?(detailed_strategy) ? 'fa-angle-up' : 'fa-angle-down'}"