- 목적 : 평범한 Todo App에 동기부여가 될 만한 컨텐츠를 제공하여 일정관리 및 완료를 더 재밌게 할 수 있도록 해보자!
- 목표
- What? 카테고리 별로 계획을 세워 지켜나가는 Todo List 서비스
- How? 계획 해결에 따른 보상을 얻어 나만의 펫을 성장시키는 서비스
- Why? 펫을 키우겠다는 동기부여가 있어, 다른 Todo App과 차별화된 경험을 제공!
💡 테이머 킴(23세): "계획을 잘 세워서 지키고 싶은데, 투두리스트를 꾸준히 쓰기 어려워!"
1. 피드 페이지
- 캐릭터 애니메이션(점프하며 오른쪽으로 이동) 적용
- 펫 레벨에 따라 캐릭터 변화
- 토스트 알림: 투두를 체크할 때마다 보상에 관련된 알림이 나타났다가 사라진다.
- 일반 보상
- 특별한 보상(히든 아이템)
- 이미 받은 보상
- 일일 보상 최대치를 초과한 경우
- 인벤토리를 모두 채운 순간
-
- 인벤토리 공간이 없어서 아이템을 받지 못하는 경우
- 공간이 없을 때 투두를 완료한 경우
- 피드 페이지 진입 시 알림
-
-
- 토글 버튼으로 주간 캘린더 모드, 월간 캘린더 모드를 전환 가능
- 날짜를 클릭 시 해당 날짜로 이동하며, 그 날의 Todo만 표시
- 각 날짜의 완료한 Todo개수를 색깔로 나타내며, 개수가 많을 수록 색이 진해진다
-
- 오늘 날짜는 검정 동그라미, 선택한 날짜는 파란색 동그라미로 나타낸다.
- 날짜를 선택할 경우 선택한 날짜에 해당하는 Todo만 표시된다.
-
-
카테고리별 투두 생성
- 투두 카테고리 버튼을 클릭하면 투두를 작성할 수 있는 폼이 나타난다
-
-
투두 생성 폼
- 할 일을 입력하고 enter를 누르면 투두 리스트에 등록되고 새로운 폼이 아래에 나타난다
- 할 일을 입력하고 폼 이외의 영역을 클릭하면 투두 리스트에 등록된다
-
-
투두 삭제/수정
- 투두를 삭제하거나 수정할 수 있는 버튼이며, 클릭 시 삭제/수정 드롭다운이 나온다
-
2. 펫 페이지
- 펫의 상태 정보(포만감, 친밀도, 컨디션, 청결도, 경험치, 레벨 등)를 확인할 수 있다.
- 펫의 4가지 상태(포만감, 친밀도, 컨디션, 청결도)는 1분에 0.05씩 감소한다.
-
펫의 4가지 상태에 따라 펫의 감정표현을 확인할 수 있다.
- 상태 4가지 모두 80% 이상 : 하트
- 상태중 하나라도 30% 이하 : ㅜㅜ
- 그 외 : 표현 없음
-
인벤토리에서 보유중인 아이템을 확인할 수 있다.
-
아이템은 5가지 종류가 있고, 종류별로 회복시키는 상태가 다르다.
- 먹이 : 포만감 회복
- 놀이 : 친밀도 회복
- 휴식 : 컨디션 회복
- 씻기 : 청결도 회복
- 히든 : 모든 상태 회복
-
종류별로 상태 회복량이 20, 30, 40인 아이템이 하나씩 있다.
- 아이템 이미지나 설명부분을 클릭하여 아이템을 사용하거나, 휴지통 아이콘을 클릭하여 아이템을 버릴 수 있다.
3. 랭킹 페이지
- 랭킹 조회
- 주간 별로 투두를 해결한 순서대로 랭킹을 부여한다.
- 주간 투두 해결 1위, 2위, 3위 유저는 명예의 전당에 올라 프로필 사진 또한 표시한다.
-
- 하단 영역에는 주간 투두 해결을 많이 진행한 상위 n명에 대하여 닉네임과 해결 횟수를 표시한다.
- 주간 투두 해결 1위, 2위, 3위 유저는 순위 대신 메달을 표시하고, 나머지 유저들은 순위를 표시한다.
- 주간 투두 해결 횟수가 같은 유저에 대한 랭킹 표시는 최근에 투두를 해결한 유저에 대하여 우선 순위를 부여한다.
4. 마이 페이지
- 프로필 사진 : 구글 계정의 프로필 사진이 표시된다.
- 닉네임 : 구글 계정의 닉네임이 표시된다.
- 닉네임 수정 버튼 : 닉네임 수정을 위한 모달이 나타난다.
- 가입일 : 가입일자를 표시한다.
- 카드
- 펫 카드 : 가입 일로부터 서비스를 이용한 시간을 날짜로 표시한다.
- todo 달성 날짜 카드 : todo 달성한 날짜를 표시한다.
- todo 완료 카드 : 완료한 todo 개수를 표시한다.
- 로그아웃 버튼 : 로그아웃 확인 모달이 나타나고, 실행 시 로그인 페이지로 이동한다.
- 회원 탈퇴 버튼 : 회원 탈퇴 확인 모달이 나타난다.
| FE | BE | Infra |
|---|---|---|
| React.js | node.js | Vercel |
| styled-components | express.js | CloudType |
| TypeScript | mongodb |
| 담당자 | 업무 | 비고 |
|---|---|---|
| 원종석 | API 개발 공통 코드 개발 랭킹 페이지 개발 |
투두, 보상 처리 API 개발 스키마 및 데이터 타입 정의 API 호출 공통 함수 개발 랭킹 페이지 개발 |
| 안보란 | 캘린더 컴포넌트 개발 투두 페이지에 연동 |
주간/월간 전환 및 투두 해결 수에 따른 실시간 색상 표시 투두 컴포넌트와 연결 |
| 문수민 | 투두(피드) 페이지 개발 | 투두 CRUD 투두 해결에 따른 알림 토스트 창 표시 캘린더 컴포넌트와 연결 |
| 최태관 | API 개발 소셜 로그인 |
아이템 사용에 따른 펫 상태 업데이트 로직 개발 보상 지급 로직 개발 구글 소셜 로그인 |
| 전재욱 | 펫 관리 페이지 및 인벤토리 컴포넌트 개발 | 펫 페이지에 캐릭터 및 상태 표시 아이템 사용 로직 적용 인벤토리 아이템 관리 |
| 이남경 | 목표 페이지 개발, PPT 제작 | 투두 목표 관리 CRUD 페이지 개발 발표 PPT 자료 제작 |
인벤토리 스키마
const inventorySchema = new Schema(
{
userId: {
type: Schema.Types.ObjectId,
required: true
},
items: [
{
item: {
type: Schema.Types.ObjectId,
required: true
},
quantity: {
type: Number,
default: 0
}
}
]
},
{
versionKey: false,
timestamps: true
}
);
아이템 스키마
const itemSchema = new Schema(
{
// 아이템 이름
name: {
type: String,
required: true
},
// 아이템 설명
description: {
type: String,
required: true
},
// 아이템 이미지
image: {
type: String,
required: true
},
// 아이템 적용 상태 (포만감, 컨디션, 청결도, 친밀도)
status: {
type: Array,
required: true
},
// 아이템 효과 (얼만큼 회복)
effect: {
type: Number,
required: true
},
// 아이템 사용시 경험치 증가량
experience: {
type: Number,
required: true
},
// 획득 확률
probability: {
type: Number,
required: true
}
},
{
timestamps: true,
versionKey: false
}
);
펫 정보 스키마
const petSchema = new Schema(
{
petName: {
type: String,
required: true
},
level: {
type: Number,
default: 0
},
// 경험치
experience: {
type: Number,
default: 0
},
// 포만감
hunger: {
type: Number,
default: 100
},
// 친밀도
affection: {
type: Number,
default: 100
},
// 청결도
cleanliness: {
type: Number,
default: 100
},
// 컨디션
condition: {
type: Number,
default: 100
}
},
{
timestamps: true,
versionKey: false
}
);
todo 카테고리(목표) 스키마
const todoCategorySchema = new Schema(
{
userId: {
type: Schema.Types.ObjectId,
ref: 'User',
required: true
},
category: {
type: String,
required: true
},
ended: {
type: Boolean,
required: true,
default: false
}
},
{
timestamps: true,
versionKey: false
}
);
todo 내용 스키마
const todoContentSchema = new Schema(
{
categoryId: {
type: String,
required: true
},
todo: {
type: String,
required: true
},
status: {
type: String,
enum: ['unchecked', 'reverted', 'completed'],
default: 'unchecked'
}
},
{
timestamps: true,
versionKey: false
}
);
사용자 스키마
const userSchema = new Schema(
{
googleId: {
type: String,
unique: true,
required: true
},
nickname: {
type: String,
required: true
},
membershipStatus: {
type: String,
enum: ['active', 'withdrawn', 'suspended'],
default: 'active',
required: true
},
picture: {
type: String,
required: true
}
},
{
timestamps: true,
versionKey: false
}
);
마이펫 스키마
const myPetSchema = new Schema(
{
userId: {
type: Schema.Types.ObjectId,
required: true
},
pets: [
{
pet: petSchema
}
]
},
{
timestamps: true,
versionKey: false
}
);
히스토리 스키마
const historySchema = new Schema(
{
userId: {
type: Schema.Types.ObjectId,
required: true
},
// 업적 id 또는 todo id가 될 수 있다.
contentId: {
type: String,
required: true
}
},
{
timestamps: true,
versionKey: false
}
);
- Notion : 스터디 기간, 사용 기술 스택, 참고 문서, 업무 진행 사항, 회의록
- Gather Town : 음성 채팅방 활용 의견 제시 및 문제 해결, 화면 공유
- GitHub : Code Repository
- Postman Teams : API 테스트 진행
- 변수 : 카멜 케이스(camelCase)
- 변수(스키마) : 파스칼 케이스(PascalCase)
- 함수 : 카멜 케이스(camelCase)
- 상수 : 대문자
- 파일 : 파스칼 케이스(PascalCase)
- 스타일 : 케밥 케이스(kebab-case)
- feat : 새로운 기능 추가
- fix : 오류 수정
- style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우, css 작업
- refactor : 코드 로직 수정 (리팩토링)
- docs : 문서 수정
- test : 테스트 코드 추가
- chore : 빌드 업무 수정, 패키지 매니저 수정 (module 추가 시)
무단 사용 및 도용, 복제 및 배포를 금합니다.
Copyright 2023 엘리스 2차 프로젝트 [Todo Tamers]팀. All rights reserved.