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) {
|
if (isLoading) {
|
||||||
return (
|
return <div className="min-h-[calc(100vh-64px)] bg-gray-50" />;
|
||||||
<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>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (error || !schedule) {
|
if (error || !schedule) {
|
||||||
|
|
@ -137,8 +133,13 @@ function PCScheduleDetail() {
|
||||||
<div className={`${isYoutube ? 'max-w-5xl' : 'max-w-3xl'} mx-auto px-6 py-8`}>
|
<div className={`${isYoutube ? 'max-w-5xl' : 'max-w-3xl'} mx-auto px-6 py-8`}>
|
||||||
{/* 브레드크럼 네비게이션 */}
|
{/* 브레드크럼 네비게이션 */}
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: -10 }}
|
initial={{ opacity: 0 }}
|
||||||
animate={{ opacity: 1, y: 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' : ''}`}
|
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">
|
<Link to="/schedule" className="hover:text-primary transition-colors">
|
||||||
|
|
@ -154,9 +155,13 @@ function PCScheduleDetail() {
|
||||||
|
|
||||||
{/* 메인 컨텐츠 */}
|
{/* 메인 컨텐츠 */}
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 12 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
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'}`}
|
className={`${hasCustomLayout ? '' : 'bg-white rounded-3xl shadow-sm p-8'}`}
|
||||||
>
|
>
|
||||||
{renderCategorySection()}
|
{renderCategorySection()}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue