HOME(컴포넌트 위치변경 및 디자인 수정)

com.twin.app.shoptime/src/components/Home/HomeBanner/Template.jsx

@@ -14,14 +14,14 @@ import Spotlight from "@enact/spotlight";
 import Marquee from "@enact/sandstone/Marquee";
 import Spottable from "@enact/spotlight/Spottable";
 
-import CustomImage from "../CustomImage/CustomImage";
+import CustomImage from "../../CustomImage/CustomImage";
 import ViedoPlayer from "@enact/sandstone/VideoPlayer";
 import css from "./Template.module.less";
-import { getAdDetailAMD, getHomeTerms } from "../../api/homeApi";
+import { getAdDetailAMD, getHomeTerms } from "../../../api/homeApi";
 
-import banner2 from "../../../assets/Image/img-home-banner-h-02.png";
-import banner3 from "../../../assets/Image/img-home-banner-v-01.png";
-import banner4 from "../../../assets/Image/img-home-banner-v-02.png";
+import banner2 from "../../../../assets/Image/img-home-banner-h-02.png";
+import banner3 from "../../../../assets/Image/img-home-banner-v-01.png";
+import banner4 from "../../../../assets/Image/img-home-banner-v-02.png";
 
 const SpottableComponent = Spottable("div");
 
