[i-meant-to-be]

🚩 연관 이슈

Closes #527

📝 작업 내용

Node 24·Storybook 10 이전 이후 React 18을 유지하면서 Vite 6.4.4 → 7.3.7 → 8.3.4 순서로 빌드 기반을 이전함. Vite 7의 검증을 마친 뒤 8로 진행했으며 최종 선언은 ^8.3.4임. Vite 8의 Rolldown·Oxc와 CSS 압축기 변경 후에도 기존 앱·Storybook 동작과 지원 브라우저 계약을 유지하는 것이 목적임.

의존성과 처리 경계

• Vite와 관련 하위 의존성만 갱신함. React 18.3.1·Storybook 10.6.2·Vitest 4.1.11, React·Tailwind·Sentry 플러그인 및 다른 직접 의존성의 선언·잠금 버전을 유지했음.
• TypeScript·MSW·React Query 제한과 기존 override를 유지했으며 --force·--legacy-peer-deps는 사용하지 않았음.
• 공용 Vite 설정에 build.target: ['chrome111', 'safari16.4', 'firefox128']을 명시함. 예를 들어 앱의 /en/home과 Storybook의 모바일 Story는 같은 브라우저 대상에 맞춰 빌드되며 도구 기본값의 변화로 지원 범위를 축소하지 않음. Storybook builder가 공용 build.target을 전달받는 것을 확인했음.
• SockJS의 global: 'window', API·WebSocket proxy, loadEnv와 VITE_BASE_PATH, 정적 경로, Storybook 산출물의 앱 의존성 탐색 제외 설정을 보존함.
• Sentry는 인증 정보가 있는 생산 모드에서만 플러그인과 hidden sourcemap을 켜는 기존 조건을 유지함. 업로드 후 dist/**/*.map 삭제 설정도 유지했으나 실제 업로드·삭제 성공은 이번 검증에 포함하지 않았음.
• 제품 API·도메인 타입·화면 기능은 변경하지 않았음. 문서 지도·지원 브라우저 계약과 future.md의 진행 기록·잔여 검증을 갱신했음. React 이전은 이 PR 병합 후 최신 develop에서 별도 이슈·브랜치로 진행함.

실제 검증

Windows·Node 24.21.0·npm 11.19.1·Chrome headless에서 확인했음. 의존성·설정 이전이므로 기존 테스트와 Story의 play를 실행했으며 새 제품 기능·테스트는 추가하지 않았음.

검증	결과
Vite 6·7·8 엄격한 설치·의존성 트리	각 버전에서 npm ci --engine-strict --strict-peer-deps·npm ls --depth=0 통과
전체 테스트·lint·앱 빌드	각 버전에서 59개 파일·546개 테스트, lint·타입 검사, 생산 빌드 통과. 최종 Vite 8로 PR 준비 시 재실행도 통과
Storybook 빌드·doctor	세 버전 모두 통과
Story 색인	세 버전 모두 123개 Story·47개 문서이며 ID 추가·누락 없음
Storybook 개발·정적 화면	세 버전의 양쪽에서 UpdateModal 12개 play, 양방향 Controls args, Actions의 onChecked·onClose, Docs·Portal 닫기와 모바일 크기 통과
MSW·청중 시뮬레이터	세 버전의 양쪽에서 테이블 8개, 투표 조회·입력·선택·확인·POST 응답과 가짜 소켓 SYNC·PLAY·카운트다운·STOP·자유토론·FINISHED 이동 통과
앱 개발 화면	세 버전에서 테이블 선택, 타이머 재생·정지·Space, 여섯 차례 이동 후 종료 화면, 도움말 Esc 닫기, 투표 제출 후 완료 화면과 영어 경로 확인
생산·미리보기 하위 경로	Vite 7·8에서 기본 경로와 /pr-527 생산 결과의 같은 앱 흐름·번역·스타일 확인. API는 별도 MSW 세션 응답으로 모방함
개발 서버·HMR	세 버전의 HTML·진입 모듈·CSS·worker HTTP 200과 실제 모듈 HMR 갱신 확인. Vite 7·8은 Storybook 빌드 후 앱 재시작·재확인
proxy·Sentry 조건	Vite 7·8에서 로컬 HTTP·WebSocket 서버를 통한 rewrite·upgrade 확인. Sentry는 인증·모드별 설정만 로드해 검증했으며 가짜 인증값으로 빌드·업로드하지 않음

