[지라이슈없음] 옵션 수량이 없을 경우 SOLDOUT 문구 노출

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

@@ -14,6 +14,7 @@ import { SpotlightIds } from "../../utils/SpotlightIds";
 import CustomImage from "../CustomImage/CustomImage";
 import TButton from "../TButton/TButton";
 import css from "../TPopUp/TPopUp.module.less";
+import { $L } from "../../utils/helperMethods";
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "default-element" },
@@ -291,7 +292,13 @@ export default function TPopUp({
                       alt="optionImg"
                     />
                   )}
-                  <span>{optNm ? optNm : prodOptCval}</span>
+                  <div className={css.optionItem}>
+                    <span>{optNm ? optNm : prodOptCval}</span>
+                    {optStkQty && optStkQty <= 0 && (
+                      <span>{$L("SOLD OUT")}</span>
+                    )}
+                  </div>
+
                   {optPrc && optStock !== 0 && `($${optPrc})`}
                 </SpottableComponent>
               );

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

@@ -134,6 +134,12 @@
     width: 820px;
   }
 
+  .optionItem {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+
   .optionLayer {
     margin: 0 auto;
     width: 700px;
@@ -169,6 +175,11 @@
           opacity: 0.4;
         }
       }
+
+      &.optionItem {
+        display: flex;
+        color: red;
+      }
     }
 
     &.optionScroll {
@@ -472,6 +483,7 @@
         height: 100%;
       }
     }
+
     .text {
       color: #1a1a1a;
       font-size: 24px;