[feature] 프론트엔드 CI 워크플로우 추가

[oesnuj]

#️⃣연관된 이슈

#1155

📝작업 내용

main, develop-fe 브랜치 대상 PR 시 프론트엔드 CI가 실행되도록 GitHub Actions 워크플로우를 추가했습니다.

• Prettier check → ESLint → Build 순서로 검증합니다.

• frontend/ 경로 변경 시에만 트리거됩니다.

• CI Prettier check 실패에 따라 전역 포맷을 적용했습니다.

• @ianvs/prettier-plugin-sort-imports v4.x에서 deprecated된 importOrderSortSpecifiers 옵션을 제거했습니다.

MSW가 생성·관리하는 mockServiceWorker.js를 .prettierignore에 추가하여 prettier 검사에서 제외했습니다.

• 해당 파일은 MSW가 관리하므로 직접 포맷을 수정하면 안 된다고 한다

🫡 참고사항

• 가볍고 빠른 검사(Prettier → Lint)를 먼저 실행하여, 실패 시 Build까지 가지 않고 빠르게 피드백을 받을 수 있습니다.
• npm run build에 tsc --noEmit이 포함되어 있어 타입 체크도 함께 수행됩니다.

Summary by CodeRabbit

릴리스 노트

• Chores
  • 프론트엔드 CI 파이프라인이 추가되어 포매팅·린트·빌드 검사가 자동 실행됩니다.
• Style / Refactor
  • 여러 컴포넌트 및 유틸리티의 코드 포맷·임포트 정리가 적용되었습니다(동작 변화 없음).
• Chores
  • Prettier 설정에 파일 무시 규칙이 추가되고(import specifier 정렬 옵션 제거) 포맷 동작이 일부 조정되었습니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
moadong	Ready	Preview, Comment	Feb 8, 2026 5:05am

[coderabbitai]

Warning

.coderabbit.yaml has a parsing error

The CodeRabbit configuration file in this repository has a parsing error and default settings were used instead. Please fix the error(s) in the configuration file. You can initialize chat with CodeRabbit to get help with the configuration file.

💥 Parsing errors (1)

Validation error: Invalid regex pattern for base branch. Received: "**" at "reviews.auto_review.base_branches[0]"

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Walkthrough

프론트엔드 전용 CI 워크플로우 파일을 추가하고, Prettier 설정 및 여러 프론트엔드 파일에서 포매팅/경미한 리팩터링과 .prettierignore 추가를 포함한 여러 비기능적 변경을 적용합니다.

Changes

Cohort / File(s)	Summary
CI 워크플로우 추가 /.github/workflows/frontend-ci.yml	프론트엔드 디렉토리 변경 시 PR에서 트리거되는 Frontend CI 파이프라인 추가: checkout → Node.js(v20) 셋업( npm 캐시 ) → npm ci → Prettier 체크 → lint → build.
Prettier 설정 frontend/.prettierignore, frontend/.prettierrc	public/mockServiceWorker.js를 Prettier 무시 대상에 추가하고, importOrderSortSpecifiers 옵션 제거(수정된 포맷팅 규칙).
UI 컴포넌트 및 페이지 포맷팅/리팩토링 frontend/src/pages/.../ClubDetailTopBar.tsx, .../ClubDetailTopBar.styles.ts, .../LegacyClubDetailPage.tsx, .../ClubUnionPage.tsx, .../MainPage/.../Banner.tsx, .../CategoryButtonList.stories.tsx, .../ClubCard.stories.tsx	임포트 재정렬, 상수 추가(SCROLL_THRESHOLD 및 useScrollTrigger 연동), JSX/스타일 객체 재포맷팅 및 소규모 스타일/문자열 포맷 변경(기능적 변경 없음).
훅 / 유틸리티 포맷 변경 frontend/src/hooks/Scroll/useScrollTo.ts, frontend/src/utils/linkifyText.tsx, frontend/src/utils/linkifyText.test.tsx, frontend/src/utils/webviewBridge.ts	함수 시그니처/파라미터 줄바꿈 및 JSX/테스트 포맷 정리, 불필요 공백 제거(동작 미변경).
페이지 탭/폼 업데이트(포맷) frontend/src/pages/AdminPage/.../ApplicationEditTab.tsx	update mutation의 onSuccess 내부 invalidateQueries 호출 인자 포맷 재배치(동작 미변경).
기타 경미한 변경 frontend/src/pages/ClubDetailPage/components/ClubFeed/ClubFeed.tsx, frontend/src/pages/ClubDetailPage/components/ClubIntroContent/LinkifiedText.tsx	임포트 순서/따옴표 스타일 및 파일 끝 개행 추가 등 경미한 포맷 변경.

