[Hot Picks] 타입 3개 추가

Detail Notes :
1. 10개 타입중 3개 추가
- TCFI : Full Image
- TCFV_2 : Full Image + VOD + Item(2)
- TCHH : Half Image X2

com.twin.app.shoptime/src/views/HotPicksPanel/HotPicks.module.less

@@ -0,0 +1,101 @@
+@import "../../style/CommonStyle.module.less";
+@import "../../style/utils.module.less";
+
+.hotPicks {
+  height: 100%;
+  position: relative;
+  > div {
+    height: 100%;
+  }
+}
+h2 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  font-size: 40px;
+  color: #000;
+  z-index: 100;
+}
+
+.sectionWrap {
+  height: 100%;
+  position: relative;
+
+  > div {
+    height: 100%;
+    .flex();
+    > img {
+      width: auto;
+      max-width: 100%;
+      height: auto;
+      position: relative;
+      &:focus-within {
+        &::after {
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          border: 4px solid @PRIMARY_COLOR_RED;
+          position: absolute;
+          left: 0;
+          top: 0;
+          content: "";
+        }
+      }
+    }
+  }
+  > ul {
+    position: absolute;
+    display: flex;
+    > li {
+      position: relative;
+      &:focus-within {
+        &::after {
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          border: 4px solid @PRIMARY_COLOR_RED;
+          position: absolute;
+          left: 0;
+          top: 0;
+          content: "";
+        }
+      }
+    }
+  }
+}
+
+.arrow {
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  z-index: 2;
+  > button {
+    width: 120px;
+    height: 55px;
+    background-size: 120px 120px;
+    background-repeat: no-repeat;
+    font-size: 0;
+    line-height: 0;
+    display: inline-block;
+    cursor: pointer;
+  }
+  &.arrowPrev {
+    top: 0;
+    > button {
+      background-image: url(../../../assets/images/hotPicks/ic-scrollup-nor@3x.png);
+      &:focus {
+        background-image: url(../../../assets/images/hotPicks/ic-scrollup-foc@3x.png);
+      }
+    }
+  }
+  &.arrowNext {
+    bottom: 0;
+    > button {
+      background-image: url(../../../assets/images/hotPicks/ic-scrolldown-nor@3x.png);
+      background-position: 0 -65px;
+      &:focus {
+        background-image: url(../../../assets/images/hotPicks/ic-scrolldown-foc@3x.png);
+      }
+    }
+  }
+}

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