UpdateModal은 모바일·가로 화면·767/768px 경계·데스크톱의 기존 한국어·영어 조합을 확인했음. 청중 모바일 Story는 실제 375×812였음. 앱에서 투표 POST 성공 후 /vote/end 완료 문구까지 확인했음. 위 API·소켓 결과는 로컬 모방 검증이며 실제 서버의 공유·투표 성공을 의미하지 않음.

Vite 7 개발 Storybook 검증 중 정적 빌드의 HTML 갱신으로 화면이 새로고침돼 args 확인이 한 차례 시간 초과됐음. 빌드 완료 후 같은 검증은 모두 통과했으며 제품 코드를 바꾸지 않았음.

기존 npm 감사 7건(낮음 1·높음 6), ESLint 비권장 버전·설치 스크립트 허용 안내와 500 kB 초과 묶음 경고가 남아 있음. Vite 8 Storybook 빌드에는 Rolldown의 PLUGIN_TIMINGS 안내가 추가됐으나 빌드는 성공했음. 관련 없는 정비나 경고 숨김 설정은 추가하지 않았음. 코드 리뷰의 상·중·하·컨벤션 위반 발견 사항은 없음.

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

• Vite 7·8을 단계별 검증한 커밋으로 분리하고 최종 Vite 외 직접 의존성·제한·override를 유지했는지 확인함.
• 앱·Storybook의 명시적 브라우저 대상과 proxy·SockJS·환경 변수·Sentry 조건이 유지되는지 확인함.
• PR 생성 후 Linux CI의 설치·테스트·lint와 미리보기 결과를 확인함. 생성 전 원격 CI 성공을 주장하지 않음.

현재 일반 PR CI는 npm ci·전체 테스트·lint를 수행함. 엄격한 설치·doctor·앱 및 Storybook 빌드·브라우저 검증은 아래 명령으로 보완함.

npm ci --engine-strict --strict-peer-deps
npm ls --depth=0
npx --no-install vitest run
npm run lint
npm run build
npm run build-storybook -- --disable-telemetry
npx --no-install storybook doctor
npm run storybook
npx --no-install vite preview --outDir storybook-static --port 6007
npm run dev

Storybook은 정적 빌드 완료 후 개발·정적 결과를 각각 확인함. UpdateModal의 12개 play·긴 설명·이미지 비율·체크박스·닫기·양방향 args, Docs·Actions·Interactions, 청중 모바일 크기, MSW 테이블·투표·청중 시뮬레이터를 확인함. 빌드 후 앱 서버를 재시작해 의존성 탐색과 HMR을 확인함. 고정 viewport는 미리보기 공간을 충분히 확보한 뒤 실제 iframe 크기를 측정함.

미리보기 base는 workflow가 주입하는 /pr-<PR 번호>로 확인함. 로컬에서는 VITE_BASE_PATH에 해당 값을 설정해 npm run build와 npm run preview를 실행하고, 하위 경로의 새로고침·영어 경로·번역·이미지·CSS 로딩을 확인함. 검증에 사용한 /pr-527은 로컬 시험 경로이며 실제 PR 번호를 의미하지 않음.

남은 직접 확인 항목임.

• 실제 API·소켓 서버에서 사회자와 청중 화면의 시작·정지·차례 이동·종료 동기화와 투표 제출·결과 조회를 확인함.
• Safari·Firefox에서 주요 화면·모달·입력·스크롤·타이머와 Tab 이동·모달 종료 후 포커스 복원을 확인함. 명시한 빌드 대상만으로 실제 브라우저 검증을 대체하지 않음.
• 인증된 생산 환경에서 Sentry sourcemap 생성·업로드·업로드 후 삭제를 확인함. 설정 검증만 수행했으므로 실제 업로드는 미검증임.
• Linux의 엄격한 설치·doctor·Storybook 빌드, Chromatic dry-run·실제 게시·시각 비교는 이번 단계에서 미실행임. 필요 시 npm run chromatic -- --dry-run --no-interactive --disable-telemetry로 사전 검증하고 실제 게시·시각 비교는 해당 권한 범위에서 진행함.

Summary by CodeRabbit

• 개선 사항
  • 최신 브라우저 지원 기준을 명시하고 빌드 설정에 반영했습니다.
  • Vite를 8 버전으로 업데이트했습니다.
