merge dev branch into feat/SP-694-improve-performance

.eslintrc.cjs

@@ -1,7 +1,13 @@
 module.exports = {
   root: true,
-  env: { browser: true, es2020: true },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'prettier', 'plugin:storybook/recommended'],
+  env: { browser: true, es2020: true, node: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'prettier',
+    'plugin:storybook/recommended',
+  ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
@@ -14,5 +20,6 @@ module.exports = {
     'react/jsx-key': 'off',
     // 디버그 허용
     'no-debugger': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
   },
 };

.github/workflows/lighthouse.yml

@@ -0,0 +1,166 @@
+name: Run lighthouse CI When Push on PR to Dev Branch
+on: 
+  pull_request:
+    branches:
+      - dev
+    types: [synchronize, opened]
+
+permissions:
+    contents: read
+    pull-requests: write
+
+jobs:
+  lhci:
+    name: Lighthouse CI
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js 20.10.0
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .node-version
+
+      - name: Install dependencies
+        run: |
+          yarn install --immutable --immutable-cache --check-cache
+
+      - name: Add host "local.ludo.study"
+        run: sudo echo "127.0.0.1 local.ludo.study" | sudo tee -a /etc/hosts
+
+      - name: Build the project
+        run: |
+          yarn build
+      
+      - name: Run Lighthouse CI - Desktop
+        env:
+          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+        run: |
+          yarn global add @lhci/cli
+          lhci collect --config=lighthouserc-desktop.cjs || echo "Fail to Run Lighthouse CI!"
+          lhci upload --config=lighthouserc-desktop.cjs || echo "Fail to Run Lighthouse CI!"
+
+      - name: Run Lighthouse CI - Mobile
+        env:
+          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+        run: |
+          lhci collect --config=lighthouserc-mobile.cjs || echo "Fail to Run Lighthouse CI!"
+          lhci upload --config=lighthouserc-mobile.cjs || echo "Fail to Run Lighthouse CI!"
+
+      
+      - name: Format Lighthouse Score
+        id: format_lighthouse_score
+        uses: actions/github-script@v7
+        env:
+          working-directory: ${{ github.workspace }}
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const fs = require('fs');
+
+            const {
+              LH_MONITORING_PAGE_NAMES,
+              DEV_ORIGIN_URL,
+              LH_MONITORING_PAGE_ROUTES,
+              LH_MIN_SCORES,
+            } = require('./src/Constants/lighthouse.ts');
+
+            const desktopLightHouseResults = JSON.parse(fs.readFileSync('lhci_reports/desktop/manifest.json'));
+            const mobileLightHouseResults = JSON.parse(fs.readFileSync('lhci_reports/mobile/manifest.json'));
+
+            let comments = `### 💡 LightHouse Reports\n\n`;
+            comments += `#### 🟢 90 ~ 100    🟠 50 ~ 89    🔴 0 ~ 49 \n\n`;
+
+            const getFormattingScore = (res) => Math.round(res * 100);
+
+            const getScoreColor = (score) => (score >= LH_MIN_SCORES.GREEN ? '🟢' : score >= LH_MIN_SCORES.ORANGE ? '🟠' : '🔴');
+
+            const getMonitoringPageName = (url) => {
+              const route = url.replace(DEV_ORIGIN_URL, '');
+
+              for (let pageName of LH_MONITORING_PAGE_NAMES) {
+                if (route === LH_MONITORING_PAGE_ROUTES[pageName]) return pageName;
+              }
+            };
+
+            const getFormattingResultByPage = (result) => {
+              const { url, summary, jsonPath } = result;
+              const { audits } = JSON.parse(fs.readFileSync(jsonPath));
+
+              const { performance, accessibility, 'best-practices': bestPractices, seo } = summary;
+
+              const {
+                'first-contentful-paint': firstContentfulPaint,
+                'largest-contentful-paint': largestContentfulPaint,
+                'speed-index': speedIndex,
+                'total-blocking-time': totalBlockingTime,
+                'cumulative-layout-shift': cumulativeLayoutShift,
+              } = audits;
+
+              const formattingTable = [
+                `| Category | Score |`,
+                `| --- | --- |`,
+                `| ${getScoreColor(getFormattingScore(performance))} Performance | ${getFormattingScore(performance)} |`,
+                `| ${getScoreColor(getFormattingScore(accessibility))} Accessibility | ${getFormattingScore(accessibility)} |`,
+                `| ${getScoreColor(getFormattingScore(bestPractices))} Best practices | ${getFormattingScore(bestPractices)} |`,
+                `| ${getScoreColor(getFormattingScore(seo))} SEO | ${getFormattingScore(seo)} |`,
+                `| ${getScoreColor(getFormattingScore(firstContentfulPaint.score))} First Contentful Paint | ${firstContentfulPaint.displayValue} |`,
+                `| ${getScoreColor(getFormattingScore(largestContentfulPaint.score))} Largest Contentful Paint | ${largestContentfulPaint.displayValue} |`,
+                `| ${getScoreColor(getFormattingScore(speedIndex.score))} Speed Index | ${speedIndex.displayValue} |`,
+                `| ${getScoreColor(getFormattingScore(totalBlockingTime.score))} Total Blocking Time | ${totalBlockingTime.displayValue} |`,
+                `| ${getScoreColor(getFormattingScore(cumulativeLayoutShift.score))} Cumulative Layout Shift | ${cumulativeLayoutShift.displayValue} |`,
+                `\n`,
+              ].join('\n');
+
+              return `<details>\n<summary>${`📄 ${getMonitoringPageName(url)}\n`}</summary>\n\n${formattingTable}\n</details>\n\n`;
+            };
+
+            const getLightHouseFormattingResult = (results, type) => {
+              let comment = type === 'mobile' ? `#### 📱 Mobile\n` : `#### 🖥  Desktop\n`;
+              results.forEach((result) => (comment += getFormattingResultByPage(result)));
+
+              return comment + '\n';
+            };
+
+            comments += getLightHouseFormattingResult(desktopLightHouseResults, 'desktop');
+            comments += getLightHouseFormattingResult(mobileLightHouseResults, 'mobile');
+            
+            core.setOutput('comments', comments)
+
+      - name: Comment PR
+        id: add_pr_comment
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const { Octokit } = require('@octokit/rest');
+            const octokit = new Octokit({ auth: `${{ secrets.GITHUB_TOKEN }}` });
+
+            const { payload, repo } = context
+
+            const newComment = `${{ steps.format_lighthouse_score.outputs.comments }}`
+
+            const { data: prevComments } = await octokit.rest.issues.listComments({
+              owner: repo.owner,
+              repo: repo.repo,
+              issue_number : payload.pull_request.number,
+            })
+
+            const prevReportComment = prevComments.find(comment => comment.body.includes(`### 💡 LightHouse Reports\n\n`));
+
+            if (prevReportComment) {
+                await octokit.rest.issues.updateComment({
+                  owner: repo.owner,
+                  repo: repo.repo,
+                  comment_id: prevReportComment.id,
+                  body: newComment,
+              });
+            } else {
+                await octokit.rest.issues.createComment({
+                owner: repo.owner,
+                repo: repo.repo,
+                issue_number: payload.pull_request.number,
+                body: newComment,
+              });
+            }

