CSS 변수를 사용하여 Puck에서 동적 테마 만들기

Puck은 React용 오픈 소스 비주얼 편집기로, 차세대 페이지 빌더와 코드 없는 제품을 지원합니다. GitHub에서 별점을 주세요! ⭐️

---

Puck을 페이지 구축 제품에 통합할 때 일반적인 요구 사항은 사용자가 모든 구성 요소를 조정할 필요 없이 페이지 테마를 중앙에서 관리할 수 있도록 하는 것입니다.

예를 들어 사용자는 페이지에 이미 추가된 구성 요소의 경우에도 글꼴 스타일을 전역적으로 관리할 수 있는 방법이 필요합니다. 실제로는 다음과 같습니다.

Puck은 단순한 React 구성요소이므로 이 문제를 해결하는 방법은 많습니다(다른 더 복잡한 상태를 관리하는 것 외에도). 이 기사에서는 가장 단순하면서도 가장 강력한 접근 방식 중 하나인 CSS 속성에 중점을 둘 것입니다. 뛰어들어 보세요!

이 튜토리얼에서는 귀하가 Puck과 그 기능에 대한 기본적인 이해를 갖고 있다고 가정하겠습니다. Puck을 처음 사용하는 경우에도 걱정하지 마세요. 계속 따라오셔도 됩니다! 하지만 기본 사항을 숙지하려면 시작 가이드를 확인하는 것이 좋습니다.

Vite를 사용한 프로젝트 설정

Vite의 스캐폴딩 스크립트를 사용하여 프로젝트를 설정하는 것부터 시작하겠습니다. 이미 Puck과 함께한 프로젝트가 있다면 이 섹션을 따르거나 건너뛰어도 됩니다.

Next.js 또는 Remix를 사용하는 경우 공식 Puck 레시피 중 하나를 사용하여 프로젝트를 설정할 수도 있습니다.

프로젝트 생성

시작하려면 터미널을 열고 다음 명령을 실행하여 새 Vite 프로젝트를 만드세요.

npm create vite@latest puck-global-themes -- --template react
cd puck-global-themes
npm install

퍽 설치

다음으로 Puck 패키지를 설치합니다.

npm i @measured/puck --save

충돌하는 스타일 삭제

Vite로 새 프로젝트를 시작하면 Puck의 스타일과 충돌하는 몇 가지 기본 스타일이 함께 제공됩니다. 이 문제를 해결하려면 src/index.css 및 src/App.css를 삭제한 다음 src/main.jsx 및 src/App.jsx에서 가져오기를 제거하세요.

// main.jsx
import "./index.css"; // Remove this line

// App.jsx
import "./App.css"; // Remove this line

Puck 편집기 렌더링

기본 프로젝트 구조가 준비되면 src/App.jsx 파일로 이동하여 해당 내용을 아래 코드로 바꿉니다. 이렇게 하면 제목 및 단락 구성 요소를 드래그 앤 드롭하기 위한 기본 구성으로 Puck이 설정됩니다.

단순화를 위해 이 예에서는 인라인 스타일을 사용하고 있습니다

// App.jsx
import { Puck } from "@measured/puck";
import "@measured/puck/puck.css";

// The configs for each of your draggable components
// Ideally you would pull each of these to their own files

const headingConfig = {
  defaultProps: {
    title: "Title",
  },
  fields: {
    title: {
      type: "text",
    },
  },
  render: ({ title }) => {
    return (
      <div>
        <h1 id="title">{title}</h1>
      </div>
    );
  },
};

const paragraphConfig = {
  defaultProps: {
    content: "This is a paragraph...",
  },
  fields: {
    content: {
      type: "textarea",
    },
  },
  render: ({ content }) => {
    return (
      <div>
        <p>{content}</p>
      </div>
    );
  },
};

