Merge pull request #149 from CoolPeace-yanolza/dev

[v1.0.0] dev 배포 제한 이슈로 인한 main 1.0.0 배포

.eslintrc.cjs

@@ -1,18 +1,26 @@
 module.exports = {
   root: true,
-  env: { browser: true, es2020: true },
+  env: { browser: true, es2020: true, node: true },
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
+    'prettier'
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  plugins: ['react-refresh', 'react-hooks'],
   rules: {
     'react-refresh/only-export-components': [
       'warn',
-      { allowConstantExport: true },
-    ],
+      { allowConstantExport: true }
+    ]
   },
-}
+  'react-hooks/rules-of-hooks': 'error',
+  'react-hooks/exhaustive-deps': [
+    'warn',
+    {
+      additionalHooks: 'useRecoilCallback'
+    }
+  ]
+};

.github/workflows/dev.yaml

@@ -0,0 +1,23 @@
+name: Vercel Production Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID_DEV }}
+on:
+  push:
+    branches:
+      - dev
+
+jobs:
+  Deploy-Production:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{
+          secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

.github/workflows/preview.yaml

@@ -0,0 +1,23 @@
+name: Vercel Preview Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID_DEV }}
+on:
+  pull_request:
+    types:
+      - opened
+
+jobs:
+  Deploy-Preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=preview --token=${{
+          secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

.github/workflows/production.yaml

@@ -0,0 +1,23 @@
+name: Vercel Production Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  Deploy-Production:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{
+          secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+.DS_Store
+dist
+node_modules/*

.prettierrc.json

@@ -0,0 +1,13 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 80,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "useTabs": false,
+  "quoteProps": "as-needed",
+  "singleAttributePerLine": true,
+  "bracketSameLine": false
+}

README.md

@@ -1,30 +1,38 @@
-# React + TypeScript + Vite
+# 쿨피스 X 야놀자 : 사장님 비서 Ya Client
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+<img width="527" alt="image" src="https://github.com/CoolPeace-yanolza/frontend/assets/101972330/f3b7442d-e849-40eb-a5bf-b1b115534a46">
+<img width="569" alt="image" src="https://github.com/CoolPeace-yanolza/frontend/assets/101972330/509c47e9-1b2d-42de-8fce-179ba70e3ae5">
 
-Currently, two official plugins are available:
+## Contributor
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- @로그인/회원가입 ([김다빈](https://github.com/dabin-Hailey) : Leader)
+- @대시보드 ([김특희](https://github.com/turkey-kim))
+- @누적리포트 ([최지훈](https://github.com/JitHoon))
+- @쿠폰조회 ([정진주](https://github.com/jinjoo-jung))
+- @쿠폰등록 ([한은지](https://github.com/ovoxiix))
+- @정산관리 ([정지오](https://github.com/jiohjung98))
 
-## Expanding the ESLint configuration
+## Tech Stack
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+> [사장님 비서 ya 보일러플레이트 코드 생성 Doc](https://sugar-gasoline-6bc.notion.site/5c6f48673f124145b3322f60663d322e?pvs=4)
 
-- Configure the top-level `parserOptions` property like this:
+- Concurrent UI Pattern ([적용 전 실습](https://github.com/JitHoon/react-error-loading))
+- 어플리케이션 보일러플레이트 코드 : Vite (react-swc-ts, React 18)
+- 스타일 : emotion (styled), reset css
+- 코드 컨벤션 : Eslint, prettier
+- 배포, CI/CD : Vercel (+ Github Actions)
+- 테스트 : Jest
+- 비동기 처리, 상태 관리, 에러 컨트롤 : Axios, Reac-Query, Recoil, react-error-boundary
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
+## Team Convention
+
+> [사장님 비서 ya 컨벤션 Doc](https://sugar-gasoline-6bc.notion.site/FE-adb78e85671b4d80988cd08cb88a93cf?pvs=4)
+
+## Script
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+앱 실행
+
+```
+$ npm run build
+$ npm run dev
+```

index.html

@@ -1,13 +1,60 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <head>
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/favicon.ico"
+    />
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <meta
+      name="viewport"
+      content="initial-scale=1, maximum-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
+    />
+    <meta
+      name="description"
+      content="국내숙박 앱 1위 야놀자의 사장님들을 위한 셀프 쿠폰 등록 서비스! 지금 사장님 비서ya를 통해 우리 숙소 매출을 올려 보세요."
+    />
+    <meta
+      name="keywords"
+      content="사장님 비서ya, 사장님 비서야, 야놀자 비서야, 비서야, 비서ya, 야놀자 파트너센터, 야놀자, yanolja, 파트너센터, 파트너센타, 야놀자 사장님, 야놀자 사장님 페이지, 스마트프런트, 스마트프론트, 쿠폰, 사장님 쿠폰, 펜션, 모텔, 리조트, 호텔"
+    />
+    <meta
+      property="og:title"
+      content="사장님 비서ya : 셀프 쿠폰 운영"
+    />
+    <meta
+      property="og:image"
+      content="/og-image-800x400.png"
+    />
+    <meta
+      property="og:description"
+      content="국내숙박 앱 1위 야놀자의 사장님들을 위한 셀프 쿠폰 등록 서비스! 지금 사장님 비서ya를 통해 우리 숙소 매출을 올려 보세요."
+    />
+    <meta
+      property="og:type"
+      content="website"
+    />
+    <meta
+      name="twitter:card"
+      content="summary"
+    />
+    <meta
+      name="twitter:title"
+      content="사장님 비서ya : 셀프 쿠폰 운영"
+    />
+    <meta
+      name="twitter:description"
+      content="국내 호텔 모텔 펜션/풀빌라는 물론 레저/액티비티에 항공 및 해외숙소까지 모두 초특가! 지금 야놀자로 최대 80% 할인받으세요."
+    />
+    <title>사장님 비서ya : 셀프 쿠폰 운영</title>
   </head>
   <body>
+    <div id="modal-root"></div>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script
+      type="module"
+      src="/src/main.tsx"
+    ></script>
   </body>
 </html>

jest.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  transform: {
+    '^.+\\.(t|j)sx?$': '@swc/jest'
+  }
+};