스터디 관리 프로젝트 - 기획

Seuling·2023년 2월 22일
0
post-thumbnail

프로젝트를 하게된 계기...?

먼저 프로젝트를 하게된 계기라기보단, 내가 개발자가 되려한 계기를 생각해보면
나는 개발자라는 직업은 내 머릿속으로 생각해 낸것을 결과물로 만들어낼 수 있는 사람이라 되고싶었다.
하지만, 정작 내가 되고싶은 개발자와는 거리가 멀게 공부를 하고 있었다는 생각이 들었다.
그래서, 혼자서 처음부터 끝까지 하나라도 무엇이라도 만들어보자는 생각이 컸다.

또한, 나는 혼자 공부하는 것 보다는 여럿이서 함께할때 더 큰 시너지효과가 나며 공부를 더 열심히 하는 사람이라는 것을 알고 스터디를 구하던중 인프런에서 아래와 같은 글을 보고 루틴스터디를 들어가게되었다.

스터디를 들어가서 막상 해보니 9시, 12시, 18시마다 공부 인증을 하게 되는데 스터디 장이 여러명의 공부내용을 확인을 일일이 하는것이 1~2분이여도 모이면 엄청난시간이 된다는 것을 생각하며 이걸 자동화해주는 프로그램이 있으면 너무좋겠다라는 생각이 들었다.

개인프로젝트를 해야겠다는 생각을하고 있던 와중에 어떤 프로젝트를 해야할지 계속 고민을 해오던 와중 위와 같은 프로그램을 웹사이트로 만들어보는 것을 기획하게 되었다.

그리고 나 말고도 이런 루틴 스터디의 수요가 많다는것을 스터디 모집에서 알게되었다..

프로젝트 목적

취준생들 사이에서, 온라인으로 모각코를 한다던지, 습관을 형성해주고 루틴을 만들고자 하는 스터디가 많이 있음, 그 스터디의 관리를 조금 더 효율적으로 해주기 위해!

사용대상

  • 모각코 혹은 루틴스터디를 참여하고자하는 사람 (대부분이 취준생)

핵심기능

  • 매일 같은 시간에 todolist올리기
    • 9시 전까지 todolist 작성완료되어야함
    • 9시 이후에 입장하면 벌금리스트에 push
  • 일정한 시간마다 얼마나 했는지 체크해주고
    • todolist 마다의 링크 입력시 체크 기능 (블로그 혹은 사진 첨부시 체크)
    • 9시, 12시, 18시 인증 스케쥴러?
  • 다른사람의 체크리스트 현황도 보여주고
    • 기존의 todolist와는 다른 점!
  • 벌금현황보이기
    • 9시 12시 18시 시간마다의 벌금 현황 업데이트 (스케쥴러)
    • 종료시(18시)에 오늘의 벌금 내역 공유

추가구현?

  • 캘린더 구현해서 이전 기록 연동
  • 통계
    - 팀의통계
    1. 벌금 통계 (한달)
    2. 차트로 제일성취율 높은사람 보여주기? 아니면, 전체 성취율을 한개의 차트로 보여주기
    - 개인의 통계
    1. 벌금 통계 (한달)
    2. 할 일목록 몇 개 채웠는지 (하루 , 한달)
  • 인증시간 푸쉬알림
    이 알림이 카톡으로 갈 수 있는 방법이 있을까? 카톡에서 시간마다 광고알림 오는거처럼?
  • 테스트코드 (JEST)
  • 스터디 모집부터 여기서할수있게 버전업!
  • 나중엔 공부시간 인증 타이머까지 넣어보면어떨까?

User Flow

홈페이지 입장하기 버튼 클릭 → 카카오로그인 → 방번호 입력 → 방입장 → 체크리스트 입력 → 체크리스트에 링크혹은 사진 입력시 url 체크 → 누가 몇퍼센트를했고, 벌금 리스트 누구인지 보이는정도

기술스택

  • TypeScript
  • SASS (SCSS)
  • React
  • strapi

DB

member, room, todo, fine 의 테이블 필요

와이어프레임


처음에 카카오 오븐을 통해서 하고싶은걸 먼저 그려보았다.
하지만 너무 디자인이 안이쁜걸.....
그래서 핀터레스트 및 여러 레퍼런스 사이트를 보면서 디자인을 생각하던와중에
github의 Projects 부분을 계속 보고있다가 문득 떠올랐다. 이 UI도 괜찮겠다!!!

이제 내가 봤던 레퍼런들에서 사용 하고싶은 부분만을 조립해보았다.

이제 와이어프레임을 다시 그려보았다.

마지막으로, 최종적인 UI가 나왔다.

작업순서

퍼블리싱(1week) -> api & data binding (1week) -> 스케쥴러 (1week)

profile
프론트엔드 개발자 항상 뭘 하고있는 슬링

0개의 댓글