eventActions/store 수정, Config 추가, WelcomeEventPanel 내용 추가,스타일 수정

com.twin.app.shoptime/src/actions/eventActions.js

@@ -20,6 +20,7 @@ export const getWelcomeEventInfo = () => (dispatch, getState) => {
   TAxios(
     dispatch,
     getState,
+    "get",
     URLS.GET_WELCOME_EVENT_INFO,
     {},
     {},

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

@@ -68,7 +68,6 @@
 
   .info {
     width: 1066px;
-    height: 742px;
     background-color: @COLOR_SKYBLUE;
     padding: 60px;
 

com.twin.app.shoptime/src/store/store.js

@@ -26,7 +26,7 @@ const rootReducer = combineReducers({
   onSale: onSaleReducer,
   product: productReducer,
   search: searchReducer,
-  evemt: eventReducer,
+  event: eventReducer,
 });
 
 export const store = createStore(rootReducer, applyMiddleware(thunk));

com.twin.app.shoptime/src/utils/Config.js

@@ -18,6 +18,7 @@ export const panel_names = {
   HOT_PICKS_PANEL: "hotpickpanel",
   CART_PANEL: "cartpanel",
   FEATURED_BRANDS_PANEL: "featuredbrandspanel",
+  WELCOME_EVENT_PANEL: "welcomeeventpanel",
 
   // error
   ERROR_PANEL: "errorpanel",

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 
@@ -6,8 +6,11 @@ import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
 import { getWelcomeEventInfo } from "../../actions/eventActions";
+import { popPanel } from "../../actions/panelActions";
 import TButton, { TYPES } from "../../components/TButton/TButton";
 import TPanel from "../../components/TPanel/TPanel";
+import TPopUp from "../../components/TPopUp/TPopUp";
+import * as Config from "../../utils/Config";
 import { $L } from "../../utils/helperMethods";
 import css from "../WelcomeEventPanel/WelcomeEventPanel.module.less";
 
@@ -16,7 +19,7 @@ const Container = SpotlightContainerDecorator(
   "div"
 );
 
-// 임시 데이터
+// EventInfos.eventData 임시 데이터
 const dummyeEvnetData = {
   evntId: "", // 이벤트 아이디
   evntNm: "Win LG OLED TV and MORE!", // 이벤트 이름
@@ -32,7 +35,26 @@ const WelcomeEventPanel = () => {
   const dispatch = useDispatch();
   const EventInfos = useSelector((state) => state.event);
 
-  // console.log("#getEventInfos", EventInfos);
+  const [termsPopUpOpen, setTermsPopUpOpen] = useState(false);
+  const [currentTerms, setCurrentTerms] = useState(null);
+
+  const handleTermsClick = useCallback(() => {
+    if (EventInfos && EventInfos.eventData && EventInfos.eventData.trmsCntt) {
+      const selectedTerms = EventInfos.eventData.trmsCntt;
+
+      setCurrentTerms(selectedTerms);
+      setTermsPopUpOpen(true);
+    } else {
+      setCurrentTerms("Terms Test");
+      setTermsPopUpOpen(true);
+    }
+  }, [EventInfos]);
+
+  const handleSkip = useCallback(() => {
+    dispatch(popPanel(Config.panel_names.WELCOME_EVENT_PANEL));
+  }, [dispatch]);
+
+  const handleAgree = useCallback(() => {}, []);
 
   useEffect(() => {
     dispatch(getWelcomeEventInfo());
@@ -40,56 +62,79 @@ const WelcomeEventPanel = () => {
   }, []);
 
   return (
-    <TPanel>
+    <>
-      <Container className={css.eventLayout}>
+      <TPanel className={css.panel} isTabActivated={false}>
-        <div className={css.textLayer}>
+        <Container className={css.eventLayout}>
-          <div className={css.title}>{$L(dummyeEvnetData.evntNm)}</div>
+          <div className={css.textLayer}>
-          <div className={css.date}>
+            <div className={css.title}>{$L(dummyeEvnetData.evntNm)}</div>
-            {$L(
+            <div className={css.date}>
-              `(Period : ${dummyeEvnetData.expsStrtDt} ~ ${dummyeEvnetData.expsEndtDt})`
+              {$L(
+                `(Period : ${dummyeEvnetData.expsStrtDt} ~ ${dummyeEvnetData.expsEndtDt})`
+              )}
+            </div>
+            <div className={css.description}>
+              {$L(
+                `Just input your cell phone number and you’ll be applied automatically!\n`
+              )}
+              <span>
+                {$L(`(Click below `)}
+                <span className={css.pointColor}>{$L(`‘Agree’`)}</span>
+                {$L(" button)")}
+              </span>
+            </div>
+            <div className={css.BtnLayer}>
+              <TButton
+                className={css.agreeBtn}
+                onClick={handleAgree}
+                spotlightId="agree"
+                type={TYPES.agree}
+              >
+                {$L("Agree")}
+              </TButton>
+              <TButton
+                onClick={handleSkip}
+                className={css.agreeBtn}
+                type={TYPES.agree}
+              >
+                {$L("Skip")}
+              </TButton>
+            </div>
+          </div>
+          <div className={css.bottomBtnLayer}>
+            {dummyeEvnetData.trmsBtnExpsFlag === "Y" && (
+              <TButton
+                onClick={() => handleTermsClick()}
+                className={css.termsBtn}
+                type={TYPES.terms}
+              >
+                {$L("Terms & Conditions")}
+              </TButton>
             )}
           </div>
-          <div className={css.description}>
+        </Container>
-            {$L(
+      </TPanel>
-              `Just input your cell phone number and you’ll be applied automatically!\n`
+      {/* TERMS */}
-            )}
+      <TPopUp
-            <span>
+        kind="introTermsPopup"
-              {$L(`(Click below `)}
+        open={termsPopUpOpen}
-              <span className={css.pointColor}>{$L(`‘Agree’`)}</span>
+        onClose={() => setTermsPopUpOpen(false)}
-              {$L(" button)")}
+        hasButton
-            </span>
+        button1Text="OK"
+        className={css.termsPopup}
+      >
+        {currentTerms && (
+          <div className={css.introTermsConts}>
+            <div className={css.termsTitle}>{$L("Terms & Conditions")}</div>
+            <div
+              className={css.termsDesc}
+              dangerouslySetInnerHTML={{
+                __html: currentTerms,
+              }}
+            />
           </div>
-          <div className={css.BtnLayer}>
+        )}
-            <TButton
+      </TPopUp>
-              className={css.agreeBtn}
+    </>
-              // onClick={handleAgree}
-              spotlightId="agree"
-              type={TYPES.agree}
-            >
-              {$L("Agree")}
-            </TButton>
-            <TButton
-              // onClick={handleDisagree}
-              className={css.agreeBtn}
-              type={TYPES.agree}
-            >
-              {$L("Do Not Agree")}
-            </TButton>
-          </div>
-        </div>
-        <div className={css.bottomBtnLayer}>
-          {dummyeEvnetData.trmsBtnExpsFlag === "Y" && (
-            <TButton
-              // onClick={() => handleTermsClick("MST00402")}
-              className={css.termsBtn}
-              type={TYPES.terms}
-            >
-              {$L("Terms & Conditions")}
-            </TButton>
-          )}
-        </div>
-      </Container>
-    </TPanel>
   );
 };
 

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

@@ -4,6 +4,7 @@
 .eventLayout {
   display: flex;
   height: 100%;
+  width: 100%;
   flex-direction: column;
   align-items: center;
   padding-top: 80px;
@@ -54,3 +55,25 @@
     }
   }
 }
+/* terms */
+.termsPopup {
+  .introTermsConts {
+    background-color: @COLOR_WHITE;
+    font-size: 30px;
+    border: 1px solid @COLOR_GRAY02;
+    color: @COLOR_BLACK;
+    border-radius: 4px;
+    white-space: pre-wrap;
+
+    .termsTitle {
+      font-family: @baseFontBold;
+      border-bottom: 1px solid @COLOR_GRAY02;
+      padding: 20px 30px;
+    }
+
+    .termsDesc {
+      padding: 30px;
+      line-height: 50px;
+    }
+  }
+}