Taskify는 직관적인 드래그 앤 드롭 인터페이스를 제공하는 Kanban 보드 스타일의 협업 도구입니다.
팀원들과 함께 프로젝트를 체계적으로 관리하고, 실시간으로 업무 진행 상황을 공유할 수 있습니다. 개인 프로젝트부터 팀 협업까지, 효율적인 일정 관리를 위한 모든 기능을 제공합니다.
🚀 서비스 링크
Framer Motion 적용한 랜딩페이지
프로젝트별 대시보드 생성
로그인 -> 대시보드 생성
드래그 앤 드롭으로 직관적인 업무 흐름 관리
컬럼, 카드 생성
카드 드래그 앤 드롭
팀원 초대, 댓글 시스템, 실시간 업데이트
팀원 초대
댓글 시스템
모바일, 태블릿, 데스크톱 완벽 지원
반응형
세부 기능:
- ✅ 카드 시스템: 담당자, 마감일, 태그, 이미지, 상세 설명
- 🖱️ 드래그 앤 드롭: 직관적인 카드 이동 및 상태 변경
- 💬 댓글 시스템: 카드별 실시간 소통
- 🔔 초대 관리: 대시보드 멤버 초대 및 권한 관리
- 📷 이미지 업로드: 카드별 첨부 파일 지원
- 🎨 커스텀 테마: 대시보드별 개성있는 색상 설정
| 기술 이름 | 선정 이유 |
|---|---|
 |
컴포넌트 기반 설계 방식인 리액트 라이브러리를 활용하여 SSR과 CSR를 혼합해서 사용하기 위해 선정한 프레임워크입니다. |
 |
Props 타입 지정으로 인한 런타임 오류 감소, VSCode 자동 완성 기능 등 타입 안정성을 통한 코드 품질 개선을 위해 선정했습니다. |
 |
UI 상태와 서버 상태를 분리하고, API 데이터에 대한 Promise를 집약적으로 관리하기 위해 선정했습니다. |
 |
Axios instance의 interceptor 기능을 통한 중복 코드 최소화 등을 위해 선정했습니다. |
 |
폼의 상태를 집약적으로 관리하기 위해 선정했습니다. |
 |
폼의 유효성 정의 및 타입 추출이 용이하고, API request 타입 정의 및 safeParse() 메소드를 통한 응답 데이터 타입 검증을 위해 선정했습니다. |
 |
부드러운 애니메이션과 인터랙션을 통한 사용자 경험 향상을 위해 선정했습니다. |
 |
유틸리티 클래스 사용으로 클래스 네이밍 고민 감소, 디자인 시스템이 미흡할 시 유연한 대응이 가능하기에 선정했습니다. |
 |
Next.js와의 완벽한 통합 및 소규모 웹 애플리케이션에서 무료 플랜을 제공해주기 때문에 선정했습니다. |
📂src
┣ 📜middleware.ts
┣ 📂apis
┃ ┣ 📂auth
┃ ┃ ┣ 📜index.ts
┃ ┃ ┣ 📜queries.ts
┃ ┃ ┗ 📜types.ts
┃ ┗ ...
┣ 📂app
┃ ┣ 📜globals.css
┃ ┣ 📜layout.tsx
┃ ┣ 📂(after-login)
┃ ┃ ┣ 📂mydashboard
┃ ┃ ┗ ...
┃ ┗ 📂(before-login)
┃ ┣ 📂(auth)
┃ ┃ ┗ 📂login
┃ ┗ ...
┣ 📂assets
┣ 📂components
┃ ┣ 📂auth
┃ ┣ 📂ui
┃ ┗ ...
┣ 📂types
┃ ┗ 📜common.ts
┗ 📂utils