🛩️ Tripillow

1. 📱 Tripillow 소개

Tripillow는 여행 경험을 공유하고, 개인 간의 여행용품과 외화를 거래하는 SNS 플랫폼입니다.
Trip(여행) + Pillow(베개)를 합친 Tripillow는 방구석 여행을 컨셉으로 간편하게 타인의 여행 후기를 통해 간접적으로 여행을 즐길 수 있습니다.
Pillower, Pillowing 기능을 활용하여, 친구를 맺은 사용자들은 자신의 여행 후기를 기록할 뿐만 아니라 친구의 여행 후기도 확인할 수 있습니다.
자신의 홈 피드에서 Pillowing한 사람들의 게시물을 확인 할 수 있고, 댓글과 좋아요 기능을 통해서 서로 소통할 수 있습니다.
더 이상 사용하지 않는 여행 용품과 외화를 간편하게 거래할 수 있습니다.

Tripillow를 통해 국내, 해외 방구석 여행러들과 소통해보세요 💙🛩️

🚀 배포 URL

테스트 계정
ID: [email protected]
PW: 123123

2. 👥 팀 소개

FE 김희민	FE 이윤석	FE 이도하	FE 임다솜
🔗 GitHub	🔗 GitHub	🔗 GitHub	🔗 GitHub

(🔼 Top)

3. 🗓️ 개발 기간 (23년 6월 12일 ~ 23년 6월 27일)

📌 주차별 프로젝트 마일스톤

주차
1주차 (6/1 ~ 6/7)	- 주제 선정, 기술 스택 및 협업툴 결정 (Notion, Discord, Figma, Figjam) - GitProject, GitIssue 템플릿 적용, Figma 디자인 작업 및 기획, 컨벤션 설정
2주차 (6/8 ~ 6/14)	- 초기 개발환경 세팅 - 로그인, 회원가입 페이지 마크업 & 스타일링 페어프로그래밍으로 구현
3주차 (6/15 ~ 6/21)	- 페이지 단위로 업무를 분담하여 작업 시작
4주차 (6/22 ~ 6/27)	- 필수 기능 구현 1차 완료 - 추가기능 구현 (게시글 카테고리 기능) - 배포 - 프로젝트를 시연해보며 보이는 에러 수정 - README 작성

(🔼 Top)

4. 🌳 개발 환경

🛠️ 기술스택

• 보다 간편한 컴포넌트 상태 관리와 접근을 위해 Recoil을 사용했습니다.
• Styled Components를 사용해서 컴포넌트 내에서 스타일을 캡슐화하며 모듈성과 재사용성을 높이고 컴포넌트 스타일을 보다 쉽게 ​​관리했습니다.
• 일관된 코드 스타일과 코드 마찰 감소를 위해 Prettier를 사용했습니다.

Forking Workflow

🚀 하나의 중앙 원격 저장소를 각자가 Fork해서 팀원마다 각자 저장소를 가지고 프로젝트를 진행하는 방식
🚀 팀원 모두 각자의 저장소를 가지고 있기 때문에 자유롭게 작업이 가능
🚀 각자 자신의 원격 저장소에 푸시하고, pull Requests를 올리면 팀원들이 코드를 확인하고 merge하기 때문에 안전하게 협업이 가능

Git Branch

🚀 Git Issue 작성 - Develop branch에서 branch 분기 후 작업

GitHub Flow

🚀 main : 배포가 될 branch입니다.
🚀 develop : 기능 개발이 완료된 branch가 합쳐지는 곳으로, 2명의 조원의 승인 후에 merge됩니다.

(🔼 Top)

5. 🎨 UI

6. 🛠️ 서비스 기능 소개

정보구조도

모바일 각 페이지 기능

스플래쉬	로그인	회원가입

회원가입 프로필 설정	계정 검색	팔로워&팔로잉

메인	좋아요	댓글등록

댓글 더보기	댓글 삭제	상품 상세 및 채팅

상품 등록	게시물 등록	나의 프로필

게시물 보기목록	프로필 수정	게시물 삭제

게시물 수정	프로필 상품삭제	프로필 상품 수정

♻️ Refactoring: Tablet, PC 반응형 웹 및 추가 기능

• PC, Tablet, Mobile 반응형 적용
• aria-label, img alt, 메타 태그 활용으로 웹 접근성 향상
• Husky, ESLint, Prettier 적용

1. 랜딩페이지, 로그인 페이지

• PC, Tablet에서 랜딩페이지 접근시 4.5초 동안 랜딩페이지 애니메이션 후 /login으로 이동
• 랜딩, 로그인, 회원가입 새롭게 UI 구현

