🖥️ 프로젝트 소개

• MYRO 클론 코딩
  • 여행 스케줄링 플래너 ‘MYRO’ 에 추가 기능을 구현한 프로젝트
  • UI만 보고 반응형 디자인과 기능을 구현
  • MYRO 홈페이지: https://www.myro.co.kr/

🗓️ 프로젝트 기간

2023.01.13 ~ 2023.04.11 (총 13주)

💁‍♂️ 팀원소개

강정현 Front-End

김연수 Front-End

김주연 Front-End

권유나 Back-End

김강호 Back-End

김성수 Back-End

📄 프로젝트 설계

• 기능 명세서
• API 명세서
• ERD
• 와이어프레임

🛠️ 기술스택

Back-End

JAVA	Sprin Boot	Gradle	Swagger2	Junit5	JWT	JPA	Websocket
8	2.7.5	7.6	3.0.0	-	3.10.3	2.7.5	2.7.5

Front-End

React	TypeScript	React-reudx	React-router-dom	React-slick	React-beautiful-dnd	slick-carousel	Axios	Firebase
18.2.0	18.0.27	8.0.5	6.8.1	0.29.0	13.1.1	0.29.0	1.3.2	9.18.0

Database

MySQL
8.0.31

CI/CD

Ubuntu	Nginx	Docker	Jenkins	SSL
18.04.6 LTS	1.14.0	23.0.1	-	-

TOOL

GitHub	PostMan	Figma	Notion

IDE

Visual Studio Code	IntelliJ

⭐️ Git

🔍 브랜치 전략 및 컨벤션

1. Git Workflow

.
├── main: 배포 코드가 있는 브랜치
│    └── develop: 실제 개발 브랜치
│         ├── feature: 기능 구현 브랜치
│         ├── test: 테스트 코드 작성 브랜치
│         ├── fix: 버그 수정 브랜치
│         ├── refactor: 코드 스타일 수정 및 리팩토링을 위한 브랜치
│         └── docs: readme 등 문서를 작업하는 브랜치
└── hoxfix: main에서 버그를 수정할 브랜치

2. Branch Naming

⭐️ [해당하는 브랜치]/[front/back]-issue[이슈번호]

ex) develop
      ├── feature/front-issue25
      ├── fix/back-issue126
      └── ...

3. Commit Convention

💡 [Part] Tag: Subject

 ex) [FE] feat: 홈페이지 이미지추가

[파트] 태그: 제목의 형태로 ], : 뒤에는 space가 있다.

• feat: 기능 추가
• modify: 버그 아닌 코드 수정
• fix: 버그 수정
• refactor: 코드 리팩토링
• style: 코드 스타일(코드 컨벤션 추가) 수정
• docs: 문서 작업
• design: 프론트 CSS 수정
• test: 테스트 코드 작성
• chore: 프로젝트 설정 파일 수정
• create: 프로젝트 생성
• rename: 파일이나 폴더명을 수정하거나 옮기는 작업만 수행
• remove: 파일을 삭제하는 작업만 수행

📺 화면 소개 (gif)

[기존 기능]

1. 회원가입

   

2. 로그인

   1. 기본 로그인

      

   2. 카카오 로그인

      

3. 메인페이지

   • 메인페이지에서 유저가 공개한 일정과 여행 장소를 확인할 수 있습니다.
   • 여행지 목록을 확인할 수 있습니다. 유저가 일정을 생성할 때, 해당 목록에서 여행지를 선택할 수 있습니다.
     • 여행지 검색을 통해 원하는 장소를 찾을 수 있습니다.
     • 오름차순, 내림차순 정렬을 통해 빠른 검색이 가능합니다.

   

4. 마이페이지

   1. 회원 정보 수정

      • 유저가 설정한 닉네임, 비밀번호 그리고 프로필 이미지를 변경할 수 있습니다.

      1. 프로필 이미지

         

      2. 회원 정보 수정

         

   2. 내 일정 목록

      • 유저가 생성한 일정 목록을 확인할 수 있습니다.
        • 일정의 공개 여부를 설정할 수 있습니다. 공개 설정 시 메인 페이지의 여행기에 공유됩니다.
        • 일정을 수정할 수 있습니다. 일정을 수정할 수 있는 페이지로 이동합니다.
        • 친구에게 일정을 공유할 수 있습니다. 일정이 공유된 친구 목록을 확인할 수 있습니다.
        • 일정을 삭제할 수 있습니다.

      

5. 일정 생성

   1. 일정 생성 - 1

      1. [📌추가기능] 여행 날짜 선택

         • 여행 시작과 끝날짜를 선택합니다.

         

      2. 추천 호텔/장소 추가 검색

         • 호텔/장소를 이름으로 검색합니다.

         

      3. 호텔/장소 정보 모달

         • 호텔/장소 상세 정보를 확인합니다.

         

      4. [📌추가기능] 장소 등록

         • 기존에 존재하지 않는 장소를 등록합니다.

         

      5. 일정 생성

         • 일정을 세부적으로 조절합니다.

         

   2. 일정 생성 - 2

      1. 일정 이동시간 변경

         • 사용자가 일정 간 이동시간 변경이 가능합니다.

         

      2. 일정 머무는 시간 변경

         • 사용자가 일정 장소에 머무는 시간 변경이 가능합니다.

         

      3. 일정 순서 변경

         • 정해진 일정 순서 외에 사용자가 직접 장소 순서 변경을 할 수 있습니다.

         

      4. 일자별 일정 확인

         • 일정 내 일자별로 상세경로와 지도 확인이 가능합니다.

         

      5. 일정에서 장소 제외

         • 일정에서 제외할 장소를 포함되지 않은 장소 박스로 이동합니다.

         

      6. 장소 검색 후 일정에 추가

         • 필요한 장소를 검색 후 일정에 추가가 가능합니다.

         

[📌추가 기능]

1. 친구

   1. 친구 추가하기

      • 다른 사용자에게 친구 요청을 할 수 있습니다.

      

2. 알림

   1. 실시간 알림

      • 다른 사용자로부터 친구 신청 알림이 온 경우 실시간 알림이 수신됩니다.

      

   2. 친구 수락 → 마이페이지 친구 목록 확인

      • 친구 요청에 수락한 경우 마이페이지 친구 목록에서 확인이 가능합니다.

      

   3. 일정 수락 → 마이페이지 일정 목록 확인

      • 친구인 사용자에게서 일정 공유 요청을 수락한 경우 마이페이지 일정 목록에서 확인이 가능합니다.