Merge pull request #450 from entrylabs/issue/7700

[하드웨어] 블록메뉴, 모달팝업 UX 변경
entrylabs · Aug 27, 2024 · d970167 · d970167
2 parents 3e05311 + 581154a
commit d970167
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 11 deletions.
diff --git a/src/assets/entry/scss/popup.scss b/src/assets/entry/scss/popup.scss
@@ -917,7 +917,8 @@
         font-size: 14px;
         color: #000;
         letter-spacing: -0.32px;
-        line-height: 16px;
+        line-height: 1.29;
+        white-space: pre-line;
     }
     .caution_dsc:before {
         position: absolute;

diff --git a/src/components/popup/Contents/Select/BigICON/Item.jsx b/src/components/popup/Contents/Select/BigICON/Item.jsx
@@ -16,6 +16,7 @@ const Index = ({
     select,
     deselect,
     useLangKey = true,
+    allowDuplicate = true,
 }) => {
     const theme = Theme.getStyle('popup');
     const { imageName, sponserText, linkBox } = item;
@@ -31,6 +32,9 @@ const Index = ({
                 selected.splice(index, 1);
             }
         } else {
+            if (!allowDuplicate && selected.length >= 0) {
+                selected = [];
+            }
             selected.push(item, () => select(item));
         }
         applySelected(selected);

diff --git a/src/components/popup/Contents/Select/BigICON/index.jsx b/src/components/popup/Contents/Select/BigICON/index.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import Item from './Item';
 import { CommonUtils } from '@utils/Common';
 import Theme from '@utils/Theme';
@@ -8,9 +8,24 @@ import { connect } from 'react-redux';
 import { triggerEvent } from '@actions/index';
 import { EMIT_TYPES as Types } from '@constants';
 
+const ALERT_MSG_KEY = {
+    aiUtilize: 'template.aiUtilize_block_descriptions',
+    hw_lite: 'template.hardware_lite_descriptions',
+    'entry-js': 'template.expansion_block_descriptions',
+};
+
 const Index = (props) => {
     const theme = Theme.getStyle('popup');
-    const { data = [], imageBaseUrl, applySelected, submit, selected, HeaderButtonPortal, popupAlertMessage } = props;
+    const {
+        data = [],
+        imageBaseUrl,
+        applySelected,
+        submit,
+        selected,
+        HeaderButtonPortal,
+        popupAlertMessage,
+    } = props;
+    const [itemSelected, setItemSelected] = useState(true);
 
     useEffect(() => {
         applySelected(data.filter((item) => item.active));
@@ -23,22 +38,26 @@ const Index = (props) => {
         return false;
     });
 
-    const alertMsgKey = useMemo(() => {
+    const popupType = useMemo(() => {
         if (imageBaseUrl.includes('aiUtilize')) {
-            return 'template.aiUtilize_block_descriptions';
+            return 'aiUtilize';
         } else if (imageBaseUrl.includes('hw_lite')) {
-            return 'template.hardware_lite_descriptions';
+            return 'hw_lite';
         } else if (imageBaseUrl.includes('entry-js')) {
-            return 'template.expansion_block_descriptions';
+            return 'entry-js';
         } else {
             console.error('Error, incorrect imageBaseUrl : ', imageBaseUrl);
         }
     }, [imageBaseUrl]);
 
+    const isHwLite = popupType === 'hw_lite';
+
     return (
         <div className={classname(theme.section_content, theme.extend_content)}>
             <h2 className={theme.blind}>BIG ICON LIST</h2>
-            <p className={theme.caution_dsc}>{popupAlertMessage || CommonUtils.getLang(alertMsgKey)}</p>
+            <p className={theme.caution_dsc}>
+                {popupAlertMessage || CommonUtils.getLang(ALERT_MSG_KEY[popupType])}
+            </p>
             <div className={theme.extend_block}>
                 <ul className={theme.list}>
                     {data.map((item) => (
@@ -47,17 +66,25 @@ const Index = (props) => {
                             item={item}
                             imageBaseUrl={imageBaseUrl}
                             useLangKey={useLangKey}
+                            allowDuplicate={isHwLite ? false : true} // 수정
                         />
                     ))}
                 </ul>
             </div>
             <HeaderButtonPortal>
                 <a
-                    className={theme.btn}
+                    className={`${theme.btn} ${
+                        isHwLite && selected.length <= 1 ? theme.disabled : ''
+                    }`}
                     role="button"
-                    onClick={CommonUtils.handleClick(() => submit({ selected }))}
+                    onClick={CommonUtils.handleClick(() => {
+                        if (itemSelected) {
+                            submit({ selected });
+                            setItemSelected(false);
+                        }
+                    })}
                 >
-                    {CommonUtils.getLang('Buttons.load')}
+                    {CommonUtils.getLang(isHwLite ? 'Buttons.select' : 'Buttons.load')}
                 </a>
             </HeaderButtonPortal>
         </div>