Skip to content

GilDongMu/gildongmu

Repository files navigation

📖 여행 친구를 구해봐요 길동무 README

logo


프로젝트 소개

  • 혼자서 가는 여행은 심심하신가요? 비싼 비용을 분담하고 싶으신가요? 혼자 여행하기 부담스러우신 분들, 이런저런 여행 친구들 만나보고 싶으신 분들 그리고 여행에 관한 정보를 공유하고 싶으신 분들을 위한 사이트. ‘길동무’ 에서 여행 친구도 구하고 여러가지 정보를 공유해보아요!

팀원 구성

Front

| 박준성 | 김윤수 | 임주민 | 이준기 |

1차 개발
| 김범승 |

Back-end

| 송원선 | 이서연 |

Design

| 임아현 |


1. 개발 환경

  • Front : Next, TailWind, React Query,Axios, React hook form, Axios, stomp
  • Back-end : SpringBoot, MySql, Redis, Elastic Search, MongoDB, kafka, stomp
  • 버전 및 이슈관리 : Github, Github Issues, Github Project
  • 협업 툴 : Discord, Notion, Figma
  • 서비스 배포 환경 : Vercel

2. 브랜치 전략

  • Github-flow 전략을 기반으로 main, dev 브랜치와 feature 보조 브랜치를 운용했습니다.
  • main, dev, feat 브랜치로 나누어 개발을 하였습니다.
    • main 브랜치는 배포 단계에서만 사용하는 브랜치입니다.
    • develop 브랜치는 개발 단계에서 github-flow의 master 역할을 하는 브랜치입니다.
    • Feat 브랜치는 기능 단위로 독립적인 개발 환경을 위하여 사용하고 merge 후 각 브랜치를 삭제해주었습니다.

3. 프로젝트 구조

project
	├─components
	│  ├─common
	│  ├─card
	│  ├─modal
	│    └─index.tsx
	│	...
	├─pages
	│  ├─login
        │  ├─signup
	│	...
	├─hooks
	├─lib
	│  ├─utils
	│  ├─api
	│    └─axios.tsx
	├─store
	├─public
	│  ├─images
	│  ├─icons
	│  ├─fonts
	│  └─favicon.ico
	└─style


4. 역할 분담

🍊박준성

  • UI
    • 페이지 : 회원가입, 마이페이지, 글작성, 글수정, 404
    • 공통 컴포넌트 : tag input, radio input, textarea input
  • 기능
    • 회원가입 페이지 구현
    • 유저 이메일 유효성 및 중복 검사, 비밀번호 유효성 검사
    • react-hook-form 활용하여 input 데이터 관리
    • 여행글 등록 및 수정 기능 구현
    • 마이페이지 기능 구현
    • 상세보기 페이지 타이틀 제작

👻김윤수

  • UI
    • 페이지 : gnb, 전체글(여행), 채팅리스트(소통공간), 채팅방
    • 공통 컴포넌트 : 메인페이지 카드, 전체글 카드, 드롭다운, 카드 스켈레톤 이미지
    • 반응형 디자인 : gnb, 여행 페이지, 소통공간 페이지
  • 기능
    • 메인페이지 인기 최신순등 해당하는 카드 불러오기
    • 로그인 상태에 따른 gnb
    • 즐겨찾기 기능
    • 검색 기능
    • 전체글 페이지네이션 및 필터
    • 채팅 리스트 불러오기
    • 이전 채팅 불러오기
    • 채팅 기능
    • 페이지별 gnb 색상 변경

😎임주민

  • UI
    • 공통 컴포넌트: 모달, 구글맵, 헤더
    • 페이지: 내 여행 페이지, 메인 페이지 레이아웃
    • 반응형 디자인 : 내 여행 페이지, 메인 페이지
  • 기능
    • 작성자 프로필 모달 api 연결
    • 구글맵 api 연동
    • 내 여행 페이지 카드 플립 효과 구현
    • 내 여행 페이지 무한 스크롤 기능 구현
    • 내 여행 페이지 참여 중 모달 api 연결 및 신청 취소 기능 구현
    • 내 여행 페이지 모집 중 모달 api 연결 및 추방하기, 거절, 수락 기능 구현
    • 내 여행 페이지 찜 모달 api 연결 및 찜 취소, 길동무 신청하기 기능 구현

🐬이준기

  • UI

    • 여행글 상세페이지 전체 디자인 및 반응형 구현
    • 여행글 타이틀 부분 신청, 신청취소 시 보이는 모달 구현
    • 여행글 댓글 등록, 수정, 수정 취소, 삭제 시 보이는 모달 구현
    • 여행글 대댓글 등록, 수정, 수정 취소 삭제 시 보이는 모달 구현
    • 페이지 맨 위로 이동시키는 버튼 구현
  • 기능

    • 여행글 신청 및 취소(재신청 불가) 기능
    • 여행글 댓글, 대댓글 등록, 삭제 및 수정하기 기능
    • 필터 부분 클릭시 해당 내용의 필터부분으로 이동하는 기능
    • 비밀댓글 기능 구현 : 비밀댓글 작성자와, 해당 여행글 작성자에게만 노출되도록 로직 구성.

5. 개발 기간 및 작업 관리

개발 기간

  • 전체 개발 기간 : 2024-03-06 ~ 2024-05-30

작업 관리

  • GitHub Projects와 Issues를 사용하여 진행 상황을 공유했습니다.
  • 주간회의를 진행하며 작업 순서와 방향성에 대한 고민을 나누고 노션에 회의 내용을 기록했습니다.

6. 개선 목표

  • 더욱 사용자의 입장에서 좋은 웹이 될 수 있도록 속도 향상 및 효율적인 코드 작성.

7. 시연 영상

default.mp4