Combo 컨트롤로 회의 참석자 추가 기능 개발하기

지난 편에서는 템플릿을 활용해 예약 목록·등록·수정 3개 스텝의 화면을 구성하고, 각 화면에 테이블 데이터를 연결하는 과정을 다뤘습니다. 이번 편에서는 Step2의 참석자 추가 기능을 콤보(Combo) 컨트롤로 개발합니다. 사용자가 사원 단위로 한 명씩, 또는 부서 단위로 한꺼번에 참석자를 선택해 목록에 추가할 수 있도록 데이터소스 생성부터 콤보 연결, 이벤트 등록까지의 흐름을 살펴봅니다.

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

콤보에 보여 줄 데이터소스 만들기

참석자를 선택하려면 먼저 선택할 목록이 있어야 합니다. 이를 위해 두 개의 데이터소스를 생성합니다.

시나리오 스튜디오 Dev 탭 → 데이터소스를 클릭하면 하단에 데이터소스 리스트(DataSource List) 영역이 표시됩니다. 옆의 + 버튼을 누르면 NewDataSource라는 이름으로 하나씩 생성되며, 같은 방식으로 총 2개를 만듭니다.

① 부서 목록 데이터소스 - DS_groupList

첫 번째 데이터소스는 부서 목록을 불러오는 용도입니다.

• 데이터소스명 : 화면과 같이 수정
• 서비스 : 기본은 Fixed로 활성화되어 있지만 서비스를 선택
• 서비스 종류 : FlexSQL
• SQL Script Name : Demo_getGroupList

📌 Fixed vs Service

• Fixed : 고정된 값을 사용할 때
• Service : FlexDB처럼 외부 서비스에서 데이터를 가져올 때

FlexDB에서 부서·사원 데이터를 조회해야 하므로 서비스 → FlexSQL을 선택합니다.

② 전체 사원 목록 데이터소스 - DS_allMemberList

두 번째 데이터소스는 전체 사원을 불러오는 용도입니다. 앞서와 동일한 방식으로 진행합니다.

• 데이터소스명 : DS_allMemberList
• 서비스 종류 : FlexSQL
• SQL Script Name : Demo_getAllMemberList

📌 사원 SQL이 하는 일

이 SQL은 부서 테이블과 JOIN하여 전체 사원의 소속 그룹(부서명)을 함께 조회합니다.
사원 콤보에서 이름을 선택할 때 어느 부서 소속인지 함께 볼 수 있게 해 주는 구조입니다.

📌 부서 목록, 사원 목록 데이터소스 모두 '보내는 데이터'가 필요 없는 이유

데이터소스는 기존 테이블의 내용을 그대로 불러오는 단순 조회 용도입니다. 별도 조건 값을 넘길 필요가 없으므로 보내는 데이터 부분은 비워 두어도 됩니다.

FlexSQL에서 SQL 스크립트 작성 및 버전 발행

SQL Script Name을 입력하면 위쪽의 링크 버튼이 활성화됩니다. 이 버튼을 클릭하면 FlexSQL 화면으로 이동합니다.

① 새 SQL 서비스 생성

• 좌측의 새 SQL 서비스 버튼 클릭
• 'SQL명을 입력해 주세요' 입력란에 앞서 복사한 스크립트 네임을 붙여 넣기
• 강의 자료에서 해당 스크립트 네임의 SQL을 찾아 복사하여 붙여 넣기

② 새 버전 발행

스크립트 네임 옆의 세로 더보기 버튼 → 새 버전 발행을 클릭하면 버전이 생성되고 내용이 저장됩니다.

③ 스크립트 버전 연결

다시 시나리오 스튜디오로 돌아와 스크립트 버전 콤보 박스를 클릭하면 발행한 버전이 나타납니다. 처음 발행한 경우 버전 1이므로 1로 저장하면 됩니다.

전체 사원 데이터소스도 동일한 순서(새 서비스 → 스크립트 네임 붙여 넣기 → SQL 붙여 넣기 → 새 버전 발행 → 버전 1 저장)로 설정합니다.

⚠️ 저장 습관 잊지 말기
중간중간 Ctrl + S 또는 상단 저장 버튼으로 주기적으로 저장해 주세요. 작업량이 커지는 구간이라 저장을 건너뛰면 손실 위험이 큽니다.

콤보 컨트롤에 데이터소스 연결하기

템플릿이 적용된 화면에는 이미 그룹 콤보와 개별 콤보 두 개의 콤보 컨트롤이 배치되어 있습니다.

각 콤보에 데이터소스를 연결하고 선택한 값이 어디에 저장될지까지 설정합니다.

① 그룹 콤보 설정

그룹 콤보를 클릭하면 속성 영역에서 데이터소스명·셀 타이틀·컬렉션 데이터소스 키 연결이 템플릿에 의해 이미 기입되어 있습니다.

• 표시할 컬렉션 키 : groupName
• 이벤트 : 다이얼로그 닫기 시점에 이벤트 설정 (이미 체크되어 있지만 아무것도 보이지 않는다면 체크 해제 후 재체크하거나 추가 버튼 클릭)
• 이벤트 명 : AttendReload

② 개별 콤보 설정

개별 콤보도 같은 방식으로 설정합니다.

• 표시할 컬렉션 키 : empName
• 이벤트 : 다이얼로그 닫기 시점
• 이벤트 명 : AttendReload

📌 다이얼로그 닫기 이벤트(AttendReload)가 필요한 이유

콤보에서 값을 선택하고 다이얼로그가 닫히는 순간 selectData 카테고리에 데이터가 업데이트됩니다. 이때 AttendReload 이벤트가 실행되어 참석자 영역을 다시 그려 줘야 화면에 변경 사항이 반영됩니다. 즉, 선택만 되고 화면에는 반영되지 않는 문제를 막기 위한 화면 갱신용 이벤트입니다.

참석자 추가 버튼 이벤트 설정

참석자를 실제로 추가하는 두 버튼에도 이벤트를 걸어 둡니다.

① 멤버 추가 버튼 - addMemberAttendee 이벤트 연결

이벤트는 스크립트 한 개로 구성되며, 세 가지 기능을 수행할 예정입니다.

• 클릭 이벤트 사용 체크
• 이벤트 명 : addMemberAttendee

② 그룹 추가 버튼 - addGroupAttendee 이벤트 연결

부서 단위로 한꺼번에 참석자를 추가하는 이벤트입니다. 이 이벤트는 스크립트 → 서비스 → 스크립트 3단계로 구성될 예정입니다.

• 클릭 이벤트 사용 체크
• 이벤트 명 : addGroupAttendee

다음 강의 : 서비스 호출로 1:N 관계 데이터 저장·조회하기

이번 편에서는 참석자 추가 기능에 필요한 UI 연결을 마쳤습니다. 부서·사원 목록을 제공할 두 개의 FlexSQL 데이터소스를 만들고 그룹·개별 콤보에 AttendReload 이벤트를 설정했으며 멤버 추가 / 그룹 추가 버튼에 각각 addMemberAttendee, addGroupAttendee 이벤트명을 등록했습니다. 다음 편에서는 이렇게 등록한 이벤트에 서비스를 연결하고 호출하여 1:N 관계 데이터를 실제로 저장하고 조회하는 과정을 다루겠습니다.