{"code":"import React, { useEffect, useState } from \"react\";\r\nimport ColorChips from \"../ColorChips\";\r\nimport PickLabel from \"../PickLabel\";\r\nimport Score from \"../Score\";\r\nimport NsImage from \"../shared/ns-image\";\r\nimport SlideWrapper from \"../SlideWrapper\";\r\nimport StarRating from \"../StarRating\";\r\nimport Button from \"../UI/Button\";\r\nimport Heading from \"../UI/Heading\";\r\nimport { BookmarkDefault, BookmarkPressed, ComparisonDefault, ComparisonPressed, } from \"../UI/Icon\";\r\nimport Text from \"../UI/Text\";\r\nimport ReviewBox from \"./ReviewBox\";\r\nvar NosearchPickBox = function (_a) {\r\n    var _b;\r\n    var type = _a.viewType, data = _a.data, index = _a.index, onClickReivewModal = _a.onClickReivewModal, onSetClickedReview = _a.onSetClickedReview;\r\n    var goodsName = data.goodsName, modelName = data.modelName, brandName = data.brandName, productCategoryName = data.productCategoryName, price = data.price, imageUrl = data.imageUrl, ImageWrapper = data.ImageWrapper, pickType = data.pickType, likeStatus = data.likeStatus, compareStatus = data.compareStatus, reviewAvg = data.reviewAvg, reviewCnt = data.reviewCnt, reviews = data.reviews, colors = data.colors, scoreMetaMap = data.scoreMetaMap, BookmarkButton = data.BookmarkButton, CompareButton = data.CompareButton, AllReviewsButton = data.AllReviewsButton;\r\n    var getPriceString = function (price) {\r\n        var endText = price.slice(-2, price.length);\r\n        if (endText === \"만원\")\r\n            return price;\r\n        return price + \"만원\";\r\n    };\r\n    var imageSize = \"w-[12rem] h-[12rem] \".concat(type === \"pick\" &&\r\n        \"pc:w-[18rem] pc:h-[18rem]\");\r\n    return (React.createElement(\"article\", { \"data-testid\": \"NosearchPick\", className: \"nrc--NosearchPick w-[33.5rem] p-[1.4rem] border-[1px] border-gray-3 rounded-[10px] \".concat(type === \"home\" ? \"pc:w-[36.7rem]\" : \"pc:w-[80rem]\") },\r\n        React.createElement(\"div\", { className: \"flex justify-between \".concat(reviews &&\r\n                (reviews === null || reviews === void 0 ? void 0 : reviews.length) > 0 &&\r\n                \"mb-[1.2rem]\") },\r\n            React.createElement(\"div\", { className: \"flex \".concat(type === \"home\"\r\n                    ? \"pc:h-[13.5rem]\"\r\n                    : \"pc:h-[22rem] pc:bg-gray-1 pc:py-[1rem] pc:px-[2rem] pc:rounded-[10px]\") },\r\n                React.createElement(\"div\", { className: \"\".concat(type === \"home\" ? \"mr-[1.2rem]\" : \"mr-[1.6rem]\") },\r\n                    React.createElement(\"div\", { className: \"relative object-contain border-[1px] border-gray-3 rounded-[10px] \".concat(imageSize, \" bg-white overflow-hidden \") },\r\n                        React.createElement(NsImage, { ImageWrapper: ImageWrapper, imageUrl: imageUrl, className: \"object-contain bg-white \".concat(imageSize) }),\r\n                        index && (React.createElement(\"div\", { className: \"w-[2.8rem] h-[2.8rem] pc:w-[3rem] pc:h-[3rem] absolute top-0 left-0 bg-gray-10 flex justify-center items-center rounded-br-[10px]\" },\r\n                            React.createElement(Heading, { level: 6, className: \"text-white pc:text-heading-5\" }, index)))),\r\n                    colors && (React.createElement(\"div\", { className: \"w-[12rem] flex justify-center mt-[0.4rem] \".concat(type ===\r\n                            \"pick\" && \"pc:w-[18rem]\") },\r\n                        React.createElement(ColorChips, { colors: colors, chipWidth: \"1.1\", chipHeight: \"1.1\" })))),\r\n                React.createElement(\"div\", { className: \"flex flex-col justify-center\" },\r\n                    React.createElement(\"div\", { className: \"inline-block\" },\r\n                        React.createElement(PickLabel, { pickType: pickType, categoryKr: productCategoryName, labelStyle: \"mb-[0.4rem]\" })),\r\n                    React.createElement(Text, { type: \"B5\", className: \"text-gray-10\", \"aria-label\": \"\\uBE0C\\uB79C\\uB4DC\\uBA85\" }, brandName),\r\n                    React.createElement(Text, { type: \"B5\", className: \"break-all text-gray-10 line-clamp-1\", \"aria-label\": \"\\uC0C1\\uD488\\uBA85\" }, goodsName),\r\n                    React.createElement(Text, { type: \"B5\", className: \"break-all text-gray-10 line-clamp-1\", \"aria-label\": \"\\uBAA8\\uB378\\uBA85\" }, modelName),\r\n                    React.createElement(Text, { type: \"B10\", className: \"break-all text-gray-10 line-clamp-2\", \"aria-label\": \"\\uAC00\\uACA9\\uB300\" }, getPriceString(price)),\r\n                    reviewAvg && reviewCnt ? (React.createElement(\"div\", { className: \"mt-[0.4rem]\" },\r\n                        React.createElement(StarRating, { rating: reviewAvg, text: React.createElement(Text, { type: \"D3\", className: \"text-gray-6\" },\r\n                                \"(\",\r\n                                reviewCnt,\r\n                                \")\") }))) : (\"\"))),\r\n            type === \"pick\" && scoreMetaMap && (React.createElement(\"div\", { className: \"hidden w-[33.5rem] mobile:border-l-[1px] border-gray-3 pl-[1.6rem] pc:flex flex-col justify-center\" },\r\n                React.createElement(\"p\", { className: \"font-bold text-body-5 mb-[1.6rem]\", dangerouslySetInnerHTML: {\r\n                        __html: (_b = reviews === null || reviews === void 0 ? void 0 : reviews.filter(function (review) { return review.type === \"nosearch\"; })[0].content) !== null && _b !== void 0 ? _b : \"\",\r\n                    } }),\r\n                React.createElement(Score, { data: scoreMetaMap, type: \"pick\" }))),\r\n            React.createElement(Buttons, { type: type, BookmarkButton: BookmarkButton, CompareButton: CompareButton, likeStatus: likeStatus, compareStatus: compareStatus })),\r\n        type === \"pick\" && scoreMetaMap && (React.createElement(\"div\", { className: \"pc:hidden\" },\r\n            React.createElement(\"div\", { className: \"w-full h-[1px] bg-gray-3 my-[1.2rem]\" }),\r\n            React.createElement(Score, { data: scoreMetaMap, type: \"pick\" }))),\r\n        reviews && reviews.length !== 0 && (React.createElement(React.Fragment, null,\r\n            React.createElement(\"div\", { className: \"\".concat(type === \"home\" &&\r\n                    \"border-t-[1px] border-gray-3\", \" \").concat(type === \"pick\" &&\r\n                    \"pc:hidden pc:border-t-[1px] pc:border-gray-3 pc:pt-[2rem]\") },\r\n                React.createElement(\"div\", { className: \"flex items-center\" },\r\n                    React.createElement(\"div\", { className: \"hideScroll flex overflow-x-scroll space-x-2 pc:overflow-hidden pt-[1.2rem] \".concat(type ===\r\n                            \"pick\" && \"pc:pt-0\") },\r\n                        reviews.map(function (review, i) {\r\n                            return (React.createElement(\"div\", { key: \"nsPick_review\".concat(i) },\r\n                                React.createElement(ReviewBox, { type: type, review: review, reviewCnt: reviews.length, onClickReivewModal: onClickReivewModal, onSetClickedReview: onSetClickedReview })));\r\n                        }),\r\n                        reviews.length > 3 && (React.createElement(\"div\", { className: \"pc:hidden\", onClick: function () {\r\n                                AllReviewsButton && AllReviewsButton();\r\n                            } },\r\n                            React.createElement(Text, { type: \"B2\", className: \"text-gray-10 w-[8.6rem] h-[8.6rem] bg-blue-2 rounded-full flex justify-center items-center\" },\r\n                                \"\\uAD6C\\uB9E4\\uD6C4\\uAE30 \",\r\n                                React.createElement(\"br\", null),\r\n                                \" \\uC804\\uCCB4\\uBCF4\\uAE30\")))))),\r\n            type === \"pick\" && (React.createElement(PcReviewsOnNosearchPick, { reviews: reviews, AllReviewsButton: AllReviewsButton, onClickReivewModal: onClickReivewModal, onSetClickedReview: onSetClickedReview }))))));\r\n};\r\nexport default NosearchPickBox;\r\nvar Buttons = function (props) {\r\n    var type = props.type, BookmarkButton = props.BookmarkButton, CompareButton = props.CompareButton, _a = props.likeStatus, likeStatus = _a === void 0 ? false : _a, _b = props.compareStatus, compareStatus = _b === void 0 ? false : _b;\r\n    var _c = useState(likeStatus), isLiked = _c[0], setIsLiked = _c[1];\r\n    var _d = useState(compareStatus), isCompared = _d[0], setIsCompared = _d[1];\r\n    var onLikeStatus = function (likeStatus) {\r\n        setIsLiked(likeStatus);\r\n    };\r\n    var onCompareStatus = function (compareStatus) {\r\n        setIsCompared(compareStatus);\r\n    };\r\n    useEffect(function () {\r\n        onLikeStatus(likeStatus);\r\n        onCompareStatus(compareStatus);\r\n    }, [likeStatus, compareStatus]);\r\n    return (React.createElement(\"div\", { className: \"w-[4rem] flex flex-col items-center ml-[1rem] \".concat(type ===\r\n            \"pick\" && \"pc:mt-[2.2rem]\") },\r\n        BookmarkButton && (React.createElement(\"button\", { onClick: function (e) {\r\n                e.preventDefault();\r\n                if (e.target.nodeName === \"svg\" || \"path\") {\r\n                    BookmarkButton();\r\n                    onLikeStatus(!isLiked);\r\n                }\r\n            } }, isLiked ? (React.createElement(BookmarkPressed, { size: \"2.4rem\" })) : (React.createElement(BookmarkDefault, { size: \"2.4rem\" })))),\r\n        CompareButton && (React.createElement(\"button\", { onClick: function (e) {\r\n                e.preventDefault();\r\n                if (e.target.nodeName === \"svg\" || \"path\") {\r\n                    CompareButton();\r\n                    onCompareStatus(!isCompared);\r\n                }\r\n            } },\r\n            React.createElement(\"div\", { className: \"mt-[2rem] flex flex-col items-center\" },\r\n                isCompared ? (React.createElement(ComparisonPressed, { size: \"2.4rem\" })) : (React.createElement(ComparisonDefault, { size: \"2.4rem\" })),\r\n                React.createElement(Text, { type: \"D3\", className: \"whitespace-nowrap \".concat(isCompared ? \"text-primary\" : \"text-gray-10\") }, \"\\uBE44\\uAD50\\uD568\"))))));\r\n};\r\nvar PcReviewsOnNosearchPick = function (_a) {\r\n    var reviews = _a.reviews, AllReviewsButton = _a.AllReviewsButton, onClickReivewModal = _a.onClickReivewModal, onSetClickedReview = _a.onSetClickedReview;\r\n    return (React.createElement(\"div\", { className: \"border-t-[1px] border-gray-3 pt-[2rem] mobile:hidden\" },\r\n        React.createElement(\"div\", { className: \"mobile:hidden flex justify-between items-center mb-[1.2rem]\" },\r\n            React.createElement(\"div\", { className: \"flex space-x-[0.6rem]\" },\r\n                React.createElement(Text, { type: \"B2\", className: \"text-gray-10\" }, \"\\uAD6C\\uB9E4 \\uD6C4\\uAE30\"),\r\n                React.createElement(Text, { type: \"B2\", className: \"text-blue-7\" }, reviews.length - 1)),\r\n            reviews.length > 3 && (React.createElement(Button, { size: \"s\", type: \"primary\", onClick: function () {\r\n                    AllReviewsButton && AllReviewsButton();\r\n                } }, \"\\uC804\\uCCB4\\uBCF4\\uAE30\"))),\r\n        React.createElement(SlideWrapper, { size: 3, floatButton: false, buttonStyle: {\r\n                width: \"3rem\",\r\n            } }, reviews\r\n            .filter(function (review) { return review.type === \"user\"; })\r\n            .map(function (review, i) {\r\n            return (React.createElement(\"div\", { key: \"nsPick_review\".concat(i) },\r\n                React.createElement(ReviewBox, { type: \"pick\", review: review, reviewCnt: reviews.length, onClickReivewModal: onClickReivewModal, onSetClickedReview: onSetClickedReview })));\r\n        }))));\r\n};\r\n","references":["/Users/dongyoonkim/Dev/nosearch-react-component/node_modules/@types/react/index.d.ts","/Users/dongyoonkim/Dev/nosearch-react-component/src/components/ColorChips/index.ts","/Users/dongyoonkim/Dev/nosearch-react-component/src/components/PickLabel/index.ts","/Users/dongyoonkim/Dev/nosearch-react-component/src/components/Score/index.ts","/Users/dongyoonkim/Dev/nosearch-react-component/src/components/shared/ns-image.tsx","/Users/dongyoonkim/Dev/nosearch-react-component/src/components/SlideWrapper/index.ts","/Users/dongyoonkim/Dev/nosearch-react-component/src/components/StarRating/index.ts","/Users/dongyoonkim/Dev/nosearch-react-component/src/components/UI/Button/index.ts","/Users/dongyoonkim/Dev/nosearch-react-component/src/components/UI/Heading/index.ts","/Users/dongyoonkim/Dev/nosearch-react-component/src/components/UI/Icon/index.ts","/Users/dongyoonkim/Dev/nosearch-react-component/src/components/UI/Text/index.ts","/Users/dongyoonkim/Dev/nosearch-react-component/src/components/NosearchPick/NosearchPick.types.ts","/Users/dongyoonkim/Dev/nosearch-react-component/src/components/NosearchPick/ReviewBox.tsx"],"dts":{"name":"/Users/dongyoonkim/Dev/nosearch-react-component/lib/components/NosearchPick/NosearchPickBox.d.ts","writeByteOrderMark":false,"text":"import { IReviewData, NosearchPickProps } from \"./NosearchPick.types\";\r\ninterface INosearchPickBox extends NosearchPickProps {\r\n    onClickReivewModal: () => void;\r\n    onSetClickedReview: (review: IReviewData) => void;\r\n}\r\ndeclare const NosearchPickBox: ({ viewType: type, data, index, onClickReivewModal, onSetClickedReview, }: INosearchPickBox) => JSX.Element;\r\nexport default NosearchPickBox;\r\n"}}