/Front-end

TODOWITH 프론트엔드 : React, Typescript, Recoil, React Query

Primary LanguageTypeScript

image

항해99 7기 39개 팀 중 1위 수상😎

👉투두윗 사용해보기

Notion 링크
소개 영상

TODO 와 WITH 을 합쳐 혼자만이 아닌 함께하는 즐거움을 주고, 이를 통해 재미있게 목표를 계획하고 달성할 수 있도록 도와주는 서비스


프로젝트 소개

🛠 Architecture

image

⏰ 프로젝트 타임라인

  • 6월 24일 ~ 8월 5일 (6주)
  • 7월 28일 배포 & 마케팅 & UT 시작
  • 7월 31일 순 방문자 350명, 누적 유저 150명 돌파
  • 8월 5일 순 방문자 500명, 누적 유저 200명, 작성 TODO 3000개, 유저테스트 53개 달성

🚀 페이지 별 기능 보기

😃 간단하고 안전한 회원가입

  • 구글, 네이버, 카카오를 통한 소셜 로그인 및 이메일 인증을 통한 회원가입 로그인/회원가입

😃 귀여운 캐릭터가 성장하고 움직이는 메인페이지

  • 캐릭터와 아이템은 Todo 완료에 따라 변화함으로써, 사용자에게 To Do 달성을 더 재미있게 할 수 있도록 흥미와 동기를 부여 메인 페이지

😃 계획 작성, 목표 달성을 위한 TO-DO 리스트 작성

  • 오늘의 할일, 미래에 해야 할 일 등 TO-DO 리스트 작성 및 완료 Todo 리스트

😃 커뮤니티를 통한 With To Do 진행 및 일상 공유

  • 커뮤니티에서 TO-DO 를 함께 진행할 사람들을 모으기 커뮤니티

😳 친구와 함께 공유 가능한 TO-DO 리스트 및 캐릭터

  • 친구 추가 후 TO-DO 리스트 공유 가능😃 친구와 소통하며 함께 TO-DO 를 진행할 수 있는 채팅방 친구

📢 알림 기능

  • 알림페이지에서 이벤트(출석 도장), 친구(친구 요청, 수락, 거절), 캐릭터(스텝업, 레벨업) 관련 알림을 확인 가능
  • 친구요청, 수락, 거절 알림의 경우 전체 페이지에 팝업됨
  • PWA 배포로 PC 백그라운드에서도 알림 확인 가능 알림

💬 채팅 페이지

  • 커뮤니티의 With To Do 기능을 통해 함께 TO-DO 를 진행 중인 사람들 또는 친구와의 일대일 채팅 가능 채팅

😮 나만의 프로필 사진과 닉네임

  • 프로필 사진과 닉네임, 비밀번호를 변경 가능 프로필

😎 TO-DO 완료하고 상품을 받을 수 있는 이벤트

  • 오늘의 TO-DO 를 전부 완료 시(당일 날짜로 지정한 미완료 TO-DO가 없는 경우) 도장을 지급
  • 도장의 개수가 누적 3개가 모이면, 응모권으로 교환하여 이벤트 참여 가능 이벤트

🛠 Tools

Front-end







이름 포지션 개인 깃허브 or 이메일 담당
심아영 프론트엔드 https://github.com/ccimayoung [부리더]
1. CICD/무중단배포 2. 로그인/회원가입/온보딩
3. 메인페이지 4. 채팅 5. 친구목록/친구페이지
6. 알림 7.인터셉터 로직
조윤경 프론트엔드 https://github.com/yooooonk 1. 투두 페이지 2. 커뮤니티 페이지
3. 이벤트페이지 4. 공통컴포넌트

🔥프론트앤드 이슈 및 트러블슈팅

➡️ 브라우저 호환성

문제 : 타 브라우저는 정상 작동하나 네이버 앱과 삼성 기본 브라우저에서 메인페이지의 경험치 바가 마운트되지 않음.

원인 : 차트 JS의 그라데이션 캔버스 함수가 원인이었음.

접근 : 안드로이드에서 로컬 환경테스트를 함. navigator.userAgent 로 브라우저 종류 구별정보를 파악함.

결론 : 문제 브라우저에서 경험치바가 그라데이션이 없는 1가지 색으로 보이게 할 계획이었으나, 디자이너님의 요청으로 타 브라우저 사용 유도함.
자세히보러가기


➡️ 마운트 속도, 렌더링 최소화

문제 : 다른 페이지는 괜찮지만, 메인 페이지를 마운트하는 시간이 오래 걸림. 프로젝트 전체 마운트 속도를 줄이고 리렌더링을 감소하고자 분석함.

원인 : 초기 메인 페이지에는 여러 useState, useRecoilState, useEffect, onClick 이벤트가 있어서 마운트가 오래 걸리고 리렌더링 횟수가 많았음. 더군다나 10mb 이상의 gif 애니메이션과 차트js, 캔버스함수까지 실행되어 3G 테스트 시에는 더 악화되었음.

접근 : useRecoilState의 수를 줄였고, 같이 실행되는 State들은 객체 형식으로 합쳤으며 onSuccess, onError 후처리와 onClick은 공통 로직을 만들어서 리렌더링 수를 줄였음. 메인페이지에서 수행하는 많은 정보 탐색 작업을 페이지를 분리하여 유저 상황에 맞는 페이지만 거치게끔 했음. 유저 데이터를 받아오는 상태가 loading 일 때는 캐릭터 애니메이션을 넣어 이탈률을 줄이고, gif의 용량을 줄였음.

결론 : 로드타임과 LightHouse 테스트 점수가 향상. 문제상황에서는 빠른 3G 기준 로드타임 18.22초였으나, 수정 후에는 빠른 3G 기준 로드타임 11.58초로 빨라짐
자세히보러가기


➡️ 캐릭터 선택 API 와 유저 데이터 API 충돌

문제 : 투두윗의 튜토리얼에는 캐릭터를 선택하는 페이지가 있음. 캐릭터를 선택하고, 유저데이터에 post하는 api를 호출하면 "선택 완료되었습니다" 팝업 후 메인으로 넘어가지 않고 바로 "이미 캐릭터가 존재합니다" 의 팝업이 노출되는 문제

결론 : Query Cancellation 사용
자세히보러가기


➡️ map 함수로 인한 팝업 중첩

문제 : 모든 페이지에 동일하게 배경이 불투명한 팝업 디자인을 사용했는데, 친구삭제와 채팅방 나가기 팝업의 경우 배경이 불투명이 아닌 검정색이 나옴

결론 : 팝업 컴포넌트가 map함수 안에 있었는데, 이를 map 함수 밖으로 빼냈다.

자세히보러가기