podo-ui 0.1.46 → 0.2.0

package/src/app/components/checkbox-radio/page.tsx

@@ -1,265 +0,0 @@
-'use client';
-
-import PageHeader from '@/components/PageHeader';
-import styles from './page.module.scss';
-
-export default function CheckboxRadio() {
-  return (
-    <>
-      <PageHeader
-        title="체크박스 & 라디오"
-        description="Podo UI의 Checkbox와 Radio 컴포넌트 사용법을 안내합니다"
-      />
-
-      <section className={styles.section}>
-        <h2>Checkbox 기본 사용법</h2>
-        <p>
-          HTML checkbox input을 사용하면 Podo UI의 커스텀 스타일이 자동으로 적용됩니다.
-          SVG 기반의 체크 아이콘이 포함되어 있습니다.
-        </p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>HTML</div>
-          <pre><code>{`<label>
-  <input type="checkbox" />
-  체크박스 옵션
-</label>
-
-<label>
-  <input type="checkbox" checked />
-  체크된 상태
-</label>
-
-<label>
-  <input type="checkbox" disabled />
-  비활성화
-</label>
-
-<label>
-  <input type="checkbox" checked disabled />
-  체크됨 + 비활성화
-</label>`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제:</div>
-          <div className={styles.checkboxGroup}>
-            <label>
-              <input type="checkbox" />
-              체크박스 옵션
-            </label>
-            <label>
-              <input type="checkbox" defaultChecked />
-              체크된 상태
-            </label>
-            <label>
-              <input type="checkbox" disabled />
-              비활성화
-            </label>
-            <label>
-              <input type="checkbox" defaultChecked disabled />
-              체크됨 + 비활성화
-            </label>
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>Indeterminate 상태</h2>
-        <p>
-          JavaScript로 <code>indeterminate</code> 상태를 설정할 수 있습니다.
-          부분 선택 상태를 나타낼 때 유용합니다.
-        </p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>JavaScript</div>
-          <pre><code>{`const checkbox = document.querySelector('#myCheckbox');
-checkbox.indeterminate = true;`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제:</div>
-          <div className={styles.checkboxGroup}>
-            <label>
-              <input
-                type="checkbox"
-                ref={(el) => el && (el.indeterminate = true)}
-              />
-              Indeterminate 상태
-            </label>
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>Radio 기본 사용법</h2>
-        <p>
-          Radio 버튼은 여러 옵션 중 하나만 선택할 수 있습니다.
-          같은 <code>name</code> 속성을 가진 radio들이 하나의 그룹을 형성합니다.
-        </p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>HTML</div>
-          <pre><code>{`<label>
-  <input type="radio" name="option" value="1" checked />
-  옵션 1
-</label>
-
-<label>
-  <input type="radio" name="option" value="2" />
-  옵션 2
-</label>
-
-<label>
-  <input type="radio" name="option" value="3" />
-  옵션 3
-</label>
-
-<label>
-  <input type="radio" name="option" value="4" disabled />
-  비활성화된 옵션
-</label>`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제:</div>
-          <div className={styles.radioGroup}>
-            <label>
-              <input type="radio" name="example1" value="1" defaultChecked />
-              옵션 1
-            </label>
-            <label>
-              <input type="radio" name="example1" value="2" />
-              옵션 2
-            </label>
-            <label>
-              <input type="radio" name="example1" value="3" />
-              옵션 3
-            </label>
-            <label>
-              <input type="radio" name="example1" value="4" disabled />
-              비활성화된 옵션
-            </label>
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>Checkbox 그룹 예제</h2>
-        <p>여러 개의 체크박스를 사용한 실제 예제입니다:</p>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>관심 분야 선택:</div>
-          <div className={styles.checkboxGroup}>
-            <label>
-              <input type="checkbox" name="interests" value="design" />
-              디자인
-            </label>
-            <label>
-              <input type="checkbox" name="interests" value="development" />
-              개발
-            </label>
-            <label>
-              <input type="checkbox" name="interests" value="marketing" />
-              마케팅
-            </label>
-            <label>
-              <input type="checkbox" name="interests" value="business" />
-              비즈니스
-            </label>
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>Radio 그룹 예제</h2>
-        <p>여러 개의 라디오 버튼을 사용한 실제 예제입니다:</p>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>결제 방법 선택:</div>
-          <div className={styles.radioGroup}>
-            <label>
-              <input type="radio" name="payment" value="card" defaultChecked />
-              신용카드
-            </label>
-            <label>
-              <input type="radio" name="payment" value="bank" />
-              계좌이체
-            </label>
-            <label>
-              <input type="radio" name="payment" value="mobile" />
-              휴대폰 결제
-            </label>
-            <label>
-              <input type="radio" name="payment" value="kakao" />
-              카카오페이
-            </label>
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>SCSS에서 사용하기</h2>
-        <p>체크박스와 라디오의 스타일은 자동으로 적용되지만, 추가 커스터마이징이 가능합니다:</p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>component.module.scss</div>
-          <pre><code>{`@use 'podo-ui/mixin' as *;
-
-.checkboxWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: s(3);
-
-  label {
-    display: flex;
-    align-items: center;
-    gap: s(2);
-    cursor: pointer;
-    user-select: none;
-
-    input[type='checkbox'] {
-      margin-right: s(2);
-    }
-
-    &:hover {
-      color: color(primary);
-    }
-  }
-}
-
-.radioWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: s(3);
-
-  label {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    input[type='radio'] {
-      margin-right: s(2);
-    }
-  }
-}
-
-// 커스텀 스타일
-.customCheckbox {
-  input[type='checkbox']:focus-visible {
-    outline: 4px solid color(primary-outline);
-  }
-}`}</code></pre>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>다크 모드</h2>
-        <p>
-          Podo UI는 체크박스와 라디오 버튼에 대한 다크 모드를 자동으로 지원합니다.
-          오른쪽 상단의 테마 토글 버튼으로 확인해보세요.
-        </p>
-      </section>
-    </>
-  );
-}

package/src/app/components/input/page.module.scss

@@ -1,112 +0,0 @@
-@use '../../../../mixin' as *;
-
-.section {
-  margin-bottom: s(10);
-
-  h2 {
-    @include display5;
-    margin: 0 0 s(5) 0;
-    color: color(default-deep-base);
-  }
-
-  p {
-    @include p2;
-    color: color(default-base);
-    line-height: 1.8;
-    margin: 0 0 s(5) 0;
-  }
-}
-
-.codeBlock {
-  background: color(default-deep-base);
-  border-radius: r(4);
-  overflow: hidden;
-  margin-bottom: s(4);
-
-  .codeHeader {
-    padding: s(3) s(5);
-    background: rgba(0, 0, 0, 0.2);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    @include p4-semibold;
-    color: rgba(255, 255, 255, 0.7);
-  }
-
-  pre {
-    margin: 0;
-    padding: s(5);
-    overflow-x: auto;
-
-    code {
-      @include p3;
-      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-      color: #f8f8f2;
-      white-space: pre;
-    }
-  }
-}
-
-.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-base);
-}
-
-.inputGroup {
-  display: flex;
-  flex-direction: column;
-  gap: s(4);
-
-  input {
-    width: 100%;
-  }
-}
-
-.typeGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: s(5);
-  margin: s(6) 0;
-}
-
-.typeCard {
-  display: flex;
-  flex-direction: column;
-  gap: s(2);
-
-  label {
-    @include p3-semibold;
-    color: color(default-deep-base);
-  }
-
-  input {
-    width: 100%;
-  }
-}
-
-.inputWrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-
-  i {
-    position: absolute;
-    left: s(4);
-    font-size: 18px;
-    color: color(default-base);
-    pointer-events: none;
-  }
-
-  input {
-    padding-left: s(10);
-    width: 100%;
-  }
-}

