프로젝트 추가 세팅(husky, github action for gh-pages ci) (#9)

* Build: husky 적용

* Docs: 리드미 수정(남은 개발 목록)

* Style: NotFoundPage 스타일 코드 컴포넌트 아래로 이동

* Docs: 이슈 및 pr템플릿

* Build: gh-pages 자동 빌드 action

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,35 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: '[FE|BE] 홈 UI 렌더링 실패'
+labels: 'bug'
+assignees: ''
+---
+
+## 버그 내용 및 예상 행동
+
+ex) 00 기능 클릭 시 에러 발생 - 클릭 시 000이 되어야함.
+
+## 환경
+
+### Desktop(아래 정보를 채워주세요.)
+
+- OS: [e.g. iOS]
+- Browser: [e.g chorme, safari]
+- Version: [e.g. 22]
+
+### SmartPhone
+
+- Device: [e.g iPhone 13]
+- OS: [e.g. iOS8,1]
+- Browser: [e.g safari]
+- Version: [e.g. 22]
+
+## 스크린샷
+
+스크린샷 1
+
+## 닫는 조건
+
+- [ ]: 닫는조건1
+- [ ]: 닫는조건2

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,24 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: '[FE|BE] 00 기능 구현 요청'
+labels: 'feat'
+assignees: ''
+---
+
+## 기능 요청사항
+
+ex) 로그인 기능이 필요해요.
+
+## 요청 세부사항
+
+ex) 로그인 기능을 만들어주세요.
+
+## 레퍼런스
+
+ex) 관련 사진 및 링크 첨부
+
+## 닫는 조건
+
+- [ ]: 닫는조건1
+- [ ]: 닫는조건2

.github/pull_request_template.md

@@ -0,0 +1,22 @@
+# About
+
+ex) OO 기능 구현
+
+## Description
+
+- 흐름을 간단하게 작성하면 됩니다.
+
+ex)
+구현 사항 요약
+
+1. OO 구조 설계
+2. OO 클래스 분리
+3. 메서드 구현
+
+## Result
+
+ex) 실행, 테스트 결과 또는 사진 첨부
+
+## Ref
+
+ex) 관련 이슈 직접 태그, #3, #13

.github/workflows/gh-deploy.yml

@@ -0,0 +1,98 @@
+# Sample workflow for building and deploying a Gatsby site to GitHub Pages
+#
+# To get started with Gatsby see: https://www.gatsbyjs.com/docs/quick-start/
+#
+name: Deploy Gatsby site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+env:
+  GH_TOKEN: ${{ secrets.GH_TOKEN }}
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+# Default to bash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine packager manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v2
+        with:
+          # Automatically inject pathPrefix in your Gatsby configuration file.
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: gatsby
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            public
+            .cache
+          key: ${{ runner.os }}-gatsby-build-${{ hashFiles('public') }}
+          restore-keys: |
+            ${{ runner.os }}-gatsby-build-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build with Gatsby
+        env:
+          PREFIX_PATHS: 'true'
+        run: ${{ steps.detect-package-manager.outputs.manager }} run build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./public
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

README.md

@@ -7,9 +7,12 @@
 ## 남은 개발 목록
 
 - [x] : TOC
+- [x] : 허스키 (커밋 전 린트 및 프리티어 실행)
+- [ ] : github action
 - [ ] : SEO 설정
 - [ ] : 다크모드 구현
 - [ ] : 헤더 글 및 푸터 작성하기
 - [ ] : 리드미 작성
 - [ ] : 검색 기능
 - [ ] : 카테고리 및 시리즈 기능
+- [ ] : 맞춤법 검사 자동화

package.json

@@ -9,9 +9,11 @@
   ],
   "license": "0BSD",
   "scripts": {
+    "postinstall": "husky install",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,css}\"",
+    "lint": "eslint --cache .",
     "build": "gatsby build",
     "dev": "gatsby develop",
-    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,css}\"",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
@@ -74,8 +76,23 @@
     "gatsby-source-filesystem": "^4.21.1",
     "gatsby-transformer-sharp": "^4.21.0",
     "gh-pages": "^4.0.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.1.0",
     "prettier": "^2.7.1",
     "storybook-addon-gatsby": "^0.0.5",
     "typescript": "^4.7.4"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,tsx}": [
+      "eslint --ext .tsx --ext .ts ./src --fix"
+    ],
+    "src/**": [
+      "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,css}\""
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
   }
 }

src/pages/404.tsx

@@ -3,6 +3,22 @@ import { Link } from 'gatsby'
 
 import GlobalStyle from '@/styles/GlobalStyle'
 
+const NotFoundPage = () => {
+  return (
+    <NotFoundPageWrapper>
+      <GlobalStyle />
+      <NotFoundText>404</NotFoundText>
+      <NotFoundDescription>
+        찾을 수 없는 페이지입니다. <br />
+        다른 콘텐츠를 보러 가보시겠어요?
+      </NotFoundDescription>
+      <GoToMainButton to="/">메인으로</GoToMainButton>
+    </NotFoundPageWrapper>
+  )
+}
+
+export default NotFoundPage
+
 const NotFoundPageWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -38,19 +54,3 @@ const GoToMainButton = styled(Link)`
     text-decoration: underline;
   }
 `
-
-const NotFoundPage = () => {
-  return (
-    <NotFoundPageWrapper>
-      <GlobalStyle />
-      <NotFoundText>404</NotFoundText>
-      <NotFoundDescription>
-        찾을 수 없는 페이지입니다. <br />
-        다른 콘텐츠를 보러 가보시겠어요?
-      </NotFoundDescription>
-      <GoToMainButton to="/">메인으로</GoToMainButton>
-    </NotFoundPageWrapper>
-  )
-}
-
-export default NotFoundPage