'컬러피커'와 '드롭다운'이 열린 상태에서, 외부 클릭 시 자동으로 닫히도록 구현

[da-in]

주제

Features

Body

레이아웃과 폰트를 선택할 때 드롭다운
폰트 색상과 배경 색상을 선택할 때 컬러피커

이 요소들을 사용자가 직접 닫지 않으면 아래와 같은 상황이 발생해요! 🤔
(3개의 컬러피커와 1개의 드롭다운이 열려있는 상태)

컬러피커와, 드롭다운 외부 영역을 클릭했을 때 자동으로 닫히도록 만들면 어떨까요?
그러면 다른 컬러피커와 드롭다운을 열 때, 기존에 열린 요소가 닫히게 됩니다!

BDD-Task!

컬러피커 기본

• 폰트 색상 선택 컬러피커가 열린 상태에서 > 외부 영역을 누르면 > 컬러피커가 닫힌다.
• 단색배경 컬러피커가 열린 상태에서 > 외부 영역을 누르면 > 컬러피커가 닫힌다.
• 그라데이션배경 컬러피커가 열린 상태에서 > 외부 영역을 누르면 > 컬러피커가 닫힌다.

드롭다운 기본

• 레이아웃 선택 드롭다운이 열린 상태에서 > 외부 영역을 누르면 > 드롭다운이 닫힌다.
• 폰트 선택 드롭다운이 열린 상태에서 > 외부 영역을 누르면 > 드롭다운이 닫힌다.

추가 확인

• 텍스트 2개 이상 입력창이 활성화되어있고, 컬러피커가 하나 열린 상황에서 > 다른 텍스트의 컬러피커를 선택하면 > 기존에 열린 컬러피커가 닫히고 새로운 컬러피커가 열린다.
• 레이아웃 선택 드롭다운이 열린 상태에서 > 폰트 선택 드롭다운을 누르면 > 레이아웃 드롭다운이 닫히고, 폰트 선택 드롭다운이 열린다.

[caseBread]

이거~ 꼭 필요한 기능이라고 생각합니다~!
닫기방식에 있어서 사용자에게 더욱 익숙한 방식이니까요!

[caseBread]

요거 제가 작업 진행해보겠습니다!