@@ -1,7 +1,122 @@
-import React from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 
-import TPanel from "../../components/TPanel/TPanel";
+import classNames from 'classnames';
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
+
+import Spottable from '@enact/spotlight/Spottable';
+
+import { getThemeCurationInfo } from '../../actions/homeActions';
+import TBody from '../../components/TBody/TBody';
+import TPanel from '../../components/TPanel/TPanel';
+import css from './HotPicks.module.less';
+import TCFI from './Type/TCFI/TCFI'; // Full Image
+import TCFV_2 from './Type/TCFV_2/TCFV_2'; // Full Image + VOD + Item(2)
+import TCHH from './Type/TCHH/TCHH'; // Half Image X2
+
+const SpottableComponent = Spottable("button");
 
 export default function HotPicksPanel() {
-  return <TPanel>Hot Picks</TPanel>;
+  const dispatch = useDispatch();
+  const themeCurationInfoData = useSelector(
+    (state) => state.home.themeCurationInfoData.themeInfos
+  );
+
+  const themeCurationType = themeCurationInfoData
+    ? themeCurationInfoData.map((item) => item.tmpltCd)
+    : [];
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const currentType = [...themeCurationType][currentPage];
+  const currentTypeData =
+    themeCurationInfoData &&
+    themeCurationInfoData.filter((item) => item.tmpltCd === currentType);
+  console.log("##themeCurationInfoData", themeCurationInfoData);
+  const handlePrev = useCallback(() => {
+    setCurrentPage((prevIndex) =>
+      prevIndex === 0 ? themeCurationType.length - 1 : prevIndex - 1
+    );
+  }, [currentPage]);
+
+  const handleNext = useCallback(() => {
+    setCurrentPage((prevIndex) =>
+      prevIndex === themeCurationType.length - 1 ? 0 : prevIndex + 1
+    );
+  }, [currentPage]);
+
+  // TCFI  : Full Image
+  // TCHH : Half Image X2
+  // TCFI_2 : Full Image + Item(2)
+  // TCFI_3 : Full Image + Item(3)
+  // TCFI_4 : Full Image + Item(4)
+  // TCFV : Full Image + VOD
+  // TCFV_2 : Full Image + VOD + Item(2)
+  // TCFV_3 : Full Image + VOD + Item(3)
+  // TCFV_4 : Full Image + VOD + Item(4)
+  // TCAD : Theme AD
+  let typeComponent;
+  switch (currentType) {
+    case "TCFI":
+      typeComponent = (
+        <TCFI data={currentTypeData} className={css.sectionWrap} />
+      );
+      break;
+    case "TCFV_2":
+      typeComponent = (
+        <TCFV_2 data={currentTypeData} className={css.sectionWrap} />
+      );
+      break;
+    case "TCHH":
+      typeComponent = (
+        <TCHH data={currentTypeData} className={css.sectionWrap} />
+      );
+      break;
+    case "TCFI_4":
+      break;
+    case "TCFI_2":
+      break;
+    case "TCFI_3":
+      break;
+    case "TCFV":
+      break;
+    case "TCFV_4":
+      break;
+    case "TCAD":
+      break;
+    case "TCFV_3":
+      break;
+    default:
+      typeComponent = (
+        <TCFV_2 data={currentTypeData} className={css.sectionWrap} />
+      );
+  }
+
+  useEffect(() => {
+    dispatch(getThemeCurationInfo());
+  }, [dispatch]);
+
+  return (
+    <TPanel>
+      <TBody className={css.hotPicks}>
+        <h2>Type : {currentType}</h2>
+        {currentPage > 0 && (
+          <p className={classNames(css.arrow, css.arrowPrev)}>
+            <SpottableComponent onClick={handlePrev}>이전</SpottableComponent>
+          </p>
+        )}
+        {typeComponent}
+        {currentPage < themeCurationType.length - 1 && (
+          <p className={classNames(css.arrow, css.arrowNext)}>
+            <SpottableComponent onClick={handleNext}>다음</SpottableComponent>
+          </p>
+        )}
+      </TBody>
+    </TPanel>
+  );
 }

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './TCFI.module.less';
+
+const SpottableComponent = Spottable("div");
+
+export default function TCFI({ className, data }) {
+  console.log("##data", data);
+  return (
+    <>
+      {data &&
+        data.map(({ bgImgPath, curationNm, tmpltCd }) => {
+          return (
+            <div
+              key={tmpltCd}
+              className={classNames(className ? className : "")}
+            >
+              <SpottableComponent className={css.fullImg}>
+                <img src={bgImgPath} alt={curationNm} />
+              </SpottableComponent>
+            </div>
+          );
+        })}
+    </>
+  );
+}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './TCFV_2.module.less';
+
+const SpottableComponent = Spottable("li");
+
+export default function TCFV_2({ className, data }) {
+  console.log("##data", data);
+  return (
+    <>
+      {data &&
+        data.map(({ bgImgPath, curationNm, tmpltCd, productInfos }) => {
+          return (
+            <div
+              key={tmpltCd}
+              className={classNames(className ? className : "")}
+            >
+              <div className={css.fullImg}>
+                <img src={bgImgPath} alt={curationNm} />
+              </div>
+              <ul className={css.itemList}>
+                {productInfos &&
+                  productInfos.slice(0, 2).map(({ imgUrl, prdtNm, prdtId }) => {
+                    return (
+                      <SpottableComponent key={prdtId}>
+                        <img src={imgUrl} alt={prdtNm} />
+                      </SpottableComponent>
+                    );
+                  })}
+              </ul>
+            </div>
+          );
+        })}
+    </>
+  );
+}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.module.less

@@ -0,0 +1,13 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.itemList {
+  left: 150px;
+  bottom: 210px;
+  > li {
+    margin-right: 20px;
+    > img {
+      .size(@w:242px, @h:242px);
+    }
+  }
+}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './TCHH.module.less';
+
+const SpottableComponent = Spottable("div");
+
+export default function TCHH({ className, data }) {
+  console.log("##data", data);
+  return (
+    <>
+      {data &&
+        data.map(({ bgImgPath, curationNm, tmpltCd }) => {
+          return (
+            <div
+              key={tmpltCd}
+              className={classNames(className ? className : "", css.halfWrap)}
+            >
+              {bgImgPath &&
+                bgImgPath.slice(0, 2).map((bgImgPath, idx) => {
+                  return (
+                    <SpottableComponent key={idx}>
+                      <img src={bgImgPath} alt={curationNm} />
+                    </SpottableComponent>
+                  );
+                })}
+            </div>
+          );
+        })}
+    </>
+  );
+}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.module.less

@@ -0,0 +1,9 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.halfWrap {
+  display: flex;
+  > div {
+    flex: 1;
+  }
+}