diff --git a/package.json b/package.json index 2b3da2d4..1f812d44 100644 --- a/package.json +++ b/package.json @@ -107,7 +107,6 @@ "rimraf": "^2.6.2", "safe-umd-webpack-plugin": "^4.0.0", "sass-loader": "^7.1.0", - "style-loader": "0.19.0", "styled-components": "^3.4.2", "sw-precache-webpack-plugin": "0.11.4", "url-loader": "0.6.2", @@ -139,6 +138,7 @@ "react-slick": "^0.23.2", "redux-form": "^7.4.2", "reselect": "^4.0.0", + "style-loader": "^4.0.0", "xlsx": "^0.16.9" }, "files": [ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 70df4ce1..6f07141f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -71,6 +71,9 @@ importers: reselect: specifier: ^4.0.0 version: 4.1.8 + style-loader: + specifier: ^4.0.0 + version: 4.0.0(webpack@5.91.0(webpack-cli@5.1.4)) xlsx: specifier: ^0.16.9 version: 0.16.9 @@ -303,9 +306,6 @@ importers: sass-loader: specifier: ^7.1.0 version: 7.3.1(webpack@5.91.0(webpack-cli@5.1.4)) - style-loader: - specifier: 0.19.0 - version: 0.19.0 styled-components: specifier: ^3.4.2 version: 3.4.10(react@17.0.2) @@ -7988,14 +7988,16 @@ packages: strongly-connected-components@1.0.1: resolution: {integrity: sha512-i0TFx4wPcO0FwX+4RkLJi1MxmcTv90jNZgxMu9XRnMXMeFUY1VJlIoXpZunPUvUUqbCT1pg5PEkFqqpcaElNaA==} - style-loader@0.19.0: - resolution: {integrity: sha512-9mx9sC9nX1dgP96MZOODpGC6l1RzQBITI2D5WJhu+wnbrSYVKLGuy14XJSLVQih/0GFrPpjelt+s//VcZQ2Evw==} - engines: {node: '>= 0.12.0'} - style-loader@0.20.3: resolution: {integrity: sha512-2I7AVP73MvK33U7B9TKlYZAqdROyMXDYSMvHLX43qy3GCOaJNiV6i0v/sv9idWIaQ42Yn2dNv79Q5mKXbKhAZg==} engines: {node: '>= 0.12.0'} + style-loader@4.0.0: + resolution: {integrity: sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==} + engines: {node: '>= 18.12.0'} + peerDependencies: + webpack: ^5.27.0 + styled-components@3.4.10: resolution: {integrity: sha512-TA8ip8LoILgmSAFd3r326pKtXytUUGu5YWuqZcOQVwVVwB6XqUMn4MHW2IuYJ/HAD81jLrdQed8YWfLSG1LX4Q==} peerDependencies: @@ -18885,16 +18887,15 @@ snapshots: strongly-connected-components@1.0.1: {} - style-loader@0.19.0: - dependencies: - loader-utils: 1.4.2 - schema-utils: 0.3.0 - style-loader@0.20.3: dependencies: loader-utils: 1.4.2 schema-utils: 0.4.7 + style-loader@4.0.0(webpack@5.91.0(webpack-cli@5.1.4)): + dependencies: + webpack: 5.91.0(webpack-cli@5.1.4) + styled-components@3.4.10(react@17.0.2): dependencies: buffer: 5.7.1 diff --git a/src/assets/entry/scss/popup.scss b/src/assets/entry/scss/popup.scss index bd673f6a..02a5a42d 100644 --- 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 index 98d7c61f..6e41dbe0 100644 --- 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 index de54e263..2094da67 100644 --- 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 (

BIG ICON LIST

-

{popupAlertMessage || CommonUtils.getLang(alertMsgKey)}

+

+ {popupAlertMessage || CommonUtils.getLang(ALERT_MSG_KEY[popupType])} +

submit({ selected }))} + onClick={CommonUtils.handleClick(() => { + if (itemSelected) { + submit({ selected }); + setItemSelected(false); + } + })} > - {CommonUtils.getLang('Buttons.load')} + {CommonUtils.getLang(isHwLite ? 'Buttons.select' : 'Buttons.load')}