WeatherWise-Client

WeatherWise-Client

프로젝트 주요 기능

1. 로그인 및 회원가입

• 일반 회원가입: 이메일, 비밀번호, 닉네임 입력.
  • 비밀번호 확인 및 닉네임 중복 방지 처리.
  • 닉네임은 숫자만 입력 불가 (프론트엔드에서 정규식 검증).
• 카카오 소셜 로그인: 카카오 계정을 통한 간편 로그인.
• 기술적 구현:
  • JWT를 사용해 사용자 인증 및 세션 관리.
  • 회원가입 성공 시 모달 팝업으로 UX 향상.

2. 사용자 개인 날씨 경험 설문조사

• 사용자 맞춤형 체감 날씨 제공을 위한 데이터 수집.
• 추위를 잘 타는지, 더위를 잘 타는지 등 설문 결과는 AI 날씨 요약에서 활용.

3. 메인 화면

• 실시간 위치 기반 날씨 제공:
  • 현재 위치의 온도, 최고/최저 기온, 날씨 상태.
  • 사용자 맞춤형 AI 날씨 요약.
• 기상특보 채팅방:
  • 기상특보 발생 시 채팅방 생성 및 입장 가능.
• AI 챗봇:
  • 오른쪽 하단 챗봇 버튼으로 날씨 관련 대화 가능.
• 위치 변경:
  • 카카오맵 API를 활용한 위치 변경 기능 제공.

4. 기상특보 채팅방

• 특징:
  • 현재 위치에 내려진 기상특보에 따라 채팅방 자동 생성.
  • 실시간 참여자 수 표시.
• 기술적 구현:
  • STOMP 프로토콜을 사용한 실시간 채팅.
  • JWT를 STOMP 헤더에 포함해 사용자 인증 처리.

5. 커뮤니티

• 위치 기반 게시글 확인:
  • 현재 위치 반경 5km 내 게시글 표시.
  • 위치 변경 시 게시글 리스트 업데이트.
• 게시글 작성:
  • 카카오맵 API로 위치 설정 가능.
  • 제목과 본문 글자 수 제한(20자, 150자)으로 사용자 경험 향상.
• 좋아요/싫어요 버튼으로 게시글 신뢰도 평가.

6. 미션

• 날씨 기반 미션 제공:
  • 예: "자전거를 타세요", "텀블러를 챙기세요".
  • 아침, 점심, 저녁 시간대별로 최대 3개의 미션 생성 가능.
• 미션 인증:
  • 사용자가 사진을 첨부하면 AI가 인증 처리.
  • 인증 성공 시 포인트 지급.

7. 내 정보

• 사용자 정보 관리:
  • 현재 레벨, 완료한 미션 수, 포인트 확인 가능.
  • 닉네임 중복 방지 및 수정 가능.
• 이벤트:
  • 진행 중인 이벤트에서 쿠폰 발급.
  • 발급받은 쿠폰 확인 가능.
• 내가 작성한 글 관리:
  • 작성한 글 리스트 및 삭제 기능 제공

8. 랭킹

• 포인트 및 레벨 기반 순위 제공:
  • 사용자별 랭킹 리스트.
  • 내 순위 하이라이트로 UX 향상.
  • 닉네임 검색 기능 제공.

---

기술 스택

• Frontend:
  • React.js
  • Axios
  • Kakao Map API
• Backend:
  • Spring Boot
  • JWT 인증
  • STOMP (WebSocket)
  • MySQL
  • AI 통합
• AI:
  • OpenAI API를 활용한 챗봇
  • AI 이미지 분석으로 미션 인증

---