From 294aa9f8c19353a56a7402b9814aa085c8fa5416 Mon Sep 17 00:00:00 2001
From: "jiwon93.son" <jiwon93.son@lge.partners.com>
Date: Mon, 5 Feb 2024 18:25:41 +0900
Subject: [PATCH] =?UTF-8?q?[TPopup]=20props=20=EC=B6=94=EA=B0=80,eventBann?=
 =?UTF-8?q?erPopup=20css=20=EC=A0=81=EC=9A=A9,KINDS=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TPopUp/TPopUp.jsx          | 42 ++++++++++++++-----
 .../src/components/TPopUp/TPopUp.module.less  | 24 +++++++++++
 2 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx
index 65674c27..38feb326 100644
--- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx
+++ b/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>
diff --git a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less
index 5857d95d..718bbe69 100644
--- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less
+++ b/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;
+    }
+  }
+}