[Refactor] Change the function names.

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

@@ -4,7 +4,7 @@ import { TopBar } from "./top_bar/TopBar";
 import { MessageContainer } from "./message_container/MessageContainer";
 import { LanguageSelector } from "./language_selector/LanguageSelector";
 
-import { useIsOpenedLanguageSelector } from "@store";
+import { useStore_IsOpenedLanguageSelector } from "@store";
 
 export const MainSection = () => {
 
@@ -18,7 +18,7 @@ export const MainSection = () => {
 };
 
 const HandleLanguageSelector = () => {
-    const { currentIsOpenedLanguageSelector } = useIsOpenedLanguageSelector();
+    const { currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
 
     if (currentIsOpenedLanguageSelector.your_language === true) {
         return <LanguageSelector id="your_language"/>;

src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.jsx

@@ -1,9 +1,9 @@
 import styles from "./LanguageSelectorTopBar.module.scss";
 
-import { useIsOpenedLanguageSelector } from "@store";
+import { useStore_IsOpenedLanguageSelector } from "@store";
 
 export const LanguageSelectorTopBar = (props) => {
-    const { updateIsOpenedLanguageSelector } = useIsOpenedLanguageSelector();
+    const { updateIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
 
     const closeLanguageSelector = () => {
         updateIsOpenedLanguageSelector({

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

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

src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx

@@ -2,9 +2,10 @@ import { useState } from "react";
 import styles from "./MessageInputBox.module.scss";
 import SendMessageSvg from "@images/send_message.svg?react";
 import { useMessage } from "@logics/useMessage";
-import { store, useEnableAutoClearMessageBox } from "@store";
+import { store } from "@store";
 import { scrollToBottom } from "@logics/scrollToBottom";
 import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
+import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox";
 
 export const MessageInputBox = () => {
     const [inputValue, setInputValue] = useState("");

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

@@ -1,18 +1,18 @@
 import clsx from "clsx";
 import styles from "./SidebarCompactModeButton.module.scss";
 
-import { useMainPageCompactModeStatus } from "@store";
+import { useStore_IsMainPageCompactMode } from "@store";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
 
 export const SidebarCompactModeButton = () => {
-    const { updateMainPageCompactModeStatus, currentMainPageCompactModeStatus } = useMainPageCompactModeStatus();
+    const { updateIsMainPageCompactMode, currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
 
     const toggleCompactMode = () => {
-        updateMainPageCompactModeStatus(!currentMainPageCompactModeStatus);
+        updateIsMainPageCompactMode(!currentIsMainPageCompactMode);
     };
 
     const class_names = clsx(styles["arrow_left_svg"], {
-        [styles["reverse"]]: currentMainPageCompactModeStatus
+        [styles["reverse"]]: currentIsMainPageCompactMode
     });
 
     return (