컴포넌트 문서

const dataObj = Lib.EasyObj({
    name: '홍길동',
    age: 20,
    hobbies: ['독서', '운동'],
    address: {
        city: '서울',
        street: '강남대로'
    }
});

// 상태 변경 시 자동으로 리렌더링
dataObj.age += 1;
dataObj.hobbies.push('여행');
dataObj.address.city = '부산';

const taskList = Lib.EasyList([
    { id: 1, text: '할 일 1' },
    { id: 2, text: '할 일 2' }
]);

// 배열 메서드 사용
taskList.push({ id: 3, text: '할 일 3' });
taskList.pop();

// forAll 메서드로 모든 항목 수정
taskList.forAll(item => {
    item.text += ' (완료)';
});

<Lib.Button>기본 버튼</Lib.Button>

<Lib.Button variant="secondary">Secondary</Lib.Button>

<Lib.Button variant="outline">Outline</Lib.Button>

<Lib.Button variant="ghost">Ghost</Lib.Button>

<Lib.Button variant="danger">Danger</Lib.Button>

<Lib.Button variant="success">Success</Lib.Button>

<Lib.Button variant="warning">Warning</Lib.Button>

<Lib.Button variant="link">Link Button</Lib.Button>

<Lib.Button variant="dark">Dark</Lib.Button>

<Lib.Button
    className="bg-gradient-to-r from-purple-500 to-pink-500
    hover:from-purple-600 hover:to-pink-600"
>
    그라데이션
</Lib.Button>

<Lib.Button>
    <Lib.Icon icon="ri:RiSearchLine" className="w-5 h-5 mr-2" />
    검색
</Lib.Button>

<Lib.Button disabled>Disabled</Lib.Button>

<Lib.Button size="sm">Small</Lib.Button>

<Lib.Button size="md">Medium</Lib.Button>

<Lib.Button size="lg">Large</Lib.Button>

// 기본 아이콘
<Lib.Icon icon="md:MdHome" size="24px" />

// 다양한 크기
<Lib.Icon icon="md:MdHome" size="16px" />  // 작은 크기
<Lib.Icon icon="md:MdHome" size="24px" />  // 기본 크기
<Lib.Icon icon="md:MdHome" size="32px" />  // 큰 크기
<Lib.Icon icon="md:MdHome" size="48px" />  // 더 큰 크기

// 색상이 있는 아이콘
<Lib.Icon icon="bs:BsCheckCircle" className="text-green-500" size="24px" />

// 다양한 크기
<Lib.Icon icon="bs:BsCheckCircle" className="text-green-500" size="16px" />
<Lib.Icon icon="bs:BsCheckCircle" className="text-green-500" size="24px" />
<Lib.Icon icon="bs:BsCheckCircle" className="text-green-500" size="32px" />
<Lib.Icon icon="bs:BsCheckCircle" className="text-green-500" size="48px" />

// 소셜 미디어 아이콘
<Lib.Icon icon="fi:FiGithub" size="24px" />

// 다양한 크기
<Lib.Icon icon="fi:FiGithub" size="16px" />
<Lib.Icon icon="fi:FiGithub" size="24px" />
<Lib.Icon icon="fi:FiGithub" size="32px" />
<Lib.Icon icon="fi:FiGithub" size="48px" />

<Lib.Input
    dataObj={inputDataObj}
    dataKey="basicInput"
    placeholder="텍스트 입력하세요"
/>

<Lib.Input
    dataObj={inputDataObj}
    dataKey="email"
    type="email"
    placeholder="이메일을 입력하세요"
/>

<Lib.Input
    dataObj={inputDataObj}
    dataKey="phone"
    mask="###-####-####"
    placeholder="전화번호: 010-1234-5678"
/>

<Lib.Input
    dataObj={inputDataObj}
    dataKey="businessNo"
    mask="###-##-#####"
    placeholder="사업자번호 123-45-67890"
/>

