Merge pull request #253 from DNDACADEMY/develop

feat: 지원자 카운트 추가

.github/workflows/ci.yml

@@ -13,6 +13,7 @@ env:
     ${{ github.workspace }}/packages/*/node_modules
   CACHED_BUILD_PACKAGE_UI_PATHS: ${{ github.workspace }}/packages/ui/dist
   CACHED_BUILD_PACKAGE_CORE_PATHS: ${{ github.workspace }}/packages/core/dist
+  CACHED_GENERATED_STATIC_DATA_PATHS: ${{ github.workspace }}/apps/web/src/lib/assets/data
   DEFAULT_NODE_VERSION: "v20.11.1"
   DEFAULT_YARN_VERSION: "4.3.1"
 
@@ -118,11 +119,71 @@ jobs:
         run: yarn workspace @dnd-academy/ui build
 
     outputs:
-      dependency_cache_key: ${{ needs.job_install_dependencies.outputs.dependency_cache_key }}
-      yarn_cache_dir_path: ${{ needs.job_install_dependencies.outputs.yarn_cache_dir_path }}
       build_package_core_cache_key: ${{ steps.compute_core_cache_key.outputs.hash }}
       build_package_ui_cache_key: ${{ steps.compute_ui_cache_key.outputs.hash }}
 
+  job_generate_data:
+    name: Generate Data
+    needs: [job_install_dependencies, job_packages_build]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out current commit (${{ github.sha }})
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.DEFAULT_NODE_VERSION }}
+
+      - name: Check dependency cache
+        id: cache-deps
+        uses: actions/cache@v4
+        with:
+          path: ${{ needs.job_install_dependencies.outputs.yarn_cache_dir_path }}
+          key: ${{ needs.job_install_dependencies.outputs.dependency_cache_key }}
+
+      - name: Install dependencies
+        if: steps.cache-deps.outputs.cache-hit != 'true'
+        run: yarn install --immutable
+
+      - name: Create environment variables
+        working-directory: apps/web
+        run: |
+          touch .env
+          echo GOOGLE_CLIENT_EMAIL = ${{ secrets.GOOGLE_CLIENT_EMAIL }} >> .env
+          echo GOOGLE_PRIVATE_KEY = ${{ secrets.GOOGLE_PRIVATE_KEY }} >> .env
+
+      - name: Check build core package cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.CACHED_BUILD_PACKAGE_CORE_PATHS }}
+          key: ${{ needs.job_packages_build.outputs.build_package_core_cache_key }}
+
+      - name: Check build ui package cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.CACHED_BUILD_PACKAGE_UI_PATHS }}
+          key: ${{ needs.job_packages_build.outputs.build_package_ui_cache_key }}
+
+      - name: Compute Generate Data cache key
+        id: compute_generate_data_cache_key
+        run: |
+          SCRIPTS_HASH=$(find apps/web/scripts -type f -exec sha256sum {} \; | sort | sha256sum | cut -d' ' -f1)
+          echo "hash=${{ runner.os }}-generate-data-${SCRIPTS_HASH}" >> $GITHUB_OUTPUT
+
+      - name: Check Generate Data cache
+        uses: actions/cache@v4
+        id: cache_generated_data
+        with:
+          path: ${{ env.CACHED_GENERATED_STATIC_DATA_PATHS }}
+          key: ${{ steps.compute_generate_data_cache_key.outputs.hash }}
+
+      - name: Generate data
+        if: steps.cache_generated_data.outputs.cache-hit != 'true'
+        run: yarn generate:applicant-count
+
+    outputs:
+      generate_data_cache_key: ${{ steps.compute_generate_data_cache_key.outputs.hash }}
+
   # continuous-integration:
   #   needs: [job_packages_build]
   #   runs-on: ubuntu-latest
@@ -155,7 +216,7 @@ jobs:
   #       run: yarn test:coverage
 
   job_publish_storybook_chromatic:
-    needs: [job_packages_build]
+    needs: [job_install_dependencies, job_packages_build, job_generate_data]
     name: Chromatic Publish
     runs-on: ubuntu-latest
     steps:
@@ -171,8 +232,8 @@ jobs:
       - name: Check dependency cache
         uses: actions/cache@v4
         with:
-          path: ${{ needs.job_packages_build.outputs.yarn_cache_dir_path }}
-          key: ${{ needs.job_packages_build.outputs.dependency_cache_key }}
+          path: ${{ needs.job_install_dependencies.outputs.yarn_cache_dir_path }}
+          key: ${{ needs.job_install_dependencies.outputs.dependency_cache_key }}
 
       - name: Check build core package cache
         uses: actions/cache@v4
@@ -186,6 +247,12 @@ jobs:
           path: ${{ env.CACHED_BUILD_PACKAGE_UI_PATHS }}
           key: ${{ needs.job_packages_build.outputs.build_package_ui_cache_key }}
 
+      - name: Check generate data cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.CACHED_GENERATED_STATIC_DATA_PATHS }}
+          key: ${{ needs.job_generate_data.outputs.generate_data_cache_key }}
+
       - name: Publish Project to Chromatic
         uses: chromaui/action@latest
         with:

.yarnrc.yml

@@ -6,4 +6,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.5.1.cjs
+yarnPath: .yarn/releases/yarn-4.5.3.cjs

apps/admin/package.json

@@ -30,8 +30,8 @@
     "@tanstack/react-query": "5.52.0",
     "@vercel/blob": "0.23.4",
     "clsx": "2.1.1",
-    "google-auth-library": "9.13.0",
-    "google-spreadsheet": "4.1.2",
+    "google-auth-library": "9.15.0",
+    "google-spreadsheet": "4.1.4",
     "motion": "11.11.17",
     "next": "14.2.15",
     "next-auth": "5.0.0-beta.19",

apps/web/.eslintrc.js

@@ -40,7 +40,7 @@ module.exports = {
   ],
   rules: {
     'import/no-extraneous-dependencies': ['error', {
-      devDependencies: ['**/*.test.ts', '**/*.test.tsx', '**/*.stories.tsx', '**/*.stories.ts', 'next.config.js'],
+      devDependencies: ['**/*.test.ts', '**/*.test.tsx', '**/*.stories.tsx', '**/*.stories.ts', 'next.config.js', 'scripts/**/*.ts'],
     }],
   },
 };

