SP-724 마이페이지에서 작성된 모집공고 정보를 확인하는 모달 구현 #78
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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, | |
| }); | |
| } |