optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DetailPanel 폴더구조변경

Browse Source
This commit is contained in:
고동영
2024-03-08 15:58:23 +09:00
parent 207a2ee221
commit f713afb65c
23 changed files with 130 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
View File

@@ -2,24 +2,23 @@ import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
getMainCategoryDetail,
getMainYouMayLike,
} from "../../actions/mainActions";
import { getMainCategoryDetail } from "../../actions/mainActions";
import { popPanel } from "../../actions/panelActions";
import TBody from "../../components/TBody/TBody";
import THeader from "../../components/THeader/THeader";
import TPanel from "../../components/TPanel/TPanel";
import ProductOption from "./container/ProductOption";
import ProductThumbnail from "./container/ProductThumbnail";
import ProductOption from "./components/ProductOption";
import ProductThumbnail from "./components/ProductThumbnail";
import SingleProduct from "./container/SingleProduct";
import YouMayLike from "./container/YouMayLike";
import css from "./DetailPanel.module.less";
export default function ItemDetail() {
const [panelInfo, setPaneInfo] = useState();
const data = useSelector((state) => state.main.productData);
const productData = useSelector((state) => state.main.productData);
const panels = useSelector((state) => state.panels.panels);
const dispatch = useDispatch();
const getPanelInfo = () => {
if (panels) {
for (let i = 0; i < panels.length; i++) {
@@ -29,7 +28,6 @@ export default function ItemDetail() {
}
}
};
const dispatch = useDispatch();
useEffect(() => {
getPanelInfo();
@@ -50,17 +48,14 @@ export default function ItemDetail() {
<TPanel isTabActivated={false}>
<THeader
className={css.header}
title={data?.prdtNm}
title={productData?.prdtNm}
onBackButton
onClick={onClick}
/>
<TBody className={css.container} scrollable={false}>
<ProductThumbnail />
<ProductOption
<SingleProduct
selectedPatnrId={panelInfo?.patnrId}
selectedPardtId={panelInfo?.prdtId}
// selectedPatnrId={1}
// selectedPardtId={"A523924"}
/>
</TBody>
<YouMayLike />

13
com.twin.app.shoptime/src/views/DetailPanel/components/FavoriteBtn.module.less
View File

@@ -1,13 +0,0 @@
@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
.favorBtnContainer {
height: 78px;
.flex();
.favorBtn {
min-width: 78px;
height: 78px;
background-image: url(../../../../assets/images/icons/ic-heart-nor@3x.png);
.imgElement(54px, 54px, center, center);
}
}

10
com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.jsx → com.twin.app.shoptime/src/views/DetailPanel/components/ProductOption.jsx
View File

@@ -3,11 +3,11 @@ import React from "react";
import { useSelector } from "react-redux";
import { $L } from "../../../utils/helperMethods";
import OptionCommon from "../components/optionTypes/OptionCommon";
import OptionGroup from "../components/optionTypes/OptionGroup";
import OptionPartnerPrice from "../components/optionTypes/OptionPartnerPrice";
import ProductTag from "../components/ProductTag";
import StarRating from "../components/StarRating";
import ProductTag from "../components/common/ProductTag";
import StarRating from "../components/common/StarRating";
import OptionCommon from "./optionTypes/OptionCommon";
import OptionGroup from "./optionTypes/OptionGroup";
import OptionPartnerPrice from "./optionTypes/OptionPartnerPrice";
import css from "./ProductOption.module.less";
export default function ProductOption({ selectedPatnrId, selectedPardtId }) {

0
com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.module.less → com.twin.app.shoptime/src/views/DetailPanel/components/ProductOption.module.less
View File

9
com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.jsx → com.twin.app.shoptime/src/views/DetailPanel/components/ProductThumbnail.jsx
View File

@@ -11,9 +11,9 @@ import TQRCode from "../../../components/TQRCode/TQRCode";
import TScroller from "../../../components/TScroller/TScroller";
import useScrollTo from "../../../hooks/useScrollTo";
import { $L } from "../../../utils/helperMethods";
import Indicator from "../components/Indicator";
import ProductTag from "../components/ProductTag";
import StarRating from "../components/StarRating";
import Indicator from "./common/Indicator";
import ProductTag from "./common/ProductTag";
import StarRating from "./common/StarRating";
// import QRCodeMin from '!!raw-loader!../../../utils/qrcode.min.js';
import css from "./ProductThumbnail.module.less";
@@ -49,9 +49,6 @@ export default function ProductThumbnail() {
}
};
useEffect(() => {
console.log("#productData", productData);
}, [productData]);
const renderPopUp = () => {
return (
<TPopUp

0
com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.module.less → com.twin.app.shoptime/src/views/DetailPanel/components/ProductThumbnail.module.less
View File

42
com.twin.app.shoptime/src/views/DetailPanel/components/StarRating.module.less
View File

@@ -1,42 +0,0 @@
@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
.star {
.size(@w: 180px , @h: 36px);
background-size: cover;
background-position: center;
&.starRating-0 {
background-image: url("../../../../assets/images/img-detail-star-0-0@3x.png");
}
&.starRating-0_5 {
background-image: url("../../../../assets/images/img-detail-star-0-5@3x.png");
}
&.starRating-1 {
background-image: url("../../../../assets/images/img-detail-star-1-0@3x.png");
}
&.starRating-1_5 {
background-image: url("../../../../assets/images/img-detail-star-1-5@3x.png");
}
&.starRating-2 {
background-image: url("../../../../assets/images/img-detail-star-2-0@3x.png");
}
&.starRating-2_5 {
background-image: url("../../../../assets/images/img-detail-star-2-5@3x.png");
}
&.starRating-3 {
background-image: url("../../../../assets/images/img-detail-star-3-0@3x.png");
}
&.starRating-3_5 {
background-image: url("../../../../assets/images/img-detail-star-3-5@3x.png");
}
&.starRating-4 {
background-image: url("../../../../assets/images/img-detail-star-4-0@3x.png");
}
&.starRating-4_5 {
background-image: url("../../../../assets/images/img-detail-star-4-5@3x.png");
}
&.starRating-5 {
background-image: url("../../../../assets/images/img-detail-star-5-0@3x.png");
}
}

12
com.twin.app.shoptime/src/views/DetailPanel/components/FavoriteBtn.jsx → com.twin.app.shoptime/src/views/DetailPanel/components/common/FavoriteBtn.jsx
View File

@@ -2,12 +2,12 @@ import React, { useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import { setHidePopup, setShowPopup } from "../../../actions/commonActions";
import { setMainLikeCategory } from "../../../actions/mainActions";
import TButton from "../../../components/TButton/TButton";
import TPopUp from "../../../components/TPopUp/TPopUp";
import * as Config from "../../../utils/Config";
import { $L } from "../../../utils/helperMethods";
import { setHidePopup, setShowPopup } from "../../../../actions/commonActions";
import { setMainLikeCategory } from "../../../../actions/mainActions";
import TButton from "../../../../components/TButton/TButton";
import TPopUp from "../../../../components/TPopUp/TPopUp";
import * as Config from "../../../../utils/Config";
import { $L } from "../../../../utils/helperMethods";
import css from "./FavoriteBtn.module.less";
export default function FavoriteBtn({ selectedPatnrId, selectedPardtId }) {

13
com.twin.app.shoptime/src/views/DetailPanel/components/common/FavoriteBtn.module.less Normal file
View File

@@ -0,0 +1,13 @@
@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";
.favorBtnContainer {
height: 78px;
.flex();
.favorBtn {
min-width: 78px;
height: 78px;
background-image: url(../../../../../assets/images/icons/ic-heart-nor@3x.png);
.imgElement(54px, 54px, center, center);
}
}

0
com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.jsx → com.twin.app.shoptime/src/views/DetailPanel/components/common/Indicator.jsx
View File

14
com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.module.less → com.twin.app.shoptime/src/views/DetailPanel/components/common/Indicator.module.less
View File

@@ -1,5 +1,5 @@
@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";
.Wrap {
margin: 30px 0 0 10px;
@@ -26,10 +26,10 @@
margin-bottom: 4px;
background-position: center;
background-size: cover;
background-image: url("../../../../assets/images/btn/btn-bk-up-nor.svg");
background-image: url("../../../../../assets/images/btn/btn-bk-up-nor.svg");
&:focus {
background-image: url("../../../../assets/images/btn/btn-bk-up-foc.svg");
background-image: url("../../../../../assets/images/btn/btn-bk-up-foc.svg");
}
}
@@ -39,10 +39,10 @@
margin-top: 4px;
background-position: center;
background-size: cover;
background-image: url("../../../../assets/images/btn/btn-bk-down-nor.svg");
background-image: url("../../../../../assets/images/btn/btn-bk-down-nor.svg");
&:focus {
background-image: url("../../../../assets/images/btn/btn-bk-down-foc.svg");
background-image: url("../../../../../assets/images/btn/btn-bk-down-foc.svg");
}
}
@@ -74,7 +74,7 @@
.position(@position: absolute, @top: auto, @right: 44px, @bottom: 48px, @left: auto);
.size(@w: 49px , @h: 49px);
background-image: url("../../../../assets/images/icons/ic-check-thumb.svg");
background-image: url("../../../../../assets/images/icons/ic-check-thumb.svg");
background-position: center;
background-size: cover;

2
com.twin.app.shoptime/src/views/DetailPanel/components/ProductTag.jsx → com.twin.app.shoptime/src/views/DetailPanel/components/common/ProductTag.jsx
View File

@@ -2,7 +2,7 @@ import React from "react";
import { useSelector } from "react-redux";
import usePriceInfo from "../../../hooks/usePriceInfo";
import usePriceInfo from "../../../../hooks/usePriceInfo";
import css from "./ProductTag.module.less";
export default function ProductTag() {

4
com.twin.app.shoptime/src/views/DetailPanel/components/ProductTag.module.less → com.twin.app.shoptime/src/views/DetailPanel/components/common/ProductTag.module.less
View File

@@ -1,5 +1,5 @@
@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";
.tag-default(@backgroundColor,@fontColor) {
display: block;

0
com.twin.app.shoptime/src/views/DetailPanel/components/StarRating.jsx → com.twin.app.shoptime/src/views/DetailPanel/components/common/StarRating.jsx
View File

42
com.twin.app.shoptime/src/views/DetailPanel/components/common/StarRating.module.less Normal file
View File

@@ -0,0 +1,42 @@
@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";
.star {
.size(@w: 180px , @h: 36px);
background-size: cover;
background-position: center;
&.starRating-0 {
background-image: url("../../../../../assets/images/img-detail-star-0-0@3x.png");
}
&.starRating-0_5 {
background-image: url("../../../../../assets/images/img-detail-star-0-5@3x.png");
}
&.starRating-1 {
background-image: url("../../../../../assets/images/img-detail-star-1-0@3x.png");
}
&.starRating-1_5 {
background-image: url("../../../../../assets/images/img-detail-star-1-5@3x.png");
}
&.starRating-2 {
background-image: url("../../../../../assets/images/img-detail-star-2-0@3x.png");
}
&.starRating-2_5 {
background-image: url("../../../../../assets/images/img-detail-star-2-5@3x.png");
}
&.starRating-3 {
background-image: url("../../../../../assets/images/img-detail-star-3-0@3x.png");
}
&.starRating-3_5 {
background-image: url("../../../../../assets/images/img-detail-star-3-5@3x.png");
}
&.starRating-4 {
background-image: url("../../../../../assets/images/img-detail-star-4-0@3x.png");
}
&.starRating-4_5 {
background-image: url("../../../../../assets/images/img-detail-star-4-5@3x.png");
}
&.starRating-5 {
background-image: url("../../../../../assets/images/img-detail-star-5-0@3x.png");
}
}

2
com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionCommon.jsx
View File

@@ -15,7 +15,7 @@ import TScroller from "../../../../components/TScroller/TScroller";
import usePriceInfo from "../../../../hooks/usePriceInfo";
import * as Config from "../../../../utils/Config";
import { $L } from "../../../../utils/helperMethods";
import FavoriteBtn from "../FavoriteBtn";
import FavoriteBtn from "../common/FavoriteBtn";
import css from "./OptionCommon.module.less";
const Container = SpotlightContainerDecorator(

2
com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionPartnerPrice.jsx
View File

@@ -7,7 +7,7 @@ import TButton from "../../../../components/TButton/TButton";
import TQRCode from "../../../../components/TQRCode/TQRCode";
import usePriceInfo from "../../../../hooks/usePriceInfo";
import { $L } from "../../../../utils/helperMethods";
import FavoriteBtn from "../FavoriteBtn";
import FavoriteBtn from "../common/FavoriteBtn";
import css from "./OptionPartnerPrice.module.less";
export default function OptionPartnerPrice({

7
com.twin.app.shoptime/src/views/DetailPanel/container/GroupProduct.jsx Normal file
View File

@@ -0,0 +1,7 @@
import React from "react";
import css from "./GroupProduct.module.less";
export default function GroupProduct() {
return <div>GroupProduct</div>;
}

2
com.twin.app.shoptime/src/views/DetailPanel/container/GroupProduct.module.less Normal file
View File

@@ -0,0 +1,2 @@
@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";

17
com.twin.app.shoptime/src/views/DetailPanel/container/SingleProduct.jsx Normal file
View File

@@ -0,0 +1,17 @@
import React from "react";
import ProductOption from "../components/ProductOption";
import ProductThumbnail from "../components/ProductThumbnail";
import css from "./SingleProduct.module.less";
export default function SingleProduct({ selectedPatnrId, selectedPardtId }) {
return (
<div className={css.container}>
<ProductThumbnail />
<ProductOption
selectedPatnrId={selectedPatnrId}
selectedPardtId={selectedPardtId}
/>
</div>
);
}

6
com.twin.app.shoptime/src/views/DetailPanel/container/SingleProduct.module.less Normal file
View File

@@ -0,0 +1,6 @@
@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
.container {
display: flex;
}

7
com.twin.app.shoptime/src/views/DetailPanel/container/ThemeProduct.jsx Normal file
View File

@@ -0,0 +1,7 @@
import React from "react";
import css from "./ThemeProduct.module.less";
export default function ThemeProduct() {
return <div>ThemeProduct</div>;
}

2
com.twin.app.shoptime/src/views/DetailPanel/container/ThemeProduct.module.less Normal file
View File

@@ -0,0 +1,2 @@
@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";