/travelus

리팩토링 전 TravelUs 프로젝트입니다.

Primary LanguageJavaScript

TravelUs 🚌

🔗TravelUs 바로가기

목차

  1. TravelUs 서비스 소개
  2. 개발 기간
  3. 팀 소개
  4. 역할 분담
  5. 프로젝트 목표
  6. 기능
  7. 컨벤션 및 브랜치 전략
  8. 개발 환경
  9. 폴더 구조
  10. 프로젝트 소감
  11. 출처

1. TravelUs 서비스 소개

서비스명 TravelUs는 "Travel"과 "Us"의 합성어로, 함께 여행하자는 의미를 담고 있습니다. 또한 읽을 때, "Travelers"로도 들릴 수 있어 여행자들을 의미하기도 합니다.

그리고 저희 마스코트는 떠돌이 고양이입니다. 떠돌이 고양이처럼 자유롭게 여러 장소를 다니면서 새로운 만남을 한다는 의미에서 선택하게 되었습니다.

저희 서비스는 동행을 원하는 여행자들뿐만 아니라, 여행상품 판매자들, 그리고 새로운 사람들과 만남과 교류를 통해 직간접 여행 경험을 공유하고 싶은 분들에게도 적합한 서비스입니다. 이 서비스를 통해 여행자들을 함께 여행의 즐거움을 공유하고, 여러 사람들과 연결될 수도 있습니다.

  • 여행자들은 게시글 작성을 통해 여행에 대한 경험이나, 원하는 여행 상품 동행을 구할 수 있고, 댓글 기능을 통해 서로 소통하며 여행의 즐거움을 공유할 수 있습니다.
  • 여행상품 판매자들은 자신의 상품을 등록하고 홍보할 수 있습니다.

2. 개발 기간

6/1 - 6/6 : 프로젝트 계획 설립
6/7 - 6/27 : 공통 컴퍼넌트 개발 → 역할분담별 기능 구현 → 유지보수

3. 팀 소개

Hello, there! 저희는 4명의 Front-End 개발자로 구성된 Fearless 4 입니다. 저희는 모든 팀원이 MBTI F성격 유형이며, 팀원들과 함께라면 어떤 어려움에도 두려움 없이 도전에 임하겠다는 마음으로 팀명을 Fearless 4로 정하였습니다.

( LIKELION FE5 Project Team 4)

강동훈 김소연 정준영 최사라
강동훈_profile_img 김소연_profile_img 정준영_profile_img 최사라_profile_img
starcradle101 sy412 DayTeaJun developer-sala
팀장 팀원 팀원 팀원

4. 역할 분담

강동훈

게시물 페이지

  • 게시물 작성 페이지
  • 게시물 상세 페이지

김소연

홈피드 페이지

검색 페이지

채팅 페이지

  • 채팅 페이지 마크업

정준영

프로필 페이지

  • 사용자 프로필 페이지
  • 사용자 프로필 수정 페이지
  • 다른 사용자 프로필 페이지

팔로우 페이지

  • 팔로잉 목록 페이지
  • 팔로워 목록 페이지

기타

  • 모바일 뷰 추가
  • 라우터 및 페이지 경로 관리

최사라

상품페이지

  • 상품 리스트
  • 상품 등록 페이지
  • 상품 수정 페이지

기타

  • bottomnav 애니메이션 효과 기능 추가
  • Splash 및 404페이지 화면 디자인 및 애니메이션 효과 추가
  • Toast 기능 추가

공통

로그인 페이지

  • 로그인 메인 페이지
  • 이메일 로그인 페이지
  • 이메일로 회원가입
  • 프로필 설정

5. 프로젝트 목표

  1. 리액트 사용법을 익히고 실력 향상시키기

  2. 협업에 필요한 소프트 스킬 기르기

  3. 다른 사람들과 같이 하는 프로젝트 환경에 익숙해지기

6. 기능

페이지별 기능

Splash 회원가입 로그인
splash email login
홈피드 검색 404 페이지
HomeFeed searchPage 404page
채팅 프로필 프로필 수정
chatting_Animation profile_Animation profileEdit_Animation
게시글 등록 게시글 수정 게시글 삭제
postupload postEdit postDel
게시글 댓글 상품 등록 상품 정렬
댓글 상품등록 상품정렬
팔로우 로그아웃 토스트
팔로우 로그아웃 토스트

