ref(frontend) several minor updates

frontend/app/(pages)/blog/BlogPostCard.tsx

@@ -24,7 +24,7 @@ type Props = {
 function BlogPostCard({ post }: Props) {
     return (
         <div className={ `w-full` }>
-            <Card as={ Link } href={ `/blog/post/${ post.id }` }
+            <Card as={ Link } href={ `/blog/post/${ post.identifier }` }
                   className={ `group` }
                   isPressable
                   isHoverable

frontend/app/(pages)/blog/PostList.tsx

@@ -1,33 +1,19 @@
 'use server';
 
 import React from 'react';
-import BlogPostCard from '@/app/(pages)/blog/BlogPostCard';
-
-import * as motion from 'motion/react-client';
 import { fetchPostList } from '@/src/api/blog/post';
+import AnimationPostList from '@/app/(pages)/blog/post/components/AnimationPostList';
 
 const PostList = async ({ page }: { page: number }) => {
     try {
         const postListResponse = await fetchPostList(page);
 
         const posts = postListResponse.data.posts;
+
         return (
             // blog list
             <div className={ 'w-full' }>
-                <ul className={ 'flex flex-col items-center w-full space-y-7' }>
-                    { posts.map((post, key: number) => (
-                        <li key={ key } className={ 'w-full' }>
-                            <motion.div
-                                initial={ { y: 20, opacity: 0 } }
-                                animate={ { y: 0, opacity: 1 } }
-                                transition={ { ease: 'easeInOut', duration: 0.5, delay: key * .2 + .25 } }
-                            >
-                                <BlogPostCard post={ post } />
-                            </motion.div>
-                        </li>)
-                    ) }
-                </ul>
-
+                <AnimationPostList posts={ posts } />
             </div>
         );
     } catch (e: any) {

frontend/app/(pages)/blog/post/[id]/MinifyPostCard.tsx

@@ -17,7 +17,7 @@ const MinifyPostCard = (props: Props) => {
                   className="w-full h-[300px] shadow-none border-0 rounded-none overflow-hidden"
                   as={ Link }
                   isPressable
-                  href={ `/blog/post/${ post['id'] }` }
+                  href={ `/blog/post/${ post['identifier'] }` }
             >
                 <CardHeader className="absolute z-10 top-1 flex-col items-start">
                     <p className={ `text-tiny uppercase font-bold ${ img_url ? 'text-white/60' : 'text-black/60 dark:text-white/60' }` }>{ desc }</p>

frontend/app/(pages)/blog/post/components/AnimationPostList.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import React from 'react';
+import BlogPostCard from '@/app/(pages)/blog/BlogPostCard';
+
+import * as motion from 'motion/react-client';
+import { AnimatePresence } from 'motion/react';
+import { Post } from '@/src/api/blog/post';
+
+const PostList = ({ posts }: { posts: Post[] }) => {
+    return (
+        <div className={ 'w-full' }>
+            <ul className={ 'flex flex-col items-center w-full space-y-7' }>
+                <AnimatePresence mode={ 'wait' }>
+                    { posts.map((post, key: number) => (
+                        <motion.li
+                            initial={ { y: 20, opacity: 0 } }
+                            animate={ { y: 0, opacity: 1 } }
+                            transition={ { ease: 'easeOut', duration: 0.5, delay: key * .1 + .1 } }
+                            key={ key }
+                            className={ 'w-full' }>
+                            <BlogPostCard post={ post } />
+                        </motion.li>)
+                    ) }
+                </AnimatePresence>
+            </ul>
+
+        </div>
+    );
+};
+export default PostList;