From a690bd8712b14e8cf05d67ee7d7548ddd6fde246 Mon Sep 17 00:00:00 2001 From: "jiwon93.son" Date: Fri, 23 Feb 2024 10:10:52 +0900 Subject: [PATCH] =?UTF-8?q?[OptionCommon]=20OptionCommon=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80,=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=9E=91=EC=97=85,=20=EC=83=81=EB=8B=A8?= =?UTF-8?q?=20=EC=98=B5=EC=85=98=EB=B2=84=ED=8A=BC=20=EC=9E=91=EC=97=85?= =?UTF-8?q?=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/images/btn/btn-dropdown-foc@3x.png | Bin 0 -> 1374 bytes .../assets/images/btn/btn-dropdown-nor@3x.png | Bin 0 -> 1349 bytes .../components/ProductTag.module.less | 5 +- .../components/optionTypes/OptionCommon.jsx | 116 +++++++++++++++++- .../optionTypes/OptionCommon.module.less | 58 +++++++++ .../DetailPanel/container/ProductOption.jsx | 40 ++---- 6 files changed, 187 insertions(+), 32 deletions(-) create mode 100644 com.twin.app.shoptime/assets/images/btn/btn-dropdown-foc@3x.png create mode 100644 com.twin.app.shoptime/assets/images/btn/btn-dropdown-nor@3x.png diff --git a/com.twin.app.shoptime/assets/images/btn/btn-dropdown-foc@3x.png b/com.twin.app.shoptime/assets/images/btn/btn-dropdown-foc@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..36d326e2f81d47ee1c0fb4bab94ae35bf2497d08 GIT binary patch literal 1374 zcmbW1*;A7T6vYD=6quAv5Q2&w##n7hU<4zS5NU`&Swh)jfe;k~6~VBFEr1qf4OODD zN{WC8RH#z~fs)W<6wy&gFain^a3KWDqRH^_Wo!Bm_|S)Y&)hq|xpQ9bsSFPbfSJS1 zArJ^GD9}H`pvC{y4pT#4ap|luh+{VXM0O-KDVugGlLGNOLp@E|7nF7?nG!)cbtXS! zlHvn_Kp{c?eo=X^HWr^zqoN%q6xDuCF>HBQHPr0du4ZGKxAv}V1e{T6mhqnJ0JG3L z-f+n2e^hVRX%c$~zq84dJcul6wr>z{e@Mg}(77?pt~IVM6i#_LrpO7hS2GhA3kPFwgt34%&{T0&zgOiRiZj7dZj5Ba;=n zs77)0xLSkIIM)EKuGOcXC6L;o^bvDqj|jKCd9EoJUnT8NYq!=0+KHpNY7J5&V*qz= zl?}O>gp5G7b-nza>E6qhmpJ$tI}@F68`bTWI*4`m6LsWZymJ)nmxC2M3xrxG3!MF7{3RS^CorPURPty>7+zm7kAZ&m(B`SB`L*=wE4mN zMfXHh!8_swtj!Jsecjv1nfFmRB=2GX6aqT{d)8kc!z}KU-k!)L)8isf{)DcA!28{#eKz{LVyQ^L)4=vORM_kev{oY|^qmfY2U4ANnK*_1X&1(Y8?U zDq0U0wY|TgpVh5mcB_ASE*|FX0t@G5jq0!r+K`9Z$#*GJ)zjPTg-*)3TB6yTVfZDP z#8bNu7)@8JJUMCAdd5<6pYLS;lV(#+5lFZLch-t<^ahW X-{Eq|Ql4c9Oh^zu%)jr4lNbL5w;!~7 literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/assets/images/btn/btn-dropdown-nor@3x.png b/com.twin.app.shoptime/assets/images/btn/btn-dropdown-nor@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..aa3fa2b1b3bd2f29cfbc3b08d0d4ed03ea004034 GIT binary patch literal 1349 zcma)+`&ZHj7{r|>qNXPHq6DH)Q-1DX{Y#5bhxcl-nE?1$%l&U4Ot-XEU#oR4VF?wua4 zNLLsP=0Qn_OR>AauG616*{74Dx1kU$tcKzkuupCS!*bHjO?tGEJo%J z-w$U+!(fhjN*rll(Zu|uhV7l@KeTXqO(iv8>yr$U!%TW=Y{tut&kDkn16Qtmo_}$` zztYbJPl8-RLd$t;0%Tv(_QXznM=a_v_aVrh4o4G?Xz{l4T%`LvF}(fl(nCvaG+tA8 zw|z8Qa`~5sp6%ihX8c_3_#dz$hv;R$!jey6dJt1CM#oRY)1O>%eQ@o%FA{}nxayP1 z;navQj6O?;bzrPf+TB7SsCK+U&m5#K(ULm5nuv8=^Cf9#FVrl#bd*Z(Mv51JoEE<9 zMS=Omh?3f2?HdaY4-nGssK+!ifr#;v2Rh%wf;mGpv)Z43LyD*(u}7HH3K{{i+~%Ad z%jVzZ*=De0OB;VYHChdomc%##lX=nV20W`=vCF{E%WcOv0lheh;z(uMUW7@6Q}UfM zPC<9i=2@{Hf~MP4IrFd5HB5ISHR`#HUJVsoHy|P>W;ewA1%o;nn%W4TAf1;1YeuSo z%}&7b@qPr>*S0TE7+Zb+seF(^bv||q8XAilL?{1KstC(4VZ|IbE7rV7ayJse#3#Pg z7?roMGLSD~R0hxK%wb&lgA-;&*92?eEdp#g_ejlp+-hLglpV#D{G_-6vxyRnY8KrO zrRvy+EA}xG6)uqTdclqgay_%|z4AOU1y{V^NY+_c;seg--&pc4F)DwQl}lsWzIdTO zsS~mX*qIxz^=(eKUllxVl1|LFwDklz2yfjCcC?wd)6;qylc}B4lO3ixFC9JnC7$!l zJKPGd*ESdHy9-BXD}ZkzK1}wYy{%{bmEA6qS#)Rs)UrZR-`~7RS+!C*>h^IoAFI$% z$BS*PkqqT=-<(Bh4|>-!f+Mg>E0K5P4utR)3D&*qt=sCg^V}ypI%QxNvS3&~xK7s= z%z$tm$YeNS18{Kx|LtQvO0`w0<_6a=E8bJY$FYX%jLNb;I=u(XecFgA3s_f@0HCn5 z@7!||XYV}sY#pu_aNm?8xxMm12b~vJ{yH$J%ZGpXoMCOh9#{{bLgyfa)qx+${gyiS zl>`o;8jhjEz&)tyd{WFbi}$x7v?n`K8JYqEm6$2TCX=7LRv$%;+Pq3Zp-1q zBNf?Mzb#ea-d@!q8MIz}$=< zEDEkUEG}^aqm%CM6w2}qxBK)!KYZ%&qh!~QZT=|#cOzB#Zo(EfZ4}G&On1VT=QAw~ zHg$*Mzb@0%%>dc4ZGQIeH)Pt_rGk*M@*AA9{i`4j#n7EXO7jdMKyth{lF?= zHVGIq$9G8%Rj1smeZ5*I3Hx0KU51$F4MFw}z|jVJq5O4yjWV@j)WjRthFhlRXJyAM zekB6K9E~b$dVXcwLFOptionCommon; +import { useDispatch, useSelector } from "react-redux"; + +import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; +import Spottable from "@enact/spotlight/Spottable"; + +import { getProductOption } from "../../../../actions/productActions"; +import TButton from "../../../../components/TButton/TButton"; +import TPopUp from "../../../../components/TPopUp/TPopUp"; +import TScroller from "../../../../components/TScroller/TScroller"; +import { $L } from "../../../../utils/helperMethods"; +import css from "./OptionCommon.module.less"; + +const Container = SpotlightContainerDecorator( + { enterTo: "last-focused", continue5WayHold: true }, + "div" +); + +export default function OptionCommon({ selectedPatnrId, selectedPardtId }) { + const dispatch = useDispatch(); + const productOptionInfos = useSelector((state) => state.product.prdtOptInfo); + + const [selectedIndex, setSelectedIndex] = useState(0); + const [optionPopupOpen, setOptionPopupOpen] = useState(false); + const [secondOptionOpen, setSecondOptionOpen] = useState(false); + + useEffect(() => { + dispatch( + getProductOption({ + patnrId: selectedPatnrId, + prdtId: selectedPardtId, + }) + ); + }, [dispatch]); + + const handleClose = useCallback(() => { + setOptionPopupOpen(false); + }, [optionPopupOpen]); + + const handleOptionClick = useCallback( + (idx) => { + idx === 0 ? setOptionPopupOpen(true) : setSecondOptionOpen(true); + }, + [productOptionInfos] + ); + + return ( + + + {productOptionInfos && + productOptionInfos.length > 0 && + productOptionInfos.map((option, idx) => { + const { + cntryCd, + concProdOptSno, + optNm, + patnrId, + prdtId, + prodOptSno, + prodOptTpCdCval, + prdtOptDtl, + } = option; + return ( +
+ {$L(optNm.toUpperCase())} + { + handleOptionClick(idx); + }} + > + + {prdtOptDtl[0].prodOptCval} + + + { + setOptionPopupOpen(false); + setSecondOptionOpen(false); + }} + open={idx === 0 ? optionPopupOpen : secondOptionOpen} + hasButton + hasText + title={$L(optNm.toUpperCase())} + button1Text={$L("CLOSE")} + selectedOptionIdx={selectedIndex} + setSelectedOptionIdx={setSelectedIndex} + /> +
+ ); + })} + +
+
+ SHOPTIME PROMOTION + Coupon only applicable to this product! +
+ COUPON +
+
+ {$L("QVC Price")} + +
+
+ {$L("Shipping Free")} + +
+ + ); } diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionCommon.module.less b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionCommon.module.less index e69de29b..d68f2812 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionCommon.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionCommon.module.less @@ -0,0 +1,58 @@ +@import "../../../../style/CommonStyle.module.less"; +@import "../../../../style/utils.module.less"; + +.detailContainer { + width: 846px; + margin-top: 21px; + + .detailScroll { + width: 100%; + height: 214px; + background: @BG_COLOR_02; + padding: 10px 30px; + border-top: 1px solid @COLOR_GRAY02; + border-bottom: 1px solid @COLOR_GRAY02; + + .optionLayer { + .flex(@justifyCenter:space-between); + color: @COLOR_GRAY05; + .font(@baseFontBold,@fontSize:24px); + margin: 20px 0; + + .optionBtn { + .border-solid(1px,@COLOR_GRAY02); + .flex(); + .font(@baseFontBold,@fontSize:24px); + + min-width: 560px; + background-color: @COLOR_WHITE; + color: @COLOR_GRAY03; + background-image: url(../../../../../assets/images/btn/btn-dropdown-nor@3x.png); + .imgElement(42px, 42px, right 30px, center); + position: relative; + + &:focus { + color: @PRIMARY_COLOR_RED; + &::after { + .focused(@boxShadow: 22px, @borderRadius: 12px); + background-image: url(../../../../../assets/images/btn/btn-dropdown-foc@3x.png); + .imgElement(42px, 42px, right 26px, center); + } + } + + > div { + .flex(); + + span { + line-height: 1.33; + width: 458px; + } + img { + width: 42px; + height: 42px; + } + } + } + } + } +} diff --git a/com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.jsx b/com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.jsx index b699dd15..70963a55 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.jsx @@ -1,53 +1,39 @@ -import React, { useEffect } from "react"; +import React from "react"; -import { useDispatch, useSelector } from "react-redux"; +import { useSelector } from "react-redux"; -import { getProductOption } from "../../../actions/productActions"; import { $L } from "../../../utils/helperMethods"; +import OptionCommon from "../components/optionTypes/OptionCommon"; import OptionGroup from "../components/optionTypes/OptionGroup"; import ProductTag from "../components/ProductTag"; import StarRating from "../components/StarRating"; import css from "./ProductOption.module.less"; export default function ProductOption({ selectedPatnrId, selectedPardtId }) { - const dispatch = useDispatch(); - - // const productOpionInfos = useSelector((state) => state.product.prdtOptInfo); const productDataInfos = useSelector((state) => state.main.productData); - - useEffect(() => { - dispatch( - getProductOption({ - patnrId: selectedPatnrId, - prdtId: selectedPardtId, - }) - ); - }, [dispatch]); + const { patncLogoPath, prdtId, prdtNm, revwGrd } = productDataInfos; return (
{productDataInfos && (
- patncLogoPath -
{$L(`ID: ${productDataInfos.prdtId}`)}
+ patncLogoPath +
{$L(`ID: ${prdtId}`)}
-
{$L(productDataInfos.prdtNm)}
+
{$L(prdtNm)}
- {productDataInfos.revwGrd && ( - - )} + {revwGrd && }
)}
- */} +