podo-ui 0.1.46 → 0.2.0

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

@@ -1,279 +0,0 @@
-import PageHeader from '@/components/PageHeader';
-import styles from './page.module.scss';
-
-export default function Responsive() {
-  return (
-    <>
-      <PageHeader
-        title="반응형"
-        description="Podo UI의 반응형 디자인 시스템과 미디어 쿼리 사용법을 안내합니다"
-      />
-
-      <section className={styles.section}>
-        <h2>브레이크포인트</h2>
-        <p>
-          Podo UI는 3가지 브레이크포인트를 제공합니다: PC, Tablet, Mobile.
-          각 디바이스에 최적화된 레이아웃을 쉽게 구성할 수 있습니다.
-        </p>
-
-        <div className={styles.breakpointGrid}>
-          <div className={styles.breakpointCard}>
-            <div className={styles.breakpointIcon}>
-              <i className="icon-menu"></i>
-            </div>
-            <h3>PC</h3>
-            <p className={styles.breakpointValue}>1280px 이상</p>
-            <code>@include pc</code>
-          </div>
-          <div className={styles.breakpointCard}>
-            <div className={styles.breakpointIcon}>
-              <i className="icon-menu"></i>
-            </div>
-            <h3>Tablet</h3>
-            <p className={styles.breakpointValue}>768px ~ 1279px</p>
-            <code>@include tb</code>
-          </div>
-          <div className={styles.breakpointCard}>
-            <div className={styles.breakpointIcon}>
-              <i className="icon-menu"></i>
-            </div>
-            <h3>Mobile</h3>
-            <p className={styles.breakpointValue}>767px 이하</p>
-            <code>@include mo</code>
-          </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 *;
-
-.container {
-  padding: s(8);
-  font-size: 18px;
-
-  // Tablet (768px ~ 1279px)
-  @include tb {
-    padding: s(6);
-    font-size: 16px;
-  }
-
-  // Mobile (767px 이하)
-  @include mo {
-    padding: s(4);
-    font-size: 14px;
-  }
-
-  // PC (1280px 이상)
-  @include pc {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-}`}</code></pre>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>반응형 숨김</h2>
-        <p>특정 디바이스에서만 요소를 숨기는 클래스를 제공합니다:</p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>HTML</div>
-          <pre><code>{`<!-- 모든 디바이스에서 숨김 -->
-<div class="hide">항상 숨김</div>
-
-<!-- PC에서만 숨김 -->
-<div class="hide-pc">PC에서만 숨김</div>
-
-<!-- Tablet에서만 숨김 -->
-<div class="hide-tb">Tablet에서만 숨김</div>
-
-<!-- Mobile에서만 숨김 -->
-<div class="hide-mo">Mobile에서만 숨김</div>`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제 (창 크기를 조절해보세요):</div>
-          <div className={styles.hideDemo}>
-            <div className="hide-pc"><div className={styles.demoBox}>PC에서 숨김</div></div>
-            <div className="hide-tb"><div className={styles.demoBox}>Tablet에서 숨김</div></div>
-            <div className="hide-mo"><div className={styles.demoBox}>Mobile에서 숨김</div></div>
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>반응형 그리드 예제</h2>
-        <p>그리드 시스템은 자동으로 반응형으로 동작합니다:</p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>HTML</div>
-          <pre><code>{`<!-- PC: 12칸, Tablet: 6칸, Mobile: 4칸으로 자동 조정 -->
-<section class="grid">
-  <div class="w-3">25%</div>
-  <div class="w-3">25%</div>
-  <div class="w-3">25%</div>
-  <div class="w-3">25%</div>
-</section>`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제:</div>
-          <section className="grid">
-            <div className="w-3"><div className={styles.gridItem}>w-3 (25%)</div></div>
-            <div className="w-3"><div className={styles.gridItem}>w-3 (25%)</div></div>
-            <div className="w-3"><div className={styles.gridItem}>w-3 (25%)</div></div>
-            <div className="w-3"><div className={styles.gridItem}>w-3 (25%)</div></div>
-          </section>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>반응형 타이포그래피</h2>
-        <p>모든 타이포그래피 스타일은 자동으로 모바일에서 작아집니다:</p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>예시</div>
-          <pre><code>{`// display1
-PC: 60px → Mobile: 36px
-
-// display4
-PC: 42px → Mobile: 24px
-
-// h1
-PC: 54px → Mobile: 24px
-
-// p3
-PC: 16px → Mobile: 14px`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제:</div>
-          <h1>H1 제목 (PC: 54px, Mobile: 24px)</h1>
-          <p className="p3">P3 본문 (PC: 16px, Mobile: 14px)</p>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>모바일 최소 너비</h2>
-        <p>모바일 디바이스의 최소 너비는 375px로 설정되어 있습니다.</p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>device.scss</div>
-          <pre><code>{`$min-mo: 375px;  // 최소 모바일 너비`}</code></pre>
-        </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 *;
-
-.header {
-  padding: s(6);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  @include tb {
-    padding: s(5);
-  }
-
-  @include mo {
-    padding: s(4);
-    flex-direction: column;
-    gap: s(3);
-  }
-}
-
-.nav {
-  display: flex;
-  gap: s(5);
-
-  @include mo {
-    flex-direction: column;
-    gap: s(3);
-    width: 100%;
-  }
-}
-
-.card {
-  padding: s(6);
-  border-radius: r(4);
-
-  @include tb {
-    padding: s(5);
-  }
-
-  @include mo {
-    padding: s(4);
-    border-radius: r(3);
-  }
-}
-
-.sidebar {
-  width: 300px;
-
-  @include tb {
-    width: 250px;
-  }
-
-  @include mo {
-    width: 100%;
-  }
-}`}</code></pre>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <div className={styles.note}>
-          <i className="icon-info"></i>
-          <div>
-            <strong>팁:</strong> 브라우저 개발자 도구의 반응형 모드를 사용하여 다양한 디바이스에서의 레이아웃을 테스트해보세요.
-            Chrome: Ctrl/Cmd + Shift + M
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>현재 화면 크기 확인</h2>
-        <div className={styles.deviceIndicator}>
-          <div className={styles.deviceInfo + ' hide-tb hide-mo'}>
-            <div className={styles.deviceIcon}>
-              <i className="icon-menu"></i>
-            </div>
-            <div>
-              <strong>현재: PC</strong>
-              <p>1280px 이상</p>
-            </div>
-          </div>
-          <div className={styles.deviceInfo + ' hide-pc hide-mo'}>
-            <div className={styles.deviceIcon}>
-              <i className="icon-menu"></i>
-            </div>
-            <div>
-              <strong>현재: Tablet</strong>
-              <p>768px ~ 1279px</p>
-            </div>
-          </div>
-          <div className={styles.deviceInfo + ' hide-pc hide-tb'}>
-            <div className={styles.deviceIcon}>
-              <i className="icon-menu"></i>
-            </div>
-            <div>
-              <strong>현재: Mobile</strong>
-              <p>767px 이하</p>
-            </div>
-          </div>
-        </div>
-      </section>
-    </>
-  );
-}

package/src/app/layout.module.scss

@@ -1,14 +0,0 @@
-@use '../../mixin' as *;
-
-.container {
-  display: flex;
-  min-height: 100vh;
-  background: color(bg-elevation);
-}
-
-.main {
-  flex: 1;
-  margin-left: 260px;
-  padding: s(7);
-  max-width: 1200px;
-}

package/src/app/layout.tsx

@@ -1,30 +0,0 @@
-import '../../global.scss';
-import '../styles/custom.scss';
-import '../styles/font-family.scss'; // custom path
-import '../styles/icon.scss'; // custom path
-import Navigation from '../components/Navigation';
-import styles from './layout.module.scss';
-
-export const runtime = 'edge';
-
-export const metadata = {
-  title: 'Podo UI - SCSS Module 기반 디자인 시스템',
-  description: 'React와 SCSS를 위한 모던 UI 컴포넌트 라이브러리',
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="ko">
-      <body>
-        <div className={styles.container}>
-          <Navigation />
-          <main className={styles.main}>{children}</main>
-        </div>
-      </body>
-    </html>
-  );
-}

package/src/app/page.module.scss

@@ -1,71 +0,0 @@
-@use '../../mixin' as *;
-.app {
-  width: 100%;
-  min-height: 100%;
-  @extend .bg-elevation;
-  > header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 1000;
-    width: 100%;
-    background-color: color('primary');
-    color: color('primary-reverse');
-    padding: s(1);
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: s(4);
-    nav {
-      display: flex;
-      gap: s(4);
-      a {
-        color: color('primary-reverse');
-        text-decoration: none;
-        &:hover {
-          color: color('primary-hover');
-        }
-      }
-    }
-  }
-  > main {
-    padding: s(3);
-    padding-top: s(7);
-    margin-bottom: s(2);
-    @extend .bg-elevation-1;
-    > article {
-      padding: s(3);
-      margin-bottom: s(2);
-      @extend .bg-elevation-2;
-      > section {
-        padding: s(3);
-        margin-bottom: s(2);
-        @extend .bg-elevation-3;
-        > div {
-          margin-bottom: s(2);
-        }
-      }
-    }
-  }
-
-  &:global {
-    > * {
-      .grid.guide {
-        * {
-          padding: s(4);
-        }
-        &.fill {
-          background: color('primary-fill');
-        }
-        &.border * {
-          border: 1px solid color('primary');
-        }
-      }
-      .elements {
-        > :not(:last-child) {
-          margin-right: s(4);
-        }
-      }
-    }
-  }
-}

package/src/app/page.tsx

@@ -1,284 +0,0 @@
-import Image from 'next/image';
-import Link from 'next/link';
-import styles from './home.module.scss';
-
-export default function Home() {
-  return (
-    <div className={styles.homePage}>
-      {/* Hero Section */}
-      <section className={styles.hero}>
-        <div className={styles.heroContent}>
-          <div className={styles.logoContainer}>
-            <Image src="/logo.svg" alt="Podo UI" width={64} height={64} priority />
-          </div>
-          <h1 className={styles.heroTitle}>
-            HELLO 환영합니다
-            <br />
-            <span className={styles.brandName}>Podo UI</span>
-          </h1>
-          <p className={styles.heroDescription}>
-            Podo UI는 빠르고 쉽게 반응형있는 구성하기 위한 오픈 소스 툴킷 입니다.
-            <br />
-            복사 & 붙여넣기만 디자인으로 구현으로든 제공되는 방문 오픈 소스 프론트엔드 입니다.
-          </p>
-          <div className={styles.heroLinks}>
-            <a
-              href="https://github.com/hada0127/podo-ui"
-              target="_blank"
-              rel="noopener noreferrer"
-              className={styles.linkButton}
-            >
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-              </svg>
-              <span>GitHub</span>
-            </a>
-            <a
-              href="https://www.npmjs.com/package/podo-ui"
-              target="_blank"
-              rel="noopener noreferrer"
-              className={styles.linkButton}
-            >
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331zM10.665 10H12v2.667h-1.335V10z"/>
-              </svg>
-              <span>NPM</span>
-            </a>
-          </div>
-          <div className={styles.heroActions}>
-            <Link href="/getting-started/installation" className={styles.btnPrimary}>
-              Get started
-            </Link>
-          </div>
-        </div>
-      </section>
-
-      {/* Features Section */}
-      <section className={styles.featuresSection}>
-        <div className={styles.sectionHeader}>
-          <h2 className={styles.sectionTitle}>깨끗하고 가벼운 구성요소</h2>
-          <p className={styles.sectionDescription}>
-            PODOUI HTML5, SCSS를 UX/UI 디자인 요소를 구현한 웹과
-            <br />
-            로컬 프레임 프로젝트가 가능 네 버전의 프리미엄 UX/UI 디자인과 컬렉션 소스 다양한 컴포넌트 UI는
-            <br />
-            구성되는 사이트에 쉽고 빠르고 적용 이루어 다양한 레이아웃을 만들 수 있습니다.
-          </p>
-        </div>
-
-        {/* Browser Mockup */}
-        <div className={styles.browserMockup}>
-          <div className={styles.browserWindow}>
-            <div className={styles.browserHeader}>
-              <div className={styles.browserDots}>
-                <span className={styles.dot}></span>
-                <span className={styles.dot}></span>
-                <span className={styles.dot}></span>
-              </div>
-              <div className={styles.browserUrl}>podo-ui</div>
-            </div>
-            <div className={styles.browserContent}>
-              <div className={styles.mockSidebar}>
-                <div className={styles.sidebarItem}>Docs</div>
-                <div className={styles.sidebarItem}>Text</div>
-                <div className={styles.sidebarItem}>Icon</div>
-                <div className={styles.sidebarItem}>Input</div>
-                <div className={styles.sidebarItem}>Select</div>
-              </div>
-              <div className={styles.mockMain}>
-                <div className={styles.mockCard}>
-                  <div className={styles.mockCardHeader}>Header</div>
-                  <div className={styles.mockCardBody}>
-                    <div className={styles.mockLine}></div>
-                    <div className={styles.mockLine}></div>
-                    <div className={styles.mockLine}></div>
-                  </div>
-                  <div className={styles.mockCardFooter}>
-                    <div className={styles.mockButton}>Cancel</div>
-                    <div className={styles.mockButton + ' ' + styles.primary}>Submit</div>
-                  </div>
-                </div>
-                <div className={styles.mockProfile}>
-                  <div className={styles.mockAvatar}></div>
-                  <div className={styles.mockText}>
-                    <div className={styles.mockTextLine}></div>
-                    <div className={styles.mockTextLine}></div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Feature Cards */}
-      <section className={styles.featureCards}>
-        <div className={styles.featureCard}>
-          <div className={styles.featureIcon}>
-            <i className="icon-layers"></i>
-          </div>
-          <h3>CSS 프레임워크</h3>
-          <p>
-            순수한 웹 프로젝트 뿐만 아니라 다른
-            프레임워크 자바스크립트 라이브러리와
-            사이트를 쉽고 빠르게 만들 수 있습니다.
-          </p>
-        </div>
-
-        <div className={styles.featureCard}>
-          <div className={styles.featureIcon}>
-            <i className="icon-setting"></i>
-          </div>
-          <h3>오픈과 구성 요소</h3>
-          <p>
-            오픈 프로젝트는 다음 커뮤니티의 참여와
-            컴포넌트 구성요소를 쉽게 다양한 오픈
-            소스를 개선할 수 있습니다.
-          </p>
-        </div>
-
-        <div className={styles.featureCard}>
-          <div className={styles.featureIcon}>
-            <i className="icon-hidden"></i>
-          </div>
-          <h3>깨끗하고 다크모드 지원</h3>
-          <p>
-            깨끗한 UI를 통한 사용자에게는 시각적
-            피로를 줄이고 다양 야간 모드를 지원해
-            기술 응답을 합니다.
-          </p>
-        </div>
-
-        <div className={styles.featureCard}>
-          <div className={styles.featureIcon}>
-            <i className="icon-star"></i>
-          </div>
-          <h3>단청성 돼 도구에도스</h3>
-          <p>
-            다양한 UI/UX 요소에서는 도구에서
-            커뮤니티 도움을 받으시거나 보안으로
-            프로젝트 용량하게 대응합니다.
-          </p>
-        </div>
-      </section>
-
-      {/* API Section */}
-      <section className={styles.apiSection}>
-        <div className={styles.sectionHeader}>
-          <h2 className={styles.sectionTitle}>디자인 시스템을 위한 API</h2>
-          <p className={styles.sectionDescription}>
-            기본적 시스템 구조는 재사용 하면 색상, 간격, 타이포그래피 그외의 등
-            <br />
-            팀 내 설계된 디자인 시스템으로 구성함과 합쳐져 포함할 수 있습니다.
-          </p>
-        </div>
-
-        <div className={styles.apiDemo}>
-          <div className={styles.browserWindow}>
-            <div className={styles.browserHeader}>
-              <div className={styles.browserDots}>
-                <span className={styles.dot}></span>
-                <span className={styles.dot}></span>
-                <span className={styles.dot}></span>
-              </div>
-            </div>
-            <div className={styles.apiContent}>
-              {[
-                { label: 'w-1_12', width: '8%' },
-                { label: 'w-2_3', width: '16%' },
-                { label: 'w-2', width: '20%' },
-                { label: 'w-5', width: '28%' },
-                { label: 'w-4', width: '36%' },
-                { label: 'w-3', width: '44%' },
-                { label: 'w-2', width: '52%' },
-                { label: 'w-1', width: '100%' },
-              ].map((item, idx) => (
-                <div key={idx} className={styles.apiBar}>
-                  <div className={styles.apiBarFill} style={{ width: item.width }}>
-                    <span>{item.label}</span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Components Section */}
-      <section className={styles.componentsSection}>
-        <div className={styles.sectionHeader}>
-          <h2 className={styles.sectionTitle}>원하는 구성요소를 조각하세요</h2>
-          <p className={styles.sectionDescription}>
-            내장 웹사이트 컨텐츠를 설정 값이 지정이 유용하게 입니다.
-            <br />
-            직접적인 디자인 시스템을 위해 다룬 podo.ui에서 이를 자유와 맞춤 모듈로서는 챔페인드로 제공합니다.
-          </p>
-        </div>
-
-        <div className={styles.componentsDemo}>
-          <div className={styles.browserWindow}>
-            <div className={styles.browserHeader}>
-              <div className={styles.browserDots}>
-                <span className={styles.dot}></span>
-                <span className={styles.dot}></span>
-                <span className={styles.dot}></span>
-              </div>
-              <div className={styles.browserTab}>user / primary</div>
-            </div>
-            <div className={styles.componentsGrid}>
-              <div className={styles.componentBox}>
-                <div className={styles.componentLabel}>light</div>
-              </div>
-              <div className={styles.componentBox}>
-                <div className={styles.componentLabel}>dark</div>
-              </div>
-              <div className={styles.componentBox}>
-                <div className={styles.componentLabel}>color={'{'} primary{'}'}</div>
-              </div>
-              <div className={styles.componentBox}>
-                <div className={styles.componentLabel}>color{'{'} secondary{'}'}</div>
-              </div>
-              <div className={styles.componentBox}>
-                <div className={styles.componentLabel}>padding={'{'}2{'}'}</div>
-              </div>
-              <div className={styles.componentBox}>
-                <div className={styles.componentLabel}>margin={'{'}3{'}'}</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* CTA Section */}
-      <section className={styles.ctaSection}>
-        <div className={styles.ctaContent}>
-          <div className={styles.logoContainer}>
-            <Image src="/logo.svg" alt="Podo UI" width={48} height={48} />
-          </div>
-          <h2 className={styles.ctaTitle}>podo.ui를 응원해주세요</h2>
-          <p className={styles.ctaDescription}>
-            podo.ui 프레젠터로 응원해주시고 누구나 사용할 편리하게 하고
-          </p>
-          <a
-            href="https://github.com/hada0127/podo-ui"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.btnPrimary}
-          >
-            응원하기
-          </a>
-        </div>
-      </section>
-
-      {/* Footer */}
-      <footer className={styles.footer}>
-        <div className={styles.footerContent}>
-          <div className={styles.footerLogo}>
-            <Image src="/logo.svg" alt="Podo UI" width={24} height={24} />
-          </div>
-          <p className={styles.footerText}>Made by 전예진 · 이은규 MIT ©podo.ui 2023</p>
-        </div>
-      </footer>
-    </div>
-  );
-}