README.md

@@ -1,5 +1,10 @@
 <div align="center">
- <img src="https://github.com/Ludo-SMP/ludo-frontend/assets/62270427/7a2e3718-072d-4cad-83de-eb7f030222ad"/>
+  <picture>
+    <source media="(prefers-color-scheme: dark)" width="300" srcset="https://github.com/user-attachments/assets/04abc2c4-c50b-498c-b2ee-ced751ade965">
+    <source media="(prefers-color-scheme: light)" width="300" srcset="https://github.com/user-attachments/assets/479c81f7-358e-4e33-ad67-66fba7ed9452">
+    <img alt="IMAGE" src="https://github.com/user-attachments/assets/479c81f7-358e-4e33-ad67-66fba7ed9452">
+  </picture>
+
   <h1>나도 배운걸 활용하고 싶다</h1>
   배운걸 활용하고 싶은데 고민이신가요?
   <br/>

lighthouserc-desktop.cjs

@@ -0,0 +1,26 @@
+const {
+  LH_MONITORING_PAGE_NAMES,
+  DEV_ORIGIN_URL,
+  LH_MONITORING_PAGE_ROUTES,
+} = require('./src/Constants/lighthouse.ts');
+
+const urls = LH_MONITORING_PAGE_NAMES.map((pageName) => `${DEV_ORIGIN_URL}${LH_MONITORING_PAGE_ROUTES[pageName]}`);
+
+module.exports = {
+  ci: {
+    collect: {
+      startServerCommand: 'yarn start:mac',
+      url: urls,
+      numberOfRuns: 1,
+      settings: {
+        chromeFlags: '--ignore-certificate-errors',
+        preset: 'desktop',
+      },
+    },
+    upload: {
+      target: 'filesystem',
+      outputDir: './lhci_reports/desktop',
+      reportFilenamePattern: '%%PATHNAME%%-%%DATETIME%%-desktop-report.%%EXTENSION%%',
+    },
+  },
+};

