[dashboard] 기능 구현 투두리스트

[urapp13ofmyeye]

🚀 Problem

dashboard page의 기능 구현 투두리스트입니다.

✅ TODO

6) 대시보드 상세 페이지 구현하기

• 네비게이션 상단 오른쪽에 초대받은 멤버가 보이도록 하세요
• 각 컬럼의 카드들은 무한 스크롤로 이어지도록 하세요
  • InfiniteCommentList 컴포넌트에서 useCursorInfiniteScroll 훅 사용
• 내가 만든 보드에는 상단에 '관리' 버튼이 보이도록 하세요
• '관리' 버튼을 클릭하면 /dashboard/{dashboardid}/edit로 이동하게 하세요
• '초대하기' 버튼을 클릭하면 초대하기 모달창이 나타나도록 하세요
• 내가 만든 대시보드 이름 우측에는 왕관 모양이 보이도록 하세요
• 각 컬럼 오른쪽에 해당 카드 개수가 보이도록 하세요
  • 현재 ColumnHeader에서 카드 개수 표시 구현
• '새로운 컬럼 추가하기' 버튼을 클릭하면 컬럼 추가하기 모달이 나타나도록 하세요
  • AddColumnButton → CreateColumnModal 연결
• 각 컬럼의 '+' 버튼을 클릭하면 해당 컬럼 할 일 생성 모달이 나타나도록 하세요
  • AddTaskButton → CreateTaskModal 연결
• 각 컬럼의 '톱니바퀴' 버튼을 클릭하면 컬럼 수정 모달이 나타나도록 하세요
  • ColumnHeader의 설정 버튼 → ManageColumnModal 연결
• 생성된 할 일 카드를 클릭하면 해당 카드 상세 모달이 나타나도록 하세요
  • ColumnTaskCard → TaskDetailModal 연결

8-1) 할 일 카드 상세 모달 구현하기

• 만들어진 카드 정보를 보여주도록 하세요
  • TaskDetailModal에서 카드 제목, 설명, 태그, 담당자, 마감일, 이미지 표시
• 댓글 input에 값이 비어있으면 '입력' 버튼이 비활성화되도록 하세요
  • disabled={!newComment.trim()} 조건으로 버튼 비활성화
• 댓글 input에 값을 입력하고 '입력' 버튼을 클릭하면 댓글이 남겨지도록 하세요
  • handleCommentSubmit 함수에서 createComment API 호출
• 댓글은 무한 스크롤로 이어지도록 하세요
  • InfiniteCommentList 컴포넌트에서 useCursorInfiniteScroll 훅 사용
• 내가 남긴 댓글에 '수정' 버튼을 클릭하면 내용을 수정할 수 있도록 하세요
  • startEdit 함수로 수정 모드 활성화, textarea로 수정 가능한 입력창 표시
• 내가 남긴 댓글에 '삭제' 버튼을 클릭하면 내용을 삭제할 수 있도록 하세요
  • handleDeleteComment 함수에서 deleteComment API 호출
• 오른쪽 상단 케밥을 클릭하면 드롭다운으로 수정하기, 삭제하기를 고를 수 있도록 하세요
  • Dropdown 컴포넌트 사용
• '수정하기' 버튼을 클릭하면 할 일 수정 모달이 나타나도록 하세요
  • handleEdit 함수에서 EditTaskModal 열기
• '삭제하기' 버튼을 클릭하면 해당 카드가 삭제되도록 하세요
  • handleDelete 함수에서 handleTaskDelete 호출

8-2) 할 일 카드 수정 모달 구현하기

• 만들어진 카드 정보로 input이 기본값으로 채워지도록 하세요
  • useEffect에서 initialTask 데이터로 폼 초기화
• 값이 하나라도 바뀌면 '수정' 버튼이 활성화되도록 하세요
  • hasChanges 함수로 원본 데이터와 비교
• '수정' 버튼을 클릭하면 해당 카드에 수정된 정보가 반영되도록 하세요
  • handleTaskUpdate 함수에서 editCard API 호출
• 마감일은 날짜 입력 라이브러리를 사용해서 입력을 받도록 하세요
  • datetime-local input 타입 사용

8-3) 할 일 카드 생성 모달 구현하기

• 모든 input이 채워지면 '생성' 버튼이 활성화되도록 하세요
  • isSubmitDisabled 조건으로 제목, 설명 필수 입력 검증
• 담당자는 드롭다운으로 초대받은 인원만 선택할 수 있도록 하세요
  • members prop을 통해 초대받은 멤버 목록 전달
• 이미지는 최대 1개만 업로드할 수 있도록 하세요
  • accept='image/*' 속성으로 이미지 파일만 허용
• 카드 생성에 사용되는 이미지는 반드시 카드 이미지 업로드 api를 사용해주세요
  • handleCreateTask에서 uploadCardImage API 사용
• 태그 색상은 랜덤으로 선택되도록 하세요
  • getRandomTagColor 함수로 랜덤 색상 선택
• '생성' 버튼을 클릭하면 해당 컬럼 하단에 할 일 카드가 생기도록 하세요
  • handleCreateTask에서 createCard API 호출
• 날짜 입력은 날짜 입력 라이브러리를 사용해서 입력받도록 하세요
  • datetime-local input 타입 사용

9) 컬럼 추가, 관리 모달 구현하기

• 이름 input에 입력값이 없으면 '생성' 버튼은 비활성화되도록 하세요
  • isSubmitDisabled 조건으로 입력값 검증
• 컬럼 이름이 중복되면 "중복된 컬럼 이름입니다"라는 경고창을 보여주도록 하세요
  • isDuplicate 조건으로 중복 검사, errorMessage로 경고 메시지 표시
• 활성화된 '생성' 버튼을 클릭하면 컬럼이 추가되도록 하세요
  • handleColumnSubmit에서 createColumn API 호출
• 칼럼은 최대 10개까지 생성이 가능하도록 하세요
  • maxColumns={10} prop로 제한
• 칼럼은 스크롤로 이어지도록 하세요
  • horizontal-scroll-only 클래스로 가로 스크롤 구현
• '삭제하기' 버튼을 클릭하면 "컬럼의 모든 카드가 삭제됩니다"라는 경고창을 보여주도록 하세요
  • DeleteColumnModal 컴포넌트에서 경고 메시지 표시
• '예' 버튼을 클릭하면 해당 컬럼의 모든 할 일 카드들이 삭제되도록 하세요
  • handleColumnDelete에서 deleteColumn API 호출
• 수정할 이름을 입력하고 '변경' 버튼을 클릭하면 컬럼 이름이 수정되도록 하세요
  • handleColumnUpdate에서 editColumn API 호출