돈워리 (DonWorry)

프로젝트 개요

• 기획 의도 : 축의금 선정의 어려움 해결을 위한 커뮤니티 웹 서비스
• 팀원 : 디자이너 2명, 프론트엔드 2명, 백엔드 2명
• 🔗 깃허브: 깃허브 링크
• 📅 개발 기간: 2024.01 ~ 2024.03

프로젝트 아이디어 도출 포인트

주요 기능 및 역할

1. 친밀토 테스트

• 메인 페이지 퍼블리싱
• 테스트 진행
  • 2개의 사전 질문과 9개의 질문으로 구성된 친밀도 확인 테스트
  • 사용자 이탈률을 낮추기 위한 퍼널 UI
• 테스트 결과
  • 테스트 결과 비동기 통신 성공 전 로딩 기능
  • 테스트 결과 이미지 저장
  • 카카오톡 공유 기능

어려웠던 점과 해결 방안

1. 친밀도 테스트 결과 페이지 LCP 단축

문제점

• 테스트 완료 이후 3초의 로딩 존재, 로딩 이후 결과 페이지로 이동시 의문의 지연 시간 발생

원인

• 3초의 로딩 이후, 결과 페이지로 이동시키는 로직이 문제라고 판단

해결 방법

• LCP 1.5초에서 0.03로 단축, router.prefetch 매소드를 활용하여 로딩 중, 결과 페이지 서버 컴포넌트의 페이로드를 미리 다운로드하여 LCP 단축

2. 코드 리뷰 환경 개선

문제점

• 컴포넌트 코드 리뷰 시, UI 동작을 파악하는데 어려워 정확한 코드 리뷰가 불가

원인

• 테스트 코드의 부재 및 사용 경험이 없기 떄문이라고 규명

해결 방법

• github-action을 활용하여 PR 생성 시 스토리북 배포 URL을 Preview로 제공하여 컴포넌트 기능을 테스트할 수 있는 환경으로 개선

기술 스택

• 프론트엔드: Next.js (App router), React-hook-form, TailwindCSS, Typescript, axios, Framer-motion, Storybook
• 상태 관리 및 데이터 검증: Tanstack-query, Zod
• 코드 품질 관리: ESLint, Prettier, Husky
• 배포 환경: Vercel, Chromatic