[Refactor] Change state management structures. Async atom to be manage manually.

src-ui/app/main_page/main_section/MainSection.jsx

@@ -28,10 +28,10 @@ const HandleLanguageSelector = () => {
         setSelectedTargetLanguages,
     } = useLanguageSettings();
 
-    if (currentIsOpenedLanguageSelector.your_language === true) {
+    if (currentIsOpenedLanguageSelector.data.your_language === true) {
         const onclickFunction_YourLanguage = (payload) => setSelectedYourLanguages(payload);
         return <LanguageSelector id="your_language" onClickFunction={onclickFunction_YourLanguage}/>;
-    } else if (currentIsOpenedLanguageSelector.target_language === true) {
+    } else if (currentIsOpenedLanguageSelector.data.target_language === true) {
         const onclickFunction_TargetLanguage = (payload) => setSelectedTargetLanguages(payload);
         return <LanguageSelector id="target_language" onClickFunction={onclickFunction_TargetLanguage}/>;
     } else {

src-ui/app/main_page/main_section/language_selector/LanguageSelector.jsx

@@ -27,7 +27,7 @@ export const LanguageSelector = ({ id, onClickFunction }) => {
         }, {});
     };
 
-    const groupedLanguages = groupLanguagesByFirstLetter(currentSelectableLanguageList);
+    const groupedLanguages = groupLanguagesByFirstLetter(currentSelectableLanguageList.data);
 
     return (
         <div className={styles.container}>

src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx

@@ -1,20 +1,22 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import styles from "./LogBox.module.scss";
-import { useStore_MessageLogs, store } from "@store";
+import { store } from "@store";
 import { MessageContainer } from "./message_container/MessageContainer";
 import { scrollToBottom } from "@utils/scrollToBottom";
+import { useMessage } from "@logics_common/useMessage";
 
 export const LogBox = () => {
-    const { currentMessageLogs } = useStore_MessageLogs();
+    const { currentMessageLogs } = useMessage();
     const log_container_ref = useRef(null);
     const [is_scrolling, setIsScrolling] = useState(false);
 
+
     useLayoutEffect(() => {
         store.log_box_ref = log_container_ref;
         if (!is_scrolling) {
             scrollToBottom(store.log_box_ref, true);
         }
-    }, [currentMessageLogs]);
+    }, [currentMessageLogs.data]);
 
     useEffect(() => {
         const handleScroll = () => {
@@ -39,7 +41,7 @@ export const LogBox = () => {
 
     return (
         <div id="log_container" className={styles.container} ref={log_container_ref}>
-            {currentMessageLogs.map(message_data => (
+            {currentMessageLogs.data.map(message_data => (
                 <MessageContainer key={message_data.id} {...message_data} />
             ))}
         </div>

src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx

@@ -8,11 +8,11 @@ export const SidebarCompactModeButton = () => {
     const { updateIsMainPageCompactMode, currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
 
     const toggleCompactMode = () => {
-        updateIsMainPageCompactMode(!currentIsMainPageCompactMode);
+        updateIsMainPageCompactMode(!currentIsMainPageCompactMode.data);
     };
 
     const class_names = clsx(styles["arrow_left_svg"], {
-        [styles["reverse"]]: currentIsMainPageCompactMode
+        [styles["reverse"]]: currentIsMainPageCompactMode.data
     });
 
     return (