[TPopup] props 추가,eventBannerPopup css 적용,KINDS 추가

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

@@ -1,16 +1,16 @@
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-import Spottable from "@enact/spotlight/Spottable";
-import Spotlight from "@enact/spotlight";
-import Alert from "@enact/sandstone/Alert";
-import { $L } from "../../utils/helperMethods";
-
 import React, { useCallback, useEffect } from "react";
 
-import TButton from "../TButton/TButton";
-
-import css from "../TPopUp/TPopUp.module.less";
 import classNames from "classnames";
 
+import Alert from "@enact/sandstone/Alert";
+import Spotlight from "@enact/spotlight";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
+
+import { $L } from "../../utils/helperMethods";
+import TButton from "../TButton/TButton";
+import css from "../TPopUp/TPopUp.module.less";
+
 const Container = SpotlightContainerDecorator(
   { enterTo: "default-element", preserveId: true },
   Spottable("div")
@@ -18,12 +18,19 @@ const Container = SpotlightContainerDecorator(
 
 const SpottableComponent = Spottable("li");
 
-const KINDS = ["textPopup", "termsPopup", "introTermsPopup", "optionPopup"];
+const KINDS = [
+  "textPopup",
+  "termsPopup",
+  "introTermsPopup",
+  "optionPopup",
+  "eventBannerPopup",
+];
 
 export default function TPopUp({
   kind,
   children,
   onExit,
+  onClick,
   onClose,
   hasButton,
   hasText,
@@ -52,6 +59,15 @@ export default function TPopUp({
     // if (options) Spotlight.focus(`option_${selectedOptionIdx}`)
   }, []);
 
+  const _onClick = useCallback(
+    (e) => {
+      if (onClick) {
+        onClick(e);
+      }
+    },
+    [onClick]
+  );
+
   const _onClose = useCallback(
     (e) => {
       if (onClose) {
@@ -128,7 +144,11 @@ export default function TPopUp({
             {button1Text && (
               <TButton
                 spotlightId="tPopupBtn1"
-                onClick={kind === "exit" ? onExit : onClose}
+                onClick={() => {
+                  if (onClick) _onClick();
+                  else if (kind === "exit") onExit;
+                  else _onClose();
+                }}
               >
                 {button1Text}
               </TButton>

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

@@ -152,3 +152,27 @@
     gap: 12px;
   }
 }
+
+.eventBannerPopup {
+  .default-style();
+  .info {
+    width: 600px;
+    height: 510px;
+  }
+
+  .buttonContainer {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    > div {
+      min-width: 240px;
+      height: 80px;
+      cursor: pointer;
+    }
+  }
+}