차별화 기능

1) 이미지 유효성 검사 구체화

validation

  • 프로필, 게시글, 상품에서 사용자가 이미지 업로드 시 input 요소 accept 속성에 지정되지 않은 파일들도 선택되는 문제를 해결하기 위해 유효성 검사 기능을 좀 더 구체적으로 만들어 추가하였습니다.
  • 기존에는 input 요소 accept 속성에 accept='image/*'로 설정하여, 이미지 업로드 시 지정된 확장자의 파일만 사용자가 선택할 수 있게 설정하였습니다.
  • 하지만 사용자가 형식을 사용자 지정 파일로 선택하지 않고, 모든 파일로 선택하여 업로드하는 경우, accept에 지정하지 않은 파일들도 선택이 가능해지는 문제점이 있습니다.
  • 그래서 저희는 업로드되는 파일의 형식이 이미지 파일로만 설정되도록 한번 더 구체적 유효성 검사 기능을 추가하였습니다.

2) 요건에 맞는 상품을 정렬하여 보여주는 기능

sortedButton_Animation

  • 사용자들이 원하는 조건에 맞는 상품을 손쉽게 찾을 수 있도록 해당 기능을 추가하였습니다.
  • 사용자들이 함께 떠나는 상품 목록에서 🔥추천 상품이나 🤑할인 상품 버튼을 클릭하면, 해당 요건에 맞는 상품이 정렬되어 보여집니다.
  • 상품 판매자가 상품 등록할 때 제목 앞에 [추천], [할인] 문구를 넣어주면 해당 기능이 적용됩니다.
  • 또한, 사용자들이 추천이나 할인 상품을 보다가 전체 상품을 보고 싶을 때, # 전체 상품 버튼을 누르면 처음처럼 전체 상품 목록을 볼 수 있습니다.

3) 검색 디바운스 기능

search_Animation

  • 불필요한 검색 요청의 수를 제어함으로써 서버 부하를 감소시키기 위해 해당 기능을 추가하였습니다. 즉, 사용자가 검색어를 입력하는 동안 실시간으로 관련 검색어를 보여주면서도, 불필요한 요청을 최소화하여 사이트의 성능과 사용자 경험을 향상시킵니다.
  • 사용자가 계정 검색에서 입력할 때마다 바로 검색 요청이 보내지지 않고, 일정 시간 동안 입력이 없을 때에만 요청이 보내집니다.
  • 사용자가 연속적으로 검색어를 입력하는 동안 디바운스 타이머는 재설정되어, 마지막 입력 이후 일정 시간이 경과되어야 찾고자 하는 계정명이 보여집니다.

4) bottomnav 아이콘 선택 시 애니메이션 효과

navbarbottom_Animation

  • 다른 페이지로 이동할 때, 사용자가 현재 본인이 선택한 아이콘에 대해 시각적으로 인식 할 수 있어 가고자 하는 페이지를 탐색하는데 도움을 주고, 사용자가 더욱 즐겁게 앱 또는 웹 사이트를 탐색할 수 있도록 해당 기능을 추가하였습니다.
  • 다른 페이지를 이동하기 위해 사용자가 bottomnav에서 아이콘을 선택하면 아이콘의 색 변화와 360도 회전하는 애니메이션 효과가 적용됩니다.

7. 컨벤션 및 브랜치 전략

컨벤션

코드컨벤션

  • Prettierrc: 일관된 코드 스타일을 적용시켜 개발자들이 코드 스타일을 일일이 조정할 필요가 없습니다. 따라서 시간을 절약할 수 있고, 가독성도 향상되며 유지보수에도 용이하게 하는 등 개발 프로세스를 더 효율적으로 해주기에 사용하였습니다.

.prettierrc 설정

{
	"printWidth": 80,
	"tabWidth": 2,
	"useTabs": true,
	"semi": true,
	"singleQuote": true,
	"jsxSingleQuote": true,
	"trailingComma": "es5",
	"bracketSpacing": true,
	"bracketSameLine": false,
	"arrowParens": "always"
}

커밋 컨벤션

