{"version":3,"file":"KeyVisual.BZIMiz03.mjs","names":["useRef","memo"],"sources":["https:/asset.29cm.co.kr/contents/framer/components/systems/KeyVisual/KeyVisualImage/KeyVisualImage.js","https:/asset.29cm.co.kr/contents/framer/components/systems/KeyVisual/KeyVisual.constants.js","https:/asset.29cm.co.kr/contents/framer/components/systems/KeyVisual/KeyVisualVideo/KeyVisualVideo.js","https:/asset.29cm.co.kr/contents/framer/components/systems/KeyVisual/KeyVisual.js","https:/framerusercontent.com/modules/Jd4PPpQoFAzEN1eFj2F3/r6FRCVvPZdkepdglxjqL/KeyVisual.js"],"sourcesContent":["import { jsxs, jsx } from \"react/jsx-runtime\";\nimport { mediaBuilder } from \"../../../../utils/mediaBuilder.js\";\nconst SRC_SET_WIDTHS = [540, 1024, 1440];\nconst KeyVisualImage = ({\n  style,\n  media,\n  lazy,\n  source\n}) => {\n  if (!source) {\n    return;\n  }\n  const imageWebp = mediaBuilder(source).setFormat(\"webp\").setQuality(90);\n  const image = mediaBuilder(source).setQuality(90);\n  return /* @__PURE__ */ jsxs(\"picture\", { children: [\n    /* @__PURE__ */ jsx(\"source\", { srcSet: imageWebp.getSrcSet(...SRC_SET_WIDTHS), src: imageWebp.getSrc(), media }),\n    /* @__PURE__ */ jsx(\"img\", { style, loading: lazy ? \"lazy\" : \"eager\", sizes: \"100vw\", srcSet: image.getSrcSet(...SRC_SET_WIDTHS), src: source, alt: source })\n  ] });\n};\nexport {\n  KeyVisualImage\n};\n","var Breakpoint = /* @__PURE__ */ ((Breakpoint2) => {\n  Breakpoint2[Breakpoint2[\"DESKTOP\"] = 0] = \"DESKTOP\";\n  Breakpoint2[Breakpoint2[\"TABLET\"] = 1] = \"TABLET\";\n  Breakpoint2[Breakpoint2[\"MOBILE\"] = 2] = \"MOBILE\";\n  return Breakpoint2;\n})(Breakpoint || {});\nvar MediaType = /* @__PURE__ */ ((MediaType2) => {\n  MediaType2[MediaType2[\"VIDEO\"] = 0] = \"VIDEO\";\n  MediaType2[MediaType2[\"IMAGE\"] = 1] = \"IMAGE\";\n  return MediaType2;\n})(MediaType || {});\nexport {\n  Breakpoint,\n  MediaType\n};\n","import { jsx, jsxs } from \"react/jsx-runtime\";\nimport { useInView } from \"framer-motion\";\nimport { useRef } from \"react\";\nimport \"../../../../node_modules/@firebase/analytics/dist/esm/index.esm2017.js\";\nimport \"../../../../node_modules/firebase/app/dist/esm/index.esm.js\";\nimport \"../../../../node_modules/swr/core/dist/index.js\";\nimport \"../../../../apis/user-segment/CategoryFirstOrderApiService.js\";\nimport \"../../../../config/index.js\";\nimport \"../../../../apis/taste-sharing/TasteSharingApiService.js\";\nimport \"../../../../node_modules/vite-plugin-node-polyfills/shims/buffer/dist/index.js\";\nimport \"../../../../node_modules/js-cookie/dist/js.cookie.js\";\nimport \"../../../../apis/preuser/PreuserApiService.js\";\nimport \"framer\";\nimport \"../../../../node_modules/@29cm/snowplow/dist/esm/core/snowplow.js\";\nimport \"../../../../node_modules/swr/mutation/dist/index.js\";\nimport \"../../../../hooks/stores/content/content.store.js\";\nimport \"../../../../hooks/stores/dialog/dialog.store.js\";\nimport \"../../../../hooks/stores/global-layout/global-layout.store.js\";\nimport \"../../../../hooks/stores/toast/toast.store.js\";\nimport \"../../../@shared/providers/ThemeProvider/ThemeProvider.js\";\nimport \"../../../@shared/providers/BreakpointProvider/BreakpointProvider.js\";\nimport \"../../../../hooks/stores/bottom-sheet/bottom-sheet.store.js\";\nimport \"react-dom\";\nimport \"../../Dialog/Dialog.module.css.js\";\nimport \"../../../../containers/DialogContainer/DialogContainer.emitter.js\";\nimport { useVideoVisibility } from \"../../../../hooks/useVideoVisibility.js\";\nimport \"../../../../utils/redirectLogin.js\";\nimport \"../../../../utils/event-properties/source.js\";\nimport { querify } from \"../../../../utils/querify.js\";\nimport { Breakpoint } from \"../KeyVisual.constants.js\";\nconst KeyVisualVideoInner = ({\n  poster,\n  sourceWebm,\n  source,\n  style,\n  breakpoint,\n  media\n}) => {\n  const {\n    videoRef\n  } = useVideoVisibility();\n  const query = querify({\n    width: posterWidthByBreakpoint[breakpoint],\n    q: 90\n  });\n  return /* @__PURE__ */ jsx(\"div\", { style: {\n    position: \"relative\",\n    ...style\n  }, children: /* @__PURE__ */ jsxs(\"video\", { ref: videoRef, playsInline: true, muted: true, loop: true, preload: \"auto\", style: {\n    width: \"100%\",\n    height: \"100%\",\n    objectFit: \"cover\",\n    overflow: \"hidden\",\n    backgroundImage: `url(${poster})`,\n    backgroundPosition: \"center\",\n    backgroundSize: \"cover\"\n  }, poster: `${poster}?${query}`, children: [\n    sourceWebm && /* @__PURE__ */ jsx(\"source\", { type: \"video/webm\", src: sourceWebm, media }),\n    /* @__PURE__ */ jsx(\"source\", { type: \"video/mp4\", src: source, media })\n  ] }) });\n};\nconst KeyVisualVideo = ({\n  style,\n  lazy,\n  ...rest\n}) => {\n  const ref = useRef(null);\n  const isInView = useInView(ref, {\n    margin: \"400px 0px\",\n    once: true\n  });\n  if (lazy && !isInView) {\n    return /* @__PURE__ */ jsx(\"div\", { ref, style });\n  }\n  return /* @__PURE__ */ jsx(KeyVisualVideoInner, { style, ...rest });\n};\nconst posterWidthByBreakpoint = {\n  [Breakpoint.DESKTOP]: void 0,\n  [Breakpoint.TABLET]: 1440,\n  [Breakpoint.MOBILE]: 1024\n};\nexport {\n  KeyVisualVideo\n};\n","import { jsx } from \"react/jsx-runtime\";\nimport { addPropertyControls, ControlType } from \"framer\";\nimport { memo } from \"react\";\nimport { KeyVisualImage } from \"./KeyVisualImage/KeyVisualImage.js\";\nimport { KeyVisualVideo } from \"./KeyVisualVideo/KeyVisualVideo.js\";\nimport { MediaType, Breakpoint } from \"./KeyVisual.constants.js\";\nconst KeyVisual = memo(({\n  style,\n  breakpoint,\n  type,\n  lazy,\n  poster,\n  sourceWebm,\n  source,\n  sourceImage\n}) => {\n  if (type === MediaType.IMAGE) {\n    return /* @__PURE__ */ jsx(KeyVisualImage, { style: {\n      ...style,\n      ...mediaStyle\n    }, media: mediaByBreakpoint[breakpoint], lazy, source: sourceImage });\n  }\n  return /* @__PURE__ */ jsx(KeyVisualVideo, { style: {\n    ...style,\n    ...mediaStyle\n  }, breakpoint, lazy, media: mediaByBreakpoint[breakpoint], poster, sourceWebm, source });\n});\nconst mediaByBreakpoint = {\n  [Breakpoint.DESKTOP]: \"(min-width: 1025px)\",\n  [Breakpoint.TABLET]: \"(min-width: 541px)\",\n  [Breakpoint.MOBILE]: void 0\n};\nconst mediaStyle = {\n  width: \"100%\",\n  height: \"100%\",\n  display: \"block\",\n  objectFit: \"cover\",\n  objectPosition: \"50% 50%\",\n  background: \"transparent\",\n  border: 0,\n  outline: \"none\"\n};\nconst isVideo = ({\n  type\n}) => type === MediaType.VIDEO;\nconst isImage = ({\n  type\n}) => type === MediaType.IMAGE;\naddPropertyControls(KeyVisual, {\n  breakpoint: {\n    type: ControlType.Enum,\n    title: \"분기점\",\n    options: [Breakpoint.DESKTOP, Breakpoint.TABLET, Breakpoint.MOBILE],\n    optionTitles: [\"PC\", \"Tablet\", \"Mobile\"],\n    displaySegmentedControl: true\n  },\n  type: {\n    type: ControlType.Enum,\n    title: \"미디어 유형\",\n    options: [MediaType.VIDEO, MediaType.IMAGE],\n    optionTitles: [\"Video\", \"Image\"],\n    defaultValue: MediaType.VIDEO,\n    displaySegmentedControl: true\n  },\n  lazy: {\n    type: ControlType.Boolean,\n    title: \"지연 로드\",\n    description: \"활성화할 경우 미디어가 화면상에 노출되기 직전에 로드됩니다.\",\n    defaultValue: false\n  },\n  poster: {\n    hidden: isImage,\n    type: ControlType.String,\n    title: \"포스터\",\n    description: \"영상이 자동재생되지 않는 환경(ex. 저전력 모드)에서 임시로 노출할 이미지 링크를 입력합니다.\"\n  },\n  sourceWebm: {\n    hidden: isImage,\n    type: ControlType.String,\n    title: \"영상 링크 (.webm)\",\n    description: \".webm 포맷의 영상 링크를 입력합니다.\"\n  },\n  source: {\n    hidden: isImage,\n    type: ControlType.String,\n    title: \"영상 링크 (.mp4)\",\n    description: \".mp4 포맷의 영상 링크를 입력합니다.\"\n  },\n  sourceImage: {\n    hidden: isVideo,\n    type: ControlType.String,\n    title: \"이미지 링크\",\n    description: \"img.29cm.co.kr 주소로 된 이미지 링크를 입력합니다.\"\n  }\n});\nexport {\n  KeyVisual\n};\n","import{KeyVisual}from\"https://asset.29cm.co.kr/contents/framer/components/systems/KeyVisual/KeyVisual.js\";// import { KeyVisual } from \"https://asset.29cm.co.kr/contents/framer/dev/components/systems/KeyVisual/KeyVisual.js\"\n// import { KeyVisual } from \"http://localhost:4173/components/systems/KeyVisual/KeyVisual.js\"\nKeyVisual.displayName=\"KeyVisual\";/**\n * @framerDisableUnlink\n */export default KeyVisual;\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"KeyVisual\",\"slots\":[],\"annotations\":{\"framerDisableUnlink\":\"\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./KeyVisual.map"],"mappings":"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"}