📝 FE 백로그(해야할 일) 작성 - codesquad-masters2025-team01/issue-tracker GitHub Wiki

FE 백로그 (User Stories 기반)

Epic 1: 로그인 화면

Task 1.0: 사용자 로그인 화면 UI 구현

Story 1.1: 사용자 로그인 폼 제공

로그인하려는 사용자는
아이디와 비밀번호 입력 폼을 사용하여 내 계정으로 로그인할 수 있고
이슈 목록 화면으로 접근할 수 있다.

Tasks

Task 1.1.1: 아이디 입력 컴포넌트 구현 (최소 6자/최대 16자)
Task 1.1.2: 비밀번호 입력 컴포넌트 구현 (최소 6자/최대 12자)
Task 1.1.3: 입력값 유효성 검사 로직 구현 (길이, 공백 등)
Task 1.1.4: “로그인” 버튼 활성화/비활성화 제어
Task 1.1.5: 로그인 API 연동(더미 엔드포인트) 및 응답 처리
Task 1.1.6: 로그인 성공 시 이슈 목록 화면으로 라우팅

Epic 2: 이슈 목록 (메인 화면)

Task 2.0: 이슈 목록 화면 UI 구현 (로고, 사용자 아이콘, 필터 컴포넌트, 레이블 & 마일스톤 & 이슈 작성 버튼 컴포넌트, 리스트 틀)

Story 2.1: 열린/닫힌 이슈 탭 및 카운트 표시

로그인한 사용자는
열린 이슈와 닫힌 이슈의 개수를 탭별로 확인하고 전환할 수 있으며
원하는 상태의 이슈 목록을 빠르게 볼 수 있다.

Tasks

Task 2.1.1: 탭 UI 컴포넌트 구현 (‘열린 이슈’, ‘닫힌 이슈’)
Task 2.1.2: 탭별 카운트 API 호출 및 표시
Task 2.1.3: 탭 클릭 시 해당 리스트 필터링

Story 2.2: 이슈 목록 항목 UI

프로젝트 참여자는
각 이슈 항목에서 제목, 번호, 작성자, 타임스탬프, 레이블, 마일스톤 등의 정보를 볼 수 있고
이슈의 세부 내용을 한눈에 파악할 수 있다.

Tasks

Task 2.2.1: 이슈 아이콘(열림/닫힘) 컴포넌트 구현
Task 2.2.2: 이슈 컴포넌트 구현 (제목, 번호, 작성자·타임스탬프, 레이블, 마일스톤 표시)
Task 2.2.3: 이슈 항목 클릭 시 상세 페이지로 네비게이션

Epic 3: 이슈 필터

Story 3.1: 필터바 & 팝업 UI

이슈 검색 사용자는
필터 버튼과 텍스트폼을 통해 검색 조건을 설정하고
복잡한 조건의 이슈를 손쉽게 찾을 수 있다.

Tasks

Task 3.1.1: 좌측 [필터] 버튼 및 우측 텍스트폼 컴포넌트 구현
Task 3.1.2: 팝업 레이아웃 & 필터 옵션 목록 구현
Task 3.1.3: 팝업 옵션 클릭 시 팝업 닫기·텍스트폼 업데이트

Story 3.2: 텍스트폼 기반 필터 적용

이슈 검색 사용자는
텍스트폼 입력으로 필터 조건을 파싱하여 API에 전달하고
입력한 키워드 기반으로 결과를 정확하게 필터링할 수 있다.

Tasks

Task 3.2.1: 텍스트폼 입력값 파싱 로직 구현
Task 3.2.2: 이슈 목록 API 호출 시 쿼리 파라미터 연동
Task 3.2.3: 외부 클릭 시 팝업 닫기 처리

Story 3.3: 오른쪽 상단 필터 버튼 제공

이슈 검색 사용자는
담당자, 레이블, 마일스톤, 작성자 별로 팝업을 띄워 값을 선택하여
이슈 목록에 원하는 조건을 바로 적용할 수 있다.

Tasks

Task 3.3.1: ‘담당자’, ‘레이블’, ‘마일스톤’, ‘작성자’ 필터 버튼 UI 구현
Task 3.3.2: 각 필터 팝업 컴포넌트 구현
Task 3.3.3: 각 필터 팝업 내 옵션 항목들을 불러오는 로직 구현 및 화면에 표시
Task 3.3.4: 팝업 내 옵션 클릭 시 팝업 닫힘 및 해당 필터 적용 로직 구현
Task 3.3.5: 팝업 외 영역 클릭 시 팝업 닫히고 필터 미적용 처리
Task 3.3.6: 여러 필터 선택 시 조합 필터링 로직 구현

Story 3.4: 적용된 필터 초기화 및 전체 이슈 조회

