style: ScheduleDetail 페이지 애니메이션 개선
- 로딩 스피너 제거 - 딜레이 및 부드러운 easing 적용 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
66fef502ff
commit
dc5ac97717
1 changed files with 14 additions and 9 deletions
|
|
@ -25,11 +25,7 @@ function PCScheduleDetail() {
|
|||
});
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-[calc(100vh-64px)] flex items-center justify-center bg-gray-50">
|
||||
<div className="w-10 h-10 border-3 border-primary border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
return <div className="min-h-[calc(100vh-64px)] bg-gray-50" />;
|
||||
}
|
||||
|
||||
if (error || !schedule) {
|
||||
|
|
@ -137,8 +133,13 @@ function PCScheduleDetail() {
|
|||
<div className={`${isYoutube ? 'max-w-5xl' : 'max-w-3xl'} mx-auto px-6 py-8`}>
|
||||
{/* 브레드크럼 네비게이션 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{
|
||||
duration: 0.3,
|
||||
ease: [0.25, 0.1, 0.25, 1],
|
||||
delay: 0.1,
|
||||
}}
|
||||
className={`flex items-center gap-2 text-sm text-gray-500 mb-8 ${isX ? 'max-w-2xl mx-auto' : ''}`}
|
||||
>
|
||||
<Link to="/schedule" className="hover:text-primary transition-colors">
|
||||
|
|
@ -154,9 +155,13 @@ function PCScheduleDetail() {
|
|||
|
||||
{/* 메인 컨텐츠 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.05 }}
|
||||
transition={{
|
||||
duration: 0.4,
|
||||
ease: [0.25, 0.1, 0.25, 1],
|
||||
delay: 0.15,
|
||||
}}
|
||||
className={`${hasCustomLayout ? '' : 'bg-white rounded-3xl shadow-sm p-8'}`}
|
||||
>
|
||||
{renderCategorySection()}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue