Overview
프로젝트 개요
CHECKTASK는 대학생이 개인 과제와 팀 과제를 한곳에서 관리할 수 있도록 만든 과제 관리 플랫폼입니다.
개인 과제와 팀 과제를 구분해 관리하고, 캘린더와 세부 TASK를 통해 마감일과 진행 상황을 한눈에 확인할 수 있습니다.
Features
주요 기능
캘린더 기반 과제 관리
과제와 세부 TASK의 마감일을 월간 캘린더에서 확인하고 관리할 수 있습니다.
개인/팀 과제 상세 관리
과제별 세부 TASK, 자료, 마감일, 완료 상태를 함께 관리할 수 있습니다.
팀 협업 관리
초대 코드, 팀원, 담당자, 자료, 회의록, 커뮤니케이션 링크를 한곳에서 관리할 수 있습니다.
Contribution
주요 기여
홈 대시보드와 캘린더
과제 마감일을 캘린더와 리스트에서 함께 확인하고, 폴더 필터링과 정렬 흐름을 통해 과제를 빠르게 파악할 수 있도록 구현했습니다.
드래그 앤 드롭 우선순위
dnd-kit으로 과제 카드 순서를 바꿀 수 있게 만들고, 우선순위 정렬에서만 드래그가 동작하도록 제한해 사용자의 혼란을 줄였습니다.
로그인
자체 로그인과 카카오 OAuth를 구현하고, 인증 상태에 따른 사용자 진입 흐름을 구성했습니다.
Troubleshooting
대표 문제 해결 사례
Problem
아이패드에서 접속했을 때 화면 너비 기준 미디어쿼리 때문에 태블릿 전용 뷰가 아니라 데스크톱 뷰가 렌더링되는 문제가 있었습니다.
Approach
CSS 반응형 분기만으로는 실제 기기를 구분하기 어렵다고 판단해, Next.js의 userAgent 유틸로 서버에서 device.type을 판별하도록 변경했습니다.
Result
모바일, 태블릿, 데스크톱 환경에 맞는 뷰를 더 정확하게 분기할 수 있었고, 아이패드에서도 의도한 태블릿 화면을 제공할 수 있게 했습니다.
Reflection
배운 점
- 프론트엔드 리드 역할에서는 직접 코드를 많이 작성하는 것만큼 폴더 구조, 상태 관리 기준, 코드 컨벤션을 먼저 잡는 일이 중요했습니다.
- 팀에서 이미 정한 패턴이 있다면 새로운 구현도 그 패턴과 일관되게 확장하는 것이 유지보수에 더 유리하다는 점을 배웠습니다.