이슈 검색 사용자는
필터 적용 시 보여지는 필터 초기화 버튼을 클릭했을 때
모든 필터가 초기화된 채 오픈된 모든 이슈를 다시 볼 수 있다.

Tasks

Task 3.4.1: 필터바와 이슈 목록 사이에 “현재의 검색 필터 및 정렬 지우기” 버튼 UI 구현
Task 3.4.2: 필터 적용 시 “현재의 검색 필터 및 정렬 지우기” 버튼이 등장하는 로직 구현
Task 3.4.3: 버튼 클릭 시 적용된 모든 필터 상태 초기화 로직 구현
Task 3.4.4: 초기화 후 오픈된 모든 이슈를 다시 로드하여 목록에 표시하는 API 호출 구현

Story 3.5: 필터링 후 결과 없음 상태 표시

이슈 검색 사용자는
필터 적용 결과가 없을 때 “검색과 일치하는 결과가 없습니다.” 메시지를 볼 수 있다.

Tasks

Task 3.5.1: 이슈 목록 영역에 빈 상태 컴포넌트(아이콘 + 안내 문구) UI 구현
Task 3.5.2: 필터 적용 시 API 응답 결과가 빈 배열일 때 빈 상태 컴포넌트 노출 로직 구현
Task 3.5.3: 필터가 변경되거나 초기화되면 빈 상태 컴포넌트 숨기기 처리

Story 3.6: 텍스트폼 비어 있을 때 전체 이슈 검색

이슈 검색 사용자는
텍스트폼의 모든 텍스트를 지우면 placeholder가 “Search all issues”로 바뀌고, Enter 키 입력 시 닫힌 이슈를 포함한 모든 이슈가 조회된다.

Tasks

Task 3.6.1: 텍스트폼 입력값이 빈 문자열일 때 placeholder를 “Search all issues”로 변경하는 UI 로직 구현
Task 3.6.2: Enter 키 이벤트 핸들러에서 입력값이 빈 경우 오픈·클로즈 모든 이슈를 조회하는 API 호출로 분기 처리
Task 3.6.3: 조회 결과를 이슈 목록에 반영하는 데이터 바인딩 구현

Epic 4: 이슈 다중 선택

Story 4.1: 체크박스 UI & 카운터

여러 이슈를 관리하는 사용자는
각 이슈에 체크박스를 통해 다중 선택하고 선택 수를 확인할 수 있으며
일괄 작업을 쉽게 수행할 수 있다.

Tasks

Task 4.1.1: 각 이슈 항목에 체크박스 추가
Task 4.1.2: 하나 이상 선택 시 상단 카운터·[상태 수정] 버튼 노출
Task 4.1.3: 전체 선택/해제 체크박스 토글

Story 4.2: 상태 일괄 수정 팝업

여러 이슈를 관리하는 사용자는
상태 수정 팝업에서 선택된 이슈를 일괄적으로 ‘열기’ 또는 ‘닫기’ 할 수 있으며
반복 작업 없이 빠르게 상태를 변경할 수 있다.

Tasks

Task 4.2.1: 팝업 UI 및 ‘열기’/‘닫기’ 옵션 버튼 구현
Task 4.2.2: 선택된 이슈 ID 목록 API 호출
Task 4.2.3: 팝업 옵션 클릭 시 즉시 상태 반영 및 UI 갱신

Epic 5: 새로운 이슈 작성

Task 5.0: 새로운 이슈 작성 화면 UI 구현

Story 5.1: 이슈 생성 폼

새로운 이슈를 등록하려는 사용자는
제목만 입력해도 완료 버튼이 활성화되는 폼을 제공받고
빠르게 새 이슈를 생성할 수 있다.

Tasks

Task 5.1.1: 제목 입력 인풋 컴포넌트 구현
Task 5.1.2: 제목 입력 시 완료 버튼 활성화 로직 구현
Task 5.1.3: 작성 취소 버튼 클릭 시 목록으로 라우팅

Story 5.2: 코멘트 영역 기능

코멘트를 남기는 사용자는
입력 중인 글자 수를 표시하고 파일 첨부 기능을 사용하여
코멘트를 작성할 때 실시간으로 정보와 이미지를 추가할 수 있다.

Tasks

Task 5.2.1: 입력 글자 수 표시 (2초 후 사라짐)
Task 5.2.2: 파일 첨부 버튼 및 업로드 로직 구현 (이미지 선택 → 서버 업로드 → 마크다운 삽입)

Story 5.3: 이슈 메타 정보(담당자·레이블·마일스톤) 설정

사용자는 사이드바에서 해당 이슈의 담당자, 레이블, 마일스톤을 선택하여 즉시 설정할 수 있어야 한다.

Tasks

