코코스

반려동물 증상 고민을 나누고, 동물병원 정보와 리뷰를 확인할 수 있는 반려동물 커뮤니티 서비스!

🐶 COCOS Team

🎧공준혁	🌸김민정	🐶이예림	🐾이윤지
Lead, 마이페이지 뷰	검색, 게시물 뷰	로그인, 온보딩 뷰	메인, 커뮤니티 뷰

🛠 기술스택

역할	종류	선정 이유
Library		컴포넌트 기반 개발로 유지보수성과 재사용성을 높이기 위해 선정
Programming Language		코드 안정성과 생산성을 동시에 확보하기 위해 사용
Styling		타입 안전성과 모듈화된 스타일링을 제공하여 유지보수성을 강화
Data Fetching		데이터 패칭과 캐싱을 효율적으로 관리하고 간편하게 서버 상태를 동기화하기 위해 사용
State Management		간결하고 유연한 상태 관리로 직관적인 로직 구현을 지원
Formatting		코드 포맷팅과 린팅을 통합 관리해 일관된 코드 스타일 유지
Package Manager		빠른 속도와 디스크 공간 절약을 제공하는 패키지 매니저로 프로젝트 효율성을 극대화
Version Control		버전 관리를 통해 협업을 원활히 하고 코드 변경 이력을 체계적으로 관리
Deployment		쉬운 배포와 글로벌 CDN을 통해 빠르고 안정적인 사용자 경험 제공

📄 컨벤션 및 브랜치 전략 (Git, Branch)

Git Branch

- main (배포용)
- develop (개발용)
- feat/#issue/기능명 (작업용)

Commit Convention

Commit Message 👉 기능 키워드: 커밋 내용

Commit Type	Description
✨ feat	새로운 기능 추가
🚀 api	api 연동
🐞 fix	버그 수정
📦 chore	빌드 업무, 패키지 매니저, 라이브러리, dependencies 설정
📝 docs	문서 수정 - ex) README.md
🎨 design	사용자 UI 디자인 변경 - ex) CSS
💄 style	기능 수정 없는 코드 스타일 변경
♻️ refactor	코드 리팩토링
📝 test	테스트 코드, 리팩토링 테스트 코드 추가
🌐 ci	ci 설정 파일 수정
🪄 perf	성능 개선
🛠️ rename	파일 혹은 폴더명 변경
⚙️ init	초기 세팅

Coding Convention

COCOS Web의 코딩 컨벤션

PR & Issue Template

이슈 및 pr 템플릿은 실제로 이슈와 PR이 올라오는 템플릿 확인!

📷 구현 뷰

📁 폴더 구조

📦 public
📦 src
 ┣ 📂asset
 ┃ ┣ 📂svg
 ┃ ┗ 📂image
 ┣ 📂api
 ┃ ┣ 📂domain
 ┃ ┣ 📂kakaologin
 ┃ ┗ 📜index.tsx
 ┣ 📂common
 ┃ ┣ 📂component
 ┃ ┣ 📂util
 ┃ ┣ 📂hook
 ┃ ┗ 📂service
 ┣ 📂shared
 ┃ ┣ 📂component
 ┃ ┣ 📂util
 ┃ ┣ 📂hook
 ┃ ┣ 📂storage
 ┃ ┣ 📂store
 ┃ ┣ 📂constant
 ┃ ┗ 📂style
 ┣ 📂page
 ┃ ┣ 📂main
 ┃ ┃ ┣ 📂user
 ┃ ┃ ┃ ┣ 📂component
 ┃ ┃ ┃ ┣ 📂constant
 ┃ ┃ ┃ ┣ 📂type
 ┃ ┃ ┃ ┣ 📂hook
 ┃ ┃ ┃ ┗ 📂util
 ┃ ┃ ┣ 📂shared
 ┃ ┃ ┃ ┣ 📂component
 ┃ ┃ ┃ ┣ 📂constant
 ┃ ┃ ┃ ┣ 📂hook
 ┃ ┃ ┃ ┗ 📂util
 ┃ ┃ ┣ 📂index
 ┃ ┃ ┃ ┣ 📂component
 ┃ ┃ ┃ ┣ 📂constant
 ┃ ┃ ┃ ┣ 📂type
 ┃ ┃ ┃ ┣ 📂hook
 ┃ ┃ ┃ ┗ 📂util
 ┃ ┃ ┣ 📜page.tsx
 ┃ ┃ ┗ 📜Page.styled.ts
 ┃ ┣ 📂admin
 ┃ ┗ 📂mypage
 ┣ 📂style
 ┃ ┣ 📜GlobalStyles.ts
 ┃ ┗ 📜theme.ts
 ┣ 📂type
 ┃ ┗ 📜global.d.ts
 ┣ 📂route
 ┃ ┗ 📜Router.tsx
 ┣ 📜App.tsx
 ┣ 📜main.tsx
 ┣ 📜eslint.config.js
 ┣ 📜.gitignore
 ┣ 📜.prettierrc.json
 ┣ 📜.stylelintrc.json
 ┣ 📜README.md
 ┣ 📜package.json
 ┣ 📜tsconfig.json
 ┗ 📜yarn.lock