htlee
3fc8f03238
Phase 2: 정적 인라인 스타일을 Tailwind className으로 변환 - common/: MapView, BacktrackReplayBar, LoginPage, LayerTree, ComboBox, SubMenuBar - hns/: HNSSubstanceView, HNSScenarioView, HNSView, HNSLeftPanel 등 8파일 - prediction/: BoomDeploymentTheoryView, OilBoomSection, RecalcModal, RightPanel 등 8파일 - incidents/: IncidentsView, IncidentsLeftPanel, IncidentsRightPanel - rescue/: RescueScenarioView - aerial/: SatelliteRequest, AerialTheoryView - assets/: ShipInsurance, AssetTheory, AssetManagement 등 5파일 - board/: BoardView - reports/: ReportsView, OilSpillReportTemplate, ReportGenerator - weather/: WeatherMapOverlay, WeatherView, WeatherRightPanel 변환 패턴: color/background/border/borderRadius/display/flex/gap/fontSize/fontWeight → Tailwind 동적 스타일(rgba, gradient, 삼항 조건부, 런타임 변수)은 style prop에 유지 JS 번들: 2,921KB → 2,897KB (-24KB) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
58 lines
2.2 KiB
TypeScript
Executable File
58 lines
2.2 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-0">
|
|
{/* Tab Navigation */}
|
|
<div className="flex items-center justify-between border-b border-border bg-bg-1 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-primary-cyan border-primary-cyan'
|
|
: 'text-text-3 border-transparent hover:text-text-2'
|
|
}`}
|
|
>
|
|
{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-primary-blue 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>
|
|
)
|
|
}
|