sadobass / web19-Boostart

📔 친구와 나누는 라이프 기록 - 네이버 부스트캠프 웹・모바일 7기 Web19 팀 프로젝트

Boostart - 당신의 하루를 시작하세요!

데일리 플래너 + 실시간 공유 그림일기 + SNS

🙆‍♂️배포 페이지🙆‍♀️

프로젝트 개요

네이버 부스트캠프 웹모바일7기 Web19 팀 프로젝트

• Boostart - 친구와 함께 쓰는 데일리 플래너
• 개발 기간 : 2022.11.07 - 2022.12.16
• 🗄 프로젝트 일정 관리 백로그
• 🛠 기술 발표 영상
• 🎥 데모 영상
• 👩‍💻 소개 노션 페이지

놓치기 쉬운 하루의 일상을 예쁘게 기록하고 관리할 수 있어요

• 📆 친구와 함께 소통할 수 있는 데일리 플래너
• 📓 소켓 통신을 이용한 친구와의 공유 그림일기
• 🙋 사용자 관점의 편리함을 고려한 직관적인 인터페이스와 애니메이션

팀원 소개

김진아	박경찬	박수연	하현우
@mikaniz	@ParkKyungChan	@sooyeon73	@high2092

사용된 기술 스택 및 아키텍처

프로젝트 기능 소개

LOG - 데일리 플랜 관리
- 언제 어디서 무엇을 했는지 태그 / 라벨 / 장소 와 함께 기록해요! - 상세 정보를 확인하고 각 일정을 완료 / 수정 / 삭제할 수 있어요 - 드래그 앤 드롭 으로 간편하게 태그를 변경할 수 있어요 - 좌측의 시간 바를 통해 일정별 시간을 확인할 수 있어요 - 친구가 남긴 이모티콘을 확인할 수 있어요

LOG - 친구와의 상호작용
- 다른 사용자와 친구가 되어 서로의 일상을 공유해 보세요! - 친구의 로그를 조회하고 이모티콘을 남길 수 있어요!

DIARY - 공유 그림일기
- 친구의 다이어리에 방문해서 함께 그림 일기를 작성해봐요! - 일기에 참여한 사람 / 일기에 참여 중인 사람을 확인할 수 있어요 - Socket.IO 를 통해 친구와 그림일기를 실시간으로 공유해요 - Canvas Fabric.js 을 이용하여 자유곡선, 도형, 텍스트를 생성하고 편집할 수 있어요 - Redis 를 이용하여 빈번한 입출력을 빠르게 처리해요

GOAL - 라벨을 통해 관리되는 목표
- 데일리 목표를 설정하고 일정에 등록한 라벨을 통해 목표를 달성해 보세요! - 일정이 완료되면 설정된 라벨을 통해 목표 달성률이 자동으로 채워져요 - 달성률을 달력에서 확인할 수 있어요

MAP - 지도로 보는 데일리 플랜
- 일정에 설정된 위치를 통해 하루 동안의 동선을 확인할 수 있어요 - 친구의 동선을 함께 조회할 수 있어요 - 모든 일정을 한 눈에 파악할 수 있는 전체 보기, 일정을 클릭하면 해당 위치로 이동하는 LOG 리스트를 이용할 수 있어요

LOG - 일정 생성
- 제목, 태그, 시간, 중요도, 공개 여부, 위치, 라벨, 메모 정보를 입력하고 새로운 일정을 생성해 보세요! - 태그 / 라벨을 생성, 삭제, 변경하고 설정할 수 있어요 -일정에 등록한 라벨은 목표에 자동으로 연동돼요 - 장소 검색 API를 이용하여 위치를 검색하고 설정하면 지도 탭에서 위치를 확인할 수 있어요

MAIN - 회원가입 로그인
사진
- 카카오/ 깃허브 / 기본 회원가입 후 서비스를 이용해요 - 프로필 사진과 정보의 입력이 잘못된 경우 메세지가 표시돼요

FRIEND - 친구와 함께쓰는 데일리 플래너
사진
- ID로 친구를 검색하고 친구 신청을 할 수 있어요 - 햄버거 바에서 친구 요청을 관리하고 나에게 온 알림을 확인해요 - 친구가 되면 친구의 데일리 플래너의 모든 항목을 구경하고, 이모티콘, 실시간 그림일기로 소통할 수 있어요

기술적 고민 - 노션 / 기술 발표

• 🕐 렌더링 효율성 까지 개선한 드래그 앤 드롭
• 🎨 Redis, socket.io 를 이용한 실시간 공유 그림판
• 🔏 로그인, 회원가입, 일정생성 시의 유효성 검증
• 🚶 터벅터벅 Raw Query
• ⚙️ 완벽한 RESTful API ?
• ✍️ 사용자 편의를 고려한 LOG 생성 인터페이스
• 🌀 애니메이션 을 통한 한층 더 기분 좋은, 고퀄리티의 UI/UX
• 🎫 PR 에 티켓을 달아주세요

ERD

---

개발 환경에서의 실행 방법

$ cd ./client
$ npm ci
$ npm run build
$ cd ../server
$ npm ci
$ npm start