디자인 시스템 문서화를 위한 Playground 구현하기 🎨

import { notFound } from 'next/navigation';

export default function PlaygroundLayout({ children }: { children: React.ReactNode }) {
  if (process.env.TARGET_ENV === 'production') {
    return notFound();
  }

  return <>{children}</>;
}

- name: Remove playground in production
  run: rm -rf src/app/\(unAuth\)/playground

$fds-colors: (
  static: (
    black: #000000,
    white: #ffffff,
  ),
  neutral: (
    30: #f5f5f6,
    // ... 다른 색상들
  ),
  // ... 다른 색상 그룹들
);

// CSS 변수로 변환하는 mixin
@mixin generate-fds-color-palette {
  @each $group, $colors in $fds-colors {
    @if type-of($colors) == 'map' {
      @each $shade, $value in $colors {
        --fds-color-#{$group}-#{$shade}: #{$value};
      }
    } @else {
      --fds-color-#{$group}: #{$colors};
    }
  }

  // 시맨틱 색상도 변환
  @each $group, $colors in $fds-semantic-colors {
    @each $name, $value in $colors {
      --fds-semantic-#{$group}-#{$name}: #{$value};
    }
  }
}

export default function PlaygroundColors() {
  const [colorSection, setColorSection] = useState<ColorSection>({
    basicPalette: {},
    semanticColors: {},
  });

  useEffect(() => {
    const root = document.documentElement;
    const computedStyle = getComputedStyle(root);
    const styleSheets = document.styleSheets;
    const fdsVariables = [];

    // CSS 변수 추출 로직
    for (const sheet of styleSheets) {
      try {
        const rules = sheet.cssRules;
        for (const rule of rules) {
          if (rule instanceof CSSStyleRule && rule.selectorText === ':root') {
            const styles = Array.from(rule.style);
            for (const prop of styles) {
              if (prop.startsWith('--fds-')) {
                fdsVariables.push(prop);
              }
            }
          }
        }
      } catch (error) {
				console.error(error)
      }
    }

    // 색상 정보 처리 및 상태 업데이트
    // ... 코드 생략
  }, []);

  // 렌더링 로직
  // ... 코드 생략
}

export default function PlaygroundIcons() {
  return (
    <div className={styles.container}>
      <div className={styles.grid}>
        {Object.entries(ICONS).map(([name, icon]) => (
          <div key={name} className={styles.iconWrapper}>
            <p className={styles.iconName}>{name}</p>
            <div className={styles.variationsGrid}>
              {Object.values(ICON_COLOR).map((color) => (
                <div key={color} className={styles.colorSection}>
                  <p className={styles.colorLabel}>{color}</p>
                  <div className={styles.sizeVariations}>
                    {Object.values(ICON_SIZE).map((size) => (
                      <div key={size} className={styles.sizeWrapper}>
                        <FDSSvgIcon icon={icon} color={color} size={size} />
                        <span className={styles.sizeLabel}>{size}</span>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function PlaygroundPage() {
  const [components, setComponents] = useState<ComponentModule<keyof typeof CommonComponents>[]>([]);
  const [selectedTab, setSelectedTab] = useState<string>('Colors');

  // ... 상태 관리 코드 생략

  useEffect(() => {
    const componentList = Object.entries(CommonComponents).map(([name, component]) => ({
      name: name as keyof typeof CommonComponents,
      component: component,
    }));

    setComponents(componentList);
  }, []);

  return (
    <div className={styles.container}>
      {/* 사이드바 및 탭 UI */}
      <div className={styles.mainContent}>
        <h2 className={styles.mainTitle}>{selectedTab}</h2>
        <div className={styles.componentWrapper}>
          {/* 정적 탭 렌더링 */}
          {selectedTab === STATIC_TABS.COLORS && <PlaygroundColors />}
          {/* ... 다른 정적 탭 */}
          
          {/* 동적 컴포넌트 렌더링 */}
          {components.map(({ name, component: Component }) => {
            if (name !== selectedTab) return null;
            const propsArray = componentProps[name] || [];

            return (
              <div key={name} className={styles.componentContainer}>
                {propsArray.map((props, index) => (
                  <div key={index} className={styles.variantContainer}>
                    <div className={styles.componentDemo}>
                      <Component {...props} />
                    </div>
                    <div className={styles.propsSection}>
                      <h3 className={styles.propsTitle}>Props:</h3>
                      <pre className={styles.propsCode}>
                        {props}
                      </pre>
                    </div>
                  </div>
                ))}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

export { default as FDSButton } from './FDSButton';
// ... 기존 컴포넌트들
export { default as FDSLabel } from './FDSLabel';
// 새 컴포넌트를 추가할 때는 여기에 한 줄만 추가하면 됩니다

export const DEFAULT_PROPS: ComponentProps = {
  // ... 기존 컴포넌트 props
  
  FDSLabel: [
    {
      children: (
        <FDSTextWithIcon text="블루" icon={ICONS.HeartFill} size={TEXT_WITH_ICON_SIZE.XSMALL} color={ICON_COLOR.BLUE} />
      ),
      color: 'BLUE',
    },
    {
      children: (
        <FDSTextWithIcon text="오렌지" icon={ICONS.Heart} size={TEXT_WITH_ICON_SIZE.XSMALL} color={ICON_COLOR.ORANGE} />
      ),
      color: 'ORANGE',
    },
    // ... 다른 예제 props
  ],
  
  // 새 컴포넌트를 추가할 때는 여기에 예제 props 배열을 추가하면 됩니다
} as const;