podo-ui 0.1.46 → 0.2.0

package/src/app/layout/grid/page.tsx

@@ -1,217 +0,0 @@
-import PageHeader from '@/components/PageHeader';
-import styles from './page.module.scss';
-
-export default function Grid() {
-  return (
-    <>
-      <PageHeader
-        title="그리드"
-        description="Podo UI의 그리드 시스템과 사용법을 안내합니다"
-      />
-
-      <section className={styles.section}>
-        <h2>그리드 시스템</h2>
-        <p>
-          Podo UI는 반응형 그리드 시스템을 제공합니다.
-          PC에서는 12칸, 태블릿에서는 6칸, 모바일에서는 4칸으로 자동 조정됩니다.
-        </p>
-
-        <div className={styles.infoGrid}>
-          <div className={styles.infoCard}>
-            <div className={styles.gridPreview} data-cols="12">
-              {[...Array(12)].map((_, i) => (
-                <div key={i} className={styles.gridCol}></div>
-              ))}
-            </div>
-            <h3>PC (1280px~)</h3>
-            <p>12칸 그리드</p>
-          </div>
-          <div className={styles.infoCard}>
-            <div className={styles.gridPreview} data-cols="6">
-              {[...Array(6)].map((_, i) => (
-                <div key={i} className={styles.gridCol}></div>
-              ))}
-            </div>
-            <h3>Tablet (768px~1279px)</h3>
-            <p>6칸 그리드</p>
-          </div>
-          <div className={styles.infoCard}>
-            <div className={styles.gridPreview} data-cols="4">
-              {[...Array(4)].map((_, i) => (
-                <div key={i} className={styles.gridCol}></div>
-              ))}
-            </div>
-            <h3>Mobile (~767px)</h3>
-            <p>4칸 그리드</p>
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>기본 그리드</h2>
-        <p>grid 클래스를 사용하여 자동 반응형 그리드를 생성합니다:</p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>HTML</div>
-          <pre><code>{`<section class="grid">
-  <div class="w-4">4칸 (33.33%)</div>
-  <div class="w-4">4칸 (33.33%)</div>
-  <div class="w-4">4칸 (33.33%)</div>
-  <div class="w-6">6칸 (50%)</div>
-  <div class="w-6">6칸 (50%)</div>
-  <div class="w-12">12칸 (100%)</div>
-</section>`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제:</div>
-          <section className="grid">
-            <div className="w-4">
-              <div className={styles.gridItem}>w-4</div>
-            </div>
-            <div className="w-4">
-              <div className={styles.gridItem}>w-4</div>
-            </div>
-            <div className="w-4">
-              <div className={styles.gridItem}>w-4</div>
-            </div>
-            <div className="w-6">
-              <div className={styles.gridItem}>w-6</div>
-            </div>
-            <div className="w-6">
-              <div className={styles.gridItem}>w-6</div>
-            </div>
-            <div className="w-12">
-              <div className={styles.gridItem}>w-12</div>
-            </div>
-          </section>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>그리드 칸 크기</h2>
-        <p>w-1부터 w-12까지 사용 가능합니다:</p>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>모든 칸 크기:</div>
-          <section className="grid">
-            <div className="w-12"><div className={styles.gridItem}>w-12 (100%)</div></div>
-            <div className="w-11"><div className={styles.gridItem}>w-11</div></div>
-            <div className="w-1"><div className={styles.gridItem}>w-1</div></div>
-            <div className="w-10"><div className={styles.gridItem}>w-10</div></div>
-            <div className="w-2"><div className={styles.gridItem}>w-2</div></div>
-            <div className="w-9"><div className={styles.gridItem}>w-9</div></div>
-            <div className="w-3"><div className={styles.gridItem}>w-3</div></div>
-            <div className="w-8"><div className={styles.gridItem}>w-8</div></div>
-            <div className="w-4"><div className={styles.gridItem}>w-4</div></div>
-            <div className="w-7"><div className={styles.gridItem}>w-7</div></div>
-            <div className="w-5"><div className={styles.gridItem}>w-5</div></div>
-            <div className="w-6"><div className={styles.gridItem}>w-6</div></div>
-            <div className="w-6"><div className={styles.gridItem}>w-6</div></div>
-          </section>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>고정 칼럼 그리드</h2>
-        <p>grid-fix-N 클래스를 사용하여 고정된 칼럼 수의 그리드를 만들 수 있습니다 (2~6칸):</p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>HTML</div>
-          <pre><code>{`<!-- 2칸 고정 그리드 -->
-<section class="grid grid-fix-2">
-  <div class="w-1_2">50%</div>
-  <div class="w-1_2">50%</div>
-</section>
-
-<!-- 3칸 고정 그리드 -->
-<section class="grid grid-fix-3">
-  <div class="w-1_3">33.33%</div>
-  <div class="w-2_3">66.67%</div>
-</section>
-
-<!-- 4칸 고정 그리드 -->
-<section class="grid grid-fix-4">
-  <div class="w-1_4">25%</div>
-  <div class="w-3_4">75%</div>
-</section>`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>2칸 고정 (grid-fix-2):</div>
-          <section className="grid grid-fix-2">
-            <div className="w-1_2"><div className={styles.gridItem}>w-1_2 (50%)</div></div>
-            <div className="w-1_2"><div className={styles.gridItem}>w-1_2 (50%)</div></div>
-          </section>
-
-          <div className={styles.demoTitle}>3칸 고정 (grid-fix-3):</div>
-          <section className="grid grid-fix-3">
-            <div className="w-1_3"><div className={styles.gridItem}>w-1_3</div></div>
-            <div className="w-2_3"><div className={styles.gridItem}>w-2_3</div></div>
-          </section>
-
-          <div className={styles.demoTitle}>4칸 고정 (grid-fix-4):</div>
-          <section className="grid grid-fix-4">
-            <div className="w-1_4"><div className={styles.gridItem}>w-1_4</div></div>
-            <div className="w-1_4"><div className={styles.gridItem}>w-1_4</div></div>
-            <div className="w-2_4"><div className={styles.gridItem}>w-2_4</div></div>
-          </section>
-
-          <div className={styles.demoTitle}>5칸 고정 (grid-fix-5):</div>
-          <section className="grid grid-fix-5">
-            <div className="w-2_5"><div className={styles.gridItem}>w-2_5</div></div>
-            <div className="w-3_5"><div className={styles.gridItem}>w-3_5</div></div>
-          </section>
-
-          <div className={styles.demoTitle}>6칸 고정 (grid-fix-6):</div>
-          <section className="grid grid-fix-6">
-            <div className="w-2_6"><div className={styles.gridItem}>w-2_6</div></div>
-            <div className="w-4_6"><div className={styles.gridItem}>w-4_6</div></div>
-          </section>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>전체 너비</h2>
-        <p>w-full 클래스는 현재 그리드의 전체 너비를 차지합니다:</p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>HTML</div>
-          <pre><code>{`<section class="grid">
-  <div class="w-4">4칸</div>
-  <div class="w-4">4칸</div>
-  <div class="w-4">4칸</div>
-  <div class="w-full">전체 너비 (PC: 12칸, Tablet: 6칸, Mobile: 4칸)</div>
-</section>`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제:</div>
-          <section className="grid">
-            <div className="w-4"><div className={styles.gridItem}>w-4</div></div>
-            <div className="w-4"><div className={styles.gridItem}>w-4</div></div>
-            <div className="w-4"><div className={styles.gridItem}>w-4</div></div>
-            <div className="w-full"><div className={styles.gridItem}>w-full</div></div>
-          </section>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>반응형 동작</h2>
-        <p>그리드는 화면 크기에 따라 자동으로 조정됩니다. 브라우저 창 크기를 조절하여 확인해보세요:</p>
-
-        <div className={styles.note}>
-          <i className="icon-info"></i>
-          <div>
-            <strong>브레이크포인트:</strong>
-            <ul style={{ margin: '8px 0 0 0', paddingLeft: '20px' }}>
-              <li>PC: 1280px 이상 (12칸 그리드, 간격 24px)</li>
-              <li>Tablet: 768px ~ 1279px (6칸 그리드, 간격 16px)</li>
-              <li>Mobile: 767px 이하 (4칸 그리드, 간격 16px)</li>
-            </ul>
-          </div>
-        </div>
-      </section>
-    </>
-  );
-}

package/src/app/layout/responsive/page.module.scss

@@ -1,237 +0,0 @@
-@use '../../../../mixin' as *;
-
-.section {
-  margin-bottom: s(10);
-
-  h2 {
-    @include display5;
-    margin: 0 0 s(5) 0;
-    color: color(default-deep);
-  }
-
-  h1 {
-    margin: 0 0 s(4) 0;
-  }
-
-  p {
-    @include p2;
-    color: color(default);
-    line-height: 1.8;
-    margin: 0 0 s(5) 0;
-
-    code {
-      @include p3;
-      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-      color: color(primary);
-      background: color(primary-fill);
-      padding: 2px 6px;
-      border-radius: r(1);
-    }
-  }
-}
-
-.breakpointGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: s(5);
-  margin-top: s(6);
-}
-
-.breakpointCard {
-  padding: s(6);
-  background: color(bg-modal);
-  border: 1px solid color(default-outline);
-  border-radius: r(4);
-  text-align: center;
-  transition: all 0.3s;
-
-  &:hover {
-    border-color: color(primary);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  }
-
-  h3 {
-    @include p1;
-    font-weight: 600;
-    margin: s(3) 0 s(2) 0;
-    color: color(default-deep);
-  }
-
-  code {
-    @include p4;
-    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-    color: color(primary);
-    background: color(primary-fill);
-    padding: s(2) s(3);
-    border-radius: r(2);
-    display: inline-block;
-    margin-top: s(2);
-  }
-}
-
-.breakpointIcon {
-  width: 60px;
-  height: 60px;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
-  border-radius: r(full);
-  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
-
-  i {
-    font-size: 28px;
-    color: white;
-  }
-}
-
-.breakpointValue {
-  @include p3;
-  font-weight: 600;
-  margin: 0 !important;
-  color: color(primary);
-}
-
-.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-top: 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);
-  }
-}
-
-.demo {
-  margin-top: s(5);
-  padding: s(5);
-  background: color(bg-modal);
-  border: 1px solid color(default-outline);
-  border-radius: r(4);
-}
-
-.demoTitle {
-  @include p3-semibold;
-  margin-bottom: s(4);
-  color: color(default-deep);
-}
-
-.hideDemo {
-  display: flex;
-  flex-direction: column;
-  gap: s(3);
-}
-
-.demoBox {
-  padding: s(4);
-  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
-  border: 1px solid rgba(139, 92, 246, 0.3);
-  border-radius: r(2);
-  text-align: center;
-  @include p3-semibold;
-  color: color(primary);
-}
-
-.gridItem {
-  padding: s(4);
-  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
-  border: 1px solid rgba(139, 92, 246, 0.3);
-  border-radius: r(2);
-  text-align: center;
-  @include p3-semibold;
-  color: color(primary);
-  min-height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.deviceIndicator {
-  padding: s(6);
-  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
-  border: 2px solid color(primary);
-  border-radius: r(4);
-  margin-top: s(5);
-}
-
-.deviceInfo {
-  display: flex;
-  align-items: center;
-  gap: s(4);
-
-  strong {
-    @include p1;
-    font-weight: 600;
-    color: color(primary);
-    display: block;
-    margin-bottom: s(1);
-  }
-
-  p {
-    @include p3;
-    margin: 0;
-    color: color(default);
-  }
-}
-
-.deviceIcon {
-  width: 60px;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
-  border-radius: r(full);
-  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
-  flex-shrink: 0;
-
-  i {
-    font-size: 28px;
-    color: white;
-  }
-}