🎯 Taskify

팀 협업을 위한 Kanban 보드 스타일 일정 관리 웹 애플리케이션

---

📝 개요

Taskify는 직관적인 드래그 앤 드롭 인터페이스를 제공하는 Kanban 보드 스타일의 협업 도구입니다.

팀원들과 함께 프로젝트를 체계적으로 관리하고, 실시간으로 업무 진행 상황을 공유할 수 있습니다. 개인 프로젝트부터 팀 협업까지, 효율적인 일정 관리를 위한 모든 기능을 제공합니다.

🚀 서비스 링크

---

🚀 주요 기능

📊 Framer Motion 랜딩페이지

Framer Motion 적용한 랜딩페이지

📊 대시보드 관리

프로젝트별 대시보드 생성

로그인 -> 대시보드 생성

🃏 Kanban 보드

드래그 앤 드롭으로 직관적인 업무 흐름 관리

컬럼, 카드 생성

카드 드래그 앤 드롭

👥 실시간 협업

팀원 초대, 댓글 시스템, 실시간 업데이트

팀원 초대

댓글 시스템

📱 반응형 디자인

모바일, 태블릿, 데스크톱 완벽 지원

반응형

세부 기능:

• ✅ 카드 시스템: 담당자, 마감일, 태그, 이미지, 상세 설명
• 🖱️ 드래그 앤 드롭: 직관적인 카드 이동 및 상태 변경
• 💬 댓글 시스템: 카드별 실시간 소통
• 🔔 초대 관리: 대시보드 멤버 초대 및 권한 관리
• 📷 이미지 업로드: 카드별 첨부 파일 지원
• 🎨 커스텀 테마: 대시보드별 개성있는 색상 설정

---

⚙️ API 흐름

💎 주요 기술 스택

⚙️ 기술 스택

기술 이름	선정 이유
	컴포넌트 기반 설계 방식인 리액트 라이브러리를 활용하여 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