95 lines
3.6 KiB
TypeScript
95 lines
3.6 KiB
TypeScript
import { useState } from "react";
|
|
import { ComparisonRow } from "@/features/report/ui/transformation/ComparisonRow";
|
|
import type { TransformationProposal } from "@/features/report/types/transformationProposal";
|
|
import { NewChannelProposalsTable } from "@/features/report/ui/transformation/NewChannelProposalsTable";
|
|
import { PlatformStrategyCard } from "@/features/report/ui/transformation/PlatformStrategyCard";
|
|
import {
|
|
TRANSFORMATION_TABS,
|
|
type TransformationTabKey,
|
|
} from "@/features/report/ui/transformation/transformationTabs";
|
|
|
|
export type TransformationTabbedViewProps = {
|
|
data: TransformationProposal;
|
|
};
|
|
|
|
export function TransformationTabbedView({ data }: TransformationTabbedViewProps) {
|
|
const [activeTab, setActiveTab] = useState<TransformationTabKey>("brand");
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-wrap gap-2 mb-8" role="tablist" aria-label="전환 제안 탭">
|
|
{TRANSFORMATION_TABS.map((tab) => {
|
|
const isActive = activeTab === tab.key;
|
|
return (
|
|
<button
|
|
key={tab.key}
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={isActive}
|
|
title={tab.labelKr}
|
|
onClick={() => setActiveTab(tab.key)}
|
|
className={`rounded-full px-4 py-2 label-12 font-medium transition-all break-keep cursor-pointer ${
|
|
isActive
|
|
? "btn-primary shadow-lg"
|
|
: "bg-white border border-neutral-20 text-neutral-70 hover:bg-neutral-10"
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{activeTab === "brand" ? (
|
|
<div
|
|
className="rounded-2xl bg-white border border-neutral-20 shadow-sm p-6 card-shadow animate-fade-in-up"
|
|
role="tabpanel"
|
|
>
|
|
<h3 className="font-serif headline-24 text-navy-900 mb-4 break-keep">브랜드 아이덴티티</h3>
|
|
{data.brandIdentity.map((item, i) => (
|
|
<ComparisonRow key={`${item.area}-${i}`} area={item.area} asIs={item.asIs} toBe={item.toBe} />
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
{activeTab === "content" ? (
|
|
<div
|
|
className="rounded-2xl bg-white border border-neutral-20 shadow-sm p-6 card-shadow animate-fade-in-up"
|
|
role="tabpanel"
|
|
>
|
|
<h3 className="font-serif headline-24 text-navy-900 mb-4 break-keep">콘텐츠 전략</h3>
|
|
{data.contentStrategy.map((item, i) => (
|
|
<ComparisonRow key={`${item.area}-${i}`} area={item.area} asIs={item.asIs} toBe={item.toBe} />
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
{activeTab === "platform" ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6" role="tabpanel">
|
|
{data.platformStrategies.map((strategy, i) => (
|
|
<PlatformStrategyCard key={strategy.platform} strategy={strategy} index={i} />
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
{activeTab === "website" ? (
|
|
<div
|
|
className="rounded-2xl bg-white border border-neutral-20 shadow-sm p-6 card-shadow animate-fade-in-up"
|
|
role="tabpanel"
|
|
>
|
|
<h3 className="font-serif headline-24 text-navy-900 mb-4 break-keep">웹사이트 개선</h3>
|
|
{data.websiteImprovements.map((item, i) => (
|
|
<ComparisonRow key={`${item.area}-${i}`} area={item.area} asIs={item.asIs} toBe={item.toBe} />
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
{activeTab === "newChannel" ? (
|
|
<div role="tabpanel">
|
|
<NewChannelProposalsTable rows={data.newChannelProposals} />
|
|
</div>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|