TPopUp 스타일 추가, optionPopup 작업 중

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

@@ -15,9 +15,10 @@ const Container = SpotlightContainerDecorator(
   { enterTo: "default-element", preserveId: true },
   Spottable("div")
 );
-const SpottableComponent = Spottable("div");
 
-const KINDS = ["textPopup", "termsPopup", "introTermsPopup"];
+const SpottableComponent = Spottable("li");
+
+const KINDS = ["textPopup", "termsPopup", "introTermsPopup", "optionPopup"];
 
 export default function TPopUp({
   kind,
@@ -32,6 +33,9 @@ export default function TPopUp({
   open,
   title,
   text,
+  options,
+  selectedOptionIdx,
+  setSelectedOptionIdx,
 }) {
   useEffect(() => {
     if (KINDS.indexOf(kind) < 0) {
@@ -42,6 +46,9 @@ export default function TPopUp({
   useEffect(() => {
     Spotlight.focus("tPopupBtn1");
     Spotlight.focus("tPopupBtn2");
+    // TODO
+    // console.log("selectedOptionIndex", selectedOptionIndex);
+    // if (options) Spotlight.focus(`option_1`);
   }, []);
 
   const _onClose = useCallback(
@@ -53,6 +60,11 @@ export default function TPopUp({
     [onClose]
   );
 
+  const handleOptionClick = useCallback((index) => {
+    setSelectedOptionIdx(index);
+    _onClose();
+  }, []);
+
   return (
     <Alert
       open={open}
@@ -75,6 +87,21 @@ export default function TPopUp({
             {text && <div className={css.text}>{text}</div>}
           </div>
         )}
+        {options && (
+          <ul className={css.optionLayer}>
+            {options.map((option, index) => (
+              <SpottableComponent
+                className={css.option}
+                spotlightId={`option_${index}`}
+                onClick={() => {
+                  handleOptionClick(index);
+                }}
+              >
+                {$L(option.prodOptCval)}
+              </SpottableComponent>
+            ))}
+          </ul>
+        )}
         {children}
         {hasButton && (
           <div className={css.buttonContainer}>

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

@@ -30,7 +30,7 @@
 .default-style() {
   .info {
     width: 780px;
-    background-color: @COLOR_WHITE;
+    background-color: @BG_COLOR_01;
     color: @COLOR_GRAY03;
     display: flex;
     flex-direction: column;
@@ -46,6 +46,7 @@
       text-align: left;
       font-size: 36px;
       font-family: @baseFontBold;
+      line-height: normal;
       color: @COLOR_BLACK;
       background-color: @COLOR_SKYBLUE;
       padding: 30px 60px;
@@ -55,7 +56,8 @@
       min-height: 180px;
       color: @COLOR_GRAY03;
       font-size: 30px;
-      padding: 30px 60px;
+      line-height: 38px;
+      text-align: center;
       .flex();
     }
   }
@@ -66,24 +68,16 @@
 
   .info {
     width: 1066px;
+    height: 742px;
     background-color: @COLOR_SKYBLUE;
     padding: 60px;
 
-    .textLayer {
-      .title {
-      }
-
-      .text {
-      }
-    }
-
     .buttonContainer {
       margin: 30px 0 0 0;
       display: flex;
       justify-content: center;
     }
   }
-
   .title {
     width: 100%;
   }
@@ -93,19 +87,49 @@
   .default-style();
 
   .info {
-    .textLayer {
-      .title {
-      }
-
-      .text {
-      }
-    }
-
     .buttonContainer {
-      margin: 30px 0;
+      margin: 0 0 30px 0;
       display: flex;
       justify-content: center;
       gap: 12px;
     }
   }
 }
+
+.optionPopup {
+  .default-style();
+  .info {
+    width: 820px;
+  }
+
+  .optionLayer {
+    padding: 30px 60px;
+
+    li:not(:last-child) {
+      border-bottom: none;
+    }
+
+    .option {
+      background: @COLOR_WHITE;
+      font-size: 24px;
+      color: @COLOR_GRAY03;
+      padding: 30px;
+      border: 1px solid @COLOR_GRAY02;
+      height: 90px;
+      line-height: normal;
+
+      &:focus-within,
+      &:hover,
+      &:focus {
+        background: @PRIMARY_COLOR_RED;
+        color: @COLOR_WHITE;
+      }
+    }
+  }
+  .buttonContainer {
+    margin: 0 0 30px 0;
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+  }
+}

com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.jsx

@@ -75,7 +75,8 @@ export default function IntroPanel({ children, ...rest }) {
           <div className={css.title}>
             {$L(`Welcome to `)}
             <span className={css.txtPoint}>
-              Sh<span className={css.pointColor}>{$L("o")}</span>
+              {$L("Sh")}
+              <span className={css.pointColor}>{$L("o")}</span>
               {$L(`p Time !`)}
             </span>
           </div>

com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.module.less

@@ -49,17 +49,19 @@
 .introTermsConts {
   background-color: @COLOR_WHITE;
   font-size: 30px;
-  border: 1px solid @COLOR_GRAY01;
+  border: 1px solid @COLOR_GRAY02;
   color: @COLOR_BLACK;
   border-radius: 4px;
+  white-space: pre-wrap;
 
   .termsTitle {
     font-family: @baseFontBold;
-    border-bottom: 1px solid @COLOR_GRAY07;
+    border-bottom: 1px solid @COLOR_GRAY02;
     padding: 20px 30px;
   }
 
   .termsDesc {
-    padding: 10px 30px;
+    padding: 30px;
+    line-height: 50px;
   }
 }