미리보기

레저·아웃도어 위치 정보(캠핑장, 낚시터, 해수욕장 등)를 제공하는 모바일 앱.

공공데이터 API, OpenStreetMap(Leaflet) 등을 활용하여 직관적이고 간편한 UI/UX를 구현함.

ㅤ

Github : https://github.com/stars/jehoonje/lists/campridge

• 사용자 인증 & 로그인

  • React Native에서 카카오/구글 OAuth 및 이메일 회원가입 기능 지원

  • 인증 성공 시 Spring Boot 서버로부터 JWT(Access/Refresh 토큰) 발급

  • AuthContext를 통해 전역 인증 상태 관리, 사용자 정보 조회, 로그아웃 기능 구현

  ㅤ

• 부트 스플래시 (BootSplash)

  • RNBootSplash 라이브러리 활용, 앱 실행 시 로딩 화면 → 데이터·지도 준비 완료 후 스플래시 종료

  • 초기 로딩 시간을 기존 대비 약 40% 단축하여 사용자 이탈률 감소

  ㅤ

• 지도(WebView + Leaflet) & 마커 클러스터링

  • React Native WebView로 map.html 파일을 로드, Leaflet + OpenStreetMap 기반 지도 구현

  • 백엔드 서버와 JSON 통신으로 장소별 마커 표시, MarkerClusterGroup을 통한 최대 3,000개 마커 효율적 클러스터링

  • 마커 클릭 시 WebView → React Native 간 메시지 전송, 상세 화면으로 이동 (navigation.navigate)

  • 지도 데이터 로딩 속도 30% 개선 (필요 데이터 선별 후 전송)

  ㅤ

• 즐겨찾기 & 검색 & 상세 화면

  • 다중 레이어로 즐겨찾기 기능 제공, 별도 API로 DB 저장 및 조회

  • 통합 검색으로 다중 카테고리(캠핑장, 낚시터, 해수욕장 등) 필터링 가능

  • debounce로 불필요한 검색 트래픽 약 35% 절감, 평균 검색 응답 시간 0.5초 이내

  • 상세 화면에서 장소 이미지, 리뷰, 지도 정보 등 확인 가능

  ㅤ

• 데이터 흐름 & 스케줄러

  • 공공데이터 API를 통한 초기 데이터 수집 후 DB에 저장, 트래픽 과부하 방지를 위해 스케줄러로 정기 업데이트로 최신 정보 유지

  • AxiosInstance로 서버와 통신, useEffect / useFocusEffect 등 React Hook을 통해 상태관리

  • 오류 처리, 로딩 처리, 재요청(Refresh 토큰) 등을 통해 안정적인 데이터 제공

    ㅤ

  ㅤ

• 마이페이지 & 로그아웃

  • 사용자 프로필(닉네임, 사진) 수정 및 정보 조회 기능 구현

  • 로그아웃 시 Access/Refresh Token 초기화, AuthContext 갱신

    → 1초 이내 세션 정리

  ㅤ

• UI/UX & 반응형 디자인

  • 다중 레이어 드롭다운 메뉴로 위치 정보 필터링 구현

  • 리뷰 시스템, 즐겨찾기 기능 등 사용자 친화적 인터페이스 설계

  • Figma로 UI 프로토타입 작업 → React Native 컴포넌트로 제작

  • 현재 구글 플레이스토어 비공개 테스트 진행 중

ㅤ

위치기반 애견 호텔 예약서비스 및 고객 맞춤 간식구독 서비스, 커뮤니티 서비스

담당 : 애견 호텔 랜더링, 스탭, 카테고리, 디자인

ㅤ

Github : https://github.com/stars/jehoonje/lists/doggle

Frontend

• 스탭 기능 :

  • 스탭 시각화로 유저 경험향상

  ㅤ

• 호텔 랜더링 :

  • Redux 상태 관리를 통해 스텝 기반의 예약 전체 페이징 처리

  • 검색, 호텔조회, 객실조회, 예약 페이지 랜더링, 반응형 처리

  • 카카오 API 활용한 주소검색, 지도조회, 카카오페이 기능 구현

  • 라이브러리 모션, 슬라이더 사용한 유저 친화적 반응형 디자인 구현

  • 예약 상세조회, 리뷰 조회 랜더링

  ㅤ

• 디자인 :

  • 프로젝트 전체 레퍼런스, Figma 사용한 UI/UX 디자인 작업

  • 프로젝트 메인 페이지 랜더링, 디자인, 배너

  ㅤ

• 카테고리 :

  • 모션 라이브러리 활용한 반응형 카테고리 구현

• CI/CD :

  • 배포시간 단축, 배포 환경의 일관성 보장을 위해 Docker + github-actions를 사용한 CI/CD 구축