질문사항
휴지통 버튼 하나로 여러 이미지(A, B, 전체)를 삭제하는 기능을 구현할 수 있을까요? 트리거가 겹치지 않게 구현하는 방법이 궁금합니다.
답변
네, 변수(Variables)와 조건식(Conditional Logic)을 활용하여 데이터 기반의 삭제 기능을 구현할 수 있습니다. 질문에서 제시된 예시처럼, 각 이미지(A, B)와 전체 삭제를 위한 불린 변수를 설정하고, 프로토타입 인터랙션에서 해당 변수 값을 변경하는 방식으로 구현할 수 있습니다.
구현 방법 예시:
변수 설정: `isADeleted` (Boolean, 기본값 `false`) `isBDeleted` (Boolean, 기본값 `false`) `isAllDeleted` (Boolean, 기본값 `false`)컴포넌트 연결: A 이미지 프레임의 `Visible` 속성에 `isADeleted` 변수를 연결합니다. (또는 `Opacity`에 `isADeleted`를 연결하고, `isADeleted`가 `true`일 때 `Opacity`를 0으로 설정) B 이미지 프레임의 `Visible` 속성에 `isBDeleted` 변수를 연결합니다. A, B 이미지를 묶는 전체 프레임의 `Visible` 속성에 `isAllDeleted` 변수를 연결합니다.프로토타입 인터랙션: A 이미지 휴지통 아이콘 클릭 시: `On Click` -> `Set variable` -> `isADeleted`를 `true`로 설정합니다. B 이미지 휴지통 아이콘 클릭 시: `On Click` -> `Set variable` -> `isBDeleted`를 `true`로 설정합니다. 전체 삭제 휴지통 아이콘 클릭 시: `On Click` -> `Set variable` -> `isAllDeleted`를 `true`로 설정합니다. 조건식 활용 (선택 사항): 만약 `isAllDeleted`가 `true`이면, `isADeleted`와 `isBDeleted`도 `true`로 설정하는 조건식을 추가하여 전체 삭제 시 개별 이미지도 삭제된 것처럼 보이게 할 수 있습니다.이 방법을 통해 각 휴지통 버튼 클릭 시 해당 변수 값이 변경되고, 연결된 이미지의 가시성(Visibility)이나 투명도(Opacity)가 조절되어 삭제된 것처럼 보이게 할 수 있습니다. 컴포넌트의 Variants를 활용하여 '삭제됨' 상태의 Variant로 전환하는 방법도 가능합니다.