{"code":"// Generated with util/create-component.js\r\nimport React, { useEffect, useState } from \"react\";\r\nimport ColorChips from \"../ColorChips\";\r\nimport PickLabel from \"../PickLabel\";\r\nimport StarRating from \"../StarRating\";\r\nimport Button from \"../UI/Button\";\r\nimport Heading from \"../UI/Heading\";\r\nimport { BookmarkDefault, BookmarkPressed, Caret, ComparisonDefault, ComparisonPressed, Share, } from \"../UI/Icon\";\r\nimport Text from \"../UI/Text\";\r\nvar ProductDetailTitle = function (props) {\r\n    var _a = props.data, goodsName = _a.goodsName, modelName = _a.modelName, brandName = _a.brandName, productCategory = _a.productCategory, price = _a.price, pickType = _a.pickType, reviewAvg = _a.reviewAvg, reviewCnt = _a.reviewCnt, colors = _a.colors, likeCount = _a.likeCount, likeStatus = _a.likeStatus, compareStatus = _a.compareStatus, BookmarkButton = _a.BookmarkButton, CompareButton = _a.CompareButton, ShareButton = _a.ShareButton, PayButton = _a.PayButton, ReviewButton = _a.ReviewButton;\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    return (React.createElement(\"div\", { \"data-testid\": \"ProductDetailTitle\", className: \"nrc--ProductDetailTitle pc:flex\" },\r\n        React.createElement(\"div\", { className: \"relative w-full flex justify-center pb-[4.5rem] border-b-[1px] border-gray-3 pc:hidden\" }, colors && (React.createElement(\"div\", { className: \"absolute top-0 left-0\" },\r\n            React.createElement(ColorChips, { colors: colors, chipWidth: \"2\", chipHeight: \"2\", direction: \"column\", shape: \"square\", size: 10 })))),\r\n        React.createElement(\"div\", { className: \"mt-[2rem] flex justify-between items-end pc:items-start pc:ml-[2rem]\" },\r\n            React.createElement(\"div\", null,\r\n                React.createElement(\"div\", { className: \"inline-block \".concat(pickType === \"none\" && \"hidden\") },\r\n                    React.createElement(PickLabel, { pickType: pickType, categoryKr: productCategory, labelStyle: \"mb-[0.4rem] pc:mb-[2rem] pc:text-body-5 pc:px-[0.8rem] pc:py-[0.4rem]\" })),\r\n                React.createElement(\"h1\", { className: \"font-bold text-heading-5 pc:text-heading-4\" },\r\n                    brandName,\r\n                    \" \",\r\n                    goodsName,\r\n                    \" \",\r\n                    modelName),\r\n                React.createElement(Heading, { level: 5, className: \"hidden pc:block pc:mt-[0.4rem]\" }, getPriceString(price)),\r\n                reviewAvg && reviewCnt ? (React.createElement(\"div\", { className: \"mt-[0.4rem] cursor-pointer\", onClick: function () {\r\n                        ReviewButton && ReviewButton();\r\n                    } },\r\n                    React.createElement(StarRating, { rating: reviewAvg, styleFor: {\r\n                            size: 1.3,\r\n                        }, text: React.createElement(Text, { type: \"B5\", className: \"text-gray-10 ml-[0.8rem] flex items-center\" },\r\n                            reviewCnt,\r\n                            \"\\uAC1C\\uC758 \\uAD6C\\uB9E4\\uD6C4\\uAE30 & \\uB9AC\\uBDF0\",\r\n                            React.createElement(\"span\", { className: \"ml-[0.8rem]\" },\r\n                                React.createElement(Caret, { size: 12, color: \"#3A3A3A\" }))) }))) : (\"\"),\r\n                React.createElement(\"div\", { className: \"hidden pc:block\" },\r\n                    React.createElement(Button, { size: \"xl\", type: \"cta\", className: \"w-[30rem]\", onClick: function () {\r\n                            PayButton();\r\n                        } }, \"\\uAD6C\\uB9E4\\uD558\\uAE30\"))),\r\n            React.createElement(\"div\", { className: \"text-center pc:hidden\" },\r\n                React.createElement(\"button\", { onClick: function (e) {\r\n                        e.preventDefault();\r\n                        if (e.target.nodeName === \"svg\" || \"path\") {\r\n                            ShareButton();\r\n                        }\r\n                    } },\r\n                    React.createElement(Share, { size: \"2.4rem\" }),\r\n                    React.createElement(Text, { type: \"D3\", className: \"text-gray-10\" }, \"\\uACF5\\uC720\")))),\r\n        React.createElement(PcButtons, { BookmarkButton: BookmarkButton, CompareButton: CompareButton, ShareButton: ShareButton, likeCount: likeCount, likeStatus: likeStatus, compareStatus: compareStatus })));\r\n};\r\nexport default ProductDetailTitle;\r\nvar PcButtons = function (props) {\r\n    var BookmarkButton = props.BookmarkButton, CompareButton = props.CompareButton, ShareButton = props.ShareButton, _a = props.likeCount, likeCount = _a === void 0 ? 0 : _a, _b = props.likeStatus, likeStatus = _b === void 0 ? false : _b, _c = props.compareStatus, compareStatus = _c === void 0 ? false : _c;\r\n    var _d = useState(likeCount), likeCountState = _d[0], setLikeCount = _d[1];\r\n    var _e = useState(likeStatus), isLiked = _e[0], setIsLiked = _e[1];\r\n    var _f = useState(compareStatus), isCompared = _f[0], setIsCompared = _f[1];\r\n    var onLikeCountStatus = function (likeCount) {\r\n        setLikeCount(likeCount);\r\n    };\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        setLikeCount(likeCount);\r\n        onLikeStatus(likeStatus);\r\n        onCompareStatus(compareStatus);\r\n    }, [likeStatus, compareStatus]);\r\n    return (React.createElement(\"div\", { className: \"hidden pc:flex w-[4rem] h-[40rem] flex-col justify-center items-center ml-[3rem] space-y-[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                    if (isLiked)\r\n                        onLikeCountStatus(likeCount);\r\n                    else\r\n                        onLikeCountStatus(likeCount + 1);\r\n                    onLikeStatus(!isLiked);\r\n                }\r\n            } },\r\n            React.createElement(\"div\", { className: \"flex flex-col items-center\" },\r\n                isLiked ? (React.createElement(BookmarkPressed, { size: \"3rem\" })) : (React.createElement(BookmarkDefault, { size: \"3rem\" })),\r\n                React.createElement(Text, { type: \"B10\", className: \"whitespace-nowrap \".concat(isLiked ? \"text-primary\" : \"text-gray-10\") }, likeCountState)))),\r\n        ShareButton && (React.createElement(\"button\", { onClick: function (e) {\r\n                e.preventDefault();\r\n                if (e.target.nodeName === \"svg\" || \"path\") {\r\n                    ShareButton();\r\n                }\r\n            } },\r\n            React.createElement(Share, { size: \"3rem\" }),\r\n            React.createElement(Text, { type: \"B10\", className: \"text-gray-10\" }, \"\\uACF5\\uC720\"))),\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: \"flex flex-col items-center\" },\r\n                isCompared ? (React.createElement(ComparisonPressed, { size: \"3rem\" })) : (React.createElement(ComparisonDefault, { size: \"3rem\" })),\r\n                React.createElement(Text, { type: \"B10\", className: \"whitespace-nowrap \".concat(isCompared ? \"text-primary\" : \"text-gray-10\") }, \"\\uBE44\\uAD50\\uD568\"))))));\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/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/ProductDetailTitle/ProductDetailTitle.types.ts"],"dts":{"name":"/Users/dongyoonkim/Dev/nosearch-react-component/lib/components/ProductDetailTitle/ProductDetailTitle.d.ts","writeByteOrderMark":false,"text":"import React from \"react\";\r\nimport { ProductDetailTitleProps } from \"./ProductDetailTitle.types\";\r\ndeclare const ProductDetailTitle: React.FC<ProductDetailTitleProps>;\r\nexport default ProductDetailTitle;\r\n"}}