{"version":3,"file":"static/chunks/438-965452f06c9e1061.js","mappings":"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","sources":["webpack:///./public/icons/logo/card-logo.svg","webpack:///./public/images/4cut-ranking/dummy-photo-card.webp","webpack:///./src/components/photo-card/PhotoCard.tsx","webpack:///./src/components/photo-card/PhotoCardImageZoom.tsx","webpack:///<anon>"],"sourcesContent":["var _path, _g, _g2, _defs;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nvar SvgCardLogo = function SvgCardLogo(props) {\n  return /*#__PURE__*/React.createElement(\"svg\", _extends({\n    xmlns: \"http://www.w3.org/2000/svg\",\n    fill: \"none\",\n    viewBox: \"0 0 99 14\"\n  }, props), /*#__PURE__*/React.createElement(\"mask\", {\n    id: \"card-logo_svg__a\",\n    width: 99,\n    height: 14,\n    x: 0,\n    y: 0,\n    maskUnits: \"userSpaceOnUse\",\n    style: {\n      maskType: \"alpha\"\n    }\n  }, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n    fill: \"#fff\",\n    d: \"M.208.137h98.584V14H.208z\"\n  }))), /*#__PURE__*/React.createElement(\"g\", {\n    mask: \"url(#card-logo_svg__a)\"\n  }, /*#__PURE__*/React.createElement(\"mask\", {\n    id: \"card-logo_svg__c\",\n    width: 97,\n    height: 12,\n    x: 1,\n    y: 1,\n    maskUnits: \"userSpaceOnUse\",\n    style: {\n      maskType: \"alpha\"\n    }\n  }, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n    fill: \"#121214\",\n    clipPath: \"url(#card-logo_svg__b)\"\n  }, /*#__PURE__*/React.createElement(\"path\", {\n    d: \"M1.772 1.9H6.75c1.302 0 2.33.322 3.095.968s1.153 1.569 1.153 2.782-.388 2.137-1.153 2.782c-.766.657-1.805.98-3.095.98H4.969v3.015H1.772zM6.146 6.94c.49 0 .879-.1 1.153-.29s.422-.522.422-1.012-.137-.801-.422-.99c-.274-.19-.662-.29-1.153-.29H4.969v2.57h1.177zM11.766 1.9h3.198v3.873h3.597V1.9h3.198v10.528H18.56v-4.04h-3.597v4.04h-3.198zM25.56 11.96a5.2 5.2 0 0 1-2.102-1.936c-.514-.824-.765-1.781-.765-2.85 0-1.068.251-2.025.765-2.86a5.3 5.3 0 0 1 2.101-1.947c.891-.456 1.884-.69 2.98-.69s2.08.234 2.959.69a5.35 5.35 0 0 1 2.09 1.948c.513.834.765 1.791.765 2.86s-.252 2.025-.766 2.849a5.4 5.4 0 0 1-2.09 1.936c-.879.467-1.872.69-2.957.69a6.5 6.5 0 0 1-2.98-.69m4.27-2.537c.389-.2.697-.501.914-.89.228-.39.343-.846.343-1.358 0-.768-.24-1.391-.731-1.848-.48-.467-1.097-.69-1.828-.69-.73 0-1.358.234-1.85.69-.49.457-.73 1.08-.73 1.848 0 .523.114.979.342 1.357.229.39.537.68.925.89.388.212.834.312 1.313.312.48 0 .903-.1 1.29-.311zM37.4 4.526h-2.901V1.9h9.01v2.615h-2.9v7.901H37.41v-7.89zM46.222 11.96a5.2 5.2 0 0 1-2.101-1.936c-.514-.824-.765-1.781-.765-2.85 0-1.068.251-2.025.765-2.86a5.3 5.3 0 0 1 2.101-1.947c.89-.456 1.884-.69 2.97-.69 1.084 0 2.078.234 2.957.69a5.35 5.35 0 0 1 2.09 1.948c.514.834.765 1.791.765 2.86s-.251 2.025-.765 2.849a5.4 5.4 0 0 1-2.09 1.936c-.88.467-1.873.69-2.958.69s-2.078-.234-2.969-.69m4.271-2.537c.388-.2.697-.501.914-.89.228-.39.342-.846.342-1.358 0-.768-.24-1.391-.73-1.848-.48-.467-1.097-.69-1.828-.69-.73 0-1.359.234-1.85.69-.49.457-.73 1.08-.73 1.848 0 .523.114.979.342 1.357.228.39.537.68.925.89.388.212.834.312 1.313.312.48 0 .902-.1 1.29-.311zM58.507 11.993c-.891-.445-1.588-1.08-2.067-1.892-.48-.823-.731-1.791-.731-2.926s.24-2.104.73-2.927c.48-.824 1.177-1.458 2.068-1.903.89-.445 1.941-.668 3.14-.668q2.415 0 3.769.868v2.871a4.6 4.6 0 0 0-1.53-.723c-.572-.156-1.223-.223-1.965-.223-.97 0-1.701.234-2.204.713-.502.467-.754 1.135-.754 1.992s.24 1.569.72 2.025 1.176.69 2.078.69c.446 0 .8-.056 1.085-.178V8.377h-1.484v-1.97h4.408v5.275c-1.097.668-2.467.99-4.123.99-1.199 0-2.238-.222-3.14-.667zM67.003 1.9h5.025c1.301 0 2.318.322 3.072.957.753.634 1.13 1.558 1.13 2.76 0 .779-.171 1.446-.502 2.003-.331.556-.811.98-1.428 1.269l1.805 3.539h-3.278l-1.576-3.083h-1.05v3.082h-3.198zm4.385 4.974c.491 0 .88-.089 1.154-.278q.41-.284.41-.968c0-.456-.136-.79-.41-.968-.275-.19-.663-.279-1.154-.279h-1.187v2.504h1.187zM80.477 1.9h3.072l4.317 10.528h-3.278l-.8-2.004h-3.54l-.822 2.004H76.15zm2.57 6.154-1.04-2.95-1.039 2.95h2.0780000000000003M89.945 8.421 86.005 1.9h3.414l2.136 3.628L93.827 1.9h3.404L93.154 8.42v4.007h-3.198V8.42z\"\n  })))), _g2 || (_g2 = /*#__PURE__*/React.createElement(\"g\", {\n    mask: \"url(#card-logo_svg__c)\"\n  }, /*#__PURE__*/React.createElement(\"path\", {\n    fill: \"url(#card-logo_svg__d)\",\n    d: \"M-7.212-1.316h113.761v17.962H-7.212z\"\n  })))), _defs || (_defs = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"linearGradient\", {\n    id: \"card-logo_svg__d\",\n    x1: 6.534,\n    x2: 10.721,\n    y1: 0.929,\n    y2: 30.969,\n    gradientUnits: \"userSpaceOnUse\"\n  }, /*#__PURE__*/React.createElement(\"stop\", {\n    stopColor: \"#121214\"\n  }), /*#__PURE__*/React.createElement(\"stop\", {\n    offset: 0.27,\n    stopColor: \"#505256\"\n  }), /*#__PURE__*/React.createElement(\"stop\", {\n    offset: 0.755,\n    stopColor: \"#212124\"\n  }), /*#__PURE__*/React.createElement(\"stop\", {\n    offset: 0.885,\n    stopColor: \"#5D6064\"\n  }), /*#__PURE__*/React.createElement(\"stop\", {\n    offset: 1,\n    stopColor: \"#9599A0\"\n  })), /*#__PURE__*/React.createElement(\"clipPath\", {\n    id: \"card-logo_svg__b\"\n  }, /*#__PURE__*/React.createElement(\"path\", {\n    fill: \"#fff\",\n    d: \"M1.772 1.677H97.23V12.65H1.77z\"\n  })))));\n};\nexport default SvgCardLogo;","export default {\"src\":\"/_next/static/media/dummy-photo-card.ff9a4cdb.webp\",\"height\":460,\"width\":306,\"blurDataURL\":\"data:image/webp;base64,UklGRkYAAABXRUJQVlA4IDoAAACQAQCdASoFAAgAAkA4JaQAApplHeAA/v24DZGPnfPAunPfFPGVa2pX+kG73OiQr8/mx9E4DNG2QAAA\",\"blurWidth\":5,\"blurHeight\":8};","import * as React from 'react';\nimport { ReactElement, Ref } from 'react';\nimport Image from 'next/image';\nimport { validate as uuidValidate } from 'uuid';\nimport styled, { css } from 'styled-components';\nimport Logo from '@icons/logo/card-logo.svg';\nimport Text from '@components/common/Text';\nimport dummyPhotoCardImage from '@public/images/4cut-ranking/dummy-photo-card.webp';\nimport PhotoCardImageZoom from '@components/photo-card/PhotoCardImageZoom';\nimport Icon from '@src/svg/Icon';\n\ntype PhotoCardSizeType = 'XS' | 'S' | 'M' | 'L';\n\nconst photoCardSizeStyle = {\n  XS: css`\n    width: 35vw;\n    max-width: 131px;\n    padding: 4px 4px 5px;\n    border-radius: 12px 12px 16px 16px;\n\n    .logo {\n      height: 7px;\n      margin-top: 7px;\n    }\n\n    .image-wrap {\n      position: relative;\n      width: calc(35vw - 8px);\n      max-width: 123px;\n      height: calc((35vw - 8px) * 1.5);\n      max-height: calc(123px * 1.5);\n\n      img {\n        border-radius: 10px 10px 14px 14px;\n        object-fit: cover;\n      }\n    }\n  `,\n  S: css`\n    width: calc(50vw - 26px);\n    max-width: calc(240px - 26px);\n    padding: 4px;\n    border-radius: 12px 12px 16px 16px;\n\n    .logo {\n      height: 9px;\n      margin-top: 7px;\n    }\n\n    .image-wrap {\n      position: relative;\n      width: calc(50vw - 34px);\n      max-width: calc(240px - 34px);\n      height: calc((50vw - 34px) * 1.5);\n      max-height: calc((240px - 34px) * 1.5);\n\n      img {\n        border-radius: 10px 10px 14px 14px;\n        object-fit: cover;\n      }\n    }\n  `,\n  M: css`\n    width: 58vw;\n    max-width: 216px;\n    padding: 6px;\n    border-radius: 16px 16px 20px 20px;\n\n    .logo {\n      height: 14px;\n      margin-top: 11px;\n    }\n\n    .image-wrap {\n      position: relative;\n      width: calc(58vw - 12px);\n      max-width: 204px;\n      height: calc((58vw - 12px) * 1.5);\n      max-height: calc(204px * 1.5);\n\n      img {\n        border-radius: 13px 13px 18px 18px;\n        object-fit: cover;\n      }\n    }\n  `,\n  L: css`\n    width: calc(100vw - 126px);\n    max-width: 240px;\n    padding: 6px;\n    border-radius: 16px 16px 20px 20px;\n\n    .logo {\n      height: 14px;\n      margin-top: 11px;\n    }\n\n    .image-wrap {\n      position: relative;\n      width: calc(100vw - 138px);\n      max-width: calc(240px - 12px);\n      height: calc((100vw - 138px) * 1.58);\n      max-height: calc((240px - 12px) * 1.58);\n\n      img {\n        border-radius: 13px 13px 18px 18px;\n        object-fit: cover;\n      }\n    }\n  `,\n};\n\nconst PhotoCardWrap = styled.div<{\n  size: PhotoCardSizeType;\n}>`\n  background: linear-gradient(\n    135.79deg,\n    #cce8fe 4.21%,\n    #cda0ff 27.68%,\n    #8489f5 43.08%,\n    #cdf1ff 73.52%,\n    #b591e9 101.38%\n  );\n  box-shadow: 0 3px 3px 1px rgba(255, 255, 255, 0.6) inset;\n  position: relative;\n  text-align: center;\n  ${({ size }) => photoCardSizeStyle[size]};\n  height: fit-content;\n`;\n\nconst DimmedWrap = styled.div`\n  width: calc(100% + 1px);\n  height: calc(100% + 1px);\n  border-radius: inherit;\n  background: #000000b2;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n  backdrop-filter: blur(2px);\n  z-index: ${({ theme }) => theme.zIndex.photoCard.dimmed};\n`;\n\ninterface Props {\n  photoCardInfo?: Partial<PhotoCardType>;\n  size: PhotoCardSizeType;\n  handleClick?: () => void;\n  showBottomLogo?: boolean;\n  dummy?: boolean;\n  dimmed?: boolean;\n  lazy?: boolean;\n  photoRef?: Ref<HTMLDivElement>;\n  additionalContent?: ReactElement;\n  enableZoom?: boolean;\n}\n\nconst DimmedOverlap = ({\n  size,\n  status,\n  statusCause,\n}: {\n  size: PhotoCardSizeType;\n  status: string;\n  statusCause?: string;\n}) => {\n  return (\n    <DimmedWrap>\n      {(status === 'APPLIED' || status === 'REJECTED') && (\n        <Icon name=\"card-lock\" width={29} height={28} />\n      )}\n      {size !== 'XS' && status === 'APPLIED' && (\n        <Text\n          typo={size === 'S' ? 'body3_semiBold' : 'heading2_semiBold'}\n          color=\"white\"\n        >\n          포토카드 심사중\n        </Text>\n      )}\n      {size !== 'XS' && status === 'REJECTED' && (\n        <>\n          <Text\n            typo={size === 'S' ? 'body3_semiBold' : 'heading2_semiBold'}\n            color=\"white\"\n          >\n            참가 제한\n          </Text>\n          {size === 'L' && (\n            <Text typo=\"caption2\" color=\"white\">\n              {statusCause}\n            </Text>\n          )}\n        </>\n      )}\n    </DimmedWrap>\n  );\n};\n\nconst PhotoCard: React.FC<Props & React.HTMLAttributes<HTMLDivElement>> = ({\n  photoCardInfo,\n  size,\n  handleClick,\n  showBottomLogo = true,\n  dummy = false,\n  dimmed = false,\n  lazy = true,\n  photoRef,\n  additionalContent,\n  enableZoom,\n  ...rest\n}) => {\n  const isDimmed =\n    dimmed ||\n    photoCardInfo?.status === 'APPLIED' ||\n    photoCardInfo?.status === 'REJECTED';\n\n  return (\n    <>\n      <PhotoCardWrap\n        ref={photoRef}\n        data-testid=\"photo-card\"\n        size={size}\n        onClick={() => {\n          if (\n            photoCardInfo &&\n            photoCardInfo.photoCardId &&\n            uuidValidate(photoCardInfo.photoCardId) &&\n            handleClick\n          ) {\n            handleClick();\n          }\n        }}\n        {...rest}\n      >\n        <div className={`size_${size} image-wrap`}>\n          {dummy && (\n            <Image\n              id=\"photo-card\"\n              src={dummyPhotoCardImage}\n              alt=\"\"\n              fill\n              priority={!lazy}\n              sizes=\"300px\"\n              loading={lazy ? 'lazy' : 'eager'}\n            />\n          )}\n          {!dummy && photoCardInfo?.thumbnailPhotoUrl && (\n            <Image\n              id=\"photo-card\"\n              src={photoCardInfo.thumbnailPhotoUrl}\n              alt={photoCardInfo.thumbnailPhotoUrl}\n              fill\n              priority={!lazy}\n              sizes=\"300px\"\n              loading={lazy ? 'lazy' : 'eager'}\n            />\n          )}\n          {!isDimmed && enableZoom && (\n            <PhotoCardImageZoom\n              thumbnailPhotoUrl={photoCardInfo?.thumbnailPhotoUrl || ''}\n            />\n          )}\n        </div>\n\n        {showBottomLogo && <Logo className=\"logo\" />}\n\n        {isDimmed && (\n          <DimmedOverlap\n            size={size}\n            status={photoCardInfo?.status as PhotoCardStatusType}\n            statusCause={photoCardInfo?.statusCause || undefined}\n          />\n        )}\n\n        {additionalContent && additionalContent}\n      </PhotoCardWrap>\n    </>\n  );\n};\n\nexport default PhotoCard;\n","import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';\nimport Image from 'next/image';\nimport * as React from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\nimport { GlobalPortal } from '../portal/GlobalPortal';\n\nconst OriginalImageAreaWrap = styled(Image)`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n`;\n\nconst ImageWrap = styled.div<{\n  $isZoom: boolean;\n  $initialImageInfo: { height: number; width: number; x: number; y: number };\n}>`\n  ${({ $isZoom }) =>\n    $isZoom\n      ? css`\n          opacity: 1;\n        `\n      : css`\n          opacity: 0;\n        `}\n  position: absolute;\n  width: ${({ $initialImageInfo }) => $initialImageInfo.width}px;\n  height: ${({ $initialImageInfo }) => $initialImageInfo.height}px;\n  left: ${({ $initialImageInfo }) => $initialImageInfo.x}px;\n  top: ${({ $initialImageInfo }) => $initialImageInfo.y}px;\n  z-index: 999;\n  transition: opacity 0.15s ease-in-out;\n  overflow: visible !important;\n\n  .zoom-wrapper,\n  .zoom-content {\n    position: relative;\n    display: block;\n    width: 100%;\n    height: 100%;\n    overflow: visible !important;\n\n    img {\n      object-fit: contain;\n    }\n  }\n`;\n\nconst BgWrap = styled.div<{ $isZoom: boolean }>`\n  opacity: ${({ $isZoom }) => ($isZoom ? 1 : 0)};\n  position: fixed;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.5);\n  pointer-events: none;\n  z-index: 999;\n  transition: opacity 0.2s ease-in-out;\n`;\n\ninterface Props {\n  thumbnailPhotoUrl: string;\n}\n\nconst PhotoCardImageZoom = ({ thumbnailPhotoUrl }: Props) => {\n  const [isTouchActive, setIsTouchActive] = useState(false);\n  const [isZoom, setZoom] = useState(false);\n\n  // 줌 되지 않았을 때의 최초 이미지 영역 계산용\n  const originalImageAreaRef = useRef<HTMLImageElement | null>(null);\n  const [imageInfo, setImageInfo] = useState({\n    height: 0,\n    width: 0,\n    x: 0,\n    y: 0,\n  });\n\n  useEffect(() => {\n    if (originalImageAreaRef && originalImageAreaRef.current) {\n      const { width, height, x, y } =\n        originalImageAreaRef.current.getBoundingClientRect();\n      setImageInfo({\n        width,\n        height,\n        x,\n        y,\n      });\n    }\n  }, [\n    originalImageAreaRef?.current,\n    originalImageAreaRef?.current?.x,\n    originalImageAreaRef?.current?.y,\n  ]);\n\n  const handleTouchStart = (event: React.TouchEvent) => {\n    if (event.touches.length > 0) {\n      setIsTouchActive(true);\n    }\n  };\n\n  return (\n    <>\n      <OriginalImageAreaWrap\n        ref={originalImageAreaRef}\n        src={thumbnailPhotoUrl}\n        alt={thumbnailPhotoUrl}\n        fill\n        sizes=\"1px\"\n        loading=\"lazy\"\n        onTouchStart={handleTouchStart}\n      />\n      <GlobalPortal.Consumer>\n        <BgWrap $isZoom={isZoom}>\n          <ImageWrap\n            $isZoom={isZoom}\n            $initialImageInfo={imageInfo}\n            style={{\n              /* 두 손가락 터치 시 pointer-events: auto, 아니면 none */\n              pointerEvents: isTouchActive ? 'auto' : 'none',\n            }}\n          >\n            <TransformWrapper\n              minScale={1}\n              maxScale={4}\n              disablePadding\n              wheel={{ wheelDisabled: true, step: 0.08 }}\n              pinch={{ step: 10 }}\n              doubleClick={{ disabled: true }}\n              onZoomStart={() => {\n                setZoom(true);\n              }}\n              onZoomStop={(ref) => {\n                setZoom(false);\n                setIsTouchActive(false);\n                ref.resetTransform();\n              }}\n            >\n              <TransformComponent\n                wrapperClass=\"zoom-wrapper\"\n                contentClass=\"zoom-content\"\n              >\n                <Image\n                  src={thumbnailPhotoUrl}\n                  alt={thumbnailPhotoUrl}\n                  fill\n                  sizes=\"600px\"\n                  loading=\"lazy\"\n                />\n              </TransformComponent>\n            </TransformWrapper>\n          </ImageWrap>\n        </BgWrap>\n      </GlobalPortal.Consumer>\n    </>\n  );\n};\n\nexport default PhotoCardImageZoom;\n"],"names":["_path","_g","_g2","_defs","_extends","Object","assign","bind","n","e","arguments","length","t","r","hasOwnProperty","call","apply","card_logo","props","react","createElement","xmlns","fill","viewBox","id","width","height","x","y","maskUnits","style","maskType","d","mask","clipPath","x1","x2","y1","y2","gradientUnits","stopColor","offset","dummy_photo_card","photoCardSizeStyle","XS","css","S","M","L","PhotoCardWrap","styled","div","withConfig","size","param","DimmedWrap","theme","zIndex","photoCard","dimmed","DimmedOverlap","status","statusCause","jsx_runtime","jsxs","jsx","Icon","name","Text","typo","color","Fragment","photo_card_PhotoCard","photoCardInfo","handleClick","showBottomLogo","dummy","lazy","photoRef","additionalContent","enableZoom","rest","isDimmed","ref","data-testid","onClick","photoCardId","uuidValidate","className","concat","Image","src","dummyPhotoCardImage","alt","priority","sizes","loading","thumbnailPhotoUrl","PhotoCardImageZoom","Logo","undefined","OriginalImageAreaWrap","ImageWrap","$isZoom","$initialImageInfo","BgWrap","__webpack_exports__","Z","originalImageAreaRef","isTouchActive","setIsTouchActive","useState","isZoom","setZoom","useRef","imageInfo","setImageInfo","useEffect","current","getBoundingClientRect","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__","onTouchStart","event","touches","GlobalPortal","Consumer","pointerEvents","TransformWrapper","minScale","maxScale","disablePadding","wheel","wheelDisabled","step","pinch","doubleClick","disabled","onZoomStart","onZoomStop","resetTransform","TransformComponent","wrapperClass","contentClass"],"sourceRoot":""}