diff --git a/com.twin.app.shoptime/src/components/HomeBanner/Template.jsx b/com.twin.app.shoptime/src/components/Home/HomeBanner/Template.jsx similarity index 72% rename from com.twin.app.shoptime/src/components/HomeBanner/Template.jsx rename to com.twin.app.shoptime/src/components/Home/HomeBanner/Template.jsx index 8f437be6..b26ebe7d 100644 --- a/com.twin.app.shoptime/src/components/HomeBanner/Template.jsx +++ b/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 ( - -
+ +
{/* 비디오플레이어 추후 변경 */}
@@ -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={""} /> diff --git a/com.twin.app.shoptime/src/components/HomeBanner/Template.module.less b/com.twin.app.shoptime/src/components/Home/HomeBanner/Template.module.less similarity index 66% rename from com.twin.app.shoptime/src/components/HomeBanner/Template.module.less rename to com.twin.app.shoptime/src/components/Home/HomeBanner/Template.module.less index 6cd68ef6..694620aa 100644 --- a/com.twin.app.shoptime/src/components/HomeBanner/Template.module.less +++ b/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(); } } diff --git a/com.twin.app.shoptime/src/components/OnSale/OnSale.jsx b/com.twin.app.shoptime/src/components/Home/OnSale/OnSale.jsx similarity index 96% rename from com.twin.app.shoptime/src/components/OnSale/OnSale.jsx rename to com.twin.app.shoptime/src/components/Home/OnSale/OnSale.jsx index 2b231653..4498db3b 100644 --- a/com.twin.app.shoptime/src/components/OnSale/OnSale.jsx +++ b/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"; diff --git a/com.twin.app.shoptime/src/components/OnSale/OnSale.module.less b/com.twin.app.shoptime/src/components/Home/OnSale/OnSale.module.less similarity index 99% rename from com.twin.app.shoptime/src/components/OnSale/OnSale.module.less rename to com.twin.app.shoptime/src/components/Home/OnSale/OnSale.module.less index da61f1b4..b6410bd9 100644 --- a/com.twin.app.shoptime/src/components/OnSale/OnSale.module.less +++ b/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; diff --git a/com.twin.app.shoptime/src/components/Home/SubCategory/SubCategory.jsx b/com.twin.app.shoptime/src/components/Home/SubCategory/SubCategory.jsx new file mode 100644 index 00000000..94d22937 --- /dev/null +++ b/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 ( +
+
+ {/* cateBox */} +
    +
  • +
    + +
    +
    Kitchen & food
    +
    • +
  • +
    + +
    +
    Kitchen & food
    +
    • +
  • +
    + +
    +
    Kitchen & food
    +
    • +
  • +
    + +
    +
    Kitchen & food
    +
    • +
  • +
    + +
    +
    Kitchen & food
    +
    • +
  • +
    + +
    +
    Kitchen & food
    +
    • +
+ {/* //cateBox */} + {/* productBox */} +
    +
  • +
    + +
    +
    + Productl Nameytg Product Name Producthlyg Name Producthlyg +
    +
    +
    + "$120.99" + "$999.99" +
    +
    +
    • +
  • +
    + +
    +
    + Productl Nameytg Product Name Producthlyg Name Producthlyg +
    +
    +
    + "$120.99" + "$999.99" +
    +
    +
    • +
  • +
    + +
    +
    + Productl Nameytg Product Name Producthlyg Name Producthlyg +
    +
    +
    + "$120.99" + "$999.99" +
    +
    +
    • +
  • +
    + +
    +
    + Productl Nameytg Product Name Producthlyg Name Producthlyg +
    +
    +
    + "$120.99" + "$999.99" +
    +
    +
    • +
+ {/* //productBox */} +
+
+ ); +}; + +export default SubCategory; diff --git a/com.twin.app.shoptime/src/components/Home/SubCategory/SubCategory.module.less b/com.twin.app.shoptime/src/components/Home/SubCategory/SubCategory.module.less new file mode 100644 index 00000000..52edb37b --- /dev/null +++ b/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; + } + } + } +} diff --git a/com.twin.app.shoptime/src/components/SubCategory/SubCategory.jsx b/com.twin.app.shoptime/src/components/SubCategory/SubCategory.jsx deleted file mode 100644 index 6508c638..00000000 --- a/com.twin.app.shoptime/src/components/SubCategory/SubCategory.jsx +++ /dev/null @@ -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 ( -
-
-
    -
  • -
    - -
    -
    Kitchen & food
    -
    • -
-
-
- ); -}; - -export default SubCategory; diff --git a/com.twin.app.shoptime/src/components/SubCategory/SubCategory.module.less b/com.twin.app.shoptime/src/components/SubCategory/SubCategory.module.less deleted file mode 100644 index e69de29b..00000000 diff --git a/com.twin.app.shoptime/src/features/main/mainSlice.js b/com.twin.app.shoptime/src/features/main/mainSlice.js new file mode 100644 index 00000000..5a84c064 --- /dev/null +++ b/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; diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx index 7d9ee7a8..37a6ed4a 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx +++ b/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 ( diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.module.less index bacd160e..83785f48 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.module.less @@ -1,3 +1,4 @@ .panelDesign { overflow-y: auto; + background-color: #f8f8f8; }