<aside> ✏️

목차

</aside>

상황

image.png

요구사항은 다음과 같다.

  1. 사용자가 input 요소에 스타일명을 입력한다.
  2. 스타일명 입력 후 + 버튼을 누르면 입력한 스타일명이 담긴 블록이 생성된다.
  3. 블록 내 x 버튼 클릭시 해당 블록은 삭제된다.
  4. x버튼 제외한 블록 영역 클릭시 워크스페이스로 이동할 수 있다.

이번에는 3번 태스크를 구현하고자 한다.

과정

블록 내 x 아이콘 추가

flyout에서 icon 이벤트 제어 가능한지

해당 파트는 툴박스를 담당한 팀원이 DOM 삽입이 가능하게 커스터마이징한 클래스를 활용하여 가능

삭제하기

원래 x 아이콘에 특정 블록 삭제 이벤트를 연결하고자 하였다.

하지만 시간상 보다 간편한 context menu를 활용하여 구현하였다.

(x 아이콘은 클래스명 길이에 따라 신경써줘야 하는 점도 발생하기 때문)