songnoin / short-form-challenge-front

Dday7 숏폼플랫폼 챌린지

Dday Chill

팀원

//6조 leonduri
let 팀장 = '김효진';

const 프론트 = ['김효진', '송경환', '황길성'];
const 백엔드 = ['박진혁', '김해림'];
const 디자인 = ['박지현'];

서비스 컨셉

• 브랜드 이름: Dday7(chill)

   단기목표를 정해서 습관을 들이기 위해 7일동안 숏폼 영상을 올리는 플랫폼입니다.
  

• 자신이 정한 목표 카테고리에 영상을 올리고 사람들과 공유합니다.

• 7일 연속 영상을 업로드하면 뱃지(보상)를 받을 수 있고, 혼자 하는 것보다 사람들과 영상을 공유하면서 함께 의지를 다지기위한 목적을 가지고있습니다.

배포

🔗 배포 링크 이동

(현재 백엔드 배포 중지로 서비스 이용 불가)

기술 스택

• nextjs - 단기간에 mvp서비스를 빠르게 만들기 위해 사용하였습니다.
• eslint - 팀원들과 협업을 위한 툴로 선택하였습니다
• react-query - 상태관리라이브러리를 채용하지않아 상태 관리와 데이터캐싱을 위해 사용하였습니다
• react-hook-form - 빠른 validation 기능구현을 위해 사용하였습니다.
• typescript - 컴파일 단계에서 오류를 빠르게 찾을수 있어 빠른 구현을 위해 사용하였습니다.
• styled-components - 팀원들이 가장 익숙한 css 전처리기라 사용하였습니다.

주요 로직

• 유저에게 세션스토리지 token 값을 검사해서 회원전용 페이지에 진입 시 가입유도 모달을 띄우게 했습니다.
• 회원가입 폼, 비디오, 이미지의 용량과 파일타입 등을 validation 하여 api 호출 전에 진행을 막았습니다.
• react-query 에서 제공하는 infinite query 를 이용하여 가장 마지막 비디오의 아이디를 백엔드로 요청보내 다음 비디오 부터 10개 가져오는 방식으로 무한스크롤을 구현하였습니다.
• 이미 존재한 닉네임인 경우 회원가입 버튼 누르기 전 유저가 알 수 있게 했습니다.

프로젝트 실행

$ yarn
$ npm run dev

페이지

도전 리스트 & 상세

회원가입 & 로그인

프로필

타겟 고객(영상 업로드 고객, 영상 시청 고객)

1. 공통
   1. 목표를 세우되 3일 이상 실천하지 못하는 고객
      1. ex) 아가리어터 등
   2. 같은 목표를 가진 사람과 함께 목표를 실천하고 싶은 고객
   3. 자신의 일상을 공유하는 것을 좋아하는 MZ세대
2. 운동 (Health)
   1. 운동 등 취미를 공유하고 싶은 고객
   2. 운동 방법을 공유 하고 싶은 고객
   3. 운동에 대한 조언을 받고 싶은 고객
      1. 댓글 기능 추후 개발 예정
3. 공부 (study)
   1. 공무원 등 장기 시험을 준비하는 고객
   2. 혼공 생활에 긴장감을 주고 싶은 고객

장기적인 비지니스 모델

1. 운동 (Health)

2. 공부 (Study)