Plan Jeju [ 🌴 제주도 여행계획 추천 서비스 ]

여행 스타일 설문을 기반으로 사용자에게 맞춤형 제주도 여행계획을 추천하고,
여행계획 관리 및 여행후기 공유까지 가능한 웹 서비스입니다.

📌 프로젝트 개요

여행 스타일에 따른 맞춤형 제주도 여행계획 추천
Quick / Full 설문 모드를 제공하여 사용자 선택권 강화
추천된 여행계획 저장 및 수정·삭제 기능 제공
여행 후기 공유 및 여행 스타일 기반 탐색 기능 제공
본 프로젝트는 React를 사용하여 TypeScript로 구현했습니다.

📌 프로젝트 기획서

🛠 기술 스택

Frontend

React
TypeScript
Vite
HTML5
CSS5

👥 팀원 소개

이름	역할	담당 기능
윤규식	팀장	기획안 작성, 발표자료 작성, 발표
최준열	팀원	WBS 제작, 와이어 프레임
김민호	팀원	UI 제작 , 바이브 코딩
윤석규	팀원	UI/WBS 제작 보조, 제주도 여행지/플래너 코딩
김민국	팀원	카카오맵 API 연동, 구글 로그인 API 연동
고완석	팀원	Github 세팅+문서 작성, 요구사항 명세서 작성

✨ 주요 기능

1️⃣ 설문조사 기반 여행스타일 분석 및 추천

사용자는 여행 관련 설문조사를 통해 자신의 여행스타일을 분석받고,
분석된 결과를 바탕으로 개인 성향에 맞는 제주도 여행계획을 추천받을 수 있습니다.

📌 설문조사 기능

여행에 관련된 설문조사를 통해 사용자의 여행스타일을 분석할 수 있다.
사용자는 설문 진행 방식으로 Quick 모드와 Full 모드 중 하나를 선택할 수 있다.
- Quick 모드: 필수 항목 위주의 간단한 설문 (빠른 추천)
- Full 모드: 상세한 설문을 통한 정밀한 여행스타일 분석 (정확도▲)
설문 모드에 따라 질문 수 및 흐름이 동적으로 변경된다.

📌 여행계획 추천

설문 결과를 기반으로 사용자 여행스타일에 적합한 여행계획을 추천한다.
AI 기반 분석을 통해 사용자의 성향에 맞는 여행 일정 및 테마를 제안한다.
추천된 여행계획은 미리보기 형태로 확인할 수 있다.

📌 로그인 연계

로그인한 사용자는 추천된 여행계획을 저장할 수 있다.
저장된 추천 여행계획은 여행 플랜 작성 기능과 연계하여 수정 및 확장이 가능하다.

2️⃣ 제주도 여행계획 작성 및 관리 (Travel Plan)

제주도 여행 플랜 기능은 사용자가 여행 일정을 체계적으로 구성하고 관리할 수 있도록 돕는 핵심 기능입니다.
여행 기간, 인원, 테마 설정부터 일차별 일정·이동수단·비용 관리까지 하나의 계획 안에서 정리할 수 있습니다.

📌 기본 기능

플랜 이름을 설정할 수 있다.
출발일 (연도-월-일)을 설정할 수 있다.
여행 계획에 대한 설명을 추가할 수 있다.
‘일정추가' 버튼으로 새로운 여행지를 추가할 수 있다.
여행의 유형(힐링, 맛집, 액티비티)를 설정할 수 있다.
여행계획을 수정하고 삭제할 수 있다.
여행계획을 저장하고 공유할 수 있다.
내 여행계획을 공개 또는 비공개로 설정할 수 있다.

📌 일정 및 메모

여행 일차(Day1, Day2...)로 분류할 수 있다.
여행계획마다 시간을 설정할 수 있다.
여행 일차마다 관광지, 숙소, 식당을 추가할 수 있다.
장소별 예상 시작 시간을 입력할 수 있다.

📌 장소 및 숙소 관리

지도 기반 검색을 통해 장소를 검색하고 일정에 추가할 수 있다.
Kakao Map API를 이용해서 선택한 장소를 지도로 볼 수 있다.
여행 일차에 따라서 지도에 이동경로를 미리 볼 수 있다.

3️⃣ 여행 리뷰 작성 및 공유 (Community)

여행 후기를 기록하고 공유할 수 있는 커뮤니티 기능을 제공합니다.
본 커뮤니티는 댓글, 좋아요 등을 남길 수 있는 여행후기 커뮤니티 페이지입니다.

