이번 서비스의 경우, 네비게이션 바 2개가 혼합하여 상호작용한다. 첫번째 네비게이션 바는 프로젝트를 관리하는 탭이 되고, 두번째 네비게이션 바는, 첫번째 네비게이션 바 마다, 위젯 탭을 활성화시킬 수 있도록 만들어야 한다.
설계를 고민하다가, recoil을 통해, 관련 프로젝트 데이터와 위젯 데이터를 저장하도록 하였다. isActivated라는 boolean 데이터를 통해, 활성화된 탭을 파악하고, 새로운 활성화 탭이 존재하는 경우, 기존의 모든 탭을 모두 비활성화 시키도록 설계하였다.
recoil을 하다가 알게 된 사실인데, typescript 자체에서 참조값을 함부로 변화시키지 않도록 제어를 하고 있다. primitive 타입은 바꾸는 것이 가능하나, state를 통해 읽기 전용으로 가져오는 참조 데이터의 경우, 변환시 에러를 날린다. 따라서, 읽기 전용으로 가져온 데이터를 복제하여 이를 반환하는 식으로 했더니 에러가 해결되었다.