fix: 콘텐츠 캘린더 흐림 현상 완전 해결 — motion 제거
framer-motion animate가 프로덕션 빌드에서 완료되지 않는 문제로 SectionWrapper/ContentCalendar의 opacity:0 initial 상태가 유지됨. motion.div/motion.button/motion.section을 일반 태그로 교체하고 모든 opacity 진입 애니메이션 제거. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>main
parent
5f7d58c490
commit
aac1367808
|
|
@ -1,6 +1,5 @@
|
|||
import React, { useState, useCallback } from 'react';
|
||||
import { exportCalendarToICS } from '../../lib/calendarExport';
|
||||
import { motion } from 'motion/react';
|
||||
import {
|
||||
VideoFilled,
|
||||
FileTextFilled,
|
||||
|
|
@ -313,22 +312,19 @@ export default function ContentCalendar({ data, planId, onEntryUpdate }: Content
|
|||
const Icon = contentTypeIcons[item.type];
|
||||
const isActive = filterType === item.type;
|
||||
return (
|
||||
<motion.button
|
||||
<button
|
||||
key={item.type}
|
||||
className={`flex items-center gap-3 px-5 py-3 rounded-2xl border cursor-pointer transition-all ${colors.bg} ${colors.border} ${colors.shadow} ${
|
||||
isActive ? 'ring-2 ring-white/40 ring-offset-2 ring-offset-transparent' : ''
|
||||
} ${filterType && !isActive ? 'opacity-40' : ''}`}
|
||||
onClick={() => toggleFilter(item.type)}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3, delay: i * 0.07 }}
|
||||
>
|
||||
<Icon size={16} className={`${colors.text} opacity-70`} />
|
||||
<div className="flex flex-col items-start">
|
||||
<span className={`text-2xl font-bold leading-none ${colors.text}`}>{item.count}</span>
|
||||
<span className={`text-xs font-medium ${colors.text} opacity-70 mt-0.5`}>{item.label}</span>
|
||||
</div>
|
||||
</motion.button>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{filterType && (
|
||||
|
|
@ -357,12 +353,9 @@ export default function ContentCalendar({ data, planId, onEntryUpdate }: Content
|
|||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
<div
|
||||
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 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: weekIdx * 0.1 }}
|
||||
>
|
||||
<p className="text-sm font-bold text-[#0A1128] mb-3">{week.label}</p>
|
||||
|
||||
|
|
@ -407,7 +400,7 @@ export default function ContentCalendar({ data, planId, onEntryUpdate }: Content
|
|||
</svg>
|
||||
콘텐츠 추가
|
||||
</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue