podo-ui 0.1.46 → 0.2.0

package/src/app/foundation/colors/page.module.scss

@@ -1,370 +0,0 @@
-@use '../../../../mixin' as *;
-
-.section {
-  margin-bottom: s(10);
-
-  h2 {
-    @include display5;
-    margin: 0 0 s(5) 0;
-    color: color(default-deep);
-  }
-
-  h3 {
-    @include p1; font-weight: 600;
-    margin: s(7) 0 s(4) 0;
-    color: color(default-deep);
-  }
-
-  p {
-    @include p2;
-    color: color(default);
-    line-height: 1.8;
-    margin: 0 0 s(5) 0;
-  }
-}
-
-.codeBlock {
-  background: color(bg-modal);
-  border: 1px solid color(default-outline);
-  border-radius: r(3);
-  overflow: hidden;
-  margin-bottom: s(4);
-
-  .codeHeader {
-    padding: s(3) s(5);
-    background: color(bg-elevation-1);
-    border-bottom: 1px solid color(default-outline);
-    @include p4;
-    font-weight: 600;
-    color: color(default-deep);
-  }
-
-  pre {
-    margin: 0;
-    padding: s(5);
-    overflow-x: auto;
-    background: color(bg-elevation);
-
-    code {
-      @include p3;
-      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-      color: color(default-deep);
-      white-space: pre;
-    }
-  }
-}
-
-.note {
-  display: flex;
-  gap: s(4);
-  padding: s(5);
-  border-radius: r(4);
-  margin-bottom: s(5);
-  background: color(info-fill);
-  border: 1px solid color(info-outline);
-  color: color(info);
-
-  > i {
-    font-size: 20px;
-    flex-shrink: 0;
-    color: color(info);
-  }
-
-  strong {
-    display: block;
-    margin-bottom: s(2);
-  }
-}
-
-// Color Grid
-.colorGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: s(5);
-  margin-top: s(6);
-}
-
-.colorCard {
-  border: 1px solid color(default-outline);
-  border-radius: r(4);
-  overflow: hidden;
-  transition: all 0.3s;
-
-  &:hover {
-    border-color: color(primary);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  }
-}
-
-.colorPreview {
-  height: 120px;
-
-  &[data-color='primary'] {
-    background: color(primary);
-  }
-  &[data-color='default'] {
-    background: color(default);
-  }
-  &[data-color='default-deep'] {
-    background: color(default-deep);
-  }
-  &[data-color='info'] {
-    background: color(info);
-  }
-  &[data-color='link'] {
-    background: color(link);
-  }
-  &[data-color='success'] {
-    background: color(success);
-  }
-  &[data-color='warning'] {
-    background: color(warning);
-  }
-  &[data-color='danger'] {
-    background: color(danger);
-  }
-}
-
-.colorInfo {
-  padding: s(5);
-
-  h3 {
-    @include p2; font-weight: 600;
-    margin: 0 0 s(2) 0;
-    color: color(default-deep);
-  }
-}
-
-.colorName {
-  @include p4;
-  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-  color: color(default);
-  margin: 0 0 s(2) 0;
-}
-
-.colorDesc {
-  @include p4;
-  color: color(default);
-  margin: 0;
-}
-
-// Variants Grid
-.variantsGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: s(4);
-  margin-top: s(5);
-}
-
-.variantCard {
-  border: 1px solid color(default-outline);
-  border-radius: r(3);
-  overflow: hidden;
-  transition: all 0.3s;
-
-  &:hover {
-    border-color: color(primary);
-  }
-}
-
-.variantSwatch {
-  height: 80px;
-
-  &[data-variant='base'] {
-    background: color(primary);
-  }
-  &[data-variant='hover'] {
-    background: color(primary-hover);
-  }
-  &[data-variant='pressed'] {
-    background: color(primary-pressed);
-  }
-  &[data-variant='focus'] {
-    background: color(primary-focus);
-  }
-  &[data-variant='fill'] {
-    background: color(primary-fill);
-    border: 1px solid color(primary-outline);
-  }
-  &[data-variant='reverse'] {
-    background: color(primary-reverse);
-    border: 1px solid color(default-outline);
-  }
-  &[data-variant='outline'] {
-    background: color(primary-outline);
-  }
-}
-
-.variantInfo {
-  padding: s(4);
-
-  h4 {
-    @include p3-semibold;
-    margin: 0 0 s(1) 0;
-    color: color(default-deep);
-  }
-
-  p {
-    @include p5;
-    margin: 0 0 s(2) 0;
-    color: color(default);
-  }
-
-  code {
-    @include p5;
-    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-    color: color(primary);
-    background: color(primary-fill);
-    padding: 2px 6px;
-    border-radius: r(1);
-  }
-}
-
-// Demo
-.demo {
-  margin-top: s(5);
-  padding: s(5);
-  background: color(default-fill);
-  border: 1px solid color(default-outline);
-  border-radius: r(4);
-}
-
-.demoTitle {
-  @include p3-semibold;
-  margin-bottom: s(4);
-  color: color(default-deep);
-}
-
-.demoGrid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: s(4);
-
-  > div {
-    @include p3-semibold;
-    padding: s(3) s(5);
-    border-radius: r(2);
-  }
-}
-
-// Swatch Section
-.swatchSection {
-  margin-bottom: s(8);
-
-  h3 {
-    @include p2; font-weight: 600;
-    margin: 0 0 s(5) 0;
-    color: color(default-deep);
-  }
-}
-
-.swatchGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-  gap: s(4);
-}
-
-.swatchItem {
-  border: 1px solid color(default-outline);
-  border-radius: r(3);
-  overflow: hidden;
-  transition: all 0.3s;
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  }
-}
-
-.swatchColor {
-  height: 60px;
-
-  // Primary
-  &[data-color='primary'][data-variant='base'] { background: color(primary); }
-  &[data-color='primary'][data-variant='hover'] { background: color(primary-hover); }
-  &[data-color='primary'][data-variant='pressed'] { background: color(primary-pressed); }
-  &[data-color='primary'][data-variant='focus'] { background: color(primary-focus); }
-  &[data-color='primary'][data-variant='fill'] { background: color(primary-fill); border: 1px solid color(primary-outline); }
-  &[data-color='primary'][data-variant='reverse'] { background: color(primary-reverse); border: 1px solid color(default-outline); }
-  &[data-color='primary'][data-variant='outline'] { background: color(primary-outline); }
-
-  // Default
-  &[data-color='default'][data-variant='base'] { background: color(default); }
-  &[data-color='default'][data-variant='hover'] { background: color(default-hover); }
-  &[data-color='default'][data-variant='pressed'] { background: color(default-pressed); }
-  &[data-color='default'][data-variant='focus'] { background: color(default-focus); }
-  &[data-color='default'][data-variant='fill'] { background: color(default-fill); border: 1px solid color(default-outline); }
-  &[data-color='default'][data-variant='reverse'] { background: color(default-reverse); border: 1px solid color(default-outline); }
-  &[data-color='default'][data-variant='outline'] { background: color(default-outline); }
-
-  // Default Deep
-  &[data-color='default-deep'][data-variant='base'] { background: color(default-deep); }
-  &[data-color='default-deep'][data-variant='hover'] { background: color(default-deep-hover); }
-  &[data-color='default-deep'][data-variant='pressed'] { background: color(default-deep-pressed); }
-  &[data-color='default-deep'][data-variant='focus'] { background: color(default-deep-focus); }
-  &[data-color='default-deep'][data-variant='fill'] { background: color(default-deep-fill); border: 1px solid color(default-deep-outline); }
-  &[data-color='default-deep'][data-variant='reverse'] { background: color(default-deep-reverse); border: 1px solid color(default-outline); }
-  &[data-color='default-deep'][data-variant='outline'] { background: color(default-deep-outline); }
-
-  // Info
-  &[data-color='info'][data-variant='base'] { background: color(info); }
-  &[data-color='info'][data-variant='hover'] { background: color(info-hover); }
-  &[data-color='info'][data-variant='pressed'] { background: color(info-pressed); }
-  &[data-color='info'][data-variant='focus'] { background: color(info-focus); }
-  &[data-color='info'][data-variant='fill'] { background: color(info-fill); border: 1px solid color(info-outline); }
-  &[data-color='info'][data-variant='reverse'] { background: color(info-reverse); border: 1px solid color(default-outline); }
-  &[data-color='info'][data-variant='outline'] { background: color(info-outline); }
-
-  // Link
-  &[data-color='link'][data-variant='base'] { background: color(link); }
-  &[data-color='link'][data-variant='hover'] { background: color(link-hover); }
-  &[data-color='link'][data-variant='pressed'] { background: color(link-pressed); }
-  &[data-color='link'][data-variant='focus'] { background: color(link-focus); }
-  &[data-color='link'][data-variant='fill'] { background: color(link-fill); border: 1px solid color(link-outline); }
-  &[data-color='link'][data-variant='reverse'] { background: color(link-reverse); border: 1px solid color(default-outline); }
-  &[data-color='link'][data-variant='outline'] { background: color(link-outline); }
-
-  // Success
-  &[data-color='success'][data-variant='base'] { background: color(success); }
-  &[data-color='success'][data-variant='hover'] { background: color(success-hover); }
-  &[data-color='success'][data-variant='pressed'] { background: color(success-pressed); }
-  &[data-color='success'][data-variant='focus'] { background: color(success-focus); }
-  &[data-color='success'][data-variant='fill'] { background: color(success-fill); border: 1px solid color(success-outline); }
-  &[data-color='success'][data-variant='reverse'] { background: color(success-reverse); border: 1px solid color(default-outline); }
-  &[data-color='success'][data-variant='outline'] { background: color(success-outline); }
-
-  // Warning
-  &[data-color='warning'][data-variant='base'] { background: color(warning); }
-  &[data-color='warning'][data-variant='hover'] { background: color(warning-hover); }
-  &[data-color='warning'][data-variant='pressed'] { background: color(warning-pressed); }
-  &[data-color='warning'][data-variant='focus'] { background: color(warning-focus); }
-  &[data-color='warning'][data-variant='fill'] { background: color(warning-fill); border: 1px solid color(warning-outline); }
-  &[data-color='warning'][data-variant='reverse'] { background: color(warning-reverse); border: 1px solid color(default-outline); }
-  &[data-color='warning'][data-variant='outline'] { background: color(warning-outline); }
-
-  // Danger
-  &[data-color='danger'][data-variant='base'] { background: color(danger); }
-  &[data-color='danger'][data-variant='hover'] { background: color(danger-hover); }
-  &[data-color='danger'][data-variant='pressed'] { background: color(danger-pressed); }
-  &[data-color='danger'][data-variant='focus'] { background: color(danger-focus); }
-  &[data-color='danger'][data-variant='fill'] { background: color(danger-fill); border: 1px solid color(danger-outline); }
-  &[data-color='danger'][data-variant='reverse'] { background: color(danger-reverse); border: 1px solid color(default-outline); }
-  &[data-color='danger'][data-variant='outline'] { background: color(danger-outline); }
-}
-
-.swatchLabel {
-  padding: s(3);
-
-  div {
-    @include p5-semibold;
-    margin-bottom: s(1);
-    color: color(default-deep);
-  }
-
-  code {
-    @include p5;
-    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-    color: color(default);
-    display: block;
-  }
-}