📌 여행 후기 작성

여행 후기 제목과 본문을 작성할 수 있다.
여행 중 촬영한 이미지(사진)를 첨부할 수 있다.
작성한 여행 리뷰 게시글을 커뮤니티에 게시할 수 있다.
여행 후기 게시글에 여행스타일 태그를 추가할 수 있다.

📌 여행 후기 열람 및 필터링

전체 여행 후기 게시글 목록을 확인할 수 있다.
특정 여행스타일 태그 기준으로 게시글을 필터링할 수 있다.
게시글 선택 시 여행 후기 상세 내용을 확인할 수 있다.ㄴ

📌 여행계획 공개 및 공유

본인의 여행계획을 공개 / 비공개로 설정할 수 있다.
다른 사용자의 여행계획을 읽기 전용(Read Only) 으로 확인할 수 있다.

📌 사용자 반응 기능

여행 후기 게시글에 좋아요(Like)와 댓글 을 남길 수 있다.
좋아요 수를 통해 게시글의 인기도를 확인할 수 있다.

▶️ 로컬 실행 방법 (Local Run)

본 프로젝트는 아래 절차를 통해 로컬 환경에서 실행할 수 있습니다.

1. 저장소 복사
git clone https://github.com/prgrms-aibe-devcourse/AIBE5_Project1_Team1.git

2. 패키지 설치
npm install

3. 프로젝트 실행
npm run dev

4. 브라우저에서 아래 주소로 접속
http://localhost:3000/

📂 디렉토리 구조

📦 Travel Planning Website
 ┣ 📂 src
 ┃ ┣ 📂 assets                      # 정적 자원 - 이미지 파일 모음
 ┃ ┃ ┗ 📜 *.png                    
 ┃ ┣ 📂 components                  # 재사용 가능한 React UI 컴포넌트
 ┃ ┃ ┣ 📂 ui
 ┃ ┃ ┃ ┗ 📜 *.tsx                   
 ┃ ┃ ┣ 📂 figma                     # Figma 디자인 기반 커스텀 컴포넌트
 ┃ ┣ 📂 pages
 ┃ ┃ ┣ 📜 MainPage.tsx              # 서비스 메인 페이지
 ┃ ┃ ┣ 📜 LoginPage.tsx             # 사용자 로그인 페이지
 ┃ ┃ ┣ 📜 SignUpPage.tsx            # 회원가입 페이지
 ┃ ┃ ┣ 📜 MyProfilePage.tsx         # 마이페이지 - 프로필 관리
 ┃ ┃ ┣ 📜 MyPlanPage.tsx            # 저장된 여행 계획 목록 페이지
 ┃ ┃ ┣ 📜 PlannerPage.tsx           # 여행 계획 작성 및 편집 페이지
 ┃ ┃ ┣ 📜 TravelListPage.tsx        # 제주도 관광지 정보 및 추천 장소 목록
 ┃ ┃ ┣ 📜 TravelReviewPage.tsx      # 여행 후기 커뮤니티 페이지
 ┃ ┃ ┣ 📜 SurveyStartPage.tsx       # 설문조사 시작 페이지 (Quick/Full 선택)
 ┃ ┃ ┣ 📜 SurveyQuickPage.tsx       # Quick 설문 페이지 (간단한 설문)
 ┃ ┃ ┣ 📜 SurveyFullPage.tsx        # Full 설문 페이지 (상세 설문)
 ┃ ┃ ┣ 📜 SurveyLoadingPage.tsx     # 설문 결과 로딩 페이지
 ┃ ┃ ┗ 📜 SurveyResultPage.tsx      # 설문 결과 및 추천 여행 계획 페이지
 ┃ ┣ 📂 data                        # 정적 데이터 및 상수
 ┃ ┃ ┗ 📜 accommodations.ts
 ┃ ┃ ┗ 📜 commonFunction.ts   
 ┃ ┃ ┗ 📜 comminType.ts   
 ┃ ┃ ┗ 📜 destinations.ts   
 ┃ ┃ ┗ 📜 itineraryArray.ts
 ┃ ┃ ┗ 📜 plans.ts
 ┃ ┃ ┗ 📜 restaurants.ts 
 ┃ ┃ ┗ 📜 surveyResult.ts        
 ┃ ┣ 📜 App.tsx            
 ┃ ┣ 📜 main.tsx            
 ┃ ┗ 📜 Attributions.md     
 ┣ 📂 docs                 
 ┃ ┣ 📜 ObjectRules.md     
 ┃ ┗ 📜 TeamRules.md        
 ┣ 📜 index.html
 ┣ 📜 index.css         
 ┣ 📜 package.json          
 ┣ 📜 vite.config.ts       
 ┗ 📜 README.md

