🙌 팀 소개 📌 프로젝트 개요기획 배경 및 동기 세부 내용스토리 보드 서비스 타겟층핵심 가치 로고와 대표 색상기대효과기술 스택 📝 기능 명세API 명세페이지별 상세 기능 🎨 UI 와이어 프레임 🧩 컴포넌트 구조 👨👨👧👧 협업 준비코드 스타일 네이밍 컨벤션깃, 깃허브 관련 📑 페이지 별 기능 명세 질문 리스트
🙌 팀 소개
- 팀명 : 백엔드랑 같이 논의~
- 팀원
- 프론트엔드 : 김다슬, 배준형, 정윤호
- 백엔드 : 강민희, 김채원, 이수형, 변민지
📌 프로젝트 개요
기획 배경 및 동기
학생 때는
학교→학원→집→학교→학원→집 직장인이 되고 나서는 회사→집→회사→집 이런 반복되는 일상을 겪으면서 무기력증을 느낀 경험 한번 쯤은 있으시죠?
성인 남녀 1,322명을 대상으로 한 잡코리아의 통계 자료에 따르면,
성인 남녀의
56%이상이 매일 반복되는 일상에 지쳐 소위 말하는 노잼 시기를 겪은 적이 있다고 합니다.
이러한 노잼 시기를 타파하기 위한 방법으로는 맛있는 음식을 먹거나, 여행을 다녀오거나, 운동을 하거나 등등 다양한 방법이 존재하겠죠?
하지만, 노잼 시기를 타파하는 방법을 모르는 사람도 부지기수입니다...
(예를 들면, 저요...무엇을 해야할지 몰라 그냥 잠을 자긴합니다...)
다른 사람들은 어떻게 노잼 시기를 극복할까?
나는 어떤 것들을 하면 스트레스가 풀리고, 다시 삶에 열정을 불어넣을 수 있을까?
이런 고민들이 모여
모든 사람의 일상을 한번 특별하게 만들어보면 어떨까?라는 작은 아이디어에서YAS(야스: 너는 특별해!)를 기획하게 됐습니다
세부 내용
- YAS 사용자는 매달 혹은 매주 원하는 카테고리(책, 영화, 건강, 여행 등)를 고르고, 카테고리에 해당하는 다양한 미션들을 부여받는다 (미션 추가 가능)
- 미션은 최소 3개 이상 선택해야하며, 3일에 1번, 일주일에 1번 등 자신의 스케쥴에 맞게 수행 기간 선택도 가능하다
- 사용자는 미션 완료 후 스트레스 완화 정도, 행복도 등에 대한 평가와 후기를 작성하게되며, 미션 일정과 후기 내용은 다른 사람들에게 공유된다
스토리 보드
쳇바퀴처럼 돌아가는 일상이 매우 따분한 회사원 머쓱씨...🥲
아마도 노잼 시기가 찾아온 것 같다...
그래서 일상을 재미있게 보낼만한 무언가를 찾던 중 친구에게 요즘 핫한 YAS를 추천 받는다!!!!
- 이메일, 이름, 닉네임, 비밀번호를 이용해
회원가입을 진행한다
- 가입한 이메일과 비밀번호로
로그인을 진행한다
- 최초 접속 시 보여주는
YAS 설명서를 읽고다양한 카테고리들을 확인한다
- 요즘 체력이 떨어진 머쓱씨는
건강, 운동 관련 카테고리를 선택한다
- 머쓱씨가 경험해보지 못한
미션들이 아래와 같이 수두룩했고, 벌써부터 가슴이 설렌다..! - 물 2L 마시기
- 집 앞 공원 1시간 걷기
- 스쿼트 50회 하기
- 날씨 좋은 날 친구와 배드민턴 치러가기
- 샐러드 맛집 방문하기
- 따릉이 타고 한강가기
나이를 이렇게 먹었는데 아직도 처음인게 있다니! 너무 좋아!!!! - 이하늬
미션 리스트
- 미션들 중 머쓱씨가 하고 싶었던
5가지 미션을 선택하고, 미션을 수행하고 싶은기간을 일주일로 선택한다
- 머쓱씨는 일주일 동안 즐거운 경험을 하며
미션을 완수했고,평가와 후기도 꼼꼼이 남겼다
- 머쓱씨의
미션 일정 및 완수 내역과 후기는 공유되었고,다른 사람의 후기도 확인해보며 다음 카테고리는 영화로 결정했다
- 머쓱씨는 YAS 중독 증세를 겪으며 노잼 시기를 극복했고 일상은 특별함으로 가득찼다...⭐️
서비스 타겟층
- 노잼 시기를 겪고 있는 누구나 (학생, 직장인, 할머니, 할아버지 등등)
- 특별한 일상을 경험해보고 싶은 니즈가 있는 누구나
핵심 가치
- 행복
- 즐거움
- 스트레스 완화
로고와 대표 색상
- 로고 : 별이 들어갔으면 좋겠어요ㅎㅎ
- 대표 색상 : 노란 계열? 밝은색 원합니다
기대효과
- 업무, 공부 등에서 받은 스트레스를 해소해준다
- 생각지 못했던 새로운 경험을 할 수 있게 해준다
기술 스택
- 기획 구체화된 후 정하기
📝 기능 명세
API 명세
- 기획 구체화된 후 정하기
페이지별 상세 기능
인트로 페이지 (후순위)
- 서비스에 대한 간단 설명(사용자가 사용하고싶게끔 멘트 정하기)
- 로그인, 회원가입 버튼이 존재한다
회원가입 페이지
- 이메일, 닉네임, 비밀번호를 입력해 회원가입이 가능하다
- 시간이 된다면 이메일 인증 기능 또는 중복 확인 기능(이메일, 닉네임) 구현
- SNS 계정을 이용한 간편 회원가입이 가능하다
- 페이스북, 카카오톡, 네이버 중 하나 도전해보기
로그인 페이지
- 회원가입 시 입력한 이메일, 비밀번호로 로그인이 가능하다
- SNS 계정을 이용한 간편 로그인이 가능하다
- 비밀번호, 아이디 찾기 버튼이 존재한다
튜토리얼 페이지 (후순위)
- 최초 접속 여부를 확인 후, 최초 접속한 사용자라면 튜토리얼 페이지를 보여준다
- 앱은 슬라이드(손가락 또는 버튼) 넘기게끔, 웹은 아래와 같이 구성하면 좋을 것 같다
- 바로 시작하기 버튼이 존재한다
카테고리 선택 페이지
- 나의 미션 생성 시 카테고리 선택 가능
- 나의 미션 페이지 카테고리 필터 기능
- 다른 사람의 미션들 보는 페이지에도 카테고리 필터 기능
- 현재 DB에 저장되어있는 카테고리를 리스트로 보여준다
- 아이콘, 카테고리 명, 간단 설명 한 줄 정도로 구성
- 카테고리 리스트 호버 시 미션 3 ~ 4개 정도가 미리 보이면 좋을 것 같다 (사용자 선택 용이)
- 이미 카테고리를 선택해 서비스를 이용 중인 사용자는 바로 나의 미션 페이지로 이동
미션 및 스케줄 선택 페이지
- 왼쪽이 미션 리스트, 오른쪽이 달력 형태로 구성
- 미션 리스트는 체크 박스 형태로 최대, 최소 미션 선택 개수가 정해져있다
- 마음에 드는 미션이 없을 경우 미션 추가가 가능하다
- 개인적으로 추가만 가능하게 하는 것이 나을 것 같다 ⇒ OK
- 사용자가 많아질 경우, 각자가 추가한 미션이 전체 DB에 저장되면 데이터가 너무 많아질 것 같다
- 정책적으로 미션 개수 제한
- 미션 선택 완료 버튼을 누르면 달력이 활성화된다
- 달력의 날짜를 드래그 또는 시작일, 종료일 지정을 통해 선택할 수 있다
- 일정을 선택하면 횟수를 지정할 수 있는 모달이 뜨고 선택 가능하다 (횟수 ≥ 미션 개수)
나의 미션 페이지
- 내가 선택한 카테고리, 미션 리스트, 일정 확인이 가능하다 (진행 중인 미션과 완료한 미션으로 구분)
- 특정 미션 완료 후 해당 미션을 클릭하면 사진과 후기를 작성할 수 있는 페이지로 이동한다
- 새로운 카테고리 추가 버튼이 존재하며, 클릭 시 카테 고리 선택 페이지로 이동한다
- 카테고리 페이지 - 현재 진행 중인 카테고리의 버튼은 비활성화
평가 및 후기 작성 페이지
- 사진 업로드 기능
- textarea를 이용한 후기 작성 기능
- 별점을 이용한 평가 기능
- 공유하기 버튼
- 하나의 미션마다 공유가 가능하게할지, 미션 일정에 맞춰 모든 미션을 완료했을 때 공유가 가능하게 할지 생각해보기
- 우선적으로는 모든 미션 완료했을때 공유, 된다면 하나의 미션마다 공유
- 공유는 사용자의 선택에 맡기기
사용자들의 미션 및 후기 확인 페이지
- 사용자들이 공유한 미션 리스트, 일정, 후기 확인이 가능하다
- 카테고리별 필터 기능
- 댓글, 좋아요 기능
- 최신순, 댓글순, 좋아요순 등으로 정렬 기능
- 시간이 된다면 다른 사람들의 미션 일정 나의 미션으로 추가하기 기능
설정 페이지
- 프로필 사진 변경 기능
- 닉네임 변경 기능
- 비밀번호 변경 기능
전체 흐름도
🎨 UI 와이어 프레임
🧩 컴포넌트 구조
👨👨👧👧 협업 준비
코드 스타일
- prettier
- eslint
네이밍 컨벤션
깃, 깃허브 관련
- 커밋 컨벤션
- 이슈, PR 규칙
- 코드 리뷰 규칙
📑 페이지 별 기능 명세
- 회원 가입 페이지
- 이메일, 닉네임, 비밀번호를 입력해 회원가입이 가능하다
- 시간이 된다면 이메일 인증 기능 또는 중복 확인 기능(이메일, 닉네임) 구현
- SNS 계정을 이용한 간편 회원가입이 가능하다
- 페이스북, 카카오톡, 네이버 중 하나 도전해보기
- 로그인 페이지
- 회원가입 시 입력한 이메일, 비밀번호로 로그인이 가능하다
- SNS 계정을 이용한 간편 로그인이 가능하다
- 비밀번호, 아이디 찾기 버튼이 존재한다
- 나의 루틴 페이지
- 나의 루틴을 확인할 수 있다
- 아이콘, 루틴명, 시간, 요일 확인 가능
- 카테고리 별, 진행 중인 루틴, 완료한 루틴에 대한 필터 기능이 존재한다
- 플러스 버튼을 이용해 새로운 루틴 추가가 가능하다 ⇒ 루틴 생성 및 수정 페이지로 이동
- 수정과 삭제 버튼이 존재한다
- 호버 시 수정 & 삭제 버튼 활성화
- 수정 버튼 클릭 시 루틴 생성 및 수정 페이지로 이동
- 삭제 버튼 클릭 시 해당 루틴이 삭제된다
- 완료한 루틴, 미완료 루틴의 색상은 다르게 표시된다
- 미션(루틴 세부) 페이지
- 루틴에 대한 세부 미션 확인이 가능하다
- 아이콘, 미션명, 시간 확인 가능
- 플러스 버튼을 이용하여 새로운 미션 추가가 가능하다 ⇒ 미션 생성 및 수정 페이지로 이동
- 기존 미션에는 수정과 삭제 버튼이 존재한다
- 호버 시 수정 & 삭제 버튼 활성화
- 수정 버튼 클릭 시 미션 생성 및 수정 페이지로 이동한다
- 삭제 버튼 클릭 시 해당 미션이 삭제된다
- 미션들은 드래그를 통해 위치 이동이 가능하다
- 플레이 버튼을 통해 루틴 시작이 가능하다
- 미션이 없을 경우 플레이 버튼은 비활성화된다
- 루틴 진행 페이지
- 플레이 버튼을 눌러 각 미션 시작, 멈춤이 가능하가
- 미션 완료 후 체크 버튼을 누르면 다음 미션으로 이동하고 시간이 셋팅된다
- 넘어가기 버튼을 클릭하여 미션을 패스할 수 있다
- 각 미션이 완료되면 아래의 미션 아이콘 요약의 색깔이 변하게된다
- 완료, 패스 색깔이 다르게 표시된다
- X 버튼을 통해 진행 중인 루틴을 종료할 수 있다
- 종료 시 현재까지 진행했던 루틴 기록은 삭제 및 초기화된다
- Alert 창을 이용한 경고 표시
- 루틴 요약 페이지
- 내가 진행한 미션들의 시간, 완료 여부 확인이 가능하다
- 후기 작성을 원하는 경우 후기 남기기를 눌러 후기 작성이 가능하다
- 후기는 사진, 이모티콘을 이용한 평가, 간단 글을 작성하고 등록할 수 있다
- 공유하기 기능의 경우 더 논의해보고 결정할 것
- 후기 작성을 원하지않는 경우 확인 버튼을 눌러 나의 루틴 페이지 또는 마이 페이지로 넘어간다
- 루틴 생성 및 수정 페이지
- 아이콘, 루틴 명, 요일, 시작 시간, 카테고리를 지정하여 생성 가능하다
- 카테고리의 경우 미리 관리자가 정해놓은 카테고리 중에서 선택이 가능하다
- 복수로도 가능하도록 생각
- 하나라도 미입력 시 완료 버튼 비활성화
- 미션 생성 및 수정 페이지
- 아이콘, 미션 명, 색상, 지속 시간 지정이 가능하다
- 하나라도 미입력 시 완료 버튼 비활성화
- 커뮤니티 페이지 (루틴 / 미션)
- 여러 사람들의 루틴, 미션 확인이 가능하다
- 루틴 게시글에는 댓글, 좋아요, 후기, 찜 기능이 존재한다
- 미션 게시글에는 좋아요와 찜 기능만 존재한다
- 게시글 생성 및 수정 페이지
- 플러스 버튼을 이용해 루틴 또는 미션 게시글 생성이 가능하다
- 모달 형태로 나의 루틴 또는 미션이 리스트로 보여지며 원하는 루틴 또는 미션을 선택해 게시글을 구성할 수 있다
- 간단한 텍스트로 게시글 내용을 구성할 수 있다
- 게시글 조회 페이지
- 특정 루틴 게시글 선택 시 루틴과 해당하는 미션들 확인이 가능하다
- 해당 루틴을 수행한 사람들의 리얼 후기 확인 및 작성이 가능하다
- 해당 루틴에 대한 질문 등을 댓글로 남길 수 있으며 확인이 가능하다
- 댓글에 대한 대댓글 기능이 존재한다
- 댓글 좋아요 기능이 존재한다
- 위 두 개 합칠지 생각해볼 것
- 마이 페이지
- 달력 형태로 구성되어있으며, 일별로 완료 루틴 확인이 가능하다
- 루틴을 달성한 정도에 따라 일별 색깔이 짙어진다
- 루틴은 리스트 형태이며, 완료한 루틴의 경우 클릭하면 루틴 요약 페이지로 이동 가능하다
- 요약 페이지에서는 이전에 작성하지 못한 후기 작성이 가능하다
- 설정 페이지
- 프로필 사진 변경 기능
- 닉네임 변경 기능
- 비밀번호 변경 기능
질문 리스트
- 루틴 생성 및 수정 페이지
- 시작 시간을 정하면 미션에서 설정한 시간에 맞게 종료 시간이 정해지는걸까?
- 루틴 진행 페이지
- 완료 체크를 하게되면 다음 미션으로 넘어가는건지
- 패스는 어떻게 동작하는지
- 두가지 디자인 어떻게 합치면 좋을지
- 커뮤니티 페이지
- 나의 루틴, 미션으로 가져가기 관련 논의