Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| Cohort / File(s) | Summary |
|---|---|
CI & E2E infra .github/workflows/frontend-ci.yml, frontend/playwright.config.ts, frontend/jest.config.js, frontend/tsconfig.json |
GitHub Actions 'Frontend CI' 워크플로우 추가(lint/test/e2e/build). Playwright 구성, Jest에서 e2e 제외, tsconfig에 Playwright 파일 포함. |
E2E tests & fixtures frontend/e2e/apply-flow.spec.ts, frontend/e2e/fixtures/mock-data.ts |
클럽 조회→지원 플로우를 검증하는 Playwright E2E 테스트와 API 응답 모킹 데이터 추가. |
Package scripts & deps frontend/package.json |
@playwright/test 추가 및 test:e2e, test:e2e:ui, test:e2e:headed, test:e2e:report 스크립트 추가. |
styled-components: transient props frontend/src/components/.../Header.styles.ts, frontend/src/components/.../Header.tsx, frontend/src/components/.../CustomTextArea/*.ts*, frontend/src/components/.../InputField/*, frontend/src/pages/.../Banner/*, frontend/src/pages/.../Popup/*, frontend/src/pages/.../QuestionContainer/* |
여러 컴포넌트에서 styled-components prop 이름을 transient 표기(hasError → $hasError, isOpen → $isOpen, isActive → $isActive, 등)로 일괄 변경. |
Dev config & ignores .gitignore, frontend/.gitignore, frontend/src/index.tsx |
.claude/ 무시 추가, Playwright 산출물 디렉토리 무시 추가, MSW 실행을 VITE_DISABLE_MSW 환경변수로 제어하도록 변경. |
Sequence Diagram(s)
sequenceDiagram
participant GH as GitHub Actions
participant Repo as Repository (PR / Push)
participant Web as Frontend dev server (npm run dev)
participant Playwright as Playwright runner
participant Art as Artifact store
Repo->>GH: Push / Pull Request (paths: frontend/**)
GH->>GH: Job matrix (lint, test, e2e, build)
GH->>Web: start webServer (npm run dev)
alt reuseExistingServer=false or CI
Web-->>GH: server ready (http://localhost:3000)
end
GH->>Playwright: run e2e across projects (chromium, firefox, webkit, mobile)
Playwright->>Web: HTTP requests (baseURL)
Playwright->>GH: upload traces/screenshots/report on success/failure
GH->>Art: store coverage & playwright artifacts
Estimated code review effort
🎯 4 (Complex) | ⏱️ ~40 minutes
Possibly related issues
- [feature] MOA-590 메인페이지 지원하기 e2e 테스트 #1130: 메인페이지 지원하기 E2E 테스트 추가 요구 — 본 PR의 E2E 테스트(apply-flow.spec.ts)가 해당 목적과 직접적으로 일치합니다.
- [feature] MOA-566 메인페이지 e2e테스트를 추가한다 #1102: 프론트엔드 E2E 인프라 및 CI 추가 요청 — Playwright 설정, 스크립트, CI 워크플로우가 이 이슈 목표와 관련됩니다.
Possibly related PRs
- [chore] 빌드 툴 Webpack to Vite 전환 #844: frontend/src/index.tsx의 MSW 실행 조건 변경 관련으로 동일 파일의 환경 변수 제어 변경과 연관됩니다.
- [release] FE v1.1.7 #918: styled-components의 transient prop 적용(헤더 관련)과 동일 영역(Header.styles.ts / Header.tsx) 변경이 중복됩니다.
- [feature] 동아리 지원서 타입 설계 및 Mock API 개발 #418: MSW/dev mock 시작 방식 및 테스트용 mock 관련 변경 사항과 연관됩니다.
Suggested reviewers
- lepitaaar
- suhyun113
- oesnuj
🚥 Pre-merge checks | ✅ 3 | ❌ 2
❌ Failed checks (2 warnings)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Out of Scope Changes check | styled-components 트랜시언트 props 변환 및 MSW 환경 변수 추가는 테스트 인프라 개선과 무관한 범위 외 변경입니다. | styled-components 트랜시언트 props 변경과 MSW 설정 변경을 별도 PR로 분리하고, 현재 PR은 e2e 테스트 추가에만 집중하시기 바랍니다. | |
| Docstring Coverage | Docstring coverage is 75.00% which is insufficient. The required threshold is 80.00%. | Write docstrings for the functions missing them to satisfy the coverage threshold. |
✅ Passed checks (3 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | PR 제목은 e2e 테스트 추가라는 변경의 핵심 내용을 명확하게 반영하고 있습니다. |
| Linked Issues check | ✅ Passed | 변경 사항이 MOA-566의 메인페이지 e2e 테스트 추가 목표를 충족하며, Playwright 설정, e2e 테스트 파일, CI/CD 워크플로우가 포함되어 있습니다. |
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing touches
- 📝 Generate docstrings
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Post copyable unit tests in a comment
- Commit unit tests in branch
feature/#1102-main-e2e-test-MOA-566
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@frontend/e2e/main-page.spec.ts`:
- Around line 281-299: The test "팝업이 있으면 닫기 가능" currently ends with a no-op
assertion and never verifies the popup actually closed; update the logic that
uses popup and isPopupVisible so that when isPopupVisible is true you press
'Escape' (page.keyboard.press('Escape')) then await a real assertion that the
popup is hidden (use await expect(popup).toBeHidden() or equivalent) with an
appropriate timeout; keep the current flow for when no popup is present but
remove the final expect(true).toBe(true) and replace it with the conditional
hidden assertion referencing the popup locator and isPopupVisible variable.
- Around line 55-83: The tests are using a non-existent Playwright fixture
isMobile (seen in tests like the "네비게이션 ..." cases and the "모바일 메뉴 버튼 토글 동작")
which causes "Unknown parameter: isMobile"; either add a custom fixture via
test.extend that derives isMobile from the current project config (so
openMobileMenuIfNeeded can still accept isMobile), or remove the parameter and
read the value from testInfo inside each test (e.g., access
testInfo.project.use?.isMobile) and pass that boolean into
openMobileMenuIfNeeded; update all tests referencing isMobile and the helper
openMobileMenuIfNeeded accordingly.
🧹 Nitpick comments (3)
.github/workflows/frontend-ci.yml (1)
3-11: 워크플로 변경도 트리거되도록 paths에 추가 고려현재
paths가frontend/**만 포함되어, 워크플로 파일 자체 변경만 있는 PR에서는 실행되지 않을 수 있습니다. 필요 시 아래처럼 포함을 고려해 주세요.♻️ 제안 변경
pull_request: branches: [main, develop-fe] paths: - "frontend/**" + - ".github/workflows/frontend-ci.yml" push: branches: [main, develop-fe] paths: - "frontend/**" + - ".github/workflows/frontend-ci.yml"frontend/package.json (1)
19-23: Playwright 스크립트 및 의존성 구성이 깔끔합니다.
@playwright/test ^1.58.0은 최신 버전이며, e2e 실행 및 리포트 스크립트도 적절하게 구성되었습니다. 다만 Playwright 1.58.0은 Node.js 20.x 이상을 요구하므로, 프로젝트에서 명시적인 Node 버전 요구사항을package.json의engines필드에 추가하는 것을 권장합니다.frontend/e2e/main-page.spec.ts (1)
132-139: 배너 슬라이드/카테고리 필터 테스트에 명시적 검증 추가 필요
waitForTimeout만 사용하는 테스트는 회귀 검출력이 낮습니다. Playwright 공식 문서에서도waitForTimeout은 디버깅 목적으로만 사용하도록 권장하며, 검증 없는 타임아웃만으로는 테스트의 신뢰성이 떨어집니다.배너 슬라이드 활성 상태 변경, ARIA 속성 변경 등을
expect()로 검증하거나, 카테고리 필터 적용 후 결과 텍스트나 카운트 변화를 확인하는 명시적 어설션을 추가하는 것을 권장합니다.await expect(locator).toBeVisible()/toHaveText()등 웹 우선 어설션은 자동으로 대기하며 재시도하므로 더 안정적입니다.
- Playwright 워커 1개 → 2개로 증가하여 병렬 실행 - Playwright 브라우저 캐싱 추가로 반복 다운로드 방지 - CI용 리포터를 'github'로 변경하여 출력 속도 개선 - 재시도 횟수 2회 → 1회로 감소 - 아티팩트 업로드를 실패 시에만 수행
- 커스텀 DOM 접근 오류 제거
- e2e 환경에서 VITE_DISABLE_MSW로 MSW 실행을 막아 Playwright mock과 충돌 방지
- webServer command에 VITE_DISABLE_MSW=true 추가
- 클럽/지원서 폼/옵션 응답을 테스트용으로 정의
- 메인→상세→지원서 작성→제출 시나리오 자동화
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@frontend/src/pages/MainPage/components/Popup/Popup.tsx`:
- Around line 128-135: The ModalContainer component declares and receives the
transient prop $isOpen but doesn’t use it in its styles; remove the $isOpen prop
from ModalContainer’s styled definition and from where it’s passed in the JSX
(leave Overlay.$isOpen intact), i.e., update the styled export ModalContainer to
no longer be typed as <{ $isOpen: boolean }>, remove any $isOpen references in
Popup.tsx (the <Styled.ModalContainer ... $isOpen={isOpen} /> prop), and run a
quick search for other ModalContainer usages to delete any remaining $isOpen
mentions so only Overlay controls the transient open state.
🧹 Nitpick comments (3)
frontend/e2e/apply-flow.spec.ts (3)
11-28: 중복 코드: 공통 헬퍼 함수 추출을 고려해 주세요.주석에서 언급한 대로
main-page.spec.ts와 동일한 함수입니다. 테스트 파일이 늘어날 경우 유지보수를 위해 공통 유틸리티 파일로 추출하는 것을 권장합니다.또한,
waitForTimeout(300)은 Playwright에서 권장하지 않는 패턴입니다. 가능하면waitForSelector또는 조건 기반 대기를 사용하세요.♻️ 공통 유틸리티로 추출 제안
// frontend/e2e/utils/popup-helper.ts import type { Page } from '@playwright/test'; export async function closePopupIfExists(page: Page) { const popup = page.locator('[aria-modal="true"]'); if (await popup.isVisible().catch(() => false)) { await page.keyboard.press('Escape'); await popup.waitFor({ state: 'hidden', timeout: 1000 }).catch(() => {}); if (await popup.isVisible().catch(() => false)) { const closeButton = popup.locator('button').first(); await closeButton.click({ force: true }).catch(() => {}); await popup.waitFor({ state: 'hidden', timeout: 1000 }).catch(() => {}); } } }
147-149: Dialog 핸들러 등록 시점을 테스트 시작 부분으로 이동하는 것을 권장합니다.현재 핸들러는 제출 버튼 클릭 직전에 등록되어 있습니다. 예상치 못한 dialog가 테스트 초반에 발생할 경우 테스트가 중단될 수 있습니다.
♻️ 제안: 테스트 시작 시 핸들러 등록
test('메인페이지 → 동아리 카드 클릭 → 상세 → 지원하기 → 폼 작성 → 제출', async ({ page, }) => { + // Dialog 핸들러를 테스트 시작 시 등록 + page.on('dialog', async (dialog) => { + await dialog.accept(); + }); + // 브라우저 콘솔 에러 로깅 page.on('console', (msg) => { // ... }); - - // Step 6 부분에서 제거 - page.on('dialog', async (dialog) => { - await dialog.accept(); - });
134-141: Placeholder 기반 선택자 사용에 대한 참고사항.
getByPlaceholder는 placeholder 텍스트가 변경되면 테스트가 깨질 수 있습니다. 컴포넌트에data-testid속성을 추가하면 더 안정적인 테스트가 가능합니다. 현재 구현도 동작하지만, 향후 개선 시 고려해 주세요.
| <Styled.Overlay | ||
| isOpen={isOpen} | ||
| $isOpen={isOpen} | ||
| onClick={handleBackdropClick} | ||
| aria-modal='true' | ||
| > | ||
| <Styled.ModalContainer | ||
| isOpen={isOpen} | ||
| $isOpen={isOpen} | ||
| onClick={(e: MouseEvent<HTMLDivElement>) => e.stopPropagation()} |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find the Popup.styles.ts file
find . -name "Popup.styles.ts" -type fRepository: Moadong/moadong
Length of output: 121
🏁 Script executed:
#!/bin/bash
# Check the content of Popup.styles.ts to verify $isOpen prop definitions
cat -n frontend/src/pages/MainPage/components/Popup/Popup.styles.ts | head -200Repository: Moadong/moadong
Length of output: 2429
🏁 Script executed:
#!/bin/bash
# Verify the entire Popup.tsx file to confirm the props usage
cat -n frontend/src/pages/MainPage/components/Popup/Popup.tsx | sed -n '120,140p'Repository: Moadong/moadong
Length of output: 767
transient props 구현이 올바릅니다. 단, ModalContainer의 $isOpen 프로퍼티 제거를 검토하세요.
Overlay에서 $isOpen은 배경색 불투명도 제어에 사용되고 있으나, ModalContainer에서는 정의만 되어 있고 스타일링에 사용되지 않습니다. ModalContainer에서 $isOpen prop을 제거하면 더 깔끔할 것 같습니다.
현재 코드 (Popup.styles.ts)
export const ModalContainer = styled.div<{ $isOpen: boolean }>`
position: relative;
z-index: ${Z_INDEX.modal};
...
`;
🤖 Prompt for AI Agents
In `@frontend/src/pages/MainPage/components/Popup/Popup.tsx` around lines 128 -
135, The ModalContainer component declares and receives the transient prop
$isOpen but doesn’t use it in its styles; remove the $isOpen prop from
ModalContainer’s styled definition and from where it’s passed in the JSX (leave
Overlay.$isOpen intact), i.e., update the styled export ModalContainer to no
longer be typed as <{ $isOpen: boolean }>, remove any $isOpen references in
Popup.tsx (the <Styled.ModalContainer ... $isOpen={isOpen} /> prop), and run a
quick search for other ModalContainer usages to delete any remaining $isOpen
mentions so only Overlay controls the transient open state.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@frontend/package.json`:
- Around line 19-23: The package.json has a JSON syntax error: a missing comma
after the "test:e2e:report" script entry causing parsing failures; to fix, add a
comma after the "test:e2e:report" value so the "test:e2e:report" and "typecheck"
script entries are properly separated (check the "scripts" object containing
"test:e2e", "test:e2e:ui", "test:e2e:headed", "test:e2e:report", and
"typecheck").
| "test:e2e": "playwright test", | ||
| "test:e2e:ui": "playwright test --ui", | ||
| "test:e2e:headed": "playwright test --headed", | ||
| "test:e2e:report": "playwright show-report" | ||
| "typecheck": "tsc --noEmit" |
There was a problem hiding this comment.
JSON 구문 오류: 쉼표 누락
Line 22의 "test:e2e:report" 항목 끝에 쉼표가 누락되어 있습니다. 이로 인해 package.json 파싱이 실패하여 모든 npm 명령어가 동작하지 않습니다.
🐛 수정 제안
"test:e2e": "playwright test",
"test:e2e:ui": "playwright test --ui",
"test:e2e:headed": "playwright test --headed",
- "test:e2e:report": "playwright show-report"
+ "test:e2e:report": "playwright show-report",
"typecheck": "tsc --noEmit"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "test:e2e": "playwright test", | |
| "test:e2e:ui": "playwright test --ui", | |
| "test:e2e:headed": "playwright test --headed", | |
| "test:e2e:report": "playwright show-report" | |
| "typecheck": "tsc --noEmit" | |
| "test:e2e": "playwright test", | |
| "test:e2e:ui": "playwright test --ui", | |
| "test:e2e:headed": "playwright test --headed", | |
| "test:e2e:report": "playwright show-report", | |
| "typecheck": "tsc --noEmit" |
🧰 Tools
🪛 Biome (2.3.13)
[error] 23-23: expected , but instead found "typecheck"
Remove "typecheck"
(parse)
🤖 Prompt for AI Agents
In `@frontend/package.json` around lines 19 - 23, The package.json has a JSON
syntax error: a missing comma after the "test:e2e:report" script entry causing
parsing failures; to fix, add a comma after the "test:e2e:report" value so the
"test:e2e:report" and "typecheck" script entries are properly separated (check
the "scripts" object containing "test:e2e", "test:e2e:ui", "test:e2e:headed",
"test:e2e:report", and "typecheck").
1 participant
#️⃣연관된 이슈
📝작업 내용
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit
새로운 기능
Chores
리팩터
✏️ Tip: You can customize this high-level summary in your review settings.