jtodo는 계획형 j처럼 개인/그룹이 할 일을 효율적으로 관리하는 웹 애플리케이션입니다.
사용자들은 할 일을 쉽게 추가하고 관리하며 완료할 수 있습니다.특히 협업이 필요한 그룹 작업의 경우, 팀원 간 원활한 커뮤니케이션을 위해 아래 기능을 추가로 지원합니다.
🔹 실시간 할 일 현황 업데이트
🔹 할 일 담당자 라벨링
🔹 할 일 달성률에 따른 best/worst 프로필 제공
또한, 관리자 센터를 제공하여 전체 회원과 그룹을 효과적으로 관리할 수 있습니다.
개인 회원의 목표와 할 일을 포함해 그룹의 목표 및 게시글까지 종합적으로 관리할 수 있습니다.
우리 jeil(제일) 팀 구성원과 프로젝트의 역할을 소개합니다.
 이준영 |
 최지영 |
 안주연 |
 유재영 |
 신정섭 |
 김은지 |
|---|---|---|---|---|---|
| 프론트엔드 개발자 | 프론트엔드 개발자 | 프론트엔드 개발자 | 백엔드 개발자 | 백엔드 개발자 | 디자이너 |
| GitHub · LinkedIn | GitHub · LinkedIn | GitHub · LinkedIn | GitHub | GitHub · LinkedIn | GitHub · LinkedIn |
🧑💻이준영(팀리더) - @Dragonite-Lee 📧 ross991222@gmail.com
공용 : 공통 컴포넌트, AWS배포
유저 : sidebar, 최근 할 일 페이지, 내 진행 상황 보드, 노트 에디터
어드민 : 어드민 게시글 관리
🧑💻최지영 - @ohtmm 📧 cwd05011@gmail.com
공용 : 공통 컴포넌트
유저 : 개인 대시보드 페이지, 그룹 대시보드 페이지, 개인 디테일 페이지
어드민 : 어드민 회원 관리
🧑💻안주연 - @aajy 📧 aajy.000@gmail.com
공용 : 공통 컴포넌트
유저 : 로그인 및 회원가입 페이지, 노트 모아보기 페이지, 그룹 디테일 페이지
어드민 : 어드민 그룹 관리
함께 협업 해주신
🧑💻신정섭 백엔드 개발자님
🧑💻유재영 백엔드 개발자님
🧑💻김은지 디자이너님
유저 서비스 스크린샷 보기
관리자 서비스 스크린샷 보기
| 기능 | 설명 | 비고 |
|---|---|---|
| 회원가입 & 로그인 | 서비스 회원 가입 및 로그인 | 이메일, 닉네임 중복 검사 |
| 개인 대시보드 | 할 일 관리, 진행 사항 그래프, 목표 목록 | 목표 상세 페이지로 이동,할 일의 완료 처리 및 수정 삭제 기능, 노트 미리보기 및 작성 페이지로 이동 |
| 개인 목표 | 할 일 처리 및 할일 수정, 삭제 노트 수정, 작성, 임시저장 |
할 일의 완료 처리 및 수정 삭제 기능, 노트 미리보기 및 작성 페이지로 이동 |
| 그룹 대시보드 | 그룹 정보, 그룹 구성원, 그룹 목표 | 그룹장 권한인 경우 이름과 초대코드 변경 기능, 그룹장 변경 및 구성원 관리 기능 |
| 그룹 목표 | 목표 확인, 진행률 그래프, 노트 모아보기, 그룹 목표 내 나의 할일 목록 | 목표 관리, 할 일 관리 기능 |
| 노트 | 목표마다의 노트 목록 | 노트 슬라이드, 노트 편집기능, 자동 임시 저장 기능 |
| 기능 | 설명 | 비고 |
|---|---|---|
| 회원 관리 | 회원 목록 검색 및 관리 | 회원 이름, 이메일 검색 필터링 기능, 목록 페이지네이션 기능, 회원 상세 관리 페이지로 이동 |
| 회원 상세 관리 | 회원 정보, 소속 그룹 정보, 개인 목표 목록 | 회원 정보 수정 및 그룹 정보 수성기능, 목표별 진행률 확인 |
| 그룹 관리 | 그룹 목록 검색 및 관리 | 그룹이름, 그룹장 검색 필터링 기능, 목록 페이지네이션 기능, 상세 그룹 관리 페이지 이동 |
| 그룹 상세 관리 | 그룹 정보, 그룹 구성원 관리,그룹 목표 목록 | 그룹 정보 수정 및 그룹장 변경 기능, 구성원 관리 기능, 목표별 진행률 확인 |
| 개인 게시글 관리 | 개인의 목표 게시글 검색 및 관리 | 목표 게시글 키워드, 작성자 검색 필터링, 목록 페이지네이션, 목표의 할 일 상세 관리 페이지로 이동 |
| 그룹 게시글 관리 | 그룹의 목표 게시글 검색 및 관리 | 목표 게시글 키워드, 그룹 이름, 작성자 검색 필터링, 목록 페이지네이션, 목표의 할 일 상세 관리 페이지로 이동 |
- 목표 생성 및 목표 상세 페이지 확인
- 할일 관리
- 최근 등록 할일 검색 탭 필터링
- 노트 모아보기
- 그룹 대시보드
- 어드민 전반 영상
최신 기술 사용 경험을 위해 아래 스택을 선택 하였습니다
- next.js 14 App Router
- tanstack query v5
- typeScript
- tailwind css
- FSD 아키텍처 사용
- 모노레포 도입을 위한 터보레포 ⇒ 어드민 서비스와 유저 서비스를 하나의 레포로 관리
- 도커를 이용한 EC2 인스턴스 배포
- 프론트엔드: Next.js 14 (App Router), Typescript, TailwindCSS
- 백엔드: 자바 스프링, 디비: 레디스sql, 배포: 리눅스 환경에서 aws도커
- 백엔드 통신: Axios
- 상태 관리: TanStack Query v5
- CI/CD: GitHub Actions, Docker
- 모노레포 관리: Yarn Workspaces, Turborepo
- 현재는 개발 효율성을 위해 클라이언트 측 쿠키로 토큰을 관리하고 있습니다.
향후 서비스 규모 확장과 보안 요구사항 증가에 따라 토큰 관리를 서버 측으로 전환할 계획입니다. - 실시간 알림/채팅 서비스를 추가 할 계획입니다.
- 주요 기능에 대한 기능 업데이트 시 테스트 코드를 추가하려고 합니다.
: 블로그로 회고할 예정입니다.
- middleware를 사용하면서
- Nextjs App Router를 사용하면서
- axios를 사용하면서 -(모노레포의 토큰 분기 처리)
- tanstack query를 사용하면서 - (invalidate 연산자 주의)
- Lint를 사용하면서
👩💻준영 : 규모가 큰 프로젝트를 진행하면서 협업의 힘을 실감했고, 각 단계마다 도전과 성장이 있어 즐거웠습니다
👩💻지영 : 개인에서 그룹으로, 유저에서 어드민으로 서비스를 확장함에 따라, 복잡도도 높아져 쉽지 않았습니다. 그러나 협업에 강한 7팀을 만나 즐겁게! 모두 구현할 수 있었습니다.
👩💻주연 : 기획부터 배포까지 짧으면서 길었던 기간동안 이만큼 한게 놀랍고(7팀 짱), 이번 기회에 타입스크립트와 테일윈드와 조금 친해진 것 같습니다. 그동안 겪은 트러블 슈팅들도 잘 정리해서 팀원분들과 함께 또 성장하겠습니다!
- 우아한 타입스크립트 with 리액트
- 당신의 생산성을 편리하게 높이는 방법 ⚡