코딩 컨벤션

네이밍

기본적으로 모든 네이밍에는 줄임말을 사용하지 않고, 직관적으로 알아볼수 있도록 Pascal Case로 작성합니다. 그 외파일(html, css, js)는 Camel Case로 작성한다.

📁src 파일 네이밍

폴더의 이름은 모두 소문자로 작성합니다.
Component 소스파일은 Pascal Case로 작성합니다.

🎨이미지 | 아이콘 네이밍

이름_구역_상태로 작성합니다. (상태가 존재하지 않는 경우에는 생략가능)
아이콘_icon으로 작성합니다. (파일 형식은 .svg로 통일)

💾내보내기

Export default는 최하단에 작성합니다.
하나의 파일에서 하나만 내보내지는 경우에만 기본 내보내기(export default)를 사용합니다.

🐕Function

Event Handler의 이름은 handle로 시작합니다.
check 확인하고 불린값을 반환할 경우
show~ 출력할때

🥊Hook

useState Hook을 사용할 때는, set함수의 이름은 set~으로 시작합니다.
[상태, set상태] = useState(초깃값);

커밋 컨벤션

1. Commit 메시지 구조 😆

type(옵션): [#issueNumber - ]Subject  // -> 제목
body(옵션) //  -> 본문 
footer(옵션) // -> 꼬리말

• type: 어떤 의도로 커밋했는지를 type에 명시
• subject:최대 50글자가 넘지 않기. 마침표 찍지 않기. 영문으로 표기하는 경우 동사(원형)를 가장 앞에 두고 첫 글자는 대문자로 표기합니다.
• body: 긴 설명이 필요한 경우에 작성. 최대 75자를 넘기지 않기. 어떻게가 아닌 무엇을 왜 했는지를 작성.
• footer: * issue tracker ID를 명시하고 싶은 경우에 작성합니다.

2. 예시

[Modify] Header 파일 배경색 수정
배경색 #FFF에서 FFFDF9로 변경

2. Commit Type

ex)
[Modify]: 테스트 코드 수정

- 이러한 것을 변경하였습니다.
- 저러한 것을 수정하였습니다.

- #13 진행중

👩‍💻 상세 내용

• page : 상품 목록 페이지, 상품 상세 페이지
• about : 찜하기 버튼 연동

📝 Todo

• 관계 확장
• 두 페이지 찜하기 버튼 연동하기
• 찜 버튼 누르면 포켓베이스에 데이터 저장

🎸 ETC

• 기타 설명이 필요하면 적어주고 스크린샷이 필요한 경우 아래에 첨부해주세요

📷 스크린샷

👩‍💻 상세 내용

• page : 홈, 상품 목록 페이지
• about : 돋보기 아이콘 클릭 시 검색창 페이지로 이동

📝 Todo

• router 활용하기

🎸 ETC

📷 버그 이미지

🐛 버그 상황
SUIT 폰트를 적용하기로 했는데 폰트가 적용되지 않는 문제 발생.

🩺 해결 방법
tailwind.config.js에서 코드 수정

👩‍💻 상세 내용

• page : Common (모든 페이지)
• about : 페이지 하단에 공통으로 사용되는 Nav 컴포넌트 구현하기

📝 Todo

• .

🎸 ETC

📷 스크린샷

👩‍💻 상세 내용

• page : 상품 목록 페이지&상세 페이지
• about : 상세 페이지 리뷰 개수 상품 목록 페이지에서 렌더링하기

📝 Todo

• 상품 목록 페이지에서 리뷰 개수 받아오기
• 상품 목록 페이지에서 받은 리뷰 개수 productItem으로 넘겨주기

🎸 ETC

👩‍💻 상세 내용

• page : 상품 목록 페이지
• about : 포켓호스트에 저장된 상품 데이터 렌더링하기

📝 Todo

• 포켓호스트와 연결
• 상품 데이터 이미지, 이름, 가격, 댓글 수 렌더링하기

🎸 ETC

👩‍💻 상세 내용

• page : 상품 목록 페이지
• about : 상품별 카테고리 추가

📝 Todo

• 상품 카테고리 라벨 렌더링
• 해당 카테고리에선 해당 라벨 안보이게 하기

🎸 ETC

• 기타 설명이 필요하면 적어주고 스크린샷이 필요한 경우 아래에 첨부해주세요

📷 스크린샷

👩‍💻 상세 내용

• page : 내 주변 보호소 찾기 (Map.jsx)
• about : 카카오 지도 api를 활용한 접속한 지역 근처의 보호소 보기 기능 구현

📝 Todo

