From 5d51b886db949b1584e6588d4c61a34db1d004c8 Mon Sep 17 00:00:00 2001 From: "younghoon100.park" Date: Wed, 24 Jan 2024 17:02:39 +0900 Subject: [PATCH] ONSALE, FEATURED BRANDS --- .../partners/ic-tab-partners-focus@3x.png | Bin 0 -> 10335 bytes .../partners/ic-tab-partners-selected@3x.png | Bin 0 -> 10360 bytes com.twin.app.shoptime/src/App/App.module.less | 72 +++++- com.twin.app.shoptime/src/api/apiConfig.js | 7 +- com.twin.app.shoptime/src/api/deviceApi.js | 12 +- .../src/api/featuredBrands.js | 96 ++++++++ .../src/components/TabLayout/TabLayout.jsx | 53 +++-- .../FeaturedBrandsPanel/Banner/Banner.jsx | 18 ++ .../Banner/Banner.module.less | 33 +++ .../FeaturedBrandsPanel/Banner/package.json | 6 + .../FeaturedBrandsPanel.jsx | 104 ++++++++- .../FeaturedBrandsPanel.module.less | 3 + .../QuickMenu/QuickMenu.jsx | 60 +++++ .../QuickMenu/QuickMenu.module.less | 67 ++++++ .../QuickMenu/package.json | 6 + .../OnSalePanel/CategoryNav/CategoryNav.jsx | 55 +++++ .../CategoryNav/CategoryNav.module.less | 214 ++++++++++++++++++ .../OnSalePanel/CategoryNav/package.json | 6 + .../src/views/OnSalePanel/OnSalePanel.jsx | 84 ++++++- .../views/OnSalePanel/OnSalePanel.module.less | 10 + .../OnSaleProductCard/OnSaleProductCard.jsx | 35 +++ .../OnSaleProductCard.module.less | 84 +++++++ .../OnSaleProductCard/package.json | 6 + .../OnSaleProductsGrid/OnSaleProductsGrid.jsx | 19 ++ .../OnSaleProductsGrid.module.less | 20 ++ .../OnSaleProductsGrid/package.json | 6 + 26 files changed, 1047 insertions(+), 29 deletions(-) create mode 100644 com.twin.app.shoptime/assets/images/partners/ic-tab-partners-focus@3x.png create mode 100644 com.twin.app.shoptime/assets/images/partners/ic-tab-partners-selected@3x.png create mode 100644 com.twin.app.shoptime/src/api/featuredBrands.js create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.jsx create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.module.less create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/package.json create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.jsx create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.module.less create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/package.json create mode 100644 com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.jsx create mode 100644 com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.module.less create mode 100644 com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/package.json create mode 100644 com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/OnSaleProductCard.jsx create mode 100644 com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/OnSaleProductCard.module.less create mode 100644 com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/package.json create mode 100644 com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.jsx create mode 100644 com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.module.less create mode 100644 com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/package.json diff --git a/com.twin.app.shoptime/assets/images/partners/ic-tab-partners-focus@3x.png b/com.twin.app.shoptime/assets/images/partners/ic-tab-partners-focus@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..5243a60ff506b657626c3acef8eadd328ecdf120 GIT binary patch literal 10335 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 literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/src/App/App.module.less b/com.twin.app.shoptime/src/App/App.module.less index f9db12c8..5c06eac1 100644 --- a/com.twin.app.shoptime/src/App/App.module.less +++ b/com.twin.app.shoptime/src/App/App.module.less @@ -1,3 +1,71 @@ -.app { - /* styles can be put here */ +/* Reset */ +* { + box-sizing: border-box; + color: #1a1a1a; +} +body, +div, +h1, +h2, +h3, +h4, +h5, +h6, +table, +th, +td, +ul, +ol, +li, +dl, +dt, +dd, +p, +form, +input, +fieldset { + padding: 0; + margin: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: 100%; + font-weight: normal; +} +ol, +ul, +li { + list-style: none; +} +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +header { + margin: 0; + padding: 0; + border: 0; + display: block; +} + +img { + vertical-align: top; +} + +button { + background: none; + border: 0; + padding: 0; } diff --git a/com.twin.app.shoptime/src/api/apiConfig.js b/com.twin.app.shoptime/src/api/apiConfig.js index e335edf2..ffdcdc6d 100644 --- a/com.twin.app.shoptime/src/api/apiConfig.js +++ b/com.twin.app.shoptime/src/api/apiConfig.js @@ -12,7 +12,12 @@ export const URLS = { //home controller GET_HOME_TERMS: "/lgsp/v1/home/terms.lge", - GET_HOME_MENU: "/lgsp/v1/home/menu.lge", + + //brand-controller + GET_BRAND_LIST: "/lgsp/v1/brand/info.lge", + GET_BRAND_LAYOUT_INFO: "/lgsp/v1/brand/shelf.lge", + GET_BRAND_LIVE_CHANNEL_INFO: "/lgsp/v1/brand/live.lge", + GET_BRAND_TODAYS_DEALS: "/lgsp/v1/brand/tsv.lge", //on-sale controller GET_ON_SALE_INFO: "/lgsp/v1/onsale/onsale.lge", diff --git a/com.twin.app.shoptime/src/api/deviceApi.js b/com.twin.app.shoptime/src/api/deviceApi.js index 9aab3046..64aa4016 100644 --- a/com.twin.app.shoptime/src/api/deviceApi.js +++ b/com.twin.app.shoptime/src/api/deviceApi.js @@ -8,8 +8,16 @@ export async function getAuthenticationCode() { return response.data; } catch (error) { - console.error("Error : ", error); - throw error; + const { response } = error; + + if (response) { + const statusCode = response.status; + const statusText = response.statusText; + + console.error(`${statusCode} Error, ${statusText}`); + } + + throw new Error(error); } } diff --git a/com.twin.app.shoptime/src/api/featuredBrands.js b/com.twin.app.shoptime/src/api/featuredBrands.js new file mode 100644 index 00000000..dfe8ccf7 --- /dev/null +++ b/com.twin.app.shoptime/src/api/featuredBrands.js @@ -0,0 +1,96 @@ +import { URLS } from "./apiConfig"; +import api from "./axiosConfig"; + +// Featured Brands 정보 조회 IF-LGSP-304 +export async function getBrandList() { + try { + const response = await api.get(URLS.GET_BRAND_LIST); + return response.data.data; + } catch (error) { + const { response } = error; + + if (response) { + const statusCode = response.status; + const statusText = response.statusText; + + console.error(`${statusCode} Error, ${statusText}`); + } + + // throw new Error(error); + } +} + +// Featured Brands LAYOUT (shelf) 정보 조회 IF-LGSP-305 +export async function getBrandLayoutInfo(props) { + const { patnrId } = props; + try { + const response = await api.get(URLS.GET_BRAND_LAYOUT_INFO, { + params: { + patnrId, + }, + }); + + return response.data.data; + } catch (error) { + const { response } = error; + + if (response) { + const statusCode = response.status; + const statusText = response.statusText; + + console.error(`${statusCode} Error, ${statusText}`); + } + + // throw new Error(error); + } +} + +// Featured Brands Live 채널 정보 조회 IF-LGSP-306 +export async function getBrandLiveChannelInfo(props) { + const { patnrId } = props; + try { + const response = await api.get(URLS.GET_BRAND_LIVE_CHANNEL_INFO, { + params: { + patnrId, + }, + }); + + return response.data.data; + } catch (error) { + const { response } = error; + + if (response) { + const statusCode = response.status; + const statusText = response.statusText; + + console.error(`${statusCode} Error, ${statusText}`); + } + + // throw new Error(error); + } +} + +// Featured Brands Today's deals 정보 조회 IF-LGSP-307 +export async function getBrandTSVInfo(props) { + const { patnrId } = props; + try { + const response = await api.get(URLS.GET_BRAND_TODAYS_DEALS, { + params: { + patnrId, + }, + }); + + return response.data.data; + } catch (error) { + const { response } = error; + + if (response) { + const statusCode = response.status; + const statusText = response.statusText; + + console.error(`${statusCode} Error, ${statusText}`); + } + + // throw new Error(error); + } +} diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx index 14c428e4..78dc203f 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx +++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx @@ -1,33 +1,41 @@ -import Spotlight from "@enact/spotlight"; -import classNames from "classnames"; import React, { useCallback, useEffect, useMemo, useRef, useState, -} from "react"; -import { useDispatch, useSelector } from "react-redux"; -import TabItem from "./TabItem"; -import css from "./TabLayout.module.less"; -//enact -import Skinnable from "@enact/sandstone/Skinnable"; -import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; -import { Cancelable } from "@enact/ui/Cancelable"; +} from 'react'; + +import classNames from 'classnames'; +import { + useDispatch, + useSelector, +} from 'react-redux'; + //아이콘 -import { Job } from "@enact/core/util"; -import CartIcon from "./iconComponents/CartIcon"; -import CategoryIcon from "./iconComponents/CategoryIcon"; -import FeaturedBrandIcon from "./iconComponents/FeaturedBrandIcon"; -import HomeIcon from "./iconComponents/HomeIcon"; -import HotPicksIcon from "./iconComponents/HotPicksIcon"; -import MyPageIcon from "./iconComponents/MyPageIcon"; -import OnSaleIcon from "./iconComponents/OnSaleIcon"; -import SearchIcon from "./iconComponents/SearchIcon"; -import TrendingNowIcon from "./iconComponents/TrendingNowIcon"; +import { Job } from '@enact/core/util'; +//enact +import Skinnable from '@enact/sandstone/Skinnable'; +import Spotlight from '@enact/spotlight'; +import SpotlightContainerDecorator + from '@enact/spotlight/SpotlightContainerDecorator'; +import { Cancelable } from '@enact/ui/Cancelable'; + //이미지 -import shoptimeFullIcon from "../../../assets/icons/ic-lnb-logo-shoptime@3x.png"; -import shopTimeIcon from "../../../assets/icons/ic-lnb-shoptime-symbol@3x.png"; +import shoptimeFullIcon + from '../../../assets/icons/ic-lnb-logo-shoptime@3x.png'; +import shopTimeIcon from '../../../assets/icons/ic-lnb-shoptime-symbol@3x.png'; +import CartIcon from './iconComponents/CartIcon'; +import CategoryIcon from './iconComponents/CategoryIcon'; +import FeaturedBrandIcon from './iconComponents/FeaturedBrandIcon'; +import HomeIcon from './iconComponents/HomeIcon'; +import HotPicksIcon from './iconComponents/HotPicksIcon'; +import MyPageIcon from './iconComponents/MyPageIcon'; +import OnSaleIcon from './iconComponents/OnSaleIcon'; +import SearchIcon from './iconComponents/SearchIcon'; +import TrendingNowIcon from './iconComponents/TrendingNowIcon'; +import TabItem from './TabItem'; +import css from './TabLayout.module.less'; const Container = SpotlightContainerDecorator( { enterTo: "default-element" }, @@ -270,6 +278,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { const handleNavigation = useCallback( ({ index, target }) => { + console.log(index, target); setMainSelectedIndex(index); if (target) { // dispatch(resetPanels(target)); diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.jsx new file mode 100644 index 00000000..fee41aa9 --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.jsx @@ -0,0 +1,18 @@ +import React from "react"; + +import css from "./Banner.module.less"; + +export default function Banner({ selectedBrandInfo, topImgInfo }) { + const { logoImgAlt, logoImgPath, patncNm } = selectedBrandInfo; + const { topImgAlt, topImgNm, topImgPath } = topImgInfo; + + return ( +
+
+ {`${logoImgAlt} +

{patncNm}

+
+ {topImgAlt} +
+ ); +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.module.less new file mode 100644 index 00000000..154cf0e2 --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.module.less @@ -0,0 +1,33 @@ +@import "../../../style/CommonStyle.module.less"; +@import "../../../style/utils.module.less"; + +.container { + position: relative; + .flex(@justifyCenter: flex-start, @alignCenter: flex-end); + .size(@w: 100%, @h: 108px); + + div { + .flex(); + gap: 12px; + + // @@ Todo, padding-left 전체적으로 적용유무 수정 + padding-left: 60px; + + h2 { + color: #fff; + font-family: @baseFontBold; + font-size: 36px; + } + img { + .size(@w: 60px, @h: 60px); + } + } + + > img { + .position(@position: absolute); + width: 100%; + height: 438px; + object-fit: cover; + z-index: -1; + } +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/package.json b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/package.json new file mode 100644 index 00000000..4780a2cd --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/package.json @@ -0,0 +1,6 @@ +{ + "main": "Banner.jsx", + "styles": [ + "Banner.module.less" + ] +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx index da72921e..b8d7bb96 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx @@ -1,5 +1,107 @@ +import React, { useEffect, useState } from "react"; + +import { + getBrandLayoutInfo, + getBrandList, + getBrandLiveChannelInfo, +} from "../../api/featuredBrands"; import TPanel from "../../components/TPanel/TPanel"; +import Banner from "./Banner/Banner"; +import css from "./FeaturedBrandsPanel.module.less"; +import QuickMenu from "./QuickMenu/QuickMenu"; + +/* + +key, value and dataType of BrandList + +expsOrd: 1 / number +logoImgAlt: "qvc" / string +logoImgNm: "us_qvc.png" / string +logoImgPath: "http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/us_qvc.png" / string +newFlag: "N" / string +patncLogoPath: "http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png" / string +patncNm: "QVC" / string +patnrId: "1" / string + +*/ export default function FeaturedBrandsPanel() { - return Featured Brands; + // @@ Todo, provided by GNB as props or global state + const [brandList, setBrandList] = useState([]); + + // @@ Todo, provided by GNB as props or global state + const [selectedBrandId, setSelectedBrandId] = useState("1"); + + const [selectedBrandInfo, setSelectedBrandInfo] = useState({}); + const [topImgInfo, setTopImgInfo] = useState({}); + + const handleQuickMenu = (patnrId) => { + const brandInfo = brandList.find((brand) => brand.patnrId === patnrId); + setSelectedBrandInfo(brandInfo); + setSelectedBrandId(patnrId); + }; + + const fetchBrandList = async () => { + try { + const data = await getBrandList(); + console.log("Brand List:", data); + if (data) { + setBrandList(data.brandList); + setSelectedBrandInfo(() => + data.brandList.find(({ patnrId }) => patnrId === selectedBrandId) + ); + } + } catch (error) { + console.error("Error fetching Brand List:", error); + } + }; + + const fetchBrandLayoutInfo = async (patnrId) => { + try { + const data = await getBrandLayoutInfo({ patnrId }); + console.log("Brand Layout Info:", data); + if (data) { + setTopImgInfo(data.topImgInfo); + } + } catch (error) { + console.error("Error fetching Brand Layout Info:", error); + } + }; + + const fetchBrandLiveChannelInfo = async (patnrId) => { + try { + const data = await getBrandLiveChannelInfo({ patnrId }); + console.log("Brand Live Channel Info:", data); + if (data) { + } + } catch (error) { + console.error("Error fetching Brand Live Channel Info:", error); + } + }; + + useEffect(() => { + // @@ Todo, provided by GNB as props or global state + setSelectedBrandId("1"); + fetchBrandList(); + }, []); + + useEffect(() => { + fetchBrandLayoutInfo(selectedBrandId); + fetchBrandLiveChannelInfo(selectedBrandId); + }, [selectedBrandId]); + + return ( + /* scenario page 98 */ + + {brandList && brandList.length > 1 && ( + + )} + + + + ); } diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less index e69de29b..a7b63b33 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less @@ -0,0 +1,3 @@ +.container { + margin-left: 120px; +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.jsx new file mode 100644 index 00000000..e7ef4c99 --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.jsx @@ -0,0 +1,60 @@ +import React, { useEffect } from 'react'; + +import Spotlight from '@enact/spotlight'; +import SpotlightContainerDecorator + from '@enact/spotlight/SpotlightContainerDecorator'; +import Spottable from '@enact/spotlight/Spottable'; + +import { $L } from '../../../utils/helperMethods'; +import css from './QuickMenu.module.less'; + +const Container = SpotlightContainerDecorator( + { leaveFor: { right: "" }, enterTo: "last-focused" }, + "nav" +); + +const SpottableComponent = Spottable("li"); + +export default function QuickMenu({ + brandList, + selectedBrandId, + onQuickMenuClick, + ...rest +}) { + const handleClick = (patnrId) => { + if (selectedBrandId === patnrId) { + return; + } + + onQuickMenuClick(patnrId); + }; + + useEffect(() => { + const element = document.getElementById(selectedBrandId); + Spotlight.focus(element); + }, []); + + return ( + +
    + {brandList && + brandList.map(({ logoImgAlt, logoImgPath, newFlag, patnrId }) => { + return ( + handleClick(patnrId)} + > + {newFlag === "Y" && ( + {$L("NEW")} + )} + + {logoImgAlt} + + ); + })} +
+ + ); +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.module.less new file mode 100644 index 00000000..08ddf19e --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.module.less @@ -0,0 +1,67 @@ +@import "../../../style/CommonStyle.module.less"; +@import "../../../style/utils.module.less"; + +.container { + .flex(@justifyCenter:flex start); + .size(@w: 100%, @h: 180px); + padding: 30px 60px; + background-color: #e7e7e7; + + ul { + .flex(@justifyCenter: flex-start); + gap: 18px; + + /* normal */ + li { + position: relative; + + .newBagde { + .position(@position: absolute, @top: 0, @right: 0, @bottom: auto, @left: auto); + z-index: 10; + .size(@w: 60px, @h: 30px); + background-color: #f00; + color: #fff; + border-radius: 6px; + font-family: Arial; + font-weight: 600; + font-size: 18px; + text-align: center; + } + + .outline { + .position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0); + .size(@w: 138px, @h:138px); + background-position: center; + background-size: cover; + } + + img { + .size(@w: 120px, @h: 120px); + } + + /* focused */ + &:focus { + border-radius: 60px; + .focusDropShadow(); + + .outline { + background-image: url("../../../../assets/images/partners/ic-tab-partners-focus@3x.png"); + } + + img { + .size(@w: 138px, @h: 138px); + } + } + + /* selected */ + &.selected { + img { + .size(@w: 138px, @h: 138px); + } + .outline { + background-image: url("../../../../assets/images/partners/ic-tab-partners-selected@3x.png"); + } + } + } + } +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/package.json b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/package.json new file mode 100644 index 00000000..125fb9f7 --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/package.json @@ -0,0 +1,6 @@ +{ + "main": "QuickMenu.jsx", + "styles": [ + "QuickMenu.module.less" + ] +} diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.jsx new file mode 100644 index 00000000..84316bdb --- /dev/null +++ b/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.jsx @@ -0,0 +1,55 @@ +import React from "react"; + +import classNames from "classnames"; + +import Scroller from "@enact/sandstone/Scroller"; +import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; +import Spottable from "@enact/spotlight/Spottable"; + +import css from "./CategoryNav.module.less"; + +const Container = SpotlightContainerDecorator( + { leaveFor: { right: "" }, enterTo: "last-focused" }, + "nav" +); + +const SpottableComponent = Spottable("li"); + +export default function CategoryNav({ + categoryInfos, + currentLgCatCdIndex, + onCategoryNavClick, + ...rest +}) { + return ( + + +
    + {categoryInfos && + categoryInfos.map(({ lgCatNm, lgCatCd }, index) => { + return ( + onCategoryNavClick(lgCatCd, index)} + > +
    + +
    + {lgCatNm} +     + ); + })} +
+ + + ); +} diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.module.less b/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.module.less new file mode 100644 index 00000000..31b3130b --- /dev/null +++ b/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.module.less @@ -0,0 +1,214 @@ +@import "../../../style/CommonStyle.module.less"; +@import "../../../style/utils.module.less"; + +.container { + position: fixed; + top: 0; + left: 120px; + + // @@ Todo, z-index 관련 추후 수정 염두 + z-index: 10; + width: calc(100% - 120px); + background-color: @BG_COLOR_01; + font-family: @baseFontBold; + font-size: 28px; + // @@ font 관련 업데이트 후 수정 + // .font(@fontFamily: @baseFontBold, @fontSize: 28px); + + ul { + display: flex; + gap: 30px; + margin-top: 50px; + } + + .category { + /* normal */ + position: relative; + .flex(@direction: column); + min-width: 210px; + color: #1a1a1a; + text-align: center; + + div { + .flex(); + .size(@w: 94px, @h: 94px); + margin-bottom: 18px; + border-radius: 48px; + background-color: #1a1a1a; + border: 2px solid #1a1a1a; + + span { + .size(@w: 80px, @h:80px); + background-position: center; + background-size: cover; + + &.category-icon-1017 { + // LG Electronics + background-image: url("../../../../assets/category/ic-category-lgelectronics-nor@3x.png"); + } + + // Garden and Outdoors + &.category-icon-1008 { + background-image: url("../../../../assets/category/ic-category-garden-nor@3x.png"); + } + + // Fashion + &.category-icon-1000 { + background-image: url("../../../../assets/category/ic-category-fashion-nor@3x.png"); + } + + // Beauty + &.category-icon-1003 { + background-image: url("../../../../assets/category/ic-category-beauty-nor@3x.png"); + } + + // Jewelry + &.category-icon-1004 { + background-image: url("../../../../assets/category/ic-category-jewelry-nor@3x.png"); + } + + // Home + &.category-icon-1006 { + background-image: url("../../../../assets/category/ic-category-home-nor@3x.png"); + } + + // Kitchen & Food + &.category-icon-1007 { + background-image: url("../../../../assets/category/ic-category-kitchen-nor@3x.png"); + } + + // Accessories + &.category-icon-1014 { + background-image: url("../../../../assets/category/ic-category-accessories-nor@3x.png"); + } + + // Heaclth & Fitness + &.category-icon-1009 { + background-image: url("../../../../assets/category/ic-category-health-nor@3x.png"); + } + + // Crafts & Sewing + &.category-icon-1011 { + background-image: url("../../../../assets/category/ic-category-cw-nor@3x.png"); + } + + // Electronics + &.category-icon-1010 { + background-image: url("../../../../assets/category/ic-category-electronics-nor@3x.png"); + } + + // Clearance + &.category-icon-1013 { + background-image: url("../../../../assets/category/ic-category-clearance-nor@3x.png"); + } + } + } + + strong { + height: 60px; + margin-bottom: 12px; + } + + &::after { + content: ""; + position: absolute; + bottom: 0; + display: block; + .size(@w: 100%, @h:6px); + background-color: transparent; + } + + /* focused */ + &:focus { + // color: #c70850; + + div { + background-color: #fff; + border: solid 2px #c70850; + box-shadow: 0 0 25px 0 rgba(2, 3, 3, 0.8); + + span { + // LG Electronics + &.category-icon-1017 { + background-image: url("../../../../assets/category/ic-category-lgelectronics-foc@3x.png"); + } + + // Garden and Outdoors + &.category-icon-1008 { + background-image: url("../../../../assets/category/ic-category-garden-foc@3x.png"); + } + + // Fashion + &.category-icon-1000 { + background-image: url("../../../../assets/category/ic-category-fashion-foc@3x.png"); + } + + // Beauty + &.category-icon-1003 { + background-image: url("../../../../assets/category/ic-category-beauty-foc@3x.png"); + } + + // Jewelry + &.category-icon-1004 { + background-image: url("../../../../assets/category/ic-category-jewelry-foc@3x.png"); + } + + // Home + &.category-icon-1006 { + background-image: url("../../../../assets/category/ic-category-home-foc@3x.png"); + } + + // Kitchen & Food + &.category-icon-1007 { + background-image: url("../../../../assets/category/ic-category-kitchen-foc@3x.png"); + } + + // Accessories + &.category-icon-1014 { + background-image: url("../../../../assets/category/ic-category-accessories-foc@3x.png"); + } + + // Heaclth & Fitness + &.category-icon-1009 { + background-image: url("../../../../assets/category/ic-category-health-foc@3x.png"); + } + + // Crafts & Sewing + &.category-icon-1011 { + background-image: url("../../../../assets/category/ic-category-cw-foc@3x.png"); + } + + // Electronics + &.category-icon-1010 { + background-image: url("../../../../assets/category/ic-category-electronics-foc@3x.png"); + } + + // Clearance + &.category-icon-1013 { + background-image: url("../../../../assets/category/ic-category-clearance-foc@3x.png"); + } + } + } + + strong { + color: #c70850; + } + + &::after { + background-color: #c70850; + } + } + } + + /* selected */ + .selected { + div { + background-color: #c70850; + border: solid 2px #c70850; + } + + strong { + color: #c70850; + } + } +} diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/package.json b/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/package.json new file mode 100644 index 00000000..cc1575e5 --- /dev/null +++ b/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/package.json @@ -0,0 +1,6 @@ +{ + "main": "CategoryNav.jsx", + "styles": [ + "CategoryNav.module.less" + ] +} diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx index 0bf9ca3f..702e7a51 100644 --- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx +++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx @@ -1,5 +1,87 @@ +import React, { useEffect, useState } from "react"; + +import { useDispatch } from "react-redux"; + +import { getOnSaleInfo } from "../../api/onSaleApi"; import TPanel from "../../components/TPanel/TPanel"; +import CategoryNav from "./CategoryNav/CategoryNav"; +import css from "./OnSalePanel.module.less"; +import OnSaleProductCard from "./OnSaleProductCard/OnSaleProductCard"; +import OnSaleProductsGrid from "./OnSaleProductsGrid/OnSaleProductsGrid"; export default function OnSalePanel() { - return OnSale; + const dispatch = useDispatch(); + + const [currentLgCatCdIndex, setCurrentLgCatCdIndex] = useState(0); + const [lgCatCd, setLgCatCd] = useState(""); + const [categoryInfos, setCategoryInfos] = useState([]); + const [saleInfos, setSaleInfos] = useState([]); + const [saleProductInfos, setSaleProductInfos] = useState([]); + + const handleCategoryNav = (lgCatCd, index) => { + if (currentLgCatCdIndex === index) { + return; + } + setCurrentLgCatCdIndex(index); + setLgCatCd(lgCatCd); + }; + + const getOnSaleInfoData = async (lgCatCd) => { + try { + const onSaleInfoData = await getOnSaleInfo({ + lgCatCd, + categoryIncFlag: "Y", + }); + console.log("On Sale Data:", onSaleInfoData); + + if (onSaleInfoData) { + if (lgCatCd === "") { + setCategoryInfos(onSaleInfoData.categoryInfos); + } + + setSaleInfos(onSaleInfoData.saleInfos); + + let saleProducts = []; + + for (let index = 0; index < onSaleInfoData.saleInfos.length; index++) { + saleProducts.push(onSaleInfoData.saleInfos[index].saleProductInfos); + } + + setSaleProductInfos(saleProducts); + } + } catch (error) { + console.error("Error fetching on sale:", error); + } + }; + + useEffect(() => { + getOnSaleInfoData(lgCatCd); + }, [lgCatCd, currentLgCatCdIndex]); + + return ( + + + +
+ {saleInfos.map(({ saleNm }, index) => { + return ( + + {saleProductInfos[index].map((saleProduct) => { + return ( + + ); + })} + + ); + })} +
+ + ); } diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.module.less b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.module.less index e69de29b..2f20d531 100644 --- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.module.less +++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.module.less @@ -0,0 +1,10 @@ +@import "../../style/CommonStyle.module.less"; +@import "../../style/utils.module.less"; + +.container { + font-family: @baseFont; + + .onSaleProducts { + margin-top: 236px; + } +} diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/OnSaleProductCard.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/OnSaleProductCard.jsx new file mode 100644 index 00000000..80700f57 --- /dev/null +++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/OnSaleProductCard.jsx @@ -0,0 +1,35 @@ +import React from "react"; + +import Spottable from "@enact/spotlight/Spottable"; + +import css from "./OnSaleProductCard.module.less"; + +const SpottableComponent = Spottable("li"); + +export default function OnSaleProductCard({ saleProduct, ...rest }) { + const { imgUrl, prdtId, prdtNm, priceInfo } = saleProduct; + + const originalPrice = priceInfo.split("|")[0]; + const salePrice = priceInfo.split("|")[1]; + const salePercentage = priceInfo.split("|").reverse()[0]; + + return ( + +
+ {prdtNm} + {salePercentage && {salePercentage}} +
+
+

{prdtNm}

+

+ {salePrice} + {originalPrice} +

+
+ + ); +} diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/OnSaleProductCard.module.less b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/OnSaleProductCard.module.less new file mode 100644 index 00000000..b3df69ae --- /dev/null +++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/OnSaleProductCard.module.less @@ -0,0 +1,84 @@ +@import "../../../style/CommonStyle.module.less"; +@import "../../../style/utils.module.less"; + +.container { + position: relative; + .flex(@direction: column); + .size(@w: 260px, @h: 375px); + margin: 0 10px; + border-radius: 10px; + background-color: #e3e7ee; + + div:nth-child(1) { + position: relative; + .size(@w: 260px, @h: 260px); + + img { + .size(@w: 260px, @h: 260px); + object-fit: cover; + border-top-right-radius: 10px; + border-top-left-radius: 10px; + } + + > span { + .position(@position: absolute, @top: auto, @right: auto, @bottom: 12px, @left: 12px); + .size(@w: 44px, @h: 44px); + border-radius: 44px; + background-color: #c70850; + color: #fff; + font-family: @baseFontBold; + font-size: 20px; + line-height: 44px; + text-align: center; + } + } + + div:nth-child(2) { + .flex(@direction: column, @alignCenter: flex-start); + gap: 10px; + padding: 10px 15px; + + h3 { + display: -webkit-box; + font-family: @baseFontBold; + font-size: 24px; + line-height: 26px; + text-overflow: ellipsis; + word-break: break-all; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } + p { + color: #c70850; + font-family: @baseFontBold; + font-size: 24px; + + span { + margin-left: 5px; + color: #767676; + font-size: 18px; + text-decoration: line-through; + } + } + } + + &::after { + content: ""; + .position(@position: absolute, @top: -12px, @right: auto, @bottom: auto, @left: -12px); + display: block; + .size(@w: 276px, @h: 390px); + border: 4px solid transparent; + border-radius: 10px; + } + + &:focus { + background-color: #fcfcfc; + + &::after { + border: 4px solid #c70850; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0), + 0px 9px 15px 0 rgba(0, 0, 0, 0.3); + } + } +} diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/package.json b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/package.json new file mode 100644 index 00000000..a8606fc6 --- /dev/null +++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/package.json @@ -0,0 +1,6 @@ +{ + "main": "OnSaleProductCard.jsx", + "styles": [ + "OnSaleProductCard.module.less" + ] +} diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.jsx new file mode 100644 index 00000000..a649bf6e --- /dev/null +++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.jsx @@ -0,0 +1,19 @@ +import React from "react"; + +import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; + +import css from "./OnSaleProductsGrid.module.less"; + +const Container = SpotlightContainerDecorator( + { leaveFor: { left: "", right: "" }, enterTo: "last-focused" }, + "li" +); + +export default function OnSaleProductsGrid({ saleNm, children }) { + return ( + +

{saleNm}

+
    {children}
+ + ); +} diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.module.less b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.module.less new file mode 100644 index 00000000..90282200 --- /dev/null +++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.module.less @@ -0,0 +1,20 @@ +@import "../../../style/CommonStyle.module.less"; +@import "../../../style/utils.module.less"; + +.container { + .flex(@direction:column, @alignCenter:flex-start); + gap: 40px; + width: 100%; + padding: 40px 0 20px 0; + + h2 { + margin-left: 60px; + font-family: @baseFontBold; + font-size: 38px; + } + + ul { + .flex(); + margin-left: 50px; + } +} diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/package.json b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/package.json new file mode 100644 index 00000000..1aba1243 --- /dev/null +++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/package.json @@ -0,0 +1,6 @@ +{ + "main": "OnSaleProductsGrid.jsx", + "styles": [ + "OnSaleProductsGrid.module.less" + ] +}