1f6b592b9f
- 공통 레이아웃 패턴 적용: [달력] → [프리셋] → [검색창] → [버튼들] - beforeTableContent → headerActions + createButton 마이그레이션 - DateRangeSelector extraActions prop 활용하여 검색창 통합 - PricingListClient 테이블 행 클릭 → 상세 이동 기능 추가 - 회계 관련 페이지 (입금/출금/매입/매출/어음/카드/예상지출 등) 정리 - 건설 관련 페이지 검색 영역 정리 - 부모 메뉴 리다이렉트 컴포넌트 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
72 lines
1.7 KiB
TypeScript
72 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* TabChip - 모바일용 탭 칩 컴포넌트
|
|
*
|
|
* 디자인시스템 Atoms로 등록된 재사용 가능한 탭 칩입니다.
|
|
* - 활성/비활성 상태 스타일
|
|
* - 카운트 표시
|
|
* - 색상 변형 지원
|
|
*/
|
|
|
|
export interface TabChipProps {
|
|
/** 탭 라벨 */
|
|
label: string;
|
|
/** 카운트 숫자 */
|
|
count?: number;
|
|
/** 활성 상태 (active 또는 isActive 둘 다 지원) */
|
|
active?: boolean;
|
|
/** 활성 상태 (active의 별칭) */
|
|
isActive?: boolean;
|
|
/** 클릭 이벤트 */
|
|
onClick?: () => void;
|
|
/** 색상 테마 */
|
|
color?: "blue" | "gray" | "green" | "orange" | "purple" | "red";
|
|
/** 추가 className */
|
|
className?: string;
|
|
}
|
|
|
|
export function TabChip({
|
|
label,
|
|
count,
|
|
active = false,
|
|
isActive,
|
|
onClick,
|
|
color = "blue",
|
|
className = "",
|
|
}: TabChipProps) {
|
|
// isActive가 전달되면 isActive 사용, 아니면 active 사용
|
|
const isActiveState = isActive ?? active;
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className={`
|
|
flex items-center gap-2 px-4 py-2.5 rounded-full border transition-all
|
|
${
|
|
isActiveState
|
|
? "border-primary bg-primary text-white shadow-sm"
|
|
: "border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50"
|
|
}
|
|
${className}
|
|
`}
|
|
>
|
|
<span
|
|
className={`text-sm ${
|
|
isActiveState ? "text-white font-medium" : "text-gray-600 font-normal"
|
|
}`}
|
|
>
|
|
{label}
|
|
</span>
|
|
{count !== undefined && (
|
|
<span
|
|
className={`text-sm font-semibold ${
|
|
isActiveState ? "text-white" : "text-gray-900"
|
|
}`}
|
|
>
|
|
{count}
|
|
</span>
|
|
)}
|
|
</button>
|
|
);
|
|
} |