Podo UI

Podo UI

입력

다양한 형태의 텍스트 입력을 위한 컴포넌트입니다.

기본 사용법

input은 다양한 타입의 텍스트 입력을 받을 수 있습니다.

HTML
<input type="text" placeholder="텍스트를 입력하세요" />
<input type="email" placeholder="이메일을 입력하세요" />
<input type="password" placeholder="비밀번호를 입력하세요" />
<input type="number" placeholder="숫자를 입력하세요" />
실제 예제:

입력 타입

input은 다양한 타입을 지원합니다.

HTML
<input type="text" placeholder="텍스트 입력" />
<input type="email" placeholder="이메일 주소" />
<input type="password" placeholder="비밀번호" />
<input type="number" placeholder="숫자" />
<input type="tel" placeholder="전화번호" />
<input type="url" placeholder="웹사이트 주소" />
<input type="search" placeholder="검색어 입력" />
<input type="date" />
<input type="time" />
<input type="month" />
<input type="week" />
<input type="datetime-local" />
실제 예제:

상태

input은 기본, 성공, 위험, 비활성화, 읽기 전용 상태를 지원합니다.

HTML
<!-- 기본 상태 -->
<input type="text" placeholder="기본 상태" />

<!-- 성공 -->
<input type="text" class="success" value="valid@email.com" />

<!-- 위험 -->
<input type="text" class="danger" value="invalid-email" />

<!-- 비활성화 -->
<input type="text" placeholder="비활성화" disabled />

<!-- 읽기 전용 -->
<input type="text" value="읽기 전용 값" readonly />
실제 예제:
SCSS
// Success 상태 (border: 1px solid color('success'))
input.success {
  border-color: color('success');

  &:focus-visible:not(:disabled) {
    outline: 4px solid color('success-outline');
  }
}

// Danger 상태 (border: 1px solid color('danger'))
input.danger {
  border-color: color('danger');

  &:focus-visible:not(:disabled) {
    outline: 4px solid color('danger-outline');
  }
}

// Disabled 상태
input:disabled {
  background: color('bg-disabled');
  cursor: not-allowed;
}

// Read-only 상태
input:read-only {
  border: none;
  cursor: default;
}

변형

input은 다양한 스타일 변형을 제공합니다.

HTML
<!-- 기본 (테두리) -->
<input type="text" placeholder="기본 (테두리)" />

<!-- 채움 (배경 색상) -->
<input type="text" class="fill" placeholder="채움 (배경 색상)" />

<!-- 텍스트 (테두리 없음) -->
<input type="text" class="text" placeholder="텍스트 (테두리 없음)" />

<!-- 밑줄 (하단 테두리만) -->
<input type="text" class="underline" placeholder="밑줄 (하단 테두리만)" />
실제 예제:
SCSS
// Fill 변형 (background-color: color('default-fill'))
input.fill {
  background-color: color('default-fill');
}

// Text 변형 (border: none)
input.text {
  border: none;
}

// Underline 변형 (border-bottom only, border-radius: 0)
input.underline {
  border: none;
  border-bottom: 1px solid color('border-disabled');
  border-radius: 0;

  &:focus-visible:not(:disabled) {
    border-bottom-color: color('primary-base');
  }
}

크기

input은 다양한 크기를 지원합니다.

HTML
<!-- 기본 크기 (padding: s(3) s(4), border-radius: r(3)) -->
<input type="text" placeholder="기본 크기" />

<!-- 중간 크기 (padding: s(4) s(4), border-radius: r(5)) -->
<input type="text" class="md" placeholder="중간 크기" />

<!-- 큰 크기 (padding: s(5) s(4), border-radius: r(6)) -->
<input type="text" class="lg" placeholder="큰 크기" />
실제 예제:
SCSS
// 기본 크기
input {
  padding: s(3) s(4);
  border-radius: r(3);
}

// 중간 크기
input.md {
  padding: s(4) s(4);
  border-radius: r(5);
}

// 큰 크기
input.lg {
  padding: s(5) s(4);
  border-radius: r(6);
}

아이콘

input에 아이콘을 추가할 수 있습니다.

HTML
<!-- 왼쪽 아이콘 (input padding-left: s(8), 아이콘 left: s(3)) -->
<div class="with-icon">
  <i class="icon-search"></i>
  <input type="text" placeholder="검색..." />
</div>

<!-- 오른쪽 아이콘 (input padding-right: s(7), 아이콘 right: s(3)) -->
<div class="with-right-icon">
  <input type="email" placeholder="이메일" />
  <i class="icon-mail"></i>
</div>
실제 예제:
SCSS
// 왼쪽 아이콘
.with-icon {
  position: relative;

  > i {
    position: absolute;
    left: s(3);
    top: 50%;
    transform: translateY(-50%);
  }

  > input {
    padding-left: s(8);  // 아이콘 공간 확보
  }
}

// 오른쪽 아이콘
.with-right-icon {
  position: relative;

  > i {
    position: absolute;
    right: s(3);
    top: 50%;
    transform: translateY(-50%);
  }

  > input {
    padding-right: s(7);  // 아이콘 공간 확보
  }
}

SCSS 스타일

podo-ui의 믹스인을 사용하여 input 스타일을 적용할 수 있습니다.

component.module.scss
@use 'podo-ui/mixin' as *;

// 기본 input 스타일
input[type='text'],
input[type='email'],
input[type='password'] {
  @include p3;
  padding: s(3) s(4);
  background-color: color('bg-block');
  border-radius: r(3);
  border: 1px solid color('border-disabled');

  &:focus-visible:not(:disabled) {
    border-color: color('primary-base');
    outline: 4px solid color('primary-outline');
  }

  &::placeholder {
    color: color('placeholder');
  }
}

// Success/Danger 상태
input.success {
  border: 1px solid color('success');

  &:focus-visible:not(:disabled) {
    outline: 4px solid color('success-outline');
  }
}

input.danger {
  border: 1px solid color('danger');

  &:focus-visible:not(:disabled) {
    outline: 4px solid color('danger-outline');
  }
}

// 크기 변형
input.md {
  padding: s(4) s(4);
  border-radius: r(5);
}

input.lg {
  padding: s(5) s(4);
  border-radius: r(6);
}