o2o-clinicad-frontend/src/features/report/ui/ReportFacebookSection.tsx

53 lines
2.1 KiB
TypeScript

import GlobeIcon from "@/assets/report/globe.svg?react";
import { BrandConsistencyMap } from "@/components/brand/BrandConsistencyMap";
import { DiagnosisRow } from "@/components/diagnosis/DiagnosisRow";
import { ConsolidationCallout } from "@/components/panel/ConsolidationCallout";
import { PageSection } from "@/components/section/PageSection";
import { MOCK_FACEBOOK_AUDIT } from "@/features/report/constants/mock_facebook_audit";
import type { FacebookAudit } from "@/features/report/types/facebookAudit";
import { FacebookPageCard } from "@/features/report/ui/facebook/FacebookPageCard";
type ReportFacebookSectionProps = {
data?: FacebookAudit;
};
export function ReportFacebookSection({ data = MOCK_FACEBOOK_AUDIT }: ReportFacebookSectionProps) {
return (
<PageSection id="facebook-audit" title="Facebook Analysis" subtitle="페이스북 페이지 분석">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{data.pages.map((page, i) => (
<FacebookPageCard key={page.pageName} page={page} index={i} />
))}
</div>
{data.brandInconsistencies.length > 0 ? (
<BrandConsistencyMap inconsistencies={data.brandInconsistencies} />
) : null}
{data.diagnosis.length > 0 ? (
<div className="mt-8 rounded-2xl bg-white border border-neutral-20 shadow-sm p-6 card-shadow animate-fade-in-up animation-delay-300">
<p className="body-14-medium text-neutral-80 mb-2 break-keep"> </p>
<p className="label-12 text-neutral-60 mb-4 break-keep">Facebook </p>
{data.diagnosis.map((item, i) => (
<DiagnosisRow
key={`${item.category}-${i}`}
category={item.category}
detail={item.detail}
severity={item.severity}
/>
))}
</div>
) : null}
{data.consolidationRecommendation ? (
<ConsolidationCallout
title="통합 권장 사항"
icon={<GlobeIcon width={20} height={20} className="text-white" aria-hidden />}
>
{data.consolidationRecommendation}
</ConsolidationCallout>
) : null}
</PageSection>
);
}