Inplace ( Team7_FE )

### Repository Info       

Installation

현재 프로젝트는 Kakao 지도 API를 사용해서 환경 변수 설정이 필요합니다. 아래 명령어를 실행하고, 키값을 입력해야 합니다.
cp .env.example .env

목차

1. 프로젝트 개요

   1.1 프로젝트 목적

   1.2 서비스 정보

   1.3 배포 주소

2. 프로그램 구조

   2.1 설치

   2.2 폴더 구조

   2.3 프로그램 구조도

   2.4 API & ERD

3. 개발 정보

   3.1 개발 기간

   3.2 팀원

   3.3 저장소 정보

4. 기술 정보

   4.1 주요 종속성 버전

   4.2 기술 스택

5. 테스트

6. 기능 및 사용 예시

   6.1 세부 기능 흐름

   6.2 사용 예시

---

📝 프로젝트 개요

🙌 프로젝트 목적

저희의 아이디어는 데이트 코스의 단조로움을 어떻게 하면 해소할 수 있을까? 💡 라는 생각에서 시작했습니다.

아이디어를 구체화하는 과정에서 저희는 장소에 관련된 소재로 인스타, 유튜브 등의 SNS 및 동영상 플랫폼 📱의 성장과 함께 등장한 인플루언서 라는 개념에 집중하게 되었습니다.

이는 인플루언서가 방문한 장소에 대한 정보를 서비스 해보자! 📍 라는 생각으로 이어졌습니다.

이를 통해 사용자가 관심있는 인플루언서를 등록하고, 이에 따른 장소 추천 및, 장소에 대한 리뷰 기능 📋을 제공하여, Inplace 라는 저희만의 웹 애플리케이션으로 구현해보았습니다.

📋 서비스 정보

긴 영상은 필요 없어요 인플루언서가 다녀간 쿨플, 한눈에 쏙!

1. 회원가입 및 로그인
   • Spring Security를 이용한 OAuth 2.0 카카오 로그인 기능을 사용합니다
   • 쿠키에 Access, Refresh Token을 담아 사용하며, Refresh 동작을 수행할 수 있습니다
2. 현재 위치 기반 서비스
   • 웹 페이지의 위치 정보 사용에 동의시, 카카오 API와 내 위치 정보를 사용하여 주변의 장소 정보와, 자동 지도 위치 설정을 사용할 수 있습니다
3. 통합 검색 서비스
   • Elastic Search를 사용한 인플루언서, 장소, 비디오 이름에 대한 통합 검색 기능을 사용할 수 있습니다
4. 관심 인플루언서 등록 및 이를 토대로 한 서비스
   • 최초 로그인 시 & 인플루언서 페이지에서 관심 인플루언서를 등록할 수 있습니다
   • 이를 토대로 메인 페이지에서 관심 인플루언서의 최신 방문 장소를 확인할 수 있습니다
5. 지도 기반 검색 서비스
   • 지도 API를 이용하여 장소를 검색할 수 있습니다
     • 관심 등록하지 않은 인플루언서 및 주소, 장소 태그를 이용하여 세부 검색이 가능합니다
6. 장소 세부 정보 서비스
   • 장소의 세부 정보를 열람할 수 있습니다
   • 장소에 달린 다른 유저들의 리뷰를 확인할 수 있습니다
   • 장소에 대한 좋아요 기능을 사용할 수 있습니다
   • 장소 세부 페이지에서 장소에 대한 정보를 카카오톡 메세지로 받아 볼 수 있습니다
7. 리뷰 기능
   • 장소 정보를 받은 후 3일 뒤, 해당 장소에 대한 리뷰 링크를 받아 리뷰를 작성할 수 있습니다
   • 위 기능들은 카카오톡 메세지 보내기 API를 이용하며, 카카오톡으로 전송되는 링크는 모바일 뷰를 지원합니다
8. 마이 페이지 기능
   • 좋아요 표시한 장소, 인플루언서를 관리할 수 있습니다
   • 내가 작성한 리뷰를 관리할 수 있습니다
   • 사용자 닉네임을 변경할 수 있습니다

🌐 배포 주소

BackEnd : api.inplace.my

FrontEnd: inplace.my

---

🏗️ 프로그램 구조

✨ 설치

현재 프로젝트는 Kakao 지도 API를 사용해서 환경 변수 설정이 필요합니다. 아래 명령어를 실행하고, 키값을 입력해야 합니다.
cp .env.example .env

📜 폴더 구조

.root
├── node_modules
├── public
├── src
│   ├── 📜 api
│   │   ├── hooks       // api 호출과 관련된 custom hook
│   │   ├── instance    // 기본 api의 axios instance
│   ├── 📜 assets          // 이미지, 폰트 등 미디어 파일
│   ├── 📜 components      // 주요 컴포넌트
│   │   ├── common    // 여러 페이지에서 공통으로 사용되는 컴포넌트
│   │   ├── Main    // 페이지별 사용되는 컴포넌트
│   │   ├── ...
│   ├── 📜 hooks           // 커스텀 훅
|   ├── 📜 libs       // react에서 제공하는 기능에 의존하지 않는 함수
|   ├── 📜 mocks     // mock 데이터 핸들러
│   ├── 📜 pages           // 페이지 컴포넌트
│   ├── 📜 provider
│   │   ├── Auth    // 사용자 정보 전역 상태로 관리
│   ├── 📜 routes
│   │   ├── component    // 토큰이 필요한 라우트를 위한 컴포넌트
│   └── 📜 types           // 타입 정의
│   ├── 📜 pages           // 페이지 컴포넌트
└── └── 📜 utils           // 공통함수, 상수 등

🖼️ 프로그램 구조도

📊 API & ERD

• 🚗 Visit Team7 API

• 🙋‍♂️ Visit Team7 ERD

---

👨‍💻 개발 정보

📅 개발 기간

2024.08.22 ~ 2024.11.15

👥 팀원

Frontend	Frontend
이정민	이효은

Backend	Backend	Backend	Backend	Backend
이상희	김동윤	정수현	우현서	배준호

📂 저장소 정보

Using Language

Repo, Code Volume

Commit Avg

Issues

PRs

---

🛠️ 기술 정보

🧩 주요 종속성 버전

🚀 기술 스택

---

✅ 테스트

테스트 시나리오 : https://www.notion.so/9ed68b292c004fc69f7eaad513054d96

테스트 결과보고서 : https://www.notion.so/08a520d3b8c44154a19425b0bcc16f6f

---

🎬 기능 및 사용 예시

🔍 세부 기능 흐름

📱 사용 예시

실제 유저 사용 페이지 흐름 보여주기 ( 영상 x )