package/src/app/foundation/colors/page.tsx

@@ -1,200 +0,0 @@
-import PageHeader from '@/components/PageHeader';
-import styles from './page.module.scss';
-
-export default function Colors() {
-  const colors = [
-    { name: 'primary', label: 'Primary', description: '주요 액션 및 브랜드 색상' },
-    { name: 'default', label: 'Default', description: '기본 UI 요소' },
-    { name: 'default-deep', label: 'Default Deep', description: '강조된 기본 색상' },
-    { name: 'info', label: 'Info', description: '정보성 메시지' },
-    { name: 'link', label: 'Link', description: '링크 및 네비게이션' },
-    { name: 'success', label: 'Success', description: '성공 상태 표시' },
-    { name: 'warning', label: 'Warning', description: '경고 메시지' },
-    { name: 'danger', label: 'Danger', description: '위험/오류 상태' },
-  ];
-
-  const variants = [
-    { name: 'base', label: 'Base', description: '기본 색상' },
-    { name: 'hover', label: 'Hover', description: '호버 상태' },
-    { name: 'pressed', label: 'Pressed', description: '눌림 상태' },
-    { name: 'focus', label: 'Focus', description: '포커스 상태' },
-    { name: 'fill', label: 'Fill', description: '배경 색상' },
-    { name: 'reverse', label: 'Reverse', description: '반전 색상 (텍스트)' },
-    { name: 'outline', label: 'Outline', description: '아웃라인 색상' },
-  ];
-
-  return (
-    <>
-      <PageHeader
-        title="컬러"
-        description="Podo UI의 시맨틱 컬러 시스템과 테마 사용법을 안내합니다"
-      />
-
-      <section className={styles.section}>
-        <h2>색상 시스템</h2>
-        <p>
-          Podo UI는 8가지 시맨틱 컬러를 제공하며, 각 컬러는 7가지 변형(base, hover, pressed, focus, fill, reverse, outline)을 가집니다.
-          CSS 변수 기반으로 구축되어 있어 라이트/다크 모드를 쉽게 전환할 수 있습니다.
-        </p>
-      </section>
-
-      <section className={styles.section}>
-        <h2>컬러 팔레트</h2>
-        <div className={styles.colorGrid}>
-          {colors.map((color) => (
-            <div key={color.name} className={styles.colorCard}>
-              <div className={styles.colorPreview} data-color={color.name}></div>
-              <div className={styles.colorInfo}>
-                <h3>{color.label}</h3>
-                <p className={styles.colorName}>{color.name}</p>
-                <p className={styles.colorDesc}>{color.description}</p>
-              </div>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>컬러 변형</h2>
-        <p>각 컬러는 다양한 상태에 대응하는 7가지 변형을 제공합니다:</p>
-
-        <div className={styles.variantsGrid}>
-          {variants.map((variant) => (
-            <div key={variant.name} className={styles.variantCard}>
-              <div className={styles.variantSwatch} data-variant={variant.name}></div>
-              <div className={styles.variantInfo}>
-                <h4>{variant.label}</h4>
-                <p>{variant.description}</p>
-                <code>primary-{variant.name}</code>
-              </div>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>SCSS에서 사용하기</h2>
-        <p>SCSS 모듈에서 color() 함수를 사용하여 컬러를 적용할 수 있습니다:</p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>component.module.scss</div>
-          <pre><code>{`@use 'podo-ui/mixin' as *;
-
-.button {
-  // 기본 색상
-  background: color(primary);
-  color: color(primary-reverse);
-  border: 1px solid color(primary);
-
-  // 호버 상태
-  &:hover {
-    background: color(primary-hover);
-    border-color: color(primary-hover);
-  }
-
-  // 눌림 상태
-  &:active {
-    background: color(primary-pressed);
-  }
-
-  // 포커스 상태
-  &:focus {
-    outline: 2px solid color(primary-outline);
-  }
-}
-
-// Fill 스타일 버튼
-.buttonFill {
-  background: color(primary-fill);
-  color: color(primary);
-  border: 1px solid color(primary-outline);
-}`}</code></pre>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>CSS 클래스로 사용하기</h2>
-        <p>HTML 요소에 직접 컬러 클래스를 적용할 수 있습니다:</p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>HTML</div>
-          <pre><code>{`<!-- 텍스트 색상 -->
-<div class="primary">Primary 색상 텍스트</div>
-<div class="danger">Danger 색상 텍스트</div>
-
-<!-- 배경 색상 -->
-<div class="bg-primary">Primary 배경</div>
-<div class="bg-success-fill">Success Fill 배경</div>
-
-<!-- 테두리 색상 -->
-<div class="border-primary">Primary 테두리</div>
-<div class="border-warning">Warning 테두리</div>`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제:</div>
-          <div className={styles.demoGrid}>
-            <div className="primary">Primary Text</div>
-            <div className="info">Info Text</div>
-            <div className="success">Success Text</div>
-            <div className="warning">Warning Text</div>
-            <div className="danger">Danger Text</div>
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>다크 모드</h2>
-        <p>
-          Podo UI는 자동으로 다크 모드를 지원합니다.
-          오른쪽 상단의 테마 토글 버튼을 클릭하여 라이트/다크 모드를 전환해보세요.
-        </p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>JavaScript</div>
-          <pre><code>{`// Light 모드
-document.documentElement.setAttribute('data-color-mode', 'light');
-
-// Dark 모드
-document.documentElement.setAttribute('data-color-mode', 'dark');
-
-// 자동 (브라우저 설정 따름)
-document.documentElement.setAttribute('data-color-mode', '');`}</code></pre>
-        </div>
-
-        <div className={styles.note}>
-          <i className="icon-info"></i>
-          <div>
-            <strong>팁:</strong> CSS 변수 기반으로 구축되어 있어 페이지 새로고침 없이 즉시 테마가 전환됩니다.
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>전체 컬러 스와치</h2>
-        <p>모든 컬러와 변형을 한눈에 확인하세요:</p>
-
-        {colors.map((color) => (
-          <div key={color.name} className={styles.swatchSection}>
-            <h3>{color.label} ({color.name})</h3>
-            <div className={styles.swatchGrid}>
-              {variants.map((variant) => (
-                <div key={variant.name} className={styles.swatchItem}>
-                  <div
-                    className={styles.swatchColor}
-                    data-color={color.name}
-                    data-variant={variant.name}
-                  ></div>
-                  <div className={styles.swatchLabel}>
-                    <div>{variant.label}</div>
-                    <code>{color.name}-{variant.name}</code>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        ))}
-      </section>
-    </>
-  );
-}