💡 Todo Monster

프로젝트 기간 : 2022.10.19(수) ~ 2022.11.28(월)

Todo Monster는 할 일 완료 수에 따라 캐릭터가 성장하고, 팔로우 기능을 통해 친구들과 할 일을 공유하는 애플리케이션

애플리케이션인데 왜 웹으로 제작되었나요?

유라클 회사와의 협업을 통해 모피어스 모바일 소프트웨어 플랫폼을 이용하여
React로 제작한 웹을 모바일 애플리케이션 형식으로 변경하는 프로젝트입니다.
( 모바일 애플리케이션 형식으로 변경하는 파일은 따로 repository를 생성하였습니다. )

+) 웹으로 확인하는 사용자를 위해 Todo 페이지 useMediaQuery Hook을 추가하여 모바일 크기에만 보여지도록 수정하였습니다.

❓ 프로젝트 계획 이유

• 기존 Todo 애플리케이션의 사용 지속성 부족
• 사용자 시각적 재미 요소를 위한 캐릭터 육성
• 카테고리별 할 일 관리
• 애플리케이션 사용자끼리 할 일 공유
• 팔로우 기능을 통한 특정 인물에게 할 일 공유

📋 담당 업무

프론트엔드(25%) 백엔드(25%)
페이지 구성 및 기능(DB 데이터 전송 및 가져오기 등)을 담당했습니다.

1. Todo 페이지
   팔로우 정보, 캐릭터 정보 update를 제외한
   캘린더, 날짜별 + 카테고리별 Todo CRUD, 사용자 프로필 update 기능을 담당했습니다.
2. Side bar
3. 회원가입 후 최초 1번 기본 카테고리 생성 (일반 카테고리)
4. Router 설정 및 Express 서버 구축
5. .dot 이용한 Mysql DB 연결

🔗 실행 방법

• 프로그램 실행

$ npm install

$ npm start

• 서버 실행

$ cd server

$ node server.js

📁 개발 환경

🔨 기술 스택

👀 기능 설명

기능	회원가입	로그인	캐릭터생성
화면
설명	사용자는 회원가입 후 애플리케이션을 이용할 수 있다.	사용자는 로그인 시 기본으로 생성되는 카테고리를 확인할 수 있다. 사용자는 로그인 시 기본으로 설정된 이름(Me)을 확인할 수 있다.	사용자는 최초 1회 캐릭터를 생성할 수 있다.

기능	할 일 추가	할 일 수정	할 일 삭제
화면
설명	날짜별 할 일 추가를 할 수 있다.	점 3개 아이콘 클릭 시 모달창이 뜨고 할 일 수정을 할 수 있다.	점 3개 아이콘 클릭 시 모달창이 뜨고 할 일 삭제를 할 수 있다.

기능	검색 및 둘러보기	팔로우	프로필
화면
설명	검색 아이콘 클릭 시 본인을 포함한 전체 사용자의 전체공개로 설정된 할 일 목록을 볼 수 있다. 이메일 검색 시 사용자 검색이 가능하다.	본인을 제외한 다른 사용자 팔로잉이 가능하다. 사용자는 팔로워, 팔로잉 목록을 확인하고 다른 사용자의 할 일 페이지를 확인 할 수 있다.	사용자는 프로필 이름을 변경할 수 있다.

기능	카테고리	비밀번호 재설정	로그아웃 및 계정 탈퇴
화면
설명	사용자는 카테고리를 '전체공개', '일부공개', '나만보기' 조건을 통해 카테고리를 생성, 수정, 삭제할 수 있다.	사용자는 비밀번호를 조건에 맞게 수정할 수 있다.	사용자는 로그아웃 및 계정 탈퇴를 할 수 있다.

📄 테스트 환경

• Android Emulator Pixel 2 API 28
• 개발자 도구 Device Mode iPhone 12 Pro