📍 배포 URL : https://ppoppimarket.web.app
🐤 '뽀삐뽀삐'란 저희 팀이름인 '4P(뽀피)'와 사람들이 흔히 이름짓는 강아지 이름인 '뽀삐'의 의미를 가지고 있습니다.
🐡 뽀삐뽀삐는 반려동물을 키우는 반려인들의 고민과 공감, 꿀팁을 나눌 수 있는 SNS와 마켓 서비스를 제공합니다.
🐶 서비스 사용자들은 포스팅 기능을 통해 사진과 글을 기록하며 반려동물의 귀엽고 깜찍한 일상을 공유할 수 있습니다.
🐷 다른 사용자를 팔로우하면 피드에서 서로의 게시물을 볼 수 있고 좋아요와 댓글을 통해 소통할 수 있습니다.
🐱 나눔하고 싶거나 판매하고 싶은 물건이 있다면 상품 판매를 등록하고 본인의 SNS에 바로 홍보할 수 있습니다.
🐹 다른 사용자들과 채팅을 통해 대화를 할 수 있습니다. 또한 채팅으로 이미지를 주고 받을 수 있습니다.
🐰 반려동물을 키우는 반려인이 아니더라도 플랫폼의 모든 기능을 사용 하고 해당 플랫폼을 즐길 수 있습니다.
| FE 김세훈 | FE 박소현 | FE 이수빈 | FE 임현지 |
|---|---|---|---|
 |
 |
 |
 |
| blog: for-it-study github: Hun-Se |
blog: doridori-samsam github: Sohyun Park |
blog: waterbin.log github: Subin Lee |
blog: usablepaper.log github: Hyeonji Lim |
  |
 |
 |