2. PC, Tablet 내비게이션

• PC, Tablet 반응형 내비게이션 구현

PC	Tablet

3. 홈페이지

• React-Query로 변경
• 스크롤 감지 방식 react-intersection-observer API로 변경
• 국내, 해외 카테고리 토글 상태 저장 및 유지 기능 추가
• 로그아웃 시 캐시 삭제 기능 추가

4. 검색

• /search 엔드포인트는 pc 및 tablet 일 경우 접근 막기 대신 내비게이션 모달창으로 변경
• 검색목록 키보드 조작 기능 추가
• 이미지 예외처리 추가

5. 상품

• 상품/외화 카테고리에 따라 상품 모아보기 기능 추가
• 이미지 업로드시 압축 후 업로드 기능 추가
• 이미지 클릭시 원본 이미지 모달 띄우기 기능 추가
• 상품 게시글 업로드 버튼 throttle 추가로 연속 게시 방지
• React-Query 라이브러리로 캐싱 기능 추가
• Lazy Loading 라이브러리로 리소스 크기를 줄여 로딩 속도 개선
• 모달창 React portals로 변경

상품 페이지	상품 상세페이지

상품 업로드	상품 수정

6. 게시글

• 이미지 업로드 최적화
• 이미지 클릭시 원본 이미지 모달 띄우기 기능 추가
• 이미지 제스처로 넘기기 기능 추가
• 게시글, 댓글 업로드 버튼 throttle 추가로 연속포스트 방지
• 댓글 작성시간별 초, 분, 시간, 일자로 표시
• 모달창 React portals로 변경

게시글	게시글 상세	게시글 업로드

게시글 수정	이미지 원본 모달

7. 채팅

• PC, Tablet 채팅 페이지 UI 구현
• 자연스러운 반응형을 위해 /chat /chat/:username을 PC Tablet에서는 UI를 동일하게 사용
• 채팅 입력창 유저 이미지 띄우기

8. 프로필

• React-Query로 캐싱 기능, 무한 스크롤 추가
• 유저 정보창 PC, Tablet 용 UI 추가
• 이미지 압축, 이미지 최적화 적용
• 전체 페이지 My Pillowings 정보 띄우기 구현
• PC, Tablet Skeleton UI 적용

프로필	프로필 수정

7. 📁 폴더 구조

📁 Tripillow
├──📁 .github
├──📁 node_modules
├──📁 public
├──📁 src
│   ├──📁 Assets
│   ├──📁 Components
│   ├──📁 Hooks
│   ├──📁 Mock
│   ├──📁 Pages
│   │   ├──📁 Chat
│   │   ├──📁 Post
│   │   ├──📁 Product
│   │   └──📁 Profile
│   ├──📁 Recoil
│   ├──📁 Styles
│   └──📁 Utils
├──📄 App.js
├──📄 GlobalStyle.jsx
├──📄 index.js
├──📄 .gitignore
├──📄 .prettierrc.js
├──📄 package-lock.json
├──📄 package.json
└──📄 README.md

(🔼 Top)

8. 🙏 팀 컨벤션

커밋 컨벤션

- Feat: 새로운 기능 추가
- Fix: 버그 수정
- Docs: 문서 수정 (예 : readme.md, json 파일 등 수정/ 문서 관련 라이브러리 설치 등)
- Design: CSS 등 사용자 UI 디자인 변경
- Style: 코드 formatting, 세미콜론 누락, 코드 자체의 변경이 없는 경우
- Refactor: 코드 리팩토링
- Test: 테스트 코드, 리팩토링 테스트 코드 추가
- Comment: 필요한 주석 추가 및 변경
- Chore: 패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore
- Rename: 파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우
- Remove: 파일을 삭제하는 작업만 수행한 경우
- !BREAKING CHANGE: 커다란 API 변경의 경우
- !HOTFIX: 급하게 치명적인 버그를 고쳐야 하는 경우

코드 컨벤션

통일성 있는 코드 작성을 위해 다양한 코드 컨벤션을 정해 사용했습니다.

{
	bracketSpacing:  true,
	jsxBracketSameLine:  false,
	jsxSingleQuote:  true,
	singleQuote:  true,
	proseWrap:  'preserve',
	semi:  true,
	printWidth:  120,
	endOfLine:  'lf',
	useTabs:  false,
	tabWidth:  2,
	trailingComma:  'all',
	arrowParens:  'always',
};

(🔼 Top)