리액트 심화 프로젝트 (1)

와이어 프레임

프로젝트 주요 기능

1. 날씨 데이터를 바탕으로 최적의 캠핑 장소 추천 🌤️
   • 지역별 날씨 정보 제공.
   • 날씨에 적합한 장소 추천 (해/비/기타 카테고리별).
2. 캠핑 장소 리뷰 📝
   • 사용자가 리뷰를 남기고 다른 리뷰 확인 가능.
3. 좋아요 기능 ❤️
   • 선호하는 장소에 좋아요 추가 및 관리.
4. 회원가입/수정 👤
   • 사용자 프로필 생성 및 수정 (도전: 소셜 로그인).
5. 캠핑장 근처 편의시설 추천 🛒
   • 장소 주변 편의시설 필터링.

---

사용 API

• 카카오지도: 장소 정보와 지도 렌더링 지원.
• 오픈웨더API: 실시간 날씨 데이터 제공.
• 고캠핑 : 캠핑장 정보제공.

---

주요 기능 상세

1. 회원가입/로그인 및 수정
   • 이메일 및 비밀번호를 통한 계정 생성.
   • 프로필 이미지 업로드 기능.
   • (도전 과제: 소셜 로그인 지원)
2. 좋아요
   • 캠핑 장소에 좋아요 추가/삭제.
   • 내가 좋아요를 누른 장소 목록 확인.
3. 댓글 작성 및 관리
   • 장소에 대한 리뷰 댓글 작성 및 수정/삭제.
4. 캠핑 장소 추천
   • 지역별 날씨 정보를 기반으로 최적의 캠핑 장소 제공.
   • 다양한 날씨 카테고리(맑음/비/기타)별 장소 필터링.
5. 편의시설 추천
   • 장소 근처 편의시설(마트, 화장실, 주차장 등) 추천.
   • 특정 필터 조건으로 시설 검색 가능.
6. 도전 과제
   • 웹 푸시 알림: 갑작스러운 날씨 변화 시 알림 제공.
   • 다크모드: 시스템 설정에 따른 다크모드 지원.

사용 라이브러리

• Supabase: 데이터베이스 및 인증.
• TanStack Query: 서버 상태 관리.
• Zustand: 클라이언트 상태 관리.
• Tailwind CSS, ShadCN, Lucide-React: 스타일링 및 UI 아이콘.
• React-Kakao-Maps-SDK: 카카오지도 연동.
• SweetAlert2: 알림 및 경고 메시지.

 

좋아요, 댓글, 유저에 대한 스키마는 이런 형식으로 사용하였다.