From c54278baea5c7c5cfb1fb6e66c068bd457fe39e6 Mon Sep 17 00:00:00 2001
From: Max <er4gonik@gmail.com>
Date: Thu, 30 Jan 2025 17:16:17 +0300
Subject: [PATCH] Improvements

---
 enshi/package-lock.json                       |  90 ++++++++++---
 enshi/package.json                            |   2 +-
 .../AddPostToBlogDialog.tsx                   |  60 +++++++--
 .../BlogCreationDialog/BlogCreationDialog.tsx | 118 +++++++++---------
 .../src/Pages/UserBlogsPage/UserBlogsPage.tsx |  83 +++++++-----
 enshi/src/layout/MainPage/MainPage.tsx        |   1 +
 6 files changed, 242 insertions(+), 112 deletions(-)

diff --git a/enshi/package-lock.json b/enshi/package-lock.json
index c812543..2109523 100644
--- a/enshi/package-lock.json
+++ b/enshi/package-lock.json
@@ -1,18 +1,18 @@
 {
   "name": "enshi",
-  "version": "0.0.0",
+  "version": "0.1.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "enshi",
-      "version": "0.0.0",
+      "version": "0.1.7",
       "dependencies": {
         "@radix-ui/react-dialog": "^1.1.2",
         "@radix-ui/react-form": "^0.1.0",
         "@radix-ui/react-icons": "^1.3.2",
         "@radix-ui/react-navigation-menu": "^1.2.1",
-        "@radix-ui/react-scroll-area": "^1.2.1",
+        "@radix-ui/react-scroll-area": "^1.2.2",
         "@radix-ui/react-toast": "^1.2.2",
         "@radix-ui/react-tooltip": "^1.1.2",
         "@radix-ui/themes": "^3.1.3",
@@ -2234,18 +2234,18 @@
       }
     },
     "node_modules/@radix-ui/react-scroll-area": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.1.tgz",
-      "integrity": "sha512-FnM1fHfCtEZ1JkyfH/1oMiTcFBQvHKl4vD9WnpwkLgtF+UmnXMCad6ECPTaAjcDjam+ndOEJWgHyKDGNteWSHw==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.2.tgz",
+      "integrity": "sha512-EFI1N/S3YxZEW/lJ/H1jY3njlvTd8tBmgKEn4GHi51+aMm94i6NmAJstsm5cu3yJwYqYc93gpCPm21FeAbFk6g==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/number": "1.1.0",
-        "@radix-ui/primitive": "1.1.0",
-        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
         "@radix-ui/react-context": "1.1.1",
         "@radix-ui/react-direction": "1.1.0",
-        "@radix-ui/react-presence": "1.1.1",
-        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.1",
         "@radix-ui/react-use-callback-ref": "1.1.0",
         "@radix-ui/react-use-layout-effect": "1.1.0"
       },
@@ -2264,6 +2264,27 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
+      "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-context": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
@@ -2280,12 +2301,12 @@
       }
     },
     "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-presence": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
-      "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz",
+      "integrity": "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.1",
         "@radix-ui/react-use-layout-effect": "1.1.0"
       },
       "peerDependencies": {
@@ -2303,6 +2324,47 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz",
+      "integrity": "sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-select": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.1.tgz",
diff --git a/enshi/package.json b/enshi/package.json
index b396633..901e580 100644
--- a/enshi/package.json
+++ b/enshi/package.json
@@ -15,7 +15,7 @@
     "@radix-ui/react-form": "^0.1.0",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-navigation-menu": "^1.2.1",
-    "@radix-ui/react-scroll-area": "^1.2.1",
+    "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@radix-ui/themes": "^3.1.3",
diff --git a/enshi/src/Components/Dialogs/AddPostToBlogDialog/AddPostToBlogDialog.tsx b/enshi/src/Components/Dialogs/AddPostToBlogDialog/AddPostToBlogDialog.tsx
index 04deee3..41ff55b 100644
--- a/enshi/src/Components/Dialogs/AddPostToBlogDialog/AddPostToBlogDialog.tsx
+++ b/enshi/src/Components/Dialogs/AddPostToBlogDialog/AddPostToBlogDialog.tsx
@@ -1,13 +1,24 @@
 import * as Dialog from "@radix-ui/react-dialog";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import { Button, Card, Flex, Select, Text, Theme } from "@radix-ui/themes";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useAtomValue } from "jotai";
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { Blog } from "../../../@types/BlogTypes";
 import { axiosLocalhost } from "../../../api/axios/axios";
