{"version":3,"file":"KeyVisual.l2cISTXP.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 KeyVisualImage = ({\n  style,\n  media,\n  lazy,\n  source\n}) => {\n  if (!source) {\n    return;\n  }\n  const imageWebp = mediaBuilder(source);\n  const image = mediaBuilder(source);\n  return /* @__PURE__ */ jsxs(\"picture\", { children: [\n    /* @__PURE__ */ jsx(\"source\", { srcSet: imageWebp.getSrcSet(), src: imageWebp.getSrc(), media }),\n    /* @__PURE__ */ jsx(\"img\", { style, loading: lazy ? \"lazy\" : \"eager\", sizes: \"100vw\", srcSet: imageWebp.getSrcSet(), src: image.getSrc(), 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 \"../../../../node_modules/js-cookie/dist/js.cookie.js\";\nimport \"../../../../apis/highlight-products/HighlightProductsApiService.js\";\nimport \"../../../../apis/brand-mix/BrandMixApiService.js\";\nimport \"../../../../apis/one-brand-days/OneBrandDaysApiService.js\";\nimport \"../../../../apis/taste-sharing/TasteSharingApiService.js\";\nimport \"../../../../apis/user/UserApiService.js\";\nimport \"../../../../apis/preuser/PreuserApiService.js\";\nimport \"../../../../node_modules/vite-plugin-node-polyfills/shims/buffer/dist/index.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 \"../../../../hooks/useFeatureFlag.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: \"metadata\", 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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"}