33가지 UI 구성 요소를 직접 확인하세요

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 [isOpen, setIsOpen] = useState(false);

<Lib.Button icon="ri:RiCheckboxCircleLine" onClick={() => setIsOpen(true)}>
  기본 모달 열기
</Lib.Button>

<Lib.Modal isOpen={isOpen} onClose={() => setIsOpen(false)} ariaLabel="고객 상태 변경 확인 모달">
    <Lib.Modal.Header onClose={() => setIsOpen(false)}>
        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-indigo-600">CUSTOMER STATUS</p>
        <h2 className="mt-1 text-xl font-semibold text-slate-950">상담 완료로 변경할까요?</h2>
        <p className="mt-1 text-sm text-slate-500">변경 전에 고객 정보와 처리 내용을 확인하세요.</p>
    </Lib.Modal.Header>

    <Lib.Modal.Body>
        <div className="rounded-xl border border-slate-200 bg-slate-50/80 p-4">...</div>
    </Lib.Modal.Body>

    <Lib.Modal.Footer>
        <div className="flex justify-end gap-2">...</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} aria-pressed={size === currentSize} variant={size === currentSize ? 'primary' : 'outline'} onClick={() => {
            setCurrentSize(size);
            setIsOpen(true);
        }}>
            {size.toUpperCase()} 크기
        </Lib.Button>
    ))}
</div>

<Lib.Modal
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
    size={currentSize}
    ariaLabel={`${currentSize.toUpperCase()} 크기 모달`}
>
    <Lib.Modal.Header onClose={() => setIsOpen(false)}>
        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-indigo-600">Preset size</p>
        <h2 className="mt-1 text-xl font-semibold text-slate-950">{currentSize.toUpperCase()} 크기 모달</h2>
    </Lib.Modal.Header>
    <Lib.Modal.Body>
        <div className="flex flex-wrap gap-2" role="group" aria-label="모달 크기 변경">
            {modalSizeList.map(size => (
                <Lib.Button
                    key={size}
                    size="sm"
                    aria-pressed={size === currentSize}
                    variant={size === currentSize ? 'primary' : 'outline'}
                    onClick={() => setCurrentSize(size)}
                >
                    {size.toUpperCase()}
                </Lib.Button>
            ))}
        </div>
    </Lib.Modal.Body>
</Lib.Modal>

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

<Lib.Button icon="ri:RiUserSettingsLine" onClick={() => setIsOpen(true)}>
    폼 모달 열기
</Lib.Button>

<Lib.Modal
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
    size="lg"
    ariaLabel="사용자 정보 편집 모달"
>
    <Lib.Modal.Header onClose={() => setIsOpen(false)}>
        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-indigo-600">Profile</p>
        <h2 className="mt-1 text-xl font-semibold text-slate-950">사용자 정보</h2>
    </Lib.Modal.Header>

    <Lib.Modal.Body>
        <form className="grid gap-4 sm:grid-cols-2">
            <div>
                <label className="block text-sm font-medium text-slate-700">이름</label>
                <Lib.Input className="mt-1" placeholder="이름을 입력하세요" />
            </div>
            <div>
                <label className="block text-sm font-medium text-slate-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 variant="outline" onClick={() => setIsOpen(false)}>취소</Lib.Button>
            <Lib.Button onClick={() => setIsOpen(false)}>저장</Lib.Button>
        </div>
    </Lib.Modal.Footer>
</Lib.Modal>

<Lib.Modal
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
    draggable
    ariaLabel="드래그 가능한 모달"
>
    <Lib.Modal.Header onClose={() => setIsOpen(false)}>
        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-indigo-600">Draggable</p>
        <h2 className="mt-1 text-xl font-semibold text-slate-950">드래그 가능한 모달</h2>
    </Lib.Modal.Header>

    <Lib.Modal.Body>...</Lib.Modal.Body>
</Lib.Modal>

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

<Lib.Modal
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
    top="20px"
    left="calc(100% - 20px - 512px)"
    draggable
    ariaLabel="위치 지정 모달"
>
    <Lib.Modal.Header onClose={() => setIsOpen(false)}>
        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-indigo-600">Positioned</p>
        <h2 className="mt-1 text-xl font-semibold text-slate-950">위치 지정 모달</h2>
    </Lib.Modal.Header>

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