package/src/app/components/input/page.tsx

@@ -1,196 +0,0 @@
-import PageHeader from '@/components/PageHeader';
-import styles from './page.module.scss';
-
-export default function Input() {
-  return (
-    <>
-      <PageHeader
-        title="입력"
-        description="Podo UI의 Input 컴포넌트와 다양한 변형 사용법을 안내합니다"
-      />
-
-      <section className={styles.section}>
-        <h2>기본 사용법</h2>
-        <p>
-          HTML input 태그를 사용하여 텍스트 입력 필드를 만들 수 있습니다.
-        </p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>HTML</div>
-          <pre><code>{`<input type="text" placeholder="텍스트를 입력하세요" />
-<input type="email" placeholder="이메일을 입력하세요" />
-<input type="password" placeholder="비밀번호를 입력하세요" />
-<input type="number" placeholder="숫자를 입력하세요" />`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제:</div>
-          <div className={styles.inputGroup}>
-            <input type="text" placeholder="텍스트를 입력하세요" />
-            <input type="email" placeholder="이메일을 입력하세요" />
-            <input type="password" placeholder="비밀번호를 입력하세요" />
-            <input type="number" placeholder="숫자를 입력하세요" />
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>Input 타입</h2>
-        <p>다양한 input 타입을 지원합니다:</p>
-
-        <div className={styles.typeGrid}>
-          <div className={styles.typeCard}>
-            <label>Text</label>
-            <input type="text" placeholder="일반 텍스트" />
-          </div>
-          <div className={styles.typeCard}>
-            <label>Email</label>
-            <input type="email" placeholder="example@email.com" />
-          </div>
-          <div className={styles.typeCard}>
-            <label>Password</label>
-            <input type="password" placeholder="••••••••" />
-          </div>
-          <div className={styles.typeCard}>
-            <label>Number</label>
-            <input type="number" placeholder="123" />
-          </div>
-          <div className={styles.typeCard}>
-            <label>Tel</label>
-            <input type="tel" placeholder="010-1234-5678" />
-          </div>
-          <div className={styles.typeCard}>
-            <label>URL</label>
-            <input type="url" placeholder="https://example.com" />
-          </div>
-          <div className={styles.typeCard}>
-            <label>Date</label>
-            <input type="date" />
-          </div>
-          <div className={styles.typeCard}>
-            <label>Time</label>
-            <input type="time" />
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>Input 상태</h2>
-        <p>다양한 상태의 input을 사용할 수 있습니다:</p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>HTML</div>
-          <pre><code>{`<!-- 기본 -->
-<input type="text" placeholder="기본 상태" />
-
-<!-- 비활성화 -->
-<input type="text" placeholder="비활성화" disabled />
-
-<!-- 읽기 전용 -->
-<input type="text" value="읽기 전용" readonly />
-
-<!-- 필수 -->
-<input type="text" placeholder="필수 입력" required />`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제:</div>
-          <div className={styles.inputGroup}>
-            <input type="text" placeholder="기본 상태" />
-            <input type="text" placeholder="비활성화" disabled />
-            <input type="text" value="읽기 전용" readOnly />
-            <input type="text" placeholder="필수 입력" required />
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>아이콘과 함께 사용</h2>
-        <p>input 필드에 아이콘을 추가하여 더욱 직관적인 UI를 만들 수 있습니다:</p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>HTML</div>
-          <pre><code>{`<div class="input-wrapper">
-  <i class="icon-search"></i>
-  <input type="text" placeholder="검색..." />
-</div>
-
-<div class="input-wrapper">
-  <i class="icon-mail"></i>
-  <input type="email" placeholder="이메일" />
-</div>`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제:</div>
-          <div className={styles.inputGroup}>
-            <div className={styles.inputWrapper}>
-              <i className="icon-search"></i>
-              <input type="text" placeholder="검색..." />
-            </div>
-            <div className={styles.inputWrapper}>
-              <i className="icon-mail"></i>
-              <input type="email" placeholder="이메일" />
-            </div>
-            <div className={styles.inputWrapper}>
-              <i className="icon-user"></i>
-              <input type="text" placeholder="사용자명" />
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>SCSS에서 사용하기</h2>
-        <p>SCSS 모듈에서 input 스타일을 커스터마이징할 수 있습니다:</p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>component.module.scss</div>
-          <pre><code>{`@use 'podo-ui/mixin' as *;
-
-.inputWrapper {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-
-  i {
-    position: absolute;
-    left: s(4);
-    font-size: 18px;
-    color: color(default-base);
-  }
-
-  input {
-    padding-left: s(10);
-  }
-}
-
-.customInput {
-  width: 100%;
-  padding: s(3) s(4);
-  border: 1px solid color(default-outline);
-  border-radius: r(3);
-  background: color(bg-modal);
-  color: color(default-deep-base);
-  transition: all 0.3s;
-
-  &:focus {
-    border-color: color(primary-base);
-    outline: none;
-    box-shadow: 0 0 0 3px color(primary-fill);
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &::placeholder {
-    color: color(default-base);
-  }
-}`}</code></pre>
-        </div>
-      </section>
-    </>
-  );
-}

package/src/app/components/select/page.module.scss

@@ -1,90 +0,0 @@
-@use '../../../../mixin' as *;
-
-.section {
-  margin-bottom: s(10);
-
-  h2 {
-    @include display5;
-    margin: 0 0 s(5) 0;
-    color: color(default-deep-base);
-  }
-
-  p {
-    @include p2;
-    color: color(default-base);
-    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);
-    }
-  }
-}
-
-.codeBlock {
-  background: color(default-deep-base);
-  border-radius: r(4);
-  overflow: hidden;
-  margin-bottom: s(4);
-
-  .codeHeader {
-    padding: s(3) s(5);
-    background: rgba(0, 0, 0, 0.2);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    @include p4-semibold;
-    color: rgba(255, 255, 255, 0.7);
-  }
-
-  pre {
-    margin: 0;
-    padding: s(5);
-    overflow-x: auto;
-
-    code {
-      @include p3;
-      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-      color: #f8f8f2;
-      white-space: pre;
-    }
-  }
-}
-
-.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-base);
-}
-
-.selectGroup {
-  display: flex;
-  flex-direction: column;
-  gap: s(4);
-
-  select {
-    width: 100%;
-  }
-
-  > div {
-    display: flex;
-    flex-direction: column;
-    gap: s(2);
-  }
-}
-
-.label {
-  @include p3-semibold;
-  color: color(default-deep-base);
-}