반려 동물에 관한 모든 것, Hand Pet!

배포 [URL]

URL : https://handpet.netlify.app/ 계정 :

• 아이디 : test88@naver.com
• 비밀번호 : 123123123

프로젝트 소개

[개요]

핸드펫은 반려 동물 수제 간식을 사고 팔 수 있고, 다른 유저와 반려 동물에 대해 이야기를 나눌 수 있는 커뮤니티입니다.

반려 동물을 좋아하는 팀원들이 모여, 반려 동물에 대한 커뮤니티 사이트를 제작하였습니다.

반려 동물을 사랑하는 사람들에게 추천하고 싶은 반려 동물 간식을 판매 할 수 있습니다.

반려 동물과 함께 하는 일상을 글과 사진이 담긴 게시물을 작성하여 다른 유저와 공유할 수 있습니다.

반려 동물에 관심이 많은 유저를 검색 후 팔로우하여 피드에서 게시물을 볼 수 있고, 댓글과 좋아요를 남길 수 있습니다.

[프로젝트 링크]

• [팀 레포지토리] : https://github.com/ESTFE-final/hand_pet
• [팀 피그마 디자인] : https://www.figma.com/design/Auw1bYvx4YhVKHKOsj6abe/4%EC%A1%B0-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8?node-id=0-1&t=RrtuVNqzftP9bErj-1

팀원 소개

박재영	김별	이진희	유시원	김민상
jamesjay1231	lbyul	jinilee9	siwon1251	AnakinFullStackDevWorker
팀장	팀원	팀원	팀원	팀원

역할 분담

박재영

• 프로젝트 라이브러리 설치 및 폴더 구조 생성
• 페이지 전체 생성 및 라우팅 설정
• 메인, 검색, 피드, 채팅 목록 페이지,채팅방 상세,상품 상세 퍼블리싱
• 메인 페이지 상품 목록 구현 및 카테고리 별 정렬
• 판매 중인 상품 가격순 정렬
• 회원가입 유효성 검사 및 기능 구현
• 로그인 유효성 검사 및 기능 구현
• 로그인 리덕스 store,slice 코드 구현
• 프로필 설정 이미지 업로드 기능 구현
• 계정 검증 기능 구현
• 유저 프로필 기능 구현
• 프로필 상품 목록 구현
• 상품 등록, 수정, 삭제 기능 구현
• 전체 페이지 로딩 기능 구현
• 상품 상세 페이지 기능 구현
• 프로필 편집 이미지 업로드, 계정 검증 구현, 수정 기능 구현
• 채팅 리스트,채팅 이미지 업로드,채팅 기능 구현

김별

• 공통 컴포넌트, 프로필 페이지, 게시글 작성 페이지 스플래시 스크린, 404 페이지, 게시글 댓글 퍼블리싱
• 탭 메뉴바, 게시글 디자인 수정
• 프로젝트 전반 디자인 및 스타일링 수정
• 프로필 상품 및 게시물 탭, 앨범형 기능 구현
• 프로필 데이터 조회 구현
• 게시글 작성, 좋아요 기능 구현
• 스플래시 스크린, 404 페이지 기능 구현
• 댓글 작성, 리스트, 삭제 기능 구현
• 팔로우, 언팔로우 기능 구현 참여
• 탭 메뉴바 기능 구현 참여

이진희

• 프로젝트 전반 디자인 및 스타일링
• 프로필편집, 프로필설정, 팔로우리스트 퍼블리싱
• 리셋css, 공통css 작성
• 상품등록 퍼블리싱 및 기능구현
• 유저검색 퍼블리싱 및 기능구현

• 상품목록, 게시물목록, 홈판매중인상품 더보기 버튼 기능구현

유시원

• 로그인, 회원가입, 게시물 수정, 검색버튼, 프로필 등록 퍼블리싱
• 피드 목록 구현
• 게시물 상세페이지 구현
• 프로필 게시물 구현
• 게시물 수정, 삭제 기능
• 로그아웃 기능구현
• 팔로우, 언팔로우 기능 구현
• 팔로워, 팔로잉 리스트 구현

김민상

• 페이지 이동기능 구현
• 하단 탭 라우트 기능 구현 및 퍼블리싱
• 상품등록 페이지 대략적인 모양만 퍼블리싱
• 채팅리스트 페이지 퍼블리싱 참여

기술 스택

폴더 구조

