podo-ui 0.1.46 → 0.2.0

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

@@ -1,289 +0,0 @@
-import PageHeader from '@/components/PageHeader';
-import styles from './page.module.scss';
-
-export default function Spacing() {
-  const spacingValues = [
-    { key: 0, value: '0' },
-    { key: 1, value: '2px' },
-    { key: 2, value: '4px' },
-    { key: 3, value: '8px' },
-    { key: 4, value: '12px' },
-    { key: 5, value: '16px' },
-    { key: 6, value: '24px' },
-    { key: 7, value: '32px' },
-    { key: 8, value: '40px' },
-    { key: 9, value: '48px' },
-    { key: 10, value: '64px' },
-    { key: 11, value: '80px' },
-    { key: 12, value: '96px' },
-    { key: 13, value: '160px' },
-  ];
-
-  const radiusValues = [
-    { key: 0, value: '0' },
-    { key: 1, value: '2px' },
-    { key: 2, value: '4px' },
-    { key: 3, value: '6px' },
-    { key: 4, value: '8px' },
-    { key: 5, value: '12px' },
-    { key: 6, value: '20px' },
-    { key: 'full', value: '9999px' },
-  ];
-
-  return (
-    <>
-      <PageHeader
-        title="간격"
-        description="Podo UI의 여백과 모서리 반경 시스템을 안내합니다"
-      />
-
-      <section className={styles.section}>
-        <h2>간격 시스템</h2>
-        <p>
-          Podo UI는 0부터 13까지 14단계의 여백 값을 제공합니다.
-          일관된 여백을 사용하여 시각적 리듬을 만들고 정돈된 레이아웃을 구성할 수 있습니다.
-        </p>
-      </section>
-
-      <section className={styles.section}>
-        <h2>간격 값</h2>
-        <p>사용 가능한 모든 간격 값입니다:</p>
-
-        <div className={styles.spacingGrid}>
-          {spacingValues.map((spacing) => (
-            <div key={spacing.key} className={styles.spacingCard}>
-              <div className={styles.spacingInfo}>
-                <div className={styles.spacingKey}>s({spacing.key})</div>
-                <div className={styles.spacingValue}>{spacing.value}</div>
-              </div>
-              <div className={styles.spacingPreview}>
-                <div
-                  className={styles.spacingBar}
-                  style={{ width: spacing.value }}
-                />
-              </div>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>SCSS에서 사용하기</h2>
-        <p>SCSS 모듈에서 s() 함수를 사용하여 간격을 적용할 수 있습니다:</p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>component.module.scss</div>
-          <pre><code>{`@use 'podo-ui/mixin' as *;
-
-.container {
-  // 마진
-  margin: s(4);           // 12px
-  margin-top: s(5);       // 16px
-  margin-bottom: s(6);    // 24px
-
-  // 패딩
-  padding: s(3) s(5);     // 8px 16px
-  padding-left: s(4);     // 12px
-
-  // 간격
-  gap: s(3);              // 8px
-
-  // 여러 속성에 사용
-  border-width: s(1);     // 2px
-  min-height: s(10);      // 64px
-}`}</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="m-4">Margin 12px</div>
-<div class="m-t-5">Margin Top 16px</div>
-<div class="m-b-6">Margin Bottom 24px</div>
-<div class="m-l-4">Margin Left 12px</div>
-<div class="m-r-4">Margin Right 12px</div>
-
-<!-- 패딩 -->
-<div class="p-4">Padding 12px</div>
-<div class="p-t-5">Padding Top 16px</div>
-<div class="p-b-6">Padding Bottom 24px</div>
-<div class="p-l-4">Padding Left 12px</div>
-<div class="p-r-4">Padding Right 12px</div>`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제:</div>
-          <div className={styles.spacingDemo}>
-            <div className="p-4" style={{ background: '#f3e8ff', border: '1px solid #7c3aed' }}>
-              Padding 12px (p-4)
-            </div>
-            <div className="p-6" style={{ background: '#f3e8ff', border: '1px solid #7c3aed' }}>
-              Padding 24px (p-6)
-            </div>
-            <div className="p-8" style={{ background: '#f3e8ff', border: '1px solid #7c3aed' }}>
-              Padding 40px (p-8)
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>모서리 반경</h2>
-        <p>Podo UI는 8가지 모서리 반경 값을 제공합니다. r() 함수를 사용합니다:</p>
-
-        <div className={styles.radiusGrid}>
-          {radiusValues.map((radius) => (
-            <div key={radius.key} className={styles.radiusCard}>
-              <div className={styles.radiusInfo}>
-                <div className={styles.radiusKey}>r({radius.key})</div>
-                <div className={styles.radiusValue}>{radius.value}</div>
-              </div>
-              <div className={styles.radiusPreview}>
-                <div
-                  className={styles.radiusBox}
-                  style={{ borderRadius: radius.value }}
-                />
-              </div>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>Border Radius SCSS 사용법</h2>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>component.module.scss</div>
-          <pre><code>{`@use 'podo-ui/mixin' as *;
-
-.card {
-  border-radius: r(4);    // 8px
-}
-
-.button {
-  border-radius: r(2);    // 4px
-}
-
-.avatar {
-  border-radius: r(full); // 9999px (원형)
-}
-
-.input {
-  border-radius: r(3);    // 6px
-}
-
-.modal {
-  border-radius: r(5);    // 12px
-}`}</code></pre>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>Border Radius CSS 클래스</h2>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>HTML</div>
-          <pre><code>{`<div class="r-0">No Radius</div>
-<div class="r-2">Radius 4px</div>
-<div class="r-4">Radius 8px</div>
-<div class="r-full">Radius Full (원형)</div>`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제:</div>
-          <div className={styles.radiusDemo}>
-            <div className="r-0 p-4" style={{ background: '#f3e8ff', border: '1px solid #7c3aed' }}>
-              r-0
-            </div>
-            <div className="r-2 p-4" style={{ background: '#f3e8ff', border: '1px solid #7c3aed' }}>
-              r-2 (4px)
-            </div>
-            <div className="r-4 p-4" style={{ background: '#f3e8ff', border: '1px solid #7c3aed' }}>
-              r-4 (8px)
-            </div>
-            <div className="r-6 p-4" style={{ background: '#f3e8ff', border: '1px solid #7c3aed' }}>
-              r-6 (20px)
-            </div>
-            <div className="r-full p-4" style={{ background: '#f3e8ff', border: '1px solid #7c3aed', width: '80px', height: '80px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-              r-full
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>실전 예제</h2>
-        <p>간격과 모서리 반경을 함께 사용한 카드 컴포넌트 예제:</p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>component.module.scss</div>
-          <pre><code>{`@use 'podo-ui/mixin' as *;
-
-.card {
-  padding: s(6);
-  margin-bottom: s(5);
-  border-radius: r(4);
-  background: color(bg-modal);
-  border: 1px solid color(default-outline);
-
-  .cardHeader {
-    margin-bottom: s(4);
-    padding-bottom: s(3);
-    border-bottom: 1px solid color(default-outline);
-  }
-
-  .cardTitle {
-    @include display6;
-    margin-bottom: s(2);
-  }
-
-  .cardContent {
-    @include p3;
-    line-height: 1.6;
-  }
-
-  .cardFooter {
-    margin-top: s(5);
-    padding-top: s(4);
-    border-top: 1px solid color(default-outline);
-    display: flex;
-    gap: s(3);
-  }
-}`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 렌더링:</div>
-          <div className={styles.cardExample}>
-            <div className={styles.cardHeader}>
-              <h3>카드 제목</h3>
-            </div>
-            <div className={styles.cardContent}>
-              이 카드는 s() 함수로 일관된 여백을 적용하고, r() 함수로 모서리를 둥글게 만들었습니다.
-              모든 간격이 디자인 시스템의 값을 따르고 있습니다.
-            </div>
-            <div className={styles.cardFooter}>
-              <button className="primary">확인</button>
-              <button className="default-deep">취소</button>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <div className={styles.note}>
-          <i className="icon-info"></i>
-          <div>
-            <strong>팁:</strong> 일관된 간격 시스템을 사용하면 시각적으로 안정감 있는 레이아웃을 만들 수 있습니다.
-            임의의 픽셀 값 대신 항상 디자인 시스템의 값을 사용하세요.
-          </div>
-        </div>
-      </section>
-    </>
-  );
-}

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

@@ -1,148 +0,0 @@
-@use '../../../../mixin' as *;
-
-.section {
-  margin-bottom: s(10);
-
-  h2 {
-    @include display5;
-    margin: 0 0 s(5) 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);
-  }
-}
-
-.typeGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: s(5);
-  margin-top: s(6);
-}
-
-.typeCard {
-  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);
-  }
-}
-
-.typePreview {
-  padding: s(6);
-  background: color(bg-elevation-1);
-  border-bottom: 1px solid color(default-outline);
-  min-height: 120px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  > div {
-    color: color(default-deep);
-  }
-}
-
-.typeInfo {
-  padding: s(5);
-
-  h3 {
-    @include p2;
-    font-weight: 600;
-    margin: 0 0 s(3) 0;
-    color: color(primary);
-    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-  }
-}
-
-.typeSpecs {
-  @include p4;
-  color: color(default);
-
-  > div {
-    margin-bottom: s(2);
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    strong {
-      font-weight: 600;
-      color: color(default-deep);
-    }
-  }
-}
-
-.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);
-}

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

@@ -1,207 +0,0 @@
-import PageHeader from '@/components/PageHeader';
-import styles from './page.module.scss';
-
-export default function Typography() {
-  const displayStyles = [
-    { name: 'display1', fontSize: '60px', fontWeight: 600, lineHeight: 1.2, mobile: '36px' },
-    { name: 'display2', fontSize: '54px', fontWeight: 600, lineHeight: 1.2, mobile: '32px' },
-    { name: 'display3', fontSize: '48px', fontWeight: 600, lineHeight: 1.2, mobile: '28px' },
-    { name: 'display4', fontSize: '42px', fontWeight: 600, lineHeight: 1.2, mobile: '24px' },
-    { name: 'display5', fontSize: '36px', fontWeight: 600, lineHeight: 1.2, mobile: '20px' },
-    { name: 'display6', fontSize: '24px', fontWeight: 600, lineHeight: 1.4, mobile: '18px' },
-    { name: 'display7', fontSize: '20px', fontWeight: 600, lineHeight: 1.6, mobile: '16px' },
-  ];
-
-  const paragraphStyles = [
-    { name: 'p1', fontSize: '24px', fontWeight: 400, lineHeight: 1.4, mobile: '20px' },
-    { name: 'p2', fontSize: '20px', fontWeight: 400, lineHeight: 1.6, mobile: '16px' },
-    { name: 'p3', fontSize: '16px', fontWeight: 400, lineHeight: 1.6, mobile: '14px' },
-    { name: 'p3-semibold', fontSize: '16px', fontWeight: 600, lineHeight: 1.6, mobile: '14px' },
-    { name: 'p4', fontSize: '14px', fontWeight: 400, lineHeight: 1.6, mobile: '12px' },
-    { name: 'p4-semibold', fontSize: '14px', fontWeight: 600, lineHeight: 1.6, mobile: '12px' },
-    { name: 'p5', fontSize: '12px', fontWeight: 400, lineHeight: 1.6, mobile: '12px' },
-    { name: 'p5-semibold', fontSize: '12px', fontWeight: 600, lineHeight: 1.6, mobile: '12px' },
-  ];
-
-  const headingStyles = [
-    { name: 'h1', fontSize: '54px', fontWeight: 600, lineHeight: 1.2, mobile: '24px' },
-    { name: 'h2', fontSize: '42px', fontWeight: 600, lineHeight: 1.2, mobile: '18px' },
-    { name: 'h3', fontSize: '36px', fontWeight: 600, lineHeight: 1.2, mobile: '16px' },
-  ];
-
-  return (
-    <>
-      <PageHeader
-        title="타이포그래피"
-        description="Podo UI의 타이포그래피 시스템과 사용법을 안내합니다"
-      />
-
-      <section className={styles.section}>
-        <h2>타이포그래피 시스템</h2>
-        <p>
-          Podo UI는 Display, Paragraph, Heading 스타일을 제공하며, 각 스타일은 모바일 환경에 맞춰 자동으로 조정됩니다.
-          Pretendard 폰트를 기본으로 사용합니다.
-        </p>
-      </section>
-
-      <section className={styles.section}>
-        <h2>Display 스타일</h2>
-        <p>대형 제목과 히어로 섹션에 사용되는 Display 스타일입니다.</p>
-
-        <div className={styles.typeGrid}>
-          {displayStyles.map((style) => (
-            <div key={style.name} className={styles.typeCard}>
-              <div className={styles.typePreview}>
-                <div className={style.name}>타이포그래피</div>
-              </div>
-              <div className={styles.typeInfo}>
-                <h3>{style.name}</h3>
-                <div className={styles.typeSpecs}>
-                  <div><strong>Size:</strong> {style.fontSize} (Mobile: {style.mobile})</div>
-                  <div><strong>Weight:</strong> {style.fontWeight}</div>
-                  <div><strong>Line Height:</strong> {style.lineHeight}</div>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>Paragraph 스타일</h2>
-        <p>본문과 설명 텍스트에 사용되는 Paragraph 스타일입니다.</p>
-
-        <div className={styles.typeGrid}>
-          {paragraphStyles.map((style) => (
-            <div key={style.name} className={styles.typeCard}>
-              <div className={styles.typePreview}>
-                <div className={style.name}>
-                  본문 텍스트는 읽기 쉽고 명확해야 합니다.
-                </div>
-              </div>
-              <div className={styles.typeInfo}>
-                <h3>{style.name}</h3>
-                <div className={styles.typeSpecs}>
-                  <div><strong>Size:</strong> {style.fontSize} (Mobile: {style.mobile})</div>
-                  <div><strong>Weight:</strong> {style.fontWeight}</div>
-                  <div><strong>Line Height:</strong> {style.lineHeight}</div>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>Heading 스타일</h2>
-        <p>기본 HTML 태그에 자동으로 적용되는 스타일입니다.</p>
-
-        <div className={styles.typeGrid}>
-          {headingStyles.map((style) => (
-            <div key={style.name} className={styles.typeCard}>
-              <div className={styles.typePreview}>
-                {style.name === 'h1' && <h1>Heading 1</h1>}
-                {style.name === 'h2' && <h2>Heading 2</h2>}
-                {style.name === 'h3' && <h3>Heading 3</h3>}
-              </div>
-              <div className={styles.typeInfo}>
-                <h3>{style.name}</h3>
-                <div className={styles.typeSpecs}>
-                  <div><strong>Size:</strong> {style.fontSize} (Mobile: {style.mobile})</div>
-                  <div><strong>Weight:</strong> {style.fontWeight}</div>
-                  <div><strong>Line Height:</strong> {style.lineHeight}</div>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>CSS 클래스로 사용하기</h2>
-        <p>HTML 요소에 직접 타이포그래피 클래스를 적용할 수 있습니다:</p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>HTML</div>
-          <pre><code>{`<!-- Display 스타일 -->
-<div class="display1">대형 제목</div>
-<div class="display4">중형 제목</div>
-<div class="display7">소형 제목</div>
-
-<!-- Paragraph 스타일 -->
-<p class="p1">큰 본문 텍스트</p>
-<p class="p3">일반 본문 텍스트</p>
-<p class="p3-semibold">강조된 본문 텍스트</p>
-<p class="p5">작은 본문 텍스트</p>`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제:</div>
-          <div className="display4" style={{ marginBottom: '16px' }}>Display 4 제목</div>
-          <div className="p2" style={{ marginBottom: '12px' }}>P2 크기의 본문 텍스트입니다.</div>
-          <div className="p3">P3 크기의 본문 텍스트입니다.</div>
-          <div className="p3-semibold">P3 Semibold 강조된 텍스트입니다.</div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>SCSS에서 사용하기</h2>
-        <p>SCSS 모듈에서 믹스인을 사용하여 타이포그래피를 적용할 수 있습니다:</p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>component.module.scss</div>
-          <pre><code>{`@use 'podo-ui/mixin' as *;
-
-.title {
-  @include display3;
-  margin-bottom: s(5);
-}
-
-.subtitle {
-  @include display6;
-  color: color(default-deep);
-}
-
-.body {
-  @include p3;
-  line-height: 1.8;
-}
-
-.caption {
-  @include p5;
-  color: color(default);
-}`}</code></pre>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>폰트 패밀리</h2>
-        <p>기본 폰트로 Pretendard를 사용하며, CSS 변수로 커스터마이징이 가능합니다:</p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>CSS</div>
-          <pre><code>{`:root {
-  --base-font-family: 'Pretendard', sans-serif;
-}
-
-/* 커스텀 폰트 사용 */
-:root {
-  --base-font-family: 'Your Custom Font', -apple-system, sans-serif;
-}`}</code></pre>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>반응형</h2>
-        <p>모든 타이포그래피 스타일은 모바일 환경에 맞춰 자동으로 크기가 조정됩니다.</p>
-
-        <div className={styles.note}>
-          <i className="icon-info"></i>
-          <div>
-            <strong>팁:</strong> 모바일 브레이크포인트는 768px 이하입니다. 창 크기를 조정하여 타이포그래피 변화를 확인해보세요.
-          </div>
-        </div>
-      </section>
-    </>
-  );
-}