• 문서
  • 실행 환경과 브라우저 지원 기준을 문서화하고, 마이그레이션 및 검증 진행 상황을 갱신했습니다.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 8847521d-fae9-4b97-a9a5-bd60d7914f84

📥 Commits

Reviewing files that changed from the base of the PR and between 3aefc0e and 1701fc9.

⛔ Files ignored due to path filters: 1

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing: 5

• docs/README.md
• docs/conventions/react-and-ui.md
• future.md
• package.json
• vite.config.ts

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

Walkthrough

Vite 개발 의존성을 8.3.4로 갱신하고 빌드 브라우저 대상을 명시했습니다. 문서에는 지원 브라우저 계약과 Vite 마이그레이션의 상태, 수행한 검증 및 남은 확인 항목을 기록했습니다.

Changes

Vite 마이그레이션

Layer / File(s)	Summary
Vite 버전과 브라우저 대상 갱신 package.json, vite.config.ts, docs/conventions/react-and-ui.md, docs/README.md	Vite 개발 의존성 범위를 ^8.3.4로 변경하고, build.target에 Chrome 111, Safari 16.4, Firefox 128을 지정했습니다. 문서에 지원 브라우저 계약과 앱·Storybook의 공용 Vite 설정을 기록했습니다.
마이그레이션 상태와 검증 기록 future.md	Node·Storybook·Vite 작업의 진행 상태를 갱신했습니다. Vite 6·7·8의 설치, 테스트, 빌드 및 앱·Storybook 검증 결과와 확인 범위를 기록했습니다.
후속 작업과 잔여 검증 future.md	React 작업의 시작 조건을 Vite 작업의 검증·병합 이후로 정리했습니다. 검증 명령의 적용 범위와 미실행 확인 항목을 기록했습니다.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Refactor

Merge Risk: ⚪ Minimal · up to 1701f

The supplied change record reports successful local checks and documents remaining validation. No concrete merge-blocking behavior change is identified.

Pre-merge checks: 4 · 1

Failed checks: 1 inconclusive

Check name	Status	Explanation	Resolution
Linked Issues check		이슈 #527의 주요 요구사항은 PR 설명과 변경 요약에서 확인됩니다. package.json의 Vite 범위, vite.config.ts의 build.target, 문서화된 Vite 6→7→8 검증 및 기존 설정 보존 내용이 해당 범위와 일치합니다. 그러나 package-lock.json은 검토 제외 파일입니다. 이슈는 lockfile 갱신…	검토 가능한 증거에서 최종 package-lock.json의 Vite 및 관련 의존성 잠금 상태를 확인해야 합니다. 현재 제외 규칙 때문에 그 결과를 판정할 수 없습니다.

Passed checks: 4 passed

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		제목은 React 18을 유지하면서 Vite 8로 마이그레이션하는 주요 변경 사항을 정확하고 간결하게 설명합니다.
Out of Scope Changes check		변경 요약에 포함된 package.json, vite.config.ts, future.md, 브라우저 지원 문서, README 변경은 Vite 이전, 브라우저 대상 계약, 검증 결과 기록과 직접 연결됩니다. 제품 API·도메인 타입·화면 기능 변경이나 별도 정비 변경은 요약에서 확인되지 않습니다.
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…

Full details: Linked Issues check

Explanation

이슈 #527의 주요 요구사항은 PR 설명과 변경 요약에서 확인됩니다. package.json의 Vite 범위, vite.config.ts의 build.target, 문서화된 Vite 6→7→8 검증 및 기존 설정 보존 내용이 해당 범위와 일치합니다. 그러나 package-lock.json은 검토 제외 파일입니다. 이슈는 lockfile 갱신과 각 단계의 실제 의존성 트리 검증을 요구하므로, 최종 lockfile의 Vite 8.3.4 및 관련 의존성 상태를 독립적으로 확인할 수 없습니다.

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• 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

• X
• Mastodon
• Reddit
• LinkedIn

_{나는 토끼, 버전 숫자를 살펴보네
여덟 갈래 빌드 대상 적혀 있네
스토리북 검증 기록도 찾아보고
남은 확인 항목을 당근 옆에 적네
새 작업은 다음 순서에 이어지고
문서 속 발자국을 가볍게 남기네}

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

[github-actions]

🚀 Preview 배포 완료!

환경	URL
Preview	열기
API	Dev 환경

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

[github-actions]

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