로드메이커는 누구나 학습 로드맵을 만들고, 공유할 수 있는 플랫폼 입니다. 현재 전체 리팩토링 과정중에 있습니다.

image

본 문서는 RoadMaker의 프론트엔드에 초점을 맞춰 작성됐습니다. 👉 백엔드 문서

1. 프로젝트 개요
2. 서비스 소개
3. 화면 구성
4. 커밋 컨벤션

• 기술: React, Tanstack Query, Styled components
• 라이브러리 : dagrejs, mantine, tiptap, axios
• 빌드, 배포: Github Actions

• 강원영(팀장/BE)
• 표혜민(FE)
• 박주영(BE)
• 전서인(FE)
• 임희호(BE)

• 시연 연상: https://youtu.be/RqMJgGFdEws?feature=shared

프로그래머가 되고 싶어하는 사람들은 "로드맵"이나 "커리큘럼"이라는 키워드로 자료를 검색합니다.

이러한 정보가 모여있는 "developer-roadmap" 리포지토리가 24만 개의 star를 받은 것은 이러한 수요를 잘 보여주는 예입니다.

하지만, 기존의 로드맵을 사용하다 보면 '나도 로드맵을 만들어보고 싶다내가 만든 로드맵을 다른 사람과 공유하고 싶다'는 생각이 들게 됩니다.

이런 필요성에 응답하여, "RoadMaker"를 개발하게 되었습니다.

RoadMaker는 사용자가 자신만의 개발 로드맵을 쉽게 만들고 공유할 수 있는 플랫폼입니다.

1. 로드맵 자동 생성
   • GPT API를 이용하여 로드맵 초안을 자동 생성합니다.
2. 로드맵 참여 및 진행
   • 로드맵에 참여하고 진행도를 업데이트 할 수 있습니다.
3. 댓글 작성
   • 로드맵에 대해 궁금한 내용을 댓글을 달아 질문할 수 있습니다.
4. 검색 기능
   • 원하는 로드맵을 검색을 통해 찾을 수 있습니다.

1. 메인 화면
   • infinitescroll로 페이지를 스크롤할 경우 추가적으로 게시물을 볼 수 있도록 구현했습니다.
   image
2. 회원일 경우, 화면 우측 상단 [로드맵 생성] 버튼을 클릭 시, chatgpt api를 활용해 로드맵 템플릿을 자동 생성할 수 있는 키워드 입력 모달을 구현했습니다. image image
3. 로드맵 생성 페이지
   • chatgpt api로 로드맵 탬플릿을 생성하고나사, 내용 수정이나 추가를 위한 에디터 페이지입니다.
   image
4. 로드맵 노드의 상세내용을 수정할 수 있는 모달
   • tiptap 라이브러리를 활용해 마크다운 문법, 이미지, 링크등의 상세 내용들을 수정할 수 있습니다.
   image image
5. 로드맵 상세 페이지
   • 완성한 로드맵 게시물 화면입니다. 상세 내용은 drawer 형태로, 노드를 클릭 시 확인 가능합니다.
   • 진행상황을 클릭하면 노드 상태가 완료 상태로 반영됩니다.
   image image
6. 로드맵 검색창
   • 키워드로 특정 로드맵을 검색할 수 있습니다. (예시: 자바스크립트)
   image image
7. 로드맵 댓글 모달 image image
8. 마이페이지
   • 진행 중인 로드맵과 내가 만든 로드맵을 확인할 수 있는 페이지 입니다.

본 프로젝트에서는 AngularJS commit Convention을 채택했습니다.

[#이슈 번호] 이슈 타입: 커밋 메시지