Skip to content

Commit f997715

Browse files
lazy-dinosaurlazy-dinosaur
committed
Style: 에니메이션 속도 더 빠르게 조정
1 parent 416c2e2 commit f997715

File tree

11 files changed

+67
-43
lines changed

11 files changed

+67
-43
lines changed

‎app/(blog)/layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default function BlogLayout({
99
return (
1010
<>
1111
<LeftSidebar className="w-60 xl:w-64 2xl:w-72 lg:shrink-0 lg:sticky h-full lg:top-16 mb-4 lg:mb-0 mt-52" />
12-
<div className="xl:max-w-5xl mx-auto rounded-lg w-full overflow-x-hidden p-3 2xl:p-6 h-full">
12+
<div className="xl:max-w-5xl mx-auto rounded-lg w-full overflow-x-hidden p-3 2xl:p-6 h-full overflow-y-hidden">
1313
{children}
1414
</div>
1515
<RightSidebar className="w-60 xl:w-64 2xl:w-72 shrink-0 hidden xl:block sticky top-16 h-full mt-52" />

‎app/(blog)/posts/[...slug]/post-content.tsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,12 @@ export default function PostContent({
4242
tags={tags}
4343
/>
4444
</div>
45-
45+
4646
{/* 이전글/다음글 네비게이션 */}
4747
<nav className="mt-8 sm:mt-10 pt-4 sm:pt-6 border-t">
4848
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
4949
{prevPost ? (
50-
<motion.div
50+
<motion.div
5151
className="w-full sm:w-auto"
5252
whileHover={{ x: -3 }}
5353
transition={{ type: "spring", stiffness: 400, damping: 15 }}
@@ -59,7 +59,9 @@ export default function PostContent({
5959
<ArrowLeft className="mr-2 h-4 w-4" />
6060
<div>
6161
<div className="text-xs mb-1">이전 글</div>
62-
<div className="text-sm font-medium truncate max-w-[250px]">{prevPost.title}</div>
62+
<div className="text-sm font-medium truncate max-w-[250px]">
63+
{prevPost.title}
64+
</div>
6365
</div>
6466
</Link>
6567
</motion.div>
@@ -74,9 +76,9 @@ export default function PostContent({
7476
</div>
7577
</div>
7678
)}
77-
79+
7880
{nextPost ? (
79-
<motion.div
81+
<motion.div
8082
className="w-full sm:w-auto text-right"
8183
whileHover={{ x: 3 }}
8284
transition={{ type: "spring", stiffness: 400, damping: 15 }}
@@ -87,7 +89,9 @@ export default function PostContent({
8789
>
8890
<div>
8991
<div className="text-xs mb-1">다음 글</div>
90-
<div className="text-sm font-medium truncate max-w-[250px]">{nextPost.title}</div>
92+
<div className="text-sm font-medium truncate max-w-[250px]">
93+
{nextPost.title}
94+
</div>
9195
</div>
9296
<ArrowRight className="ml-2 h-4 w-4" />
9397
</Link>
@@ -105,7 +109,7 @@ export default function PostContent({
105109
)}
106110
</div>
107111
</nav>
108-
112+
109113
<BackToHomeButton />
110114
</div>
111115
</div>

‎app/globals.css

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -199,9 +199,26 @@
199199
background-color: #4b5563;
200200
}
201201

202-
/* 테마 전환 애니메이션 제거 - 기본 브라우저 동작만 사용 */
203-
* {
204-
/* 트랜지션 효과 제거 */
202+
/* 빠른 애니메이션을 위한 전역 설정 */
203+
.animate-fast {
204+
transition-duration: 0.15s !important;
205+
}
206+
207+
.animate-medium {
208+
transition-duration: 0.25s !important;
209+
}
210+
211+
/* 애니메이션 전체 속도 조절 */
212+
.motion-reduce * {
213+
transition-duration: 0.2s !important;
214+
animation-duration: 0.2s !important;
215+
}
216+
217+
@media (prefers-reduced-motion: reduce) {
218+
* {
219+
transition-duration: 0.1s !important;
220+
animation-duration: 0.1s !important;
221+
}
205222
}
206223

207224
/* 타이포그래피 시스템 */

‎app/layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export default async function RootLayout({
6565
disableTransitionOnChange
6666
>
6767
<PostsProvider posts={posts}>
68-
<div className="min-h-screen flex flex-col">
68+
<div className="min-h-screen flex flex-col motion-reduce">
6969
<Header />
7070
<main className="flex flex-col xl:flex-row mt-12 sm:mt-14 md:mt-16 2xl:container 2xl:mx-auto md:px-5">
7171
{children}

‎components/header.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -117,8 +117,9 @@ export default function Header() {
117117
}}
118118
transition={{
119119
type: "spring",
120-
stiffness: 400,
120+
stiffness: 500,
121121
damping: 30,
122+
duration: 0.2
122123
}}
123124
>
124125
<div className="flex items-center justify-between py-2 px-4 md:px-6 w-full max-w-screen-2xl border-b border-border/40 backdrop-blur-lg bg-background/80 shadow-sm">
@@ -135,7 +136,7 @@ export default function Header() {
135136
<motion.div
136137
className="relative w-10 h-8 sm:w-12 sm:h-10 md:w-14 md:h-12 mr-2 sm:mr-3 rounded-full overflow-hidden"
137138
whileHover={{ scale: 1.05, rotate: 5 }}
138-
transition={{ type: "spring", stiffness: 500, damping: 20 }}
139+
transition={{ type: "spring", stiffness: 600, damping: 25, duration: 0.15 }}
139140
>
140141
<Image
141142
src="/lazydino-logo3.png"
@@ -187,23 +188,23 @@ export default function Header() {
187188
rotate: theme === "dark" ? -180 : 0,
188189
}}
189190
transition={{
190-
duration: 0.5, // 시간 단축
191+
duration: 0.25, // 더 빠른 회전
191192
ease: "easeOut", // 더 간단한 이징 함수 사용
192193
}}
193194
>
194195
{/* 아이콘을 상황에 따라 렌더링하는 대신 두 아이콘을 항상 표시하고 불투명도 조정 */}
195196
<motion.div
196197
initial={false}
197198
animate={{ opacity: theme === "light" ? 1 : 0 }}
198-
transition={{ duration: 0.2 }}
199+
transition={{ duration: 0.15 }}
199200
style={{ position: 'absolute' }}
200201
>
201202
<Sun className="h-[1rem] w-[1rem] sm:h-[1.2rem] sm:w-[1.2rem]" />
202203
</motion.div>
203204
<motion.div
204205
initial={false}
205206
animate={{ opacity: theme === "dark" ? 1 : 0 }}
206-
transition={{ duration: 0.2 }}
207+
transition={{ duration: 0.15 }}
207208
style={{ position: 'absolute' }}
208209
>
209210
<Moon className="h-[1rem] w-[1rem] sm:h-[1.2rem] sm:w-[1.2rem]" />

‎components/left-sidebar.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,17 +60,17 @@ export default function LeftSidebar({ className }: LeftSidebarProps) {
6060
initial={{ opacity: 0, x: -20 }}
6161
animate={{ opacity: 1, x: 0 }}
6262
transition={{
63-
duration: 0.3,
63+
duration: 0.15,
6464
ease: "easeOut",
65-
delay: 0.1
65+
delay: 0.05
6666
}}
6767
>
6868
<ScrollArea className="h-full">
6969
<SidebarSection title="카테고리">
7070
<motion.div
7171
initial={{ opacity: 0 }}
7272
animate={{ opacity: 1 }}
73-
transition={{ delay: 0.3, duration: 0.2 }}
73+
transition={{ delay: 0.1, duration: 0.1 }}
7474
>
7575
<TreeView key={`desktop-tree-${pathname}`} data={folderStructure} />
7676
</motion.div>

‎components/markdown-renderer.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@ export default function MarkdownRenderer({
294294
className="spacing-section relative group"
295295
initial={{ opacity: 0, scale: 0.95 }}
296296
animate={{ opacity: 1, scale: 1 }}
297-
transition={{ duration: 0.5 }}
297+
transition={{ duration: 0.2 }}
298298
>
299299
<div className="flex flex-col w-full items-center justify-center">
300300
<div
@@ -307,7 +307,7 @@ export default function MarkdownRenderer({
307307
alt={alt || ""}
308308
width={1200}
309309
height={630}
310-
className="w-full h-auto object-cover transition-transform duration-500 group-hover:scale-[1.03] relative z-10"
310+
className="w-full h-auto object-cover transition-transform duration-200 group-hover:scale-[1.02] relative z-10"
311311
sizes="(max-width: 640px) 95vw, (max-width: 768px) 85vw, (max-width: 1024px) 75vw, 50vw"
312312
loading="lazy"
313313
/>
@@ -397,9 +397,9 @@ export default function MarkdownRenderer({
397397
<motion.blockquote
398398
className="spacing-paragraph border-l-4 border-primary pl-4 sm:pl-5 md:pl-6 py-2 sm:py-3
399399
bg-primary/5 rounded-r-lg shadow-sm"
400-
initial={{ opacity: 0, x: -10 }}
400+
initial={{ opacity: 0, x: -5 }}
401401
animate={{ opacity: 1, x: 0 }}
402-
transition={{ duration: 0.5 }}
402+
transition={{ duration: 0.15 }}
403403
>
404404
<div className="text-foreground/80 italic font-medium">{children}</div>
405405
</motion.blockquote>
@@ -422,7 +422,7 @@ export default function MarkdownRenderer({
422422
className="spacing-section overflow-x-auto rounded-md sm:rounded-lg border border-primary/10 shadow-sm"
423423
initial={{ opacity: 0 }}
424424
animate={{ opacity: 1 }}
425-
transition={{ duration: 0.5 }}
425+
transition={{ duration: 0.15 }}
426426
>
427427
<table className="w-full border-collapse text-hierarchy-body">
428428
{children}
@@ -449,7 +449,7 @@ export default function MarkdownRenderer({
449449
className="spacing-section border-none h-px bg-gradient-to-r from-transparent via-primary/30 to-transparent"
450450
initial={{ width: 0 }}
451451
animate={{ width: "100%" }}
452-
transition={{ duration: 0.7 }}
452+
transition={{ duration: 0.2 }}
453453
/>
454454
),
455455
input: ({ checked }: { checked?: boolean }) => (

‎components/right-sidebar.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,17 +30,17 @@ const RightSidebar = ({ className }: RightSidebarProps) => {
3030
initial={{ opacity: 0, x: 20 }}
3131
animate={{ opacity: 1, x: 0 }}
3232
transition={{
33-
duration: 0.3,
33+
duration: 0.15,
3434
ease: "easeOut",
35-
delay: 0.1,
35+
delay: 0.05,
3636
}}
3737
>
3838
{isPostPage && (
3939
<motion.div
4040
className="mb-6 sm:mb-8 md:mb-10"
4141
initial={{ opacity: 0, y: 10 }}
4242
animate={{ opacity: 1, y: 0 }}
43-
transition={{ delay: 0.3, duration: 0.3 }}
43+
transition={{ delay: 0.08, duration: 0.15 }}
4444
>
4545
<TableOfContents key={`toc-${pathname}`} />
4646
</motion.div>
@@ -49,7 +49,7 @@ const RightSidebar = ({ className }: RightSidebarProps) => {
4949
<motion.div
5050
initial={{ opacity: 0 }}
5151
animate={{ opacity: 1 }}
52-
transition={{ delay: 0.4, duration: 0.3 }}
52+
transition={{ delay: 0.1, duration: 0.15 }}
5353
>
5454
<SidebarSection title="최근 게시물">
5555
<RecentPosts key={`recent-posts-${pathname}`} />
@@ -59,7 +59,7 @@ const RightSidebar = ({ className }: RightSidebarProps) => {
5959
<motion.div
6060
initial={{ opacity: 0 }}
6161
animate={{ opacity: 1 }}
62-
transition={{ delay: 0.5, duration: 0.3 }}
62+
transition={{ delay: 0.15, duration: 0.15 }}
6363
>
6464
<SidebarSection title="인기 태그">
6565
<div className="flex flex-wrap gap-1.5 sm:gap-2 md:gap-3 px-1.5">
@@ -96,8 +96,8 @@ const RecentPostItem = ({
9696
initial={{ opacity: 0, x: 10 }}
9797
animate={{ opacity: 1, x: 0 }}
9898
transition={{
99-
duration: 0.2,
100-
delay: 0.5 + index * 0.05,
99+
duration: 0.1,
100+
delay: 0.1 + index * 0.02,
101101
ease: "easeOut",
102102
}}
103103
>
@@ -166,15 +166,15 @@ const TagItem = ({ tag, index }: { tag: string; index: number }) => {
166166
initial={{ opacity: 0, scale: 0.8 }}
167167
animate={{ opacity: 1, scale: 1 }}
168168
transition={{
169-
duration: 0.2,
170-
delay: 0.6 + index * 0.03,
169+
duration: 0.1,
170+
delay: 0.15 + index * 0.01,
171171
type: "spring",
172-
stiffness: 260,
173-
damping: 20,
172+
stiffness: 300,
173+
damping: 25,
174174
}}
175175
whileHover={{
176176
scale: 1.05,
177-
transition: { duration: 0.2 },
177+
transition: { duration: 0.1 },
178178
}}
179179
>
180180
<Badge

‎components/table-of-contents.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -218,8 +218,9 @@ export default function TableOfContents({ className }: TableOfContentsProps) {
218218
initial={false}
219219
transition={{
220220
type: "spring",
221-
stiffness: 500,
222-
damping: 30,
221+
stiffness: 600,
222+
damping: 35,
223+
duration: 0.1
223224
}}
224225
/>
225226
)}

‎components/tree-view.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ function TreeNode({
7878
>
7979
<motion.div
8080
animate={{ rotate: isExpanded ? 90 : 0 }}
81-
transition={{ duration: 0.2 }}
81+
transition={{ duration: 0.1 }}
8282
>
8383
<ChevronRight className="h-3 w-3 sm:h-4 sm:w-4" />
8484
</motion.div>
@@ -122,7 +122,7 @@ function TreeNode({
122122
height: isExpanded ? "auto" : 0,
123123
opacity: isExpanded ? 1 : 0,
124124
}}
125-
transition={{ duration: 0.3, ease: "easeInOut" }}
125+
transition={{ duration: 0.15, ease: "easeInOut" }}
126126
>
127127
<TreeView
128128
data={node.children}

‎next.config.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@ const nextConfig: NextConfig = {
1010
hostname: "lazy-dinosaur.github.io",
1111
},
1212
],
13-
formats: ["image/webp"],
13+
// formats: ["image/webp"],
1414
// Remove unoptimized: true to enable image optimization
15+
unoptimized: true,
1516
},
1617
trailingSlash: true, // ✅ 정적 서버 라우팅 호환성
1718
/* config options here */

0 commit comments

Comments
 (0)