jtodo는 계획형 j처럼 개인/그룹이 할 일을 효율적으로 관리하는 웹 애플리케이션입니다.
사용자들은 할 일을 쉽게 추가하고 관리하며 완료할 수 있습니다.

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

또한, 관리자 센터를 제공하여 전체 회원과 그룹을 효과적으로 관리할 수 있습니다.
개인 회원의 목표와 할 일을 포함해 그룹의 목표 및 게시글까지 종합적으로 관리할 수 있습니다.

배포 주소

유저 서비스

• 🔗https://jtodo.site

어드민 서비스

• 🔗https://jtodo.site/admin

👥 팀 소개

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

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

🧑‍💻이준영(팀리더) - @Dragonite-Lee 📧 email@example.com
공용 : 공통 컴포넌트, AWS배포
유저 : sidebar, 최근 할 일 페이지, 내 진행 상황 보드, 노트 에디터
어드민 : 어드민 게시글 관리

🧑‍💻최지영 - @ohtmm 📧 cwd05011@gmail.com
공용 : 공통 컴포넌트
유저 : 개인 대시보드 페이지, 그룹 대시보드 페이지, 개인 디테일 페이지
어드민 : 어드민 회원 관리

🧑‍💻안주연 - @aajy 📧 aajy.000@gmail.com
공용 : 공통 컴포넌트
유저 : 로그인 및 회원가입 페이지, 노트 모아보기 페이지, 그룹 디테일 페이지
어드민 : 어드민 그룹 관리

🫶함께 협업 해주신🫶

🧑‍💻신정섭 백엔드 개발자님
🧑‍💻유재영 백엔드 개발자님
🧑‍💻김은지 디자이너님

🔹 프로젝트 미리보기

유저 서비스 스크린샷 보기

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

---

🔍 주요 기능 살펴보기

유저 서비스

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

어드민 서비스

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

기능별 화면 소개 - 수행 결과

• 목표 생성 및 목표 상세 페이지 확인
• 할일 관리
• 최근 등록 할일 검색 탭 필터링
• 노트 모아보기
• 그룹 대시보드
• 어드민 전반 영상

프로젝트 수행절차 및 구조

1. 기술 스택 선택

최신 기술 사용 경험을 위해 아래 스택을 선택 하였습니다

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

2. 아이디어 확장

3. 기획문서 작성

4. 디자이너님과 백엔드 개발자님과의 협업

5. 모노레포 구조로 시작하며 shared에 해당하는 공용 컴포넌트 작업

6. 컴포넌트 단위 -> 페이지 단위로 작업

7. 깃 플로우 : feature, fix -> develop -> main (자동 배포)

🚀 기술 스택

• 프론트엔드: Next.js 14 (App Router), Typescript, TailwindCSS
• 백엔드: 자바 스프링, 디비: 레디스sql, 배포: 리눅스 환경에서 aws도커
• 백엔드 통신: Axios
• 상태 관리: TanStack Query v5
• CI/CD: GitHub Actions, Docker
• 모노레포 관리: Yarn Workspaces, Turborepo

⚡업데이트 예정(v.2.0)

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

🎯 트러블 슈팅 기록

: 블로그로 회고할 예정입니다.

• middleware를 사용하면서
• Nextjs App Router를 사용하면서
• axios를 사용하면서 -(모노레포의 토큰 분기 처리)
• tanstack query를 사용하면서 - (invalidate 연산자 주의)
• Lint를 사용하면서

🎥 시연 영상

🔗드라이브 링크

한 줄 소감

👩‍💻준영 : 규모가 큰 프로젝트를 진행하면서 협업의 힘을 실감했고, 각 단계마다 도전과 성장이 있어 즐거웠습니다
👩‍💻지영 : 개인에서 그룹으로, 유저에서 어드민으로 서비스를 확장함에 따라, 복잡도도 높아져 쉽지 않았습니다. 그러나 협업에 강한 7팀을 만나 즐겁게! 모두 구현할 수 있었습니다.
👩‍💻주연 : 기획부터 배포까지 짧으면서 길었던 기간동안 이만큼 한게 놀랍고(7팀 짱), 이번 기회에 타입스크립트와 테일윈드와 조금 친해진 것 같습니다. 그동안 겪은 트러블 슈팅들도 잘 정리해서 팀원분들과 함께 또 성장하겠습니다!

스터디

• 우아한 타입스크립트 with 리액트

라이트 하우스

유저 사이트

어드민 사이트

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