🌧️ 빗속말 (Raindrop) - Frontend

빗속말은 비오는 날에만 익명 메시지를 확인할 수 있는 모바일 웹 서비스입니다. 소중한 마음이 담긴 메시지를 받고, 비가 내리는 특별한 날에만 확인할 수 있는 설렘을 선사합니다.

배포 링크

🏡 LG U+ 유레카 2기 프론트엔드반 6조 미니 프로젝트

💧 서비스 소개

빗속말은 사랑하는 사람들, 그리워하는 사람들이 나눌 수 있는 특별한 메시지 플랫폼입니다. 소중한 사람에게 마음을 담은 메시지를 전송하고, 비가 내리는 날에만 그 메시지를 확인할 수 있는 독특한 경험을 제공합니다.

• 🌦️ 날씨 연동: 사용자의 현재 위치 기반으로 날씨를 확인하여 비오는 날에만 메시지 열람 가능
• 🔒 익명성: 마음껏 솔직한 마음을 전할 수 있는 익명 메시지 시스템
• 🔗 간편한 공유: 나만의 고유 링크로 친구들에게 쉽게 공유
• 💌 특별한 경험: 비 오는 날에만 열리는 메시지로 특별한 감성 경험 제공

✨ 주요 기능

기능	설명
카카오 로그인	별도 회원가입 없이 카카오 계정으로 간편하게 로그인
메시지 남기기	익명으로 상대방에게 마음이 담긴 메시지 전송
비 오는 날 메시지 확인	사용자 위치 기반 날씨 확인 후 비 오는 날에만 메시지 열람 가능
메시지 공유	개인 고유 링크를 통해 친구들에게 쉽게 공유
메시지 관리	받은 메시지 보관 및 삭제 기능

📱 시연 화면

로그인 & 온보딩	scene - 게스트	scene - 메시지 상세 확인
메시지 작성	버블 선택	버블 등록 안내 모달

🎬 시연 영상

🛠️ 기술 스택

Frontend

• 언어 & 프레임워크: React, TypeScript, Vite
• 3D 모델 & 배경: React Three Fiber
• 스타일링: TailwindCSS, ShadCN
• 상태 관리: Zustand, TanStack Query (React Query)
• 라우팅: React Router
• API 통신: Axios
• 인증: Kakao OAuth

Backend

• 프레임워크: Spring Boot
• 데이터베이스: MySQL
• 인프라: AWS, Docker
• 기타: MyBatis, Gradle

👥 팀원 소개

한동찬	이시현	박지회	이은비
@pillow12360	@sihyuuun	@jihoi0615	@silverain02

⭐ 사용자 경험 개선 포인트

📱 모바일 최적화

• 반응형 디자인으로 모든 모바일 기기에서 최적화된 경험 제공
• 데스크톱에서도 일관된 사용성을 위해 모바일 뷰포트 적용
• 직관적인 터치 인터페이스와 제스처 기반 상호작용

🎨 감성적인 디자인

• 비 오는 날의 분위기를 살린 푸른 색상 팔레트와 물방울 모티프
• 여러 테마와 버블 모델을 선택하여 사용자 커스터마이스 기능 제공
• 애니메이션과 트랜지션으로 부드러운 사용자 경험
• 감정을 전달하는 친근한 일러스트레이션과 아이콘

⚡ 성능 최적화

• 데이터 캐싱 및 리페칭으로 빠른 로딩 속도
• 이미지 최적화 및 지연 로딩
• R3F 및 HTML 분리한 레이아웃 컴포넌트 적용 및 이벤트 처리

🔄 직관적인 상태 피드백

• 로딩, 에러, 성공 상태에 대한 명확한 시각적 피드백
• 토스트 알림으로 주요 액션 결과 안내
• 날씨 상태에 따른 인터페이스 변화

💭 프로젝트 회고 및 개선점

성과

• React Three Fiber를 통한 높은 사용자 경험 제공
• 카카오 OAuth를 활용한 간편 로그인 구현
• 날씨 API 연동으로 위치 기반 서비스 구현
• TanStack Query를 활용한 효율적인 데이터 관리

배운 점

• OAuth 인증 플로우 구현 경험
• 외부 API 연동 및 에러 처리 노하우
• TanStack Query를 활용한 서버 상태 관리 최적화
• 이슈 기반 브랜치 관리 및 당일 병합 PR

📄 라이센스

MIT License