237 lines
11 KiB
TypeScript
237 lines
11 KiB
TypeScript
import pdfFileIcon from '../../../assets/icons/wing-pdf-file.svg';
|
|
import pdfFileDisabledIcon from '../../../assets/icons/wing-pdf-file-disabled.svg';
|
|
|
|
interface ButtonRow {
|
|
label: string;
|
|
defaultBtn: React.ReactNode;
|
|
hoverBtn: React.ReactNode;
|
|
disabledBtn: React.ReactNode;
|
|
}
|
|
|
|
const buttonRows: ButtonRow[] = [
|
|
{
|
|
label: '프라이머리 (그라디언트)',
|
|
defaultBtn: (
|
|
<div
|
|
className="rounded-md pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative"
|
|
style={{
|
|
background:
|
|
'linear-gradient(120.41deg, rgba(6, 182, 212, 1) 0%, rgba(59, 130, 246, 1) 100%)',
|
|
}}
|
|
>
|
|
<div className="text-white text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
|
|
실행
|
|
</div>
|
|
</div>
|
|
),
|
|
hoverBtn: (
|
|
<div
|
|
className="rounded-md pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative"
|
|
style={{
|
|
background:
|
|
'linear-gradient(120.41deg, rgba(6, 182, 212, 1) 0%, rgba(59, 130, 246, 1) 100%)',
|
|
boxShadow: '0px 0px 12px 0px rgba(6, 182, 212, 0.4)',
|
|
}}
|
|
>
|
|
<div className="text-white text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
|
|
확인
|
|
</div>
|
|
</div>
|
|
),
|
|
disabledBtn: (
|
|
<div
|
|
className="bg-[#334155] rounded-md pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative"
|
|
style={{ opacity: 0.5 }}
|
|
>
|
|
<div className="text-[#64748b] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
|
|
저장
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
label: '세컨더리 (솔리드)',
|
|
defaultBtn: (
|
|
<div className="bg-[#1a2236] rounded-md border border-solid border-[#1e2a42] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative">
|
|
<div className="text-[#c0c8dc] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
|
|
취소
|
|
</div>
|
|
</div>
|
|
),
|
|
hoverBtn: (
|
|
<div className="bg-[#1e2844] rounded-md border border-solid border-[#1e2a42] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative">
|
|
<div className="text-[#c0c8dc] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
|
|
닫기
|
|
</div>
|
|
</div>
|
|
),
|
|
disabledBtn: (
|
|
<div className="bg-[rgba(26,34,54,0.50)] rounded-md border border-solid border-[rgba(30,42,66,0.30)] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative">
|
|
<div className="text-[rgba(192,200,220,0.30)] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
|
|
취소
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
label: '아웃라인 (고스트)',
|
|
defaultBtn: (
|
|
<div className="rounded-md border border-solid border-[#1e2a42] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative">
|
|
<div className="text-[#c0c8dc] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
|
|
더보기
|
|
</div>
|
|
</div>
|
|
),
|
|
hoverBtn: (
|
|
<div className="bg-[#1e2844] rounded-md border border-solid border-[#1e2a42] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative">
|
|
<div className="text-[#c0c8dc] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
|
|
필터
|
|
</div>
|
|
</div>
|
|
),
|
|
disabledBtn: (
|
|
<div className="rounded-md border border-solid border-[rgba(30,42,66,0.30)] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative">
|
|
<div className="text-[rgba(192,200,220,0.30)] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
|
|
더보기
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
label: 'PDF 액션',
|
|
defaultBtn: (
|
|
<div className="bg-[rgba(59,130,246,0.08)] rounded-md border border-solid border-[rgba(59,130,246,0.30)] pt-1.5 pr-3 pb-1.5 pl-3 flex flex-row gap-2 items-center justify-start shrink-0 relative">
|
|
<img className="shrink-0 relative overflow-visible" src={pdfFileIcon} alt="PDF 아이콘" />
|
|
<div className="text-[#3b82f6] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
|
|
PDF 다운로드
|
|
</div>
|
|
</div>
|
|
),
|
|
hoverBtn: (
|
|
<div
|
|
className="bg-[rgba(59,130,246,0.15)] rounded-md border border-solid border-[rgba(59,130,246,0.50)] pt-1.5 pr-3 pb-1.5 pl-3 flex flex-row gap-2 items-center justify-start shrink-0 relative"
|
|
style={{ boxShadow: '0px 0px 8px 0px rgba(59, 130, 246, 0.2)' }}
|
|
>
|
|
<img className="shrink-0 relative overflow-visible" src={pdfFileIcon} alt="PDF 아이콘" />
|
|
<div className="text-[#3b82f6] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
|
|
PDF 다운로드
|
|
</div>
|
|
</div>
|
|
),
|
|
disabledBtn: (
|
|
<div className="bg-[rgba(59,130,246,0.04)] rounded-md border border-solid border-[rgba(59,130,246,0.10)] pt-1.5 pr-3 pb-1.5 pl-3 flex flex-row gap-2 items-center justify-start shrink-0 relative">
|
|
<img
|
|
className="shrink-0 relative overflow-visible"
|
|
src={pdfFileDisabledIcon}
|
|
alt="PDF 아이콘 (비활성)"
|
|
/>
|
|
<div className="text-[rgba(59,130,246,0.40)] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
|
|
PDF 다운로드
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
label: '경고 (삭제)',
|
|
defaultBtn: (
|
|
<div className="bg-[rgba(239,68,68,0.10)] rounded-md border border-solid border-[rgba(239,68,68,0.30)] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative">
|
|
<div className="text-[#ef4444] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
|
|
삭제
|
|
</div>
|
|
</div>
|
|
),
|
|
hoverBtn: (
|
|
<div
|
|
className="bg-[rgba(239,68,68,0.20)] rounded-md border border-solid border-[rgba(239,68,68,0.50)] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative"
|
|
style={{ boxShadow: '0px 0px 8px 0px rgba(239, 68, 68, 0.15)' }}
|
|
>
|
|
<div className="text-[#ef4444] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
|
|
삭제
|
|
</div>
|
|
</div>
|
|
),
|
|
disabledBtn: (
|
|
<div className="bg-[rgba(239,68,68,0.05)] rounded-md border border-solid border-[rgba(239,68,68,0.15)] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative">
|
|
<div className="text-[rgba(239,68,68,0.40)] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
|
|
초기화
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
|
|
export const ButtonCatalogSection = () => {
|
|
return (
|
|
<div className="bg-[#1a2236] rounded-[10px] border border-solid border-[#1e2a42] flex flex-col gap-0 items-start justify-start overflow-hidden w-full">
|
|
{/* 카드 헤더 */}
|
|
<div className="border-b border-solid border-[#1e2a42] pt-4 pr-6 pb-4 pl-6 flex flex-row gap-3 items-center justify-start self-stretch shrink-0 relative">
|
|
<div className="bg-[#06b6d4] rounded-xl shrink-0 w-1 h-4 relative" />
|
|
<div
|
|
className="text-[#22d3ee] text-left font-korean text-xs leading-4 font-medium uppercase relative flex items-center justify-start"
|
|
style={{ letterSpacing: '1.2px' }}
|
|
>
|
|
제어 인터페이스: 버튼
|
|
</div>
|
|
</div>
|
|
|
|
{/* 테이블 본문 */}
|
|
<div className="p-6 flex flex-col gap-0 items-start justify-start self-stretch shrink-0 relative overflow-hidden">
|
|
<div className="flex flex-col items-start justify-start self-stretch shrink-0 relative">
|
|
{/* 헤더 행 */}
|
|
<div className="border-b border-solid border-[#1e2a42] flex flex-row gap-0 items-start justify-center self-stretch shrink-0 relative">
|
|
{['버튼 유형', '기본 상태', '호버 상태', '비활성 상태'].map((header) => (
|
|
<div
|
|
key={header}
|
|
className="pt-px pr-2 pb-[17.5px] pl-2 flex flex-col gap-0 items-start justify-start flex-1 min-w-0 relative"
|
|
>
|
|
<div
|
|
className="text-[#64748b] text-left font-korean text-xs font-medium uppercase relative flex items-center justify-start"
|
|
style={{ letterSpacing: '-0.55px' }}
|
|
>
|
|
{header}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* 데이터 행 */}
|
|
<div
|
|
className="flex flex-col items-start justify-start self-stretch shrink-0 relative"
|
|
style={{ margin: '-1px 0 0 0' }}
|
|
>
|
|
{buttonRows.map((row, index) => (
|
|
<div
|
|
key={row.label}
|
|
className="border-t border-solid border-[rgba(30,42,66,0.50)] flex flex-row gap-0 items-start justify-center self-stretch shrink-0 relative"
|
|
style={index === 0 ? { borderTopColor: 'transparent' } : { margin: '-1px 0 0 0' }}
|
|
>
|
|
{/* 버튼 유형 레이블 */}
|
|
<div className="pt-[31.5px] pr-2 pb-[31.5px] pl-2 flex flex-col gap-0 items-start justify-start flex-1 min-w-0 relative">
|
|
<div className="text-[#bcc9cd] text-left font-korean text-xs font-medium relative flex items-center justify-start">
|
|
{row.label}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 기본 상태 */}
|
|
<div className="pt-[24.5px] pr-2 pb-[24.5px] pl-2 flex flex-col gap-0 items-start justify-start flex-1 min-w-0 relative">
|
|
{row.defaultBtn}
|
|
</div>
|
|
|
|
{/* 호버 상태 */}
|
|
<div className="pt-[24.5px] pr-2 pb-[24.5px] pl-2 flex flex-col gap-0 items-start justify-start flex-1 min-w-0 relative">
|
|
{row.hoverBtn}
|
|
</div>
|
|
|
|
{/* 비활성 상태 */}
|
|
<div className="pt-[24.5px] pr-2 pb-[24.5px] pl-2 flex flex-col gap-0 items-start justify-start flex-1 min-w-0 relative">
|
|
{row.disabledBtn}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|