58 lines
2.3 KiB
TypeScript
Executable File
58 lines
2.3 KiB
TypeScript
Executable File
import { useState } from 'react'
|
|
import type { AssetsTab } from './assetTypes'
|
|
import AssetManagement from './AssetManagement'
|
|
import AssetUpload from './AssetUpload'
|
|
import AssetTheory from './AssetTheory'
|
|
import ShipInsurance from './ShipInsurance'
|
|
import { useFeatureTracking } from '@common/hooks/useFeatureTracking'
|
|
|
|
// ── Main AssetsView ──
|
|
|
|
export function AssetsView() {
|
|
const [activeTab, setActiveTab] = useState<AssetsTab>('management')
|
|
|
|
// 내부 탭 전환 시 자동 감사 로그
|
|
useFeatureTracking(`assets:${activeTab}`)
|
|
|
|
return (
|
|
<div className="flex flex-col h-full w-full bg-bg-base">
|
|
{/* Tab Navigation */}
|
|
<div className="flex items-center justify-between border-b border-stroke bg-bg-surface shrink-0">
|
|
<div className="flex">
|
|
{([
|
|
{ id: 'management' as const, icon: '🗂', label: '자산 관리' },
|
|
{ id: 'upload' as const, icon: '📤', label: '자산 현행화 (업로드)' },
|
|
{ id: 'theory' as const, icon: '📚', label: '방제자원 이론' },
|
|
{ id: 'insurance' as const, icon: '🛡', label: '선박 보험정보' },
|
|
]).map(tab => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`px-5 py-3.5 text-xs font-semibold transition-all font-korean border-b-2 ${
|
|
activeTab === tab.id
|
|
? 'text-color-accent border-color-accent'
|
|
: 'text-fg-disabled border-transparent hover:text-fg-sub'
|
|
}`}
|
|
>
|
|
{tab.icon} {tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="flex items-center gap-1.5 px-3.5 py-1.5 border rounded-full text-[11px] text-color-info font-korean mr-4" style={{ borderColor: 'rgba(59,130,246,0.3)' }}>
|
|
👤 남해청_방제과 (수정 권한 ✅)
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-auto px-6 py-5">
|
|
<div className="w-full h-full">
|
|
{activeTab === 'management' && <AssetManagement />}
|
|
{activeTab === 'upload' && <AssetUpload />}
|
|
{activeTab === 'theory' && <AssetTheory />}
|
|
{activeTab === 'insurance' && <ShipInsurance />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|