From 5f7d58c4904ab4f0873873c139e618910b2ff13f Mon Sep 17 00:00:00 2001 From: Haewon Kam Date: Tue, 14 Apr 2026 15:33:34 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EC=BD=98=ED=85=90=EC=B8=A0=20=EC=BA=98?= =?UTF-8?q?=EB=A6=B0=EB=8D=94=20=ED=9D=90=EB=A6=BC=20=ED=98=84=EC=83=81=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20=E2=80=94=20whileInView=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit SectionWrapper의 motion.section이 opacity:0 initial 상태에서 framer-motion animate가 발동하지 않아 전체 섹션이 투명하게 보이는 문제를 수정. SectionWrapper를 일반
으로 교체하고, plan 컴포넌트들의 whileInView/viewport 애니메이션 제거. Co-Authored-By: Claude Sonnet 4.6 --- src/components/plan/AssetCollection.tsx | 6 ++---- src/components/plan/ChannelStrategy.tsx | 3 +-- src/components/plan/ContentCalendar.tsx | 6 ++---- src/components/plan/PlanCTA.tsx | 3 +-- src/components/plan/PlanHeader.tsx | 18 ++++++------------ src/components/plan/RepurposingProposal.tsx | 3 +-- src/components/report/ui/SectionWrapper.tsx | 9 ++------- 7 files changed, 15 insertions(+), 33 deletions(-) diff --git a/src/components/plan/AssetCollection.tsx b/src/components/plan/AssetCollection.tsx index f733e50..c0fbd18 100644 --- a/src/components/plan/AssetCollection.tsx +++ b/src/components/plan/AssetCollection.tsx @@ -92,8 +92,7 @@ export default function AssetCollection({ data }: AssetCollectionProps) { className="rounded-2xl border border-slate-100 bg-white shadow-sm p-5 cursor-pointer hover:shadow-[3px_4px_12px_rgba(0,0,0,0.06)] hover:border-[#D5CDF5] transition-all" onClick={() => setSelectedAsset({ kind: 'asset', data: asset })} initial={{ opacity: 0, y: 20 }} - whileInView={{ opacity: 1, y: 0 }} - viewport={{ once: true }} + animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4, delay: i * 0.05 }} > {/* Top badges row */} @@ -155,8 +154,7 @@ export default function AssetCollection({ data }: AssetCollectionProps) { className="min-w-[280px] rounded-2xl border border-slate-100 bg-white shadow-sm p-5 shrink-0 cursor-pointer hover:shadow-[3px_4px_12px_rgba(0,0,0,0.06)] hover:border-[#D5CDF5] transition-all" onClick={() => setSelectedAsset({ kind: 'youtube', data: video })} initial={{ opacity: 0, x: 20 }} - whileInView={{ opacity: 1, x: 0 }} - viewport={{ once: true }} + animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.4, delay: i * 0.1 }} >
diff --git a/src/components/plan/ChannelStrategy.tsx b/src/components/plan/ChannelStrategy.tsx index b92dca7..a2e8bed 100644 --- a/src/components/plan/ChannelStrategy.tsx +++ b/src/components/plan/ChannelStrategy.tsx @@ -54,8 +54,7 @@ export default function ChannelStrategy({ channels }: ChannelStrategyProps) { key={ch.channelId} className="bg-white rounded-2xl p-6 shadow-[3px_4px_12px_rgba(0,0,0,0.06)] hover:shadow-[4px_6px_16px_rgba(0,0,0,0.09)] transition-shadow" initial={{ opacity: 0, y: 20 }} - whileInView={{ opacity: 1, y: 0 }} - viewport={{ once: true }} + animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: index * 0.1 }} > {/* Header */} diff --git a/src/components/plan/ContentCalendar.tsx b/src/components/plan/ContentCalendar.tsx index 13edf27..84689b4 100644 --- a/src/components/plan/ContentCalendar.tsx +++ b/src/components/plan/ContentCalendar.tsx @@ -320,8 +320,7 @@ export default function ContentCalendar({ data, planId, onEntryUpdate }: Content } ${filterType && !isActive ? 'opacity-40' : ''}`} onClick={() => toggleFilter(item.type)} initial={{ opacity: 0, y: 10 }} - whileInView={{ opacity: 1, y: 0 }} - viewport={{ once: true }} + animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3, delay: i * 0.07 }} > @@ -362,8 +361,7 @@ export default function ContentCalendar({ data, planId, onEntryUpdate }: Content key={week.weekNumber} className="bg-white rounded-2xl p-5 mb-4 shadow-[3px_4px_12px_rgba(0,0,0,0.06)]" initial={{ opacity: 0, y: 20 }} - whileInView={{ opacity: 1, y: 0 }} - viewport={{ once: true }} + animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4, delay: weekIdx * 0.1 }} >

{week.label}

diff --git a/src/components/plan/PlanCTA.tsx b/src/components/plan/PlanCTA.tsx index 2d2eb3a..53ed93b 100644 --- a/src/components/plan/PlanCTA.tsx +++ b/src/components/plan/PlanCTA.tsx @@ -12,8 +12,7 @@ export default function PlanCTA() {
diff --git a/src/components/plan/PlanHeader.tsx b/src/components/plan/PlanHeader.tsx index c7fed21..17ce800 100644 --- a/src/components/plan/PlanHeader.tsx +++ b/src/components/plan/PlanHeader.tsx @@ -51,15 +51,13 @@ export default function PlanHeader({ Marketing Execution Plan @@ -68,8 +66,7 @@ export default function PlanHeader({ {clinicName} @@ -78,8 +75,7 @@ export default function PlanHeader({ {clinicNameEn} @@ -88,8 +84,7 @@ export default function PlanHeader({ @@ -107,8 +102,7 @@ export default function PlanHeader({
diff --git a/src/components/plan/RepurposingProposal.tsx b/src/components/plan/RepurposingProposal.tsx index 59e8c70..20849b5 100644 --- a/src/components/plan/RepurposingProposal.tsx +++ b/src/components/plan/RepurposingProposal.tsx @@ -67,8 +67,7 @@ export default function RepurposingProposal({ proposals }: RepurposingProposalPr key={item.sourceVideo.title} className="rounded-2xl border border-slate-100 bg-white shadow-[3px_4px_12px_rgba(0,0,0,0.06)] overflow-hidden" initial={{ opacity: 0, y: 20 }} - whileInView={{ opacity: 1, y: 0 }} - viewport={{ once: true }} + animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4, delay: idx * 0.08 }} > {/* Card Header — click to expand */} diff --git a/src/components/report/ui/SectionWrapper.tsx b/src/components/report/ui/SectionWrapper.tsx index f8f57b4..d124c9d 100644 --- a/src/components/report/ui/SectionWrapper.tsx +++ b/src/components/report/ui/SectionWrapper.tsx @@ -1,5 +1,4 @@ import type { ReactNode } from 'react'; -import { motion } from 'motion/react'; interface SectionWrapperProps { id: string; @@ -19,12 +18,8 @@ export function SectionWrapper({ className = '', }: SectionWrapperProps) { return ( - {children}
- +
); }