|
📌 FrontEnd: React, SASS
📌 BackEnd: 제공된 API 사용
📌 Version:
react: `18.2.0`
react-router-dom: `6.3.0`
node-sass: `7.0.1`
scss-reset: `1.2.2`
axios: `0.27.2`
📍 GitHub : 뽀삐뽀삐 GitHub | 뽀삐뽀삐 Project Log | GitHub 전략
📍 WorkPlace: 뽀삐뽀삐 Notion
📍 Design : 뽀삐뽀삐 Figma
📍 Conference: GatherTown | Discord | 회의록
- Coding Convention: 코딩 컨벤션
-
🔐 계정
- 로그인 / 로그아웃
- 회원가입
- 회원 정보 수정
- 유효성 검증
- 토큰 검증
-
🔍 피드
- 유저 검색
- 포스트 목록
- 무한 스크롤 / 화면 최상단 이동
-
👥 프로필
- 팔로우 / 언팔로우
- 포스트 등록 / 수정 / 삭제 / 신고
-
🏞 포스트
- 다중 이미지 파일 업로드 / 수정 / 미리보기
- 포스트 앨범뷰 / 리스트뷰
- 이미지 슬라이드
- 좋아요
-
💬 댓글
- 댓글 작성 / 삭제 / 신고
- 댓글 시간 보기
-
🎁 상품
- 상품 목록 / 등록 / 수정 / 삭제 / 신고
- 이미지 파일 업로드 / 수정 / 미리보기
- 유효성 평가
- 작업현황관리 리더
- 메인보드 관리
- Splash 페이지, 로그인페이지 , 프로필 수정 페이지, 상품등록 페이지, 게시물등록 페이지
- Splash 페이지
- 비동기 처리 방식을 사용하여 Splash 화면 구현
- sessionstorage 사용하여 상태관리
- 원하는 곳에 사용 할 수 있도록 컴포넌트화
- 내 프로필 수정 페이지
- 기존 프롵필 데이터 유지 기능 구현
- 유효성 검사 및 저장 버튼 활성화 기능
- FormDate 객체를 사용하여 이미지 업로드 및 프리뷰 기능 구현
- 하단 탭 메뉴
- 홈피드 페이지 경로에 해당하는 하단탭 활성화 기능
- 상품등록 페이지
- 가격 입력 시 천 단위로 ,(콤마) 자동 입력 및 삭제 기능
- FormDate와 FileReader 객체를 사용하여 이미지 업로드 및 프리뷰 기능 구현
- 유효성 검사 통과시 저장 버튼 활성화
- UserContext, Provider 코드 리펙토링
- 리드미 작성
- 이미지 슬라이드 적용
- 코드 리더
- 팀원들의 코드를 리뷰하고 더 좋은 결과를 위한 피드백 교환.
- 재사용성 높은 유저 프로필 정보 컴포넌트화
- 이메일 회원가입, 프로필 설정, 이니셜 피드, 유저 검색 페이지 및 검색결과, 포스트 상세보기 댓글 페이지
- 유저 프로필,닉네임,계정이름 컴포넌트, 페이지 헤더 컴포넌트, 뒤로가기/검색/좋아요/저장/더 보기/로그인 버튼 컴포넌트
- 페이지 헤더
- 헤더 버튼을 통한 페이지 뒤로가기 기능 구현
- 헤더의 검색 버튼을 통한 유저 검색 페이지 이동
- 유저 검색 페이지
- 사용자 입력값이 바뀔 때 마다 입력값과 일치하는 유저 검색 결과 구현
- 등록된 사용자 프로필 이미지 렌더링 오류 예외처리
- 검색된 사용자 클릭 시 해당 사용자의 프로필로 이동하는 링크 구현
- 게시물 업로드 페이지
- 사용자 입력 텍스트와 이미지 파일 포스트 기능 구현
- 텍스트 입력값과 업로드 할 이미지 파일 데이터가 없을 시 포스트 기능 비활성화 구현
- 이미지 파일 3개 초과 시 사용자에게 보여지는 alert 구현
- 포스트 할 이미지 미리보기 및 미리보기에서 삭제 기능 구현
- 사용자 프로필 페이지
- 사용자의 현재 판매중인 상품 목록 구현
- 정규표현식을 사용하여 상품 가격 표시
- 좋아요 기능
- 사용자의 게시글에 하트 버튼 클릭을 통한 좋아요 및 좋아요 취소 기능 구현
- 프로젝트 작업 매니징을 위한 공유 노션 페이지 작성 및 가이드 라인 제공
- 폴더트리 및 기본 파일 구성을 포함한 프로젝트 기초 작업
- IR 기법을 포함한 전역에 사용되는 스타일 변수와 reset 스타일을 위한 Sass(SCSS) 세팅
- 컨벤션 및 Git 커밋 메세지 컨벤션 설정
- 프로젝트 기능 파트 별 Branch명 설정
- 커뮤니케이션 리더
- 깃헙 Project Board 관리
- 작업에 대한 진척도를 가시적으로 표시하며 협업 능력 상승
- 회의록 작성 및 팀 노션 정리
- 팀원들 간의 원활한 소통 환경 제공
- 게더타운 활용하여 팀원들간 유대감 형성
- 디스코드 '오늘 할 일' 게시판 운영(서로의 진행 상황, 해야할 일 공유, 응원 한마디)
- 모달창, 팝업창, 팔로잉, 팔로워 목록, 채팅목록, 채팅룸, 에러페이지 UI 구현
- 팀 로고 이미지와 컬러 적용하여 피그마 수정
-
로그인 페이지 (API 명세에 따름)
- 로그인 유효성 검사
- 정규표현식으로 이메일 형태 및 비밀번호 유효성 검증
- 서버 데이터를 받아 회원가입 된 정보인지 확인
- 회원 정보 데이터 존재 시 로그인 되게끔 구현
-
상품등록 페이지 (API 명세에 따름)
- 상품 등록 포스트 업로드 구현
- 유저가 등록한 웹사이트로 이동되도록 구현
- 정규표현식으로 웹사이트 주소 유효성 검증
- 천만 단위 이상의 가격을 입력 시 경고 표시
- 이미지를 포함한 모든 인풋 창 입력 시 업로드 버튼 활성화
-
에러 페이지
- 잘못된 주소 입력 시 에러페이지를 띄우도록 구현
- 페이지에 두 가지 버튼(이전 페이지로 이동, 홈으로 이동)을 만들어 사용자의 페이지 이동 편의성 고려
-
모달/알림창
- React portal 로 모달창 구현
- 버튼을 클릭하면 화면 하단에 모달창이 나타나고, 버튼을 클릭했을 때 알림창이 뜨도록 구현
- Account 에 따라 페이지 별로 다른 모달창 화면 구현
- 모달창, 팝업창 내 모든 기능 구현 ( 로그아웃, 삭제, 신고, 수정, 페이지 이동 - API 명세에 따름 )
- 로그아웃 기능
- localStorage 내 저장된 유저 token clear
- 삭제 기능
- 작성한 게시글, 상품, 댓글 삭제 기능 구현
- 삭제 후 페이지가 실시간 업데이트 되게끔 구현
- 신고 기능
- 다른 유저의 게시글, 상품, 댓글 신고 기능 구현
- 신고가 완료되면 가시적으로 확인할 수 있게끔 alert 창을 띄우도록 구현
- 수정 기능
- 게시글, 상품 수정 기능 구현
- 서버에 저장되어 있는, 기존에 작성된 데이터를 그대로 불러와 수정할 수 있도록 구현
-
Custom Hook
- 여러 페이지에서 사용되는 코드(삭제, 신고)는 custom hook을 만들어 사용
- 컴포넌트 로직을 재사용하여 반복적이고 불필요한 코드를 줄임
- 더 빠른 성능에 도움
-
페이지 진입 시 인풋창 포커스 기능 구현
- 클릭하지 않아도 input 창이 활성화되게끔 UX 측면 고려하여 구현
- 코드 리더
- 지속 가능한 통일된 웹사이트를 위한 설계 및 가이드라인 제공
- 컨벤션, 폴더트리, 컴포넌트 설계
- 서비스 전체 라우팅 설계 / 구축 및 예외 처리
- git branch 사용 가이드 라인 제공
- 전반적인 웹사이트 개발 관리
- 주기적인 코드 리뷰 / 개선안 제안
- 기능 구현 역할 배분 및 일정 조율
- 홈 피드 페이지, 프로필 페이지, 포스트 컴포넌트 UI 구현
- 웹사이트 로고 디자인, 페이지 내 기본 이미지 제작
- CSS keyframes 를 활용한 스플래시 애니메이션 구현
- 회원가입페이지
- 사용자가 입력한 input 데이터를 state로 관리하여 API 명세에 맞게 한번에 전달하는 기능 구현
- 회원가입 정보 유효성 검증
- 계정 / 이메일 중복 검증 기능 (API 명세에 따름)
- 정규표현식으로 형태 및 유효성 검증
- 유효성 검증에 통과하지 못 할 경우 버튼 비활성화 및 경고 메세지 로드
- 프로필 사진 첨부 및 미리보기 기능 구현
- 회원가입 시 로그인 상태 전환 기능 구현하여 사용성 개선
- 홈 피드 페이지
- 피드 데이터를 받아 화면에 그려주는 기능 구현 (API 명세에 따름)
- 로그인 여부에 따른 페이지 로드 기능 구현
- 로그아웃 상태일 때 로그인 페이지가 보이도록 / 로그인 상태일 때 피드 데이터를 요청하도록 구현
- 시간 계산 로직을 사용하여 게시물 및 댓글 업로드 시간 UI 개선
- 프로필 페이지
- 유저 정보 및 포스트 목록 데이터를 받아 화면에 그려주는 기능 구현 (API 명세에 따름)
- 포스트 목록의 레이아웃을 리스트 형식 / 앨범 형식으로 선택해 볼 수 있는 기능 구현
- 링크 직접 공유와 같은 상황에서도 모든 유저의 프로필 페이지에 정상적으로 url로 접근 가능하도록 useParams의 객체를 사용하여 데이터 요청 기능 구현 및 사용성 개선
- 팔로우 / 팔로잉 페이지
- 팔로우 / 팔로잉 목록 데이터를 받아 화면에 그려주는 기능 구현 (API 명세에 따름)
- 팔로우 / 언팔로우 기능 구현 (API 명세에 따름)
- 포스트 상세페이지
- 포스트 데이터를 받아 화면에 그려주는 기능 구현 (API 명세에 따름)
- 댓글 목록 데이터를 받아 화면에 그려주는 기능 구현 (API 명세에 따름)
- 댓글 작성 기능 및 실시간 업데이트 기능 구현
- 무한스크롤 기능 구현하여 웹 최적화 및 사용성 개선(피드, 댓글, 팔로우 페이지)
- 스크롤이 완성되면, 그 다음 데이터를 요청하도록 구현
- 추가 요청한 데이터를 다시 컨테이너에 리스트업 되도록 스프레드 문법 사용하여 구현
- 반복적으로 사용되는 이미지 예외처리 로직을 custom hook을 만들어 불필요한 중복 코드 제거
- 전역에서 필요한 데이터를 useContext 객체로 관리하여 페이지 이동 시에도 서버에 불필요한 데이터 요청하지 않도록 구현
- API 통신 중 pending status를 감지하여 로딩중 상태임을 표시하는 기능 추가 및 사용성 개선
- token 검증 기능 구현(API 명세에 따름)
- token이 유효하지 않거나 없는 경우 접근 차단 기능 구현
- firebase 사용하여 프로젝트 배포
| 0. Splash | 1. 회원가입, 프로필 설정 |
|---|---|
 |
 |