🤝 Team Convention

🔹 커밋 규칙

본 프로젝트는 커밋 메시지를 통해 작업 내용과 변경 이력을 명확히 파악할 수 있도록 아래 규칙을 따릅니다.

📌 커밋 메시지 기본 형식

[기능분류]: [작성내용] - [날짜]

기능분류: 작업의 성격
수정/작성내용: 추가·수정한 작업 내용을 간단히 요약
수정/작성일: 작업을 완료한 날짜 (YYYY-MM-DD)

기능분류(Type)

타입	의미
feat	새로운 기능 추가
docs	문서 작성 / 수정
fix	버그 수정
refact	코드 리팩토링

Commit 규칙 상세

[기능분류]: [파일명] - [작업내용] - [날짜]

작성내용 앞에 작업한 파일명 명시
작업내용을 중심으로 간단히 작성

# 예시
git commit -m "feat: Login/index.js - 로그인 추가 - 26.01.22"
git commit -m "feat: components/Header.js - 헤더구현 - 26.01.22"
git commit -m "feat: component/Header.js, Home/index.js - 헤더로 메인화면 돌아가는 기능 구현 - 26.01.22"

🔹 브랜치 전략

본 프로젝트는 아래와 같은 브랜치 구조를 사용합니다.

📌 브랜치 구조

main      (배포 브랜치)
 ↑
feature   (통합 브랜치)
 ↑
t1 ~ t7   (개인 작업 브랜치)

📌 Pull Request(PR) 정책

본 프로젝트는 안정적인 코드 통합과 배포를 위해
Pull Request 기반 협업 방식을 사용합니다.

main 브랜치
- 배포 전용 브랜치로 사용한다.
- 팀장만 push 및 merge 권한을 가진다.
- 개인 작업 및 직접적인 수정은 금지한다.
feature 브랜치
- 개인 브랜치에서 작업한 내용을 통합하는 브랜치이다.
- 개인 브랜치(t1 ~ t7)에서 직접 main으로의 push는 불가하다.
- 반드시 Pull Request(PR) 를 통해서만 병합할 수 있다.
- PR은 팀장의 승인(Approve) 후에만 merge 가능하다.
개인 브랜치 (t1 ~ t7)
- 각 팀원은 본인에게 할당된 브랜치에서만 작업한다.
- 작업 완료 후 feature 브랜치를 대상으로 PR을 생성한다.

📌 Pull Request 진행 절차

개인 브랜치(t1 ~ t7)에서 기능 개발을 진행한다.
작업 완료 후 feature 브랜치를 대상으로 Pull Request를 생성한다.
PR에는 작업 내용 및 변경 사항을 간단히 설명한다.
팀장이 PR을 리뷰하고 승인(Approve)한다.
승인 완료 후 feature 브랜치에 병합된다.

📌 브랜치 보호 규칙

main, feature 브랜치는 보호 브랜치로 설정한다.
보호 브랜치에는 다음 규칙을 적용한다.
- 직접 push 금지
- Pull Request 없이 merge 금지
- 팀장 승인 필수

🔹 트러블 슈팅 & 해결 방식

# 1. Merge하면서 작업파일이 사라짐

- 상황: 팀원들의 내용을 feature 브랜치에 Merge하고 하루를 마무리하려고 했는데 팀원이 작업한 .css의 .grid가 사라지는 문제 발생
- 문제해결: .css파일이 사라지기 이전의 Commit을 찾아내기 위해서 Repository에 남아있는 Commit 내용을 모두 뒤져보면서 해당 Commit을 찾아냈습니다 
그리고 그 Commit의 해시코드로 'git checkout [커밋해시] --index.css' 명령어를 사용해서 특정 파일만 되돌려서 해결했습니다.

Name		Name	Last commit message	Last commit date
Latest commit History 194 Commits
.github/workflows		.github/workflows
docs		docs
src		src
.DS_Store		.DS_Store
.gitignore		.gitignore
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.ts		vite.config.ts

prgrms-aibe-devcourse/AIBE5_Project1_Team1

Folders and files

Latest commit

History

Repository files navigation