castad
/
o2o-infinith-demo
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Haewon Kam 2026-04-14 15:42:31 +09:00
parent 5f7d58c490
commit aac1367808
1 changed files with 4 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/plan/ContentCalendar.tsx
View File

@ -1,6 +1,5 @@
import React, { useState, useCallback } from 'react'; import React, { useState, useCallback } from 'react';
import { exportCalendarToICS } from '../../lib/calendarExport'; import { exportCalendarToICS } from '../../lib/calendarExport';
import { motion } from 'motion/react';
import { import {
VideoFilled, VideoFilled,
FileTextFilled, FileTextFilled,
@ -313,22 +312,19 @@ export default function ContentCalendar({ data, planId, onEntryUpdate }: Content
const Icon = contentTypeIcons[item.type]; const Icon = contentTypeIcons[item.type];
const isActive = filterType === item.type; const isActive = filterType === item.type;
return ( return (
<motion.button <button
key={item.type} 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} ${ 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' : '' isActive ? 'ring-2 ring-white/40 ring-offset-2 ring-offset-transparent' : ''
} ${filterType && !isActive ? 'opacity-40' : ''}`} } ${filterType && !isActive ? 'opacity-40' : ''}`}
onClick={() => toggleFilter(item.type)} 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`} /> <Icon size={16} className={`${colors.text} opacity-70`} />
<div className="flex flex-col items-start"> <div className="flex flex-col items-start">
<span className={`text-2xl font-bold leading-none ${colors.text}`}>{item.count}</span> <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> <span className={`text-xs font-medium ${colors.text} opacity-70 mt-0.5`}>{item.label}</span>
</div> </div>
</motion.button> </button>
); );
})} })}
{filterType && ( {filterType && (
@ -357,12 +353,9 @@ export default function ContentCalendar({ data, planId, onEntryUpdate }: Content
} }
return ( return (
<motion.div <div
key={week.weekNumber} key={week.weekNumber}
className="bg-white rounded-2xl p-5 mb-4 shadow-[3px_4px_12px_rgba(0,0,0,0.06)]" 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> <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> </svg>
콘텐츠 추가 콘텐츠 추가
</button> </button>
</motion.div> </div>
); );
}) })
)} )}