Skip to content

Home

Jump to bottom
Jay edited this page Oct 22, 2024 · 2 revisions

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

Frame_15

배포 [URL]

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

프로젝트 소개

[개요]

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

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

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

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

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

[프로젝트 링크]

팀원 소개

박재영 김별 이진희 유시원 김민상
사자 토끼 팬더 호랑이 곰
jamesjay1231 lbyul jinilee9 siwon1251 AnakinFullStackDevWorker
팀장 팀원 팀원 팀원 팀원

역할 분담

박재영

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

김별

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

이진희

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

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

유시원

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

김민상

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

기술 스택

My Skills

폴더 구조

📦 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

주요 기능

로그인 로그인

회원가입 회원가입

메인(홈) 메인

피드 상품 상세

피드 상세 게시글 상세

채팅 채팅

프로젝트 후기

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

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

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

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

개선 사항

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

Clone this wiki locally