@idbrnd/design-system 1.6.0 → 1.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +50 -14
  2. package/dist/components/Input/Input.types.d.ts +4 -1
  3. package/dist/index.js +901 -902
  4. package/dist/style.css +1 -1
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -226,7 +226,7 @@ function InputExample() {
226
226
  | `type` | `HTMLInputTypeAttribute` | `"text"` | 실제 HTML input 타입 (`text`, `password`, `email` 등) |
227
227
  | `designType` | `"outline"` \| `"fill"` | `"outline"` | Input 컨테이너 외형 |
228
228
  | `size` | `"default"` \| `"small"` | `"default"` | Input 높이 |
229
- | `variant` | `"basic"` \| `"error"` \| `"onTyping"` \| `"typed"` \| `"onFocus"` \| `"success"` | 자동 계산 | 수동 상태 지정. 미지정 시 값 유무에 따라 `basic`/`typed` 적용 |
229
+ | `variant` | `"basic"` \| `"error"` \| `"onTyping"` \| `"typed"` \| `"onFocus"` \| `"success"` | 자동 계산 | 수동 상태 지정. `errorMessage`가 있으면 `error`가 우선 적용 |
230
230
  | `width` | `number \| string` | `"100%"` | 루트 너비 |
231
231
  | `value` | `string \| number \| readonly string[]` | — | **(필수)** 입력값 |
232
232
  | `onChange` | `ChangeEventHandler<HTMLInputElement>` | — | 값 변경 핸들러 |
@@ -235,7 +235,7 @@ function InputExample() {
235
235
  | `required` | `boolean` | `false` | 필수 입력 표시 및 native `required` 속성 적용 |
236
236
  | `description` | `ReactNode \| boolean` | `false` | 하단 안내 문구. `true`면 기본 안내 문구를 사용 |
237
237
  | `fixedDescriptionHeight` | `boolean` | `true` | helper 영역 높이 고정 여부 |
238
- | `errorMessage` | `ReactNode` | 기본 에러 문구 | `variant="error"`일 때 표시되는 메시지 |
238
+ | `errorMessage` | `ReactNode` | 기본 에러 문구 | 의미 있는 값이 전달되면 에러 상태가 자동 적용되고 해당 메시지가 표시됨 |
239
239
  | `leadingIcon` | `ReactNode` | — | 입력 필드 좌측 아이콘 |
240
240
  | `trailingContent` | `ReactNode` | — | 입력 필드 우측 콘텐츠 |
241
241
  | `readOnly` | `boolean` | `false` | 읽기 전용 |
@@ -245,15 +245,32 @@ function InputExample() {
245
245
  유의사항:
246
246
 
247
247
  - `variant`를 지정하지 않으면 값 존재 여부에 따라 내부적으로 `basic` 또는 `typed` 상태가 자동 적용됩니다.
248
- - `variant="error"`일 때는 `description` 대신 `errorMessage`가 우선 노출되며, `errorMessage`를 생략하면 기본 에러 문구가 표시됩니다.
248
+ - `errorMessage`에 의미 있는 값이 있으면 `variant` 값보다 우선해서 에러 상태가 적용됩니다. 빈 문자열, 공백 문자열, 내용 없는 JSX 래퍼는 에러로 처리하지 않습니다.
249
+ - `variant="error"`일 때는 `description` 대신 에러 문구가 우선 노출되며, `errorMessage`를 생략하면 기본 에러 문구가 표시됩니다.
250
+ - `description`도 빈 문자열, 공백 문자열, 내용 없는 JSX 래퍼면 문구가 없는 것으로 처리됩니다.
249
251
  - `description={true}`를 전달하면 기본 안내 문구(`2~19자 이내로 입력해 주세요.`)가 표시됩니다.
250
252
  - `fixedDescriptionHeight={true}`면 안내/에러 문구가 없을 때도 helper 영역 높이를 유지해 레이아웃 점프를 방지합니다.
253
+ - helper 문구(`description`, `errorMessage`)는 기본적으로 입력창 너비에 맞춰 줄바꿈되지 않습니다. 특정 케이스에서만 줄바꿈이 필요하면 래퍼 노드에 `maxWidth`를 주거나 `<br />`를 사용하세요.
251
254
  - `id`, `name`, `placeholder`, `autoComplete`, `maxLength`, `minLength`, `onFocus`, `onBlur` 등 대부분의 native `<input>` props도 함께 사용할 수 있습니다.
252
255
  - `defaultValue`는 지원하지 않습니다. 반드시 `value` + `onChange`로 제어해야 합니다.
253
256
 
257
+ ```tsx
258
+ <Input
259
+ value={value}
260
+ onChange={onChange}
261
+ errorMessage={
262
+ <span style={{ display: "inline-block", maxWidth: "240px", whiteSpace: "normal", wordBreak: "keep-all" }}>
263
+ 긴 에러 문구를 이 케이스에서만 두 줄로
264
+ <br />
265
+ 보여주고 싶을 때 사용할 수 있습니다.
266
+ </span>
267
+ }
268
+ />
269
+ ```
270
+
254
271
  ### SearchBar
255
272
 
256
- `Enter` 입력 또는 우측 검색 버튼 클릭 시 `onSearch`를 호출합니다.
273
+ `Enter` 입력 또는 우측 검색 버튼 클릭 시 `onSearch`를 호출합니다. 검증 규칙과 에러 문구는 컴포넌트 내부에서 만들지 않고, 사용하는 쪽에서 직접 제어합니다. `errorMessage`가 전달되면 에러 스타일은 자동 적용됩니다.
257
274
 
258
275
  ```tsx
259
276
  import { useState } from "react";
@@ -261,28 +278,47 @@ import { SearchBar } from "@idbrnd/design-system";
261
278
 
262
279
  function SearchExample() {
263
280
  const [keyword, setKeyword] = useState("");
281
+ const messages = {
282
+ minLength: "검색어를 2자 이상 입력해 주세요.",
283
+ maxLength: "검색어는 19자 이하로 입력해 주세요."
284
+ };
285
+ const searchErrorMessage =
286
+ keyword.length === 1
287
+ ? messages.minLength
288
+ : keyword.length >= 20
289
+ ? messages.maxLength
290
+ : undefined;
264
291
 
265
292
  return (
266
293
  <SearchBar
267
294
  value={keyword}
268
295
  onChange={(e) => setKeyword(e.target.value)}
269
296
  onSearch={(value) => console.log("search:", value)}
297
+ errorMessage={searchErrorMessage}
270
298
  placeholder="검색어를 입력하세요"
271
299
  />
272
300
  );
273
301
  }
274
302
  ```
275
303
 
276
- | Prop | 타입 | 기본값 | 설명 |
277
- | ------------- | ----------------------------------------------------- | ---------- | --------------------------------------------- |
278
- | `value` | `string` | — | **(필수)** 입력값 |
279
- | `onChange` | `ChangeEventHandler` | — | **(필수)** 변경 핸들러 |
280
- | `onSearch` | `(value: string) => void` | — | 검색 실행 콜백 |
281
- | `onClear` | `() => void` | — | 삭제 버튼 클릭 콜백. 미지정 시 기본 동작 사용 |
282
- | `size` | `"small"` \| `"medium"` \| `"large"` | `"medium"` | 크기 |
283
- | `variant` | `"default"` \| `"onTyping"` \| `"typed"` \| `"error"` | — | 상태 변형 |
284
- | `disabled` | `boolean` | `false` | 비활성화 |
285
- | `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
304
+ | Prop | 타입 | 기본값 | 설명 |
305
+ | -------------- | ----------------------------------------------------- | ----------- | -------------------------------------------------------- |
306
+ | `value` | `string` | — | **(필수)** 입력값 |
307
+ | `onChange` | `ChangeEventHandler` | — | **(필수)** 변경 핸들러 |
308
+ | `onSearch` | `(value: string) => void` | — | 검색 실행 콜백 |
309
+ | `onClear` | `() => void` | — | 삭제 버튼 클릭 콜백. 미지정 시 기본 동작 사용 |
310
+ | `size` | `"default"` \| `"small"` | `"default"` | 크기 |
311
+ | `variant` | `"default"` \| `"onTyping"` \| `"typed"` \| `"error"` | — | 상태 변형. `errorMessage`가 있으면 `error`가 우선 적용 |
312
+ | `errorMessage` | `ReactNode` | — | 의미 있는 값이 전달되면 에러 상태가 자동 적용되고 해당 문구가 표시됨 |
313
+ | `maxLength` | `number` | `20` | native `input`의 `maxLength` 속성으로 전달 |
314
+ | `heading` | `boolean` | `false` | 상단 heading 표시 여부 |
315
+ | `disabled` | `boolean` | `false` | 비활성화 |
316
+ | `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
317
+
318
+ - `SearchBar`는 UI 컴포넌트로만 동작하며, 길이 검증이나 번역 문구 생성 로직은 포함하지 않습니다.
319
+ - `errorMessage`가 비거나 내용 없는 JSX 래퍼만 남으면 에러로 처리하지 않고, `variant` prop 또는 기본 자동 상태(`default`/`typed`)로 되돌아갑니다.
320
+ - `description`, `fixedDescriptionHeight` 등 나머지 보조 속성은 `Input`과 동일하게 사용할 수 있습니다.
321
+ - helper 문구를 일부 케이스에서만 줄바꿈하고 싶다면 `errorMessage` 또는 `description`에 래퍼 노드를 넘겨 `maxWidth`나 `<br />`를 적용하면 됩니다.
286
322
 
287
323
  ---
288
324
 
package/dist/components/Input/Input.types.d.ts CHANGED
@@ -41,6 +41,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
41
41
  size?: InputSize;
42
42
  /**
43
43
  * Input 상태 variant.
44
+ * `errorMessage`가 있으면 `error`가 우선 적용된다.
44
45
  * 미지정 시 값 존재 여부에 따라 `basic`/`typed`를 자동 계산한다.
45
46
  * 포커스 시각 상태는 CSS interaction으로 처리한다.
46
47
  */
@@ -79,6 +80,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
79
80
  *
80
81
  * 주의:
81
82
  * - `variant === 'error'`이면 description 대신 에러 문구가 우선 노출된다.
83
+ * - 빈 문자열, 공백 문자열, 내용 없는 JSX 래퍼는 안내 문구가 없는 것으로 처리한다.
82
84
  * @defaultValue `false`
83
85
  */
84
86
  description?: ReactNode | boolean;
@@ -91,7 +93,8 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
91
93
  fixedDescriptionHeight?: boolean;
92
94
  /**
93
95
  * 에러 문구.
94
- * `variant === 'error'`일 때 사용된다.
96
+ * 전달되면 `variant` 지정 여부와 관계없이 `error` 상태가 우선 적용된다.
97
+ * 빈 문자열, 공백 문자열, 내용 없는 JSX 래퍼는 에러 문구로 간주하지 않는다.
95
98
  * 미지정 시 기본 에러 문구를 표시한다.
96
99
  */
97
100
  errorMessage?: ReactNode;