지난 편에서는 실습앱의 전체 구조를 이해하고, 호스팅 폴더에 이미지를 업로드한 뒤 시나리오 템플릿을 적용하고 그룹 데이터 연결까지 설정했습니다. 이번 편에서는 실습의 핵심인 이벤트를 생성합니다. Step1 진입 시 데이터를 적재하는 Init 이벤트와 카드 클릭 시 DataSource 필터가 동작하기 위한 클릭 이벤트 두 가지를 다룹니다.
Step1이 처음 열릴 때 컬렉션에 데이터를 채워주는 스크립트를 작성합니다. Step1을 클릭하고 속성 패널에서 스텝 이벤트 사용을 체크한 뒤, Init 시점의 이벤트명을 Step1_Init으로 입력합니다. 파란색 링크 버튼을 클릭해 이벤트 설정으로 이동한 뒤 스크립트 액션을 2개 추가합니다.
첫 번째 스크립트는 호스팅 폴더에 올려둔 이미지 URL들을 roomImgList 카테고리에 넣는 역할입니다.
var BASE = 'https://ws.flextudio.com/partneredu/edu_images/rooms';
var imgList = [ {url: BASE + '/디럭스룸/디럭스룸_1.avif', type: '디럭스룸'},
{url: BASE + '/디럭스룸/디럭스룸_2.avif', type: '디럭스룸'},
{url: BASE + '/디럭스룸/디럭스룸_3.avif', type: '디럭스룸'},
{url: BASE + '/싱글룸/싱글룸_1.avif', type: '싱글룸'},
{url: BASE + '/싱글룸/싱글룸_2.avif', type: '싱글룸'},
{url: BASE + '/카라반/카라반_1.avif', type: '카라반'},
{url: BASE + '/카라반/카라반_2.avif', type: '카라반'},
{url: BASE + '/카라반/카라반_3.avif', type: '카라반'},
{url: BASE + '/펜션동/펜션동_1.jpg', type: '펜션동'},
{url: BASE + '/펜션동/펜션동_2.avif', type: '펜션동'} ];
imgList.map(function(row) { f.Collection.addSector({url: row.url, type: row.type}, 'roomImgList'); });
코드를 보시면 각 섹터에 url과 type 두 개의 키를 넣고 있습니다. url은 실제 이미지 주소이고, type은 해당 이미지가 어느 숙소 것인지 표시하는 태그입니다. type 값이 3편에서 다룰 DataSource 필터에서 매칭 키로 쓰입니다.
참고로 실무에서는 이미지 개수가 많아지면 이 배열을 직접 하드코딩하지 않고, DB 테이블에 저장해두고 서비스로 조회하는 방식을 쓰는 게 일반적입니다. 지금은 학습용으로 한 번에 올려놓은 것이며, 개념만 이해하시면 됩니다.
두 번째 스크립트는 숙소 정보를 roomList 카테고리에 넣습니다.
var roomData = [
{
roomType: '디럭스룸',
roomName: '디럭스 트윈',
roomDesc: '넓은 공간과 트윈 침대로 편안한 휴식',
capacity: 2,
maxCapacity: 3,
price: 120000,
thumbUrl: 'https://ws.flextudio.com/partneredu/edu_images/rooms/디럭스룸/디럭스룸_1.avif', amenities: '에어컨,TV,미니바,욕조,드라이기'
},
// ...
];
roomData.map(function(row) { f.Collection.addSector(row, 'roomList'); });
여기서 반드시 확인하실 포인트가 있습니다. 각 숙소의 roomType 값이 앞서 이미지 적재 시 넣은 type 값과 정확히 일치해야 합니다. 디럭스룸이면 이미지도 디럭스룸, 숙소도 디럭스룸로, 이 문자열이 매칭 키라서 한 글자라도 다르면 연결되지 않습니다. 또한 thumbUrl은 목록 카드에 표시할 대표 이미지 한 장이고 amenities는 콤마로 구분된 편의시설 문자열입니다. amenities는 다음 스텝에서 split으로 분리해 사용할 예정입니다.
이제 이 강의에서 가장 중요한 부분입니다. 숙소 카드를 클릭했을 때 실행되는 이벤트로, DataSource 필터가 동작하기 위한 모든 준비가 여기에서 이루어집니다.
탐색기에서 roomCard 그룹을 선택합니다. 속성 영역에서 이벤트 사용을 체크하고 이벤트 타입을 클릭으로 이벤트명을 Step1_ClickRoom으로 입력합니다. 파란색 링크 버튼을 클릭하여 이벤트 설정으로 이동한 뒤 스크립트 액션을 하나 추가합니다. 코드를 한 줄씩 살펴보겠습니다.
// ① 기존 데이터 초기화
f.Collection.removeCategory('roomDetail');
f.Collection.removeCategory('amenityList');
// ② 클릭한 카드의 데이터 가져오기
var room = _c.activeSector;
// ③ roomDetail에 추가 + activate ⭐ 핵심
f.Collection.addSector({
roomType: room.roomType,
roomName: room.roomName,
roomDesc: room.roomDesc,
capacity: room.capacity,
maxCapacity: room.maxCapacity,
price: room.price
}, 'roomDetail').activate();
// ④ 편의시설 문자열을 콤마로 분리하여 amenityList에 추가
var amenities = (room.amenities || '').split(',');
amenities.map(function(item) {
if (item.trim()) {
f.Collection.addSector({amenityName: item.trim()}, 'amenityList');
}
});
// ⑤ Step2로 이동
Current.step.moveToNext('Step2', null, 'toRight');
이전에 다른 숙소를 선택했던 데이터가 컴렉션에 남아있을 수 있으니 새로 선택할 때마다 깨끗이 비워줍니다. 이것을 안 하면 이전에 선택한 편의시설이 그대로 남아있거나, 상세 데이터가 중복될 수 있습니다.
반복 그룹 안의 항목을 사용자가 클릭하면 해당 행이 자동으로 액티브 상태가 됩니다. _c.activeSector에는 지금 막 클릭한 숙소 데이터가 담겨 있습니다.
선택한 숙소를 roomDetail에 넣으면서 끝에 .activate()를 체이닝했습니다. .activate()이 없으면 roomDetail 카테고리에 섹터가 들어가긴 하지만, 액티브 상태로는 지정이 안 됩니다. 그러면 다음 편에서 만들 DataSource 커스텀 필터에서 쓸 _c.activeSector.roomType 값이 비어버리고 결국 이미지가 한 장도 안 나옵니다.
따라서 .activate()는 ‘지금 추가한 이 섹터를 활성 섹터로 지정해줘’ 라는 의미이고 DataSource 필터와 연결되는 핵심 고리입니다. addSector() + .activate() 조합은 플렉스튜디오에서 특정 섹터를 지금 포커스 할 때 쓰이는 패턴입니다. 오늘 이 패턴만 확실히 익혀가시면 앞으로 다양한 상황에서 활용할 수 있습니다.
숙소 데이터의 amenities는 "에어컨,TV,미니바,욕조" 같은 하나의 문자열입니다. 콤마로 쪼개서 각 편의시설을 개별 섹터로 amenityList에 넣습니다. 그래야 상세 화면에서 태그 모양으로 한 개씩 반복 표시가 가능해집니다.
moveToNext의 세 번째 인자 'toRight'는 전환 애니메이션 방향을 의미합니다.
2편에서는 필요한 이벤트를 모두 완성했습니다. 이제 컬렉션에 데이터가 담겨있고 액티브 섹터가 지정된 상태입니다.
다음 편에서는 이 데이터를 실제 ImageBox에 연결해 주는 DataSource 커스텀 필터를 만들고 모든 화면을 최종 완성합니다.