🐶 댕댕어디가 - 반려동물 동반 가능 시설 공유 플랫폼

🩷 댕댕어디가 플렛폼 소개

반려동물과 함께 갈 수 있는 장소만 확인할 수는 없을까?🧐
댕댕어디가는 반려동물과 함께 외출할 수 있는 시설 정보를 공유함으로써 , 견주들이 보다 편리하고 쾌적하게 외출을 즐길 수 있도록 돕습니다.
이를 통해 반려동물과 함께하는 활동의 범위가 넓어지고,외출 시의 부담을 줄여주는 서비스를 제공합니다✨.

• 🔗 서비스 둘러보기 : 댕댕어디가 공식 웹사이트
• 🔗 Frontend Repository
• 🔗 Backend Repository

🩷 프로젝트 기간

2024.11.12 ~ 2024.12.19

🩷 팀 소개

김가은[조장]	김승환	김지윤	박상희	송수빈	지연우[부조장]	하진서
BE	BE	BE	FE	FE	FE	BE
@13wjdgk	GitHub	GitHub	GitHub	GitHub	GitHub	GitHub

🩷 각 멤버 작업 내역

파트	이름	역할
BE	김가은	AWS 서버 구성, 리뷰 시스템, 알림 시스템, 땅따먹기 시스템
BE	김승환	장소 추천, aws 서버 & CI/CD, oauth & 쿠키 관리, 시큐리티
BE	김지윤	메인페이지 장소 api, 장소 조회, 장소 검색, AI 리뷰 요약
FE	박상희	소셜 로그인, 회원정보 CRUD,선호도 등록&수정, 메인페이지&장소추천, 페스티벌 배너, 스토리 업로드 및 삭제
FE	송수빈	반려동물 CRUD&마이페이지, 리뷰, How-to-guide 페이지 및 배너, 알림(FCM), Admin, 스토리 업로드 및 삭제
FE	지연우	검색 & 시설 상세 & 즐겨찾기, 땅따먹기, 에러 퍼블리싱, 방문등록 & 실시간 리뷰, 구글 맵 API, FE 배포 & CI/CD
BE	하진서	반려동물 API, 선호도 API, 즐겨찾기 API, 스토리 API, 알림 목록 조회 API

🩷 주요 기능

• 장소 검색

  • 반려동물 동반 가능 시설 목록 제공
  • 사용자는 위치 & 키워드로 장소 검색 가능
  • 사용자 맞춤 필터링 기능 제공

• 장소 추천

  • 우리 댕댕이가 좋아할 것 같아요 : 선호장소타입과 현위치와의 거리차 등을 종합한 장소 3곳 추천
  • 요즘 뜨는 장소 알려드려요 : 즐겨찾기 수가 많은 인기 장소 3곳 추천
  • 댕댕어디가 추천 장소 : 유저의 실시간 위치 고려 및 별점 높은 장소 3곳 추천

• 땅따먹기

  • 리뷰 등록을 일반 리뷰와 실시간 리뷰로 구분
  • 실시간 리뷰 작성 시, 지역 시설을 가장 많이 방문한 유저가 그 지역의 땅을 획득
  • 보상으로 땅 주인은 스토리 업로드 가능(땅 주인은 실시간으로 변경 가능)

🩷 Software Architecture

🩷 프로젝트 설계

• AWS 1차

• AWS 2차

🩷 ERD

🔗 ERD 확인하기

🩷 Figma

🔗 Figma 확인하기

🩷 API 명세서

🔗 API 명세서 확인하기

🩷 프로젝트 폴더 구조

Frontend

✨ 확인하기

daeng/
├── .storybook            // Storybook 설정 및 파일
├── node_modules          // Node.js 패키지
├── public                // 정적 리소스
│   ├── data/             // 정적 JSON 데이터
│   │   └── sig.json.gz
│   ├── alarm_logo.png    // 알람 로고 이미지
│   ├── favicon.svg       // 파비콘 파일
│   └── firebase-messaging-sw.js  // Firebase 메시징 스크립트
├── src/
  ├── components/      // UI 컴포넌트
  │   └── commons/      // 공통 컴포넌트
  ├── pages/           // 페이지 단위 컴포넌트
  ├── firebase/        // 파이어베이스(FCM)
  ├── hooks/           // 커스텀 훅
  ├── stores/          // Zustand 스토어 파일
  ├── utils/           // 유틸리티 함수
  ├── data/            // 더미데이터
  ├── routes/          // 라우트 관련
  ├── stories/         // 스토리북 파일
  ├── style/           // 스타일 관련 (CSS 등)
  ├── services/        // API 요청 및 데이터 처리
  └── assets/          // 이미지, 폰트 등 정적 리소스
      └── icons/       // icon 파일

Backend

✨ 확인하기

🩷 구현 과정 및 성과

Frontend

📚 확인하기

---

1️⃣ Storybook

• UI 일관성 유지: 스토리북을 활용해 컴포넌트 스타일 및 기능 테스트.
• 컴포넌트 관리와 재사용성 향상: 프로젝트 내에서 공통 UI를 효율적으로 관리.

---

2️⃣ 지도 API 성능 개선

