Develop

.eslintrc.json

@@ -31,7 +31,7 @@
         { "ts": "never", "tsx": "never" }
       ],
       "no-shadow": "off",
-      "@typescript-eslint/no-shadow": "error",
+      "@typescript-eslint/no-shadow": "off",
       "@typescript-eslint/explicit-function-return-type": [
         "error",
         { "allowExpressions": true }

.github/workflows/discord-pr.yaml

@@ -0,0 +1,25 @@
+name: Discord PR Notification
+
+on:
+  pull_request:
+    types: [opened, reopened]
+
+jobs:
+  notify_discord:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Discord Notification
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_PR_WEBHOOK }}
+          DISCORD_USERNAME: GitHub
+          DISCORD_AVATAR: https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png
+        uses: Ilshidur/action-discord@master
+        with:
+          args: |
+            새로운 PR이 열렸습니다!<@${{ secrets.DISCORD_ID_1 }}> <@${{ secrets.DISCORD_ID_2 }}>
+            PR: ${{ github.event.pull_request.html_url }}
+            작성자: ${{ github.event.pull_request.user.login }}
+            제목: ${{ github.event.pull_request.title }}

.github/workflows/main.yml

@@ -7,18 +7,81 @@ jobs:
   build:
     runs-on: ubuntu-20.04
     steps:
-      - name: Checkout source code.
+      - name: Checkout source code
         uses: actions/checkout@v3
-
+        with:
+          fetch-depth: 0
+
+      - name: Get commit message and author
+        id: get_commit_info
+        run: |
+          echo "::set-output name=message::$(git log --format=%s -n 1)"
+          echo "::set-output name=author::$(git log --format=%an -n 1)"
+          echo "::set-output name=author_username::$(git log --format=%ae -n 1 | cut -d@ -f1)"
+
       - name: Install dependencies
         run: yarn install
-      
+
       - name: Generate build
+        id: build
+        env:
+          VITE_API_BASE_URL: ${{ secrets.VITE_API_BASE_URL }}
+          VITE_OAUTH_KAKAO_REST_API_KEY: ${{ secrets.VITE_OAUTH_KAKAO_REST_API_KEY }}
+          VITE_OAUTH_KAKAO_CLIENT_SECRET_CODE: ${{ secrets.VITE_OAUTH_KAKAO_CLIENT_SECRET_CODE }}
+          VITE_OAUTH_KAKAO_REDIRECT_URI: ${{ secrets.VITE_OAUTH_KAKAO_REDIRECT_URI }}
         run: yarn build
-
-      - name: Deploy
+        continue-on-error: true
+
+      - name: Deploy to S3
+        id: deploy
+        if: steps.build.outcome == 'success'
         env:
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
         run: |
           aws s3 sync --region ap-northeast-2 dist s3://alignlab-client --delete
+        continue-on-error: true
+
+      - name: Invalidate CloudFront Cache
+        if: steps.deploy.outcome == 'success'
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          CLOUDFRONT_DISTRIBUTION_ID: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }}
+        run: |
+          aws cloudfront create-invalidation --region ap-northeast-2 --distribution-id $CLOUDFRONT_DISTRIBUTION_ID --paths "/*"
+
+      - name: Discord notification - Success
+        if: steps.deploy.outcome == 'success'
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_DEPLOY_WEBHOOK }}
+          DISCORD_USERNAME: GitHub
+          DISCORD_AVATAR: https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png
+        uses: Ilshidur/action-discord@master
+        with:
+          args: |
+            🎉 배포가 성공적으로 완료되었습니다!
+            브랜치: develop
+            커밋: ${{ steps.get_commit_info.outputs.message }}
+            작성자: ${{ steps.get_commit_info.outputs.author }}
+
+      - name: Discord notification - Failure
+        if: steps.build.outcome == 'failure' || steps.deploy.outcome == 'failure'
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_DEPLOY_WEBHOOK }}
+          DISCORD_USERNAME: GitHub
+          DISCORD_AVATAR: https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png
+        uses: Ilshidur/action-discord@master
+        with:
+          args: |
+            ❌ ${{ steps.build.outcome == 'failure' && '빌드 중' || '배포 중' }} 오류가 발생했습니다.
+            브랜치: develop
+            커밋: ${{ steps.get_commit_info.outputs.message }}
+            작성자: <@${{ secrets.DISCORD_ID_1 }}>
+            실패한 워크플로우: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
+            ${{ steps.build.outcome == 'failure' && '빌드 오류 메시지:' || '' }}
+            ${{ steps.build.outcome == 'failure' && steps.build.outputs.stderr || '' }}
+
+      - name: Check deploy result
+        if: steps.build.outcome == 'failure' || steps.deploy.outcome == 'failure'
+        run: exit 1

