feat: 애니메이션 일부 수정

Author: cobocho

app/category/[slug]/_components/category-post-item.tsx

@@ -1,29 +1,15 @@
-"use client";
-
 import dayjs from "dayjs";
-import { motion } from "motion/react";
 import Image from "next/image";
 
 import { Post } from "@/interfaces/post";
 
 export function CategoryPostItem({
   post,
-  delay,
 }: {
   post: Omit<Post, "content">;
-  delay: number;
 }) {
   return (
-    <motion.div
-      className="group flex cursor-pointer flex-col gap-3 rounded-xl p-3 transition-all duration-200 hover:bg-neutral-50 dark:hover:bg-neutral-800 sm:flex-row sm:gap-5"
-      initial={{ opacity: 0, y: 24 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{
-        delay,
-        duration: 0.6,
-        ease: [0.25, 0.1, 0.25, 1],
-      }}
-    >
+    <div className="group flex cursor-pointer flex-col gap-3 rounded-xl p-3 transition-all duration-200 hover:bg-neutral-50 dark:hover:bg-neutral-800 sm:flex-row sm:gap-5">
       <div className="relative h-44 w-full overflow-hidden rounded-lg sm:h-[100px] sm:w-[160px] sm:min-w-[160px]">
         <Image
           src={post.thumbnail}
@@ -53,6 +39,6 @@ export function CategoryPostItem({
           </span>
         </div>
       </div>
-    </motion.div>
+    </div>
   );
 }

app/category/[slug]/page.tsx

@@ -6,6 +6,10 @@ import { notFound } from "next/navigation";
 import { getCategories } from "@/apis/category";
 import { getPostsByCategory } from "@/apis/post";
 import { FadeInUp } from "@/components/animation/fade-in-up";
+import {
+  StaggerChildren,
+  StaggerItem,
+} from "@/components/animation/stagger-children";
 import { SITE_NAME } from "@/constants/site-metadata";
 
 import { CategoryPostItem } from "./_components/category-post-item";
@@ -68,7 +72,7 @@ export default async function CategoryPage({ params }: CategoryPageProps) {
 
   return (
     <div className="py-8 sm:py-10">
-      <FadeInUp>
+      <FadeInUp delay={0.1}>
         <div className="mb-4 flex items-center gap-3 sm:mb-2 sm:gap-4">
           <Link href="/">
             <ChevronLeft className="size-7 text-neutral-500 sm:size-8" />
@@ -81,17 +85,22 @@ export default async function CategoryPage({ params }: CategoryPageProps) {
           </div>
         </div>
       </FadeInUp>
-      <div className="flex flex-col gap-3 sm:gap-4">
-        {posts.map((post, index) => (
-          <Link
-            href={`/post/${post.category}/${post.slug}`}
-            key={post.slug}
-            className="block"
-          >
-            <CategoryPostItem post={post} delay={0.1 + index * 0.07} />
-          </Link>
+      <StaggerChildren
+        className="flex flex-col gap-3 sm:gap-4"
+        baseDelay={0.2}
+        staggerDelay={0.06}
+      >
+        {posts.map((post) => (
+          <StaggerItem key={post.slug}>
+            <Link
+              href={`/post/${post.category}/${post.slug}`}
+              className="block"
+            >
+              <CategoryPostItem post={post} />
+            </Link>
+          </StaggerItem>
         ))}
-      </div>
+      </StaggerChildren>
     </div>
   );
 }

src/components/animation/fade-in-up.tsx

@@ -11,12 +11,14 @@ interface FadeInUpProps {
 export const FadeInUp = ({ children, delay = 0, className }: FadeInUpProps) => {
   return (
     <motion.div
-      initial={{ opacity: 0, y: 28 }}
-      animate={{ opacity: 1, y: 0 }}
+      initial={{ opacity: 0, y: 16, filter: "blur(4px)" }}
+      animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
       transition={{
-        duration: 0.7,
+        type: "spring",
+        stiffness: 200,
+        damping: 22,
+        mass: 1,
         delay,
-        ease: [0.25, 0.1, 0.25, 1],
       }}
       className={className}
     >

src/components/animation/stagger-children.tsx

@@ -13,7 +13,7 @@ export const StaggerChildren = ({
   children,
   className,
   baseDelay = 0,
-  staggerDelay = 0.12,
+  staggerDelay = 0.06,
 }: StaggerChildrenProps) => {
   return (
     <motion.div
@@ -45,13 +45,16 @@ export const StaggerItem = ({
   return (
     <motion.div
       variants={{
-        hidden: { opacity: 0, y: 24 },
+        hidden: { opacity: 0, y: 16, filter: "blur(4px)" },
         visible: {
           opacity: 1,
           y: 0,
+          filter: "blur(0px)",
           transition: {
-            duration: 0.6,
-            ease: [0.25, 0.1, 0.25, 1],
+            type: "spring",
+            stiffness: 200,
+            damping: 22,
+            mass: 1,
           },
         },
       }}