📦 hand_pet
├── 📄 .env
├── 📄 .eslintrc.json
├── 📄 .gitignore
├── 📄 .prettierignore
├── 📄 .prettierrc
├── 📄 README.md
├── 📄 index.html
├── 📄 package-lock.json
├── 📄 package.json
├── 📂 .github
│   ├── 📄 PULL_REQUEST_TEMPLATE.md
│   └── 📂 ISSUE_TEMPLATE
│       └── 📄 -task--작업-파일-기능-구현-설명.md
├── 📂 .vscode
│   └── 📄 settings.json
├── 📂 public
│   └── 📄 index.html
├── 📂 src
│   ├── 📄 App.css
│   ├── 📄 App.jsx
│   ├── 📄 firebase.js
│   ├── 📄 firebaseChatService.js
│   ├── 📄 index.css
│   ├── 📄 index.jsx
│   ├── 📂 assets
│   │   ├── 📂 icons
│   │   │   ├── 📄 icon-404.svg
│   │   │   ├── 📄 icon-arrow-left-w.svg
│   │   │   ├── 📄 icon-arrow-left.svg
│   │   │   ├── 📄 icon-edit-fill.svg
│   │   │   └──  ...
│   │   └── 📂 images
│   │       └── 📄 img-main-banner.png
│   ├── 📂 components
│   │   ├── 📂 AddProductComponents
│   │   │   ├── 📄 FloatinButton.jsx
│   │   │   ├── 📄 GoodsName.jsx
│   │   │   └──  ...
│   │   ├── 📂 LoginComponents
│   │   │   ├── 📄 loginTitle.jsx
│   │   │   └──  ...
│   │   ├── 📂 MainComponents
│   │   │   ├── 📄 CommentForm.jsx
│   │   │   └──  ...
│   │   ├── 📂 ProductComponents
│   │   │   ├── 📄 ProductButton.jsx
│   │   │   └──  ...
│   │   ├── 📂 ProfileComponents
│   │   │   ├── 📄 Profile.jsx
│   │   │   └──  ...
│   │   ├── 📂 SharedComponents
│   │   │   ├── 📄 Button.jsx
│   │   │   └── 📄 CommonComponents.jsx
│   │   └── 📂 TabMenuComponents
│   │       └── 📄 TabNavi.jsx
│   ├── 📂 pages
│   │   ├── 📄 AddProductPage.jsx
│   │   ├── 📄 ChatListPage.jsx
│   │   └──  ...
│   └── 📂 redux
│       ├── 📄 store.js
│       └── 📂 slices
│           └── 📄 authSlice.js

팀 룰

To Do

• 일요일은 휴식 시간 및 자율 작업 진행합니다.( 태스크 카드 이용 )
• 회의는 주말을 제외한 매일 오전 11시에 진행합니다.
• PR은 매주 화, 금요일 오후 5시에 같이 진행합니다.
• 팀원들 간 이견이 발생하면 다수결로 진행합니다.
• 하루에 태스크 최소한 두개로 설정하고 3시간을 준수합니다.
• 3시간을 초과할 경우 팀원들에게 공지 및 라벨을 작성해야 합니다.
• 태스크 시간이 오버되면, 포지션 별로 상의 후에 태스크에 대한 진행방향을 결정합니다.
• 건강 문제 등 부득이한 상황 발생 시 사전에 팀원들에게 알려주고 양해를 구합니다.

Not To Do

• 팀원들과 상의 없이 push나 merge를 하지 않습니다.
• 시간 약속에 늦거나, 이유없는 불참하지 않습니다.

커밋 메시지 규칙

커밋 메시지는 제목과 본문으로 나누어 집니다. 한 줄만 작성해도 설명이 충분하다면 제목만으로도 괜찮습니다. 하지만 어떤 변경 사항이 있는지 맥락과 설명이 필요하다면 본문을 작성할 수 있습니다. 다음은 제목과 본문을 작성하는 규칙입니다.

• 제목과 본문을 한 줄 띄워 분리하기
• 제목은 영문 기준 50자 이내로 적기
• 제목 첫글자를 대문자로 적기
• 제목 끝에 . 는 금지
• 제목은 명령어로 작성하기
• 본문은 50자마다 줄을 바꿔주기
• 본문은 어떻게 변경했는지 보다 무엇을 변경했는지, 왜 변경했는지 에 맞추어 작성하기

PR 형식

PR 제목

feature / #이슈번호

PR 본문

PR 타입(하나 이상의 PR 타입을 선택해주세요)

