공통 과제: 칸반 기반 태스크 관리 대시보드
팀원: 김용수, 최원희, 이민우
저장소: [GitHub] https://github.com/Duturi/flowdash
배포: [GitHub Pages] https://duturi.github.io/flowdash/
본 프로젝트는 요구사항을 기반으로 칸반 구조의 작업 보드로
기간 필터, 검색/정렬, 통계 및 달성률을 제공하는 태스크 관리 대시보드 구현 과제이다.
CRUD, 테마설정 및 UX요소를 포함하여, 팀 단위 협업을 통해 설계 및 구현을 진행했다.
| 이름 | 역할 | 주요 담당 업무 | 비고 |
|---|---|---|---|
| 김용수 | UX / Logic | 인사말 / 닉네임 / 모달 | |
| 최원희 | UX / Theme / Logic | 테마 / 기간 필터 / 정렬 | |
| 이민우 | UX / UI / Logic | 통계 계산 / 초기화 / 반응형 |
- JS 역할 분담, JS 일부 기능 구현 (다크모드, 할 일board에 todo 추가), 전체 레이아웃 설계
- 반응형 레이아웃, 시간대별 인사말 기능 추가, 닉네임 변경기능 추가,board 카운트 숫자 증가기능 추가, 설정 값 고르는 옵션 선택시 ui생성,스토리지 초기화 하는 데이터 초기화 버튼 활성화
- 카테고리 마다 카운트 숫자 올라가능 기능 추가,달성률 퍼센티지로 나오는 기능 추가, board에 있는 todo 개별 삭제 버튼 클릭 시 모달 생성
- 기간,상태,우선순위,정렬,검색을 나누기 위한 필터 작업, board에서 우선순위 상태 다루는 코드 수정
- 디자인 추가, 오탈자 수정, 코드 정리
- 브랜치 전략: main / dev / feature/*
- PR 단위: 기능 1개 기준
- PR 전 rebase 필수
- 작업 전 항상 pull 받기
- push, pull 해야할떄, 변동 사항 있을때 원할한 소통
flowdash/
├─ README.md
├─ index.html
├─ css/
│ ├─ reset.css
│ ├─ base.css
│ ├─ components.css
│ ├─ theme.css
│ ├─ todo-board.css
│ └─ responsive.css
└─ js/
├─ filter.js
├─ nickname.js
├─ storages.js
└─ todo-board.js
└─ modal.js
- filter.js: 필터/ 정렬/ 검색 기능
- nickname.js: 닉네임/ 시간대별 인사말 기능
- storages.js: Light / Dark 테마 모드 기능
- todo-board.js: 통계/ 초기화/ 투두 칸반 보드 영역
- modal.js:각종 모달 상태 기능
User Action -> loadTodos() 설정 된 값을 불러온다. 없다면 새로운 값을 생성한다 -> saveTodos() 유저가 취했던 액션들을 저장한다. -> applyFilter(); 데이터를 날짜 -> 상태 -> 우선순위 -> 정렬 -> 검색 순으로 필터한다. -> render(); 그 선택한 값들의 todo를 보여준다.
- status 기반 보드 분리 → 상태 필터 제거
- 모든 날짜 데이터는 timestamp(number)로 통일
- 기간 필터 → 정렬 → 검색 순서의 고정 파이프라인 적용
- 통계는 기간 필터와 무관하게 전체 Todo 기준으로 계산
- CRUD 전 기능
- TODO / DOING / DONE 칸반 보드
- 기간 필터 / 검색 / 정렬
- 통계 대시보드 및 달성률
- 라이트 / 다크 테마
- 인사말 및 닉네임 UX
- 반응형 레이아웃
- 필수 요구사항: 충족
- [✔] Todo CRUD 기능이 모두 정상 동작한다 (생성 / 조회 / 수정 / 삭제)
- [✔] TODO / DOING / DONE 상태별 칸반 보드가 분리되어 렌더링된다
- [✔] status 변경 시 Todo가 즉시 해당 보드로 이동한다
- [✔] DONE 전환 시 completedAt이 기록되며, 해제 시 null로 초기화된다
- [✔] 우선순위(HIGH / MID / LOW)를 설정 및 수정할 수 있다
- [✔] 기간 필터(전체 / 오늘 / 7일)가 createdAt 기준으로 동작한다
- [✔] 필터 적용 순서(기간 → 정렬 → 검색)가 항상 유지된다
- [✔] 제목/내용 기준 검색이 필터 결과 내에서 정상 동작한다
- [✔] 제목 기준 오름차순 / 내림차순 정렬이 가능하다
- [✔] 통계 대시보드에 전체 / TODO / DOING / DONE / 달성률이 표시된다
- [✔] 달성률은 (DONE / 전체) * 100 기준으로 계산된다
- [✔] 전체 초기화 시 Todo 데이터만 삭제되며 확인 절차가 존재한다
- [✔] 테마(Light / Dark) 전환이 가능하며 LocalStorage에 저장된다
- [✔] 인사말이 시간대 기준으로 표시된다
- [✔] 닉네임을 인라인으로 수정할 수 있으며 LocalStorage에 저장된다
- [✔] 새로고침 후에도 Todo / 테마 / 닉네임 상태가 유지된다
- [✔] 반응형 레이아웃이 Mobile / Tablet / Desktop 기준으로 동작한다
- [✔] 콘솔에 치명적인 에러가 발생하지 않는다
- 가산 요소: (해당 시 작성)
- [✔] 디자인 커스터마이징
- [ ] UX 개선 아이디어 적용
- [✔] 예외 처리 강화 (빈 상태, 입력 검증 등)
- [ ] 추가 기능 구현 (명세 외)
- 증상: 닉네임 클릭 시 수정모드로 진입할 때, 입력창에 커서가 생기지 않아 즉시 타이핑 불가능 현상
- 원인: input 요소가 DOM에 추가되었을뿐, 브라우저 입력 focus에 받지 못함
- 해결: input.focus() 메서드를 호출하여 입력 가능한 상태로 전환
- 회고: UX 향상을 위해 UI 생성 시 포커스 제어의 중요성을 학습했다.
- 증상: 새로운 할 일 ui가 만들어지고 개별 삭제,수정을 하는데 하나밖에 선택이 안됨.
- 원인: querySelector로 찾아와서 문제 발생
- 해결: 같은 클래스의 할 일을 querySelectorAll 로 찾아온다음 forEach로 순회하며 선택하는 방법이었다.
- 회고: 이론은 알고있었지만 막상 코드를 짤때 생각이 나지 않았다.. 앞으로는 먼저 확인하고 진행 할 것 같다.
- 증상: 완료 board에 보냈을 때 시간 찍히는 걸 (완료 : )가 나오게 하고싶었는데 자꾸 (수정 :)으로 찍힘
- 원인: 수정 모달에서 status를 "done"으로 바꿀 때, completedAt(완료 시간)에 값을 넣어주는 게 없었기 때문
- 해결: 수정 모달에서 저장하는 버튼에 값을 주고 === "done"이면 완료 시간을 나타내주라고 삼항 연산자 사용
- 회고: 객체에 값을 주고, 객체로 삼항연산자를 사용하여 값을 뽑아내는 걸 원활하게 할 수 있을 거 같다.
- 각자 해야할 일을 정하고 진행했고 그 작업이 끝나면 스스로 다음 할 일을 진행했다.
- 실력이 많이 부족해 미흡할지 몰라도 끝까지 하려고 노력했다.
- 사용자가 볼 때 눈이 즐거워 보이도록 디자인 했다.
- 요구사항과 데모 시연 영상을 꼼꼼히 보지 못하고 마음만 급한 상태에서 진행하다보니 수정을 자주하게 되었고 수정을 자주하니 코드가 꼬이는 일이 많았던것 같다.
- 초반에 파일 이름이 대소문자 구분을 하지못하여서 충돌 현상이 있었는데 파일 삭제 후 해결했다.
- git 사용법이 미숙하여 데이터를 최신화하지 않아서, 최신화되지 않은 파일을 업로드 하여 팀원들에게 혼선을 주었다.
- 상태 변경 로직 테스트 자동화
- 드래그 앤 드롭 UX 도입
- 완료 보드에 이동시 취소선
- 차별화된 UI/UX 구현
Live Server 실행 또는 index.html 직접 실행
누군가에겐 쉬울수도 있는 작업이었을지도 모른다. 처음으로 팀원과 합을 맞추며 기능이 작동하는 페이지를 제작한게 놀랍고 신기하기만 하다. 우리 팀원분들은 생각이 다를 수 도 있지만 적어도 나는 실력이 많이 부족하구나를 뼈저리게 느꼈고, 협업을 통해 코드관리,상태정리 등이 중요하다고 생각했다.