• 실시간 위치 추적 정확도 개선:
  • 기존 getCurrentPosition() → 개선된 watchPosition()으로 변경.
  • 실시간 위치 추적 시 정확도를 높임.
• 시군구 경계 데이터 최적화:
  • 시군구 JSON 데이터를 gzip으로 압축.
  • 압축 데이터를 사용하여 로딩 속도 개선.

---

3️⃣ Debounce 적용

• API 호출 시 서버 과부하를 방지하기 위해 Debounce 개념 도입.
• VALUE 값 변경마다 API 호출 대신, 일정 시간 간격으로 호출 처리

---

Backend

📚 확인하기

---

1️⃣ Full-Text Search

• Text Indexing: 텍스트를 개별 단어(토큰)로 나눈 후 각 단어에 대한 색인을 생성
• 검색 우선순위: 일치하는 키워드는 우선순위로 표시 이후 생성된 색인으로 검색 후 결과 출력

---

2️⃣ 리뷰 조회 - 동적 쿼리

• 🧐 문제점
  • 최신순 , 평점 높은순, 평점 낮은순 으로 정렬
  • 정렬 개수만큼 조회 쿼리가 필요
  • 쿼리 수정이 필요할때마다 3개의 쿼리 수정 
• 🥳 해결 방안
  • 검색 조건에 따라 실행 시점에서 쿼리를 생성하기 위해 동적쿼리 필요
  
  

  Criteria	쿼리가 복잡하여 생성될 쿼리를 파악하기 어려움	QueryDSL	쉽고 간결하여 쿼리 파악하기 쉬움

---

3️⃣ 리뷰 조회 - 무한 스크롤

• Offset
  • 데이터가 많을 경우 뒤로갈 수록 조회 성능 저하
  • count 쿼리 필요
• No Offset
  • 기준 Key가 중복된다면 중복된 결과를 전달
  • 페이징 방식에서 적용 불가
  • 92.3% 개선

---

4️⃣ 실시간 땅 유저 조회

• 🧐 문제점

  • 최신 땅 주인을 조회하기 위해 Region_owner_log 테이블을 매번 정렬해서 조회
  • 실행 계획 분석 결과, Using Filesort 진행

• 🥳 해결 방안

  • [시/도,시군구읍,생성날짜]를 복합 인덱스 처리하여 인덱싱기반 조회
  • Redis의 Set 자료형으로 최근 땅 주인을 캐싱

---

🩷 유저 및 피드백

📅 12월 10일에 1차 MVP 완성

• 이후 구글 광고 및 카페 홍보글 작성(강사모) 진행
• 네이버 애널리틱스로 유저 및 유입 경로 분석

1월 10일

1월 15일

🧐 네이버 애널리틱스 결과 및 서비스 설문조사 진행 결과

🔗 설문조사 결과

유저들의 실제 피드백

🩷 유저들의 피드백 반영

1️⃣ 검색어 자동완성

2️⃣ 이미지 Resizing

3️⃣ 지도

🩷 기술 스택

FrontEnd

HTML	Styled	JS	Vite	React

Gsap	Firebase	Zustand	Axios	Storybook

BackEnd

Spring boot	JPA	Security	MySQL	Docker

AWS	S3	Redis	Nginx

Test & CI/Cd

Github action	Vercel	JUnit5	Jenkins

Communication

Github	Discord	Figma	Notion	Jira	Google sheet

🩷 Git convention

Frontend

✨ 확인하기

이모지 = :코드:

타입	이모지	코드	설명	예시
feat	✨	sparkles	새로운 기능을 추가할 때 사용합니다.	✨ feat: 로그인 폼 유효성 검사 추가
fix	🐛	bug	버그를 수정할 때 사용합니다.	🐛 fix: 로그인 버그 수정
style	💄	lipstick	사용자 인터페이스 관련 변경 사항.	💄 style: 네비게이션 바 디자인 수정
refactor	🎨	art	버그 수정이나 기능 추가 없이 코드 구조를 개선할 때 사용합니다.	🎨 refactor: 컴포넌트 상태 관리 로직 단순화
perf	⚡	zap	성능을 개선하는 코드 변경.	⚡️ perf: 이미지 로딩 시간 최적화
test	✅	white_check_mark	테스트 코드를 추가하거나 수정할 때 사용합니다.	✅ test: 버튼 컴포넌트에 대한 단위 테스트 추가
docs	📝	memo	문서만 변경할 때 사용합니다.	📝 docs: 설치 단계 README에 추가
chore	🔧	wrench	소스나 테스트 파일을 수정하지 않는 일반적인 작업이나 업데이트.	🔧 chore: 종속성 패키지 업데이트
revert	⏪	rewind	이전 커밋을 되돌릴 때 사용합니다.	⏪ revert: "로그인 폼 유효성 검사 추가" 커밋 되돌림
init	🎉	tada	프로젝트 초기 설정 시 사용합니다.	🎉 init: React 프로젝트 초기 설정
delete	🔥	fire	코드/파일 삭제.	🔥 delete: 안 쓰는 로그인 컴포넌트 삭제
wip	🚧	construction	작업 중이거나 실험적인 변경 사항.	🚧 wip: 새로운 인증 방법을 실험 중

결과

Backend

✨ 확인하기