좌석 선택 기능 트러블 슈팅

상황

좌석을 터치했을 때 선택한 좌석이 어떤 것인지 UI로 구분되게 해야 했다.처음에는 좌석의 색상만 바꿔주면 된다고 생각했지만, 어떤 좌석을 클릭했는지 구분하는 방법이 필요했다.즉, 클릭한 좌석을 기억하고 있어야 하고, 그에 따라 색상을 다르게 표시해야 했다.[좌석이 총 20행 x 4자리이니 좌석 구분을 어떻게 할지도 고민했다.또한, setState를 어떻게 효율적으로 써야 UI가 즉각 반응할지가 고민이었다.

 

방법

좌석을 '1A', '2B' 같은 **고유한 식별자(String)**로 만들기로 했다.

 seatBox('${index + 1}A'),

그리고 이를 저장할 자료구조로 Set<String>을 사용했다.

Set<String> selectedSeats = {};

Set을 쓰면 중복 없이 좌석을 추가/삭제하기 편하기 때문이다.

좌석을 클릭할 때마다:

해당 좌석이 Set에 있으면 제거

없으면 추가

그리고 setState로 UI를 다시 그리게 했다.

  setState(() {
          if (isSelected) {
            selectedSeats.remove(seatId);
          } else {
            selectedSeats.add(seatId);
          }
        });

final isSelected = selectedSeats.contains(seatId);

UI에서 색상 표시를 위해:이 코드로 현재 좌석의 선택 여부를 판단하게 했다.

 

 

결과

좌석을 클릭할 때마다 선택/해제가 잘 동작했고, 색상도 즉시 반응했다.

좌석마다 ID를 부여하고, Set으로 상태를 관리하는 패턴을 익힐 수 있었다.

상태를 어떻게 관리할지 먼저 설계하는 것이 중요하다는 걸 배웠다.

그리고 UI와 상태 데이터가 서로 잘 연결되면 직관적인 코드를 만들 수 있다는 걸 경험했다.