Update README.md

SOPT-all · Nov 29, 2024 · 5d7b317 · 5d7b317
1 parent 3f25db3
commit 5d7b317
Showing 1 changed file with 180 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -2,10 +2,11 @@
 
 # 🧞 알리 익스프레스 🧞
 
+### 링크: (https://35-collaboration-web-aliexpress.vercel.app/)
 
 <br />
 
-![표지](https://github.com/user-attachments/assets/cd9ddfad-d39c-402d-8d87-b29764bede56)
+![표지](https://github.com/user-attachments/assets/7f9546e9-35b4-45ff-a7cb-b5eeec8c2bf6)
 
 </div>
 
@@ -27,20 +28,196 @@
 </div>
 <br />
 
+## 👥 역할 분담
+
+### `👩🏻‍💻 성희`
+
+|    종류    | 목록                                                                                            |
+| :--------: | ----------------------------------------------------------------------------------------------- |
+| setting ⚙️ | `리액트 초기 설정`  `절대경로`  `vercel 배포`     |
+|  view 📱   | `상품 구매 페이지`                                                                                   |
+|   api 📡   | `상품 정보 조회(GET)` `주문 완료(POST)` |
+
+### `👨🏻‍💻 태욱`
+
+|    종류    | 목록                 |
+| :--------: | -------------------- |
+| setting ⚙️ | `Github template` `eslint` `icon svgr`  |
+|  view 📱   | `주문상세 페이지`        |
+|   api 📡   | `주문내역 조회(GET)` |
+
+### `👩🏻‍💻 영경`
+
+|    종류    | 목록                                                                                                                                                              |
+| :--------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| setting ⚙️ |  `stylelint` `theme`                                                                                                                                     |
+|  view 📱   | `상품 컴포넌트, 상품 구매 페이지`                                                                                                                |
+|   api 📡   | `연관 상품 조회(GET)` |
+
+### `👩🏻‍💻 예림`
+
+|    종류    | 목록                                                                                                                                                              |
+| :--------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| setting ⚙️ |  `절대경로` `prettier`                                                                                                                                           |
+|  view 📱   | `공통 컴포넌트(상단 Header 2종류, Footer)` `상품 구매 페이지`                                                                                                                |
+|   api 📡   | `리뷰 조회(GET)` |
+
+<br />
+
 <h2> 🛠 기술스택 </h2>
 
-   <div align="center">
+   <div>
 
 | 역할                 | 종류                                                                                                                                                                                                                                                                                                                            |
 | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Library              | ![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=black)                                                                                                                                                                                                                              |
 | Programming Language | ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=TypeScript&logoColor=white)                                                                                                                                                                                                               |
 | Styling              | ![Emotion](https://img.shields.io/badge/Emotion-DB7093?style=for-the-badge&logo=emotion&logoColor=white)                                                                                                                                                                                      |
 | Data Fetching        | ![Axios](https://img.shields.io/badge/Axios-5A29E4?style=for-the-badge&logo=Axios&logoColor=white)  ![TanStack Query](https://img.shields.io/badge/TanStack%20Query-FF4154?style=for-the-badge&logo=React%20Query&logoColor=white) |                                                                                                                                                                                                           |
-| Formatting           | ![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white) ![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E) |
+| Formatting           | ![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white) ![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E)  ![Stylelint](https://img.shields.io/badge/stylelint-000?style=for-the-badge&logo=stylelint&logoColor=white)  |
 | Package Manager      | ![Yarn](https://img.shields.io/badge/Yarn-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white)   |
 | Version Control      | ![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white) ![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)                                                                                                                |
 | Deployment           | ![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white)                                                                                                                                                                                                                           |
 
 </div>
+
+<br />
+
+## 🌳 구현 View
+### 🌿 상품구매 View
+<img width="1512" alt="KakaoTalk_20241130_004952323" src="https://github.com/user-attachments/assets/87c07b64-eecc-4884-81ba-483db513435c">
+
+### 🌿 주문상세 View
+![FireShot Capture 002 - AliExpress Korea - AND SOPT 35 - localhost](https://github.com/user-attachments/assets/fd11e1e0-f4f9-43ba-b050-e31964d88058)
+
+<br />
+
+## [📚 컨벤션](https://unnamedwritings.notion.site/4428b3ba2d4b48f4b5e9e0c1eac53535?pvs=4)
+
+<details>
+<summary>  1️⃣ Commit 컨벤션  </summary>
+
+### commit 규칙
+
+**키워드: 내용**
+
+- **예시:**
+  - `init: 초기 세팅`
+  - `feat: 기능 개발`
+
+<br/>
+
+**Commit 메시지 종류 설명**
+
+
+| 제목         | 내용                                                                 |
+| ------------ | -------------------------------------------------------------------- |
+| feat         | 새로운 기능을 추가할 경우                                            |
+| style        | 코드 formatting, 세미콜론 누락, 코드 자체의 변경이 없는 경우  |
+| fix          | 버그를 고친 경우                                                    |
+| refactor     | 코드 리팩토링                                              |
+| docs         | 문서를 수정한 경우         |
+| chore        | 패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore |
+| design       | CSS 등 사용자 UI 디자인 변경                                                  |
+| comment      | 필요한 주석 추가 및 변경                                                     |
+| rename       | 파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우                                                   |
+| remove       | 파일을 삭제하는 작업만 수행한 경우                                                      |
+| !BREAKING CHANGE  | 커다란 API 변경의 경우                                                     |
+| !HOTFIX  | 급하게 치명적인 버그를 고쳐야 하는 경우                                                      |
+
+</details>
+
+
+<details>
+<summary> 2️⃣ Branch 전략 </summary>
+
+### 브랜치 전략
+
+`feat/#이슈번호/이슈이름`
+
+### Git Branch
+
+- **GitHub-Flow** 전략 + **develop**
+- 브랜치 운영
+  - `feat/#이슈번호/이슈이름` (케밥 케이스): 기능을 개발하면서 각자가 사용한 브랜치
+    - `main`: 완전히 안전하다고 판단되었을 때, 즉 배포가 가능한 최종 merge하는 브랜치
+    - `develop`: 배포하기 전 개발 중일 때 각자의 브랜치에서 merge하는 브랜치 (default 브랜치)
+      - `feat/#이슈번호/기능명`: feature 브랜치. 새로운 기능 개발. 개발이 완료되면 develop 브랜치로 병합
+      - `fix/#이슈번호/기능명`: feature 브랜치 생성 후 버그가 생겼을 때 수정하는 브랜치
+      - PR 머지 후 톡방 메세지 보내기
+      - approve 2명 이상 받아야 머지 가
+
+</details>
+
+<details>
+<summary> 3️⃣ 코딩 컨벤션 </summary>
+<br/>
+
+1. **rafce 화살표 함수로 컴포넌트, 함수 다 쓰기**
+2. **네이밍 컨벤션**
+   - 변수 함수는 소문자 카멜 케이스로 선언
+    - 배열은 복수형으로 선언
+    - 상수는 스네이크 케이스를 활용해 대문자와 _ 를 사용해 선언합니다.
+3. **React & TypeScript**
+   - 컴포넌트는 항상 파스칼 케이스로 선언합니다. (예: SmallBanner)
+   - Inline Style 을 하지 않습니다.
+   - 스타일 변수는 기본적으로 하단에 작성
+   - any 사용금지
+4. **Styling**
+   - Emotion 의 css 를 선언 시 식별자 명은 변수의 카멜 케이스로 선언합니다.
+   - css 를 사용할 땐 가급적 object 가 아닌 template string 을 활용합니다.
+   - Emotion 의 styled 를 활용해 스타일링을 할 때 변수명은 컴포넌트와 마찬가지로 파스칼 케이스로 선언합니다.
+   - interface 선언 : 컴포넌트명+props
+   - 기본적으로 rem 사용, border, border-radius : px
+
+5. **Function**
+   - 함수의 식별자명은 항상 시멘틱하게 선언합니다. (어떤 기능을 하는 함수인지 함수명을 보고 알 수 있도록 선언합니다.)
+   - 이벤트를 핸들링 하는 함수는 handle 접두사를 이용합니다.
+   - 반환값이 boolean 인 함수는 is 접두사를 활용하며, 어떤 값을 리턴하는 함수는 get 접두사를 활용합니다.
+   -  함수는 함수 표현식만 사용합니다
+
+     <br/>
+
+</details>
+
+<br/>
+
+<h2> 📁 폴더 구조 </h2>
+
+```
+|-- 📁 .github
+|-- 📁 .husky
+|-- 📁 node_modules
+|-- 📁 public
+|-- 📁 src
+  |-- 📁 apis
+  |-- 📁 assets
+  |-- 📁 components
+  |-- 📁 constants
+  |-- 📁 layout
+  |-- 📁 pages
+  |-- 📁 route
+  |-- 📁 styles
+  |-- 📁 types
+  |-- App.tsx
+  |-- main.tsx
+  |-- queryClient.ts
+  |-- svg.d.ts
+  |-- vite-env.d.ts
+|-- .env
+|-- .eslintrc.json
+|-- .gitignore
+|-- .prettierrc
+|-- .stylelintignore
+|-- .stylelintrc.json
+|-- index.html
+|-- package.json
+|-- README.md
+|-- tsconfig.app.json
+|-- tsconfig.json
+|-- tsconfig.node.json
+|-- vercel.json
+|-- vite.config.ts
+|-- yarn.lock
+```
 <br />