• 카카오 지도 api 연동
• 접속자의 현재 위치정보를 가져와 마커에 표시
• '동물보호' 키워드를 사용하여 전국의 보호소 위치를 검색 후 마커에 표시
• 보호소 위치 선택시 장소 이름 표시 토글 기능 추가
• 마커 및 장소 이름 영역 커스텀

🎸 ETC

📷 스크린샷

신동혁 : 인덱스 + 홈 화면, 푸터

김승연 : 스토어(상품목록), 헤더

이규정 : 제품 상세 페이지, 장바구니, 하단 내비게이션 바

조희정 : 봉사활동 목록 + 지도

1. 공용 아이디 생성

• 아이디 : [email protected]
• 비밀번호 : 141000141000

2. 공용 아이디로 로그인

3. 공용 대시보드 생성하기

4. 공용 아이디로 로그인해서 Admin 클릭해 포켓베이스로 들어가기

5. 포켓베이스 들어와서 같이 사용할 다른 계정 추가(공용 계정 쓰면 추가 안해도 될듯함)

• 처음에 들어오면 로그인한 공용계정 하나만 존재함

👩‍💻 상세 내용

• page : home
• about : home 페이지 마크업 구현

📝 Todo

• 누적후원금액 컴포넌트 구현
• 배너 컴포넌트 구현
  • 포켓베이스 연동
  • 베너 이미지 제작
  • 스와이퍼 기능 추가
• 후원 신청 섹션 구현
  • 메일 기능 추가
• 보호센터 소개 컴포넌트 구현
  • 포켓베이스 연동
  • 아이템 컴포넌트 구현
  • 스와이퍼 기능 추가

🎸 ETC

• 기타 설명이 필요하면 적어주고 스크린샷이 필요한 경우 아래에 첨부해주세요

📷 스크린샷

👩‍💻 상세 내용

• page : 유기동물 봉사활동 페이지
• about : ui 레이아웃 구현 작업

📝 Todo

• html 마크업
• tailwind 스타일링

🎸 ETC

📷 스크린샷

👩‍💻 상세 내용

• page : 회원가입 페이지
• about : 회원가입 페이지 생성

📝 Todo

• 회원가입 페이지 디자인
• SignUp.jsx 생성
• 회원가입 페이지 마크업
• tailwind로 스타일링

🎸 ETC

📷 스크린샷

👩‍💻 상세 내용

• page : 상품 상세 페이지
• about : 로그인한 사용자 댓글 달기 기능

📝 Todo

• 로그인 한 사용자 정보 로컬 스토리지에 담기
• 댓글 생성
• 댓글 삭제
• 댓글 수정
• 댓글 단 본인한테만 삭제, 수정 버튼 보이게 하기
• 프로필 지정 안한 사용자는 기본 프로필 보이게 하기

🎸 ETC

📷 버그 이미지

🐛 버그 상황
다른 페이지에서는 상품 렌더링이 정상적으로 되지만,
상품 목록 페이지에서 상품들을 불러오는 과정에서 무한 렌더링 발생
(포켓호스트에서 데이터를 받아오지 못함)

🩺 해결 방법

• useEffect에서 앞 부분에 위치했던 if 조건문 코드를 useEffect의 마지막 부분으로 위치 수정하였다.

👩‍💻 상세 내용

• page : 상품 목록 페이지, 상품 상세 페이지
• about : 상품 클릭 시 해당 상품의 상세 페이지로 이동되게 함

📝 Todo

• 포켓호스트 연결 및 렌더링

🎸 ETC

👩‍💻 상세 내용

• page : 유기동물 봉사활동 페이지
• about : 보호소 목록 pocketbase 데이터 랜더링 구현

📝 Todo

• pocketbase에 보호소 데이터 등록
• pocketbase 연결
• 보호소 이름, 주소, 전화번호, 사진 랜더

🎸 ETC

📷 스크린샷

👩‍💻 상세 내용

• page : 유기동물 봉사활동 (Place.jsx)
• about : 페이지 내 링크 / 전화하기 / 위치보기 등 구현

📝 Todo

• 내 주변 보호소 찾기 클릭시 Map.jsx로 이동
• 추천 보호소 영역 전화하기 클릭시 전화연결
• 추천 보호소 영역 위치보기 클릭시 모달 내부 지도 api 연동
• 보호소 목록 사이트 url 연동

🎸 ETC

📷 스크린샷

👩‍💻 상세 내용

• page : 마이 페이지
• about : ui 개선 및 추가 기능구현

📝 Todo

• ui 개선
• 좋아요 목록 상품 링크 연결
• 프로필 사진 변경 이슈 해결

🎸 ETC

📷 스크린샷

1. 프로젝트 주제

유기동물에 관심있는 사용자를 위한 서비스

