📕 프로젝트 소개
프로젝트 개요
- 기간 : 23.12.05. ~ 23.12.11 1주
- 인원 : FE 4명
- 링크 : Github / Site
사진 및 영상
프로젝트 설명
빽다방 소개 페이지의 아웃소싱을 받았다고 가정하고 만든 웹 페이지로, 반응형 디자인, 유튜브 홍보 영상, 매장 안내에 지도 추가, 선호도 조사 등을 추가하여 만든 프로젝트
기술 스택
- <em>공통 및 배포</em> : yarn, Git, Github, Vercel, Glitch
- <em>Front-End</em> : React, React-Query, Axios, Styled-Components, React Router, Redux(RTK), React Youtube, React KaKao Maps,
- <em>Back-End</em> : json-server
✅ 주요 구현 사항
홈 페이지 + Youtube Player 구현
- Youtube API를 이용하여 Carousel 형태로 홈페이지 구성
- 반응형 페이지 구현
JSON-Server를 이용한 DB 간단 구현
- json server 이용하여 Product 데이터 관리 및 Glitch 배포
Multiple Form을 적용한 설문조사 페이지 구현
- 커스텀 훅 + Context API를 이용하여 사용자 입력 데이터, 현재 폼 상태 관리
- 단계별 컴포넌트 동적 로딩을 통해 각 단계에서 필요한 컴포넌트 랜더링
- 각 단계의 입력 데이터에 대한 유효성 검사를 수행하고, 그 결과에 따라 네비게이션 버튼 활성화 상태를 조건부로 제어
Product 페이지 구현
- 스켈레톤 UI 구성을 통해 사용자 경험 향상
- 반응형 페이지 구현
🛠️ 트러블 슈팅
Kakao Map API 상태 관리
- kakao map 관련 로직 분리하면서 kakao map api 구조상 map 인스터스를 이용해서 조작하는 것이 필수이나 useRef 혹은 useState 사용 시 원할하게 조작하는데 한계가 있음.
- 커스텀 훅을 통해 로직을 분리하고 클로저를 이용하여 인스턴스를 관리하여 리액트 랜더링 사이클과 독립적으로 맵 인스턴스를 관리할 수 있도록 변경하여 문제 해결