+import { userAtom } from "../../../AtomStore/AtomStore";
+import useToast from "../../../hooks/useToast";
 import { JSONWithInt64 } from "../../../utils/idnex";
 
 export default function AddPostToBlogDialog() {
+    const navigate = useNavigate();
+
+    const user = useAtomValue(userAtom);
+    const [selectedBlog, setSelectedBlog] = useState<string>("");
+
+    const createToast = useToast()
+
     const { data } = useQuery({
         queryKey: ["userBlogs"],
         queryFn: async () => {
@@ -21,13 +32,34 @@ export default function AddPostToBlogDialog() {
         },
     });
 
-    const [selectedBlog, setSelectedBlog] = useState<string>("");
+    const addMutation = useMutation({
+        mutationKey: ["addPostToBlog"],
+        mutationFn: async () => {
+            
+        },
+        onError: (error) => {
+            console.error(error);
+            createToast({title: "Error!", description: "Post have not been added"})
+        },
+        onSuccess: () => {
+            console.log("Post added successfully");
+            createToast({title: "Success!", description: "Post added successfully"})
+        },
+        onSettled: () => {
+            console.log("Add mutation is settled");
+        },
+    });
+
+    if (!user) {
+        navigate("/login");
+        return null;
+    }
 
     return (
         <Dialog.Root>
             <Dialog.Trigger asChild>
                 <Button variant="surface" className="h-5">
-                    Add to blog
+                    <Text>Add to blog</Text>
                 </Button>
             </Dialog.Trigger>
             <Dialog.Portal>
@@ -36,18 +68,26 @@ export default function AddPostToBlogDialog() {
                     <Theme>
                         <Card>
                             <Dialog.Title className="m-0 text-[17px] font-medium text-mauve12">
-                                Add this post to blog
+                                <Text size={"4"}>Add this post to blog</Text>
                             </Dialog.Title>
                             <Dialog.Description className="mb-5 mt-2.5 text-[15px] leading-normal text-mauve11">
                                 <Flex gap={"2"} align={"center"}>
                                     <Text>{`Add post to `}</Text>
-                                    <Select.Root>
-                                        <Select.Trigger className="w-40"/>
+                                    <Select.Root
+                                        value={selectedBlog}
+                                        onValueChange={(e) =>
+                                            setSelectedBlog(e)
+                                        }
+                                    >
+                                        <Select.Trigger className="w-40 cursor-pointer" />
                                         <Select.Content>
                                             <Select.Group>
                                                 {data?.map((blog, i) => {
                                                     return (
-                                                        <Select.Item key={i} value={`${blog.blog_id}`}>
+                                                        <Select.Item
+                                                            key={i}
+                                                            value={`${blog.blog_id}`}
+                                                        >
                                                             {blog.title}
                                                         </Select.Item>
                                                     );
@@ -60,8 +100,10 @@ export default function AddPostToBlogDialog() {
 
                             <div className="mt-[25px] flex justify-end">
                                 <Dialog.Close asChild>
-                                    <Button variant="outline" color="green">
-                                        Confirm
+                                    <Button
+                                        className="cursor-pointer"
+                                    >
+                                        <Text>Confirm</Text>
                                     </Button>
                                 </Dialog.Close>
                             </div>
diff --git a/enshi/src/Components/Dialogs/BlogCreationDialog/BlogCreationDialog.tsx b/enshi/src/Components/Dialogs/BlogCreationDialog/BlogCreationDialog.tsx
index 745b880..32d1923 100644
--- a/enshi/src/Components/Dialogs/BlogCreationDialog/BlogCreationDialog.tsx
+++ b/enshi/src/Components/Dialogs/BlogCreationDialog/BlogCreationDialog.tsx
@@ -1,6 +1,6 @@
 import * as Dialog from "@radix-ui/react-dialog";
 import { Cross2Icon, PlusIcon } from "@radix-ui/react-icons";
-import { Box, Button, Heading, Text, Theme } from "@radix-ui/themes";
+import { Box, Button, Card, Text, Theme } from "@radix-ui/themes";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { axiosLocalhost } from "../../../api/axios/axios";
@@ -52,63 +52,67 @@ export default function BlogCreationDialog() {
                     <Box>
                         <Theme>
                             <Dialog.Overlay className="fixed inset-0 bg-black/40 backdrop-blur-sm data-[state=open]:animate-appear" />
-                            <Dialog.Content className="fixed left-1/2 top-1/2 max-h-[85vh] w-[90vw] max-w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-md bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none data-[state=open]:animate-appear">
-                                <Dialog.Title className="m-0 text-[17px] font-medium text-mauve12">
-                                    <Heading>Create blog</Heading>
-                                </Dialog.Title>
-                                <Dialog.Description className="mb-5 mt-2.5 text-[15px] leading-normal text-mauve11">
-                                    <Text>Create your new blog.</Text>
-                                </Dialog.Description>
-                                <fieldset className="mb-[15px] flex items-center gap-5">
-                                    <label
-                                        className="w-[90px] text-right text-[15px] text-violet11"
-                                        htmlFor="title"
-                                    >
-                                        <Text>Blog title</Text>
-                                    </label>
-                                    <input
-                                        className="inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
-                                        id="title"
-                                        defaultValue="My blog"
-                                        onChange={(e) => {
-                                            setTitle(e.target.value);
-                                        }}
-                                    />
-                                </fieldset>
-                                <fieldset className="mb-[15px] flex items-center gap-5">
-                                    <label
-                                        className="w-[90px] text-right text-[15px] text-violet11"
-                                        htmlFor="Description"
-                                    >
-                                        <Text>Description</Text>
-                                    </label>
-                                    <textarea
-                                        className="pt-2 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
-                                        id="Description"
-                                        placeholder="Your description..."
-                                        onChange={(e) => {
-                                            setDescription(e.target.value);
-                                        }}
-                                    />
-                                </fieldset>
-                                <div className="mt-[25px] flex justify-end">
-                                    <Dialog.Close
-                                        asChild
-                                        onClick={() => {
-                                            addMutation.mutate();
-                                        }}
-                                    >
-                                        <Button>Create blog</Button>
+                            <Dialog.Content className="fixed left-1/2 top-1/2 max-h-[85vh] w-[90vw] max-w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-md p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none data-[state=open]:animate-appear">
+                                <Card>
+                                    <Dialog.Title className="m-0 text-[17px] font-medium text-mauve12">
+                                        <Text size={"4"}>Create blog</Text>
+                                    </Dialog.Title>
+                                    <Dialog.Description className="mb-5 mt-2.5 text-[15px] leading-normal text-mauve11">
+                                        <Text>Create your new blog.</Text>
+                                    </Dialog.Description>
+                                    <fieldset className="mb-[15px] flex items-center gap-5">
+                                        <label
+                                            className="w-[90px] text-right text-[15px] text-violet11"
+                                            htmlFor="title"
+                                        >
+                                            <Text>Blog title</Text>
+                                        </label>
+                                        <input
+                                            className="inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
+                                            id="title"
+                                            defaultValue="My blog"
+                                            onChange={(e) => {
+                                                setTitle(e.target.value);
+                                            }}
+                                        />
+                                    </fieldset>
+                                    <fieldset className="mb-[15px] flex items-center gap-5">
+                                        <label
+                                            className="w-[90px] text-right text-[15px] text-violet11"
+                                            htmlFor="Description"
+                                        >
+                                            <Text>Description</Text>
+                                        </label>
+                                        <textarea
+                                            className="pt-2 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
+                                            id="Description"
+                                            placeholder="Your description..."
+                                            onChange={(e) => {
+                                                setDescription(e.target.value);
+                                            }}
+                                        />
+                                    </fieldset>
+                                    <div className="mt-[25px] flex justify-end">
+                                        <Dialog.Close
+                                            asChild
+                                            onClick={() => {
+                                                addMutation.mutate();
+                                            }}
+                                        >
+                                            <Button className="cursor-pointer">
+                                                Create blog
+                                            </Button>
+                                        </Dialog.Close>
+                                    </div>
+                                    <Dialog.Close asChild>
+                                        <button
+                                            className="absolute right-2.5 top-2.5 inline-flex size-[25px] appearance-none items-center justify-center rounded-full text-violet11 hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7 focus:outline-none"
+                                            aria-label="Close"
+                                        >
+                                            <Cross2Icon />
+                                        </button>
                                     </Dialog.Close>
-                                </div>
-                                <Dialog.Close asChild>
-                                    <button
-                                        className="absolute right-2.5 top-2.5 inline-flex size-[25px] appearance-none items-center justify-center rounded-full text-violet11 hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7 focus:outline-none"
-                                        aria-label="Close"
-                                    >
-                                        <Cross2Icon />
-                                    </button>
-                                </Dialog.Close>
+                                </Card>
                             </Dialog.Content>
                         </Theme>
                     </Box>
diff --git a/enshi/src/Pages/UserBlogsPage/UserBlogsPage.tsx b/enshi/src/Pages/UserBlogsPage/UserBlogsPage.tsx
index e1ecc54..b6a9fe6 100644
--- a/enshi/src/Pages/UserBlogsPage/UserBlogsPage.tsx
+++ b/enshi/src/Pages/UserBlogsPage/UserBlogsPage.tsx
@@ -1,10 +1,5 @@
-import {
-    Box,
-    Container,
-    Flex,
-    Separator,
-    Text
-} from "@radix-ui/themes";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { Box, Container, Flex, Separator, Text } from "@radix-ui/themes";
 import { useQuery } from "@tanstack/react-query";
 import { axiosLocalhost } from "../../api/axios/axios";
 import BlogBox from "../../Components/BlogBox/BlogBox";
@@ -12,6 +7,10 @@ import BlogCreationDialog from "../../Components/Dialogs/BlogCreationDialog/Blog
 import { JSONWithInt64 } from "../../utils/idnex";
 import SkeletonBoxes from "./SkeletonBoxes/SkeletonBoxes";
 
+const TAGS = Array.from({ length: 50 }).map(
+    (_, i, a) => `v1.2.0-beta.${a.length - i}`
+);
+
 export default function UserBlogsPage() {
     const { data, isPending, isFetching } = useQuery({
         queryKey: ["userBlogs"],
@@ -34,33 +33,55 @@ export default function UserBlogsPage() {
         );
 
     return (
-        <Box className="size-full">
-            <Container size={"1"}>
-                <Flex direction={"column"} gap={"2"}>
-                    <Text size={"9"} className="text-center">
-                        Your blogs
-                    </Text>
+        <Box className="w-full max-h-full overflow-hidden">
+            {/* <Container size={"2"} className="w-full h-full max-h-full"> */}
+            <Flex
+                id="currentTestBox"
+                direction={"column"}
+                gap={"2"}
+                className="max-h-full pb-2 mx-80"
+            >
+                <Text size={"9"} className="text-center">
+                    Your blogs
+                </Text>
 
-                    <Separator size={"4"} className="my-2" />
+                <Separator size={"4"} className="my-2" />
 
-                    {data
-                        ? data?.map((blog: any, b) => {
-                              return (
-                                  <>
-                                      <BlogBox
-                                          key={b}
-                                          title={blog.title}
-                                          blogId={blog.blog_id}
-                                          userId={blog.user_id}
-                                      />
-                                  </>
-                              );
-                          })
-                        : null}
+                <div className="overflow-hidden">
+                    <ScrollArea.Root className="w-full overflow-hidden h-fit max-h-">
+                        <ScrollArea.Viewport className="size-full">
+                            <Flex direction={"column"} gap={"2"}>
+                                {data
+                                    ? data?.map((blog: any, b) => {
+                                          return (
+                                              <>
+                                                  <BlogBox
+                                                      key={b}
+                                                      title={blog.title}
+                                                      blogId={blog.blog_id}
+                                                      userId={blog.user_id}
+                                                  />
+                                              </>
+                                          );
+                                      })
+                                    : null}
+                            </Flex>
+                        </ScrollArea.Viewport>
+                        <ScrollArea.Scrollbar
+                            orientation="vertical"
+                            color="gray"
+                            className="rounded-xl data-[state=visible]:w-1"
+                        >
+                            <ScrollArea.Thumb className="relative flex-1 bg-gray-600 rounded-xl" />
+                        </ScrollArea.Scrollbar>
+                    </ScrollArea.Root>
+                </div>
 
-                    <BlogCreationDialog />
-                </Flex>
-            </Container>
+                <BlogCreationDialog />
+
+              
+            </Flex>
+            {/* </Container> */}
         </Box>
     );
 }
diff --git a/enshi/src/layout/MainPage/MainPage.tsx b/enshi/src/layout/MainPage/MainPage.tsx
index fe64d01..9b1d1cf 100644
--- a/enshi/src/layout/MainPage/MainPage.tsx
+++ b/enshi/src/layout/MainPage/MainPage.tsx
@@ -58,6 +58,7 @@ export default function MainPage() {
                 </div>
             ) : (
                 <Flex
+                    id="mainFlex"
                     direction={"column"}
                     className="min-h-[100vh] max-h-[100vh] overflow-hidden"
                 >