✈️ TripHub - 여행 계획 추천 플랫폼 (1등 수상 프로젝트)

🧭 왜 만들었는가

여행 일정 짤 때, 단순히 장소만 나열된 정보는 부족하다.
방문 시간, 체류 시간, 비용 등을 기준으로 직접 여행 계획을 세울 수 있는 구체적인 여행 추천 플랫폼이 있으면 좋겠다.

 

이런 문제의식에서 출발하여, 팀 프로젝트로 TripHub를 기획하게 되었습니다.

---

🧩 핵심 기능 소개

✔️ 여행지

• 장소 이름, 메모, 비용, 지역, 카테고리 등 입력
• 대표 이미지 선택 + 이미지 최대 6장 업로드
• 좋아요, 즐겨찾기, 리뷰, 별점, 조회수 기능

✔️ 게시글(일정)

• 여행지들을 묶어 일정 구성
• 일정 요약 (예산 총합, 방문 지역, 활동 수)
• GPT 챗봇을 통한 여행지 추천 → 즉시 일정에 반영 가능
• 일정 탭 + 본문 탭 UI 구성

✔️ 탐색 기능

• 여행지/게시글 목록 피드 형태 제공
• 검색 / 필터 / 정렬 가능
• 메인 페이지에서 Best 여행지/일정 하이라이팅

✔️ 마이페이지

• 내가 등록한 여행지, 일정 관리 (수정/삭제 가능)
• 즐겨찾기/좋아요한 항목 목록 확인

✔️ 기타

• 로그인 없이 조회 가능
• 로그인하면 작성, 좋아요, 즐겨찾기 가능
• 소셜 로그인(Google, Kakao)
• 게시글 공유 (URL 복사)
• 게시글/여행지 임시 저장 기능

---

🗂️ DB 설계 (ERD)

🔧 설계 방향 및 고려사항

• posts – places 관계를 M:N으로 설계하여, 여러 게시글에 같은 여행지를 포함할 수 있도록 유연성 확보
• post_places 중간 테이블을 통해 게시글과 여행지를 연결
• 게시글 내 여행지 순서를 visit_start_time 필드로 관리
• **리뷰, 좋아요, 즐겨찾기, 조회수**는 각각의 테이블로 분리해 기능별로 독립적인 관리 및 통계 분석이 가능하도록 설계
• Supabase 인증 시스템을 기준으로, 추가 프로필 정보는 별도 user_profiles 테이블로 분리해 보안과 확장성을 고려
• 게시글/여행지의 좋아요 수, 즐겨찾기 수 등 추가 기능은 RPC를 이용하여 게시글/여행지 조회 시 가져오는 방식으로 변경함

🔄 설계 변경 사항

• 초기에 supabase의 auth.user를 이용한 사용자 관리를 계획하였으나 정보를 불러올 수 없어서 user_profiles 테이블 추가
• 대표이미지 관련 정보를 별도의 테이블로 관리하였으나, 관리와 연동의 어려움으로 thumbnail_image_id 필드 추가
• chat_message 테이블은 계획에 없었으나 AI를 활용한 여행지 추천 기능 추가하면서 채팅 내용 저장을 위해서 추가

---

🏗 시스템 아키텍처

개발 & 배포

• Cursor를 이용한 개발
• github에서 컨벤션을 통한 이슈 및 PR 관리
• main 브랜치 merge 후 git action을 통한 자동 빌드 테스트
• 개인 레포로 sync fork를 이용해서 vercel에 배포 (조직 레포 배포시 유료로 인해 sync fork 적용)
• 완벽한 CI/CD 구조는 아니지만 CI/CD 구현

서비스 구성

• 사용자에서 프론트 엔드
• 프론트엔드는 supabase의 백엔드 시스템에서 정보를 가져옴
• 챗봇 기반 여행지 추천은 DB에 없어도 GPT에서 데이터를 가져오기 때문에 GPT 추가 연결

---

🛠️ 기술 스택

항목	기술
프론트엔드	Next.js, Tailwind CSS, shadcn/ui
상태관리	Context API, Zustand
유틸 도구	date-fns (날짜 처리), nanoid (경량 고유 ID 생성)
정적 분석	Prettier, ESLint
백엔드	Supabase (auth, DB, storage), PostgreSQL
인증	Supabase Auth (Google, Kakao 소셜 로그인)
AI 서비스	OpenAI GPT API (챗봇 기반 추천)
AI UI 도구	Readdy.ai, Cursor
배포	Vercel (CI/CD 자동 배포)
협업	GitHub (GitHub Flow 전략), Notion, Slack

---

🎯 맡은 역할 (PM / 팀장)

• 전체 프로젝트 기획 및 컨셉 제안
• ERD/DB 구조 설계 및 Supabase 세팅
• 여행지/게시글 CRUD, 리뷰, 좋아요, 즐겨찾기 등 핵심 기능 전담
• GPT 챗봇 모달 및 대화 저장 구현
• 상태 관리 구조 설계 (Zustand)
• 공통 컴포넌트 구조 설계 및 모듈화
• GitHub 협업 전략 수립 (브랜치 규칙, PR 템플릿, CI/CD 구성)
• 발표자료 제작 및 최종 발표 진행

---

🧯 문제 해결 경험 (Troubleshooting)

짧은 기간 내에 다양한 기능을 구현하면서도 예상치 못한 문제가 자주 발생했지만, 그 과정 자체가 성장의 발판이 되었습니다. 특히 다음과 같은 문제를 직접 해결했습니다.

