119 lines
4.1 KiB
TypeScript
119 lines
4.1 KiB
TypeScript
import { useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import DownloadIcon from "@/assets/report/download.svg?react";
|
|
import { Button } from "@/components/atoms/Button";
|
|
import { useCurrentMarketingPlan } from "@/features/plan/hooks/useCurrentMarketingPlan";
|
|
|
|
function PlanCtaRocketIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg
|
|
className={className}
|
|
width={28}
|
|
height={28}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden
|
|
>
|
|
<path
|
|
d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path
|
|
d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path
|
|
d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path
|
|
d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
/** `DEMO/src/components/plan/PlanCTA.tsx` 레이아웃·카피·버튼 구성과 동일 (PDF는 Phase 1 목 동작). */
|
|
export function PlanCtaSection() {
|
|
const navigate = useNavigate();
|
|
const { data, error } = useCurrentMarketingPlan();
|
|
const [isExporting, setIsExporting] = useState(false);
|
|
|
|
if (error || !data) {
|
|
return null;
|
|
}
|
|
|
|
const planId = data.id;
|
|
|
|
const exportPdf = () => {
|
|
setIsExporting(true);
|
|
window.setTimeout(() => setIsExporting(false), 900);
|
|
};
|
|
|
|
return (
|
|
<section className="py-16 md:py-20 px-6 scroll-mt-36" aria-label="다음 단계 안내">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div
|
|
data-cta-card
|
|
className="rounded-2xl bg-gradient-to-r from-[var(--color-marketing-cream)] via-[var(--color-marketing-lilac)] to-[var(--color-marketing-ice)] p-10 md:p-14 text-center"
|
|
>
|
|
<div className="flex justify-center mb-6">
|
|
<div className="w-14 h-14 rounded-full bg-white/80 backdrop-blur-sm border border-white/40 flex items-center justify-center">
|
|
<PlanCtaRocketIcon className="text-violet-700" />
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="font-serif text-2xl md:text-3xl font-bold text-navy-950 mb-3 break-keep">
|
|
콘텐츠 제작을 시작하세요
|
|
</h3>
|
|
|
|
<p className="text-navy-950/60 mb-8 max-w-lg mx-auto break-keep">
|
|
INFINITH가 브랜딩부터 콘텐츠 제작, 채널 배포까지 자동화합니다.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => navigate(`/studio/${planId}`)}
|
|
className="inline-flex items-center justify-center gap-2 px-6 py-3 text-sm font-medium hover:shadow-lg transition-shadow"
|
|
>
|
|
<span className="break-keep">콘텐츠 제작 시작</span>
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outline"
|
|
onClick={exportPdf}
|
|
disabled={isExporting}
|
|
className="inline-flex items-center justify-center gap-2 px-6 py-3 text-sm font-medium text-navy-950 shadow-sm hover:shadow-md disabled:opacity-60 disabled:cursor-not-allowed"
|
|
>
|
|
{isExporting ? (
|
|
<span
|
|
className="w-4 h-4 border-2 border-navy-950 border-t-transparent rounded-full animate-spin shrink-0"
|
|
aria-hidden
|
|
/>
|
|
) : (
|
|
<DownloadIcon width={16} height={16} className="shrink-0" aria-hidden />
|
|
)}
|
|
<span className="break-keep">플랜 다운로드</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|