docs: TEAM MATEBALL 개발 관련 문서 사이트 배포

.github/workflows/deploy.yml

@@ -0,0 +1,59 @@
+
+name: docs-deploy
+
+on:
+  push:
+    branches: [develop]
+    paths: [docs/**]
+  pull_request:
+    branches: [develop]
+    paths: [docs/**]
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: docs-deploy
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Configure GitHub Pages
+        uses: actions/configure-pages@v4
+
+      - name: Install Docs Dependencies
+        run: pnpm install --frozen-lockfile
+        working-directory: docs
+
+      - name: Build Docs
+        run: pnpm run docs:build
+        working-directory: docs
+
+      - name: Upload Pages Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/.vitepress/dist
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -27,3 +27,7 @@ dist-ssr
 .env
 *storybook.log
 
+# vitepress
+docs/.vitepress/cache
+docs/.vitepress/dist
+docs/.vitepress/tmp

biome.json

@@ -13,7 +13,8 @@
       "!**/build/**",
       "!**/.next/**",
       "!**/storybook-static/**",
-      "!**/.direnv/**"
+      "!**/.direnv/**",
+      "!**/docs/**"
     ]
   },
   "formatter": {

docs/.vitepress/config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vitepress';
+
+export default defineConfig({
+  base: '/MATEBALL-CLIENT/',
+  title: 'MATEBALL CLIENT DOCS',
+  description: 'mateball client convention & troubleshootig & docs',
+
+  head: [
+    ['link', { rel: 'icon', href: '/MATEBALL-CLIENT/favicon.svg' }],
+  ],
+  themeConfig: {
+    nav: [
+      { text: 'Home', link: '/' },
+    ],
+
+
+    socialLinks: [{ icon: 'github', link: 'https://github.com/MATEBALL/MATEBALL-CLIENT' }],
+  },
+});

docs/coding.md

@@ -0,0 +1,125 @@
+# 🧾 코딩 컨벤션
+
+메잇볼 클라이언트 팀의 코드 품질과 협업 효율을 높이기 위한 코딩 컨벤션입니다.  
+모든 팀원이 일관된 스타일로 코드를 작성할 수 있도록 아래 규칙을 준수해주세요.
+
+---
+
+## 🟡 변수
+
+- `var` 사용 **금지**, `const` → `let` 순으로 선언
+- 문자열 조합 시 `+` 대신 **템플릿 리터럴(``` ` ```) 사용**
+- 변수명은 의미를 명확히 드러내도록 작성  
+  - ✅ `users`, `fruits`  
+  - ❌ `Arr`, `tmp`, `data1`
+- 줄임말 지양: 의미가 길더라도 명확한 이름 사용  
+  - ✅ `Button`  
+  - ❌ `Btn`
+- `map()` 사용 시, key는 반드시 고유한 값 사용  
+  - ❌ `key={index}` → ❌  
+  - ✅ `key={user.id}` 또는 `uuid`
+- **전역 변수**는 지양 (가능하면 로컬 스코프 유지)
+
+---
+
+## 🔵 함수
+
+- **function 키워드 금지**, **화살표 함수만 사용**
+- 공통 함수는 `utils/` 폴더로 분리하여 재사용
+- 변수/함수 이름은 **20자 미만**
+  - 네이밍에 의미를 담고, 필요한 경우 주석으로 보완
+- **Early Return 패턴 권장**
+
+```tsx
+// ✅ Early Return
+const processUser = (user) => {
+  if (!user || !user.isActive) return;
+  // 이후 로직
+};
+````
+
+---
+
+## 🟢 컴포넌트
+
+* 기본 템플릿은 `rafce` 사용 (React Arrow Function Component with Export)
+* 불필요한 wrapper는 ❌ → **Fragment (`<>`) 사용 권장**
+
+```tsx
+const InfoText = () => {
+  return (
+    <>
+      <h1>Welcome!</h1>
+      <p>This is our new page!</p>
+    </>
+  );
+};
+```
+
+* children이 없는 컴포넌트는 self-closing (`<Component />`)
+* children 적극 활용해 UI 유연하게 구성
+
+---
+
+## 🟠 타입 (TypeScript)
+
+* `object` 타입은 **interface** 사용
+* 단일 변수 타입은 **type alias**
+* 컴포넌트 Props 타입은 **컴포넌트 상단에 정의**
+* 그 외 타입은 `types/` 폴더에 분리
+* API 응답 타입 네이밍: `OOOResponse` 형태
+
+```ts
+interface UserCardProps {
+  userId: string;
+  userName: string;
+}
+```
+
+---
+
+## 🔴 메소드
+
+* 배열 복사는 **스프레드 연산자(...)** 사용
+
+  ```ts
+  const copy = [...originals];
+  ```
+
+* `for` 루프 대신 `map`, `forEach`, `filter` 사용
+
+* 구조 분해 할당 적극 사용
+
+```ts
+const checkUser = ({ userName, userBirth }: UserDataProps) => {
+  // ...
+};
+```
+
+* 불필요한 반복문 지양
+
+  * 조건 검색 시 `Map`, `Object`, 인덱스 접근 방식 고려
+
+---
+
+## ⚙ 기타
+
+* `button` 태그에는 `type` 명시 (`type="button"` / `"submit"`)
+* 비교 연산은 `===`, `!==`만 사용
+* **axios는 async/await 패턴 사용**, then/catch 대신:
+
+```ts
+const fetchData = async () => {
+  try {
+    const res = await axios.get('/api/data');
+  } catch (err) {
+    console.error(err);
+  }
+};
+```
+
+---
+<br/>
+
+> 📌 컨벤션이 어긋난 경우 리뷰 시 코멘트 부탁드리며, **모두가 이해할 수 있는 코드 작성**을 우선합니다.
+

docs/folder.md

@@ -0,0 +1,89 @@
+
+
+# 📂 폴더 구조 가이드
+
+메잇볼 클라이언트 팀에서는 **코드 응집도**와 **유지보수 편의성**을 높이기 위해 아래와 같은 폴더 구조를 따릅니다.  
+또한, 모든 폴더와 파일명은 **케밥 케이스(kebab-case)**를 적용해 일관성 있고 가독성이 뛰어난 구조를 유지합니다.
+
+---
+
+## 폴더 구조 예시
+
+```
+
+|-- 📁 .github
+|-- 📁 node_modules
+|-- 📁 public
+|-- 📁 src 
+  |-- 📁 pages
+	  |-- 📁 home
+		  |-- 📄ex) home.tsx
+		  |-- 📁 components
+		  |-- 📁 styles 등
+  |-- 📁 shared
+      |-- 📁 components
+            |-- 📄ex) home-header.tsx
+      |-- 📁 styles
+      |-- 📁 constants
+      |-- 📁 types 등 
+|-- index.html 등 ETC
+
+```
+
+---
+
+## 각 폴더별 역할 및 네이밍 이유
+
+### 1️⃣ `src/pages`
+
+- **목적**: 사용자에게 보여지는 개별 페이지 단위의 컴포넌트와 그에 특화된 리소스를 관리  
+- **구성**:  
+  - 페이지별 폴더(`home`, `profile` 등)로 구분  
+  - 각 페이지 폴더 안에 그 페이지 전용 `components`와 `styles` 폴더를 별도 관리  
+- **이유**:  
+  - 페이지 단위로 코드를 응집시켜 이해하기 쉽고, 유지보수가 편리  
+  - 각 페이지에 종속적인 코드가 명확히 분리되어, 변경 시 영향 범위 최소화
+
+### 2️⃣ `src/shared`
+
+- **목적**: 프로젝트 전역에서 재사용되는 **공통 모듈 및 리소스** 저장소  
+- **구성**:  
+  - `components`: 여러 페이지에서 공통으로 사용하는 UI 컴포넌트  
+  - `styles`: 전역 스타일 및 테마 변수  
+  - `constants`: 전역 상수 (API URL, 색상 코드 등)  
+  - `types`: 타입 정의  
+- **이유**:  
+  - 재사용성을 높이고, 중복 코드를 줄여 유지보수 비용 절감  
+  - 공통 리소스를 한 곳에 모아두어 변경 관리 및 영향도 분석이 용이
+
+### 3️⃣ 기타 주요 폴더
+
+- `.github`: GitHub 워크플로우, 이슈 및 PR 템플릿  
+- `node_modules`: 프로젝트 의존성  
+- `public`: 정적 파일 (이미지, 폰트 등)  
+- 루트의 `index.html`: 앱 진입점
+
+---
+
+## 케밥 케이스(kebab-case) 사용 이유
+
+- **폴더명과 파일명 모두 케밥 케이스**를 사용합니다.  
+- **장점**:  
+  - OS 및 개발 도구 간 **대소문자 구분 문제 최소화**  
+  - 터미널에서 입력하기 쉽고, 경로 가독성이 뛰어남  
+  - URL과 유사해 직관적이고 협업 시 혼동 감소
+
+---
+
+## 설계 원칙
+
+- **응집도**: 관련 코드와 리소스를 한곳에 모아 관리하여 코드 이해도를 높임  
+- **단일 책임 원칙**: 각 폴더는 명확한 책임과 역할을 가짐  
+- **확장성**: 새로운 기능 추가 시 폴더를 쉽게 추가하고 관리 가능  
+- **협업 효율성**: 일관된 구조 덕분에 팀원 모두 빠르게 코드 위치 파악 가능
+
+---
+
+> 메잇볼 팀은 이 폴더 구조를 통해 빠른 개발과 원활한 협업을 실현하고 있습니다.  
+> 작업 중 헷갈릴 때는 이 가이드를 참고해 주세요!
+