🛠️ 메인페이지 관련 사이드바 구현 요청

[revy7289]

📌 핵심 요구 사항 1

메인페이지의 사이드바를 통해 프로젝트, 팀, 담당자 등을 선택할 수 있고 선택한 값에 따라 필터되어야 합니다.

• 프로젝트, 팀, 담당자 리스트는 하드코딩한 배열을 사용할 수도 있으나, 가급적 TS로 정의되어 재사용이 가능해야 합니다.
• 사용자가 선택한 값에 따라 해당하는 칸반만 UI에 노출되어야 합니다.
• 검색에 따라 담당자를 검색할 수 있어야 하고, 담당자를 포함하는 칸반만 UI에 노출되어야 합니다.

🛠 작업 상세 내용

체크박스는 우선도가 높아 보이는 작업으로 가급적 먼저 해결되었으면 좋겠습니다.
불릿케이스는 그 다음 작업으로 예상되는 지점입니다.
하지만 유연하게 판단하여 불릿케이스 먼저 작업해주셔도 상관 없습니다.

UI/UX

반복되는 UI패턴이 많습니다. 재사용성을 최대한 생각하여 작업해 봅시다.

• 프로젝트, 팀, 담당자 등을 리스팅하는 배열을 구축합니다. ( TS 활용 권장 )
• 사이드바를 섹션별로 구분짓는 wrapper ui를 구축하고, 해당하는 배열을 props으로 내려줍니다.
• props으로 전달받은 data활용, checkbox로 선택할 수 있는 ui를 map으로 뿌려줍니다.
  • 전체 UI를 감싸는 side-bar Component를 모바일 반응성을 고려하여 완성합니다.

FEATURE

• checkbox나 button으로 선택한 값에 따라 특정한 데이터만 포함하도록 배열을 필터 합니다.
• 선택된 값에 따라 해당하는 칸반만 UI에 표현되어야 합니다. (프로젝트, 팀, 담당자 등)
• 검색을 통해 특정한 값을 포함하는 칸반만 UI에 표현되어야 합니다.
  • 과도한 렌더가 발생하지 않도록 스로틀링을 적용합니다.

🔗 참고할만한 자료 (선택)

관련 문서, 링크 등을 첨부해 주세요.