lighthouserc-mobile.cjs

@@ -0,0 +1,25 @@
+const {
+  LH_MONITORING_PAGE_NAMES,
+  DEV_ORIGIN_URL,
+  LH_MONITORING_PAGE_ROUTES,
+} = require('./src/Constants/lighthouse.ts');
+
+const urls = LH_MONITORING_PAGE_NAMES.map((pageName) => `${DEV_ORIGIN_URL}${LH_MONITORING_PAGE_ROUTES[pageName]}`);
+
+module.exports = {
+  ci: {
+    collect: {
+      startServerCommand: 'yarn start:mac',
+      url: urls,
+      numberOfRuns: 1,
+      settings: {
+        chromeFlags: '--ignore-certificate-errors',
+      },
+    },
+    upload: {
+      target: 'filesystem',
+      outputDir: './lhci_reports/mobile',
+      reportFilenamePattern: '%%PATHNAME%%-%%DATETIME%%-mobile-report.%%EXTENSION%%',
+    },
+  },
+};

src/Components/DropdownFilter/DropdownItem/index.tsx

@@ -10,7 +10,11 @@ export interface DropdownItemProps {
 const DropdownItem = ({ item, filterOption, handleClick }: DropdownItemProps) => {
   return (
     <DropdownItemWrapper onClick={handleClick}>
-      {filterOption === 'PROGRESS_METHOD' && item.id !== 0 ? (item.id === 1 ? '온라인' : '오프라인') : item.name}
+      {filterOption === 'PROGRESS_METHOD' && Number(item.id) !== 0
+        ? Number(item.id) === 1
+          ? '온라인'
+          : '오프라인'
+        : item.name}
     </DropdownItemWrapper>
   );
 };

src/Components/DropdownFilter/index.tsx

@@ -25,7 +25,11 @@ const DropdownFilter = ({ filterName, items, filterOption }: DropdownFilterProps
 
   const handleSelectedItem = (item: { id: number; name: string }, filterOption: FilterOption) => {
     setContent(
-      filterOption === 'PROGRESS_METHOD' && item.id !== 0 ? (item.id === 1 ? '온라인' : '오프라인') : item.name,
+      filterOption === 'PROGRESS_METHOD' && Number(item.id) !== 0
+        ? Number(item.id) === 1
+          ? '온라인'
+          : '오프라인'
+        : item.name,
     );
     setFilterOptions(filterOption, item.id !== 0 ? item.id : 0);
     setIsOpen(!isOpen);

src/Constants/lighthouse.ts

@@ -0,0 +1,26 @@
+const TEST_RECRUITMENT_ID = 70;
+const LH_GREEN_MIN_SCORE = 90;
+const LH_ORANGE_MIN_SCORE = 50;
+
+const PAGE_ROUTES = {
+  MAIN: '/',
+  AUTH: {
+    LOGIN: '/login',
+  },
+  RECRUITMENT: {
+    RECRUITMENTS: '/studies',
+    DETAIL: `/studies/${TEST_RECRUITMENT_ID}/recruitment`,
+  },
+};
+
+module.exports = {
+  DEV_ORIGIN_URL: `https://local.ludo.study:3000`,
+  LH_MONITORING_PAGE_NAMES: ['메인', '로그인', '모집공고 모아보기', '모집공고 상세'],
+  LH_MIN_SCORES: { GREEN: LH_GREEN_MIN_SCORE, ORANGE: LH_ORANGE_MIN_SCORE },
+  LH_MONITORING_PAGE_ROUTES: {
+    메인: PAGE_ROUTES.MAIN,
+    로그인: PAGE_ROUTES.AUTH.LOGIN,
+    '모집공고 모아보기': PAGE_ROUTES.RECRUITMENT.RECRUITMENTS,
+    '모집공고 상세': PAGE_ROUTES.RECRUITMENT.DETAIL,
+  },
+};