Task 5.3.1: 사이드바에 ‘담당자’, ‘레이블’, ‘마일스톤’ 섹션과 각 섹션의 추가(+) 버튼 UI 구현
Task 5.3.2: + 버튼 클릭 시 팝업 컴포넌트 띄우기
Task 5.3.3: 팝업 내 옵션 클릭 시 선택값을 사이드바에 즉시 반영하는 로직 구현
Task 5.3.4: 팝업 외 영역 클릭 시 팝업을 닫고 변경사항 미반영 처리
Task 5.3.5: 다중/단일 선택 규칙에 따른 체크박스 토글 로직 구현
Task 5.3.6: 초기 상태(‘선택 없음’) 표시 및 선택 초기화 로직 구현

Epic 6: 이슈 상세

Story 6.1: 제목 편집 & 상태 토글

이슈 상세를 관리하는 사용자는
제목을 인라인으로 편집하고 이슈 상태를 토글할 수 있으며
페이지 이동 없이 즉시 수정 내용을 반영할 수 있다.

Tasks

Task 6.1.1: 제목 편집 버튼 클릭 시 인라인 편집 모드 전환
Task 6.1.2: 편집 완료/취소 버튼 동작 구현
Task 6.1.3: 이슈 닫기/다시 열기 버튼 UI 및 상태 반영

Story 6.2: 코멘트 CRUD

코멘트를 관리하는 사용자는
댓글 작성, 편집, 삭제 기능을 동일한 폼에서 사용할 수 있으며
일관된 UI로 코멘트를 효율적으로 조작할 수 있다.

Tasks

Task 6.2.1: 댓글 작성 폼 구현 (완료 활성화 조건)
Task 6.2.2: 댓글 목록 렌더링 컴포넌트 구현
Task 6.2.3: 댓글 편집 모드 토글 및 반영 로직 구현
Task 6.2.4: 파일 첨부 및 글자 수 표시 기능 재사용

Epic 7: 레이블 목록

Story 7.1: 레이블 관리 UI

레이블을 설정하려는 사용자는
레이블 목록을 보고 편집과 삭제 기능을 사용할 수 있으며
프로젝트 내 이슈를 분류하고 관리할 수 있다.

Tasks

Task 7.1.1: 레이블 목록 화면 라우팅 구현
Task 7.1.2: 레이블 이름·설명·색상 프리뷰 컴포넌트 구현
Task 7.1.3: 편집/삭제 버튼 UI 구현

Story 7.2: 레이블 생성·편집

새로운 레이블을 추가하려는 사용자는
이름, 설명, 배경색, 텍스트색을 입력하고 검증받으며
유효한 레이블을 생성하거나 수정할 수 있다.

Tasks

Task 7.2.1: 레이블 추가 영역 토글 구현
Task 7.2.2: 입력 폼 검증 로직 구현 (이름, 설명, 배경색, 텍스트색)
Task 7.2.3: 서버 연동 API 호출 및 목록 갱신 로직 구현
Task 7.2.4: 삭제 시 확인 모달 및 요청 처리 구현

Epic 8: 마일스톤 목록

Story 8.1: 마일스톤 관리 UI

마일스톤을 관리하려는 사용자는
열린/닫힌 마일스톤을 탭별로 확인하고 생성/편집/삭제할 수 있으며
프로젝트 진행 상황을 체계적으로 추적할 수 있다.

Tasks

Task 8.1.1: 마일스톤 목록 화면 라우팅 구현
Task 8.1.2: 탭별 카운트 표시 구현 (열린/닫힌)
Task 8.1.3: 제목·완료일·설명·진행률 컴포넌트 구현

Story 8.2: 마일스톤 생성·편집

새로운 마일스톤을 추가하려는 사용자는
이름, 완료일, 설명을 입력하고 유효성 검사를 거쳐
신뢰성 있는 마일스톤을 생성하거나 업데이트할 수 있다.

Tasks

Task 8.2.1: 마일스톤 추가 영역 토글 구현
Task 8.2.2: 완료일 입력 포맷 검증 로직 구현 (YYYY.MM.DD)
Task 8.2.3: 서버 연동 API 호출 및 목록 갱신 로직 구현
Task 8.2.4: 삭제·편집 토글 및 처리 구현

Epic 9: 다크 모드 토글

Story 9.1: 테마 전환 버튼

화면 테마를 전환하려는 사용자는
다크 모드 ON/OFF 토글 버튼을 통해 테마를 변경하고
작업 환경에 맞는 색상 모드를 선택할 수 있다.

Tasks

Task 9.1.1: 헤더/사이드바에 토글 버튼 UI 배치
Task 9.1.2: 로컬 스토리지 기반 사용자 설정 저장 구현
Task 9.1.3: 컬러 팔레트 적용 및 스타일 전환 로직 구현

⚠️ GitHub.com Fallback ⚠️