여행을 더 쉽게, “가보자고”

💡프로젝트 소개

지도기반 여행 일정 관리 및 아티클 제공하는 여행 플랫폼 서비스

• GitHub: https://github.com/yeodahui/gabozago_FE
• 서비스 Link: https://www.gabozago.kr (현재 테스트 중으로 이용이 원활하지 않습니다. DEMO를 참고해주세요.)

🏆 2024.03.20. 2024년 꿈터 플러스 제 1회 대학생 창업 아이디어 경진대회 최우수상

🏆 2024.02.16. 부산권 LINC 3.0 창업공유대학 IR 피칭 경진대회 우수/인기상

주요 기능

• 여행/미식 관련 아티클 및 숏폼 보기
• 여행 일정 생성 및 관리하기
• 지도에서 행선지 확인 및 편집하기
• 컨텐츠 스크랩
• ...

팀원

Front-End	Front-End	Back-End
김종진	여다희	조다은

개발 환경 & 기술 스택

• 개발 환경
  • 개발 언어: TypeScript
  • 패키지 매니저: npm
  • 린팅 & 포맷팅: ESLint, Prettier
  • 부트스트랩: vite
• 클라이언트
  • UI: react v18
  • 상태관리: recoil
  • 스타일링: styled-components
• 백엔드
  • API 서버: Python + Django
• 인프라
  • 데이터베이스: MongoDB Atlas
  • 프론트엔드 배포: AWS EC2

디렉토리 구조

(root)
├── ...
├── public
│   └── icons # static하게 사용되는 이미지
├── src
│   ├── assets
│   │   ├── data # 더미 데이터
│   │   ├── icons # 아이콘 svg
│   │   ├── imgs # 이미지
│   │   └── types # Typescript 타입 정의
│   ├── components # 재사용 가능하거나 로직이 복잡한 컴포넌트
│   ├── hooks # Custom Hooks
│   ├── pages # 라우팅 단위가 되는 페이지 컴포넌트
│   ├── recoil # recoil 전역 상태
│   ├── styles # 전역으로 사용되는 스타일
│   └── utiles # 유틸리티 함수
└── ...

실행 or 기여하기

원활한 실행을 위해서는 환경변수 파일(.env)이 필요합니다. 개발자에게 .env 파일을 요청하세요.

Repository 로컬에 복제하기

먼저 Repository를 fork한 뒤, 로컬에 clone합니다. 이후 패키지를 다운로드합니다. (패키지매니저 npm이 필요합니다.)

git clone https://github.com/{유저 ID}/gabozago_FE.git
npm install

패키지 설치가 완료되면 다음 명령어로 서버를 실행합니다:

npm run dev

이후 브라우저에서 http://localhost:3000를 엽니다.

DEMO

홈 페이지

홈 - 아티클 탭	홈 - 숏폼 탭

아티클 페이지

아티클 페이지

숏폼 페이지

숏폼 페이지	숏폼 페이지 - 캡션 열기
숏폼 페이지 - 댓글 열기	숏폼 페이지 - 스크랩
숏폼 페이지 - 태그된 장소	숏폼 페이지 - 태그된 장소 내 여행에 추가

내 여행 페이지

내 여행 페이지 - 홈(여행 없음)	내 여행 페이지 - 여행 계획 생성 - 날짜선택
내 여행 페이지 - 여행 계획 생성 - 지역 선택	내 여행 페이지 - 여행 계획 생성 - 장소 선택

스크랩 페이지

스크랩 페이지 - 콘텐츠 탭	스크랩 페이지 - 콘텐츠 탭
스크랩 페이지 - 콘텐츠 탭 폴더 내부	스크랩 페이지 - 콘텐츠 탭 폴더 내부
스크랩 페이지 - 여행장소 탭

장소 페이지

장소 페이지

마이 페이지

마이 페이지 - 나의 여행 탭	마이 페이지 - 나의 활동 탭

에러 페이지

에러 페이지

설정 페이지

설정 페이지	이용약관
고객지원 - 공지사항	고객지원 - 공지사항 상세
고객지원 - 도움말	고객지원 - 서비스 문의하기
고객지원 - 내 문의 내역	의견 보내기
탈퇴하기	탈퇴하기 - 완료

프로필 수정 페이지

프로필 수정 페이지