WelcomeEventPanel 추가,eventSlice 추가,apiConfig/store 내용 추가,

com.twin.app.shoptime/src/api/apiConfig.js

@@ -43,6 +43,9 @@ export const URLS = {
   //main controller
   GET_SUB_CATEGORY: "/lgsp/v1/main/subcategory.lge",
   GET_TOP20_SHOW: "/lgsp/v1/main/top/show.lge",
+
+  //event controller
+  GET_WELCOME_EVENT_INFO: "/lgsp/v1/event/event.lge",
 };
 
 export const getUrl = (endStr) => {

com.twin.app.shoptime/src/features/event/eventSlice.js

@@ -0,0 +1,51 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+
+import { URLS } from "../../api/apiConfig";
+import { TAxios } from "../../api/TAxios";
+
+// 이벤트 정보 조회 IF-LGSP-070 :
+export const getWelcomeEventInfo = createAsyncThunk(
+  "event/getWelcomeEventInfo",
+
+  async (_, thunkAPI) => {
+    const onSuccess = (response) => {
+      console.log("getWelcomeEventInfo onSuccess ", response.data);
+
+      thunkAPI.dispatch(eventSlice.actions.updateEventData(response.data.data));
+    };
+
+    const onFail = (error) => {
+      console.error("getWelcomeEventInfo onFail ", error);
+    };
+
+    TAxios(
+      thunkAPI.dispatch,
+      thunkAPI.getState,
+      "get",
+      URLS.GET_WELCOME_EVENT_INFO,
+      {},
+      {},
+      onSuccess,
+      onFail
+    );
+  }
+);
+
+const initialState = {
+  eventData: {},
+};
+
+export const eventSlice = createSlice({
+  name: "event",
+  initialState,
+  reducers: {
+    updateEventData: (state, action) => {
+      //   console.log("#action", action);
+      state.eventData = action.payload;
+      //   console.log("#state", state.eventData);
+    },
+  },
+});
+
+export const { updateEventData } = eventSlice.actions;
+export default eventSlice.reducer;

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

@@ -4,13 +4,14 @@ import appDataReducer from "../features/appData/appDataSlice";
 import brandReducer from "../features/brand/brandsSlice";
 import commonReducer from "../features/common/commonSlice";
 import deviceReducer from "../features/device/deviceSlice";
+import eventReducer from "../features/event/eventSlice";
 import homeReducer from "../features/home/homeSlice";
+import mainReducer from "../features/main/mainSlice";
 import myPageReducer from "../features/mypage/myPageSlice";
 import onSaleReducer from "../features/onSale/onSaleSlice";
 import panelsReducer from "../features/panels/panelsSlice";
-import searchReducer from "../features/search/searchSlice";
 import productReducer from "../features/product/productSlice";
-import mainReducer from "../features/main/mainSlice";
+import searchReducer from "../features/search/searchSlice";
 
 export const store = configureStore({
   reducer: {
@@ -25,5 +26,6 @@ export const store = configureStore({
     search: searchReducer,
     product: productReducer,
     main: mainReducer,
+    event: eventReducer,
   },
 });

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

@@ -0,0 +1,96 @@
+import React, { useEffect } from "react";
+
+import { useDispatch, useSelector } from "react-redux";
+
+import Spotlight from "@enact/spotlight";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+
+import TButton, { TYPES } from "../../components/TButton/TButton";
+import TPanel from "../../components/TPanel/TPanel";
+import { getWelcomeEventInfo } from "../../features/event/eventSlice";
+import { $L } from "../../utils/helperMethods";
+import css from "../WelcomeEventPanel/WelcomeEventPanel.module.less";
+
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused" },
+  "div"
+);
+
+// 임시 데이터
+const dummyeEvnetData = {
+  evntId: "", // 이벤트 아이디
+  evntNm: "Win LG OLED TV and MORE!", // 이벤트 이름
+  evntTpCd: "", // 이벤트 유형
+  expsStrtDt: "2021. March 15st", // 전시 시작일시
+  expsEndtDt: "2021. April 13st", // 전시 종료 일시
+  evntImgUrl: "", // 이벤트 이미지 URL
+  trmsBtnExpsFlag: "Y", // 약관 버튼 노출 여부
+  trmsCntt: "", // 약관 내용
+};
+
+const WelcomeEventPanel = () => {
+  const dispatch = useDispatch();
+  const EventInfos = useSelector((state) => state.event);
+
+  // console.log("#getEventInfos", EventInfos);
+
+  useEffect(() => {
+    dispatch(getWelcomeEventInfo());
+    Spotlight.focus("agree");
+  }, []);
+
+  return (
+    <TPanel>
+      <Container className={css.eventLayout}>
+        <div className={css.textLayer}>
+          <div className={css.title}>{$L(dummyeEvnetData.evntNm)}</div>
+          <div className={css.date}>
+            {$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={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>
+  );
+};
+
+export default WelcomeEventPanel;

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

@@ -0,0 +1,56 @@
+@import "../../style/CommonStyle.module.less";
+@import "../../style/utils.module.less";
+
+.eventLayout {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 80px;
+  text-align: center;
+
+  .textLayer {
+    line-height: normal;
+  }
+  .title {
+    color: #2e2e2e;
+    .font (@arialFontBold, 64px);
+  }
+  .date {
+    .font (@arialFontBold, 38px);
+    color: @COLOR_GRAY06;
+    padding: 10px 0 30px 0;
+  }
+  .description {
+    .font (@arialFontBold, 30px);
+    color: @COLOR_GRAY06;
+    white-space: pre-line;
+
+    .pointColor {
+      color: #c91d53;
+    }
+  }
+
+  .BtnLayer {
+    .flex();
+    margin: 25px 0 0px;
+    padding-top: 30px;
+
+    .agreeBtn {
+      min-width: 340px;
+      height: 80px;
+    }
+  }
+
+  .bottomBtnLayer {
+    position: fixed;
+    top: 788px;
+    .termsBtn {
+      width: 440px;
+      height: 80px;
+      .font (@arialFont, 34px);
+      color: @COLOR_GRAY06;
+      letter-spacing: -1px;
+    }
+  }
+}

com.twin.app.shoptime/src/views/WelcomeEventPanel/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "WelcomeEventPanel.jsx",
+  "styles": [
+    "WelcomeEventPanel.module.less"
+  ]
+}