반영 브랜치

ex) feat/login -> dev

• 기능 추가
• 기능 삭제
• 버그 수정
• 의존성, 환경 변수, 빌드 관련 코드 업데이트

작업 내용

• 이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지 첨부 가능)

테스트 결과 ex) 베이스 브랜치에 포함되기 위한 코드는 모두 정상적으로 동작해야 합니다. 결과물에 대한 스크린샷, GIF, 혹은 라이브 데모가 가능하도록 샘플API를 첨부할 수도 있습니다.

스크린샷 (선택)

리뷰 요구사항(선택)

• 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요
• ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

브랜치 이름 형식

종류	사용패턴	특징
main	main	프로덕션 스냅샷 가장 최신의 배포된 버전
develop	dev	릴리즈 계획에 따라서 Github에서 기본 브랜치로 지정
feature	feature 이슈번호-이름 feature/1-branch-name	develop에 병합
hotfix	hotfix/이슈번호 hotfix/#911	main에 병합

Lint 규칙

주요 규칙

• 오직 single quote 만 사용합니다.

• var 는 사용하지 않습니다.

• 키워드 다음엔 스페이스 하나를 띄워주세요.

• 더 많은 정보는 https://standardjs.com/rules.html 를 참고하세요.

• 위 링크의 룰에서 예외인 경우입니다.

  • 세미 콜론 사용을 허용합니다.
  • 템플릿 리터럴 사용을 허용합니다.

변수 이름

• camelCase

파일 & 생성자 이름

• 컴포넌트 파일 : PascalCase

• others : camelCase

node & npm 버전 통일

• node : v20.17.0
• npm : v10.8.2

주요 기능

[로그인]	[회원가입]

[메인]	[상품 상세]

[게시물 상세]	[채팅]

프로젝트 후기

박재영 : 가장 먼저 컴포넌트를 확장성있게 잘 만드는게 어려웠습니다. 코드를 만들 때 부터 여러 경우의 수를 생각해서 만들어야겠다는 생각이 들었습니다. 프로젝트를 진행하며 깃 사용법에 대해 깊게 공부할 수 있었던 점도 좋았습니다. 처음 팀장이 되어 프로젝트를 진행해서 많은 부분을 조율해야 하는 점이 조금 어려웠지만, 항상 다 같이 참여해서 논의하며 열정적으로 도와준 팀원들 덕분에 좋은 협업 경험을 한 것 같습니다. 다시 한번 함께 프로젝트를 진행한 팀원분들께 감사드립니다.

이진희 : 하나도 모르는 상태로 팀프로젝트를 하게 되어서 팀에 폐를 끼칠까 걱정이 많았는데, 멋지고 좋은 팀원 분들을 만나서 서로 으쌰으쌰하며 프로젝트를 마무리할 수 있어서 좋았습니다. 팀프로젝트를 통해 협업과정과 커뮤니케이션을 배울 수 있어서 좋았습니다. 다들 수고 많으셨습니다~

유시원 : 팀프로젝트 경험을 쌓을수 있어서 좋았습니다. 여러 난관에 봉착도 많이하고 정말 힘들었는데 팀원들 덕분에 끝까지 완주할수있던것같습니다.다들 수고많으셨고 앞으로 다들 훌륭한 개발자가 되어서 다시 만났으면 좋겠습니다.

김별 : 프로젝트가 진행되면 될수록 파일 구조가 많이 복잡해져서 코드 수정할때 파일 찾는 어려움을 겪었지만 그럴수록 팀원분들과 더 자주 소통을 하며 서로서로 도와주고 알려주면서 하다보니 잘 진행할 수 있었습니다. 처음 시작할 때 걱정을 많이 했었는데 결과적으로는 이 프로젝트를 통해 다양한 경험을 쌓을 수 있어서 좋았습니다. 약 4주동안 모두 고생 많으셨고, 감사드립니다.

개선 사항

• 팀 프로젝트 기간이 정해져 있었기 때문에, 프로젝트 후반 부로 갈수록 중복되는 코드들이 생겼습니다. 코드를 컴포넌트 별로 분리하여 사용하거나, custom hook을 만들어 중복되는 코드를 제거하고 싶습니다.
• 지금은 제공 받은 api를 사용해서 프로젝트를 완성했지만, 원하는 데이터를 얻기 위해 서버를 만들어서 처음 기획했던 기능들을 추가하여 프로젝트를 발전시키고 싶습니다.