<Lib.Input
    dataObj={inputDataObj}
    dataKey="amount"
    type="number"
    maxDigits={10}
    maxDecimals={2}
    placeholder="숫자 입력 (최대 10자리, 소수점2자리)"
/>

<Lib.Input
    dataObj={inputDataObj}
    dataKey="code"
    filter="A-Za-z0-9"
    placeholder="영문/숫자 입력"
/>

<Lib.Input
    dataObj={inputDataObj}
    dataKey="koreanName"
    filter="가-힣"
    placeholder="한글 입력"
/>

<Lib.Input
    dataObj={inputDataObj}
    dataKey="email"
    error="이메일 형식이 올바르지 않습니다"
    placeholder="에러 상태 표시"
/>

<Lib.Input
    dataObj={inputDataObj}
    dataKey="price"
    type="number"
    maxDigits={10}
    className="text-right"
    placeholder="금액 입력"
    suffix="원"
/>

<Lib.Input
    dataObj={inputDataObj}
    dataKey="searchKeyword"
    prefix={<Lib.Icon icon="ri:RiSearchLine" className="w-5 h-5 text-gray-400" />}
    placeholder="검색어를 입력하세요"
/>

<Lib.Input
    dataObj={inputDataObj}
    dataKey="password"
    type="password"
    placeholder="비밀번호 입력"
    togglePassword
/>

const jobOptionList = Lib.EasyList([
  { id: '', label: '직무를 선택하세요', placeholder: true, selected: true },
  { id: 'designer', label: '디자이너' },
  { id: 'developer', label: '개발자' },
  { id: 'pm', label: '프로덕트 매니저' },
]);

<Lib.Select
  dataList={jobOptionList}
  valueKey="id"
  textKey="label"
  status="success"
  statusMessage="dataList의 selected 플래그와 동기화됩니다."
/>

const [roleValue, setRoleValue] = useState('developer');

<Lib.Select
  dataList={jobOptionList}
  valueKey="id"
  textKey="label"
  value={roleValue}
  onValueChange={setRoleValue}
  status="info"
  statusMessage={`value prop: ${roleValue}`}
/>

<Lib.Select
  dataList={loadingOptionList}
  valueKey="id"
  textKey="label"
  status="loading"
  assistiveText="옵션을 불러오는 중입니다."
  disabled
/>

<Lib.Select
  dataList={jobOptionList}
  valueKey="id"
  textKey="label"
  status="error"
  statusMessage="필수 입력 항목입니다."
/>

<Lib.Select
  dataList={Lib.EasyList([])}
  status="empty"
  assistiveText="선택 가능한 항목이 비어 있습니다."
/>

<Lib.Checkbox
    label="기본 체크박스"
    dataObj={checkboxDataObj}
    dataKey="basicCheckbox"
/>

<Lib.Checkbox
    label="비활성화 체크박스"
    disabled
/>

<Lib.Checkbox
    label="기본 색상 (Primary)"
    dataObj={checkboxDataObj}
    dataKey="primary"
    color="primary"
/>
<Lib.Checkbox
    label="커스텀 빨간색"
    dataObj={checkboxDataObj}
    dataKey="red"
    color="#FF0000"
/>

const [isChecked, setIsChecked] = useState(false);

<Lib.Checkbox
    label="제어 컴포넌트"
    checked={isChecked}
    onChange={(event) => setIsChecked(event.target.checked)}
/>

<Lib.Checkbox
    name="terms"
    label="[필수] 서비스 이용약관 동의"
    dataObj={termsDataObj}
    dataKey="termsAgreed"
/>

<Lib.CheckButton
    dataObj={checkDataObj}
    dataKey="basicCheckButton"
>
    기본 체크버튼
</Lib.CheckButton>

<Lib.CheckButton disabled>
    비활성화 체크버튼
</Lib.CheckButton>

<Lib.CheckButton color="#FF0000" dataObj={colorDataObj} dataKey="redButton">
    빨간색
