chore: 프로젝트 상세 세팅 (#5)

* feat: eslint 세부설정

* feat: prettier 세부설정

* chore: 각 어플에서 실행할 수 있는 build, dev 스크립트 추가

* chore: packlint 의존성 추가

* chore: husky, lint-staged 의존성 및 스크립트 추가

* chore: commitlint 추가

* chore(custom): commitizen으로 커밋 템플릿 생성

* chore(common): 커밋 템플릿에 scope 추가

* init(ui): ui 프로젝트 생성

* fix(ui): header의 React import 코드 제거

* chore(common): husky pre push 훅 추가

* chore(common): pre push 실행 권한 부여

* chore(common): ui, shelter, volunteer 프로젝트에 chakra ui 의존성 추가

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+pnpm commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm lint
+pnpm lint-staged

.husky/pre-push

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm lint
+pnpm build

.lintstagedrc

@@ -0,0 +1,3 @@
+{
+  "*.{ts,tsx}": ["eslint --fix", "prettier --write"]
+}

.prettierrc.cjs

@@ -0,0 +1,13 @@
+module.exports = {
+  tabWidth: 2,
+  printWidth: 100,
+  jsxBracketSameLine: false,
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  useTabs: false,
+  bracketSpacing: true,
+  arrowParens: 'always',
+  endOfLine: 'auto',
+  singleAttributePerLine: false,
+};

apps/shelter/package.json

@@ -1,26 +1,31 @@
 {
   "name": "shelter",
-  "private": true,
   "version": "0.0.0",
+  "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
     "build": "tsc && vite build",
+    "dev": "vite",
     "lint": "eslint \"src/**/*.ts\"",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@chakra-ui/react": "^2.8.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "framer-motion": "^10.16.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "ui": "workspace:*"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",
     "eslint": "^8.45.0",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5",
     "eslint-config-custom": "workspace:*",
-    "tsconfig": "workspace:*"
+    "tsconfig": "workspace:*",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
   }
 }

apps/shelter/src/App.tsx

@@ -1,7 +1,12 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { CustomButton, Header } from 'ui';
+
 export default function App() {
   return (
-    <div>
+    <ChakraProvider>
+      <Header />
       보호소 어플리케이션
-    </div>
-  )
+      <CustomButton />
+    </ChakraProvider>
+  );
 }

apps/volunteer/package.json

@@ -1,26 +1,31 @@
 {
   "name": "volunteer",
-  "private": true,
   "version": "0.0.0",
+  "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
     "build": "tsc && vite build",
+    "dev": "vite",
     "lint": "eslint \"src/**/*.ts\"",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@chakra-ui/react": "^2.8.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "framer-motion": "^10.16.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "ui": "workspace:*"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",
     "eslint": "^8.45.0",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5",
     "eslint-config-custom": "workspace:*",
-    "tsconfig": "workspace:*"
+    "tsconfig": "workspace:*",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
   }
 }

apps/volunteer/src/App.tsx

@@ -1,7 +1,12 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { CustomButton, Header } from 'ui';
+
 export default function App() {
   return (
-    <>
+    <ChakraProvider>
+      <Header />
       봉사자 어플리케이션
-    </>
-  )
+      <CustomButton />
+    </ChakraProvider>
+  );
 }

apps/volunteer/src/main.tsx

@@ -1,9 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-)
+);

commitlint.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'type-enum': [
+      2,
+      'always',
+      [
+        'feat',
+        'fix',
+        'refactor',
+        'design',
+        'comment',
+        'style',
+        'test',
+        'chore',
+        'init',
+        'rename',
+        'remove',
+        'docs',
+      ],
+    ],
+  },
+};