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

starRating DetailPanel component 추가

Browse Source
This commit is contained in:
고동영
2024-02-21 14:26:20 +09:00
parent b04ddebd3e
commit a097e947ca
4 changed files with 66 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
com.twin.app.shoptime/src/views/DetailPanel/components/StarRating.jsx Normal file
View File

@@ -0,0 +1,17 @@
import React from "react";
import classNames from "classnames/bind";
import css from "./StarRating.module.less";
export default function StarRating({ rating }) {
const roundToHalf = (number) => {
return Math.round(number * 2) / 2;
};
const cx = classNames.bind(css);
const roundedRating = Math.min(Math.max(0, roundToHalf(rating)), 5);
const className = `starRating-${roundedRating.toString().replace(".", "_")}`;
return <div className={cx("star", className)} />;
}

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

@@ -0,0 +1,47 @@
@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');
}
}

1
com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionGroup.jsx
View File

@@ -20,7 +20,6 @@ const SpottableComponent = Spottable("div");
export default function OptionGroup({ selectedPatnrId, selectedPardtId }) {
const dispatch = useDispatch();
const groupInfos = useSelector((state) => state.product.groupInfo);
console.log("# groupInfos", groupInfos);
useEffect(() => {
dispatch(

3
com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.jsx
View File

@@ -8,6 +8,7 @@ import TButton from "../../../components/TButton/TButton";
import TPopUp from "../../../components/TPopUp/TPopUp";
import { $L } from "../../../utils/helperMethods";
import Indicator from "../components/Indicator";
import StarRating from "../components/StarRating";
import css from "./ProductThumbnail.module.less";
const SpottableComponent = Spottable("div");
@@ -15,7 +16,6 @@ const SpottableComponent = Spottable("div");
export default function ProductThumbnail() {
const productData = useSelector((state) => state.main.productData);
const [opened, setOpened] = useState(false);
console.log("#productData", productData);
const buttonLabel = [
{ label: $L("DESCRIPTION") },
@@ -43,6 +43,7 @@ export default function ProductThumbnail() {
<span>{`ID:` + productData?.prdtId}</span>
</div>
<h3>{productData?.prdtNm}</h3>
<StarRating rating={productData?.revwGrd} />
</div>
</div>
</TPopUp>