feat        : 기능 (새로운 기능)  
fix         : 버그 (버그 수정)  
refactor    : 리팩토링  
design      : CSS 등 사용자 UI 디자인 변경  
comment     : 필요한 주석 추가 및 변경  
style       : 스타일 (코드 형식, 세미콜론 추가: 비즈니스 로직에 변경 없음)  
docs        : 문서 수정 (문서 추가, 수정, 삭제, README)  
test        : 테스트 (테스트 코드 추가, 수정, 삭제: 비즈니스 로직에 변경 없음)  
chore       : 기타 변경사항 (빌드 스크립트 수정, assets, 패키지 매니저 등)  
init        : 초기 생성  
rename      : 파일 혹은 폴더명을 수정하거나 옮기는 작업만 한 경우  
remove      : 파일을 삭제하는 작업만 수행한 경우

브랜치 전략

  • GitHubFlow: 비교적 단순하고 직관적인 구조를 가지고 있어, 작은 규모의 단기간 프로젝트에 팀원들이 쉽게 학습하고 적용할 수 있어 이 전략을 선택하였습니다.

8. 개발 환경

1 ) 프론트엔드 기술

2 ) 백엔드 기술

멋쟁이사자처럼 프론트엔드 스쿨에서 제공된 API 사용

3 ) 도구 및 라이브러리

Prettier

4 ) 협업 및 프로젝트 관리

Notion Discord

5 ) 디자인

Figma

9. 폴더 구조

final-04-fearless4
│  
├─ .gitignore
├─ .prettierrc
├─ package-lock.json
├─ package.json
├─ README.md
└─ src
   ├─ App.js
   ├─ api.js
   ├─ GlobalStyle.jsx
   ├─ index.css
   ├─ index.js
   ├─ assets
   │  └─ image
   │  └─ icon
   ├─ components
   │  ├─ background
   │  ├─ bottomnav
   │  ├─ button
   │  ├─ form
   │  ├─ loading
   │  ├─ loginJoin
   │  ├─ logo
   │  ├─ modal
   │  ├─ navbar
   │  ├─ post
   │  ├─ toast
   │  ├─ style
   ├─ fonts
   ├─ hook
   ├─ mobile
   ├─ pages
   │  │  ├─ chat
   │  │  ├─ follow
   │  │  ├─ homeFeed
   │  │  ├─ login
   │  │  ├─ loginEmail
   │  │  ├─ page404
   │  │  ├─ post
   │  │  ├─ product
   │  │  ├─ profileSetup
   │  │  ├─ search
   │  │  ├─ splash
   │  │  ├─ userProfile
   ├─ routes

10. 프로젝트 소감

강동훈

김소연

프로젝트 경험을 통해 고민해보고 차근차근 하는 연습을 한 것 같고 혼자였다면 절대 하지 못한 경험을 한 것 같습니다! 무엇보다 좋은 팀원분들 덕분에 많이 배운 것 같고 저도 얼른 성장해 도움이 될 수 있도록 노력하겠습니다~!!!! fearless4 팀원분들 감사합니다~!!👍🥹👍

정준영

프로젝트를 시작하기 전까지는 제 자신이 아직 많이 부족하다고 느꼈는데, 팀원들과 함께 프로젝트를 하면서, 제 자신이 생각보다 멋사에서 많이 성장하였다고 느끼게 되었고, 저의 부족한 부분은 팀원분들이 많이 채워주셨습니다! 저희 팀원분들과 멋사 여러분들께 감사드립니다!

최사라

프로젝트 시작 전에는 첫 개발 팀 프로젝트여서 걱정이 되었으나, 걱정과 달리 팀원 분들에게 많이 배우고 도움받았습니다.
그리고 어떤 서비스로 프로젝트를 시작할지 기획부터 제작까지 모든 프로세스를 경험해보아서 좋았습니다.
힘들었던 과정이었지만 팀원 분들 덕에 해낼 수 있었고, 개발자로서의 기술적 성장뿐만 아니라 협업 스킬 등 기술 외적으로도 많이 성장할 수 있었던 뜻깊은 경험이었습니다. fearless4 팀원분들 너무 감사합니다!!

11. 출처

이미지 출처

폰트 출처