ID: key_26_22_05_25_16_02_00_00000 Created date: 5월 25 2026 월요일, 22주 16:02
연관 문서
Index > 개발 아이템 정리 Jira 기능 정리
UI 개발 개발 아이템
Phase 1: 핵심 UI 개발 (필수 구현)
1. 인증 페이지
- 관련 기능: 인증/인가 시스템
- 개발 항목:
- 로그인 폼 (이메일, 비밀번호)
- 회원가입 폼
- 비밀번호 재설정 폼
- OAuth 연동 버튼 (GitHub, Google)
- 폼 검증 및 에러 메시지
2. 프로젝트 및 대시보드
- 관련 기능: 프로젝트 관리, 기본 대시보드
- 개발 항목:
- 프로젝트 목록 페이지
- 프로젝트 생성 모달
- 개인 대시보드 (나에게 할당된 이슈, 최근 활동)
- 프로젝트별 대시보드
- 네비게이션 사이드바
3. 이슈 관리 UI
- 관련 기능: 이슈 및 업무 관리 모듈
- 개발 항목:
- 이슈 생성 모달/페이지
- 제목, 설명, 이슈 타입, 우선순위, 담당자, 스토리 포인트 입력
- 마크다운 에디터
- 이슈 상세 페이지
- 이슈 정보 표시
- 상태 변경 버튼
- 담당자/보고자 표시
- 시작일/마감일
- 이슈 수정 인라인 편집
- 이슈 목록 (테이블 형식)
- 이슈 생성 모달/페이지
4. 칸반 보드
- 관련 기능: 칸반 보드
- 개발 항목:
- 칼럼별 카드 레이아웃 (To Do, In Progress, In Review, Done)
- Drag & Drop 구현 (@hello-pangea/dnd 또는 react-beautiful-dnd)
- 카드 정렬 (Lexorank 기반)
- WIP 제한 시각화 (초과 시 색상 경고)
- 카드 클릭 시 상세 정보 모달
5. 이슈 상세 페이지 - 댓글
- 관련 기능: 협업 및 커뮤니케이션 모듈
- 개발 항목:
- 댓글 목록 표시 (시간순)
- 댓글 작성 폼 (마크다운 에디터)
- 멘션(@) 기능 (자동완성)
- 댓글 수정/삭제 버튼
- 댓글 반응(이모지) UI
6. 검색 및 필터링
- 관련 기능: 검색 & 필터링 모듈
- 개발 항목:
- 이슈 목록 필터링 UI
- 상태, 우선순위, 담당자, 보고자 필터
- 날짜 범위 선택
- 검색 바 (제목, 설명 검색)
- 필터 저장 기능
- 이슈 목록 필터링 UI
7. 프로젝트 설정
- 관련 기능: 프로젝트 & 스프린트 관리
- 개발 항목:
- 프로젝트 기본 정보 수정
- 프로젝트 멤버 관리 (추가/제거)
- 멤버 역할 할당
- 프로젝트 공개/비공개 설정
Phase 2: 고급 UI 개발 (추후 구현)
1. 로드맵 & 간트 차트
- 관련 기능: 로드맵 및 간트 차트
- 개발 항목:
- 간트 차트 컴포넌트 (react-gantt-chart 또는 custom)
- 이슈 바 드래그로 일정 수정
- 의존성 화살표 표시
- 줌인/줌아웃 (주, 월, 분기)
- 마일스톤 표시
2. 리포팅 대시보드
- 관련 기능: 대시보드 및 리포팅 모듈
- 개발 항목:
- 속도 리포트 차트 (선 그래프)
- 번다운 차트 (선 그래프)
- CFD 차트 (영역 차트)
- 이슈 분포 차트 (파이, 도넛)
- 리포트 다운로드 (PDF, CSV)
3. 커스텀 대시보드
- 관련 기능: 사용자 정의 대시보드
- 개발 항목:
- 위젯 라이브러리 (할당된 이슈, 최근 활동, 진행률 등)
- 그리드 기반 레이아웃 (react-grid-layout)
- 드래그 앤 드롭으로 위젯 배치
- 위젯별 설정 패널
- 대시보드 저장 및 로드
4. Wiki 에디터
- 관련 기능: 업무 지식 정리 모듈
- 개발 항목:
- 마크다운 에디터 (Milkdown 또는 Editor.js)
- 실시간 프리뷰
- 이슈 임베드 (자동 링크 및 상태 배지)
- 문서 트리 구조 네비게이션
- 문서 백링크 표시
5. 고급 검색 UI
- 관련 기능: 고급 검색 엔진
- 개발 항목:
- JQL 쿼리 에디터 (구문 하이라이팅)
- 쿼리 작성 가이드
- 저장된 필터 목록
- 빠른 검색 템플릿
6. 버전 및 마일스톤 UI
- 관련 기능: 버전 및 마일스톤 관리
- 개발 항목:
- 버전 목록 및 생성 UI
- 버전 상태 관리 (미출시 → 출시 → 아카이브)
- 마일스톤 타임라인 시각화
- 마일스톤 진행률 게이지
7. 사용자 관리 UI
- 관련 기능: 사용자 관리 모듈
- 개발 항목:
- 사용자 초대 모달
- 사용자 목록 및 역할 관리
- 그룹/팀 관리 페이지
- 사용자 프로필 설정 페이지
8. 활동 피드
- 관련 기능: 활동 피드
- 개발 항목:
- 활동 목록 표시 (시간순)
- 활동 필터링 (이슈 생성, 상태 변경, 댓글 등)
- 무한 스크롤 또는 페이지네이션
- 실시간 업데이트 (WebSocket)
UI 기술 스택 고려사항
주요 기술
- 프레임워크: React 18+ / Vue 3 / Angular
- 상태 관리: Redux / Zustand / Pinia
- UI 컴포넌트: Material-UI / Ant Design / Chakra UI
- 차트: Recharts / Chart.js / D3.js
- 드래그 앤 드롭: @hello-pangea/dnd / react-beautiful-dnd
- 에디터: Milkdown / Editor.js / TipTap
- 스타일: Tailwind CSS / CSS Modules
주요 설계 원칙
- 반응형 디자인: 모바일, 태블릿, 데스크톱 대응
- 접근성: WCAG 2.1 AA 표준
- 성능: 코드 스플리팅, 레이지 로딩
- UX: 직관적 네비게이션, 명확한 피드백
- 다국어: i18n 지원 (한국어, 영어 최소)
연관 메일