| 2. 로그인 | 3. 로그아웃 |
|---|---|
 |
 |
| 4. 홈 피드 | 5. 계정 검색 |
|---|---|
 |
 |
| 6. 마이 프로필 | 6-1. 마이 프로필 수정 |
|---|---|
 |
 |
| 7. 유저 프로필 | 7-1. 댓글 등록 / 삭제 / 좋아요 |
|---|---|
 |
 |
| 9. 게시물 등록 | 9-1. 게시글 수정 | 9-2. 게시글 삭제 |
|---|---|---|
 |
 |
 |
| 10. 상품 등록 | 10-1. 상품 등록 수정 | 10-2. 상품 삭제 |
|---|---|---|
 |
 |
 |
| 11. 팔로잉 / 팔로우 | 12. 채팅 | 13. 신고 |
|---|---|---|
 |
 |
 |
- 전역에서 필요한 데이터를 useContext 객체로 관리
- 페이지 이동 시 서버에 불필요한 데이터 요청하지 않도록 구현
- 삭제, 신고, 이미지 예외처리 로직 custom hook 생성
- 반복되는 로직을 합쳐줌으로써 불필요한 코드를 제거하고 재사용성 높임
- 변수 선언으로 유지보수 편의성 향상
- 선택자 중첩 기능으로 코드의 가독성 및 유지보수 편의성 향상
- className
- 변수명, 함수명
- Import 순서
- 파일명, 폴더트리
- 이미지 슬라이드
- 무한 스크롤, 스크롤 top 버튼
- 뒤로가기로 유저검색페이지 이동 시 검색한 데이터 유지 기능
- 로딩이미지
- 악성 사용자 예외처리: 형식에 맞지 않는 데이터로 페이지에 오류를 일으키거나 UI를 해치는 사용자 예외처리
- 라우터 예외처리: 잘못된 라우터 및 형식에 맞지 않는 url 예외 처리
- 에러이미지 예외처리: 이미지 형식에 맞지 않거나 오류가 있는 이미지는 대체 이미지 출력
- 프로젝트 초기 폴더트리 구조 확립
- 자세한 컨벤션 규칙으로 일관성 있는 작업
- 빠르고 적극적인 피드백과 요구사항 요청
📦 src
┣📂 assets
┣📂 components
┃ ┣📂 button
┃ ┣📂 footer
┃ ┣📂 header
┃ ┣📂 modal
┃ ┃ ┣📂 alert
┃ ┃ ┃ ┣📂 alertBase
┃ ┃ ┃ ┗📂 alerts
┃ ┃ ┣📂 modalBase
┃ ┃ ┗📂 modals
┃ ┣📂 notFound
┃ ┣📂 post
┃ ┣📂 splash
┃ ┃ ┗📂 logo
┃ ┣📂 style
┃ ┗📂 user
┣📂 context
┣📂 hooks
┣📂 pages
┃ ┣📂 chatPage
┃ ┃ ┗📂 chatPageItem
┃ ┣📂 chatRoomPage
┃ ┃ ┗📂 chatRoomInput
┃ ┣📂 emailLoginPage
┃ ┣📂 followPage
┃ ┃ ┗📂 followList
┃ ┣📂 homePage
┃ ┃ ┗📂 initialFeed
┃ ┣📂 logInPage
┃ ┃ ┣📂 loginSection
┃ ┃ ┗📂 userAccount
┃ ┣📂 postDetailPage
┃ ┃ ┗📂 comment
┃ ┣📂 profileEditPage
┃ ┃ ┣📂 profileEditImg
┃ ┃ ┗📂 profileEditInfo
┃ ┣📂 profilePage
┃ ┃ ┣📂 userHeader
┃ ┃ ┣📂 userPost
┃ ┃ ┗📂 userProduct
┃ ┣📂 searchUserPage
┃ ┃ ┗📂 searchResult
┃ ┣📂 signUpPage
┃ ┃ ┣📂 emailSignUp
┃ ┃ ┗ 📂 profileSet
┃ ┣📂 updatePostPage
┃ ┣📂 updateProductPage
┃ ┣📂 uploadPostPage
┃ ┗📂 uploadProductPage
┃ ┣📂 uploadProductImg
┃ ┗📂 uploadProductInput
┣📜 App.jsx
┣📜 App.scss
┗📜 index.js