[Refactor] WordFilter: Improve reusability of setting container templates.

src-ui/views/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.jsx

@@ -50,14 +50,14 @@ export const WordFilter = () => {
 
     return (
         <div className={styles.container}>
-            { currentIsOpenedMicWordFilterList.data &&
-            <div className={styles.list_section_wrapper}>
-                {
-                    currentMicWordFilterList.data.map((item, index) => {
-                        return <WordFilterItem value={item} key={index} deleteAction={deleteAction}/>;
-                    })
-                }
-            </div>
+            { currentIsOpenedMicWordFilterList.data && currentMicWordFilterList.data.length > 0 &&
+                <div className={styles.list_section_wrapper}>
+                    {
+                        currentMicWordFilterList.data.map((item, index) => {
+                            return <WordFilterItem value={item} key={index} deleteAction={deleteAction}/>;
+                        })
+                    }
+                </div>
             }
             <div className={styles.entry_section_wrapper}>
                 <_Entry width="30rem" onChange={onChangeEntry} ui_variable={input_value}/>

src-ui/views/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.module.scss

@@ -4,11 +4,13 @@
     align-items: center;
     flex-direction: column;
     gap: 2rem;
+    width: 100%;
 }
 
 
 .list_section_wrapper {
     display: flex;
+    justify-content: center;
     flex-wrap: wrap;
     width: 100%;
     gap: 0.6rem;

src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx

@@ -22,13 +22,6 @@ import {
 } from "../_components";
 import { Checkbox } from "@common_components";
 
-const LabeledContainer = ({ children, label, desc, custom_class_name }) => (
-    <div className={clsx(styles.container, custom_class_name)}>
-        <LabelComponent label={label} desc={desc} />
-        {children}
-    </div>
-);
-
 export const useOnMouseLeaveDropdownMenu = () => {
     const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
 
@@ -49,19 +42,44 @@ export const DropdownMenuContainer = (props) => {
     );
 };
 
-const CommonContainer = ({ Component, ...props }) => {
+const CommonContainer = ({
+    label_type = "label_component",
+    add_break_point = true,
+    flex_column = false,
+    remove_border_bottom = false,
+    Component,
+    ...props
+}) => {
     const { currentIsBreakPoint } = useStore_IsBreakPoint();
 
     const container_class = clsx(styles.container, {
-        [styles.is_break_point]: props.add_break_point ?? currentIsBreakPoint.data,
+        [styles.is_break_point]: add_break_point && currentIsBreakPoint.data,
+        [styles.flex_column]: flex_column,
+        [styles.remove_border_bottom]: remove_border_bottom,
     });
 
-    return (
-        <LabeledContainer label={props.label} desc={props.desc} custom_class_name={container_class}>
-            <Component {...props} is_break_point={currentIsBreakPoint.data} />
-        </LabeledContainer>
-    );
+    if (label_type === "label_component") {
+        return (
+            <div className={container_class}>
+                <LabelComponent label={props.label} desc={props.desc} />
+                <Component {...props} is_break_point={currentIsBreakPoint.data} />
+            </div>
+        );
+    } else if (label_type === "no_label") {
+        return (
+            <div className={container_class}>
+                <Component {...props} is_break_point={currentIsBreakPoint.data} />
+            </div>
+        );
+    } else if (label_type === "label_only") {
+        return (
+            <div className={container_class}>
+                <LabelComponent label={props.label} desc={props.desc} />
+            </div>
+        );
+    }
 };
+
 export const SliderContainer = (props) => (
     <CommonContainer Component={Slider} {...props} />
 );
@@ -114,19 +132,22 @@ export const ComputeDeviceContainer = (props) => (
     <CommonContainer Component={ComputeDevice} {...props} />
 );
 
-export const WordFilterContainer = (props) => (
-    <div className={styles.word_filter_container}>
-        <div className={styles.word_filter_switch_section}>
-            <div className={styles.word_filter_label_wrapper}>
-                <LabelComponent label={props.label} desc={props.desc} />
-            </div>
-            <WordFilterListToggleComponent />
-        </div>
-        <div className={styles.word_filter_section}>
-            <WordFilter {...props} />
-        </div>
-    </div>
-);
+export const WordFilterContainer = (props) => {
+    return (
+        <>
+            <CommonContainer
+                Component={WordFilterListToggleComponent}
+                remove_border_bottom={true}
+                {...props}
+            />
+            <CommonContainer
+                Component={WordFilter}
+                label_type="no_label"
+                {...props}
+            />
+        </>
+    );
+};
 
 export const DownloadModelsContainer = (props) => (
     <CommonContainer Component={DownloadModels} {...props} />

src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.module.scss

@@ -8,7 +8,9 @@
     &.flex_column {
         flex-direction: column;
     }
-    border-bottom: solid 0.1rem var(--dark_800_color);
+    &:not(.remove_border_bottom) {
+        border-bottom: solid 0.1rem var(--dark_800_color);
+    }
 
     &.is_break_point {
         flex-direction: column;
@@ -32,26 +34,4 @@
 
 .message_format_section {
     width: 100%;
-}
-
-
-.word_filter_container {
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    gap: 2rem;
-    padding: 2rem;
-}
-
-.word_filter_switch_section {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.word_filter_label_wrapper {
-    max-width: 34rem;
 }