@@ -51,17 +51,21 @@ const Template = ({
   const onClickBanner = useCallback(() => {}, []);
   useEffect(() => {}, []);
   return (
-    <Container {...rest} spotlightId={spotlightId} className={css.container}>
-      <div>
+    <Container
+      {...rest}
+      spotlightId={spotlightId}
+      className={(css.container, css.homeTemplateBox)}
+    >
+      <div className={css.leftBannerBox}>
         {/* 비디오플레이어 추후 변경 */}
         <div
           style={{
             width: 744,
             height: 420,
-            marginTop: 24,
-            marginRight: 9,
+            marginTop: 0,
+            marginRight: 0,
             marginBottom: 18,
-            marginLeft: 24,
+            marginLeft: 0,
             transform: "scale(1)",
             transformOrigin: "top",
           }}
@@ -79,7 +83,9 @@ const Template = ({
           onClickBanner={onClickBanner}
           onImageLoaded={setBannerImageLoaded}
           src={
-            banner2 ? banner2 : "../../../assets/Image/img-home-banner-h-02.png"
+            banner2
+              ? banner2
+              : "../../../../assets/Image/img-home-banner-h-02.png"
           }
           hide={""}
         />
@@ -92,7 +98,9 @@ const Template = ({
           onClickBanner={onClickBanner}
           onImageLoaded={setBannerImageLoaded}
           src={
-            banner3 ? banner3 : "../../../assets/Image/img-home-banner-v-01.png"
+            banner3
+              ? banner3
+              : "../../../../assets/Image/img-home-banner-v-01.png"
           }
           hide={""}
         />
@@ -102,7 +110,9 @@ const Template = ({
           onClickBanner={onClickBanner}
           onImageLoaded={setBannerImageLoaded}
           src={
-            banner4 ? banner4 : "../../../assets/Image/img-home-banner-v-02.png"
+            banner4
+              ? banner4
+              : "../../../../assets/Image/img-home-banner-v-02.png"
           }
           hide={""}
         />

com.twin.app.shoptime/src/components/Home/HomeBanner/Template.module.less

@@ -1,54 +1,76 @@
-@import "../../style/CommonStyle.module.less";
+@import "../../../style/CommonStyle.module.less";
 
 .container {
   background-color: #f8f8f8;
   display: flex;
 }
 
-.videoPlayer {
+.homeTemplateBox {
+  margin: 24px 24px 50px;
+  display: flex;
+}
+.leftBannerBox {
+  width: 744px;
+  height: 858px;
+  margin-right: 18px;
+}
+.videoBox {
   width: 744px;
   height: 420px;
-  margin: 24px 9px 18px 24px;
-  outline: "teal dashed 1px";
-  transform: "scale(1)";
+  margin: 0 18px 18px 0;
+  .videoPlayer {
+    width: 744px;
+    height: 420px;
+    outline: "teal dashed 1px";
+    transform: "scale(1)";
+    border-radius: 12px;
+  }
 }
-
 .banner02 {
   width: 744px;
   height: 420px;
-  margin-left: 24px;
+  border-radius: 12px;
+  border: 4px solid transparent;
+  box-sizing: border-box;
   &:focus,
   &:hover,
   &:focus-within,
   &:active {
     border: 4px solid @PRIMARY_COLOR_RED;
     box-sizing: border-box;
+    .focusDropShadow();
   }
 }
 
 .banner03 {
   width: 486px;
   height: 858px;
-  margin: 24px 18px 50px;
+  border: 4px solid transparent;
+  border-radius: 12px;
+  box-sizing: border-box;
+  margin-right: 18px;
   &:focus,
   &:hover,
   &:focus-within,
   &:active {
     border: 4px solid @PRIMARY_COLOR_RED;
     box-sizing: border-box;
+    .focusDropShadow();
   }
 }
 
 .banner04 {
   width: 486px;
   height: 858px;
-  margin: 24px 24px 50px 18px;
+  border: 4px solid transparent;
+  box-sizing: border-box;
   &:focus,
   &:hover,
   &:focus-within,
   &:active {
     border: 4px solid @PRIMARY_COLOR_RED;
     box-sizing: border-box;
+    .focusDropShadow();
   }
 }
 

com.twin.app.shoptime/src/components/Home/OnSale/OnSale.jsx

@@ -6,13 +6,13 @@ import React, {
   useRef,
 } from "react";
 import classNames from "classnames";
-import { $L } from "../../utils/helperMethods";
+import { $L } from "../../../utils/helperMethods";
 import { Job } from "@enact/core/util";
 import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
 import Spotlight from "@enact/spotlight";
 import Spottable from "@enact/spotlight/Spottable";
 
-import { getOnSaleInfo } from "../../api/onSaleApi";
+import { getOnSaleInfo } from "../../../features/onSale/onSaleSlice";
 
 import css from "./OnSale.module.less";
 

com.twin.app.shoptime/src/components/Home/OnSale/OnSale.module.less

@@ -2,6 +2,7 @@
   padding: 60px 0;
   width: 100%;
   overflow-x: auto;
+  margin-left: 60px;
   .subTitle {
     border-left: 6px solid #c70850;
     padding-left: 12px;

com.twin.app.shoptime/src/components/Home/SubCategory/SubCategory.jsx

@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from "react";
+import { $L } from "../../../utils/helperMethods";
+import { Job } from "@enact/core/util";
+import Spotlight from "@enact/spotlight";
+import Spottable from "@enact/spotlight/Spottable";
+
+import css from "./SubCategory.module.less";
+
+import testimg from "../../../../assets/icon/nor/ic-category-home-nor@3x.png";
+import testimg2 from "../../../../assets/icon/nor/ic-category-gift-nor@3x.png";
+
+import { getSubCategory } from "../../../features/main/mainSlice";
+
+const SubCategory = () => {
+  const [clickData, setClickData] = useState(null);
+  const [currentSubCateIndex, setCurrentSubCateIndex] = useState(0);
+  const handleSubCategory = (index) => {
+    setCurrentSubCateIndex(index);
+    if (currentSubCateIndex == index) {
+      return;
+    }
+  };
+  useEffect(() => {}, []);
+  return (
+    <div className={css.container}>
+      <div className={css.cateList}>
+        {/* cateBox */}
+        <ul className={css.cateListBox}>
+          <li className={css.cateListItem}>
+            <div className={css.cateImg}>
+              <img src={testimg} className={css.cateImgDesign} />
+            </div>
+            <div className={css.cateName}>Kitchen & food</div>
+          </li>
+          <li className={css.cateListItem}>
+            <div className={css.cateImg}>
+              <img src={testimg2} className={css.cateImgDesign} />
+            </div>
+            <div className={css.cateName}>Kitchen & food</div>
+          </li>
+          <li className={css.cateListItem}>
+            <div className={css.cateImg}>
+              <img src={testimg} className={css.cateImgDesign} />
+            </div>
+            <div className={css.cateName}>Kitchen & food</div>
+          </li>
+          <li className={css.cateListItem}>
+            <div className={css.cateImg}>
+              <img src={testimg2} className={css.cateImgDesign} />
+            </div>
+            <div className={css.cateName}>Kitchen & food</div>
+          </li>
+          <li className={css.cateListItem}>
+            <div className={css.cateImg}>
+              <img src={testimg} className={css.cateImgDesign} />
+            </div>
+            <div className={css.cateName}>Kitchen & food</div>
+          </li>
+          <li className={css.cateListItem}>
+            <div className={css.cateImg}>
+              <img src={testimg2} className={css.cateImgDesign} />
+            </div>
+            <div className={css.cateName}>Kitchen & food</div>
+          </li>
+        </ul>
+        {/* //cateBox */}
+        {/* productBox */}
+        <ul className={css.productBox}>
+          <li className={css.productItem}>
+            <div className={css.productImg}>
+              <img src={testimg2} />
+            </div>
+            <div className={css.productNm}>
+              Productl Nameytg Product Name Producthlyg Name Producthlyg
+            </div>
+            <div className={css.accBox}>
+              <div className={css.productAcc}>
+                "$120.99"
+                <span className={css.productOriginalAcc}>"$999.99"</span>
+              </div>
+            </div>
+          </li>
+          <li className={css.productItem}>
+            <div className={css.productImg}>
+              <img src={testimg2} />
+            </div>
+            <div className={css.productNm}>
+              Productl Nameytg Product Name Producthlyg Name Producthlyg
+            </div>
+            <div className={css.accBox}>
+              <div className={css.productAcc}>
+                "$120.99"
+                <span className={css.productOriginalAcc}>"$999.99"</span>
+              </div>
+            </div>
+          </li>
+          <li className={css.productItem}>
+            <div className={css.productImg}>
+              <img src={testimg2} />
+            </div>
+            <div className={css.productNm}>
+              Productl Nameytg Product Name Producthlyg Name Producthlyg
+            </div>
+            <div className={css.accBox}>
+              <div className={css.productAcc}>
+                "$120.99"
+                <span className={css.productOriginalAcc}>"$999.99"</span>
+              </div>
+            </div>
+          </li>
+          <li className={css.productItem}>
+            <div className={css.productImg}>
+              <img src={testimg2} />
+            </div>
+            <div className={css.productNm}>
+              Productl Nameytg Product Name Producthlyg Name Producthlyg
+            </div>
+            <div className={css.accBox}>
+              <div className={css.productAcc}>
+                "$120.99"
+                <span className={css.productOriginalAcc}>"$999.99"</span>
+              </div>
+            </div>
+          </li>
+        </ul>
+        {/* //productBox */}
+      </div>
+    </div>
+  );
+};
+
+export default SubCategory;

com.twin.app.shoptime/src/components/Home/SubCategory/SubCategory.module.less

@@ -0,0 +1,97 @@
+@import "../../../style/CommonStyle.module.less";
+.cateListBox {
+  display: flex;
+  .cateListItem {
+    width: 210px;
+    height: 186px;
+    margin-right: 30px;
+    &.activeCate {
+      border-bottom: 6px solid @PRIMARY_COLOR_RED;
+    }
+    &:hover,
+    &:active,
+    &:focus,
+    &:focus-within {
+      .cateImg {
+        background-color: @PRIMARY_COLOR_RED;
+      }
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+    .cateImg {
+      width: 96px;
+      height: 96px;
+      border-radius: 48px;
+      background-color: @COLOR_GRAY08;
+      padding: 8px;
+      margin: 0 57px 18px 57px;
+      .cateImgDesign {
+        width: 80px;
+        height: 80px;
+        object-fit: contain;
+      }
+    }
+    .cateName {
+    }
+  }
+}
+.productBox {
+  padding: 20px;
+  background: #f2f2f2;
+  display: flex;
+  .productItem {
+    margin: 20px;
+    width: 324px;
+    height: 438px;
+    background-color: #fff;
+    padding: 18px;
+    .productImg {
+      position: relative;
+      > img {
+        width: 288px;
+        height: 288px;
+        object-fit: contain;
+      }
+    }
+    .productNm {
+      margin-top: 14px;
+      font-size: 24px;
+      font-weight: bold;
+      color: #333;
+      height: 60px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      line-height: 1.33;
+      letter-spacing: normal;
+    }
+    &:first-child {
+      margin-left: 60px;
+    }
+    .accBox {
+      display: flex;
+      width: 288px;
+      height: 36px;
+      margin-top: 9px;
+      .productAcc {
+        font-size: 30px;
+        font-weight: bold;
+        line-height: 0.93;
+        letter-spacing: normal;
+        color: @PRIMARY_COLOR_RED;
+      }
+      .productOriginalAcc {
+        font-size: 18px;
+        font-weight: normal;
+        font-stretch: normal;
+        font-style: normal;
+        letter-spacing: normal;
+        color: #767676;
+        margin: 10px 0 10px 5px;
+      }
+    }
+  }
+}

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

@@ -1,30 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import { $L } from "../../utils/helperMethods";
-import { Job } from "@enact/core/util";
-import Spotlight from "@enact/spotlight";
-import Spottable from "@enact/spotlight/Spottable";
-
-import css from "../SubCategory/SubCategory.module.less";
-
-import testimg from "../../../assets/icon/nor/ic-category-home-nor@3x.png";
-import testimg2 from "../../../assets/icon/nor/ic-category-home-nor@3x.png";
-
-const SubCategory = () => {
-  return (
-    <div className={css.container}>
-      <div className={css.cateList}>
-        <ul>
-          <li>
-            <div className={css.cateImg}>
-              <img src={testimg} className={css.cateImeDesign} />
-            </div>
-            <div className={css.cateName}>Kitchen & food</div>
-          </li>
-        </ul>
-      </div>
-    </div>
-  );
-};
-
-export default SubCategory;

com.twin.app.shoptime/src/features/main/mainSlice.js

@@ -0,0 +1,55 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+
+import { URLS } from "../../api/apiConfig";
+import { TAxios } from "../../api/TAxios";
+
+//서브카테고리 조회 IF-LGSP-051
+export const getSubCategory = createAsyncThunk(
+  "main/getSubCategory",
+
+  async (props, thunkAPI) => {
+    const { lgCatCd, patnrIdList, pageSize, tabType, filterType } = props;
+
+    const onSuccess = (response) => {
+      console.log("getSubCategory onSuccess ", response.data);
+
+      thunkAPI.dispatch(
+        mainSlice.actions.updateSubCategoryData(response.data.data)
+      );
+    };
+
+    const onFail = (error) => {
+      console.log("getSubCategory onFail", error);
+    };
+
+    TAxios(
+      thunkAPI.dispatch,
+      thunkAPI.getState,
+      "get",
+      URLS.GET_SUB_CATEGORY,
+      { lgCatCd, patnrIdList, pageSize, tabType, filterType },
+      {},
+      onSuccess,
+      onFail
+    );
+  }
+);
+0;
+
+const initialState = {
+  subCategoryData: {},
+};
+
+export const mainSlice = createSlice({
+  name: "mainSlice",
+  initialState,
+  reducers: {
+    updateSubCategoryData: (state, action) => {
+      state.subCategoryData = action.payload;
+    },
+  },
+});
+
+export const { updateSubCategoryData } = mainSlice.actions;
+
+export default mainSlice.reducer;

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

@@ -5,9 +5,9 @@ import { $L } from "../../utils/helperMethods";
 
 import css from "../HomePanel/HomePanel.module.less";
 
-import Template from "../../components/HomeBanner/Template";
-import OnSale from "../../components/OnSale/OnSale";
-import SubCategory from "../../components/SubCategory/SubCategory";
+import Template from "../../components/Home/HomeBanner/Template";
+import OnSale from "../../components/Home/OnSale/OnSale";
+import SubCategory from "../../components/Home/SubCategory/SubCategory";
 
 export default function HomePanel() {
   return (

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

@@ -1,3 +1,4 @@
 .panelDesign {
   overflow-y: auto;
+  background-color: #f8f8f8;
 }