구글 태그 및 채널톡 버튼 추가, 코드리뷰 마감시간 알림 슬랙봇 구현

.github/workflows/frontend-pr-comment.yml

@@ -0,0 +1,55 @@
+name: Pull request comment
+on:
+  issue_comment:
+    types: [created, edited, deleted]
+  # Note: This event will only trigger a workflow run if the workflow file is on the default branch.
+
+jobs:
+  pull_request_comment:
+    # This job only runs for pull request comments
+    if: ${{ github.event.issue.pull_request }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get PR Title
+        id: get-pr-title
+        run: |
+          PR_NUMBER="${{ github.event.issue.number }}"
+          PR_TITLE=$(curl -s -H "Authorization: Bearer ${{ secrets.GITHUB_TOKEN }}" \
+                     "https://api.github.com/repos/${{ github.repository }}/pulls/${PR_NUMBER}" | \
+                     jq -r '.title')
+          echo "::set-output name=pr_title::$PR_TITLE"
+
+      - name: Detect PR Comment Trigger Keyword(review)
+        if: contains(github.event.comment.body, 'review-complete') # check the comment if it contains the keywords        id: slack
+        id: review
+        run: |
+          PR_LINK="${{ github.event.comment.html_url }}" # PR 링크
+          MESSAGE="PR Link: $PR_LINK\n리뷰 완료했습니다👍"
+          echo "::set-output name=message::$MESSAGE" # Slack 메시지 생성하여 출력
+
+      - name: Detect PR Comment Trigger Keyword(review-request)
+        if: contains(github.event.comment.body, 'review-request') # check the comment if it contains the keywords        id: slack
+        id: review-request
+        run: |
+          PR_TITLE="${{ steps.get-pr-title.outputs.pr_title }}"
+          PR_LINK="${{ github.event.comment.html_url }}" # PR 링크
+          MESSAGE="PR Title: $PR_TITLE\nPR Link: $PR_LINK\n리뷰 반영 최종 완료!✅ 확인 부탁드립니다😃"
+          echo "::set-output name=message::$MESSAGE" # Slack 메시지 생성하여 출력
+
+      - name: Send Slack notification
+        if: steps.review.outputs.message != ''
+        uses: slackapi/[email protected]
+        with:
+          channel-id: ${{ secrets.SLACK_CHANNEL_ID}} # Slack 채널 ID
+          payload: '{"text": "${{ steps.review.outputs.message }}"}'
+        env:
+          SLACK_BOT_TOKEN: ${{ secrets.SLACK_TOKEN }} # Slack 토큰
+
+      - name: Send Slack notification
+        if: steps.review-request.outputs.message != '' # Only if the message is set
+        uses: slackapi/[email protected]
+        with:
+          channel-id: ${{ secrets.SLACK_CHANNEL_ID}} # Slack 채널 ID
+          payload: '{"text": "${{ steps.review-request.outputs.message }}"}'
+        env:
+          SLACK_BOT_TOKEN: ${{ secrets.SLACK_TOKEN }} # Slack 토큰

.github/workflows/frontend-pr-deadline-slack-bot.yml

@@ -0,0 +1,55 @@
+name: Notify Pull Request Deadline
+
+on:
+  pull_request:
+    types:
+      - opened
+    branches: ['dev']
+    paths:
+      - 'frontend/**'
+      - '.github/**'
+
+jobs:
+  pull_request_open:
+    runs-on: ubuntu-latest
+    name: New pr to repo
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Get PR details
+        id: pr
+        run: |
+          PR_JSON=$(curl -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" "${{ github.event.pull_request.url }}")
+          echo "::set-output name=pr_json::$PR_JSON"
+
+      - name: Set environment variable
+        run: echo "PR_CREATED_AT_UTC=${{ github.event.pull_request.created_at }}" >> $GITHUB_ENV
+      - name: Convert UTC to KST
+        run: |
+          UTC_TIME=$PR_CREATED_AT_UTC
+          KST_TIME=$(date -u -d "$UTC_TIME 9 hour" "+%Y-%m-%dT%H:%M:%SZ")
+          echo "PR_CREATED_AT_KST=$KST_TIME" >> $GITHUB_ENV
+
+      - name: Calculate deadline
+        id: deadline
+        run: node .github/workflows/scripts/calculateDeadline.js
+        env:
+          PR_CREATED_AT_KST: ${{ env.PR_CREATED_AT_KST }}
+
+      - name: Send GitHub trigger payload to Slack Workflow Builder
+        id: slack
+        run: |
+          PR_TITLE="${{ github.event.pull_request.title }}" # PR 제목
+          PR_LINK="${{ github.event.pull_request.html_url }}" # PR 링크
+          DEADLINE="${{ steps.deadline.outputs.DEADLINE }}" # 저장한 마감 시간
+          MESSAGE="PR Title: $PR_TITLE\nPR Link: $PR_LINK\n마감 시간: $DEADLINE"
+          echo "::set-output name=message::$MESSAGE" # Slack 메시지 생성하여 출력
+
+      - name: Send Slack notification
+        uses: slackapi/[email protected]
+        with:
+          channel-id: ${{ secrets.SLACK_CHANNEL_ID}} # Slack 채널 ID
+          payload: '{"text": "${{ steps.slack.outputs.message }}"}'
+        env:
+          SLACK_BOT_TOKEN: ${{ secrets.SLACK_TOKEN }} # Slack 토큰

.github/workflows/scripts/calculateDeadline.js

@@ -0,0 +1,32 @@
+const prCreatedAtKST = process.env.PR_CREATED_AT_KST;
+const prCreatedAt = new Date(String(prCreatedAtKST));
+
+const prCreatedMinute = prCreatedAt.getUTCMinutes();
+const prCreatedHour = prCreatedAt.getUTCHours();
+const prCreatedDate = prCreatedAt.getUTCDate();
+const prCreatedMonth = prCreatedAt.getUTCMonth() + 1; // getUTCMonth()는 0부터 시작하므로 1을 더해줍니다.
+
+let nextDay = new Date(prCreatedAt);
+nextDay.setUTCDate(prCreatedDate + 1); // 다음 날의 날짜를 설정합니다.
+
+const nextDayHour = nextDay.getUTCHours();
+const nextDayDate = nextDay.getUTCDate();
+const nextDayMonth = nextDay.getUTCMonth() + 1;
+console.log(nextDayHour, nextDayDate, nextDayMonth);
+
+if (prCreatedHour < 10 && prCreatedHour > 0) {
+  deadline = `오늘(${prCreatedMonth}월 ${prCreatedDate}일) 20시 00분`;
+} else if (prCreatedHour === 22 || prCreatedHour === 23) {
+  deadline = `내일(${nextDayMonth}월 ${nextDayDate}일) 20시 00분`;
+} else if (prCreatedHour + 10 >= 22) {
+  deadline = `내일(${nextDayMonth}월 ${nextDayDate}일) ${
+    prCreatedHour - 2
+  }시 ${prCreatedMinute}분`;
+} else {
+  // 근무시간에 생성된
+  deadline = `오늘(${prCreatedMonth}월 ${prCreatedDate}일) ${
+    prCreatedHour + 10
+  }시 ${prCreatedMinute}분`;
+}
+
+console.log(`::set-output name=DEADLINE::${deadline}`);

frontend/public/index.html

@@ -48,4 +48,54 @@
   <body>
     <div id="root"></div>
   </body>
+  <!-- Google Tag Manager (noscript) -->
+  <noscript
+    ><iframe
+      src="https://www.googletagmanager.com/ns.html?id=GTM-N7NTHNF7"
+      height="0"
+      width="0"
+      style="display: none; visibility: hidden"
+    ></iframe
+  ></noscript>
+  <!-- Channel Talk -->
+  <script>
+    (function () {
+      var w = window;
+      if (w.ChannelIO) {
+        return w.console.error('ChannelIO script included twice.');
+      }
+      var ch = function () {
+        ch.c(arguments);
+      };
+      ch.q = [];
+      ch.c = function (args) {
+        ch.q.push(args);
+      };
+      w.ChannelIO = ch;
+      function l() {
+        if (w.ChannelIOInitialized) {
+          return;
+        }
+        w.ChannelIOInitialized = true;
+        var s = document.createElement('script');
+        s.type = 'text/javascript';
+        s.async = true;
+        s.src = 'https://cdn.channel.io/plugin/ch-plugin-web.js';
+        var x = document.getElementsByTagName('script')[0];
+        if (x.parentNode) {
+          x.parentNode.insertBefore(s, x);
+        }
+      }
+      if (document.readyState === 'complete') {
+        l();
+      } else {
+        w.addEventListener('DOMContentLoaded', l);
+        w.addEventListener('load', l);
+      }
+    })();
+
+    ChannelIO('boot', {
+      pluginKey: '1d876858-22cd-444b-8fcd-33487aed8247',
+    });
+  </script>
 </html>