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;

frontend/app/globals.css

@@ -1,4 +1,4 @@
-@import "lxgw-wenkai-webfont/style.css";
+@import "lxgw-wenkai-webfont/lxgwwenkai-light.css";
 
 @tailwind base;
 @tailwind components;
@@ -6,8 +6,10 @@
 
 body {
     font-family: "LXGW WenKai", sans-serif;
+    /*font-family: "Arial", "monospace", sans-serif;*/
 }
 
 pre, code {
-    font-family: "LXGW WenKai Mono", sans-serif;
-}
+    /*font-family: "monospace", sans-serif;*/
+    font-family: "monospace", sans-serif;
+}

frontend/app/page.tsx

@@ -5,14 +5,19 @@ import { useScreenSizeTrigger } from '@/app/(pages)/public/screenSizeTrigger';
 import { Button } from '@nextui-org/react';
 import { entries } from '@/app/entries';
 import Link from 'next/link';
+import BoxesGL from '@/components/BackgroundBoxGL';
+import { BoxesCore } from '@/components/BackgroundBox';
 
 export default function Home() {
 
     const isMobile = useScreenSizeTrigger('sm');
 
     return (
-        <div>
-            <div className={ `min-h-dvh h-min content-center` }>
+        <div className={ 'h-dvh w-full overflow-hidden relative' }>
+            {/*<BoxesGL />*/ }
+            <BoxesCore />
+
+            <div className={ `min-h-dvh h-min content-center z-20` }>
                 <p className={ 'text-center text-4xl' }>Atelier Lumiaethor</p>
             </div>
 
@@ -21,7 +26,8 @@ export default function Home() {
                 className={ 'absolute bottom-0 w-full h-60 p-12' }
             >
                 <div
-                    className={ 'bg-blue-500 h-full w-full rounded-3xl backdrop-blur align-middle grid grid-cols-2 content-center' }>
+                    // className={ 'bg-blue-500 h-full w-full rounded-3xl backdrop-blur align-middle grid grid-cols-2 content-center' }>
+                    className={ 'h-full w-full rounded-3xl backdrop-blur align-middle grid grid-cols-2 content-center' }>
 
                     <div className={ 'w-full flex justify-between' }>
                         <div className={ 'p-16' }>