index.html

@@ -4,8 +4,9 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <!-- <script src="https://unpkg.com/ml5@1/dist/ml5.min.js"></script> -->
-  <title>자세 공작소</title>
+  <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" />
+  <link rel="icon" href="/src/assets/icons/favicon.svg" />
+  <title>자세공작소</title>
 </head>
 <body>
   <div id="root"></div>

package.json

@@ -13,35 +13,48 @@
     "lint:fix": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --fix"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.51.23",
+    "@types/react-lottie": "^1.2.10",
+    "axios": "1.7.3",
     "core-js": "^3.28.0",
+    "dayjs": "^1.11.13",
+    "echarts": "^5.5.1",
+    "echarts-for-react": "^3.0.2",
+    "lucide-react": "^0.435.0",
     "p5": "^1.9.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.8.1"
+    "react-lottie": "^1.2.4",
+    "react-router-dom": "^6.8.1",
+    "react-tailwindcss-datepicker": "^1.7.2",
+    "socket.io-client": "^4.7.5",
+    "zustand": "^4.5.5"
   },
   "devDependencies": {
-    "@types/node": "^20.14.10",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.54.1",
-    "@typescript-eslint/parser": "^5.54.1",
-    "@vitejs/plugin-react": "^4.3.1",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^8.7.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
+    "@types/node": "^20.7.1",
+    "@types/qs": "^6.9.7",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
+    "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.43.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-import-resolver-typescript": "^3.5.2",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.5",
-    "react-refresh": "^0.14.2",
-    "tailwindcss": "^3.4.4",
+    "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^2.8.8",
+    "prettier-plugin-tailwindcss": "^0.2.5",
+    "qs": "^6.11.0",
+    "react-refresh": "^0.14.0",
+    "tailwindcss": "^3.3.1",
     "ts-node": "^10.9.1",
-    "typescript": "^5.5.3",
-    "vite": "^5.3.3",
+    "typescript": "^5.1.6",
+    "vite": "^4.3.9",
     "vite-plugin-svgr": "^4.2.0",
-    "vite-tsconfig-paths": "^4.3.2"
+    "vite-tsconfig-paths": "^4.2.0"
   }
 }

src/App.tsx

@@ -1,17 +1,18 @@
 // dependencies
-import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"
+import { Router } from "@/routes"
 
-// components
-import { PoseDetector } from "./components"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import ModalsProvider from "./providers/ModalsProvider"
 
-const App: React.FC = () => {
+const queryClient = new QueryClient()
+
+const App = (): React.ReactElement => {
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<PoseDetector />} />
-        <Route path="*" element={<Navigate to="/" replace />} />
-      </Routes>
-    </BrowserRouter>
+    <QueryClientProvider client={queryClient}>
+      <ModalsProvider>
+        <Router />
+      </ModalsProvider>
+    </QueryClientProvider>
   )
 }
 

src/api/analysis.ts