Sequence Diagram(s)

sequenceDiagram
    participant PR as Pull Request
    participant GH as GitHub Actions
    participant Runner as ubuntu-latest Runner
    participant Node as Node/npm
    participant Prettier as Prettier
    participant ESLint as ESLint
    participant Build as Build Step

    PR->>GH: PR to main/develop-fe affecting frontend
    GH->>Runner: start job (working-directory: frontend) 
    Runner->>Node: setup Node.js v20, npm cache (actions/setup-node)
    Runner->>Node: run `npm ci`
    Runner->>Prettier: run Prettier check (specified file globs)
    Prettier-->>Runner: pass/fail
    Runner->>ESLint: run lint
    ESLint-->>Runner: pass/fail
    Runner->>Build: run build
    Build-->>GH: report status (success/failure)
    GH-->>PR: update PR status

Loading

(각 박스 색상 표현이 필요한 경우 도구에서 렌더링 시 rgba(100,149,237,0.5) 등으로 스타일을 적용하세요.)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• [release] FE v1.1.21 #1124 — 동일 파일(ApplicationEditTab.tsx)의 invalidateQueries 호출 포맷 변경과 관련된 편집이 있음.
• [release] FE v1.1.19 #1106 — useScrollTo, ClubDetailTopBar, webviewBridge 등 동일 유틸/컴포넌트들을 수정한 기록이 있어 코드 레벨로 연관됨.
• [feature] FAQ 답변 텍스트 내 URL을 자동으로 링크 처리한다 #1117 — linkifyText 및 관련 테스트/컴포넌트 변경을 포함, 동일 유틸리티 변경과 연관됨.

Suggested reviewers

• lepitaaar
• seongwon030
• suhyun113

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 변경 사항의 주요 내용을 정확하게 반영하고 있습니다. 프론트엔드 CI 워크플로우 추가라는 핵심 변경사항을 명확하게 설명합니다.
Linked Issues check	✅ Passed	PR이 MOA-615의 모든 필수 요구사항을 충족합니다: GitHub Actions 워크플로우 추가, ESLint 검사 단계 구성, Prettier format check 단계 구성, 관련 포맷 정리(deprecated 옵션 제거, 전역 포맷 적용).
Out of Scope Changes check	✅ Passed	모든 파일 변경사항이 frontend CI 워크플로우 추가 및 관련 코드 포맷팅에 직접적으로 관련되어 있습니다. 범위 밖의 변경사항은 없습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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/#1155-fe-ci-lint-format-MOA-615

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

.github/workflows/frontend-ci.yml (2)

10-15: Job에 timeout-minutes 설정을 추가하는 것을 권장합니다.

빌드가 hang될 경우 기본 타임아웃(6시간)까지 CI 리소스를 소비할 수 있습니다. 일반적인 프론트엔드 CI라면 10~15분 정도면 충분합니다.

♻️ 제안

 jobs:
   ci:
     runs-on: ubuntu-latest
+    timeout-minutes: 15
     defaults:
       run:
         working-directory: frontend

---

3-8: 동일 PR에 대한 중복 실행 방지를 위해 concurrency 설정을 고려해 보세요.

PR에 새로운 커밋이 push될 때마다 이전 실행이 취소되도록 설정하면 CI 리소스를 절약할 수 있습니다.

♻️ 제안

 on:
   pull_request:
     branches: [main, develop-fe]
     paths:
       - 'frontend/**'
       - '.github/workflows/frontend-ci.yml'
+
+concurrency:
+  group: frontend-ci-${{ github.event.pull_request.number }}
+  cancel-in-progress: true

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[seongwon030]

CI가 필요했는데 감사하게도 추가해주셨군요