+
+
+
+
+
+
+
+
+
+ {item.category}
+{item.detail}
+
+
+ );
+}
diff --git a/src/components/card/ChannelScoreCard.tsx b/src/components/card/ChannelScoreCard.tsx
new file mode 100644
index 0000000..24fb864
--- /dev/null
+++ b/src/components/card/ChannelScoreCard.tsx
@@ -0,0 +1,47 @@
+import type { CSSProperties, ReactNode } from "react";
+import { SeverityBadge } from "@/components/badge/SeverityBadge";
+import { ScoreRing } from "@/components/rating/ScoreRing";
+import type { Severity } from "@/types/severity";
+
+export type ChannelScoreCardProps = {
+ channel: string;
+ icon: ReactNode;
+ /** 아이콘·점수 링에 쓰는 브랜드/강조 색 (없으면 링은 점수대비 자동색) */
+ accentColor?: string;
+ score: number;
+ maxScore: number;
+ headline: string;
+ severity: Severity;
+ className?: string;
+ style?: CSSProperties;
+};
+
+export function ChannelScoreCard({
+ channel,
+ icon,
+ accentColor,
+ score,
+ maxScore,
+ headline,
+ severity,
+ className = "",
+ style,
+}: ChannelScoreCardProps) {
+ return (
+ Brand Consistency Map
+전 채널 브랜드 일관성 분석
+ +
+ {inconsistencies.map((item, i) => {
+ const wrongCount = item.values.filter((v) => !v.isCorrect).length;
+ const isOpen = expanded === i;
+
+ return (
+
+
+
+
+ {isOpen ? (
+
+ );
+ })}
+
+
+ ) : null}
+
+ {item.values.map((v) => (
+
+
+
+
+ {v.channel}
+
+
+ {v.value}
+
+
+ {v.isCorrect ? (
+
+ ))}
+
+
+
+
+
{item.impact}
+
+
+
+
{item.recommendation}
+
+
+ );
+}
diff --git a/src/components/card/InfoStatCard.tsx b/src/components/card/InfoStatCard.tsx
new file mode 100644
index 0000000..5d0427a
--- /dev/null
+++ b/src/components/card/InfoStatCard.tsx
@@ -0,0 +1,28 @@
+import type { CSSProperties, ReactNode } from "react";
+
+export type InfoStatCardProps = {
+ icon: ReactNode;
+ label: string;
+ value: ReactNode;
+ className?: string;
+ style?: CSSProperties;
+};
+
+export function InfoStatCard({ icon, label, value, className = "", style }: InfoStatCardProps) {
+ return (
+
+ {icon}
+
+ {channel}
+{headline}
+
+
+ );
+}
diff --git a/src/components/card/MetricCard.tsx b/src/components/card/MetricCard.tsx
new file mode 100644
index 0000000..9e00a5a
--- /dev/null
+++ b/src/components/card/MetricCard.tsx
@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import ArrowDownIcon from "@/assets/icons/arrow-down.svg?react";
+import ArrowUpIcon from "@/assets/icons/arrow-up.svg?react";
+import MinusIcon from "@/assets/icons/minus.svg?react";
+
+export type MetricCardProps = {
+ label: string;
+ value: string | number;
+ subtext?: string;
+ icon?: ReactNode;
+ trend?: "up" | "down" | "neutral";
+};
+
+const trendConfig = {
+ up: { Icon: ArrowUpIcon, className: "text-violet-600" },
+ down: { Icon: ArrowDownIcon, className: "text-[var(--color-status-critical-text)]" },
+ neutral: { Icon: MinusIcon, className: "text-neutral-60" },
+} as const;
+
+export function MetricCard({ label, value, subtext, icon, trend }: MetricCardProps) {
+ const TrendGlyph = trend ? trendConfig[trend].Icon : null;
+ const trendColor = trend ? trendConfig[trend].className : "";
+
+ return (
+
+
+
+ {icon}
+
+
+
+ {label}
+{value}
+
+ {icon ?
+ );
+}
diff --git a/src/components/card/PixelInstallCard.tsx b/src/components/card/PixelInstallCard.tsx
new file mode 100644
index 0000000..fa047cf
--- /dev/null
+++ b/src/components/card/PixelInstallCard.tsx
@@ -0,0 +1,38 @@
+import CheckCircleIcon from "@/assets/report/check-circle.svg?react";
+import XCircleIcon from "@/assets/report/x-circle.svg?react";
+
+export type PixelInstallCardProps = {
+ name: string;
+ installed: boolean;
+ details?: string;
+};
+
+export function PixelInstallCard({ name, installed, details }: PixelInstallCardProps) {
+ return (
+ {icon}
: null}
+ {label}
+
+ {value}
+ {trend && TrendGlyph ? (
+
+
+ {subtext ? {subtext}
: null} +
+ {installed ? (
+
+ );
+}
diff --git a/src/components/card/TopVideoCard.tsx b/src/components/card/TopVideoCard.tsx
new file mode 100644
index 0000000..790624f
--- /dev/null
+++ b/src/components/card/TopVideoCard.tsx
@@ -0,0 +1,47 @@
+import type { CSSProperties } from "react";
+import EyeIcon from "@/assets/icons/eye.svg?react";
+import { formatCompactNumber } from "@/lib/formatNumber";
+
+export type TopVideoCardProps = {
+ title: string;
+ views: number;
+ uploadedAgo: string;
+ type: "Short" | "Long";
+ duration?: string;
+ className?: string;
+ style?: CSSProperties;
+};
+
+export function TopVideoCard({
+ title,
+ views,
+ uploadedAgo,
+ type,
+ duration,
+ className = "",
+ style,
+}: TopVideoCardProps) {
+ const typeClass =
+ type === "Short"
+ ? "bg-lavender-100 text-violet-700"
+ : "bg-[var(--color-status-info-bg)] text-[var(--color-status-info-text)]";
+
+ return (
+
+
+ + {name} +
+ {details ? ( +{details}
+ ) : null} +
+
+ );
+}
diff --git a/src/components/channel/OtherChannelRow.tsx b/src/components/channel/OtherChannelRow.tsx
new file mode 100644
index 0000000..dbb2c32
--- /dev/null
+++ b/src/components/channel/OtherChannelRow.tsx
@@ -0,0 +1,74 @@
+import ExternalLinkIcon from "@/assets/icons/external-link.svg?react";
+import CheckCircleIcon from "@/assets/report/check-circle.svg?react";
+import HelpCircleIcon from "@/assets/report/help-circle.svg?react";
+import XCircleIcon from "@/assets/report/x-circle.svg?react";
+import type { OtherChannelStatus } from "@/types/otherChannels";
+import { safeUrl } from "@/lib/safeUrl";
+
+export type OtherChannelRowProps = {
+ name: string;
+ details: string;
+ status: OtherChannelStatus;
+ url?: string;
+ animationDelayMs?: number;
+};
+
+const statusMeta: Record<
+ OtherChannelStatus,
+ { Icon: typeof CheckCircleIcon; iconClass: string; labelClass: string; label: string }
+> = {
+ active: {
+ Icon: CheckCircleIcon,
+ iconClass: "text-[var(--color-status-good-dot)]",
+ labelClass: "text-[var(--color-status-good-text)]",
+ label: "활성",
+ },
+ inactive: {
+ Icon: XCircleIcon,
+ iconClass: "text-[var(--color-status-critical-dot)]",
+ labelClass: "text-[var(--color-status-critical-text)]",
+ label: "비활성",
+ },
+ unknown: {
+ Icon: HelpCircleIcon,
+ iconClass: "text-neutral-60",
+ labelClass: "text-neutral-60",
+ label: "미확인",
+ },
+ not_found: {
+ Icon: XCircleIcon,
+ iconClass: "text-[var(--color-status-critical-dot)]",
+ labelClass: "text-[var(--color-status-critical-text)]",
+ label: "미발견",
+ },
+};
+
+export function OtherChannelRow({ name, details, status, url, animationDelayMs = 0 }: OtherChannelRowProps) {
+ const meta = statusMeta[status];
+ const { Icon } = meta;
+
+ return (
+
+ );
+}
diff --git a/src/components/chip/TagChipList.tsx b/src/components/chip/TagChipList.tsx
new file mode 100644
index 0000000..8b0eb86
--- /dev/null
+++ b/src/components/chip/TagChipList.tsx
@@ -0,0 +1,32 @@
+export type TagChipListProps = {
+ tags: string[];
+ title?: string;
+ className?: string;
+ /** 기본 `animation-delay-400`. 빈 문자열이면 지연 없음 */
+ entranceDelayClass?: string;
+};
+
+export function TagChipList({
+ tags,
+ title,
+ className = "",
+ entranceDelayClass = "animation-delay-400",
+}: TagChipListProps) {
+ if (!tags.length) return null;
+
+ return (
+
+ {type}
+ {duration ? {duration} : null}
+ {uploadedAgo}
+
+ {title}
+
+
+
+ {title ?
+ );
+}
diff --git a/src/components/compare/ComparisonRow.tsx b/src/components/compare/ComparisonRow.tsx
new file mode 100644
index 0000000..73325f8
--- /dev/null
+++ b/src/components/compare/ComparisonRow.tsx
@@ -0,0 +1,19 @@
+export type ComparisonRowProps = {
+ area: string;
+ asIs: string;
+ toBe: string;
+};
+
+export function ComparisonRow({ area, asIs, toBe }: ComparisonRowProps) {
+ return (
+ {title}
: null} +
+ {tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+ {area}
+
+ );
+}
diff --git a/src/components/diagnosis/DiagnosisRow.tsx b/src/components/diagnosis/DiagnosisRow.tsx
new file mode 100644
index 0000000..381359f
--- /dev/null
+++ b/src/components/diagnosis/DiagnosisRow.tsx
@@ -0,0 +1,22 @@
+import { SeverityBadge } from "@/components/badge/SeverityBadge";
+import type { Severity } from "@/types/severity";
+
+export type DiagnosisRowProps = {
+ category: string;
+ detail: string;
+ severity: Severity;
+};
+
+export function DiagnosisRow({ category, detail, severity }: DiagnosisRowProps) {
+ return (
+
+ {asIs}
+
+
+ {toBe}
+
+
+
+ );
+}
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..c3a2d13
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,16 @@
+export { ComparisonRow, type ComparisonRowProps } from "@/components/compare/ComparisonRow";
+export { BrandConsistencyMap, type BrandConsistencyMapProps } from "@/components/brand/BrandConsistencyMap";
+export { OtherChannelRow, type OtherChannelRowProps } from "@/components/channel/OtherChannelRow";
+export { SeverityBadge, type SeverityBadgeProps } from "@/components/badge/SeverityBadge";
+export { ChannelScoreCard, type ChannelScoreCardProps } from "@/components/card/ChannelScoreCard";
+export { InfoStatCard, type InfoStatCardProps } from "@/components/card/InfoStatCard";
+export { MetricCard, type MetricCardProps } from "@/components/card/MetricCard";
+export { PixelInstallCard, type PixelInstallCardProps } from "@/components/card/PixelInstallCard";
+export { TopVideoCard, type TopVideoCardProps } from "@/components/card/TopVideoCard";
+export { TagChipList, type TagChipListProps } from "@/components/chip/TagChipList";
+export { DiagnosisRow, type DiagnosisRowProps } from "@/components/diagnosis/DiagnosisRow";
+export { ConsolidationCallout, type ConsolidationCalloutProps } from "@/components/panel/ConsolidationCallout";
+export { HighlightPanel, type HighlightPanelProps } from "@/components/panel/HighlightPanel";
+export { ScoreRing, type ScoreRingProps } from "@/components/rating/ScoreRing";
+export { StarRatingDisplay, type StarRatingDisplayProps } from "@/components/rating/StarRatingDisplay";
+export { PageSection, type PageSectionProps } from "@/components/section/PageSection";
diff --git a/src/components/panel/ConsolidationCallout.tsx b/src/components/panel/ConsolidationCallout.tsx
new file mode 100644
index 0000000..85dee4c
--- /dev/null
+++ b/src/components/panel/ConsolidationCallout.tsx
@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+
+export type ConsolidationCalloutProps = {
+ title: string;
+ icon?: ReactNode;
+ children: ReactNode;
+ className?: string;
+};
+
+/** 통합·전략 권고 등 강조 CTA 블록 — 리포트 채널 섹션 공통 */
+export function ConsolidationCallout({
+ title,
+ icon,
+ children,
+ className = "",
+}: ConsolidationCalloutProps) {
+ return (
+
+ {category}
+
+ {detail}
+
+
+
+
+ );
+}
diff --git a/src/components/panel/HighlightPanel.tsx b/src/components/panel/HighlightPanel.tsx
new file mode 100644
index 0000000..8db4158
--- /dev/null
+++ b/src/components/panel/HighlightPanel.tsx
@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+
+export type HighlightPanelProps = {
+ title: string;
+ icon?: ReactNode;
+ className?: string;
+ children: ReactNode;
+};
+
+export function HighlightPanel({ title, icon, className = "", children }: HighlightPanelProps) {
+ return (
+
+ {icon ? (
+
+
+ {icon}
+
+ ) : null}
+
+
+ {title}
+{children}
+
+
+ );
+}
diff --git a/src/components/rating/ScoreRing.tsx b/src/components/rating/ScoreRing.tsx
new file mode 100644
index 0000000..fc6144c
--- /dev/null
+++ b/src/components/rating/ScoreRing.tsx
@@ -0,0 +1,87 @@
+import { useEffect, useState } from "react";
+
+export type ScoreRingProps = {
+ score: number;
+ maxScore?: number;
+ size?: number;
+ label?: string;
+ /** 링 색 (브랜드 등). 없으면 점수 구간별 자동 색 */
+ color?: string;
+ className?: string;
+ scoreClassName?: string;
+};
+
+function scoreStrokeColor(score: number, maxScore: number): string {
+ const pct = (score / maxScore) * 100;
+ if (pct <= 40) return "#D4889A";
+ if (pct <= 60) return "#7A84D4";
+ if (pct <= 80) return "#9B8AD4";
+ return "#6C5CE7";
+}
+
+export function ScoreRing({
+ score,
+ maxScore = 100,
+ size = 120,
+ label,
+ color,
+ className = "",
+ scoreClassName,
+}: ScoreRingProps) {
+ const strokeWidth = size <= 72 ? 5 : 8;
+ const radius = (size - strokeWidth) / 2;
+ const circumference = 2 * Math.PI * radius;
+ const progress = Math.min(score / maxScore, 1);
+ const targetOffset = circumference * (1 - progress);
+ const resolvedColor = color ?? scoreStrokeColor(score, maxScore);
+
+ const [dashOffset, setDashOffset] = useState(circumference);
+
+ const defaultScoreClass =
+ size <= 72 ? "text-sm font-bold text-navy-900" : "text-2xl font-bold text-navy-900";
+
+ useEffect(() => {
+ setDashOffset(circumference);
+ const id = requestAnimationFrame(() => setDashOffset(targetOffset));
+ return () => cancelAnimationFrame(id);
+ }, [circumference, targetOffset]);
+
+ return (
+
+ {icon ? {icon} : null}
+
+ {children}
+ {title}
+
+
+ );
+}
diff --git a/src/components/rating/StarRatingDisplay.tsx b/src/components/rating/StarRatingDisplay.tsx
new file mode 100644
index 0000000..5faade3
--- /dev/null
+++ b/src/components/rating/StarRatingDisplay.tsx
@@ -0,0 +1,38 @@
+import StarIcon from "@/assets/icons/star.svg?react";
+import { formatCompactNumber } from "@/lib/formatNumber";
+
+export type StarRatingDisplayProps = {
+ rating: number;
+ maxStars?: number;
+ reviewCount?: number;
+ formatCount?: (n: number) => string;
+};
+
+export function StarRatingDisplay({
+ rating,
+ maxStars = 5,
+ reviewCount,
+ formatCount = formatCompactNumber,
+}: StarRatingDisplayProps) {
+ const filled = Math.min(maxStars, Math.max(0, Math.round(rating)));
+
+ return (
+
+
+
+ {label ? {label} : null}
+
+ {score}
+
+
+
+ );
+}
diff --git a/src/components/section/PageSection.tsx b/src/components/section/PageSection.tsx
new file mode 100644
index 0000000..84dd7c8
--- /dev/null
+++ b/src/components/section/PageSection.tsx
@@ -0,0 +1,58 @@
+import type { ReactNode } from "react";
+
+export type PageSectionProps = {
+ id?: string;
+ title: string;
+ subtitle?: string;
+ dark?: boolean;
+ className?: string;
+ children: ReactNode;
+};
+
+export function PageSection({
+ id,
+ title,
+ subtitle,
+ dark = false,
+ className = "",
+ children,
+}: PageSectionProps) {
+ return (
+
+ {Array.from({ length: maxStars }, (_, i) => (
+
+ {reviewCount != null ? (
+ 리뷰 {formatCount(reviewCount)}건
+ ) : null}
+
+
+
+ {children}
+
+ + {title} +
+ {subtitle ? ( ++ {subtitle} +
+ ) : null} +등록된 핵심 진단 항목이 없습니다.
+
+ {items.map((item, i) => (
+
+
+ {data.pages.map((page, i) => (
+
+
+ {data.brandInconsistencies.length > 0 ? (
+
+
+ ) : null}
+
+ {data.consolidationRecommendation ? (
+ 진단 결과
+Facebook 채널 문제점
+ {data.diagnosis.map((item, i) => ( +
+ {data.accounts.map((account, i) => (
+
+
+ {data.diagnosis.length > 0 ? (
+
+
+ ) : null}
+ 진단 결과
+ {data.diagnosis.map((item, i) => ( +
+
+
+
+
+
+ ) : null}
+
+
+
+ ) : null}
+ 진단 결과
+ {data.diagnosis.map((item, i) => ( +
+ {channels.map((ch, i) => {
+ const iconKey = ch.icon?.toLowerCase() ?? "";
+ return (
+
+ );
+}
diff --git a/src/features/report/ui/channels/channelScoreIcons.tsx b/src/features/report/ui/channels/channelScoreIcons.tsx
new file mode 100644
index 0000000..6985ba3
--- /dev/null
+++ b/src/features/report/ui/channels/channelScoreIcons.tsx
@@ -0,0 +1,38 @@
+import type { ComponentType, SVGProps } from "react";
+import ChannelFacebookIcon from "@/assets/icons/channel-facebook.svg?react";
+import ChannelInstagramIcon from "@/assets/icons/channel-instagram.svg?react";
+import ChannelSearchIcon from "@/assets/icons/channel-search.svg?react";
+import ChannelYoutubeIcon from "@/assets/icons/channel-youtube.svg?react";
+import StarIcon from "@/assets/icons/star.svg?react";
+import GlobeIcon from "@/assets/report/globe.svg?react";
+
+type SvgIcon = ComponentType
+
+ );
+}
diff --git a/src/features/report/ui/clinic/ClinicInfoStatGrid.tsx b/src/features/report/ui/clinic/ClinicInfoStatGrid.tsx
new file mode 100644
index 0000000..921483c
--- /dev/null
+++ b/src/features/report/ui/clinic/ClinicInfoStatGrid.tsx
@@ -0,0 +1,25 @@
+import { InfoStatCard } from "@/components/card/InfoStatCard";
+import type { ClinicSnapshot } from "@/features/report/types/clinicSnapshot";
+import { buildClinicSnapshotStatRows } from "@/features/report/ui/clinic/clinicSnapshotStatRows";
+
+export type ClinicInfoStatGridProps = {
+ data: ClinicSnapshot;
+};
+
+export function ClinicInfoStatGrid({ data }: ClinicInfoStatGridProps) {
+ const rows = buildClinicSnapshotStatRows(data);
+
+ return (
+
+ {rows.map((field, i) => (
+
+ );
+}
diff --git a/src/features/report/ui/clinic/ClinicLeadDoctorPanel.tsx b/src/features/report/ui/clinic/ClinicLeadDoctorPanel.tsx
new file mode 100644
index 0000000..1a3d30f
--- /dev/null
+++ b/src/features/report/ui/clinic/ClinicLeadDoctorPanel.tsx
@@ -0,0 +1,18 @@
+import AwardIcon from "@/assets/icons/award.svg?react";
+import { HighlightPanel } from "@/components/panel/HighlightPanel";
+import { StarRatingDisplay } from "@/components/rating/StarRatingDisplay";
+import type { ClinicSnapshot } from "@/features/report/types/clinicSnapshot";
+
+export type ClinicLeadDoctorPanelProps = {
+ data: ClinicSnapshot;
+};
+
+export function ClinicLeadDoctorPanel({ data }: ClinicLeadDoctorPanelProps) {
+ return (
+ {data.leadDoctor.name}
+{data.leadDoctor.credentials}
+
+
+
+
+
+ {page.label}
+
+
+
+
+
+ {isKR && isLowFollowers ? (
+
+ 방치 상태
+
+ ) : null}
+ {page.hasWhatsApp ? (
+
+ WhatsApp 연결
+
+ ) : null}
+
+ {page.pageName}
+{page.category}
+ +
+
+
+
+
+ 팔로워
++ {formatCompactNumber(page.followers)} +
+
+
+ 리뷰
++ {page.reviews} +
+
+
+ 팔로잉
+{formatCompactNumber(page.following)}
+
+
+
+
+
+
+ {page.postFrequency ? (
+
+
+
+ ) : null}
+ {page.topContentType ? (
+
+
+
+ ) : null}
+ {page.engagement ? (
+
+
+
+ ) : null}
+
+
+
+
+ {isLogoMismatch ? (
+
+ + 로고 {page.logo} +
++ {page.logoDescription} +
+
+
+
+
+
+ 연결 도메인
++ {page.linkedDomain || page.link} +
+
+
+
+
+ Bio
+"{page.bio}"
+
+
+ {account.label}
+
+
+
+
+
+ {account.handle}
+{account.category}
+ + +
+
+
+
+
+ 게시물
+{formatCompactNumber(account.posts)}
+
+
+ 팔로워
+{formatCompactNumber(account.followers)}
+
+
+ 팔로잉
+{formatCompactNumber(account.following)}
+
+
+
+
+ 콘텐츠 포맷
+ {account.contentFormat}
+
+
+ 릴스 수
+
+ {account.reelsCount === 0 ? (
+ <>
+
+ 프로필 이미지
+{account.profilePhoto}
+ + {account.highlights.length > 0 ? ( +
+
+ ) : null}
+
+ {account.bio ? (
+
+
+ ) : null}
+ Bio
+{account.bio}
+등록된 KPI가 없습니다.
; + } + + return ( +
+
+ );
+}
diff --git a/src/features/report/ui/kpi/KpiTransformationCtaCard.tsx b/src/features/report/ui/kpi/KpiTransformationCtaCard.tsx
new file mode 100644
index 0000000..93f02a0
--- /dev/null
+++ b/src/features/report/ui/kpi/KpiTransformationCtaCard.tsx
@@ -0,0 +1,41 @@
+import ArrowUpRightIcon from "@/assets/report/arrow-up-right.svg?react";
+import DownloadIcon from "@/assets/report/download.svg?react";
+import TrendingUpIcon from "@/assets/icons/trending-up.svg?react";
+import { Link } from "react-router-dom";
+
+export function KpiTransformationCtaCard() {
+ return (
+
+
+
+
+
+
+
+ {metrics.map((row, i) => (
+ Metric
+ Current
+ 3-Month Target
+ 12-Month Target
+
+
+ ))}
+ {row.metric}
+
+ {row.current}
+
+
+ {row.target3Month}
+
+
+ {row.target12Month}
+
+
+
+ );
+}
diff --git a/src/features/report/ui/kpi/kpiCurrentValueNegative.ts b/src/features/report/ui/kpi/kpiCurrentValueNegative.ts
new file mode 100644
index 0000000..c0258bd
--- /dev/null
+++ b/src/features/report/ui/kpi/kpiCurrentValueNegative.ts
@@ -0,0 +1,11 @@
+/** Current 컬럼 강조 — 저성과·미측정 값 */
+export function isKpiCurrentValueNegative(value: string): boolean {
+ const lower = value.toLowerCase();
+ return (
+ lower === "0" ||
+ lower.includes("없음") ||
+ lower.includes("불가") ||
+ lower === "n/a" ||
+ lower.includes("측정 불가")
+ );
+}
diff --git a/src/features/report/ui/otherChannels/OtherChannelsList.tsx b/src/features/report/ui/otherChannels/OtherChannelsList.tsx
new file mode 100644
index 0000000..e9ad3ef
--- /dev/null
+++ b/src/features/report/ui/otherChannels/OtherChannelsList.tsx
@@ -0,0 +1,30 @@
+import { OtherChannelRow } from "@/components/channel/OtherChannelRow";
+import type { OtherChannel } from "@/types/otherChannels";
+
+export type OtherChannelsListProps = {
+ channels: OtherChannel[];
+};
+
+export function OtherChannelsList({ channels }: OtherChannelsListProps) {
+ if (channels.length === 0) return null;
+
+ return (
+
+
+
+
+ + Start Your Transformation +
++ INFINITH와 함께 데이터 기반 마케팅 전환을 시작하세요. 90일 안에 측정 가능한 성과를 만들어 드립니다. +
+
+
+ 마케팅 기획
+
+
+
+ );
+}
diff --git a/src/features/report/ui/otherChannels/WebsiteTechAuditBlock.tsx b/src/features/report/ui/otherChannels/WebsiteTechAuditBlock.tsx
new file mode 100644
index 0000000..09735b0
--- /dev/null
+++ b/src/features/report/ui/otherChannels/WebsiteTechAuditBlock.tsx
@@ -0,0 +1,78 @@
+import AlertCircleIcon from "@/assets/icons/alert-circle.svg?react";
+import CheckCircleIcon from "@/assets/report/check-circle.svg?react";
+import GlobeIcon from "@/assets/report/globe.svg?react";
+import { PixelInstallCard } from "@/components/card/PixelInstallCard";
+import type { WebsiteAudit } from "@/types/otherChannels";
+
+export type WebsiteTechAuditBlockProps = {
+ website: WebsiteAudit;
+};
+
+export function WebsiteTechAuditBlock({ website }: WebsiteTechAuditBlockProps) {
+ return (
+
+
+ 기타 채널 현황
+
+ {channels.map((ch, i) => (
+
+
+
+ );
+}
diff --git a/src/features/report/ui/overview/OverviewHeroBlobs.tsx b/src/features/report/ui/overview/OverviewHeroBlobs.tsx
new file mode 100644
index 0000000..059b40a
--- /dev/null
+++ b/src/features/report/ui/overview/OverviewHeroBlobs.tsx
@@ -0,0 +1,18 @@
+export function OverviewHeroBlobs() {
+ return (
+ <>
+
+
+
+
+ );
+}
diff --git a/src/features/report/ui/overview/OverviewHeroColumn.tsx b/src/features/report/ui/overview/OverviewHeroColumn.tsx
new file mode 100644
index 0000000..85d3957
--- /dev/null
+++ b/src/features/report/ui/overview/OverviewHeroColumn.tsx
@@ -0,0 +1,39 @@
+import type { ReportOverviewData } from "@/features/report/types/reportOverview";
+import { OverviewMetaChips } from "@/features/report/ui/overview/OverviewMetaChips";
+
+export type OverviewHeroColumnProps = {
+ data: ReportOverviewData;
+};
+
+export function OverviewHeroColumn({ data }: OverviewHeroColumnProps) {
+ const { clinicName, clinicNameEn, date, targetUrl, location, logoImage } = data;
+
+ return (
+
+
+
+ 웹사이트 기술 진단
+
+
+
+ + 기본 도메인: {website.primaryDomain} +
+ {website.additionalDomains.length > 0 ? ( +
+ {website.additionalDomains.map((d) => (
+
+ ) : null}
+ + {d.domain} — {d.purpose} +
+ ))} ++ 주요 CTA: {website.mainCTA} +
+
+
+
+ {!website.snsLinksOnSite ? (
+ 트래킹 픽셀 설치 현황
+
+ {website.trackingPixels.map((pixel) => (
+
+
+
+ ) : (
+
+
+ + 홈페이지에 SNS 링크 없음 +
++ 웹사이트에서 소셜 미디어 채널로의 연결이 없습니다. 방문자가 SNS를 통해 브랜드와 연결할 수 없습니다. +
+
+
+ )}
+ + 홈페이지에 SNS 링크 연결됨 +
+
+
+ );
+}
diff --git a/src/features/report/ui/overview/OverviewMetaChips.tsx b/src/features/report/ui/overview/OverviewMetaChips.tsx
new file mode 100644
index 0000000..20a9740
--- /dev/null
+++ b/src/features/report/ui/overview/OverviewMetaChips.tsx
@@ -0,0 +1,31 @@
+import CalendarIcon from "@/assets/report/calendar.svg?react";
+import GlobeIcon from "@/assets/report/globe.svg?react";
+import MapPinIcon from "@/assets/report/map-pin.svg?react";
+import { OVERVIEW_META_CHIP_CLASS } from "@/features/report/ui/overview/overviewSectionStyles";
+
+export type OverviewMetaChipsProps = {
+ date: string;
+ targetUrl: string;
+ location: string;
+};
+
+export function OverviewMetaChips({ date, targetUrl, location }: OverviewMetaChipsProps) {
+ return (
+ + Marketing Intelligence Report +
+ + {logoImage ? ( +
+ 
{
+ (e.target as HTMLImageElement).style.display = "none";
+ }}
+ />
+
+ ) : null}
+
+ + {clinicName} +
+ +{clinicNameEn}
+ +
+
+
+ );
+}
diff --git a/src/features/report/ui/overview/OverviewScorePanel.tsx b/src/features/report/ui/overview/OverviewScorePanel.tsx
new file mode 100644
index 0000000..102f4cb
--- /dev/null
+++ b/src/features/report/ui/overview/OverviewScorePanel.tsx
@@ -0,0 +1,18 @@
+import { ScoreRing } from "@/components/rating/ScoreRing";
+
+export type OverviewScorePanelProps = {
+ overallScore: number;
+};
+
+export function OverviewScorePanel({ overallScore }: OverviewScorePanelProps) {
+ return (
+
+
+ );
+}
diff --git a/src/features/report/ui/overview/overviewSectionStyles.ts b/src/features/report/ui/overview/overviewSectionStyles.ts
new file mode 100644
index 0000000..29cfb95
--- /dev/null
+++ b/src/features/report/ui/overview/overviewSectionStyles.ts
@@ -0,0 +1,5 @@
+export const OVERVIEW_SECTION_BG_CLASS =
+ "bg-[radial-gradient(ellipse_at_top_left,var(--color-hero-wash-start),transparent_50%),radial-gradient(ellipse_at_bottom_right,var(--color-marketing-blush),transparent_50%),radial-gradient(ellipse_at_center,var(--color-lavender-100),transparent_60%)]";
+
+export const OVERVIEW_META_CHIP_CLASS =
+ "inline-flex items-center gap-2 rounded-full bg-white/60 backdrop-blur-sm border border-white/40 px-3 py-1 body-14-medium text-neutral-80 max-w-full";
diff --git a/src/features/report/ui/roadmap/RoadmapMonthCard.tsx b/src/features/report/ui/roadmap/RoadmapMonthCard.tsx
new file mode 100644
index 0000000..50f0be8
--- /dev/null
+++ b/src/features/report/ui/roadmap/RoadmapMonthCard.tsx
@@ -0,0 +1,34 @@
+import type { RoadmapMonth } from "@/features/report/types/roadmap";
+import { RoadmapTaskItem } from "@/features/report/ui/roadmap/RoadmapTaskItem";
+
+export type RoadmapMonthCardProps = {
+ month: RoadmapMonth;
+ index: number;
+};
+
+export function RoadmapMonthCard({ month, index }: RoadmapMonthCardProps) {
+ const baseDelay = index * 150;
+
+ return (
+
+
+ + Overall Score +
+
+
+
+
+ {month.month}
+
+
+
+ {month.title}
+{month.subtitle}
+-
+ {month.tasks.map((task, j) => (
+
등록된 로드맵이 없습니다.
; + } + + return ( +
+ {months.map((m, i) => (
+
+ );
+}
diff --git a/src/features/report/ui/roadmap/RoadmapTaskItem.tsx b/src/features/report/ui/roadmap/RoadmapTaskItem.tsx
new file mode 100644
index 0000000..05e38a1
--- /dev/null
+++ b/src/features/report/ui/roadmap/RoadmapTaskItem.tsx
@@ -0,0 +1,37 @@
+import CheckCircleIcon from "@/assets/report/check-circle.svg?react";
+import type { RoadmapTask } from "@/features/report/types/roadmap";
+
+export type RoadmapTaskItemProps = {
+ task: RoadmapTask;
+ animationDelayMs: number;
+};
+
+export function RoadmapTaskItem({ task, animationDelayMs }: RoadmapTaskItemProps) {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/src/features/report/ui/transformation/PlatformStrategyCard.tsx b/src/features/report/ui/transformation/PlatformStrategyCard.tsx
new file mode 100644
index 0000000..d98d24d
--- /dev/null
+++ b/src/features/report/ui/transformation/PlatformStrategyCard.tsx
@@ -0,0 +1,46 @@
+import ArrowUpRightIcon from "@/assets/report/arrow-up-right.svg?react";
+import type { PlatformStrategy } from "@/features/report/types/transformationProposal";
+import { platformStrategyIconNode } from "@/features/report/ui/transformation/platformStrategyIcon";
+
+export type PlatformStrategyCardProps = {
+ strategy: PlatformStrategy;
+ index: number;
+};
+
+export function PlatformStrategyCard({ strategy, index }: PlatformStrategyCardProps) {
+ return (
+ | + 채널 + | ++ 우선순위 + | ++ 근거 + | +
|---|---|---|
| {ch.channel} | ++ + {ch.priority} + + | +{ch.rationale} | +
+
+
+
+ {platformStrategyIconNode(strategy.icon)}
+
+ {strategy.platform}
+
+
+ {strategy.currentMetric}
+
+
+
+ -
+ {strategy.strategies.map((s, i) => (
+
-
+
+ ++
{s.strategy}
+{s.detail}
+
+ ))}
+
+ {TRANSFORMATION_TABS.map((tab) => {
+ const isActive = activeTab === tab.key;
+ return (
+
+ );
+ })}
+
+
+ {activeTab === "brand" ? (
+
+
+ ) : null}
+
+ {activeTab === "content" ? (
+ 브랜드 아이덴티티
+ {data.brandIdentity.map((item, i) => ( +
+
+ ) : null}
+
+ {activeTab === "platform" ? (
+ 콘텐츠 전략
+ {data.contentStrategy.map((item, i) => ( +
+ {data.platformStrategies.map((strategy, i) => (
+
+ ) : null}
+
+ {activeTab === "website" ? (
+
+
+ ) : null}
+
+ {activeTab === "newChannel" ? (
+ 웹사이트 개선
+ {data.websiteImprovements.map((item, i) => ( +
+
+ ) : null}
+
+ );
+}
diff --git a/src/features/report/ui/transformation/newChannelPriorityClass.ts b/src/features/report/ui/transformation/newChannelPriorityClass.ts
new file mode 100644
index 0000000..b9f2206
--- /dev/null
+++ b/src/features/report/ui/transformation/newChannelPriorityClass.ts
@@ -0,0 +1,11 @@
+/** P0·P1·한글 우선순위 등 → 배지용 Tailwind 클래스 */
+export function newChannelPriorityClass(priority: string): string {
+ const p = priority.trim().toLowerCase();
+ if (p === "p0" || p === "높음" || p === "high")
+ return "bg-[var(--color-status-critical-bg)] text-[var(--color-status-critical-text)] border-[var(--color-status-critical-border)]";
+ if (p === "p1" || p === "중간" || p === "medium")
+ return "bg-[var(--color-status-warning-bg)] text-[var(--color-status-warning-text)] border-[var(--color-status-warning-border)]";
+ if (p === "p2" || p === "낮음" || p === "low")
+ return "bg-[var(--color-status-good-bg)] text-[var(--color-status-good-text)] border-[var(--color-status-good-border)]";
+ return "bg-neutral-10 text-neutral-80 border-neutral-20";
+}
diff --git a/src/features/report/ui/transformation/platformStrategyIcon.tsx b/src/features/report/ui/transformation/platformStrategyIcon.tsx
new file mode 100644
index 0000000..d0ae8f5
--- /dev/null
+++ b/src/features/report/ui/transformation/platformStrategyIcon.tsx
@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+import ChannelFacebookIcon from "@/assets/icons/channel-facebook.svg?react";
+import ChannelInstagramIcon from "@/assets/icons/channel-instagram.svg?react";
+import ChannelSearchIcon from "@/assets/icons/channel-search.svg?react";
+import ChannelYoutubeIcon from "@/assets/icons/channel-youtube.svg?react";
+import StarIcon from "@/assets/icons/star.svg?react";
+import GlobeIcon from "@/assets/report/globe.svg?react";
+
+const size = 20;
+
+export function platformStrategyIconNode(iconKey: string): ReactNode {
+ const k = iconKey.toLowerCase();
+ switch (k) {
+ case "youtube":
+ return
+
+ );
+}
diff --git a/src/features/report/ui/youtube/YouTubeMetricsGrid.tsx b/src/features/report/ui/youtube/YouTubeMetricsGrid.tsx
new file mode 100644
index 0000000..b332eff
--- /dev/null
+++ b/src/features/report/ui/youtube/YouTubeMetricsGrid.tsx
@@ -0,0 +1,44 @@
+import EyeIcon from "@/assets/icons/eye.svg?react";
+import TrendingUpIcon from "@/assets/icons/trending-up.svg?react";
+import VideoIcon from "@/assets/icons/video.svg?react";
+import UsersIcon from "@/assets/icons/users.svg?react";
+import { MetricCard } from "@/components/card/MetricCard";
+import type { YouTubeAudit } from "@/features/report/types/youtubeAudit";
+import { formatCompactNumber } from "@/lib/formatNumber";
+
+export type YouTubeMetricsGridProps = {
+ data: YouTubeAudit;
+};
+
+export function YouTubeMetricsGrid({ data }: YouTubeMetricsGridProps) {
+ const growth = data.weeklyViewGrowth;
+ const trend = growth.percentage > 0 ? "up" : growth.percentage < 0 ? "down" : "neutral";
+
+ return (
+
+
+
+
+
+
+ {data.channelName}
+{data.handle}
+{data.channelDescription}
+
+ 개설일: {data.channelCreatedDate}
+ 평균 영상 길이: {data.avgVideoLength}
+ 업로드 빈도: {data.uploadFrequency}
+
+
+ {data.linkedUrls.length > 0 ? (
+
+ {data.linkedUrls.map((link) => (
+
+
+ ) : null}
+
+
+ );
+}
diff --git a/src/features/report/ui/youtube/YouTubeTopVideosBlock.tsx b/src/features/report/ui/youtube/YouTubeTopVideosBlock.tsx
new file mode 100644
index 0000000..e87090e
--- /dev/null
+++ b/src/features/report/ui/youtube/YouTubeTopVideosBlock.tsx
@@ -0,0 +1,34 @@
+import { TopVideoCard } from "@/components/card/TopVideoCard";
+import type { TopVideo } from "@/features/report/types/youtubeAudit";
+
+export type YouTubeTopVideosBlockProps = {
+ videos: TopVideo[];
+};
+
+export function YouTubeTopVideosBlock({ videos }: YouTubeTopVideosBlockProps) {
+ if (videos.length === 0) return null;
+
+ return (
+
+
+ );
+}
diff --git a/src/layouts/MainSubNavLayout.tsx b/src/layouts/MainSubNavLayout.tsx
new file mode 100644
index 0000000..1644e18
--- /dev/null
+++ b/src/layouts/MainSubNavLayout.tsx
@@ -0,0 +1,51 @@
+import { createContext, useContext, useMemo, useState } from "react";
+import { Outlet } from "react-router-dom";
+import { Footer } from "@/layouts/Footer";
+import { GNB } from "@/layouts/GNB";
+import { PageNavigator } from "@/layouts/PageNavigator";
+import { SubNav, type SubNavProps } from "@/layouts/SubNav";
+
+type MainSubNavContextValue = {
+ /** SubNav 설정 (null 전달 시 숨김 처리) */
+ setSubNav: (config: SubNavProps | null) => void;
+};
+
+const MainSubNavContext = createContext+ 인기 영상 TOP {videos.length} +
+
+ {videos.map((video, i) => (
+
+
+
+ {/* 하위 페이지에서 등록한 SubNav가 있을 때만 렌더링 */}
+ {subNav &&
+
+
+