sweeeeetpotato / PetMate

산책가까? 웹 서비스 리팩토링

🐾 반려동물 산책 메이트 매칭 서비스앱 '산책가까?'

📑 프로젝트 소개

• 배포 : https://petmate.vercel.app/
• Test ID : [e-mail]
• Test PW : 123456!

• 🐿️ '산책가까?' 는 반려동물 산책 메이트를 구하는 SNS형 애플리케이션입니다.
• 🐻 '산책가까?' 프로젝트를 시작하게 된 이유는, 국내 반려동물 양육 가구가 1,500만을 돌파 하였지만 지역 내 반려동물을 위한 커뮤니티의 수가 적어 커뮤니티 진입 장벽이 높은 것을 확인할 수 있었습니다. 바쁜 현대사회에서 소중한 반려동물 소울 메이트를 쉽고 편하게 찾을 수 있는 커뮤니티가 필요해 보였습니다.
• 🐶 '산책가까?' 의 주요 기능
  • 아이디 검색을 통해 다른 사용자를 검색하고 팔로우할 수 있습니다.
  • 산책 피드를 통해 반려동물의 소울 산책 메이트를 매칭할 수 있습니다.
  • Pet Story를 통해 반려동물의 일상을 공유할 수 있으며 팔로잉 사용자의 피드를 실시간으로 확인할 수 있습니다.

🐣 팀원 소개

팀원 이름은 기여순이 아닌 가나다 순으로 정렬 하였습니다.

FE. 김성훈	FE. 김희진	FE. 문민주	FE. 이세영
github: tada-js	github: heejin-k	github: mandelina	github: sweeeeetpotato

🛠️기술 및 개발 환경

사용한 기술

• React
• redux-toolkit
• redux-thunk
• react-query
• styled components
• react-hook-form
• figma

개발 환경

• 아토믹 디자인 패턴
• ESLint
• Prettier
• 브랜치 전략 : git-flow
• 이슈 관리 : github-Issues
• Coding Convention : ⚙️함께 정한 '산책가까?' 컨벤션
• Conference : 💬 함께 진행한 회의록

🐥 역할 분담

팀원 이름은 기여순이 아닌 가나다 순으로 정렬 하였습니다.

페어프로그래밍

• Input, Button 컴포넌트화
• 메인페이지 UI 구현

공통 담당

• 컴포넌트 및 페이지 UI 제작
• 깃허브 이슈 관리 및 코드리뷰

팀원 김성훈 (문서 & 계획 리더)

• 회의록 기록 및 문서 정리
• 로그인 유효성 검사(react-hook-form)
• 검색 기능 구현
• 회원 가입 비밀번호 확인 기능 추가 구현
• 프로젝트 배포(Vercel)

팀원 김희진 (디자인 & 개발 리더)

• 전체적인 프로젝트 UI 피그마 디자인
• GitHub Project 활용한 진행 상황 관리
• 회원 가입 기능 구현
• 프로필 수정 기능 구현
• My프로필,User프로필 페이지 구현 및 게시글 랜더링
• Home피드 및 SNS피드 페이지 구현 및 팔로워 게시글 랜더링
• 좋아요 / 좋아요 취소 기능 구현

팀원 문민주 (디자인 & 개발 리더)

• 전체적인 프로젝트 UI 피그마 디자인
• 로그인 기능 구현
• 댓글 기능
• 게시글 랜더링 , 수정 , 삭제 , 생성 기능
• Redux-toolkit 및 Redux-thunk 를 이용한 전역 상태 관리
• Token 관리 및 인증에 따른 페이지 라우팅
• 웹접근성 개선
• react-helmet-async를 이용한 SEO 최적화

팀원 이세영 (문서 & 계획 리더)

• 회의록 기록 및 문서 정리
• react-hook-form을 이용하여 회원가입 유효성 검사
• 팔로워 & 팔로잉 리스트 페이지 구현 및 팔로우 기능 구현
• 채팅리스트 페이지 및 채팅룸 페이지 구현
• Home 포스트 및 SNS포스트 상세페이지 구현 및 게시글 랜더링
• 댓글/게시글 신고하기 기능 구현
• react-query를 사용하여 데이터 처리

🐱 기능 구현

Splash	회원가입	로그인

홈페이지	SNS페이지	내프로필&수정

매칭 게시글 등록	SNS 게시글 등록	사용자 프로필

매칭 게시글 수정	SNS 게시글 수정	매칭 & SNS 게시글 삭제

팔로우 기능	좋아요 기능	댓글 기능

검색 기능	채팅 UI & 404	로그아웃

🦮프로젝트 실행

npm install
npm start

주요 코드

• react-helmet-async를 이용한 meta태그 title 설정

📂 폴더 구조

assets : 이미지 파일 집합
components : 재사용 가능한 컴포넌트 집합
template : 페이지를 만들 수 있도록 컴포넌트/레이아웃 주입
pages : 유저가 보는 실제 콘텐츠
style : 공통 스타일드 컴포넌트, reset.css, 프로젝트 컬러 상수화
				

                
📦Pet-Mate
├─📂public
└─📂src
    ├─📂assets
    ├─📂components
    │  ├─📂animalBox
    │  ├─📂button
    │  ├─📂comment
    │  ├─📂commentList
    │  ├─📂deleteAlert
    │  ├─📂errorMessage
    │  ├─📂followCompo
    │  ├─📂iconButton
    │  ├─📂imgUploadBox
    │  ├─📂input
    │  ├─📂navBack
    │  ├─📂post
    │  ├─📂postModal
    │  ├─📂profile
    │  ├─📂profileIcon
    │  ├─📂speechBubble
    │  ├─📂tabMenu
    │  └─📂user
    ├─📂pages
    ├─📂reducers
    ├─📂style
    │  └─📂fonts
    └─📂template
        ├─📂chat
        ├─📂follow
        ├─📂homePost
        ├─📂login
        ├─📂main
        ├─📂postDetail
        ├─📂postModify
        ├─📂profile
        ├─📂profileModify
        ├─📂profilePost
        ├─📂search
        ├─📂signUp
        ├─📂snsFeed
        ├─📂snsPost
        ├─📂snsPostModify
        └─📂walkingFeed