Skip to content

[chore] Tailwind CSS v4 마이그레이션 및 의존성 갱신 - #522

Merged
i-meant-to-be merged 5 commits into
developfrom
chore/#521
Oct 12, 2026
Merged

[chore] Tailwind CSS v4 마이그레이션 및 의존성 갱신#522
i-meant-to-be merged 5 commits into
developfrom
chore/#521

Conversation

@i-meant-to-be

@i-meant-to-be i-meant-to-be commented Oct 12, 2026

Copy link
Copy Markdown
Contributor

🚩 연관 이슈

Closes #521

📝 작업 내용

Tailwind CSS v3의 JS·PostCSS 설정을 v4.3.3의 CSS 설정과 Vite 플러그인으로 이전함.
앱과 Storybook이 같은 src/index.css를 사용하며 기존 화면의 색상·크기·간격·상태
표현을 유지하도록 호환 스타일과 클래스 변환을 적용함.

  • 선언 범위 안에서 의존성을 갱신하고 React 18·Vite 6·Storybook 8·TypeScript 5.7을
    유지함. CI와 배포 workflow의 Node는 22.12.0으로 통일함.
  • Node engine 충돌 때문에 TypeScript ESLint를 8.56 미만, Query ESLint를 5.91.4와
    내부 utils 8.55.0으로 제한하고 MSW를 2.12.7로 고정함. React Query는 기존
    Mutation 래퍼의 타입 오류를 재현하여 5.100.10까지로 제한함.
  • 테마·애니메이션을 @theme, 배경 이미지를 @utility, xl·short 조건을
    사용자 정의 variant로 이전함. 클래스 탐색은 src로 한정함.
  • 색상 토큰 default-disabled/hover를 default-disabled-hover로 변경함.
    사용 중인 기본 팔레트는 v3 값을 유지하고 기존 focus·입력·버튼 표현을 보정함.
  • 헤더·종료 화면 카드의 줄 높이, 생성 폼·사용 안내의 간격, 문단 truncate를
    실제 Chrome 비교 결과에 따라 보정함. 모바일 hover는 v4 입력 장치 정책을 따름.
  • Tailwind의 직접 PostCSS·Autoprefixer·ESLint·미사용 Stylelint 설정 의존성을 제거하고
    Prettier에 클래스 정렬을 통합함. 그 밖의 미사용 의존성 후보는 유지함.
  • 앱 개발 서버가 storybook-static을 탐색해 선택적 @emotion/is-prop-valid를
    찾지 못하는 오류를 재현하고 Vite 의존성 탐색에서 산출물을 제외함.
  • CSS 설정·클래스 정렬·지원 브라우저 계약을 문서에 기록함.

의존성 갱신 → v4 전환 → 클래스 정렬 → 개발 서버 오류 수정 → 문서 순으로 커밋을
분리함. API·상태·컴포넌트 Props 계약은 변경하지 않음.

검증

  • 최종 lockfile의 npm ci --engine-strict --strict-peer-deps 통과했음.
  • PR 준비 시 전체 테스트 59개 파일·546개, lint·타입 검사, 앱 빌드가 통과했음.
  • Storybook 빌드와 Vite 의존성 탐색은 직전 오류 수정 후 통과했음.
  • Chrome에서 91개 Story 중 88개를 비교하고 차이가 있었던 11개를 보정 후
    재검증했음. 헤더의 11개 화면 크기, 일반·시간제 타이머의 20개 경계 사례,
    재생·진행 애니메이션·일시정지 및 데스크톱·터치 hover를 확인했음.
  • 나머지 3개 Story는 v3·v4 양쪽에서 비어 있어 화면 비교에서 제외했음.
  • Safari·Firefox 및 최저 지원 버전, 실제 서버 연결 전체 흐름은 미검증임.
    기존 번들 크기·Storybook eval·MDX 파일 없음 안내는 남아 있음.

🗣️ 리뷰 요구사항 (선택)

  • Node 22.12.0 호환성과 Mutation 타입을 위해 둔 의존성 제한을 확인함.
  • 일반 타이머 구분선의 최대 0.016px 반올림 차이와 승인된 모바일 hover 정책 외
    표시 차이가 없는지 확인함.
  • CI가 실행하지 않는 앱·Storybook 빌드는 다음 명령으로 확인함.
