diff --git a/.github/workflows/frontend-ci.yml b/.github/workflows/frontend-ci.yml
new file mode 100644
index 000000000..baa06c728
--- /dev/null
+++ b/.github/workflows/frontend-ci.yml
@@ -0,0 +1,69 @@
+name: Frontend CI Test
+
+on:
+  pull_request:
+    branches: ["develop"]
+
+permissions:
+  checks: write
+  pull-requests: write
+
+jobs:
+  detect-changes:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: read
+    outputs:
+      backend: ${{ steps.filter.outputs.backend }}
+      frontend: ${{ steps.filter.outputs.frontend }}
+    steps:
+      - uses: dorny/paths-filter@v3
+        id: filter
+        with:
+          filters: |
+            backend:
+              - 'backend/**'
+            frontend:
+              - 'frontend/**'
+          list-files: "csv"
+
+  fe-test:
+    needs: detect-changes
+    if: ${{ needs.detect-changes.outputs.frontend == 'true' }}
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        shell: bash
+        working-directory: ./frontend
+
+    steps:
+      - name: 모모 레파지토리의 코드를 가져와요 :)
+        uses: actions/checkout@v4
+
+      - name: 노드 버젼을 설정해요 :)
+        uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+
+      - name: 이전 의존성을 저장해둔게 있나~? 확인해요 :)
+        id: cache
+        uses: actions/cache@v4
+        with:
+          path: "frontend/node_modules"
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+            ${{ runner.os }}
+
+      - name: package-lock.json을 활용해서 의존성을 깨끗하게 설치해요 :)
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: RTL을 실행해요 :)
+        run: npm run test -- --passWithNoTests
+
+      - name: 테스트 결과를 PR에 코멘트로 등록해요 :)
+        uses: EnricoMi/publish-unit-test-result-action@v2
+        if: always()
+        with:
+          files: frontend/test-results/results.xml
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3f06fd085..eeb87ea1c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -51,6 +51,7 @@
         "fork-ts-checker-webpack-plugin": "9.0.2",
         "html-webpack-plugin": "5.6.0",
         "jest-environment-jsdom": "29.7.0",
+        "jest-junit": "^16.0.0",
         "msw": "2.3.1",
         "postcss": "8.4.39",
         "postcss-styled-syntax": "0.6.4",
@@ -14195,6 +14196,21 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/jest-junit": {
+      "version": "16.0.0",
+      "resolved": "https://registry.npmjs.org/jest-junit/-/jest-junit-16.0.0.tgz",
+      "integrity": "sha512-A94mmw6NfJab4Fg/BlvVOUXzXgF0XIH6EmTgJ5NDPp4xoKq0Kr7sErb+4Xs9nZvu58pJojz5RFGpqnZYJTrRfQ==",
+      "dev": true,
+      "dependencies": {
+        "mkdirp": "^1.0.4",
+        "strip-ansi": "^6.0.1",
+        "uuid": "^8.3.2",
+        "xml": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=10.12.0"
+      }
+    },
     "node_modules/jest-leak-detector": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-29.7.0.tgz",
@@ -21782,6 +21798,12 @@
         }
       }
     },
+    "node_modules/xml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
+      "integrity": "sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==",
+      "dev": true
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index cf3f0d55b..9966c6911 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -68,6 +68,7 @@
     "fork-ts-checker-webpack-plugin": "9.0.2",
     "html-webpack-plugin": "5.6.0",
     "jest-environment-jsdom": "29.7.0",
+    "jest-junit": "^16.0.0",
     "msw": "2.3.1",
     "postcss": "8.4.39",
     "postcss-styled-syntax": "0.6.4",