1. 서비스 소개
2. 프로젝트 일정
3. 팀 구성
4. 역할 분담
5. 프로젝트 목표
6. 팀 내 규칙 및 준수 사항
7. 개발 환경 및 기술 스택
8. 파일 구성
9. 결과물
10. 프로젝트 시연
11. 프로젝트 소감
12. 프로젝트 사용법
- 프로젝트 이름 : 펫:브릿지
- 유기동물에 관심있는 사용자를 위한 서비스
- PetBridge : '유기동물과 사회의 다리를 이어준다'는 의미를 가진다.
- 프로젝트 기획 및 시안
프로젝트 기간 : 2023년 9월 4일 ~ 2023년 9월 25일
- 9월 4일 ~ 9월 8일 : 프로젝트 기획
- 9월 9일 ~ 9월 20일 : 개발
- 9월 21일 ~ 9월 24일 : 리팩토링
| 김승연 | 신동혁 | 이규정 | 조희정 |
|---|---|---|---|
 |
 |
 |
 |
| 이름 | 담당 기능 |
|---|---|
| 김승연 | 상품 목록 페이지, 상품 검색 페이지, 헤더 |
| 신동혁 | 어바웃 페이지,인덱스 페이지, 메인 페이지, 푸터 |
| 이규정 | 상품 상세 페이지, 장바구니, 하단 네비 |
| 조희정 | 보호소 목록, 지도 페이지, 마이페이지, 로그인&회원가입 페이지 |
결과보단 과정!
- 완벽한 결과보단 프로젝트 진행하는 과정에서 많은 지식과 경험을 얻어가는 것에 초점을 두기
선택과 집중
- 꼭 필요한 기능들을 우선적으로 구현하고 여유가 되면 추가 기능 구현하기
깃허브 잘 활용하기
- 프로젝트 진행하면서 데일리 스크럼, 이슈, 마일스톤등을 잘 활용하기
📦src
┣ 📂api
┃ ┗ 📜pocketbase.js
┣ 📂components
┃ ┣ 📂Cart
┃ ┃ ┣ 📜CartItem.jsx
┃ ┃ ┗ 📜Modal.jsx
┃ ┣ 📂Common
┃ ┃ ┣ 📜Button.jsx
┃ ┃ ┣ 📜Input.jsx
┃ ┃ ┗ 📜Spinner.jsx
┃ ┣ 📂Footer
┃ ┃ ┗ 📜GoTopBuootn.jsx
┃ ┣ 📂Header
┃ ┃ ┗ 📜HeaderComp.jsx
┃ ┣ 📂Home
┃ ┃ ┣ 📜EmailLink.jsx
┃ ┃ ┣ 📜GoAbout.jsx
┃ ┃ ┣ 📜HomeBenner.jsx
┃ ┃ ┣ 📜HomeContact.jsx
┃ ┃ ┣ 📜HomeCumulativeAmount.jsx
┃ ┃ ┣ 📜HomeItemComp.jsx
┃ ┃ ┗ 📜HomeListComp.jsx
┃ ┣ 📂Mypage
┃ ┃ ┣ 📜DisplayModeProfile.jsx
┃ ┃ ┣ 📜EditModeProfile.jsx
┃ ┃ ┣ 📜MyPageLikedProduct.jsx
┃ ┃ ┣ 📜MyPageLikedProductsSection.jsx
┃ ┃ ┗ 📜MyPageProfileSection.jsx
┃ ┣ 📂Place
┃ ┃ ┣ 📜FindShelter.jsx
┃ ┃ ┣ 📜PlaceList.jsx
┃ ┃ ┣ 📜PlaceModal.jsx
┃ ┃ ┣ 📜RecommendShelter.jsx
┃ ┃ ┗ 📜VisitShelter.jsx
┃ ┣ 📂ProductDetail
┃ ┃ ┣ 📜Heart.jsx
┃ ┃ ┣ 📜Navigation.jsx
┃ ┃ ┣ 📜QuantitySelector.jsx
┃ ┃ ┗ 📜ReviewItem.jsx
┃ ┣ 📂ProductList
┃ ┃ ┣ 📜ProductItem.jsx
┃ ┃ ┣ 📜ProductItemImage.jsx
┃ ┃ ┣ 📜ProductItemInfo.jsx
┃ ┃ ┗ 📜ProductListNav.jsx
┃ ┣ 📂Search
┃ ┃ ┣ 📜CategoryButton.jsx
┃ ┃ ┣ 📜SearchHeaderComp.jsx
┃ ┃ ┗ 📜SearchProductList.jsx
┃ ┣ 📂SignIn
┃ ┃ ┣ 📜ButtonSection.jsx
┃ ┃ ┣ 📜InputField.jsx
┃ ┃ ┣ 📜InputSection.jsx
┃ ┃ ┣ 📜KakaoLoginSection.jsx
┃ ┃ ┗ 📜LoginForm.jsx
┃ ┗ 📂SignUp
┃ ┃ ┣ 📜InputField.jsx
┃ ┃ ┗ 📜SignUpForm.jsx
┣ 📂contexts
┃ ┗ 📜Auth.jsx
┣ 📂hooks
┃ ┗ 📜useStorage.js
┣ 📂layout
┃ ┣ 📜Footer.jsx
┃ ┣ 📜Header.jsx
┃ ┣ 📜Nav.jsx
┃ ┗ 📜RootLayOut.jsx
┣ 📂pages
┃ ┣ 📜About.jsx
┃ ┣ 📜Cart.jsx
┃ ┣ 📜Home.jsx
┃ ┣ 📜Index.jsx
┃ ┣ 📜Map.jsx
┃ ┣ 📜MyPage.jsx
┃ ┣ 📜Place.jsx
┃ ┣ 📜ProductDetail.jsx
┃ ┣ 📜ProductList.jsx
┃ ┣ 📜SearchProduct.jsx
┃ ┣ 📜SignIn.jsx
┃ ┗ 📜SignUp.jsx
┣ 📂styles
┃ ┣ 📜global.css
┃ ┗ 📜tailwind.css
┣ 📂utils
┃ ┣ 📜debounce.js
┃ ┣ 📜getPbImageUrl.js
┃ ┣ 📜kakaoLogin.js
┃ ┣ 📜useFetchData.js
┃ ┣ 📜useProductItem.js
┃ ┗ 📜useProductList.js
┣ 📜App.css
┣ 📜App.jsx
┣ 📜index.css
┣ 📜main.jsx
┗ 📜routes.jsx
- 스와이퍼 활용
- 건너뛰기 클릭 시 메인 페이지로 이동
- 로그인, 회원가입 클릭 시 각 페이지로 이동
- 로그인이 되어있을시, 로그인, 회원가입은 비활성화되고 건너뛰기 버튼만 존재
- 후원 신청 배너 : 클릭 시 메일 작성 연동
- 후원 상품 배너 : 스와이퍼 사용, 클릭 시 해당 상품 페이지로 이동
- 추천 보호소 목록 : 스와이퍼 사용, 클릭 시 해당 보호소 홈페이지로 이동
- About Us 배너 : 클릭 시 펫:브릿지 어바웃 페이지로 이동
- 반응형 구현 : 브라우저 크기 변경시 배너 이미지 가운데 정렬, 폰트 사이즈 변경, 태블릿 모드에서 로그아웃 버튼 생성, 스와이퍼 보호소 아이템 수 변경
- 상품 구매하기 : 클릭 시 상품 목록 페이지로 이동
- 직접 후원하기, 후원 신청하기, 함께 활동하기 클릭 시 메일 창 열림 (각각 다른 내용의 메일 서식)
- 후원 상품 목록 : 카테고리 클릭 시 해당 카테고리에 맞는 상품만 렌더링 됨
- 상세 페이지의 댓글 수 연동해 표시
- 상품 별 라벨 추가
- 찜 아이콘(하트) 클릭 시 포켓베이스의 사용자 데이터에 해당 상품이 저장됨
- 상품 검색 기능 : 단어 입력 시 해당 단어가 포함된 상품들을 보여줌
- 카테고리 : 카테고리 클릭 시 관련 상품들을 보여주고, 카테고리 클릭 후 검색하면 해당 카테고리에 관련된 단어가 포함된 상품들을 렌더링함
- 관련된 상품이 존재하지 않을경우 사용자에게 알려줌
- 찜 아이콘(하트) 클릭 시 포켓베이스의 사용자 데이터에 해당 상품이 저장됨
- 장바구니 추가 : 수량 선택 후 장바구니 추가 버튼 클릭 시 사용자의 데이터에 추가한 상품이 담기게 됨
- 찜 아이콘(하트) 클릭 시 포켓베이스의 사용자 데이터에 해당 상품이 저장됨
- 댓글 작성, 수정, 삭제 : 댓글을 작성할 수 있고, 자신이 작성한 댓글을 수정/삭제할 수 있음
- 장바구니 상품 추가 : 상세 페이지에서 사용자가 담은 상품이 선택한 수량과 함께 렌더링 됨
- 장바구니 상품 수량조절 : 상품 수량 조절 기능 및 금액에 따른 변화
- 주변 보호소 찾기 : 지도 API를 사용해 사용자의 위치를 바탕으로 주변에 위치하는 보호소를 알려줌
- 보호소 사이트 연결 : 보호소들의 정보를 알려주고 클릭시 해당 보호소의 홈페이지로 이동
- 추천 보호소와 연결 : 추천 보호소로 바로 전화 연결이 가능하고, 해당 보호소의 위치를 볼 수 있음
- 로그인 : 사용자의 데이터가 존재하는지 확인하고, 로그인 성공시 마이페이지로 이동
- 카카오 계정 로그인 가능
- 회원가입 : 정규표현식을 활용해 유효성 검사를 거치고, 데이터가 등록된다.
-
찜한 상품 목록 : 상품 목록 페이지와 상세 페이지에서 찜한 상품들을 보여줌
-
사용자 정보 제공, 변경 가능 : 사용자의 닉네임과 아이디, 프로필 사진 수정 가능
-
로그아웃, 회원 탈퇴기능
자세한 영상을 보고싶으시다면 YouTube을 클릭해주세요
YouTube 로 이동됩니다.
| 김승연 | 리액트 수업을 처음 접했을 때 너무 어려워서 프로젝트를 잘 진행할 수 있을까 하는 걱정이 엄청 많았는데 팀원분들이 잘 이끌어주시고 서로 모르는 것을 공유하고 함께 고민하면서 리액트와 더 친해질 수 있는 좋은 시간이었던 것 같습니다! 약 3주정도 되는 긴 시간 동안 서로 응원해주고 으쌰으쌰하면서 진행한 덕분에 화목한 분위기 속에서 기분 좋게 프로젝트에 임할 수 있었던 것 같습니다. 그동안 모두 수고 많으셨고 감사했습니다! |
|---|---|
| 신동혁 | 다른 동기들과 마찬가지로 리액트 수업을 많이 놓쳤습니다. 그래서인지 프로젝트를 시작하기 전에 다른 조원들에게 피해가 가지는 않을까 많은 걱정을 했습니다. 따로 공부를 해볼 여유 없이 프로젝트를 시작하는 바람에 ‘일단 부딪혀 보자.’라는 마인드로 하나하나 헤쳐 나가기 시작했습니다. 어려운 것은 팀원들에게 물어보며 풀어보니 생각 만큼 어렵고 힘들지는 않았습니다. 중간에 여유가 생겨 조금 더 크게 기획했더라면 어땠을지 라는 아쉬움도 생겼습니다.. ‘걱정거리의 90%는 일어나지 않는다‘ 라는 말이 있습니다. 걱정 때문에 일을 시작하지 못하고 머뭇거리는 사람이 있다면 일단 부딪혀 보라고 말을 전해주고 싶습니다. |
| 이규정 | 처음 리액트 수업을 시작하고 수업을 제대로 이해못하면서 내가 이 프로젝트를 해낼수있을까? 이로인해 팀원들에게 큰 민폐를 주는것 아닌가라는 생각으로 프로젝트를 임하게되었습니다. 하지만, 점차 시간이 지나며 리액트를 직접 사용하는것으로 경험해보고 좋은 팀원들덕분에 많은 응원과 도움을 받으며 리액트와 조금씩 친해지는 제모습을 보며 많은 뿌듯함을 느꼈습니다.아직 리액트를 완벽히 이해한것은 아니지만 조금씩 조금씩 앞으로 나아가는 모습이 보이는것만으로도 많은 성장을했다고 느끼게되었습니다. 팀원분들 그리고 팀원이 아님에도 도움을 주신분들 정말 감사드리고 1달이라는 짧으면 짧고 길면 긴 기간 정말 고생하셨습니다!! |
| 조희정 | 3주간의 프로젝트 기간은 멋쟁이 사자처럼 프론트엔드 스쿨에서 학습했던 여러 기술을 사용해 기획부터 프로젝트 완성과 배포까지 경험해 볼 수 있어 가치 있는 시간이었습니다. 팀원들과 함께 소통하며 일정과 의견을 조율하는 과정에서도 각자의 역할에서 최선을 다했던 팀원들 덕분에 성공적으로 프로젝트를 마무리할 수 있었습니다. 직접 프로젝트를 개발하며 다양한 기술 스택과 도구를 활용해 봄으로써 진정한 "학습"의 기회가 된 것 같아 뿌듯한 마음이 듭니다. 배포 이후에도 앞으로 지속적으로 코드를 리팩토링하여 유지 보수 용이성을 높이고 미처 적용하지 못했던 기능이나 도구를 추가해 보고 싶다는 기대감이 듭니다. |
- 패키지 설치
pnpm i 또는 pnpm install
- 클라이언트 실행
pnpm dev