1. Supabase API가 아예 동작하지 않음

• 원인: .env 환경변수에 SUPABASE_URL, SUPABASE_ANON_KEY 값을 잘못 입력
• 해결: 정확한 키로 수정 후 정상 연결됨

2. useSearchParams()가 작동하지 않음

• 원인: Next.js App Router에서 해당 훅이 Suspense 컨텍스트 안에서만 동작
• 해결: 해당 컴포넌트를 <Suspense>로 감싸 해결

3. 게시글 조회수가 두 번씩 올라감

• 원인: React StrictMode 환경에서 useEffect가 두 번 실행
• 해결: useCallback + 조건 분기로 중복 호출 방지

4. Supabase 인증 충돌 문제

• 원인: 브라우저에서 같은 프로젝트를 여러 탭으로 열었을 때 토큰 충돌
• 해결: 동일 브라우저에서 한 인스턴스만 켜도록 안내하고 로컬 저장소 재검토

5. API 호출 시 user 정보가 반영되지 않음

• 원인: useCallback 의존성 배열에 user 미포함
• 해결: user 포함 후 정상 작동

6. 여행 기간이 음수로 표시됨

• 원인: date-fns의 differenceInDays 함수에서 날짜 순서 반대
• 해결: 시작일과 종료일 순서 수정

---

🧹 리팩토링 및 개선 사례

기능 구현 외에도 코드의 가독성, 재사용성, 유지보수성 향상을 위해 적극적으로 리팩토링을 진행했습니다.

1. Supabase RPC 재작성 (목록 조회)

• Before: 기존 RPC는 UI에 필요한 필터/정렬 기준을 반영하지 못하고 데이터 구조도 일관되지 않음
• After: 조건에 맞는 데이터를 정확히 불러오는 RPC로 재작성 → 클라이언트 로직 단순화, 정렬/필터 정확도 향상

2. 등록 폼 컴포넌트 분리

• Before: 게시글과 여행지 등록 화면이 서로 다른 구조로 구현되어 중복 코드와 복잡성 증가
• After: 입력 필드를 공통 컴포넌트로 추출, 유효성 검사 및 초기화 로직은 lib, hooks로 분리 → 유지보수성과 확장성 향상

3. 게시글 상세 페이지 컴포넌트 통합

• Before: 일정 탭 / 본문 탭에서 유사한 여행지 리스트 UI를 서로 다른 컴포넌트로 구현 → 로직 중복 발생
• After: 하나의 공통 컴포넌트로 통합하고 props로 분기 처리 → 코드 일관성 및 재사용성 확보

---

🧪 발표 & 피드백

✅ 긍정 피드백

• GitHub Flow 기반 협업 체계가 잘 정리됨
• 커밋/PR 관리, 발표자료 구성 등 관리력이 뛰어남
• 챗봇·정렬·검색 등 기능이 실제 사용 시나리오와 잘 연결됨
• 구현 폭이 넓고 UI/UX 구성도 목적에 부합함

⚠️ 개선 피드백

• 메인 페이지 Top30 → 갯수 제한 또는 페이지네이션 필요
• 로딩 처리 부족 → 스켈레톤 or 다이얼로그 도입 필요
• 정렬 기준에 대한 시각적 피드백 부족
• 모바일에서 회원가입 화면 UX 미흡
• textarea 크기 자동 조절 미지원

---

🏆 프로젝트 결과

• 1주일 만에 핵심 기능 전체 구현 + 배포 완료 (MVP 달성)
• AIBE3 1차 팀 프로젝트 평가에서 팀 전체 투표로 압도적 1등 선정
• 기획, 설계, 구현, 협업, 발표 전 과정을 주도하며 주체적으로 리딩
• 실제 사용자 시나리오를 반영한 챗봇 + 일정 관리라는 차별화된 경험 제공

---

📸 핵심 화면 예시

🧭 공통

메인 - 게시글	메인 - 여행지	메인 - 검색	여행 추천 챗봇

📍 여행지

목록	상세	리뷰	등록된 목록	수정

📝 게시글 (여행 일정)

목록	부가기능	상세 (여행 일정)	상세 (여행 후기)	리뷰	등록

🙋마이페이지

로그인	회원가입	마이페이지 - 게시글	마이페이지 - 여행지

---

💬 회고

• 짧은 시간이었지만, 기획부터 배포까지의 전체 개발 사이클을 처음부터 끝까지 경험할 수 있었던 밀도 높은 프로젝트였습니다.다만, 리팩토링이나 타입 안정성, UX 디테일에서는 아쉬운 부분도 있었고,
  다음 프로젝트에서는 더 체계적인 설계와 사용자 중심의 완성도를 높이는 걸 목표로 삼게 되었습니다.
• 특히 기능 구현뿐 아니라 디자인, 협업 환경 구성, 발표까지 스스로 리딩하며 전 과정을 주도했던 점이 가장 큰 성장의 계기가 되었습니다.
• 프로젝트가 끝나고 팀 발표에서 1등으로 선정되었을 때, 정말 뿌듯했고 그동안의 실력이 실제 결과로 검증되는 느낌이었습니다.

---

🔗 관련 링크

• 🖥️ 배포 링크: https://aibe-3-project1-team04.vercel.app
• 📂 GitHub Repository: GitHub - TripHub
• 📄 발표자료 보기: TripHub 발표자료 (PDF)