From 1ae19abbea9a26ae6188095f8007c1cd66f92ba9 Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Tue, 16 Sep 2025 13:33:29 +0900 Subject: [PATCH] =?UTF-8?q?[JustForYou]=20=EC=A0=80=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=ED=8F=AC=EC=9C=A0=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20=091.=20Conf?= =?UTF-8?q?ig=20=ED=8C=8C=EC=9D=BC=EC=97=90=20=EC=A0=80=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=ED=8F=AC=EC=9C=A0=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80.=20=092.=20THeaderCustom=EB=B6=80=EB=B6=84=EC=97=90?= =?UTF-8?q?=20kind=20=EC=B6=94=EA=B0=80=ED=95=98=EC=97=AC=20=EC=97=86?= =?UTF-8?q?=EC=9D=84=EA=B2=BD=EC=9A=B0=20=EB=A1=9C=EA=B3=A0=20=EB=82=98?= =?UTF-8?q?=EC=98=A4=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D=20=EC=B2=98?= =?UTF-8?q?=EB=A6=AC.=20=093.=20=EC=A0=80=EC=8A=A4=ED=8A=B8=20=ED=8F=AC?= =?UTF-8?q?=EC=9C=A0=EB=B0=B0=EB=84=88=EC=97=90=EC=84=9C=20=EB=A7=81?= =?UTF-8?q?=ED=81=AC=20=ED=85=8C=EC=8A=A4=ED=8A=B8=EB=A1=9C=20=EA=B0=88?= =?UTF-8?q?=EC=88=98=EC=9E=88=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD.=20?= =?UTF-8?q?=094.=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80.=20Jsx,less=ED=8C=8C=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Etc) 서브카테고리에 들어있는 console 제거. --- com.twin.app.shoptime/src/utils/Config.js | 1 + .../DetailPanel/components/THeaderCustom.jsx | 46 ++-- .../views/HomePanel/HomeBanner/HomeBanner.jsx | 12 +- .../RandomBannerType/JustForYouBanner.jsx | 2 +- .../HomePanel/SubCategory/SubCategory.jsx | 2 +- .../JustForYouTestPanel.jsx | 258 ++++++++++++++++++ .../JustForYouTestPanel.module.less | 86 ++++++ .../src/views/MainView/MainView.jsx | 2 + 8 files changed, 387 insertions(+), 22 deletions(-) create mode 100644 com.twin.app.shoptime/src/views/JustForYouTestPanel/JustForYouTestPanel.jsx create mode 100644 com.twin.app.shoptime/src/views/JustForYouTestPanel/JustForYouTestPanel.module.less diff --git a/com.twin.app.shoptime/src/utils/Config.js b/com.twin.app.shoptime/src/utils/Config.js index 21e8a2d2..a97d4911 100644 --- a/com.twin.app.shoptime/src/utils/Config.js +++ b/com.twin.app.shoptime/src/utils/Config.js @@ -32,6 +32,7 @@ export const panel_names = { SERVICE_UNAVAILABLE: "servicepanel", OPTIONAL_TERMS_PANEL: "optionaltermspanel", // 선택약관 Intro Panel JUST_FOR_YOU_PANEL: "justforyoupanel", //justforyou + JUST_FOR_YOU_TEST_PANEL: "justforyoutestpanel", //justforyoutest // error ERROR_PANEL: "errorpanel", diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx index 0054fb20..7909c871 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx @@ -1,15 +1,20 @@ -import React, { useCallback, useMemo } from "react"; +import React, { + useCallback, + useMemo, +} from 'react'; -import classNames from "classnames"; +import classNames from 'classnames'; -import { Marquee } from "@enact/sandstone/Marquee"; -import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; -import Spottable from "@enact/spotlight/Spottable"; +import { Marquee } from '@enact/sandstone/Marquee'; +import SpotlightContainerDecorator + from '@enact/spotlight/SpotlightContainerDecorator'; +import Spottable from '@enact/spotlight/Spottable'; -import { $L } from "../../../utils/helperMethods"; -import defaultLogoImg from "../../../../assets/images/ic-tab-partners-default@3x.png"; -import qvcLogoImg from "../../../../assets/images/icons/ic-partners-qvc@3x.png"; -import css from "./THeaderCustom.module.less"; +import defaultLogoImg + from '../../../../assets/images/ic-tab-partners-default@3x.png'; +import qvcLogoImg from '../../../../assets/images/icons/ic-partners-qvc@3x.png'; +import { $L } from '../../../utils/helperMethods'; +import css from './THeaderCustom.module.less'; const Container = SpotlightContainerDecorator( { enterTo: "last-focused" }, @@ -27,14 +32,15 @@ export default function THeaderCustom({ onClick, ariaLabel, children, + kind, ...rest }) { const convertedTitle = useMemo(() => { - if (title && typeof title === 'string') { + if (title && typeof title === "string") { const cleanedTitle = title.replace(/(\r\n|\n)/g, ""); return $L(marqueeDisabled ? title : cleanedTitle); } - return ''; + return ""; }, [marqueeDisabled, title]); const _onClick = useCallback( @@ -71,12 +77,16 @@ export default function THeaderCustom({ role="button" /> )} -
+ {kind ? ( + "" + ) : ( +
+ )} ); -} \ No newline at end of file +} diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx index 87fd1e35..4b0c04ec 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx @@ -191,7 +191,9 @@ export default function HomeBanner({ const termsLoading = useSelector((state) => state.common.termsLoading); const isGnbOpened = useSelector((state) => state.common.isGnbOpened); // 선택약관 동의여부 - const introTermsAgree = useSelector((state) => state.common.introTermsAgree); + const introTermsAgree = useSelector( + (state) => state.common.termsFlag.optionalTerms + ); // 새로운 Redux 상태: 선택약관 팝업 플로우 관리 const optionalTermsPopupFlow = useSelector( @@ -314,11 +316,13 @@ export default function HomeBanner({ dispatch(updateOptionalTermsAgreement(true)); // 로컬 상태도 업데이트 (기존 로직 유지) setOptionalTermsAgreed(true); + console.log("###test pjh ___ 2"); } else { if (process.env.NODE_ENV === "development") { console.error("[HomeBanner] 약관 동의 실패:", response); } } + console.log("###test pjh ___ 1", introTermsAgree); }; if (process.env.NODE_ENV === "development") { @@ -651,6 +655,10 @@ export default function HomeBanner({ [_handleShelfFocus] ); + useEffect(() => { + console.log("####introTermsAgree", introTermsAgree); + }, [introTermsAgree]); + const renderLayout = useCallback(() => { switch (selectTemplate) { case "DSP00201": { @@ -662,7 +670,7 @@ export default function HomeBanner({ {renderItem(2, false)} {/* //NOTE - 약관 동의 여부 & 추후 API 따라 팝업 표시 여부 결정 */} - {introTermsAgree ? ( + {introTermsAgree === "Y" ? (
{ dispatch( pushPanel({ - name: panel_names.JUST_FOR_YOU_PANEL, + name: panel_names.JUST_FOR_YOU_TEST_PANEL, }) ); }, []); diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx index d498de53..7f7350fe 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx @@ -218,7 +218,7 @@ export default memo(function SubCategory({ handleShelfFocus(); } }, [handleShelfFocus]); - console.log("###test pjh"); + return ( { + const dispatch = useDispatch(); + const [showButton, setShowButton] = useState("showButton", true); + const cbChangePageRef = useRef(null); + const currentSentMenuRef = useRef(null); + const focusedContainerIdRef = useRef(panelInfo?.focusedContainerId); + + const { getScrollTo } = useScrollTo(); + + const STRING_CONF = { + LIKE_ITEMS: "Like items you recently saw", + LIKE_BRANDS: "Liked Brand Products", + MORE_PRICE: "More to Consider at This Price", + }; + + const recentItems = useSelector( + (state) => state.product?.bestSellerData?.bestSeller + ); + + const onClick = useCallback(() => { + dispatch(popPanel(panel_names.JUST_FOR_YOU_TEST_PANEL)); + }, [dispatch]); + + const handleScroll = useCallback((e) => { + setShowButton(e.scrollTop === 0); + }, []); + + const handleTopButtonClick = useCallback(() => { + if (cbChangePageRef.current) { + cbChangePageRef.current(0, true); + } + + if (recentItems && recentItems.length > 0) { + const target = `spotlightId-recentItem-${recentItems[0]?.prdtId}`; + Spotlight.focus(target); + setContainerLastFocusedElement(null, [SpotlightIds.JUST_FOR_YOU_ITEMS]); + } + }, [recentItems]); + + const renderItem = useCallback( + ({ index, ...rest }) => { + const { + imgUrl, + offerInfo, + prdtId, + lgCatNm, + patncNm, + patnrId, + brndNm, + prdtNm, + priceInfo, + } = recentItems[index]; + + const handleItemClick = () => { + dispatch( + pushPanel({ + name: panel_names.DETAIL_PANEL, + panelInfo: { patnrId, prdtId }, + }) + ); + }; + + return ( + = 5} + imageAlt={prdtId} + imageSource={imgUrl} + label={index * 1 + 1 + " of " + recentItems.length} + lastLabel=" go to detail, button" + offerInfo={offerInfo} + priceInfo={priceInfo} + productName={prdtNm} + productId={prdtId} + onClick={handleItemClick} + spotlightId={"spotlightId-recentItem-" + removeDotAndColon(prdtId)} + {...rest} + /> + ); + }, + [recentItems] + ); + + return ( +
+ + + +
+ + +
+ {recentItems && recentItems?.length > 0 && ( + + + +
+ +
+ + )} + {recentItems && recentItems?.length > 0 && ( + + + +
+ +
+ + )} + {recentItems && recentItems?.length > 0 && ( + + + +
+ +
+ + )} + + + + + + +
+ ); +}; + +export default JustForYouTestPanel; diff --git a/com.twin.app.shoptime/src/views/JustForYouTestPanel/JustForYouTestPanel.module.less b/com.twin.app.shoptime/src/views/JustForYouTestPanel/JustForYouTestPanel.module.less new file mode 100644 index 00000000..74821e42 --- /dev/null +++ b/com.twin.app.shoptime/src/views/JustForYouTestPanel/JustForYouTestPanel.module.less @@ -0,0 +1,86 @@ +@import "../../style/CommonStyle.module.less"; +@import "../../style/utils.module.less"; + +.container { + width: 100%; + height: 100%; + .justForYou { + position: relative; + background: @COLOR_WHITE; + overflow: auto; + height: @globalHeight; + .tVerticalPagenator { + height: 100% !important; + .itemsContainer { + width: calc(100% - 60px); + padding: 0 0 0 60px; + margin-top: 30px; + &.itemsContinerFirst { + margin-top: 470px; + } + + .itemList { + .size(@w: 100%, @h: 438px); + margin-top: 24px; + + padding-right: 18px; + display: flex; + flex-direction: row; + overflow: initial; + width: 100%; + > div:nth-child(1) { + .size(@w: 100%, @h: 438px); + &.tVirtualGridList { + padding-left: 60px; + } + } + } + } + .background { + position: absolute; + top: 0; + left: 0; + max-width: 1920px; + max-height: 650px; + + .header { + width: 100%; + height: 60px; + background-color: transparent; + align-items: center; + color: rgba(238, 238, 238, 1); + padding: 0 0 0 60px; + position: relative; + left: 0; + top: 0; + z-index: 1; + > div { + font-weight: bold !important; + font-size: 30px !important; + .elip(@clamp: 1); + padding-left: 12px !important; + text-transform: none !important; + letter-spacing: 0 !important; + } + > button { + background-image: url("../../../assets/images/btn/btn-60-wh-back-nor@3x.png"); + &:focus { + border: 4px solid @PRIMARY_COLOR_RED; + box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5); + border-radius: 0px; + } + } + } + + img { + max-width: 1920px; + max-height: 650px; + object-fit: cover; + position: absolute; + left: 0; + top: 0; + } + } + } + } +} diff --git a/com.twin.app.shoptime/src/views/MainView/MainView.jsx b/com.twin.app.shoptime/src/views/MainView/MainView.jsx index b740df3e..b8b1e6c0 100644 --- a/com.twin.app.shoptime/src/views/MainView/MainView.jsx +++ b/com.twin.app.shoptime/src/views/MainView/MainView.jsx @@ -96,6 +96,7 @@ import HotPicksPanel from '../HotPicksPanel/HotPicksPanel'; import ImagePanel from '../ImagePanel/ImagePanel'; import IntroPanel from '../IntroPanel/IntroPanel.new'; import JustForYouPanel from '../JustForYouPanel/JustForYouPanel'; +import JustForYouTestPanel from '../JustForYouTestPanel/JustForYouTestPanel'; import LoadingPanel from '../LoadingPanel/LoadingPanel'; import MyPagePanel from '../MyPagePanel/MyPagePanel'; import OnSalePanel from '../OnSalePanel/OnSalePanel'; @@ -140,6 +141,7 @@ const panelMap = { [Config.panel_names.CONFIRM_PANEL]: ConfirmPanel, [Config.panel_names.USER_REVIEW_PANEL]: UserReviewPanel, [Config.panel_names.JUST_FOR_YOU_PANEL]: JustForYouPanel, + [Config.panel_names.JUST_FOR_YOU_TEST_PANEL]: JustForYouTestPanel, // [Config.panel_names.OPTIONAL_TERMS_PANEL]: TermsOfOptional, };