NHJeans/Outsourcing-project

✍🏻 교육 목적으로 제작한 프로젝트에요, 저작권은 1943CLASSIC에 있어요.

🍀 1943 클래식 리뉴얼 프로젝트

리액트 심화주차 아웃소싱 프로젝트로 1943 주점의 사이트를 리뉴얼 했어요
백엔드는 supabase를 이용했어요

0. 팀원 소개

남현재	이예린	임다은	강동석	김운성	전인화
프로젝트 세팅, 메뉴소개 페이지, 반응형	디자인, 고객의소리(cud), 시스템 컴포넌트	메인 페이지	고객의 소리(r)	지도 페이지	지도 페이지 시스템 컴포넌트

• 각자 맡은 역할을 다한 뒤에도, 다른 팀원의 작업을 도와주면서 완성했어요 🌟
  
  

0-1. 프로젝트 진행 기간

• 2024.06.17 ~ 2024.06.21
  
  

0-2. 프로젝트 중에는..

• 💬 활발하게 진행 상황을 공유하기 위해 zep과 slack을 사용했어요
• 💬 코드리뷰하는 문화를 지향해요
• 💬 pr에 1명 이상의 approve가 있어야 develop에 merge를 할 수 있도록 설정했어요
  
  

1. 사용한 라이브러리

tanstack-query

서버 상태 관리를 관리 하기 위해 사용하였으며, 비동기 로직을 간편하게 작성하기 위해 사용했어요

supabase

Supabase를 백엔드로 사용하여 실시간 데이터베이스를 사용했어요

react-router-dom

React Router를 사용하여 SPA의 라우팅을 관리했어요

styled-components

CSS-in-JS 라이브러리인 Styled Components를 사용하여 컴포넌트 스타일링을 했어요

swiper

모바일 및 웹에서 캐러셀 UI를 편리하게 사용하기 위해 사용했어요

react-intersection-observer

스크롤 이벤트를 감지하고, 뷰포트에 들어오는 요소를 처리하는 로직을 구현했어요, 이를 통해 지연 로딩(lazy loading)과 같은 최적화 기능을 쉽게 적용했어요

lodash

Lodash를 사용하여 배열, 객체 등의 데이터 조작을 효율적으로 처리하고, 다양한 유틸리티 함수를 통해 코드의 가독성과 재사용성을 높였어요

2. 대표기능

• 1943의 대표 메뉴를 볼 수 있어요
  
• 메뉴를 카테고리에 맞게 필터링하여 볼 수 있어요
  
• 1943 매장의 위치를 한눈에 확인할 수 있어요
  
• 고객의 소리를 남길 수 있어요
  

3. 상세설명

1. Swiper를 이용한 메인페이지 구현

• 1943의 대표적인 내용을 한눈에 볼 수 있어요
• Swiper와 내장 모듈인 Mousewheel를 사용하여 fullpage UI를 구현했어요
  
  

2. 카카오맵 API를 이용한 매장찾기 구현

• 1943의 매장 위치를 빠르게 찾을 수 있어요
• 원하는 매장을 쉽고 빠르게 검색할 수 있어요
• lodash의 debounce 함수를 사용하여 사용성을 높였어요
  
  

3. 메뉴소개 페이지 구현

• 1943의 대표 메뉴를 볼 수 있어요
• 카테고리 별로 구분해서 볼 수 있어요
• react-intersection-observer를 사용하여 더욱 빠르게 볼 수 있어요
  
  

4. 고객의 소리 CRUD 구현

• 고객이 올린 게시글을 볼 수 있어요

• 비회원도 자유롭게 글을 작성할 수 있어요

• 작성할때 입력했던 비밀번호를 입력해야 볼 수 있어요
• 수정과 삭제는 본인만 할 수 있어요

• 수정 페이지에서 새로고침을 하거나, 잘못된 경로로 접근한 경우 에러 UI를 보여줬어요
  
  

5. 반응형 UI 지원

• 반응형 UI를 지원해요
• 어디에서든 최적화 된 화면으로 볼 수 있어요