호스팅 폴더로 다중 이미지 슬라이드 뷰 만들기③ : DataSource 커스텀 필터 사용하기

지난 편에서는 Step1_Init과 Step1_ClickRoom 이벤트를 완성했습니다. 컬렉션에는 이미지 URL과 숙소 정보가 담겨있고 .activate()로 액티브 섹터까지 지정된 상태입니다. 이번 편에서는 마지막 퍼즐 조각인 DataSource 커스텀 필터를 만들고, ImageBox에 연결한 뒤 안정적으로 동작하는 방어 코드까지 추가해 최종 완성합니다.

영상 강의로 학습하기 👉
사용된 코드 확인하기 👉

DataSource로 커스텀 필터 설정하기

이제 컬렉션에 담아둔 이미지들을 ImageBox에 연결해 줄 DataSource를 만들 차례입니다.

Dev 탭에서 DataSource를 클릭합니다. 하단의 데이터소스 리스트 우측의 플러스 버튼으로 새 데이터소스를 추가합니다.
데이터소스명을 DS_roomImages로 변경하고 아래와 같이 설정합니다.

커스텀 스크립트는 ‘roomImgList의 이미지를 하나씩 돌면서 이미지의 type이 현재 선택한 숙소의 roomType과 같은 것만 반환해라’라는 뜻입니다. 예를 들어 사용자가 디럭스룸를 클릭했다면, _c.activeSector.roomType은 ‘디럭스룸’이 되고 이미지 10장 중 type이 ‘디럭스룸’인 3장만 필터를 통과해 ImageBox로 넘어갑니다.

이 패턴의 장점은 컬렉션에 모든 이미지를 한 번 로드하고 필터 조건만 바꾸면 서비스 호출 없이 즉시 다른 이미지 세트를 보여줄 수 있다는 점입니다. 클라이언트 단에서 반응 속도도 빠르고 서버 부담도 줄어듭니다.

ImageBox에 DataSource 연결하기

Step2로 이동해서 이미지박스 컨트롤(roomSlideImg)을 선택합니다. 템플릿에 의해 이미 아래와 같이 적용되어 있을 것입니다. ‘이미지 여러개 보여주기 사용’이 반드시 체크가 되어있어야 단일 이미지가 아닌 슬라이드 모드로 동작합니다. DataSource에서 들어오는 섹터 수만큼 슬라이드가 자동으로 생성되고, 각 섹터의 url 컬렉션 키에서 이미지 주소를 읽어와 한 장씩 표시합니다.

Step2 방어 코드 설정

마지막으로 안정적인 앱 동작을 위한 이벤트 두 개를 추가합니다.

Step2_Init : 진입 시 방어 코드

Step2를 선택하고 스텝 이벤트 사용을 체크한 뒤, Init 시점의 이벤트명을 Step2_Init으로 입력합니다. 이어서 뒤로가기 사용하기를 체크해주세요. 이벤트 설정으로 이동한 후 아래 스크립트를 작성합니다.

var detail = (_c.roomDetail || [])[0];
if (!detail || !detail.roomType) {
f.Toast().title('숙소 정보를 불러올 수 없습니다.').color('black').delay(2).position('center').show();
Current.step.moveToPrev(null, true, null);
}

Step2에 비정상적으로 진입했을 때 예를 들어 roomDetail이 비어있는 상태로 들어왔을 때 토스트 메시지를 띄우고 Step1으로 돌려보내는 방어 코드입니다. 진입 직후 데이터 유효성 체크는 실무 앱에서도 자주 쓰이는 패턴입니다.

Step2_ClickReserve : 예약 버튼 이벤트

예약하기 버튼을 선택하고 클릭 이벤트에 Step2_ClickReserve를 연결합니다. 실제 앱에서는 여기서 DB 저장 서비스를 호출하지만, 이번 데모에서는 완성 확인용 토스트만 띄우는 형태로 구성했습니다.

var room = (_c.roomDetail || [])[0] || {};
f.Toast().title(room.roomName + ' 예약이 완료되었습니다!').color('black').delay(2).position('center').show();

완성된 앱 확인하기

스튜디오 오른쪽 상단 초록색 실행 버튼을 눌러 디버거 모드로 점검해보겠습니다. 숙소 목록에서 디럭스룸를 클릭하면, 상세 화면에서 디럭스룸 이미지 3장이 슬라이드로 나타납니다. 뒤로 가서 카라반을 눌러보면 카라반 이미지 3장으로 바뀝니다.

이번 강의 복습하기

이번 시리즈를 통해 호스팅 폴더 업로드부터 컬렉션 적재, 커스텀 필터, ImageBox 연결까지 다중 이미지 슬라이드 기능을 처음부터 끝까지 만들어보았습니다.
이 흐름은 숙소 앱뿐 아니라 하나의 대상에 여러 이미지가 필요한 모든 상황에 그대로 응용할 수 있습니다.

① 호스팅 폴더에 파일을 업로드하면 URL이 자동 생성됩니다.
② 컬렉션에 URL + type 키를 적재하고 .activate()로 선택 섹터를 지정합니다.
③ DataSource 커스텀 필터로 해당 숙소 이미지만 걸러냅니다.
④ ImageBox가 DataSource를 받아 슬라이드로 표시합니다.