-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- 서비스 이름 및 간단한 소개 - 팀원 - Tech Stack 및 선정 이유 - Convention (Git, Branch, Issue, PR) 를 포함한 리드미로 업데이트
- Loading branch information
Showing
1 changed file
with
179 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,185 @@ | ||
| # PNPM 사용 | ||
| # 🐱 COCOS | ||
| 반려동물 증상을 겪는 반려인들이 커뮤니티를 통해 고민을 공유하고 병원 정보를 확인할 수 있는 서비스! | ||
|
|
||
| 우린 패키지매니저로 pnpm 사용하니까 꼭 pnpm -v 확인해서 잘 설치되어 있는지 확인하고 | ||
| pnpm add, pnpm install, pnpm dev, pnpm build 와 같이 yarn 대신 pnpm 으로 사용해!! | ||
| (pnpm -v 했을 때 corepack을 설치할거냐는 질문에는 무조건 y 해야함!!) | ||
|
|
||
| <h2> 🐶 COCOS Team </h2> | ||
|
|
||
| ## svgr 사용 -> svg 파일을 컴포넌트처럼 사용하기 | ||
| <table align="center"> | ||
| <tr align="center"> | ||
| <td style="min-width: 150px;"> | ||
| <a href="https://github.com/ocahs9"> | ||
| <img src="https://github.com/user-attachments/assets/e95ea9f0-4df6-4422-a652-ef5c6f8d3c81" width="200" height="300" alt="프로필사진"> | ||
| <br /> | ||
| <b>🎧공준혁</b> | ||
| </a> | ||
| </td> | ||
| <td style="min-width: 150px;"> | ||
| <a href="https://github.com/minjeoong"> | ||
| <img src="https://github.com/user-attachments/assets/af774eda-6ea2-4abe-a34c-b27430451ffe" width="200" height="300" alt="프로필사진"> | ||
| <br /> | ||
| <b>🌸김민정</b> | ||
| </a> | ||
| </td> | ||
| <td style="min-width: 150px;"> | ||
| <a href="https://github.com/yarimu"> | ||
| <img src="https://github.com/user-attachments/assets/04394243-2a2d-4620-a555-1c08c2324d45" width="200" height="300" alt="프로필사진"> | ||
| <br /> | ||
| <b>🐶이예림</b> | ||
| </a> | ||
| </td> | ||
| <td style="min-width: 150px;"> | ||
| <a href="https://github.com/Leeyoonji23"> | ||
| <img src="https://github.com/user-attachments/assets/db34c483-c14e-4eb0-8414-a0ffe4bab520" width="200" height="300" alt="프로필사진"> | ||
| <br /> | ||
| <b>🐾이윤지</b> | ||
| </a> | ||
| </td> | ||
| </tr> | ||
| <tr align="center"> | ||
| <td> | ||
| 마이페이지 뷰 <br/> | ||
| </td> | ||
| <td> | ||
| 검색, 게시물 뷰 <br/> | ||
| </td> | ||
| <td> | ||
| 로그인, 온보딩 뷰 <br/> | ||
| </td> | ||
| <td> | ||
| 메인, 커뮤니티 뷰 <br/> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| svg 파일을 react component 처럼 사용하기 위해, .svg 파일을 public > svgs 폴더 안에 넣은 뒤, | ||
| pnpm svgr 명령어 입력해서 사용하기 ! 그러면 알아서 src > asset > svg 폴더 안에 필요한 파일들이 생성될거야! | ||
| </br> | ||
|
|
||
| <h2> 🛠 기술스택 </h2> | ||
|
|
||
| ## 전역 스타일 세팅하는 사람은 반드시 width 375px과 중앙 정렬도 신경 써서 만들어두기 ! | ||
| <div align="center"> | ||
|
|
||
| | 역할 | 종류 | 선정 이유 | ||
| | -------------------- | ------------- | ------------------- | | ||
| | Library |  | 컴포넌트 기반 개발로 유지보수성과 재사용성을 높이기 위해 선정 | ||
| | Programming Language |  | 코드 안정성과 생산성을 동시에 확보하기 위해 사용 | ||
| | Styling |  | 타입 안전성과 모듈화된 스타일링을 제공하여 유지보수성을 강화 | ||
| | Data Fetching |  | 데이터 패칭과 캐싱을 효율적으로 관리하고 간편하게 서버 상태를 동기화하기 위해 사용 | ||
| | State Management |  | 간결하고 유연한 상태 관리로 직관적인 로직 구현을 지원 | ||
| | Formatting |  | 코드 포맷팅과 린팅을 통합 관리해 일관된 코드 스타일 유지 | ||
| | Package Manager |  | 빠른 속도와 디스크 공간 절약을 제공하는 패키지 매니저로 프로젝트 효율성을 극대화 | ||
| | Version Control |   | 버전 관리를 통해 협업을 원활히 하고 코드 변경 이력을 체계적으로 관리 | ||
| | Deployment |  |쉬운 배포와 글로벌 CDN을 통해 빠르고 안정적인 사용자 경험 제공 | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| </div> | ||
|
|
||
| </br> | ||
|
|
||
| <h2> 📄 컨벤션 및 브랜치 전략 (Git, Branch) </h2> | ||
| <h3>Git Branch</h3> | ||
|
|
||
| ``` | ||
| - main (배포용) | ||
| - develop (개발용) | ||
| - feat/#issue/기능명 (작업용) | ||
| ``` | ||
|
|
||
| <h3>Commit Convention</h3> | ||
| Commit Message 👉 기능 키워드: 커밋 내용</br> | ||
|
|
||
| ``` | ||
| feat : 새로운 기능 추가 | ||
| fix : 버그 수정 | ||
| chore : 빌드 업무, 패키지 매니저, 라이브러리, dependencies 설정 | ||
| docs : 문서 수정 - ex) [README.md](http://readme.md/) | ||
| design : 사용자 UI 디자인 변경 - ex) CSS | ||
| style : 기능 수정 없는 코드 스타일 변경 | ||
| refactor : 코드 리팩터링 | ||
| test : 테스트 코드, 리펙토링 테스트 코드 추가 | ||
| ci : ci 설정 파일 수정 | ||
| perf : 성능 개선 | ||
| rename : 파일 혹은 폴더명 변경 | ||
| ``` | ||
|
|
||
| <h3>Coding Convention</h3> | ||
| <a href="https://oceanic-pixie-c2c.notion.site/16dc12bc853381f484d1cb9f192c4f4a">COCOS Web의 코딩 컨벤션</a> | ||
|
|
||
| <h3>PR & Issue Template</h3> | ||
| 이슈 및 pr 템플릿은 실제로 이슈와 PR이 올라오는 템플릿 확인! | ||
| <br/> | ||
|
|
||
| <h2>📷 구현 스크린샷</h2> | ||
| to be continue... | ||
| <br/> | ||
|
|
||
| <h2> 📁 폴더 구조 </h2> | ||
|
|
||
| ``` | ||
| 📦 public | ||
| 📦 src | ||
| ┣ 📂asset | ||
| ┃ ┣ 📂svg | ||
| ┃ ┗ 📂image | ||
| ┣ 📂api | ||
| ┃ ┣ 📂domain | ||
| ┃ ┣ 📂kakaologin | ||
| ┃ ┗ 📜index.ts | ||
| ┣ 📂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 | ||
| ┃ ┃ ┣ 📜Main.tsx | ||
| ┃ ┃ ┗ 📜Main.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 | ||
| ``` |