npm run build
npm run build-storybook
npm run dev-mock
npm run storybook

Safari 16.4+, Chrome 111+, Firefox 128+에서 폰트·색상·간격·키보드 focus·비활성
입력·hover·타이머 진행을 확인함. 너비 767/768·1279/1280px, 1599/1600px와
높이 1023/1024px의 조합, 높이 499/500/501px 전후를 비교함. 실제 서버의 테이블
구성·청중 공유·투표 과정도 추가 확인함.

@coderabbitai

coderabbitai Bot commented Oct 12, 2026

Copy link
Copy Markdown

Important

Review skipped

Too many files!

This PR contains 110 files, which is 10 over the limit of 100.

To get a review, reduce the PR to 100 files or fewer by splitting it into smaller PRs or changing its base branch.

Upgrade to a paid plan to raise the limit.

This review couldn't start because sufficient usage credits or metered capacity aren't available. Add credits or update usage-based reviews in the billing tab, then retry.

⚙️ Run configuration
  • Configuration used: Organization UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 6c757b90-d14d-4ba7-a797-b14a29da70b8
📥 Commits

Reviewing files that changed from the base of the PR and between 3cab5f7 and 6d2a7b8.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (110)
  • .github/workflows/deploy-development.yml
  • .github/workflows/deploy-preview.yml
  • .github/workflows/deploy-production.yml
  • .github/workflows/deploy-storybook.yml
  • .gitignore
  • .prettierrc
  • .stylelintignore
  • docs/README.md
  • docs/conventions/react-and-ui.md
  • eslint.config.js
  • package.json
  • postcss.config.js
  • public/mockServiceWorker.js
  • src/apis/sockets/type.ts
  • src/components/ClearableInput/ClearableInput.tsx
  • src/components/CustomRangeSlider/CustomRangeSlider.tsx
  • src/components/DesignSystemSample/ColorItem.tsx
  • src/components/DesignSystemSample/DesignSystemSample.stories.tsx
  • src/components/DropdownMenu/DropdownMenu.tsx
  • src/components/ErrorBoundary/NotFoundPage.tsx
  • src/components/ErrorIndicator/ErrorIndicator.tsx
  • src/components/FloatingActionButton/FloatingActionButton.tsx
  • src/components/HeaderTableInfo/HeaderTableInfo.tsx
  • src/components/HeaderTitle/HeaderTitle.tsx
  • src/components/LabeledCheckBox/LabeledCheckBox.tsx
  • src/components/LabeledRadioButton/LabeledRadioButton.tsx
  • src/components/NotificationBadge/NotificationBadge.tsx
  • src/components/ShareModal/ShareModal.tsx
  • src/components/TimerProgressBar/TimerProgressBar.tsx
  • src/components/UpdateModal/UpdateModal.tsx
  • src/components/VolumeBar/VolumeBar.tsx
  • src/components/icons/Add.tsx
  • src/components/icons/Bell.tsx
  • src/components/icons/Check.tsx
  • src/components/icons/Close.tsx
  • src/components/icons/Copy.tsx
  • src/components/icons/Debate.tsx
  • src/components/icons/Delete.tsx
  • src/components/icons/Drag.tsx
  • src/components/icons/Edit.tsx
  • src/components/icons/Exchange.tsx
  • src/components/icons/Expand.tsx
  • src/components/icons/Help.tsx
  • src/components/icons/Home.tsx
  • src/components/icons/Icon.stories.tsx
  • src/components/icons/LeftArrow.tsx
  • src/components/icons/Login.tsx
  • src/components/icons/Play.tsx
  • src/components/icons/Reset.tsx
  • src/components/icons/RightArrow.tsx
  • src/components/icons/Share.tsx
  • src/components/icons/ShareLive.tsx
  • src/hooks/useModal.tsx
  • src/index.css
  • src/layout/components/footer/StickyFooterWrapper.tsx
  • src/layout/components/header/LanguageSelector.tsx
  • src/layout/components/header/StickyTriSectionHeader.tsx
  • src/layout/components/main/ContentContainer.tsx
  • src/page/AudienceFinishedPage/AudienceFinishedPage.tsx
  • src/page/AudienceSharePage/AudienceSharePage.tsx
  • src/page/AudienceSharePage/components/AudienceNormalTimer.tsx
  • src/page/AudienceSharePage/components/AudienceTimeBasedTimerDisplay.test.tsx
  • src/page/AudienceSharePage/components/AudienceTimeBasedTimerDisplay.tsx
  • src/page/AudienceSharePage/components/ChairmanStatusNotice.tsx
  • src/page/AudienceSharePage/components/ConnectionLostNotice.tsx
  • src/page/AudienceSharePage/components/DebateWaitingNotice.tsx
  • src/page/AudienceSharePage/error.ts
  • src/page/AudienceSharePage/hooks/EventInterpreter.ts
  • src/page/AudienceSharePage/stories/AudienceShareSimulator.stories.tsx
  • src/page/DebateEndPage/components/MenuCard.tsx
  • src/page/DebateVotePage/DebateVotePage.tsx
  • src/page/DebateVoteResultPage/DebateVoteResultPage.tsx
  • src/page/DebateVoteResultPage/components/VoteDetailResult.tsx
  • src/page/DebateVoteResultPage/components/WinnerCard.tsx
  • src/page/LandingPage/LandingPage.tsx
  • src/page/LandingPage/components/Header.tsx
  • src/page/LandingPage/components/ReviewCard.tsx
  • src/page/LandingPage/components/ScrollHint.tsx
  • src/page/LandingPage/components/TableSection.tsx
  • src/page/LandingPage/components/TemplateCard.tsx
  • src/page/LandingPage/components/TemplateSelection.tsx
  • src/page/LandingPage/components/TimeTableSection.tsx
  • src/page/LandingPage/components/TimerSection.tsx
  • src/page/TableComposition/components/TimeBox/TimeBox.tsx
  • src/page/TableComposition/components/TimeBoxStep/TimeBoxStep.tsx
  • src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx
  • src/page/TableComposition/components/TimerCreationContent/TimerCreationContentMenuItem.tsx
  • src/page/TableListPage/components/Table.tsx
  • src/page/TableOverviewPage/TableOverviewPage.tsx
  • src/page/TableOverviewPage/components/TeamSelectionModal/TeamSelectionModal.tsx
  • src/page/TableSharingPage/components/LoggedInStoreDBModal.tsx
  • src/page/TimerPage/TimerPage.tsx
  • src/page/TimerPage/components/AnswerTimeGuideModal.tsx
  • src/page/TimerPage/components/AnswerTimeProgress.tsx
  • src/page/TimerPage/components/AnswerTimeSetting.tsx
  • src/page/TimerPage/components/AnswerTimeTimer.tsx
  • src/page/TimerPage/components/CircularTimer.tsx
  • src/page/TimerPage/components/CompactTimeoutTimer.tsx
  • src/page/TimerPage/components/FeedbackTimer.tsx
  • src/page/TimerPage/components/FirstUseToolTip.tsx
  • src/page/TimerPage/components/LiveShareModal.tsx
  • src/page/TimerPage/components/LoginAndStoreModal.tsx
  • src/page/TimerPage/components/NormalTimer.tsx
  • src/page/TimerPage/components/TimeBasedTimer.tsx
  • src/page/VoteParticipationPage/VoteParticipationPage.tsx
  • src/page/VoteParticipationPage/components/VoteTeamButton.tsx
  • src/util/sentry.test.ts
  • stylelint.config.cjs
  • tailwind.config.js
  • vite.config.ts

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Oct 12, 2026

Copy link
Copy Markdown

🚀 Preview 배포 완료!

환경 URL
Preview 열기
API Dev 환경

PR이 닫히면 자동으로 정리됩니다.

@i-meant-to-be
i-meant-to-be merged commit dd7f668 into develop Oct 12, 2026
3 checks passed
@github-actions

github-actions Bot commented Oct 12, 2026

Copy link
Copy Markdown

🧹 Preview 배포가 정리되었습니다.

This branch was successfully deployed

2 active deployments
DEPLOY_DEV — 6d2a7b8d Deployed Oct 12, 2026 by i-meant-to-be via build-and-deploy #196
PREVIEW_ENV — 6d2a7b8d Deployed Oct 12, 2026 by i-meant-to-be via cleanup #44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[CHORE] TailwindCSS v4로 마이그레이션

1 participant

@i-meant-to-be