• 봉사자들을 위해 가까운 유기동물 보호센터를 지도 API를 통해 찾아주는 기능
• 유기동물 후원관련 쇼핑몰 or 브랜드 추천
• 반려동물 입양 전 사전 정보 등 제공

2.프로젝트 이름 정하기

• 펫브릿지(PetBridge) - 유기동물과 사회의 다리를 이어준다.
• 함께하개 - 봉사에 초점을 맞춰서 유기동물과 함께 한다는 의미 + 개 로 끝마쳐서 직관성을 강조
• 디나드나버 - abandoned 버져리다 를 반대로 읽은 단어, “버려짐을 돌리자”
• 유토피아
• 개냥포레스트

3. 프로젝트 구상

4. 서비스 주요 기능

• 첫 페이지 : 어플 소개 인덱스 ⇒ 어플 필요성, 유기동물 경각심)
• 홈 : 봉사 활동 목록 확인, 후원 금액 확인, 후원 상품 목록 일부
• 후원 물품 스토어
  • 상품 목록 페이지(좋아요)
  • 상품 상세/구매 페이지(장바구니, 구매, 찜, 리뷰)
  • 장바구니 페이지(수량 변경, 장바구니에서 삭제, 총합계, 결제)
• 유기동물센터 찾기 지도 API

기타(추후 구현)

• 마이 페이지
• 분양 사이트 및 어플 연결
• 로그인, 회원가입
• 봉사활동 게시판

5. 피그마 시안

👩‍💻 상세 내용

• page : Common (모든 페이지)
• about : 페이지에 공통으로 사용되는 Footer 컴포넌트 구현하기

📝 Todo

• 마크업
• 스타일링

🎸 ETC

📷 스크린샷

👩‍💻 상세 내용

• page : INDEX
• about : 페이지 시작 시 어떤 사이트인지 알려주는 스와이퍼

📝 Todo

• 새로운 페이지 연결
• 마크업
• 스와이퍼

🎸 ETC

• 기타 설명이 필요하면 적어주고 스크린샷이 필요한 경우 아래에 첨부해주세요

📷 스크린샷

• CSR(Vite + React Router) vs SSR(Next.js)

  ⇒ Vite + React Router

• TypeScript vs. ECMAScript

  ⇒ ECMAScript

• CSS: Sass vs CSS vs CSS Modules vs Tailwind CSS

  ⇒ Tailwind CSS + CSS Modules

• CSS Animation Library: Gsap vs Framer Motion

  ⇒ GSAP

• 앱 상태관리: Context API vs Zustand vs Recoil vs Redux

  ⇒ Context API

• 서버 상태관리: React Query vs SWR

  ⇒ React Query

• 데이터 베이스

  ⇒ Pocketbase / Pockethost

• 배포: Github Pages vs Vercel vs Netlify

  ⇒ 추후 결정

👩‍💻 상세 내용

• page : 사이트 설명 페이지
• about :

📝 Todo

• 페이지 디자인
• 페이지 마크업
• 연결

🎸 ETC

• 기타 설명이 필요하면 적어주고 스크린샷이 필요한 경우 아래에 첨부해주세요

📷 스크린샷

👩‍💻 상세 내용

• page : 장바구니및 detail페이지 CountButton
• about : CountButton 컴포넌트

📝 Todo

• CountButton

🎸 ETC

📷 스크린샷

📷 완료 스크린샷

👩‍💻 상세 내용

• page : Common (모든 페이지)
• about : 페이지에 공통으로 사용되는 Footer 컴포넌트 구현하기

📝 Todo

• 푸터 마크업

🎸 ETC

📷 스크린샷

👩‍💻 상세 내용

• page : 상품 목록 페이지 -> 상품 상세 페이지
• about : 상품 목록 페이지에서 상품 클릭시 해당 상품 상세 페이지로 이동하기

📝 Todo

• 상품 목록 페이지, 상품 상세 페이지 연결
• 라우터 활용
• 포켓호스트 데이터 연동

🎸 ETC

👩‍💻 상세 내용

• page : Common (모든 페이지)
• about : 페이지에 공통으로 사용되는 Header 컴포넌트 구현하기

📝 Todo

• 헤더 마크업
• props를 활용해 한 컴포넌트로 여러 개의 헤더 구현하기
• tailwind 스타일링

🎸 ETC

📷 스크린샷

👩‍💻 상세 내용

• page : 로그인 페이지
• about : 로그인 페이지 상세 기능 구현

📝 Todo

• 로그인 인증 상태 추가
• 각 버튼별 Link 연결

🎸 ETC

📷 스크린샷

👩‍💻 상세 내용

