간트차트 만들기 - 1. 프로젝트 설계

간트차트는 프로젝트의 일정관리를 위해서 작성하는 바형태의 그래프이다.
이미지처럼 왼쪽에 과업과 날짜를 기입하고 오른쪽에 날짜를 바형태로 표시한다.

타고난 J 라 계획+일정짜는 것을 좋아하는데,
간트차트를 만들려면 엑셀로 한땀한땀만들거나 돈을 내고 서비스를 이용해야한다.
엑셀로 만드는 것은 너무 번거로워서 웹사이트로 만들어보려고 한다.

[STACK]

• vite
• react, react-query, typescript, zustand
• styled-components
• supabase

[기능]

[phase1]

• 일감 등록/수정
• list
  • 등록된 일감을 바그래프로 확인 가능.
  • 등록된 날짜가 지나면 바그래프의 색상이 달라짐
  • 등록된 일감은 상세일정으로 나눠서 표시할 수 있음.
  • 일감을 완료시킬 수 있음.
• history
  - 수정 날짜와 수정내역을 확인할 수 있음
• filter
  - 미완료/완료된 일감을 구분하여 확인 가능

[phase2]

• excel 다운로드
• excel을 email 로 발송

[phase3]

• 여러 프로젝트를 만들고 프로젝트마다 다른 사람을 초대할 수 있음.
• history
  - 수정한 사람 표시
• 로그인, 회원가입

[프로젝트 구조]

	npm create vite@latest

npm 을 이용하여 Vite + React + Typescript 로 Scaffolding 하였다.

src/
│   ├── assets/ 			# 이미지, 폰트 등 정적 리소스
│   ├── components/			# 리액트 UI 컴포넌트
│   ├── env/				# 환경 변수 위치
│   ├── model/				# 타입 정의 
│   ├── pages/				# 페이지 컴포넌트
│   ├── pipe/				# 데이터 변환을 위한 코드 
│   ├── sevice/				# 외부 API 호출, 비즈니스 로직과 관련된 코드
│   ├── store/				# 상태관리를 위한 파일 
│   ├── App.tsx
│   └── main.tsx
├── package.json
└── tsconfig.json

그 외에 미들웨어, hook 폴더 등 이후에 폴더가 추가되면 프로젝트 구조도를 업데이트 할 예정이다 .