🛠️ 메인페이지 관련 칸반 보드 구현 요청

[revy7289]

📌 핵심 요구 사항 1

메인 페이지에서 칸반을 통해 깃허브 이슈를 생성, 편집 할 수 있어야 합니다.

• Github API를 통해서 issue를 fetch하여 각 칸반에 뿌려지고 DB와 실시간으로 연동되어 내 화면 뿐만 아니라 다른 유저들에게도 실시간으로 편집한 내용이 반영되어야 합니다.
• 팀별로, 프로젝트별로 연동해야 할 api와 data가 많습니다. 하지만 각각의 data가 유지되거나, 선택되는 시점에 fetch되어 사용성을 보장해야 합니다.
  • 가능하면 필터에서 선택한 조건에 따라 자연스럽게 아코디언이 열리면서 fetch되는 로직이 좋습니다.
• 칸반의 카드UI를 통해 각 이슈를 Drag&Drop으로 옮겨, 작업 상태를 업데이트 할 수 있어야 합니다.

🛠 작업 상세 내용

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

UI/UX

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

• 우선 이슈 연동을 고려하지 않고, 각 칸반의 작업 상태를 표현하는 큰 카드형 UI를 구축합니다.

• 공통 컴포넌트로 작업 상태에 따라 bg와 label이 달라질 수 있는 props 구조를 고안합니다.

• db에서 데이터를 가져와 Github issue를 칸반 카드 내부에 뿌려줍니다.

  • 각각의 내부 카드에서는 issue와 연결된 독립된 data가 전달되야 합니다.
  • 전체 작업 상태를 포함하는 팀 단위의 Accordion UI(wrapper)를 구축합니다.
  • 각 팀 별로 별개의 데이터[ ]가 관리 될 수 있는 구도를 고안합니다.
  • UI를 초과하지 않도록 max-height를 통해 제한을 두고, 스크롤을 통해 시야를 확보합니다.
    • 전체 팀을 포함하는 프로젝트 단위의 큰 Collapsible UI(wrapper)를 구축합니다.

• Drag&Drop으로 칸반 내부의 이슈들이 변경되어도 레이아웃이 흐트러지지 않아야 합니다.

FEATURE

Drag&Drop으로 UI의 변경에 따라 DB에도 반영되어 실시간으로 처리되어야 합니다.

• Drag&Drop을 통해 칸반에 연동된 이슈의 작업 상태를 옮길 수 있어야 합니다.
• 상태를 옮기면서, 다른 태스크의 하위 속성으로써 결합시킬 수 있어야 합니다. (상위 to 하위)
• 태스크의 하위 속성을 꺼내와서 상단의 바닥으로 옮길 수 있어야 합니다. (하위 to 상위)
• 기존에 상-하위로 연결되어 있는 태스크를 다른 상위의 하위 속성으로 변경할 수 있어야 합니다. (하위 to 하위)
  • 결합할 수 없는 태스크의 경우, 토스트UI를 통해 시각적 피드백을 전달합니다.

- 드래그 앤 드롭으로 태스크 연결
- 상위 태스크: 연결된 하위 태스크가 존재하는 태스크
- 하위 태스크: 연결된 상위 태스크가 존재하는 태스크
- 미연결 태스크: 상위 또는 하위 태스크와 연결되지 않은 태스크(default)


상위 태스크를 다른 태스크(상위, 하위)에 드롭 시
- 상위 태스크는 다른 태스크의 하위 태스크가 될 수 없습니다.
- 드롭 동작이 적용되지 않습니다.

미연결 태스크를 상위 태스크에 드롭 시
- 미연결 태스크가 드롭된 위치의 태스크의 하위 태스크로 연결됩니다.
미연결 태스크를 하위 태스크에 드롭 시
- 하위 태스크는 다른 태스크의 상위 태스크가 될 수 없습니다.
- 드롭 동작이 적용되지 않습니다.

하위 태스크를 다른 상위 태스크에 드롭 시
- 기존 연결된 상위 태스크와의 연결을 제거하고 드롭된 위치의 상위 태스크의 하위 태스크로 연결됩니다.
하위 태스크를 다른 하위 태스크에 드롭 시
- 하위 태스크는 다른 태스크의 상위 태스크가 될 수 없습니다.
- 드롭 동작이 적용되지 않습니다.

• 칸반의 [+]를 누르면 해당 작업 상태에 새로운 태스크를 추가하는 모달을 호출합니다.

• 각 칸반의 태스크를 클릭하면, 해당하는 정보를 담아 수정할 수 있는 모달을 호출합니다.

• 칸반의 pin을 클릭하면 카드의 상단에 고정되어야 합니다.

• Accordion UI를 통해 팀별, 프로젝트별로 접었다 펼 수 있어야 합니다.
  (글로벌하게 적용 가능한 hooks면 베스트입니다.)

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

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