네. 가능합니다. 😎

오늘은 피그마에서 베리어블 기능을 이용하여 하트 아이콘을 클릭하면

찜목록이 추가되는 기능을 만들어봤습니다!

찜 목록을 만들며, 하나의 아이콘에 아이콘 ON/OFF, 토스트 팝업 호출,

숫자 카운트, 이미지 노출 및 숨기기 기능을 배워볼건데요~!

다소 어려워보여도 차분하게 따라해보면 모~~~~두 충분히 해볼 수 있으니

천천히 따라해봐요! 👀

답변

어드벤스드 프로토타입이라는 편리한 기능이 나왔지만,

결국엔 화면에 보여지는 것들은 다 그려줘야해요! 😂

기호에 맞게 하나하나씩 먼저 준비해보아요~

1. 상품목록에 들어갈 컴포넌트

후술하겠지만, 하트를 제대로 ON/OFF 하기 위해 하트와는 따로 만들어요!

2. 토스트 팝업

활성화가 안된 하트 아이콘을 눌렀을 때 해당 상품이 찜 목록이 추가되었음을

알려주는 팝업 한개와,

활성화된 하트 아이콘을 눌렀을 때 해당 상품이 찜 목록에서 제거되었음을

알려주는 팝업 한개!

이렇게 두개를 준비합시다~!

3. 상품목록에 들어갈 하트 (ON/OFF 형태로 준비)

하트를 ON/OFF 형태로 두개 준비해줍니다~! 그리고 하트를 컴포넌트화하여 프로퍼티 이름을 OFF하트에는 ‘false’, ON 하트에는 ‘true’로 입력해줘요.

그리고 총 여섯쌍 (찜 목록의 들어갈 상품 가지 수 만큼)을 준비해줘요.

그리고 각각의 쌍마다 넘버를 붙여주면, 이렇게 되겠죠?

4. 찜 목록에 들어갈 하트 (ON 형태만 준비)

찜 목록에 들어갈 하트입니다!

찜 목록에서의 하트는 여섯쌍을 준비하되, ON 형태 하나만 준비해줍니다.

5. 찜 목록의 상품이 없을 경우에 들어갈 빈 화면 이미지

찜 목록에 아무것도 없을 경우, 찜목록을 채워줄 빈화면 이미지입니다!

없어도 상관없지만 있는 편이 좋을 것 같아서 넣어봤어요~ㅎㅎㅎ

6. 찜 목록에 들어갈 컴포넌트

마지막으로 찜 목록을 채워줄 컴포넌트입니다!

상품목록과는 다르게 찜목록에서는

이렇게 ‘true’, ‘false’ 형태의 한 쌍이 들어가야해요! (’false’가 어떻게 된건지 잘 모르시겠다면, 예제를 참고해주세요!)

마찬가지로 상품목록의 하트처럼 숫자를 부여해줍니다.

이제 로컬 베리어블을 등록할 차례입니다!

하트 아이콘에 적용할 ‘찜_1~6”.

찜 목록에 들어가는 컴포넌트에 적용할 ‘찜목록_1~6’.

그리고 찜한 상품의 개수를 카운트 할 ‘찜한 상품의 수’.

마지막으로 빈 화면에 적용 할 ‘빈화면’.

이렇게 14개의 베리어블을 위의 모양대로 등록합니다.

컴포넌트를 활용하여 화면을 기호에 맞게 구성해주세요! 여기서 주의해야할 점이 있다면!

찜 목록에서 준비한 찜목록 ‘false’에 해당하는 컴포넌트를 전부 찜 목록에 배치해줍니다.

보기 좋게 만들기 위해 오토 레이아웃으로 필히 묶어 주어야해요!

이제 인터렉션을 적용하여 찜목록이 정상적으로 움직이도록 만들건데!

먼저 상품 리스트와 묶은 하트에 인터렉션을 줘볼까요?

먼저 OFF 하트부터 살펴봅시다!

찜_상품리스트 (OFF)

1. 체인지 (클릭 시 아이콘이 ON이 되도록 명령)

2. 오픈 오버레이 (클릭 시 토스트 팝업(찜완료)이 호출되도록 명령)

3. 셋 베리어블1 (클릭 시 찜 목록에서 전체 상품 수가 올라가 도록 명령)

4. 컨디셔널 (클릭 시 전체 상품 수 카운트가 0이 아닐 경우, 빈 화면 이미지를 호출하도록 명령 )

5. 셋 베리어블2 (클릭 시 해당하는 찜 목록을 호출하도록 명령)

찜_상품리스트 (ON)

찜_상품리스트 ‘ON’에 적용할 인터렉션은 ‘OFF’와 반대라고 생각해주시면 됩니다!

1. 체인지 (클릭 시 아이콘이 OFF가 되도록 명령)

2. 오픈 오버레이 (클릭 시 토스트 팝업(찜제거)이 호출되도록 명령)

3. 셋 베리어블1 (클릭 시 찜 목록에서 전체 상품 수가 차감 되도록 명령)