jtodo는 개인과 그룹이 할 일을 효율적으로 관리할 수 있도록 돕는 웹 애플리케이션입니다.
사용자들은 할 일을 쉽게 추가하고 관리하며 완료할 수 있습니다.

특히 협업이 필요한 그룹 작업의 경우, 팀원 간 원활한 커뮤니케이션을 위해 아래 기능을 추가로 지원합니다.
🔹 실시간 업데이트
🔹 담당자 라벨링
🔹 할 일 달성률에 따른 이미지 제공

또한, 관리자 센터를 제공하여 전체 회원과 그룹을 효과적으로 관리할 수 있습니다.
개별 회원의 목표와 할 일을 포함해 그룹의 목표 및 게시글까지 종합적으로 관리할 수 있어, 서비스 운영과 사용자 경험 개선에 큰 도움을 제공합니다.

🔹 프로젝트 미리보기

유저 서비스 스크린샷 보기

관리자 서비스 스크린샷 보기

---

📚 목차

• 🔍 주요 기능 살펴보기
  • 유저 서비스
  • 어드민 서비스스
• 기능별 화면 소개
• 프로젝트 수행절차 및 구조
• 🚀 기술 스택
• 업데이트 예정(v.2.0)
• 👥 팀 소개
• 🎯 트러블 슈팅 기록
• 🎥 시연 영상
• 🔗 링크

🔍 주요 기능 살펴보기

유저 서비스

기능	설명	비고
회원가입 & 로그인	서비스 회원 가입 및 로그인	이메일, 닉네임 중복 검사
개인 대시보드	할 일 관리, 진행 사항 그래프, 목표 목록	목표 상세 페이지로 이동,할 일의 완료 처리 및 수정 삭제 기능, 노트 미리보기 및 작성 페이지로 이동
개인 목표	할 일 처리 및 할일 수정, 삭제 노트 수정, 작성, 임시저장	할 일의 완료 처리 및 수정 삭제 기능, 노트 미리보기 및 작성 페이지로 이동
그룹 대시보드	그룹 정보, 그룹 구성원, 그룹 목표	그룹장 권한인 경우 이름과 초대코드 변경 기능, 그룹장 변경 및 구성원 관리 기능
그룹 목표	목표 확인, 진행률 그래프, 노트 모아보기, 그룹 목표 내 나의 할일 목록	목표 관리, 할 일 관리 기능
노트	목표마다의 노트 목록	노트 슬라이드, 노트 편집기능, 자동 임시 저장 기능

어드민 서비스

기능	설명	비고
회원 관리	회원 목록 검색 및 관리	회원 이름, 이메일 검색 필터링 기능, 목록 페이지네이션 기능, 회원 상세 관리 페이지로 이동
회원 상세 관리	회원 정보, 소속 그룹 정보, 개인 목표 목록	회원 정보 수정 및 그룹 정보 수성기능, 목표별 진행률 확인
그룹 관리	그룹 목록 검색 및 관리	그룹이름, 그룹장 검색 필터링 기능, 목록 페이지네이션 기능, 상세 그룹 관리 페이지 이동
그룹 상세 관리	그룹 정보, 그룹 구성원 관리,그룹 목표 목록	그룹 정보 수정 및 그룹장 변경 기능, 구성원 관리 기능, 목표별 진행률 확인
개인 게시글 관리	개인의 목표 게시글 검색 및 관리	목표 게시글 키워드, 작성자 검색 필터링, 목록 페이지네이션, 목표의 할 일 상세 관리 페이지로 이동
그룹 게시글 관리	그룹의 목표 게시글 검색 및 관리	목표 게시글 키워드, 그룹 이름, 작성자 검색 필터링, 목록 페이지네이션, 목표의 할 일 상세 관리 페이지로 이동

기능별 화면 소개

프로젝트 수행절차 및 구조

• ✅ 기술 스택 선택

• 최신 기술을 사용한 프로젝트를 하고 싶은 마음

• 주은 강사님과 멘토쌤의 피드백 기반

기술 스택

• next.js 14 App Router
• tanstack query v5
• typeScript
• tailwind css
• FSD 아키텍처 사용
• 모노레포 도입을 위한 터보레포
  • ⇒ 어드민 서비스와 우저 서비스를 하나의 레포로 관리해보자.
• 도커를 이용한 EC2 인스턴스 배포

✅ 피그마로 확장하고 싶은 아이디어 정리

✅슬리드 투두 기획안 기반의 기획문서 노션 작성

✅ 디자이너님과 백엔드 두 분과의 활발한 디스코드 회의와 코멘트

✅ 그 외

prettierrc 공유

{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120,
  "parser": "babel",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

• Git Wiki에 컨벤션 정리

  

작업을 시작하며

PR과 ISSUE 활발한 사용

wiki에 컨벤션 정리

🚀 기술 스택

• 프론트엔드: Next.js 14 (App Router), TailwindCSS
• 백엔드: Node.js, Express, MongoDB
• 백엔드 통신: Axios
• 상태 관리: TanStack Query v5
• CI/CD: GitHub Actions, Docker 모노레포 관리: Yarn Workspaces, Turborepo

업데이트 예정(v.2.0)

• 현재는 개발 효율성을 위해 클라이언트 측 쿠키로 토큰을 관리하고 있습니다.
  향후 서비스 규모 확장과 보안 요구사항 증가에 따라 토큰 관리를 서버 측으로 전환할 계획입니다.
  
• 실시간 알림/채팅 서비스를 추가 할 계획입니다.
• 주요 기능에 대한 기능 업데이트 시 테스트 코드를 추가하려고 합니다.

👥 팀 소개

우리 jeil(제일) 팀 구성원의 프로젝트의 역할을 소개합니다.

이준영	최지영	안주연	유재영	신정섭	김은지
팀 리더 / 프론트엔드 개발자	프론트엔드 개발자	프론트엔드 개발자	백엔드 개발자	백엔드 개발자	디자이너
GitHub · LinkedIn	GitHub · LinkedIn	GitHub · LinkedIn	GitHub · LinkedIn	GitHub · LinkedIn	GitHub · LinkedIn

-- or 아래 간단 ver ---

🧑‍💻안주연 - @aajy 📧 aajy.000@gmail.com
🧑‍💻이준영 - @Dragonite-Lee 📧 email@example.com
🧑‍💻최지영 - @Dragonite-Lee 📧 email@example.com

🎯 트러블 슈팅 기록

• middleware를 사용하면서
• axios를 사용하면서
• tanstack query를 사용하면서

🎥 시연 영상

🔗 링크

• 라이브 데모
• 기술 문서
• API 명세

- 당신의 생산성을 편리하게 높이는 방법 ⚡