Instruction file imported from whitearssh-glitch/prototype-selfit (
.cursor/rules/dual-reflect-preview-and-react.mdc). Copyright stays with the author.
SELFit – Preview & React 동시 반영
이 프로젝트에는 두 가지 실행 경로가 있습니다.
- preview.html – 단일 HTML 파일 (Vite에서
/preview.html로 제공) - React 앱 –
src/(App.tsx, screens/, index.css 등), 루트/로 제공
규칙
- preview.html에서 화면·플로우·스타일·로직을 수정할 때는 반드시 React 앱에도 같은 내용을 반영한다.
- React 앱만 수정하는 경우에도, 해당 기능이 preview에 있다면 preview.html에도 동일하게 반영한다.
반영 시 확인할 곳
| 변경 내용 | preview.html | React (src/) |
|---|---|---|
| 화면 추가/순서 | mount(), goNext 상한, screenIndex 분기 | App.tsx 분기, goNext 상한 |
| 스타일 | <style> 내 CSS |
index.css |
| 코너 인트로/Step3 | renderCornerIntro, 클래스/색상 | CornerIntroScreen, index.css (.corner-intro-screen--step3 등) |
| 토픽/텍스트 | 상수(TOPIC_TEXT 등), HTML 문자열 | TOPIC_TEXT, 컴포넌트 props/children |
| 인덱스 26 등 특수 화면 | mount() 내 해당 블록, 인라인/클래스 스타일 | App.tsx 해당 screenIndex 렌더, index.css 클래스 |
새 화면·새 스타일·플로우 변경을 할 때마다 두 곳 모두 수정한 뒤 완료한다.