From 5203dba8f62870c7c178c820ebbfc4d62c564735 Mon Sep 17 00:00:00 2001
From: "jiwon93.son" <jiwon93.son@lge.partners.com>
Date: Tue, 30 Jan 2024 14:45:39 +0900
Subject: [PATCH] =?UTF-8?q?[TPopUp]=20=EB=B6=80=EB=B6=84=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95,=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B0=8F=20props=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TPopUp/TPopUp.jsx          | 30 +++++++++++++++----
 .../src/components/TPopUp/TPopUp.module.less  | 30 +++++++++++++++----
 2 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx
index bcace15c..65674c27 100644
--- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx
+++ b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx
@@ -34,8 +34,10 @@ export default function TPopUp({
   title,
   text,
   options,
+  useOptionImg,
   selectedOptionIdx,
   setSelectedOptionIdx,
+  ...rest
 }) {
   useEffect(() => {
     if (KINDS.indexOf(kind) < 0) {
@@ -47,8 +49,7 @@ export default function TPopUp({
     Spotlight.focus("tPopupBtn1");
     Spotlight.focus("tPopupBtn2");
     // TODO
-    // console.log("selectedOptionIndex", selectedOptionIndex);
-    // if (options) Spotlight.focus(`option_1`);
+    // if (options) Spotlight.focus(`option_${selectedOptionIdx}`)
   }, []);
 
   const _onClose = useCallback(
@@ -88,15 +89,34 @@ export default function TPopUp({
           </div>
         )}
         {options && (
-          <ul className={css.optionLayer}>
+          <ul
+            className={classNames(
+              css.optionLayer,
+              options.length >= 5 ? css.optionScroll : null
+            )}
+          >
             {options.map((option, index) => (
               <SpottableComponent
-                className={css.option}
-                spotlightId={`option_${index}`}
+                {...rest}
+                className={classNames(
+                  css.option,
+                  index === selectedOptionIdx ? css.selectedOption : null
+                )}
+                spotlightId={
+                  index === selectedOptionIdx ? `option_${index}` : null
+                }
                 onClick={() => {
                   handleOptionClick(index);
                 }}
+                key={index}
               >
+                {useOptionImg && (
+                  <img
+                    src={option.optImgUrl}
+                    alt="option_img"
+                    className={css.img}
+                  />
+                )}
                 {$L(option.prodOptCval)}
               </SpottableComponent>
             ))}
diff --git a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less
index 2a3c5eab..5070a063 100644
--- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less
+++ b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less
@@ -103,10 +103,14 @@
   }
 
   .optionLayer {
-    padding: 30px 60px;
+    margin: 0 auto;
+    width: 700px;
+    max-height: 410px;
+    border-top: 1px solid @COLOR_GRAY02;
+    border-bottom: 1px solid @COLOR_GRAY02;
 
-    li:not(:last-child) {
-      border-bottom: none;
+    li:not(:first-child) {
+      border-top: 1px solid @COLOR_GRAY02;
     }
 
     .option {
@@ -114,9 +118,12 @@
       font-size: 24px;
       color: @COLOR_GRAY03;
       padding: 30px;
-      border: 1px solid @COLOR_GRAY02;
+      border-right: 1px solid @COLOR_GRAY02;
+      border-left: 1px solid @COLOR_GRAY02;
       height: 90px;
       line-height: normal;
+      align-items: center;
+      display: flex;
 
       &:focus-within,
       &:hover,
@@ -124,10 +131,23 @@
         background: @PRIMARY_COLOR_RED;
         color: @COLOR_WHITE;
       }
+      .img {
+        width: 60px;
+        height: 60px;
+        margin: 0 12px 0 0;
+      }
+    }
+
+    &.optionScroll {
+      overflow-y: auto;
+    }
+    .selectedOption {
+      background: @SELECTED_COLOR_RED;
+      color: @COLOR_WHITE;
     }
   }
   .buttonContainer {
-    margin: 0 0 30px 0;
+    margin: 30px 0 30px 0;
     display: flex;
     justify-content: center;
     gap: 12px;