Ea-Syno.dev

  1. Work>

  2. 빽다방 아웃소싱

📕 프로젝트 소개

프로젝트 개요

  • 기간 : 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 사용 시 원할하게 조작하는데 한계가 있음.
  • 커스텀 훅을 통해 로직을 분리하고 클로저를 이용하여 인스턴스를 관리하여 리액트 랜더링 사이클과 독립적으로 맵 인스턴스를 관리할 수 있도록 변경하여 문제 해결