// The Puck configuration object
const config = {
  components: {
    Heading: headingConfig,
    Paragraph: paragraphConfig,
  },
  root: {
    render: ({ children }) => {
      return (
        <main>



<p>Finally, run the application in development mode, navigate to http://localhost:5173, and check that everything is working as expected:<br>
</p>

<pre class="brush:php;toolbar:false">npm run dev

멋져요! 이제 기초를 다졌으니 사용자를 위한 테마를 추가해 보겠습니다.

테마 추가

앞서 언급했듯이 CSS 사용자 정의 속성은 편집기에 대화형 테마를 추가하는 데 탁월한 선택입니다. 이것이 왜 훌륭한 접근 방식입니까? 가볍기 때문에 외부 종속성이 필요하지 않으며 대부분의 경우 브라우저에서 기본적으로 처리됩니다.

설정

CSS 속성으로 동적 테마를 추가하려면 테마 변수가 필요한 구성 요소의 상위 요소에서 테마 변수를 속성으로 정의해야 합니다. 이는 Puck의 루트 구성 요소일 수도 있고 편집기 계층 구조의 다른 상위 구성 요소일 수도 있습니다. 정의한 다음 var CSS 함수를 사용하여 필요한 위치에서 읽으면 실제로는 중요하지 않습니다.

이 튜토리얼에서는 사용자가 편집기 최상위 수준의 한 위치에서 제목과 단락의 글꼴 크기와 색상을 설정할 수 있도록 Puck의 루트 구성 요소를 사용하는 데 중점을 둘 것입니다.

1단계: 변수 정의

모든 CSS 변수 이름을 중앙 집중화하는 객체를 정의하는 것부터 시작하세요. 이렇게 하면 일관성이 향상되고 CSS에 속성 이름을 잘못 입력하여 발생하는 디버깅 문제를 피할 수 있습니다.

전문가 팁: TypeScript를 사용하는 경우 객체 대신 열거형을 사용하여 유형 안전성을 강화할 수 있습니다

npm create vite@latest puck-global-themes -- --template react
cd puck-global-themes
npm install

2단계: 상위 구성 요소에 변수 추가

다음으로 테마 변수에 대한 소품과 필드를 포함하도록 루트 구성을 업데이트합니다. 이를 통해 사용자는 편집기의 루트 필드 내에서 직접 사용자 정의 속성을 업데이트할 수 있습니다.

이렇게 하려면 새 루트 소품에 대한 필드와 해당 기본값을 정의해야 합니다.

npm i @measured/puck --save

그 후 루트의 렌더링 함수에서 props의 사용자 정의 속성을 읽어 루트 요소에 CSS 변수로 전달합니다.

// Puck 구성 객체
const 구성 = {
  구성요소: {
    //... 기존 구성요소
  },
  루트: {
    //... 루트 필드 구성

    렌더링: ({ children,fontColor,headingFontSize,paragraphFontSize}) => {
      반품 (
        



<p>이제 편집기로 이동하면 각 소품의 루트 수준에 새 필드가 표시됩니다. 아직 시각적 피드백은 없지만 편집기 루트의 스타일을 검사하면 필드를 변경할 때마다 변수가 설정되는 것을 볼 수 있습니다.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173634396450671.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Using CSS variables to create dynamic themes in Puck"></p><h3>
  
  
  3단계: 하위 구성요소의 공유 변수에 액세스
</h3>

<p>마지막으로 스타일에 var CSS 기능을 사용하여 필요한 구성요소의 테마 변수에 액세스하세요.</p>

<p>이 예에서는 제목 구성 및 단락 구성에 추가합니다.<br>
</p>

<pre class="brush:php;toolbar:false">const headerConfig = {
  //... 제목 필드 구성

  렌더링: ({ 제목 }) => {
    반품 (
      <div>
        <h1>



</h1>
<p>편집기로 돌아가서 일부 제목과 단락을 끌어서 놓은 다음 루트 수준에서 필드를 수정하면 모든 제목과 단락이 해당 변경 사항을 반영하여 업데이트되는 것을 확인할 수 있습니다.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173634396650466.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Using CSS variables to create dynamic themes in Puck"></p>

<p>? 그리고 그게 다야! 이제 사용자는 페이지의 다양한 구성 요소에 원활하게 적용되는 테마를 정의할 수 있습니다.</p>

<h3>
  
  
  CSS 속성 사용의 장단점
</h3>

<p>✅ 장점:</p>

<ul>
<li>간단하고 직관적인 설정</li>
<li>페이지 계층 구조에 계단식 배열 및 재정의 기능이 내장되어 있어 공유 스타일을 쉽게 관리하고 개별 구성 요소를 맞춤 설정할 수 있습니다.</li>
<li>외부 종속성이 없고 공간이 가볍습니다. CSS 사용자 정의 속성은 브라우저에서 기본적으로 지원됩니다</li>
<li>다른 옵션에 비해 상용구 및 유지 관리 복잡성이 적습니다</li>
</ul>

<p>❌단점:</p>

<ul>
<li>간단한 스타일링에만 적합하며 복잡한 데이터나 로직을 처리할 수 없습니다</li>
<li>여러 수준의 CSS 속성 재정의를 중첩하면 디버깅이 어려울 수 있습니다</li>
</ul>

<h2>
  
  
  더 나아가
</h2>

<p>특정 사용 사례에 따라 편집기 테마를 더욱 발전시킬 수 있는 다양한 방법이 있습니다.</p>
<ul>
<li>
<strong>사전 정의된 테마 사용</strong> - 일부 애플리케이션에서는 어둡게, 밝게 또는 최소와 같은 기본 테마 옵션을 제공해야 할 수도 있습니다. 이를 위해 여러 테마 개체가 포함된 선택 필드를 사용할 수 있습니다. 
이러한 개체는 모든 CSS 속성을 하나의 단위로 그룹화할 수 있으므로 사용자는 단일 필드를 채울 필요 없이 페이지의 다양한 테마 간에 쉽게 전환할 수 있습니다.</li>
<li>
<strong>스타일링 라이브러리 통합</strong> – 대규모 편집자의 경우 스타일 라이브러리를 사용하여 미리 작성된 스타일을 활용하고 정의를 간소화하며 상용구를 줄이는 것이 더 나을 수 있습니다. Tailwind 또는 Emotion과 같은 라이브러리는 Puck과 쉽게 통합되어 세련된 모양을 유지하면서 유연성과 효율성을 제공합니다. 실제로 Puck은 통합 프로세스를 단순화하는 Emotion 플러그인도 제공합니다!</li>
<li>
<strong>구성요소 수준 테마 재정의 추가</strong> – 때로는 사용자가 나머지 테마와 차별화되도록 페이지의 개별 구성요소를 맞춤설정해야 할 수도 있습니다. CSS 속성을 사용하고 있으므로 구성 요소 수준에서 상위 수준 테마 변수를 재정의하면 쉽게 달성할 수 있습니다. 예를 들어, 제공되는 경우 해당 h1 요소에 대해 CSS 속성을 구체적으로 재정의하는 선택적 글꼴 색상 필드를 Heading 구성 요소 내에 추가할 수 있습니다.</li>
</ul>

<h2>
  
  
  연결을 유지하고 계속 구축하시겠습니까?
</h2>

<p>이 튜토리얼을 통해 Puck 기반 페이지 빌더의 동적 테마에 CSS 변수를 활용할 수 있기를 바랍니다. 오픈 소스 개발자 커뮤니티는 Puck 발전의 중심에 있으며, 여러분이 만들어내는 혁신적인 앱을 빨리 보고 싶습니다!</p>

<p>우리는 곧 출시될 복잡한 그리드 및 레이아웃을 위한 혁신적인 드래그 앤 드롭 엔진과 곧 출시될 새로운 플러그인 제품군을 포함하여 새로운 기능의 지속적인 스트림을 통해 Puck의 기능을 더욱 발전시키기 위해 최선을 다하고 있습니다.</p>

<p>Puck이 영감을 주었거나 최신 기능에 대한 최신 소식을 받고 싶다면 다음 방법으로 참여하세요.</p>

<ul>
<li>
<strong>⭐ GitHub에 별표를 표시하여</strong> 프로젝트를 지원하고 다른 사람들이 프로젝트의 잠재력을 탐색하도록 영감을 주세요.</li>
<li>
<strong>? Discord 커뮤니티에 가입하여</strong> 프로젝트를 공유하고, 질문하고, 협업하세요.</li>
<li>
<strong>? 최신 업데이트, 미리보기, 기능 공지사항을 보려면 X 및 Bluesky</strong>에서 팔로우하세요.</li>
<li>
<strong>? 노코드 워크플로를 한 단계 더 발전시킬 수 있는 고급 기술과 통찰력을 보려면 공식 문서</strong>를 자세히 살펴보세요.</li>
</ul>


          </div>