[FE] 마일스톤 페이지 UI & 기능

[youzysu]

구현할 기능

마일스톤 전체 목록 조회

• 이슈 목록(메인)에서 화면 우상단에 있는 [마일스톤]버튼을 클릭하면 마일스톤 목록 화면으로 새로고침 없이 이동한다.
• [레이블]버튼과 [마일스톤]버튼을 통해 손쉽게 두 페이지를 번갈아 이동할 수 있다.
• 마일스톤 목록 상단에는 열린 마일스톤과 닫힌 마일스톤의 개수가 카운트되며 각각 버튼으로 동작한다.
• 각 마일스톤 목록에는 아래의 내용이 보여진다.
  • 마일스톤 이름
  • 완료일 일정(없을 경우 표시하지 않는다)
  • 레이블에 대한 설명(없을 경우 표시하지 않는다)
  • 전체 진행률, 해당 마일스톤과 관련된 오픈/클로즈 이슈의 개수 표시
  • [닫기], [편집], [삭제]버튼

마일스톤 추가

• [마일스톤 추가]버튼을 누르면 새로운 마일스톤을 생성할 수 있다.
• 우상단의 [마일스톤 추가]버튼을 누르면, [마일스톤 추가]버튼은 비활성화 되고, 새로운 마일스톤을 생성할 수 있는 영역이 나타난다.
• 새로운 마일스톤을 생성하는 영역 내의 [취소]버튼을 누르면 해당 영역이 다시 사라진다.
• 마일스톤 생성 영역에는 아래의 내용들을 입력할 수 있다.
  • 마일스톤 이름(필수)
  • 완료일(선택사항)
  • 설명(선택사항)
• 완료일은 YYYY. MM. DD 형식으로 입력할 수 있으며, 유효한 형식으로 입력된 값인지 확인한다. 유효하지 않을 경우 Error형식의 디자인으로 표시한다.
• 완료일과 설명은 선택사항이므로 제목만 입력해도 [완료]버튼이 활성화 된다.
[완료]버튼을 누르면 마일스톤 생성 영역은 사라지고, 마일스톤 목록에는 가장 위에 새로운 마일스톤이 추가된다.

마일스톤 편집(수정)

• 마일스톤 목록에서 특정 마일스톤의 [편집]버튼을 누르면, 해당 마일스톤이 편집 영역으로 전환된다.
• 마일스톤 편집 영역은 마일스톤 생성 영역과 동일하게 기능하되 [완료]버튼은 [편집 완료]버튼으로 보여진다.
• [편집 완료]버튼은 마일스톤에 변경사항이 있을 경우에만 활성화 되고, [취소]버튼을 누르면 아무런 변경 없이 기존 마일스톤 목록으로 전환된다.

Backlog

• dueDate useInput validate 개선 후 적용
  • 2023 03 25 입력 시 자동 - 추가