사이드 바 리뉴얼하기 (23.11.09)

오늘은 사이드 바를 리뉴얼하는 과업을 수행해야했다.

수행 조건은 아래와 같았다.

 

1. 하나의 메뉴를 클릭하면 해당 메뉴만 열려있고, 다른 메뉴는 닫히도록 구현해야한다. (기존에는 모든 메뉴가 다 열리게 되어있었음)

2. 사용자가 실제 위치해있는 메뉴에 해당하는 부분은 글씨 색에 변화를 주어 사용자 편의성을 높인다.

한번에 하나의 메뉴만 열리도록 해야함

 

3. 사용자가 해당 메뉴에 위치해있으면 (새로고침을 하는 경우에도) 항상 해당 메뉴탭은 열린채로 유지되고 있어야한다.

 

4. 각 사용자마다 진행중인 프로젝트의 개수에 따라 사이드 메뉴에 해당 프로젝트 관련 메뉴를 동적으로 노출시켜야한다.

사이드 바에 표시된 프로젝트

프로젝트별 하위 메뉴

 

5. 사용자는 프로젝트 개요라는 페이지에서 각 프로젝트의 제목을 변경할 수 있고, 변경한 제목은 바로 사이드바에 반영되어야한다.

 

프로젝트 제목은 기본적으로 프로젝트 #1, 프로젝트 #2 ... 와 같이 자동으로 생성되며 특정 프로젝트의 제목을 수정하는 경우 사용자가 변경한 제목으로 바뀌게 된다.

---

그냥 막상 말만 들으면 엄청 쉬워보였는데, 구현하는데 꽤나 오래걸렸다. 특히 초기 디자인 시스템으로 Chakra-ui를 사용하고 있었기 때문에 해당 디자인 시스템의 Accordian 컴포넌트를 커스텀하여 사용해야했는데 이때 사용자가 위치한 메뉴 탭을 열린 상태로 유지하려면 해당 메뉴의 인덱스 값을 전달해주어야했다. 따라서 url의 path를 검사하여 메뉴의 제목(ex. 커뮤니티)과 매칭시켜 indexOf로 해당 메뉴의 인덱스를 찾아 Accordian 컴포넌트에 전달해주어 유지시키는 로직을 사용하고 있었다. 그렇기때문에 서버에서 가져온 사용자의 진행중인 프로젝트 정보에 따라 프로젝트 개수가 동적으로 생성되면서 동적으로 생성된 프로젝트에 /myproject/{projectId}/outline과 같은 각 하위메뉴에 대한 url도 동적으로 할당해주어야했는데, 이것을 어떻게 구현해야 하는지에 대한 고민이 많았던것 같다.

결과적으로 사용자의 프로젝트 정보를 받아오면서 응답에 들어있는 projectId를 가지고 subMenuUrls에 자바스크립트의 reduce를 통해 각 프로젝트에 대한 제목과 url을 key, value 형태로 동적으로 생성해두었다가 이렇게 생성된 subMenuUrls 객체 안에서 그때그때 url path에 해당하는 메뉴 제목을 가져와서 해당 페이지에 대한 메뉴 탭이 열린 상태로 유지되도록 구현하였다.

subMenuUrls 안에 존재하는 값

 

또한, 프로젝트 이름을 수정하는 기능 구현에서 프로젝트의 이름(ex. 프로젝트 #1)을 서버에서 받아오고 수정하는 것이 아닌 사용자의 로컬에서만 수정되는 형태였기 때문에 이것을 어떻게 구현해야 하는지에 대해서도 많은 고민을 했다.

결국 사용자의 프로젝트 정보를 받아오면서 해당 프로젝트 개수만큼 반복문을 돌며 localStorage에 해당 프로젝트의 projectId와 맵핑하여 프로젝트 #1과 같은 형태로 제목을 저장하고 있다가 사용자가 제목을 수정한다면 로컬 스토리지에 저장되어있던 projectId와 수정을 요청한 프로젝트의 id를 매칭하여 해당 프로젝트의 제목이 수정되어 반영되도록 하였다.

이때, 사이드바는 아예 다른 컴포넌트에 존재했기 때문에 변경한 이름이 바로 반영되지 않는 현상이 있었는데, isProjectTitleChanged 라는 전역 상태변수를 하나 선언하여 프로젝트 제목이 변경되면 true 상태로 변경하여 이를 기반으로 사이드바에서도 바로 변경사항이 반영되도록 구현해주었다.