{"code":"// Generated with util/create-component.js\r\nimport React, { useEffect, useRef, useState } from \"react\";\r\nimport NsImage from \"../shared/ns-image\";\r\nimport StarRating from \"../StarRating\";\r\nimport Button from \"../UI/Button\";\r\nimport Heading from \"../UI/Heading\";\r\nimport { Caret } from \"../UI/Icon\";\r\nimport Text from \"../UI/Text\";\r\nvar ProductReview = function (props) {\r\n    var _a = props.data, writerNm = _a.writerNm, goodsPt = _a.goodsPt, regDt = _a.regDt, content = _a.content, imageUrls = _a.imageUrls, _b = _a.isUseful, isUseful = _b === void 0 ? false : _b, onClickUseful = _a.onClickUseful;\r\n    var contentRef = useRef(null);\r\n    var _c = useState(isUseful), _isUseful = _c[0], setIsUseful = _c[1];\r\n    var _d = useState(false), hasOpenBtn = _d[0], setHasOpenBtn = _d[1];\r\n    var _e = useState(false), isOpened = _e[0], setIsOpened = _e[1];\r\n    useEffect(function () {\r\n        var _a;\r\n        var contentDivScroll = contentRef.current\r\n            .scrollHeight;\r\n        var contentTextScroll = ((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.childNodes[0]).scrollHeight;\r\n        if (contentTextScroll > contentDivScroll || imageUrls.length > 0)\r\n            setHasOpenBtn(true);\r\n    }, [contentRef.current]);\r\n    return (React.createElement(\"div\", { \"data-testid\": \"ProductReview\", className: \"nrc--ProductReview w-[33.5rem] pc:w-[80rem] \".concat(hasOpenBtn &&\r\n            \"cursor-pointer\"), onClick: function (e) {\r\n            var target = e.target;\r\n            if (target.nodeName === \"BUTTON\" ||\r\n                target.nodeName === \"IMG\" ||\r\n                target.tagName === \"H3\")\r\n                return;\r\n            setIsOpened(!isOpened);\r\n        } },\r\n        React.createElement(\"div\", { className: \"flex justify-between items-center\" },\r\n            React.createElement(\"div\", { className: \"flex items-center\" },\r\n                React.createElement(StarRating, { rating: goodsPt, styleFor: { size: 1.5 } }),\r\n                React.createElement(\"div\", { className: \"w-[1px] h-[1.5rem] mx-[1rem] bg-gray-3\" }),\r\n                React.createElement(Text, { type: \"B9\", className: \"text-gray-10\" }, writerNm)),\r\n            React.createElement(Text, { type: \"D3\", className: \"text-gray-6\" }, regDt && regDt.substring(0, 10).replace(/-/g, \".\"))),\r\n        React.createElement(\"div\", { className: \"pc:flex pc:items-center pc:justify-between\" },\r\n            React.createElement(\"div\", { ref: contentRef, className: \"mt-[1.6rem]\" },\r\n                React.createElement(Text, { type: \"B4\", className: \"text-gray-10 whitespace-pre-wrap \".concat(!isOpened &&\r\n                        \"line-clamp-4\") }, content)),\r\n            imageUrls.length > 0 && !isOpened && (React.createElement(ThumnailImage, { imageUrl: imageUrls[0], imageCount: imageUrls.length }))),\r\n        isOpened && imageUrls.length <= 7 && (React.createElement(\"div\", { className: \"mt-[1.6rem] space-y-[1rem] pc:flex pc:space-x-[1rem] pc:space-y-0\" }, imageUrls.map(function (image) {\r\n            return (React.createElement(\"div\", { className: \"relative w-[33.5rem] object-contain pc:w-[10rem] pc:h-[10rem] pc:object-cover\" },\r\n                React.createElement(NsImage, { imageUrl: image, className: \"w-[33.5rem] object-contain pc:w-[10rem] pc:h-[10rem] pc:object-cover\" })));\r\n        }))),\r\n        isOpened && imageUrls.length > 7 && (React.createElement(\"div\", { className: \"mt-[1.6rem] space-y-[1rem] pc:flex pc:items-center pc:space-x-[1rem] pc:space-y-0\" },\r\n            imageUrls.map(function (image, i) {\r\n                return (React.createElement(\"div\", { className: \"relative w-[33.5rem] object-contain pc:w-[10rem] pc:h-[10rem] pc:object-cover \".concat(i >=\r\n                        6 && \"pc:hidden\") },\r\n                    React.createElement(NsImage, { imageUrl: image, className: \"w-[33.5rem] object-contain pc:w-[10rem] pc:h-[10rem] pc:object-cover\" })));\r\n            }),\r\n            React.createElement(ThumnailImage, { imageUrl: imageUrls[7], imageCount: imageUrls.length - 7, openedReivew: true }))),\r\n        React.createElement(\"div\", { className: \"flex justify-between items-center mt-[1.6rem]\" },\r\n            React.createElement(Button, { size: \"s\", type: \"outline\", color: \"\".concat(_isUseful ? \"blue\" : \"gray\"), className: \"w-[7rem]\", onClick: function () {\r\n                    onClickUseful();\r\n                    setIsUseful(!_isUseful);\r\n                } }, \"\\uB3C4\\uC6C0\\uC774 \\uB3FC\\uC694\"),\r\n            hasOpenBtn && (React.createElement(\"div\", { className: \"flex items-center space-x-[0.5rem]\" },\r\n                React.createElement(Text, { type: \"B8\", className: \"text-gray-10\" },\r\n                    \"\\uB9AC\\uBDF0 \",\r\n                    isOpened ? \"접기\" : \"펼치기\"),\r\n                React.createElement(\"div\", { className: \"\".concat(isOpened ? \"rotate-[270deg]\" : \"rotate-90\") },\r\n                    React.createElement(Caret, { size: \"1.8rem\" })))))));\r\n};\r\nexport default ProductReview;\r\nvar ThumnailImage = function (props) {\r\n    var imageUrl = props.imageUrl, imageCount = props.imageCount, _a = props.openedReivew, openedReivew = _a === void 0 ? false : _a;\r\n    return (React.createElement(\"div\", { className: \"relative pc:flex-shrink-0 pc:ml-[2rem] \".concat(openedReivew\r\n            ? \"hidden pc:inline-block w-[10rem] h-[10rem]\"\r\n            : \"w-[7.2rem] h-[7.2rem] mt-[1.6rem]\") },\r\n        React.createElement(\"div\", { className: \"relative object-cover \".concat(openedReivew ? \"w-[10rem] h-[10rem]\" : \"w-[7.2rem] h-[7.2rem]\") },\r\n            React.createElement(NsImage, { imageUrl: imageUrl, className: \"object-cover \".concat(openedReivew ? \"w-[10rem] h-[10rem]\" : \"w-[7.2rem] h-[7.2rem]\") })),\r\n        imageCount > 1 && (React.createElement(\"div\", null,\r\n            React.createElement(\"div\", { className: \"bg-black opacity-30 absolute top-0 left-0 \".concat(openedReivew ? \"w-[10rem] h-[10rem]\" : \"w-[7.2rem] h-[7.2rem]\") }),\r\n            React.createElement(\"div\", { className: \"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center\" },\r\n                React.createElement(Heading, { level: 3, className: \"text-white\" },\r\n                    \"+\",\r\n                    imageCount - 1))))));\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/shared/ns-image.tsx","/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/ProductReview/ProductReview.types.ts"],"dts":{"name":"/Users/dongyoonkim/Dev/nosearch-react-component/lib/components/ProductReview/ProductReview.d.ts","writeByteOrderMark":false,"text":"import React from \"react\";\r\nimport { ProductReviewProps } from \"./ProductReview.types\";\r\ndeclare const ProductReview: React.FC<ProductReviewProps>;\r\nexport default ProductReview;\r\n"}}