1st Project - Travly

Travly — 지도 기반 여행 기록·공유 커뮤니티 (Full-stack 프로젝트)

제작 기간 : 25.11.10 ~ 25.12.22

FrontEnd Github : https://github.com/sephinote7/travly

BackEnd Github : https://github.com/sephinote7/travlyserver

Notion Link : https://www.notion.so/Project-01-Travly-2d258a06e20c805eabc0ecbc77103efb?source=copy_link

한 줄 소개

Travly는 여행 “경로(코스)” 중심으로 기록·공유하는 지도 기반 커뮤니티 플랫폼입니다. 사용자는 지도에서 장소를 탐색해 코스를 구성하고 게시글로 공유하며, 좋아요/북마크/댓글로 상호작용합니다.

---

프로젝트 구성

Frontend (`travly`)

- Vite + React + TailwindCSS

- Supabase Auth 기반 로그인/세션

- Axios interceptor로 Supabase JWT(access_token) 를 `Authorization: Bearer ...`로 자동 첨부

- 카카오맵 / 한국관광공사 Tour API 연동

Backend (`travlyserver`)

- Spring Boot 3.5.8 / Java 17 / Gradle

- Spring Data JPA + PostgreSQL(Supabase)

- Spring Security + JWT(HS256): Supabase JWT Secret으로 토큰 검증

- API Prefix: `/api/travly`

- Swagger(springdoc), Thumbnailator(이미지 처리)

---

핵심 기능

메인(인덱스)

- 주간 인기 게시물 노출(Swiper)

- 최근 게시물 리스트, 프로젝트 소개/유도 동선(QnA 등)

게시글(여행 코스)

- 게시글 CRUD, 정렬(최신/인기), 검색(키워드/태그)

- 코스 내 다중 장소/다중 사진 매핑 및 순서 변경

커뮤니티 인터랙션

- 좋아요 / 북마크 / 댓글

- 내 게시글/내 북마크 리스트

지도/외부 API

- 카카오맵: 지도 표기, 마커 표시

- Tour API: 여행지 정보 조회/검색

---

아키텍처 & 인증 흐름(요약)

인증(프론트 → 백엔드)

- 사용자는 Supabase Auth로 로그인

- 프론트는 세션의 `access_token`을 API 요청마다 자동으로 헤더에 추가

- 백엔드는 Spring Security 필터에서 `Authorization: Bearer <JWT>`를 검증(HS256)하고 사용자 컨텍스트를 구성

API 베이스 경로 통일

- 백엔드 context-path를 `/api/travly`로 고정해 프론트와 연동 일관성 확보

---

내 담당/기여 (디자인 · 팀장 · CI/CD · 메인 페이지)

1) 디자인(UX/UI) 총괄

디자인 시스템/톤앤매너 정리

- 컴포넌트 스타일(색/타이포/여백) 일관성 확보

- 사용자 흐름(탐색 → 상세 → 작성/상호작용) 기준으로 정보 구조 개선

반응형 UI 및 사용성 개선

- 다양한 해상도에서 핵심 콘텐츠(인기/최신/CTA)가 먼저 보이도록 레이아웃 최적화

- “로그인/작성/검색”의 주요 진입 동선이 자연스럽게 이어지도록 메인/헤더 구조 설계

2) 팀장(프로젝트 운영/품질)

일정/우선순위 관리

- 기능 단위 목표를 쪼개 스프린트 형태로 관리하여 MVP를 기한 내 완성

협업 프로세스 정리

- 역할 분담, 진행 공유, 이슈 대응/리스크 관리

- 화면/기능 명세 정리로 구현 편차 최소화

3) CI/CD 구축

빌드/배포 파이프라인 표준화 및 자동화

- 재현 가능하고 반복 가능한 배포 프로세스 구축

- 배포 안정성 확보로 “로컬-배포 간 불일치” 리스크 감소

환경 분리/설정 관리

- 개발/배포 환경 설정값(키/URL 등)을 분리하여 관리

4) 메인 페이지(핵심 랜딩 경험) 구현

홈 구조 설계(탐색/전환 중심)

- 주간 인기 3개(Swiper) + 최근 게시물 9개 노출로 탐색 효율 강화

- Travly 소개 및 QnA/기능 진입 동선 배치로 전환 흐름 구성

체감 속도/첫인상 개선

- 첫 화면에서 핵심 콘텐츠가 빠르게 노출되도록 구성

---

사용 기술

Frontend: React, Vite, TailwindCSS, Axios, Swiper

Backend: Spring Boot, Spring Security, Spring Data JPA, Swagger(Springdoc)

Auth/DB: Supabase(Auth + PostgreSQL), JWT(HS256)

DevOps: CI/CD 파이프라인(자동 빌드/배포), 환경변수 기반 설정 관리

---

실행/설정(요약)

Frontend

- `npm install` / `npm run dev`

- `.env`: `VITE_SUPABASE_URL`, `VITE_SUPABASE_ANON_KEY`, `VITE_KAKAO_JAVASCRIPT_KEY`, `VITE_TOURAPI_SERVICE_KEY`

Backend

- Spring Boot 실행(Gradle)

- API 기본 경로: `/api/travly`

- Supabase JWT Secret 및 DB 접속 정보 설정 필요

---

트러블슈팅/배운 점

인증 설계를 “클라이언트 로그인”과 “서버 신뢰 검증”으로 분리

- Supabase Auth로 로그인 UX를 단순화하면서도, 백엔드에서 JWT를 직접 검증해 서버 기준 사용자 식별을 유지

제품 완성도의 핵심은 ‘배포 안정성’

- CI/CD로 재현 가능한 배포 흐름을 만들며 개발 속도와 안정성을 동시에 확보

랜딩(메인 페이지)이 제품 첫인상을 결정

- 인기/최신/CTA 동선을 명확히 하여 사용자가 바로 탐색·참여하도록 설계