PreviewPane 소개
개발자에게 최고의 코드 미리보기 및 공유 도구를 제공하기 위해 최선을 다하고 있습니다
코드 표시를 우아하게 만들고, 지식 공유를 간단하게 만드세요
제품 미션
PreviewPane은 프런트엔드 개발자, 디자이너 및 교육 시나리오를 위해 특별히 설계된 웹 기반 코드 편집 및 이미지 내보내기 도구입니다. 우리의 목표는 사용자가 브라우저에서 HTML + CSS 코드를 쉽게 편집하고, 실행 효과를 실시간으로 미리 본 다음, 고품질 이미지 파일로 내보낼 수 있도록 하는 것입니다.
주요 기능
개발자의 실제 요구를 충족하기 위해 요구 사항 문서를 기반으로 설계된 전문 기능
에디터 패널
구문 강조 기능이 있는 HTML + CSS 코드 편집 지원, 고정폭 글꼴 사용, 기본 샘플 코드 제공
미리보기 패널
HTML + CSS의 실시간 렌더링, WYSIWYG, 페이지 표시 효과와 내보내진 이미지가 완전히 일치하며 JavaScript를 실행하지 않습니다
코드 이미지 내보내기
에디터 패널의 코드를 이미지로 렌더링하여 원래 에디터 스타일(배경, 글꼴, 테두리, 둥근 모서리)을 유지합니다
실행 효과 내보내기
미리보기 패널에서 렌더링된 효과를 PNG로 내보내어 이미지가 페이지 효과와 완전히 일치하도록 합니다
여러 내보내기 스타일
기본, 카드, macOS 스타일 및 터미널 스타일 등 네 가지 내보내기 스타일 테마 지원
반응형 디자인
모바일을 위한 위-아래 레이아웃, 데스크톱을 위한 왼쪽-오른쪽 레이아웃, TailwindCSS로 구축된 반응형 디자인
기술 아키텍처
前端技术栈：프런트엔드 기술 스택: PreviewPane은 React + Next.js 프레임워크를 사용하는 현대적인 웹 기술로 구축되었으며, TailwindCSS는 빠른 스타일 개발 및 반응형 레이아웃을 위해 사용되고 Monaco Editor는 전문적인 코드 편집 경험을 제공합니다.
核心实现：핵심 구현: 에디터는 useState를 통해 코드 상태를 저장하고, 미리보기 패널은 HTML + CSS의 실시간 렌더링을 위해 dangerouslySetInnerHTML을 사용하며, html-to-image 라이브러리를 기반으로 한 내보내기 기능은 PNG 이미지를 생성하고 file-saver 라이브러리는 파일 다운로드를 처리합니다.
设计理念：디자인 철학: WYSIWYG 원칙을 따라 내보내진 이미지가 페이지 표시 효과와 완전히 일치하도록 보장합니다. 보안 위험을 피하기 위해 사용자 JavaScript 코드를 실행하지 않습니다. 성공적인 내보내기를 보장하기 위해 모든 스타일은 인라인 또는 스타일 태그에 있습니다.