Washfit는 차를 깨끗하게 만드는 "세차 용품"에 대한 기본 정보와 유해성 유무를 쉽게 찾아볼 수 있는 웹 서비스입니다.
세차장 지도 페이지
- 카카오 오픈 api을 이용하여 사용자 주변 세차장 위치와 세차장 정보를 볼 수 있습니다.
- 내 위치로 이동 버튼을 통해 접속 위치로 이동할 수 있습니다.
즐겨찾기 페이지
- 사용자가 찜한 세차 용품들을 볼 수 있습니다.
- 조회순 / 특이사항 / 최신순 / 추천순으로 세차용품들을 필터링 할 수 있습니다.
홈페이지
- 공지사항을 슬라이드로 연속해서 볼 수 있습니다.
- 마이페이지에서 등록한 정보를 토대로 회원들이 많이 찜한 세차 용품을 추천 받을 수 있습니다
- 조회순 / 특이사항 / 최신순 / 추천순에 따라 세차 용품을 볼 수 있습니다.
채널 페이지
- 10만명 이상의 구독자를 보유한 유명 유튜버 5명을 추려 최신 세차 관련 영상을 추천 받을 수 있습니다.
검색 페이지
- 2000개 이상의 세차 용품을 조회순 / 특이사항 / 최신순 / 추천순으로 검색할 수 있습니다.
세차 용품 상세 페이지
- 세차 용품의 이미지와 제품명, 브랜드, 업체명, 제품용도, 응급처치 등 다양한 정보를 제공받을 수 있습니다.
- 사용자들의 직접적인 경험을 리뷰를 통해 확인할 수 있습니다.
- 찜 버튼을 이용해 나만의 세차 용품을 즐겨찾기 페이지에 담을 수 있습니다.
- 카카오 공유하기 기능을 이용해 타인과 세차용품을 공유할 수 있습니다.
인증
- 아이디 / 비밀번호 / 이메일 / 성별 / 연령층을 토대로 회원가입 할 수 있습니다.
- 회원가입된 회원 정보를 이용하여 로그인 할 수 있습니다.
- 카카오 계정을 이용하여 로그인 할 수 있습니다.
- 아이디를 잊어버렸다면 가입된 이메일을 통해 아이디를 찾을 수 있습니다.
- 비밀번호를 잊어버렸다면 가입된 아이디를 통해 비밀번호를 찾을 수 있습니다.
- 15분마다 토큰 인증을 통해 로그인 자동 연장이 가능하고, 인증 오류 시에는 로그인 페이지로 돌아갑니다.
마이페이지
- 내 프로필을 수정할 수 있습니다.
- 5단계의 차량 정보와 3단계의 세차 용품의 정보를 입력하여 회원들이 많이 사용하는 세차 용품을 추천 받을 수 있습니다.
- 문의하기를 이용하여 사용자가 불편했던 점이나 개선하고싶은 사항을 전달 받을 수 있습니다.
- 비밀번호 변경을 할 수 있습니다.
- 백엔드팀과 디자이너 간의 비동기적 소통 및 협업 경험
- CI/CD 배포, 빌드, 테스트 자동화 파이프 라인 구축
- storybook을 이용한 시각적 회귀 테스트 및 vitest, msw를 이용한 테스트 코드 작성
- 프로젝트 설정부터 실제 운영까지의 경험
- 로컬 / 개발 / 운영 서버를 분리하여 작업한 경험
| 임병욱 | 백서영 | 조기범 |
|---|---|---|
 @bottlewook |
 @seoye0ng |
@eun-hak |
프로그래밍 언어
프레임워크
스타일
전역 상태 관리
테스팅
협업 툴
버전 관리
API
라이브러리
배포
그 외
- 초기 랜더링 속도 향상을 위해 SSR 환경 도입 및 prefetch를 통한 유저 경험 최적화
- 사용자의 차량 정보와 자주 사용하는 세차 용품을 등록하기 위해 퍼널구조를 통한 유저 경험 최적화
- 유저 경험 최적화를 위한 무한 스크롤 구현
- 리플로우와 리페인트 과정을 생략하기 위해 transform 속성 사용
- throttling을 이용한 무분별한 스크롤 이벤트 방지
- 웹 폰트 다운로드 시간을 줄이기 위해 woff2 확장자 추가와 subset 사용 및 3초 이상 폰트가 다운로드 되지 못한 경우, 기존 폰트를 사용하도록 fallback 설정
- 필요한 시점에 이미지를 불러오도록 lazy loading을 적용 및 layout shift를 방지하기 위한 Next.js image 태그 적용
- 렌더링 시 불필요한 연산을 줄이기 위해 useCallback, useMemo, React.memo 사용
- dynamic import를 사용하여 빌드 타임이 아닌 런타임에서 컴포넌트를 랜더링 하도록 코드 스플리팅 적용
- react-hook-form을 사용하여 불필요한 리랜더링 방지 및 마운팅 속도 증가
- 불필요한 api 요청을 방지하기 위해 tanstack-query를 활용한 데이터 캐싱
-
초기 환경 설정
- 린트 및 스타일 린트 설정
- tanstack-query 보일러 플레이트 제작
- redux-toolkit 보일러 플레이트 제작
- storybook 보일러 플레이트 제작
- vitest 보일러 플레이트 제작
- msw 보일러 플레이트 제작
- pretandard 폰트 설정
- 컬러 팔레트 제작
-
테스트
- 25개 이상의 공통 컴포넌트 제작과 storybook을 이용한 데이터 시각적 회귀 테스트 및 chromatic 배포
- vitest를 이용한 회원가입 페이지 유효성 검사 로직 안정성 향상 및 코드 품질 개선
- 백엔드의 api 제작 기간이 길어짐에 따라 개발 의존성을 배제할 수 있도록 msw를 이용한 mocking 작업
-
배포 환경
- CI/CD 배포,빌드 ,테스트 자동화 파이프 라인 구축
- vercel과 vultr을 이용한 개발 서버 배포
- docker와 amazon ec2를 이용한 운영 서버 배포
| 태그 | 설명 |
|---|---|
feat: |
새로운 기능 추가 및 개선 |
style: |
코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 |
design: |
CSS 등 사용자 UI 디자인 변경 |
fix: |
기존 기능 수정 (주로 안 좋았던 것에서 좋은 것으로) |
bug: |
버그 수정 |
refactor: |
결과의 변경 없이 코드의 구조를 재조정한 경우 |
test: |
테스트 코드 추가 |
docs: |
코드가 아닌 문서를 수정한 경우 |
remove: |
파일을 삭제하는 작업만 수행 |
rename: |
파일 또는 폴더명을 수정하거나 위치(경로)를 변경 |
asset: |
이미지 등 assets 파일 추가 |
chore: |
그 외 기타 수정 |