• page : 로그인 페이지
• about : 카카오 인증 로그인 / 로그아웃 추가, 중복 로그인 방지 기능 구현

📝 Todo

• 로그인 상태값을 이용한 중복 로그인 방지
• 카카오 로그인 정보 pb연동
• 카카오 계정으로 로그인 / 로그아웃 구현

🎸 ETC

📷 스크린샷

테일윈드

• 글꼴, 커스텀 색상 추가
  

프리티어

• 파일명 prettier.config.js ⇒ prettier.config.cjs로 변경
  

라우터

👩‍💻 상세 내용

• page : 제품 검색 페이지
• about : 상품 목록 페이지에서 검색 버튼을 누르면 제품 검색 페이지로 이동함

📝 Todo

• 제품 검색 페이지 마크업
• 제품 검색 페이지 스타일링

🎸 ETC

👩‍💻 상세 내용

• about : 프로젝트 배포 테스트

📝 Todo

• routes.jsx
• vite.config.js
• 터미널 build
• 깃허브 페이지 설정

🎸 ETC

📷 스크린샷

👩‍💻 상세 내용

• page : 마이 페이지
• about : 로그인시 마이 페이지 접근, 프로필 수정 기능 추가

📝 Todo

• 로그인 했을시 마이 페이지 접근, 안 했을시 main으로 연결
• pb user 데이터와 연결, 프로필 수정 기능
• 로그아웃 기능
• 회원탈퇴 기능
• 좋아요한 상품 목록 연동

🎸 ETC

📷 스크린샷

스와이퍼 설치

메인 부분에 베너부분과 센터 부분을 위해 스와이퍼 설치가 필요합니다

npm i swiper

👩‍💻 상세 내용

• page : 로그인 페이지
• about : 로그인 페이지 생성

📝 Todo

• 로그인 페이지 디자인
• SignIn.jsx 생성
• 로그인 페이지 마크업
• tailwind로 스타일링

🎸 ETC

📷 스크린샷

👩‍💻 상세 내용

• page : 상품 검색 페이지
• about : 상품 검색 시 해당 단어 들어간 상품들 렌더링하기

📝 Todo

• 포켓호스트 데이터 연동
• 일부 데이터 렌더링
• 관련 상품 없을경우 이미지 띄우기

🎸 ETC

👩‍💻 상세 내용

• page : Place.jsx 에서 내 주변 보호소 찾기 클릭시 이동하는 지도 페이지
• about : 페이지 생성 및 지도 api를 호출할 레이아웃 구현

📝 Todo

• Map.jsx 파일 생성
• Place.jsx 내 주변 보호소 찾기 버튼과 연동
• 내 주변 보호소 페이지 마크업
• 스타일링 필요한 경우 지도 삽입후 추가 예정

🎸 ETC

📷 스크린샷

👩‍💻 상세 내용

• page : ProductList 페이지 (상품 목록)
• about : 상품 목록 페이지 UI 구현

📝 Todo

• 상품 목록 페이지 마크업
• 상품 목록 페이지 스타일링

🎸 ETC

📷 스크린샷

📝 위키 작성

🏷레이블 생성

✍ 이슈 템플릿 생성

👩‍💻 상세 내용

• page : 마이 페이지
• about : 로그인 했을시 접근가능한 마이페이지 추가

📝 Todo

• 마이 페이지 디자인
• MyPage.jsx 생성
• 마이 페이지 마크업
• tailwind로 스타일링

🎸 ETC

📷 스크린샷

👩‍💻 상세 내용

• page : 회원가입 페이지
• about : 회원가입 페이지 상세 기능 구현

📝 Todo

• 정규식 표현으로 회원가입 폼 유효성 검사
• fontawesome 패키지 추가하여 아이콘 표시
• pb user 데이터와 연동
• 각 버튼별 Link 연결

🎸 ETC

📷 스크린샷

👩‍💻 상세 내용

• page : 상품 목록 페이지
• about : 카테고리에서 베스트, 무료배송 등 다른 카테고리를 선택했을 때 다른 상품 렌더링 되게 하기

📝 Todo

• 상품에 무료 배송 등 속성값 추가하기
• 네비게이션 바와 상품 목록 연결하기
• 필터링 렌더링하기

🎸 ETC

👩‍💻 상세 내용

• page : 상품 검색 페이지
• about : 카테고리(문구, 가방, 파우치 등) 클릭 시 해당 제품 렌더링

📝 Todo

• 포켓호스트 연동
• 특정 상품만 렌더링

🎸 ETC

👩‍💻 상세 내용

• page : 공통 페이지
• about : 뒤로가기 아이콘 클릭 시 이전 페이지로 이동하는 기능

📝 Todo

• useNavigate 활용하기

🎸 ETC