</Lib.CheckButton>
<Lib.CheckButton color="#4CAF50" dataObj={colorDataObj} dataKey="greenButton">
    초록색
</Lib.CheckButton>
<Lib.CheckButton color="#2196F3" dataObj={colorDataObj} dataKey="blueButton">
    파란색
</Lib.CheckButton>

const [isChecked, setIsChecked] = useState(false);

<Lib.CheckButton
    checked={isChecked}
    onChange={() => setIsChecked(!isChecked)}
>
    제어 컴포넌트
</Lib.CheckButton>

<Lib.Radiobox
    name="job"
    label="개발자"
    value="developer"
    dataObj={radioDataObj}
    dataKey="selectedJob"
/>

<Lib.Radiobox
    name="disabled"
    label="비활성화 1"
    value="disabled1"
    disabled
/>

<Lib.Radiobox
    name="payment"
    label="신용카드"
    value="card"
    dataObj={radioDataObj}
    dataKey="paymentMethod"
    color="#FF6B6B"
/>

const [optionValue, setOptionValue] = useState('');

<Lib.Radiobox
    name="controlled"
    label="옵션 1"
    value="option1"
    checked={optionValue === 'option1'}
    onChange={(event) => setOptionValue(event.target.value)}
/>

<Lib.RadioButton
    name="size"
    value="small"
    dataObj={radioDataObj}
    dataKey="selectedSize"
>
    Small
</Lib.RadioButton>

<Lib.RadioButton
    name="disabled"
    value="disabled1"
    disabled
>
    비활성화 1
</Lib.RadioButton>

<Lib.RadioButton
    name="theme"
    value="light"
    dataObj={radioDataObj}
    dataKey="selectedTheme"
    color="#FF6B6B"
>
    라이트
</Lib.RadioButton>

const [languageValue, setLanguageValue] = useState('');

<Lib.RadioButton
    name="controlled"
    value="kr"
    checked={languageValue === 'kr'}
    onChange={(event) => setLanguageValue(event.target.value)}
>
    한국어
</Lib.RadioButton>

const loadingTimerRef = useRef(null);
const { setLoading } = useGlobalUi();

/**
 * @description 전역 로딩 예제 타이머를 정리
 * 처리 규칙: 예제 컴포넌트가 사라지면 pending timeout을 취소한다.
 */
useEffect(() => () => clearTimeout(loadingTimerRef.current), []);

/**
 * @description 전역 로딩 버튼 클릭을 처리
 * 처리 규칙: 로딩 표시 후 2초 뒤 자동 해제한다.
 */
const handleLoadingClick = () => {
  setLoading(true);
  clearTimeout(loadingTimerRef.current);
  loadingTimerRef.current = setTimeout(() => setLoading(false), 2000);
};

<Lib.Button onClick={handleLoadingClick}>
  전체 화면 로딩 (2초)
</Lib.Button>

// useSharedStore 사용
const { showAlert } = useGlobalUi();

// 기본 알림
showAlert('기본 알림 메시지입니다.');

// 정보/성공/경고/오류 알림
showAlert('정보 알림 메시지입니다.', { title: '정보', type: 'info' });
showAlert('성공 알림 메시지입니다.', { title: '성공', type: 'success' });
showAlert('경고 알림 메시지입니다.', { title: '경고', type: 'warning' });
showAlert('오류 알림 메시지입니다.', { title: '오류', type: 'error' });

// 알림 닫힘 시 실행될 콜백
showAlert('작업이 완료되었습니다.', {
  title: '알림',
  onClick: function() {
    alert('알림을 닫았습니다.');
  }
});

// useRef 로 입력창 참조 생성
const inputRef = useRef(null);

