본 과제는 picsum.photos에서 가져온 네 개의 이미지 그리드에서 시작합니다. 각 이미지의 캡션에는 제목 옆에 공유 버튼 링크가 포함되어 있습니다. 이 링크는 이미 Stimulus 컨트롤러에 바인딩되어 있으며, 다음과 같은 공유 데이터 값과 액션이 정의되어 있습니다.
Stimulus 컨트롤러 바인딩 데이터
-
action:
share액션을 가리킴. -
title value: 이미지 이름 (Picsum ID).
-
text value: 사진 설명 (alt 텍스트).
-
url value: 이미지 URL.
-
file value: 공유할 다운로드 가능한 리소스 (데모 목적으로 이미지 URL 사용).
이러한 사전 정의된 데이터 값을 활용하여 웹 셰어 API의 핵심 메서드인 navigator.share()와 navigator.canShare()를 사용하여 공유 솔루션을 완성하는 것이 핵심 과제입니다. 특히, 특정 공유 데이터 값(예: 파일)에 대해서는 navigator.canShare()를 통한 기능 감지(feature detection)를 반드시 사용해야 합니다. 이는 브라우저가 특정 유형의 데이터를 공유할 수 있는지 미리 확인하여 사용자 경험을 개선하고 오류를 방지하기 위함입니다. 제공된 Stackblitz 예제는 이 구현을 위한 좋은 출발점을 제공합니다.