apps/web/.gitignore

@@ -51,3 +51,7 @@ cypress/log
 
 # eslint cache
 .eslintcache
+
+# google spreadsheet
+dist/
+src/lib/assets/data/applicant-count.json

apps/web/next.config.js

@@ -5,6 +5,10 @@ const isProd = process.env.NODE_ENV === 'production';
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  env: {
+    GOOGLE_CLIENT_EMAIL: process.env.GOOGLE_CLIENT_EMAIL,
+    GOOGLE_PRIVATE_KEY: process.env.GOOGLE_PRIVATE_KEY,
+  },
   eslint: {
     ignoreDuringBuilds: true,
   },

apps/web/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "open-browser": "open http://dnd-academy.localhost:3000",
     "dev": "next dev -H dnd-academy.localhost -p 3000 & yarn open-browser",
-    "build": "next build",
+    "build": "yarn generate:applicant-count && next build",
     "start": "next start",
     "lint": "eslint '**/*.{js,jsx,ts,tsx}' --fix",
     "stylelint": "stylelint **/*.scss",
@@ -20,7 +20,9 @@
     "check-types": "tsc --noEmit",
     "test:e2e": "start-server-and-test dev http://localhost:3000 cypress:run",
     "storybook": "storybook dev -p 6006",
-    "build:storybook": "storybook build"
+    "build:storybook": "storybook build",
+    "build:scripts": "tsc --project tsconfig.scripts.json",
+    "generate:applicant-count": "yarn build:scripts && node dist/scripts/generate-applicant-count.js"
   },
   "repository": {
     "type": "git",
@@ -57,6 +59,7 @@
     "@chromatic-com/storybook": "2.0.2",
     "@codecov/nextjs-webpack-plugin": "1.2.0",
     "@dnd-academy/eslint-config": "workspace:*",
+    "@next/env": "14.2.15",
     "@next/eslint-plugin-next": "14.2.15",
     "@storybook/addon-essentials": "8.3.3",
     "@storybook/addon-interactions": "8.3.3",
@@ -80,6 +83,7 @@
     "@typescript-eslint/eslint-plugin": "7.9.0",
     "@typescript-eslint/parser": "7.9.0",
     "cypress": "12.1.0",
+    "dotenv": "16.4.7",
     "eslint": "8.56.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "18.0.0",
@@ -95,6 +99,8 @@
     "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-testing-library": "6.2.0",
     "eslint-plugin-unused-imports": "3.2.0",
+    "google-auth-library": "9.15.0",
+    "google-spreadsheet": "4.1.4",
     "identity-obj-proxy": "3.0.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",

apps/web/scripts/generate-applicant-count.ts

@@ -0,0 +1,82 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import 'dotenv/config';
+
+import * as fs from 'fs';
+import * as path from 'path';
+
+import { JWT } from 'google-auth-library';
+import { GoogleSpreadsheet } from 'google-spreadsheet';
+
+const checkNumber = (value?: number | null): number => {
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  return 0;
+};
+
+const PROJECT_ROOT = path.resolve(__dirname, '../..');
+
+async function generateApplicantCount() {
+  try {
+    console.log('Environment check:');
+    console.log('GOOGLE_CLIENT_EMAIL:', process.env.GOOGLE_CLIENT_EMAIL);
+    console.log('GOOGLE_PRIVATE_KEY exists:', !!process.env.GOOGLE_PRIVATE_KEY);
+
+    const key = process.env.GOOGLE_PRIVATE_KEY?.replace(/\\n/g, '\n');
+    console.log('Formatted key starts with:', key?.substring(0, 50));
+    console.log('Formatted key ends with:', key?.substring(key.length - 50));
+
+    const serviceAccountAuth = new JWT({
+      email: process.env.GOOGLE_CLIENT_EMAIL,
+      key,
+      scopes: ['https://www.googleapis.com/auth/spreadsheets'],
+    });
+
+    // 인증 테스트
+    console.log('Attempting to authenticate...');
+    await serviceAccountAuth.authorize();
+    console.log('Authentication successful!');
+
+    const developerApplicantDoc = new GoogleSpreadsheet('1OLzUsZ1TBmKeEJh-ENoXWdccfwTg7WY3-zeOmcACxRc', serviceAccountAuth);
+    const designerApplicantDoc = new GoogleSpreadsheet('1KrwSZoUY3i6asMWtxIQsaofMP9rCmxnDpD_sZ4yOC-c', serviceAccountAuth);
+
+    await developerApplicantDoc.loadInfo();
+    await designerApplicantDoc.loadInfo();
+
+    const developerApplicantRows = await developerApplicantDoc.sheetsByIndex[0].getRows();
+    const designerApplicantRows = await designerApplicantDoc.sheetsByIndex[0].getRows();
+
+    const developerApplicantCount = checkNumber(developerApplicantRows?.length);
+    const designerApplicantCount = checkNumber(designerApplicantRows?.length);
+
+    const applicantData = {
+      developer: developerApplicantCount,
+      designer: designerApplicantCount,
+      total: developerApplicantCount + designerApplicantCount,
+      lastUpdated: new Date().toISOString(),
+    };
+
+    const outputPath = path.join(PROJECT_ROOT, 'src/lib/assets/data/applicant-count.json');
+
+    const dir = path.dirname(outputPath);
+
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+
+    fs.writeFileSync(outputPath, JSON.stringify(applicantData, null, 2));
+
+    console.log('✅ 지원자 수 데이터가 성공적으로 생성되었습니다.');
+    console.log(`📁 파일 위치: ${outputPath}`);
+    console.log('📊 현재 지원자 현황:');
+    console.log(`- 개발자: ${applicantData.developer}명`);
+    console.log(`- 디자이너: ${applicantData.designer}명`);
+    console.log(`- 총 지원자: ${applicantData.total}명`);
+  } catch (error) {
+    console.error('❌ 데이터 생성 중 오류가 발생했습니다:', error);
+    process.exit(1);
+  }
+}
+
+generateApplicantCount();

apps/web/src/app/page.tsx

@@ -1,11 +1,8 @@
-import {
-  api, type CurrentApplicantCount, type FAQ,
-} from '@dnd-academy/core';
+import { api, type FAQ } from '@dnd-academy/core';
 
 import HomePage from '@/components/pages/HomePage';
-import { getEventStatus } from '@/lib/apis/event';
+import { getApplicantCount, getEventStatus } from '@/lib/apis/event';
 import { DEFAULT_METADATA } from '@/lib/constants/metadata';
-import { checkNumber } from '@/utils';
 
 export const metadata = DEFAULT_METADATA;
 
@@ -16,27 +13,20 @@ type Props = {
 };
 
 async function Home({ searchParams }: Props) {
-  const currentApplicantCountData = await api<CurrentApplicantCount>({
-    url: '/current_applicant_count.json',
-    type: 'blob',
-  });
-
   const faqData = await api<FAQ[]>({
     url: '/faq.json',
     type: 'blob',
   });
 
-  const currentApplicantCount = checkNumber(currentApplicantCountData?.designer)
-    + checkNumber(currentApplicantCountData?.developer);
-
   const eventStatus = getEventStatus();
+  const applicantCount = getApplicantCount();
 
   return (
     <HomePage
       tab={searchParams.tab}
-      currentApplicantCount={currentApplicantCount}
       eventStatus={eventStatus}
       faqItems={faqData}
+      applicantTotalCount={applicantCount.total}
     />
   );
 }

apps/web/src/components/pages/HomePage/index.tsx

@@ -20,13 +20,13 @@ import styles from './index.module.scss';
 
 type Props = {
   tab?: string;
-  currentApplicantCount: number;
+  applicantTotalCount: number;
   eventStatus: Event;
   faqItems: FAQ[];
 };
 
 function HomePage({
-  tab, currentApplicantCount, eventStatus, faqItems,
+  tab, applicantTotalCount, eventStatus, faqItems,
 }: Props) {
   const isChristmas = isChristmasTheme();
 
@@ -55,7 +55,7 @@ function HomePage({
             {['ONGOING', 'HOT'].includes(eventStatus.status) && (
               <div className={styles.counter}>
                 오늘까지&nbsp;
-                <Counter count={currentApplicantCount} />
+                <Counter count={applicantTotalCount} />
                 명이 지원했어요!
               </div>
             )}

apps/web/src/lib/apis/event.ts

@@ -1,6 +1,7 @@
-import { EventStatus } from '@dnd-academy/core';
+import { CurrentApplicantCount, EventStatus } from '@dnd-academy/core';
 
-import { eventStatusData } from '../assets/data';
+import { applicantCountData, eventStatusData } from '../assets/data';
 
-// eslint-disable-next-line import/prefer-default-export
 export const getEventStatus = () => eventStatusData as EventStatus;
+
+export const getApplicantCount = () => applicantCountData as CurrentApplicantCount;

apps/web/src/lib/assets/data/event_status.json

@@ -1,5 +1,5 @@
 {
-  "status": "UPCOMING",
+  "status": "ONGOING",
   "applicationStartDateTime": "2024/11/18 00:00:00",
   "applicationEndDateTime": "2024/12/15 23:59:59",
   "applicantAcceptanceDateTime": "2024/12/25 00:00:00"

apps/web/src/lib/assets/data/index.ts

@@ -1,3 +1,4 @@
+import applicantCountData from './applicant-count.json';
 import eventStatusData from './event_status.json';
 import jobsData from './jobs.json';
 import organizersData from './organizers.json';
@@ -6,6 +7,7 @@ import reviewsData from './reviews.json';
 import totalCountStatusData from './total_count_status.json';
 
 export {
+  applicantCountData,
   eventStatusData,
   jobsData,
   organizersData,