TaskFlow

🛠️ 개발 가이드

실제 TaskGrid 제품과 동일한 화면·인터랙션을, 구글 시트 연동 없이 브라우저 안에서 재현한 데모예요.

기술 스택

핵심 구현 포인트

• 칸반 · 간트 · 테이블 3가지 보기 모드가 같은 상태(state)를 공유해서, 뷰만 바꿔도 데이터는 그대로예요.
• 드래그 앤 드롭은 외부 라이브러리 없이 HTML5 dataTransfer API만으로 구현했어요.
• Excel 가져오기/내보내기는 서버 없이 브라우저에서 직접 CSV를 만들고 파싱해요.
• 프로젝트·태스크 전체를 하나의 localStorage 키에 JSON으로 저장해요.

이렇게 만들면 돼요

1. 프로젝트/태스크/서브태스크의 데이터 모델(shape)을 먼저 설계해요.
2. 칸반 컬럼은 태스크 배열을 status 값으로 필터링해서 그려요.
3. 드래그 시작 시 태스크 id를 dataTransfer에 담고, 드롭 위치의 컬럼 status로 갱신해요.
4. 간트·테이블 뷰는 같은 배열을 다른 레이아웃으로 그리기만 하면 완성이에요.

참고 파일