podo-ui 0.1.46 → 0.2.0

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

@@ -1,225 +0,0 @@
-import PageHeader from '@/components/PageHeader';
-import styles from './page.module.scss';
-
-export default function Select() {
-  return (
-    <>
-      <PageHeader
-        title="선택"
-        description="Podo UI의 Select 컴포넌트와 사용법을 안내합니다"
-      />
-
-      <section className={styles.section}>
-        <h2>기본 사용법</h2>
-        <p>
-          HTML select 태그를 사용하여 드롭다운 선택 메뉴를 만들 수 있습니다.
-          Podo UI는 커스텀 화살표 아이콘과 스타일을 자동으로 적용합니다.
-        </p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>HTML</div>
-          <pre><code>{`<select>
-  <option value="" disabled selected>선택하세요</option>
-  <option value="1">옵션 1</option>
-  <option value="2">옵션 2</option>
-  <option value="3">옵션 3</option>
-</select>`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제:</div>
-          <div className={styles.selectGroup}>
-            <select>
-              <option value="" disabled selected>선택하세요</option>
-              <option value="1">옵션 1</option>
-              <option value="2">옵션 2</option>
-              <option value="3">옵션 3</option>
-            </select>
-            <select defaultValue="2">
-              <option value="1">서울</option>
-              <option value="2">부산</option>
-              <option value="3">대구</option>
-              <option value="4">인천</option>
-            </select>
-            <select disabled>
-              <option>비활성화</option>
-            </select>
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>Placeholder 스타일</h2>
-        <p>
-          첫 번째 option에 <code>value=""</code>, <code>disabled</code>, <code>selected</code> 속성을 함께 사용하면
-          placeholder처럼 보이며, 선택 후 자동으로 숨겨집니다.
-        </p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>HTML</div>
-          <pre><code>{`<select>
-  <option value="" disabled selected>카테고리를 선택하세요</option>
-  <option value="electronics">전자제품</option>
-  <option value="fashion">패션</option>
-  <option value="food">식품</option>
-</select>`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제:</div>
-          <div className={styles.selectGroup}>
-            <select>
-              <option value="" disabled selected>카테고리를 선택하세요</option>
-              <option value="electronics">전자제품</option>
-              <option value="fashion">패션</option>
-              <option value="food">식품</option>
-            </select>
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>아이콘과 함께 사용</h2>
-        <p>
-          <code>.with-icon</code> 클래스로 감싸면 왼쪽에 아이콘을 추가할 수 있습니다.
-        </p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>HTML</div>
-          <pre><code>{`<div class="with-icon">
-  <i class="icon-user"></i>
-  <select>
-    <option value="" disabled selected>사용자 선택</option>
-    <option value="admin">관리자</option>
-    <option value="user">일반 사용자</option>
-    <option value="guest">게스트</option>
-  </select>
-</div>
-
-<div class="with-icon">
-  <i class="icon-globe"></i>
-  <select>
-    <option value="" disabled selected>언어 선택</option>
-    <option value="ko">한국어</option>
-    <option value="en">English</option>
-    <option value="ja">日本語</option>
-  </select>
-</div>`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제:</div>
-          <div className={styles.selectGroup}>
-            <div className="with-icon">
-              <i className="icon-user"></i>
-              <select>
-                <option value="" disabled selected>사용자 선택</option>
-                <option value="admin">관리자</option>
-                <option value="user">일반 사용자</option>
-                <option value="guest">게스트</option>
-              </select>
-            </div>
-            <div className="with-icon">
-              <i className="icon-globe"></i>
-              <select>
-                <option value="" disabled selected>언어 선택</option>
-                <option value="ko">한국어</option>
-                <option value="en">English</option>
-                <option value="ja">日本語</option>
-              </select>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>Select 상태</h2>
-        <p>다양한 상태의 select를 사용할 수 있습니다:</p>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제:</div>
-          <div className={styles.selectGroup}>
-            <div>
-              <label className={styles.label}>기본</label>
-              <select>
-                <option value="" disabled selected>옵션 선택</option>
-                <option value="1">옵션 1</option>
-                <option value="2">옵션 2</option>
-              </select>
-            </div>
-            <div>
-              <label className={styles.label}>비활성화</label>
-              <select disabled>
-                <option>비활성화된 select</option>
-              </select>
-            </div>
-            <div>
-              <label className={styles.label}>다중 선택</label>
-              <select multiple size={4}>
-                <option value="1">옵션 1</option>
-                <option value="2">옵션 2</option>
-                <option value="3">옵션 3</option>
-                <option value="4">옵션 4</option>
-              </select>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>SCSS에서 사용하기</h2>
-        <p>SCSS 모듈에서 select 스타일을 커스터마이징할 수 있습니다:</p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>component.module.scss</div>
-          <pre><code>{`@use 'podo-ui/mixin' as *;
-
-.customSelect {
-  padding: s(3) s(7) s(3) s(5);
-  border: 1px solid color(border);
-  border-radius: r(3);
-  background: color(bg-block);
-  color: color(default-deep-base);
-  outline: none;
-  appearance: none;
-  cursor: pointer;
-
-  // 커스텀 화살표 (자동 포함됨)
-  background-image: url('data:image/svg+xml,...');
-  background-repeat: no-repeat;
-  background-position: right 11px center;
-
-  &:focus-visible:not(:disabled) {
-    outline: 4px solid color(primary-outline);
-  }
-
-  &:disabled {
-    color: color(text-action-disabled);
-    background-color: color(bg-disabled);
-    cursor: not-allowed;
-  }
-}
-
-// 아이콘과 함께 사용
-.withIcon {
-  position: relative;
-  display: inline-block;
-
-  > i {
-    position: absolute;
-    left: s(3);
-    top: 50%;
-    transform: translateY(-50%);
-    color: color(text-action);
-    pointer-events: none;
-  }
-
-  > select {
-    padding-left: s(8);
-  }
-}`}</code></pre>
-        </div>
-      </section>
-    </>
-  );
-}

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

@@ -1,81 +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);
-}
-
-.textareaGroup {
-  display: flex;
-  flex-direction: column;
-  gap: s(4);
-
-  textarea {
-    width: 100%;
-  }
-
-  > div {
-    display: flex;
-    flex-direction: column;
-    gap: s(2);
-  }
-}
-
-.label {
-  @include p3-semibold;
-  color: color(default-deep-base);
-}

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

@@ -1,103 +0,0 @@
-import PageHeader from '@/components/PageHeader';
-import styles from './page.module.scss';
-
-export default function Textarea() {
-  return (
-    <>
-      <PageHeader
-        title="텍스트 영역"
-        description="Podo UI의 Textarea 컴포넌트와 사용법을 안내합니다"
-      />
-
-      <section className={styles.section}>
-        <h2>기본 사용법</h2>
-        <p>
-          HTML textarea 태그를 사용하여 여러 줄의 텍스트를 입력할 수 있습니다.
-        </p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>HTML</div>
-          <pre><code>{`<textarea placeholder="내용을 입력하세요"></textarea>
-<textarea placeholder="내용을 입력하세요" rows="5"></textarea>
-<textarea placeholder="비활성화" disabled></textarea>`}</code></pre>
-        </div>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제:</div>
-          <div className={styles.textareaGroup}>
-            <textarea placeholder="내용을 입력하세요"></textarea>
-            <textarea placeholder="내용을 입력하세요" rows={5}></textarea>
-            <textarea placeholder="비활성화" disabled></textarea>
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>Textarea 속성</h2>
-        <p>다양한 속성으로 textarea를 제어할 수 있습니다:</p>
-
-        <div className={styles.demo}>
-          <div className={styles.demoTitle}>실제 예제:</div>
-          <div className={styles.textareaGroup}>
-            <div>
-              <label className={styles.label}>기본 (3줄)</label>
-              <textarea rows={3} placeholder="기본 textarea"></textarea>
-            </div>
-            <div>
-              <label className={styles.label}>고정 크기 (resize 방지)</label>
-              <textarea rows={4} style={{ resize: 'none' }} placeholder="크기 고정"></textarea>
-            </div>
-            <div>
-              <label className={styles.label}>최대 길이 제한 (100자)</label>
-              <textarea rows={4} maxLength={100} placeholder="최대 100자까지 입력 가능"></textarea>
-            </div>
-            <div>
-              <label className={styles.label}>읽기 전용</label>
-              <textarea rows={3} readOnly value="읽기 전용 텍스트입니다."></textarea>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <h2>SCSS에서 사용하기</h2>
-        <p>SCSS 모듈에서 textarea 스타일을 커스터마이징할 수 있습니다:</p>
-
-        <div className={styles.codeBlock}>
-          <div className={styles.codeHeader}>component.module.scss</div>
-          <pre><code>{`@use 'podo-ui/mixin' as *;
-
-.customTextarea {
-  width: 100%;
-  min-height: 120px;
-  padding: s(4);
-  border: 1px solid color(default-outline);
-  border-radius: r(3);
-  background: color(bg-modal);
-  color: color(default-deep-base);
-  font-family: inherit;
-  font-size: 14px;
-  line-height: 1.6;
-  resize: vertical;
-  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>
-    </>
-  );
-}