{"version":3,"file":"KeyVisual.CXtxKfDP.mjs","names":["useRef","useState","useRef","memo"],"sources":["https:/asset.29cm.co.kr/contents/framer/utils/mediaBuilder.js","https:/asset.29cm.co.kr/contents/framer/components/systems/KeyVisual/KeyVisualImage/KeyVisualImage.js","https:/asset.29cm.co.kr/contents/framer/hooks/useVideoVisibility.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":["var __defProp = Object.defineProperty;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __publicField = (obj, key, value) => {\n  __defNormalProp(obj, typeof key !== \"symbol\" ? key + \"\" : key, value);\n  return value;\n};\nclass MediaBuilder {\n  constructor(src) {\n    __publicField(this, \"src\");\n    this.src = new URL(src);\n  }\n  set(name, value) {\n    this.src.searchParams.set(name, value);\n  }\n  setQuality(quality) {\n    this.set(\"q\", `${quality}`);\n    return this;\n  }\n  setFormat(format) {\n    this.set(\"format\", format);\n    return this;\n  }\n  setWidth(width) {\n    this.set(\"width\", `${width}`);\n    return this;\n  }\n  getSrc() {\n    return this.src.href;\n  }\n  getSrcSet(...widths) {\n    const unique = Array.from(new Set(widths));\n    const array = unique.map((width) => {\n      const url = new URL(this.src);\n      url.searchParams.set(\"width\", `${width * 2}`);\n      return `${url.href} ${width}w`;\n    });\n    return array.join(\",\");\n  }\n}\nconst mediaBuilder = (src) => new MediaBuilder(src);\nexport {\n  mediaBuilder\n};\n","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","import { useInView } from \"framer-motion\";\nimport { useRef, useState, useEffect } from \"react\";\nimport { usePageVisibility } from \"./usePageVisibility.js\";\nconst useVideoVisibility = () => {\n  const videoRef = useRef(null);\n  const isInView = useInView(videoRef);\n  const isPageVisible = usePageVisibility();\n  const [shouldLoadSources, setShouldLoadSources] = useState(false);\n  useEffect(() => {\n    if (isInView && !shouldLoadSources) {\n      setShouldLoadSources(true);\n    }\n  }, [isInView, shouldLoadSources]);\n  useEffect(() => {\n    var _a;\n    if (!videoRef.current) {\n      return;\n    }\n    if (document.visibilityState === \"hidden\") {\n      videoRef.current.pause();\n      return;\n    }\n    if (isInView) {\n      (_a = videoRef.current) == null ? void 0 : _a.play().catch(() => {\n      });\n    } else {\n      videoRef.current.pause();\n    }\n  }, [isInView, isPageVisible]);\n  return {\n    videoRef,\n    isInView,\n    shouldLoadSources\n  };\n};\nexport {\n  useVideoVisibility\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/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, autoPlay: true, 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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"}