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>
41 lines
1.2 KiB
TypeScript
Executable File
41 lines
1.2 KiB
TypeScript
Executable File
import type { MainTab } from '../../types/navigation'
|
|
import { useSubMenu } from '../../hooks/useSubMenu'
|
|
|
|
interface SubMenuBarProps {
|
|
activeMainTab: MainTab
|
|
}
|
|
|
|
export function SubMenuBar({ activeMainTab }: SubMenuBarProps) {
|
|
const { activeSubTab, setActiveSubTab, subMenuConfig } = useSubMenu(activeMainTab)
|
|
|
|
// 서브 메뉴가 없는 탭은 표시하지 않음
|
|
if (!subMenuConfig || subMenuConfig.length === 0) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="border-b border-border bg-bg-1 shrink-0">
|
|
<div className="flex px-5">
|
|
{subMenuConfig.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => setActiveSubTab(item.id)}
|
|
className={`
|
|
px-4 py-2.5 text-[13px] font-bold transition-all duration-200
|
|
font-korean tracking-tight
|
|
${
|
|
activeSubTab === item.id
|
|
? 'text-primary-cyan bg-[rgba(6,182,212,0.12)] border-b-2 border-primary-cyan'
|
|
: 'text-text-2 hover:text-text-1 hover:bg-[rgba(255,255,255,0.06)]'
|
|
}
|
|
`}
|
|
>
|
|
<span className="mr-1.5">{item.icon}</span>
|
|
{item.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|