[TPopUp] 부분 수정, 스타일 및 props 추가

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>
             ))}

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;