[TPopUp] optionClick 함수 제거 , optionClick props 추가, optionPrice 추가, optionPopup 스타일 수정

com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx

@@ -15,6 +15,11 @@ const Container = SpotlightContainerDecorator(
   Spottable("div")
 );
 
+const OptionContainer = SpotlightContainerDecorator(
+  { enterTo: "last-focused", preserveId: true },
+  Spottable("ul")
+);
+
 const SpottableComponent = Spottable("li");
 
 const KINDS = [
@@ -43,7 +48,7 @@ export default function TPopUp({
   title,
   text,
   options,
-  useOptionImg,
+  optionClick,
   selectedOptionIdx,
   setSelectedOptionIdx,
   ...rest
@@ -57,8 +62,8 @@ export default function TPopUp({
   useEffect(() => {
     Spotlight.focus("tPopupBtn1");
     Spotlight.focus("tPopupBtn2");
-    // TODO
-    // if (options) Spotlight.focus(`option_${selectedOptionIdx}`)
+
+    if (options) Spotlight.focus(`option_${selectedOptionIdx}`);
   }, [open]);
 
   const _onClick = useCallback(
@@ -70,6 +75,15 @@ export default function TPopUp({
     [onClick]
   );
 
+  const _optionClick = useCallback(
+    (e, idx) => {
+      if (optionClick) {
+        optionClick(e, idx);
+      }
+    },
+    [optionClick]
+  );
+
   const _onExit = useCallback(
     (e) => {
       if (onExit) {
@@ -88,11 +102,6 @@ export default function TPopUp({
     [onClose]
   );
 
-  const handleOptionClick = useCallback((index) => {
-    setSelectedOptionIdx(index);
-    _onClose();
-  }, []);
-
   return (
     <Alert
       open={open}
@@ -116,34 +125,40 @@ export default function TPopUp({
           </div>
         )}
         {options && (
-          <ul
+          <OptionContainer
             className={classNames(
               css.optionLayer,
               options.length >= 5 ? css.optionScroll : null
             )}
           >
-            {options.map((option, index) => (
-              <SpottableComponent
-                {...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="" className={css.img} />
-                )}
-                {option.prodOptCval}
-              </SpottableComponent>
-            ))}
-          </ul>
+            {options.map((option, index) => {
+              const { prodOptCval, optImgUrl, optPrc, optStkQty } = option;
+              const optStock = Number(optStkQty);
+
+              return (
+                <SpottableComponent
+                  {...rest}
+                  className={classNames(
+                    css.option,
+                    index === selectedOptionIdx && css.selectedOption,
+                    optStock <= 0 && css.optionSoldOut
+                  )}
+                  spotlightId={index === selectedOptionIdx && `option_${index}`}
+                  onClick={(e) => {
+                    if (optStock && optStock >= 1) _optionClick(e, index);
+                  }}
+                  key={`option: ${index}`}
+                  spotlightDisabled={optStock && optStock === 160}
+                >
+                  {optImgUrl && (
+                    <img src={optImgUrl} alt="" className={css.img} />
+                  )}
+                  <span>{prodOptCval}</span>
+                  {optPrc && optStock !== 0 && `($${optPrc})`}
+                </SpottableComponent>
+              );
+            })}
+          </OptionContainer>
         )}
         {children}
         {hasButton && (

com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less

@@ -133,7 +133,8 @@
     max-height: 410px;
     border-top: 1px solid @COLOR_GRAY02;
     border-bottom: 1px solid @COLOR_GRAY02;
-
+    margin-top: 31px;
+    border: 1px solid @COLOR_GRAY02;
     li:not(:first-child) {
       border-top: 1px solid @COLOR_GRAY02;
     }
@@ -143,8 +144,6 @@
       font-size: 24px;
       color: @COLOR_GRAY03;
       padding: 30px;
-      border-right: 1px solid @COLOR_GRAY02;
-      border-left: 1px solid @COLOR_GRAY02;
       height: 90px;
       line-height: normal;
       align-items: center;
@@ -159,6 +158,13 @@
         height: 60px;
         margin: 0 12px 0 0;
       }
+
+      &.optionSoldOut {
+        background: @BG_COLOR_02;
+        > * {
+          opacity: 0.4;
+        }
+      }
     }
 
     &.optionScroll {
@@ -173,7 +179,6 @@
     margin: 30px 0 30px 0;
     display: flex;
     justify-content: center;
-    margin: 0 6px;
   }
 }
 
@@ -196,7 +201,6 @@
     > div {
       min-width: 240px;
       height: 80px;
-      cursor: pointer;
     }
   }
 }
@@ -235,6 +239,8 @@
       display: flex;
       justify-content: center;
       > div {
+        min-width: 300px;
+        height: 78px;
         margin: 0 6px;
       }
     }