개요
1차 프로젝트의 주제는 여행 플랫폼 만들기 였다.
지금 까지 배운 프런트 내용을 프로젝트를 통해 정리 할 수 있는 계기가 되었다.
일정
7/15 ~ 7/16 : ERD 작성 및 기본 세팅
7/16 ~ 7/21 : 개발
7/21 ~ 7/22 : 발표 자료 작성 및 readme 작성
팀 구성
총 6명으로 각자 여행 플랫폼의 다른 부분을 맡았고,
팀장님이 git 기본 세팅을 해주셨고 나는 ERDCloud를 통해 DB 설계를 맡았다.
기술 스택
Frontend
- HTML / CSS
- TypeScript
- Node.js
- Readdy
Backend
- supabase
- ERDcloud
Communication
- Slack
- Notion
- Github
👀 주요 서비스 흐름 & 기능
1. 메인페이지 & 여행지 검색
상단 검색창에서 여행지명을 입력하면
해당 여행지의 상세페이지로 빠르게 이동할 수 있습니다.
인기 여행지 리스트/카드 UI가 제공됩니다.
(카드 내 후기수, 평균평점, 주요 테마, 여행가격 등 표시)
개발자 GitHub, Notion 등 외부 사이트로 연결되는 링크도 제공됩니다.
2. 여행지 리스트 & 상세 페이지
여행지 페이지는 사용자에게 다양한 여행지 정보를 제공하고, 여행 계획 및 상품 예약의 출발점 역할을 합니다. 검색부터 상세정보 확인, 후기 작성, 패키지 상품 탐색까지 여행과 관련된 전반적인 기능을 담고 있습니다.
1. 여행지 목록 카드 UI로 나열
총 6개의 여행지를 대표 이미지, 테마 태그, 여행 가격, 후기, 평점 등 간단한 정보를 직관적으로 보여주고 여행지별 대륙/국내 필터링으로 원하는 곳의 정보만 찾아볼 수 있습니다.
2. 여행지 세부 페이지
세부 페이지에서는 목록 카드에서 본 간단한 정보들을 개요/관광명소/후기/패키지 탭으로 자세히 볼 수 있게 만들었습니다.
3. 세부 페이지에서 버튼 구현
개요에서 여행 버튼 세우기를 누르시면 여행계획 페이지로 후기에서 후기작성을 누르시면 글쓰기 페이지로 패키지에서 예약하기를 누르시면 내 여행계획 페이지에 패키지 여행 정보를 담으실 수 있습니다.
3. AI 맞춤 여행 일정 생성
여행 계획 페이지는 사용자가 여행에 필요한 기본 정보를 입력하면, AI가 자동으로 맞춤형 여행 일정을 추천해 주는 서비스의 핵심 기능입니다.
사용자는 복잡한 검색이나 일정 조율 없이, 몇 번의 클릭만으로 나만의 여행 일정을 손쉽게 생성할 수 있습니다.
1. 여행 정보 입력
여행 희망지, 여행 인원, 예산, 여행 기간, 관심사 등 여행과 관련된 다양한 정보를 입력할 수 있습니다.
2. AI 기반 여행 일정 자동 생성
입력된 정보를 바탕으로 AI가 최적의 여행 일정을 자동으로 설계해줍니다. 일정에는 추천 관광지, 체험, 식사 등 다양한 활동이 포함됩니다.
3. 일정 수정 및 개인화
AI가 제안한 기본 일정을 사용자가 직접 자유롭게 편집할 수 있습니다.
4. 일정의 순서 변경, 일정 추가/삭제
관광지, 식사, 숙박 등 상세 일정을 사용자가 직접 수정 가능합니다.
4. 여행 계획 저장 및 내 여행계획 관리
여행계획 페이지에서 생성한 일정은 확정/수정 후 “여행 계획 저장하기” 클릭하여 내 여행 계획 페이지에 사용자에 따라 해당 사용자가 저장한 여행만 볼 수 있습니다.
내 여행 계획 페이지에서
▸ 직접 만든 여행 일정
▸ 패키지 여행 예약내역
을 한 눈에 관리하고,
저장한 여행에 대해 계획별로 상세보기/수정을 통해
▸ 일정/인원/예산/관심 테마 정보 수정
▸ 정보가 바뀔 때마다 AI로 재추천 가능
(예: 일정이나 인원, 예산 변경 → “AI 일정 다시 생성하기”)
▸ AI가 추천해준 일정 변경 가능
▸ 완료된 계획만 세부 페이지에 후기작성 버튼 생성
5. 여행 후기 & 커뮤니티
여행 후기, 질문/답변, 여행팁, 동행 구인 등
다양한 주제로 커뮤니티 글쓰기 지원합니다.
각 카테고리별로 분리하여 검색/필터/정렬 지원합니다.
글 상세페이지에서 댓글, 대댓글, 좋아요 기능이 가능하고 여행지 후기에는 실제 사진 및 동영상을 첨부하여 더욱 풍성한 후기 페이지를 즐길 수 있습니다.
후기/질문/동행 등 게시글이 여행지 상세와 연동되어, 여행지별 실제 후기 수, 후기 평점 등이 자동으로 제공됩니다.
6. 회원가입/로그인 & 프로필 관리
이메일 기반 회원가입이 가능합니다. (필수 정보: 이름, 이메일, 비밀번호, 휴대폰 번호 / 프로필 이미지는 선택 사항입니다.)
구글 및 카카오 계정을 통한 소셜 로그인도 지원합니다.
로그인 후에는 모든 서비스를 이용할 수 있으며, 화면 우측 상단에 가입한 이메일과 로그아웃 버튼이 표시됩니다.
비밀번호를 잊은 경우, 가입한 이메일을 입력하면 비밀번호 재설정 링크를 받아 새로운 비밀번호로 변경할 수 있습니다.
📃 페이지별 상세 안내
🏠 메인페이지
여행지 검색
- 검색창에서 여행지명 입력 → 상세페이지 이동
인기 여행지(후기수/평점/가격 등)
- 인기여행지 클릭 -> 해당 여행지 상세페이지 이동
기타 기능
- 개발자 github/notion
- 여행계획 바로가기
- 서비스
🏝️ 여행지 목록/상세
대륙/국가/테마/가격 등 필터
여행지별 관광명소, 패키지, 후기(연동)
여행지별 실제 커뮤니티 후기수, 평점 자동 표시
🗺️ 여행 계획 생성/수정 (AI 추천)
여행지, 날짜, 인원, 예산, 테마 선택
AI 기반 추천 일정 생성(오전/오후/저녁)
일정 직접 수정 가능, 저장/재추천 가능
📑 내 여행 계획/패키지 관리
내가 만든/예약한 여행 계획 목록 및 세부 페이지
완료됨 상태일 때만 생성되는 후기 작성 버튼
일정, 인원, 예산 등 수정 가능
수정 시 AI로 다시 일정 추천 가능
💬 여행후기/커뮤니티
여행후기/질문/팁/동행 구인 등 다양한 글쓰기
댓글/대댓글, 좋아요, 후기 사진 첨부 지원
글 상세에서 후기/질문/댓글/좋아요 등 활동 지원
게시글 작성
- 태그설정, 이미지 및 동영상 업로드, 여행후기/질문/팁/동행 구인 설정 및 여행지 선택 가능
게시글 조회
- 검색 및 필터링을 통해 원하는 게시글 조회 가능
게시글 상세페이지
- 게시글 상세페이지에서 게시글 내용 및 이미지 확인, 동영상 재생 가능
- 좋아요 및 댓글, 대댓글 기능 가능
회원가입 및 로그인/로그아웃
회원가입
로그인/로그아웃
비밀번호 찾기
- 가입한 이메일 입력 -> 이메일로 비밀번호 재설정 링크 발송 -> 비밀번호 재설정
🗃️ 데이터베이스 구조
🙌 넥스트 코드 ERD CLOUD: ERD 페이지 바로가기
향후 계획
앞으로 남은 플젝이 총 2번 남았다.
사실 이번 프로젝트는 기간도 매우 짧고 약간 맛보기식 플젝이였는데, 그래서 남은 플젝이 많이 기대된다.
후기 및 배운점
사실 프론트쪽으로 프로젝트를 진행한 적이 없었는데 이번 기회에 경험할 수 있게되어 좋았다.
ai를 통해 프런트 UI를 뽑아내는게 장단점을 명확하게 알게 되었다.
프로젝트 기간이 매우 짧아서 기능구현을 생각보다 많이 못해서 아쉬웠다. 북마크 기능이나 공유 기능을 더 만들고 싶었는데....
그리고 기능 구현에 너무 몰두한 나머지 유지보수성을 너무 신경쓰지 않았다. 원래 주말에 리팩토링을 통해서 유지보수성을 높이는 작업을 하려했는데 주말에 급한 일정이 생기는 바람에 하지 못했다...
참고 자료 및 링크