// 알림을 닫으면 입력창으로 포커스 이동
<div className="flex gap-4 items-center">
  <Lib.Button
    onClick={() => {
      showAlert('알림을 닫히면 입력창으로 커서가 이동합니다.', {
        title: '알림',
        onFocus: () => inputRef.current?.focus(),
      });
    }}
  >
    알림 띄우기
  </Lib.Button>
  <Lib.Input ref={inputRef} placeholder="커서가 여기로 이동합니다" />
</div>

// useSharedStore 사용
const { showConfirm, showAlert } = useGlobalUi();

// 기본 확인
showConfirm('정말 진행하시겠습니까?').then((result) => {
  if (result) showAlert('확인했습니다.');
});

// 경고 확인
showConfirm('해당 작업은 되돌릴 수 없습니다.\n계속하시겠습니까?', {
  title: '주의',
  type: 'warning',
  confirmText: '계속',
  cancelText: '중단',
});

// 위험 확인
showConfirm('모든 데이터를 삭제합니다.\n정말 삭제하시겠습니까?', {
  title: '위험 확인',
  type: 'danger',
  confirmText: '삭제',
  cancelText: '취소',
});

// 확인/취소 시 실행될 콜백
showConfirm('삭제를 진행하시겠습니까?', {
  title: '위험 확인',
  type: 'danger',
  confirmText: '삭제',
  cancelText: '취소',
  onConfirm: () => showAlert('삭제가 완료되었습니다.'),
  onCancel: () => showAlert('삭제가 취소되었습니다.'),
});

// useRef 로 입력창 참조 생성
const inputRef = useRef(null);

// 모달 닫힘 후 입력창으로 포커스 이동
<div className="flex gap-4 items-center">
  <Lib.Button
    onClick={() => {
      showConfirm('확인 모달이 닫히면 입력창으로 커서가 이동합니다.', {
        title: '포커스 이동',
        onFocus: () => inputRef.current?.focus(),
      });
    }}
  >
    포커스 이동 표시
  </Lib.Button>
  <Lib.Input ref={inputRef} placeholder="커서가 여기로 이동합니다" />
</div>

// useSharedStore 사용
const { showToast } = useGlobalUi();

// 기본 토스트
showToast('기본 토스트 메시지입니다.');

showToast('정보 토스트 메시지입니다.', { type: 'info' });
showToast('성공 토스트 메시지입니다.', { type: 'success' });
showToast('경고 토스트 메시지입니다.', { type: 'warning' });
showToast('오류 토스트 메시지입니다.', { type: 'error' });

showToast('상단 왼쪽에 표시합니다.', { position: 'top-left' });
showToast('상단 중앙에 표시합니다.', { position: 'top-center' });
showToast('상단 오른쪽에 표시합니다.', { position: 'top-right' });
showToast('하단 왼쪽에 표시합니다.', { position: 'bottom-left' });
showToast('하단 중앙에 표시합니다.', { position: 'bottom-center' });
showToast('하단 오른쪽에 표시합니다.', { position: 'bottom-right' });

showToast('2초에 사라집니다.', { duration: 2000 });
showToast('5초에 사라집니다.', { duration: 5000 });
showToast('자동으로 사라지지 않습니다.', { duration: Infinity });

const tabDataObj = Lib.EasyObj({
    selectedTab: 0
});

<Lib.Tab dataObj={tabDataObj} dataKey="selectedTab">...</Lib.Tab>

const [activeTab, setActiveTab] = useState(0);

<Lib.Tab tabIndex={activeTab} onChange={setActiveTab}>...</Lib.Tab>

<Lib.Tab
    className="bg-gray-100 rounded-lg p-4"
    dataObj={tabDataObj}
    dataKey="customTab"
>...</Lib.Tab>

<Lib.Tab dataObj={tabDataObj} dataKey="iconTab">...</Lib.Tab>

const [isOpen, setIsOpen] = useState(false);

<Lib.Button onClick={() => setIsOpen(true)}>
    기본 모달 열기
</Lib.Button>

