From fab5fbc070e30edc51ec4e0ea4f0f351ffd345e6 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Mon, 23 Sep 2024 09:58:54 +0900
Subject: [PATCH] [Update] Main Page: LanguageSelector. close the language
 selector when any language is selected from it.

---
 .../main_page/main_section/MainSection.jsx    | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src-ui/app/main_page/main_section/MainSection.jsx b/src-ui/app/main_page/main_section/MainSection.jsx
index fc6d5021..abb83218 100644
--- a/src-ui/app/main_page/main_section/MainSection.jsx
+++ b/src-ui/app/main_page/main_section/MainSection.jsx
@@ -20,7 +20,7 @@ export const MainSection = () => {
 
 import { useLanguageSettings } from "@logics_main/useLanguageSettings";
 const HandleLanguageSelector = () => {
-    const { currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
+    const { currentIsOpenedLanguageSelector, updateIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
     const {
         currentSelectedYourLanguages,
         setSelectedYourLanguages,
@@ -29,11 +29,27 @@ const HandleLanguageSelector = () => {
     } = useLanguageSettings();
 
     if (currentIsOpenedLanguageSelector.data.your_language === true) {
-        const onclickFunction_YourLanguage = (payload) => setSelectedYourLanguages(payload);
-        return <LanguageSelector id="your_language" onClickFunction={onclickFunction_YourLanguage}/>;
+        const onclickFunction_YourLanguage = (payload) => {
+            updateIsOpenedLanguageSelector({ your_language: false, target_language: false });
+            setSelectedYourLanguages(payload);
+        };
+        return (
+            <LanguageSelector
+                id="your_language"
+                onClickFunction={onclickFunction_YourLanguage}
+            />
+        );
     } else if (currentIsOpenedLanguageSelector.data.target_language === true) {
-        const onclickFunction_TargetLanguage = (payload) => setSelectedTargetLanguages(payload);
-        return <LanguageSelector id="target_language" onClickFunction={onclickFunction_TargetLanguage}/>;
+        const onclickFunction_TargetLanguage = (payload) => {
+            updateIsOpenedLanguageSelector({ your_language: false, target_language: false });
+            setSelectedTargetLanguages(payload);
+        };
+        return (
+            <LanguageSelector
+                id="target_language"
+                onClickFunction={onclickFunction_TargetLanguage}
+            />
+        );
     } else {
         return null;
     }