@@ -0,0 +1,42 @@
+import axiosInstance from "./axiosInstance"
+import { poseType } from "./pose"
+
+export interface TodayAnalysisData {
+  date: string
+  count: {
+    type: poseType
+    count: number
+  }[]
+}
+
+export interface TotalAnalysisData {
+  data: TodayAnalysisData[]
+  page: number
+  size: number
+  totalPage: number
+  totalCount: number
+  sort: {
+    empty: boolean
+    sorted: boolean
+    unsorted: boolean
+  }
+}
+
+export const getTodayPoseAnalysis = async (): Promise<TodayAnalysisData> => {
+  try {
+    const res = await axiosInstance.get("/pose-counts/daily")
+    return res.data.data
+  } catch (e) {
+    throw e
+  }
+}
+
+export const getTotalPoseAnalysis = async (params: { fromDate?: string; toDate?: string }) => {
+  const queryString = new URLSearchParams(params).toString()
+  try {
+    const res = await axiosInstance.get(`/pose-counts?${queryString ? `${queryString}` : ""}&sort=date,asc`)
+    return res.data.data
+  } catch (e) {
+    throw e
+  }
+}

src/api/auth.ts

@@ -0,0 +1,87 @@
+// src/api/auth.ts
+import axiosInstance, { setAccessToken } from "@/api/axiosInstance"
+import qs from "qs"
+
+const REST_API_KEY = import.meta.env.VITE_OAUTH_KAKAO_REST_API_KEY
+const CLIENT_SECRET = import.meta.env.VITE_OAUTH_KAKAO_CLIENT_SECRET_CODE
+const REDIRECT_URI = import.meta.env.VITE_OAUTH_KAKAO_REDIRECT_URI
+
+export interface authUser {
+  uid: number
+  nickname: string
+  accessToken: string
+}
+
+export interface oauthUser {
+  nickname: string
+}
+
+export const oauth = async (code: string): Promise<string> => {
+  const formData = {
+    grant_type: "authorization_code",
+    client_id: REST_API_KEY,
+    client_secret: CLIENT_SECRET,
+    redirect_uri: REDIRECT_URI,
+    code,
+  }
+
+  try {
+    const res = await axiosInstance.post(`https://kauth.kakao.com/oauth/token?${qs.stringify(formData)}`, null, {
+      headers: { "Content-type": "application/x-www-form-urlencoded" },
+    })
+    return res.data.access_token
+  } catch (e) {
+    throw e
+  }
+}
+
+export const getOauthUser = async (accessToken: string): Promise<oauthUser> => {
+  const kakaoUser = await axiosInstance.get(`https://kapi.kakao.com/v2/user/me`, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  })
+  const { nickname } = kakaoUser.data.kakao_account.profile
+
+  return { nickname }
+}
+
+export const signIn = async (_accessToken: string): Promise<authUser> => {
+  try {
+    const res = await axiosInstance.post(`/oauth/kakao/sign-in`, { accessToken: _accessToken })
+    const { uid, nickname, accessToken } = res.data.data
+
+    // 로그인 성공 후 엑세스 토큰을 설정
+    setAccessToken(accessToken)
+
+    return { uid, nickname, accessToken }
+  } catch (e) {
+    throw e
+  }
+}
+
+export const signUp = async (_accessToken: string): Promise<authUser> => {
+  try {
+    const res = await axiosInstance.post(`/oauth/kakao/sign-up`, { accessToken: _accessToken })
+    const { uid, nickname, accessToken } = res.data.data
+
+    // 회원가입 성공 후 엑세스 토큰을 설정
+    setAccessToken(accessToken)
+
+    return { uid, nickname, accessToken }
+  } catch (e) {
+    throw e
+  }
+}
+
+export const getIsSignUp = async (accessToken: string): Promise<boolean> => {
+  try {
+    const res = await axiosInstance.get(`/oauth/kakao/sign-up/check`, {
+      params: { accessToken },
+    })
+    console.log(res.data)
+    return res.data.data.isExistsUser
+  } catch (e) {
+    throw e
+  }
+}