<Lib.Modal
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
>
    <Lib.Modal.Header onClose={() => setIsOpen(false)}>
        <h2 className="text-xl font-semibold">기본 모달</h2>
    </Lib.Modal.Header>

    <Lib.Modal.Body>
        <p>기본적인 모달 예시입니다.</p>
    </Lib.Modal.Body>

    <Lib.Modal.Footer>
        <div className="flex justify-end">
            <Lib.Button onClick={() => setIsOpen(false)}>
                닫기
            </Lib.Button>
        </div>
    </Lib.Modal.Footer>
</Lib.Modal>

const [isOpen, setIsOpen] = useState(false);
const modalSizeList = ['sm', 'md', 'lg', 'xl', 'full'];
const [currentSize, setCurrentSize] = useState('md');

<div className="flex flex-wrap gap-2">
    {modalSizeList.map(size => (
        <Lib.Button
            key={size}
            onClick={() => {
                setCurrentSize(size);
                setIsOpen(true);
            }}
        >
            {size.toUpperCase()} 크기
        </Lib.Button>
    ))}
</div>

<Lib.Modal
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
    size={currentSize}
>
    <Lib.Modal.Header onClose={() => setIsOpen(false)}>
        <h2 className="text-xl font-semibold">{currentSize.toUpperCase()} 크기 모달</h2>
    </Lib.Modal.Header>

    <Lib.Modal.Body>
        <p>다양한 크기의 모달을 지원합니다.</p>
    </Lib.Modal.Body>
</Lib.Modal>

const [isOpen, setIsOpen] = useState(false);

<Lib.Button onClick={() => setIsOpen(true)}>
    폼 모달 열기
</Lib.Button>

<Lib.Modal
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
>
    <Lib.Modal.Header onClose={() => setIsOpen(false)}>
        <h2 className="text-xl font-semibold">사용자 정보</h2>
    </Lib.Modal.Header>

    <Lib.Modal.Body>
        <form className="space-y-4">
            <div>
                <label className="block text-sm font-medium text-gray-700">이름</label>
                <Lib.Input className="mt-1" placeholder="이름을 입력하세요" />
            </div>
            <div>
                <label className="block text-sm font-medium text-gray-700">이메일</label>
                <Lib.Input className="mt-1" type="email" placeholder="이메일을 입력하세요" />
            </div>
        </form>
    </Lib.Modal.Body>

    <Lib.Modal.Footer>
        <div className="flex justify-end gap-2">
            <Lib.Button onClick={() => setIsOpen(false)}>
                저장
            </Lib.Button>
            <Lib.Button
                variant="outline"
                onClick={() => setIsOpen(false)}
            >
                취소
            </Lib.Button>
        </div>
    </Lib.Modal.Footer>
</Lib.Modal>

const [isOpen, setIsOpen] = useState(false);

<Lib.Modal
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
    draggable={true}
>
    <Lib.Modal.Header onClose={() => setIsOpen(false)}>
        <h2 className="text-xl font-semibold">드래그 가능한 모달</h2>
    </Lib.Modal.Header>

    <Lib.Modal.Body>
        <p>이 모달은 헤더 영역을 드래그하여 이동할 수 있습니다.</p>
    </Lib.Modal.Body>

    <Lib.Modal.Footer>
        <div className="flex justify-end">
            <Lib.Button onClick={() => setIsOpen(false)}>
                닫기
            </Lib.Button>
        </div>
    </Lib.Modal.Footer>
</Lib.Modal>

const [isOpen, setIsOpen] = useState(false);

<Lib.Modal
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
    top="20px"
    left="calc(100% - 20px - 512px)"
    draggable
>
    <Lib.Modal.Header onClose={() => setIsOpen(false)}>
        <h2 className="text-xl font-semibold">위치 지정 모달</h2>
    </Lib.Modal.Header>

    <Lib.Modal.Body>
        <p>top, left prop으로 초기 위치를 지정할 수 있습니다.</p>
    </Lib.Modal.Body>
</Lib.Modal>