20240730 TIL: RN에서 UI Kitten으로 모달에서 캘린더 띄우기

✅ 오늘 배운 것

앞서 서버 배포 관련해서 급한 작업을 얼추 완료하고 다시 프론트로 넘어왔다. 현재 해야 할 일들 중에 마지막 하위 이슈의 경우는 지금 다른 팀원이 react query랑 기타 중복된 로직들을 바꾸고 있기 때문에 내가 작업하면 코드가 중복되거나 꼬일 수도 있다는 생각이 들었다. 그래서 리스트들 중에 1, 2, 3번은 모달창 안에서만 상태관리를 하면 되기 때문에 얼른 미리 작업해 두기로 했다. 

 

우리 서비스에서는 MVP를 앱으로 만들기로 해서 프론트를 앱개발로 하고, 프레임워크는 RN(react native)을 사용한다. 그리고 다들 개발자라 컴포넌트 디자인에 많은 시간을 쏟지 않기 위해서 디자인 라이브러리도 사용한다. 여러 선택지들이 있었지만 투표를 통해 UI kitten을 사용하게 되었다. 그리고 정말 다행히도 UI Kitten에서는 캘린더 컴포넌트를 기본으로 제공해서 직접 구현하지 않아도 된다. 

 

오늘 할 일은 여기서 제공하는 캘린더 컴포넌트를 사용해서 모달창을 열었을 때 '투두 날짜 옮기기' 버튼을 만들고, 그 버튼을 누르면 아래에 캘린더가 뜨게 하고, 선택한 날짜로 API를 호출하는 것이다. 

 

구현되기 전 모달창은 아래와 같다. 이 '하위 투두 생성하기' 버튼 밑에다가 '날짜 바꾸기' 버튼을 추가할 것이다. 생각해보니 '보관함에 넣기' 버튼도 필요하겠네? 그럼 버튼을 두개 만들자. 

before

after

 

버튼을 만드는 과정은 쉬운데 어려운 것은 그 다음부터다. '날짜 바꾸기' 버튼을 누르면 기존의 모달창이 캘린더 모달창으로 대체되고, 그 안에서 날짜를 보고 선택할 수 있어야 한다. 모달창을 대체하는 것이 좀 까다로워 보여서 GPT에게 물어보았다. GPT는 대체로 100% 정확한 코드를 작성해 주지는 않더라도 80% 정도는 원하는 기능에 근접한 코드를 작성해 주기 때문에, 종종 '아 이거 어떻게 코드 작성하지' 라는 생각이 들 때 이런 식으로 구체적인 질문을 하면 제법 도움이 되었던 것 같다. 

 

그런데 GPT가 제시한 코드가 영 맞지 않았다. 분명 모달이 2개이기 때문에 Modal 컴포넌트나 관련 상태 변수가 2개 이상 등장해야 하는데 하나만 등장하는 것이다. 이 녀석이 제대로 이해하지 못했다고 생각해서 더 짧게 다시 질문해 보았더니, 이번에는 Modal 상태가 2개인 코드를 잘 제시해 주었다. 

 

GPT에서 제시한 모달을 대체하는 원리는 간단했다. 루트 컴포넌트 아래에 Modal 컴포넌트 두 개를 나란히 놓는다. 그리고 Modal이 보일지 안 보일지를 제어하는 상태 변수와 함수를 useState()를 통해 두 개씩 만든다. 

 

그러니까 이런 식이다.

const [modalVisible, setModalVisible] = useState(false);	// 첫 번째 모달이 보이는지를 결정
const [calendarDate, setCalendarDate] = useState(new Date());	// 캘린더에서 선택한 날짜 변수
const [calendarModalVisible, setCalendarModalVisible] = useState(false);	// 두 번째 모달이 보이는지를 결정

return (
<>
      <Modal
        visible={visible}
        backdropStyle={styles.backdrop}
        onBackdropPress={() => {
          setVisible(false);
        }}
      >
      // 첫 번째 모달 내부의 컴포넌트
      </Modal>
      <Modal
        visible={calendarModalVisible}
        backdropStyle={styles.backdrop}
        onBackdropPress={() => {
          setCalendarModalVisible(false);
        }}
        style={styles.modal_calendar}
      >
      // 두 번째 모달인 캘린더 모달
        <Card disabled={true} style={styles.card_calendar}>
          <Calendar
            date={calendarDate}
            onSelect={nextDate => setCalendarDate(nextDate)}
            style={styles.calendar}
          />
        </Card>
        <Button>
          <Text>확인</Text>
        </Button>
      </Modal>
    </>
)

 

기본 상태는 두 모달 모두 안 보이는 상태이다. 그러다가 첫 번째 모달이 나타나고, '날짜 바꾸기' 버튼을 눌렀을 때 첫 번째 모달을 disable 시키고 두 번째 모달을 enable 시킨다. 이때 꼭 첫 번째 모달이 보이는지 결정하는 변수를 false로 바꾼 다음에 두 번째 모달이 보이는지 결정하는 변수를 true로 바꿔 준다. 

불편

 

그러면 두 번째 모달로 이런 캘린더가 뜬다. 그런데 중앙정렬이 좀 덜 되어서 미관상 부자연스러우므로, 이 문제만 해결하면 될 것 같다. 해당 모달은 모달>카드>캘린더의 nested 구조로 되어 있어서, 셋 모두에 스타일로 width: 100%를 적용해 주었더니 아래와 같이 중앙 정렬 문제가 해결되었다. 

편안

 

이제는 캘린더에서 선택한 날짜를 투두 수정 API의 파라미터로 전달해 주면 된다. 그런데 선택한 날짜 값을 찍어보니 현재 선택된 날짜보다 9시간 느린 시간이 떴다. 저번에 다른 팀원이 언급했던 timezone 문제로 보였다. 

 

GPT에게 질문해 보니 그냥 GMT 기준으로 나오는 시간에 9시간을 더해 KST로 만들라는 방법을 알려주었다. 물론 캘린더의 컴포넌트를 더 파고 들어가서 기본 타임존을 KST로 바꾸는 방법도 분명히 있겠지만, 해당 방법이 더 금방 걸릴 것 같아서 이 방법을 사용하였다.