Tom UI Playground

프로젝트 소개

Tom UI Playground는 VS Code를 본뜬 브라우저 기반 React + Tailwind 샌드박스이며, React, TypeScript, Vite, Tailwind CSS로 만들어졌습니다. 에디팅 영역은 Monaco Editor(VS Code 뒤의 엔진)를 사용해 TSX, TypeScript, CSS 구문 하이라이트, 자동완성, 포맷팅을 제공합니다. JSX/TSX는 Sucrase를 통해 브라우저 안에서 실시간으로 트랜스파일되어, 빌드 단계 없이 라이브 프리뷰가 갱신됩니다. 가상 파일 시스템은 상대 경로 import를 지원하면서 .tsx, .ts, .css 파일을 최대 20개 다루고, QuickOpen 팔레트(Cmd+P)로 빠르게 이동할 수 있습니다. 영구 저장은 localStorage로 처리되며, 이름이 있는 30개의 저장 슬롯, 주기적 자동 저장, JSON 가져오기·내보내기를 지원합니다. 앱에는 15개 이상의 스니펫 라이브러리, log/warn/error/info를 캡처하는 통합 콘솔, Tailwind 치트 시트, 크기 조절 가능한 패널이 포함됩니다. 프리뷰는 샌드박스 iframe에서 실행되어 상대 import를 해석하고 React 19와 Tailwind를 CDN으로 마운트하며 콘솔 출력을 부모로 되돌려 보냅니다.