{"version":3,"file":"static/chunks/9389-62dbcc7aec7789dd.js","mappings":"8NAmBMA,GAAOC,EAAAA,EAAAA,IAAH,gNAaGC,EAAAA,EAAAA,OAAAA,QAbH,SAiBV,EA9B+B,WAC7B,IAAQC,GAAMC,EAAAA,EAAAA,KAAND,EAER,OACE,eAAKF,IAAKD,IACR,QAAC,MAAD,OACA,aAAGK,UAAU,WACVF,EAAE,0D,wHCuFLG,GAAUL,EAAAA,EAAAA,IAAH,0KAWiBC,EAAAA,EAAAA,OAAAA,QAXjB,yVAwCKA,EAAAA,EAAAA,OAAAA,WAxCL,UAyCAA,EAAAA,EAAAA,OAAAA,MAzCA,wHAJgB,QAIhB,kIAHgB,QAGhB,kIAFiB,QAEjB,wGA6EPK,GAAYN,EAAAA,EAAAA,IAAH,+NAoBFC,EAAAA,EAAAA,OAAAA,QApBE,IAqBTA,EAAAA,EAAAA,KAAAA,OAAAA,SArBS,gJAgCTA,EAAAA,EAAAA,KAAAA,KAAAA,QAhCS,UAiCFA,EAAAA,EAAAA,OAAAA,QAjCE,SAqCf,EA5L0B,SAAC,GAAkD,UAAhDM,EAAgD,EAAhDA,KAAMC,EAA0C,EAA1CA,SAAUC,EAAgC,EAAhCA,MACnCP,GAAMC,EAAAA,EAAAA,KAAND,EACFQ,GAAWC,EAAAA,EAAAA,KAMjB,OACE,eACEX,IAAKK,EACL,YAAWE,EAAKK,KAChB,aAAYH,EACZ,UAASF,EAAKM,QACd,cAAYC,EAAAA,EAAAA,IAAa,CACvBC,eAAgBC,EAAAA,EAAAA,MAChBC,WAAYV,EAAKU,WACjBC,WAAYX,EAAKY,SACjBC,MAAOb,EAAKa,MACZC,KAAMd,EAAKc,OAEb,eAAaC,EAAAA,EAAAA,IAAcf,GAC3B,oBACEA,EAAKgB,WAAaC,EAAAA,GAAAA,KAAuB,QAAU,gBAGrD,QAACC,EAAA,EAAD,CACEZ,QAASN,EAAKM,QACda,QAASnB,EAAKmB,QACdC,eAzBiB,WACrBjB,GAASkB,EAAAA,EAAAA,IAAmBZ,EAAAA,EAAAA,WA0BxB,eAAKZ,UAAU,cACb,QAACyB,EAAA,EAAD,CACEC,KAAK,UAAAvB,EAAKwB,qBAAL,eAAoBC,OAAQ,GACjCC,OAAO,OACPC,IAAK3B,EAAKK,OAEXL,EAAKmB,UACJ,eAAKtB,UAAU,eACb,QAAC,MAAD,CAAgB+B,MAAO,GAAIC,OAAQ,QAIzC,wBACG5B,IACC,yBACE,eAAKR,IAAKM,IACR,eAAKF,UAAU,kBACb,oBACO,OAAJG,QAAI,IAAJA,GAAAA,EAAMc,MACL,QAAC,MAAD,MAEAd,EAAKY,WAAY,QAAC,MAAD,QAGrB,cAAIf,UAAU,SAAd,OAAuBG,QAAvB,IAAuBA,OAAvB,EAAuBA,EAAMK,QAE/B,eAAKR,UAAU,UACb,oBAAOF,EAAC,iBAACK,QAAD,IAACA,GAAD,UAACA,EAAM8B,gBAAP,aAAC,EAAgBtC,KAAKuC,WAAtB,QAA6B,IAAI,YAAW,KACpD,oBAAO/B,EAAKgC,mBClB9B,EA/C0B,SAAC,GAMD,IALxBhC,EAKwB,EALxBA,KACAiC,EAIwB,EAJxBA,UACAC,EAGwB,EAHxBA,cACAC,EAEwB,EAFxBA,QACAC,EACwB,EADxBA,SAEMC,GAASC,EAAAA,EAAAA,aACTC,GAAeC,EAAAA,EAAAA,QAAuB,MACpCC,EAASJ,EAAOK,MAAhBD,KAEFE,GAAeC,EAAAA,EAAAA,GAAkBL,GAkBvC,OANAM,EAAAA,EAAAA,YAAU,WACJF,GAAgBR,GAVfnC,GAELiC,EAAU,CACRa,UAAW,CACTC,KAAMX,OAST,CAACO,EAAcR,KAGhB,QAACa,EAAA,EAAD,CAAWC,SAASC,EAAAA,EAAAA,IAAsBT,KACxC,+BACGzC,QADH,IACGA,OADH,EACGA,EAAMmD,iBAAiBC,KAAKC,KAAI,SAACC,EAAMpD,GAAP,OAC/B,QAAC,EAAD,CACEA,MAAOA,EACP6B,IAAKuB,EAAKhD,QACVN,KAAMsD,EACNrD,UAAQ,OAGXiC,IAAkBqB,EAAAA,GAAAA,UAAyB,QAAC,KAAD,OAC5C,eAAKC,IAAKjB,O,WCdlB,EAlCuB,SAAC,GAAkC,IAAhCvB,EAAgC,EAAhCA,SACxB,GACEyC,EAAAA,EAAAA,GAAuB,CACrBzC,SAAAA,IAFIhB,EAAR,EAAQA,KAAMmC,EAAd,EAAcA,QAASF,EAAvB,EAAuBA,UAAWC,EAAlC,EAAkCA,cAAewB,EAAjD,EAAiDA,QAKjD,OACE,yBACE,QAACC,EAAA,EAAD,CACEC,KAAMC,EAAAA,GAAAA,KACNZ,QAAQ,SACRa,SAAU,uDAEXJ,GACC,QAACK,EAAA,EAAD,OAEA,wBACO,OAAJ/D,QAAI,IAAJA,GAAAA,EAAMmD,iBAAiBC,MACtB,QAAC,EAAD,CACEpD,KAAMA,EACNiC,UAAWA,EACXE,UAAWA,EACXC,SAAU4B,OAAM,OAAChE,QAAD,IAACA,OAAD,EAACA,EAAMmD,iBAAiBJ,MAAQ,EAChDb,cAAeA,KAGjB,QAAC,EAAD,U,uICpBN1C,GAAOC,EAAAA,EAAAA,IAAH,gNAaGC,EAAAA,EAAAA,OAAAA,QAbH,SAiBV,EA9B+B,WAC7B,IAAQC,GAAMC,EAAAA,EAAAA,KAAND,EAER,OACE,eAAKF,IAAKD,IACR,QAAC,MAAD,OACA,aAAGK,UAAU,WACVF,EAAE,0D,kGCqFLG,GAAUL,EAAAA,EAAAA,IAAH,0KAWiBC,EAAAA,EAAAA,OAAAA,QAXjB,yVAwCKA,EAAAA,EAAAA,OAAAA,WAxCL,UAyCAA,EAAAA,EAAAA,OAAAA,MAzCA,wHAJgB,QAIhB,kIAHgB,QAGhB,kIAFiB,QAEjB,wGA6EPK,GAAYN,EAAAA,EAAAA,IAAH,+NAoBFC,EAAAA,EAAAA,OAAAA,QApBE,IAqBTA,EAAAA,EAAAA,KAAAA,OAAAA,SArBS,gJAgCTA,EAAAA,EAAAA,KAAAA,KAAAA,QAhCS,UAiCFA,EAAAA,EAAAA,OAAAA,QAjCE,SAqCf,EA5L0B,SAAC,GAAkD,UAAhDM,EAAgD,EAAhDA,KAAMC,EAA0C,EAA1CA,SAAUC,EAAgC,EAAhCA,MACnCP,GAAMC,EAAAA,EAAAA,KAAND,EACFQ,GAAWC,EAAAA,EAAAA,KAMjB,OACE,eACEX,IAAKK,EACL,YAAWE,EAAKK,KAChB,aAAYH,EACZ,UAASF,EAAKM,QACd,cAAYC,EAAAA,EAAAA,IAAa,CACvBC,eAAgBC,EAAAA,EAAAA,MAChBC,WAAYV,EAAKU,WACjBC,WAAYX,EAAKY,SACjBC,MAAOb,EAAKa,MACZC,KAAMd,EAAKc,OAEb,eAAaC,EAAAA,EAAAA,IAAcf,GAC3B,oBACEA,EAAKgB,WAAaC,EAAAA,GAAAA,KAAuB,QAAU,gBAGrD,QAACC,EAAA,EAAD,CACEZ,QAASN,EAAKM,QACda,QAASnB,EAAKmB,QACdC,eAzBiB,WACrBjB,GAASkB,EAAAA,EAAAA,IAAmBZ,EAAAA,EAAAA,WA0BxB,eAAKZ,UAAU,cACb,QAACyB,EAAA,EAAD,CACEC,KAAK,UAAAvB,EAAKwB,qBAAL,eAAoBC,OAAQ,GACjCC,OAAO,OACPC,IAAK3B,EAAKK,OAEXL,EAAKmB,UACJ,eAAKtB,UAAU,eACb,QAAC,MAAD,CAAgB+B,MAAO,GAAIC,OAAQ,QAIzC,wBACG5B,IACC,yBACE,eAAKR,IAAKM,IACR,eAAKF,UAAU,kBACb,oBACO,OAAJG,QAAI,IAAJA,GAAAA,EAAMc,MACL,QAAC,MAAD,MAEAd,EAAKY,WAAY,QAAC,MAAD,QAGrB,cAAIf,UAAU,SAAd,OAAuBG,QAAvB,IAAuBA,OAAvB,EAAuBA,EAAMK,QAE/B,eAAKR,UAAU,UACb,oBAAOF,EAAC,iBAACK,QAAD,IAACA,GAAD,UAACA,EAAM8B,gBAAP,aAAC,EAAgBtC,KAAKuC,WAAtB,QAA6B,IAAI,YAAW,KACpD,oBAAO/B,EAAKgC,mBC1B9B,EAvC0B,SAAC,GAKD,IAJxBhC,EAIwB,EAJxBA,KACAiC,EAGwB,EAHxBA,UACAE,EAEwB,EAFxBA,QACAC,EACwB,EADxBA,SAEMC,GAASC,EAAAA,EAAAA,aACTC,GAAeC,EAAAA,EAAAA,QAAuB,MACpCC,EAASJ,EAAOK,MAAhBD,KAEFE,GAAeC,EAAAA,EAAAA,GAAkBL,GAYvC,OAVAM,EAAAA,EAAAA,YAAU,WACJF,GAAgBR,GAClBF,EAAU,CACRa,UAAW,CACTC,KAAMX,OAIX,CAACO,EAAcR,KAGhB,QAACa,EAAA,EAAD,CAAWC,SAASC,EAAAA,EAAAA,IAAsBT,KACxC,+BACGzC,QADH,IACGA,OADH,EACGA,EAAMmD,iBAAiBC,KAAKC,KAAI,SAACC,EAAMpD,GAAP,OAC/B,QAAC,EAAD,CACEA,MAAOA,EACP6B,IAAKuB,EAAKhD,QACVN,KAAMsD,EACNrD,UAAQ,QAGZ,eAAKuD,IAAKjB,O,ipBC9ClB,I,EAAM0B,EAAiB,GAWVC,GAAyBC,EAAAA,EAAAA,IAAH,4TAa7BC,EAAAA,KCtB0BD,EAAAA,EAAAA,IAAH,kVAazBE,EAAAA,IAbG,IAgBMC,EAAyB,SACpCxB,GAEA,MDuBK,SAAgCyB,GAC/B,IAAMC,EAAU,EAAH,KAAOP,GAAmBM,GACvC,OAAOE,EAAAA,EAAmEP,EAAwBM,GCzBpDE,CAAS,CAC3D5B,UAAAA,IADM9C,EAAR,EAAQA,KAAMiC,EAAd,EAAcA,UAAWC,EAAzB,EAAyBA,cAAewB,EAAxC,EAAwCA,QAQxC,MAAO,CAAE1D,KAAAA,EAAMiC,UAAAA,EAAWE,QAHxBnC,IACI,OAAJA,QAAI,IAAJA,OAAA,EAAAA,EAAMmD,iBAAiBwB,aAAvB,OAAoC3E,QAApC,IAAoCA,OAApC,EAAoCA,EAAMmD,iBAAiBC,KAAKwB,QAE/B1C,cAAAA,EAAewB,QAAAA,IC4BpD,EA9CuB,SAAC,GAID,IAHrB1C,EAGqB,EAHrBA,SACA6D,EAEqB,EAFrBA,UACAC,EACqB,EADrBA,UAEMzC,GAASC,EAAAA,EAAAA,aACf,EACEgC,EAAuB,CACrBtD,SAAAA,EACA+D,MAAOF,IAHH7E,EAAR,EAAQA,KAAMmC,EAAd,EAAcA,QAASF,EAAvB,EAAuBA,UAAWC,EAAlC,EAAkCA,cAAewB,EAAjD,EAAiDA,QAMjD,OACE,yBACE,QAACC,EAAA,EAAD,CACEC,KAAMC,EAAAA,GAAAA,KACNZ,QAAQ,SACRa,SACEzB,EAAO2C,SAASC,SAAS,eAAzB,+CACcH,EADd,iBAEIzC,EAAO2C,SAASC,SAAS,YAAzB,mCACQH,EADR,wCAEMA,EAFN,mBAKPpB,GACC,QAACK,EAAA,EAAD,OAEA,wBACO,OAAJ/D,QAAI,IAAJA,GAAAA,EAAMmD,iBAAiBC,MACtB,QAAC,EAAD,CACEpD,KAAMA,EACNiC,UAAWA,EACXE,UAAWA,EACXC,SAAU4B,OAAM,OAAChE,QAAD,IAACA,OAAD,EAACA,EAAMmD,iBAAiBJ,MAAQ,EAChDb,cAAeA,KAGjB,QAAC,EAAD,U,oECvCZ,IAV0B,SAAC,GAAuC,IAArCe,EAAqC,EAArCA,QAC3B,OACE,QAAC,IAAD,CAAWA,QAASA,GACjB,IAAIiC,MAAM,GAAGC,KAAK,IAAI9B,KAAI,SAAC+B,EAAGlF,GAAJ,OACzB,QAAC,IAAD,CAAsB6B,IAAK7B,U,uFCPtBmE,GAA2BF,EAAAA,EAAAA,IAAH,gdAiCKA,EAAAA,EAAAA,IAAH,0XA2BTA,EAAAA,EAAAA,IAAH,wK,wGC7BdV,IA1BmBU,EAAAA,EAAAA,IAAH,ubAuBzBE,EAAAA,IAGkC,SACpCvB,GAEA,OAAoD4B,EAAAA,EAAAA,IAAS,CAC3D5B,UAAAA,IADM9C,EAAR,EAAQA,KAAMiC,EAAd,EAAcA,UAAWC,EAAzB,EAAyBA,cAAewB,EAAxC,EAAwCA,QAQxC,MAAO,CAAE1D,KAAAA,EAAMiC,UAAAA,EAAWE,QAHxBnC,IACI,OAAJA,QAAI,IAAJA,OAAA,EAAAA,EAAMmD,iBAAiBwB,aAAvB,OAAoC3E,QAApC,IAAoCA,OAApC,EAAoCA,EAAMmD,iBAAiBC,KAAKwB,QAE/B1C,cAAAA,EAAewB,QAAAA","sources":["webpack://_N_E/./src/components/main/home/adultTab/item/HomeTabStoryEmptyStory.tsx","webpack://_N_E/./src/components/main/home/adultTab/item/AdultTabStoryItem.tsx","webpack://_N_E/./src/components/main/home/adultTab/item/AdultTabStoryGrid.tsx","webpack://_N_E/./src/components/main/home/adultTab/index.tsx","webpack://_N_E/./src/components/main/home/genreTab/item/HomeTabStoryEmptyStory.tsx","webpack://_N_E/./src/components/main/home/genreTab/item/GenreTabStoryItem.tsx","webpack://_N_E/./src/components/main/home/genreTab/item/GenreTabStoryGrid.tsx","webpack://_N_E/./src/operations/queries/home/__generated__/useGenreStoryList.generated.ts","webpack://_N_E/./src/operations/queries/home/useGenreStoryList.ts","webpack://_N_E/./src/components/main/home/genreTab/index.tsx","webpack://_N_E/./src/components/main/home/grid/StorySkeletonGrid.tsx","webpack://_N_E/./src/operations/fragments/home.ts","webpack://_N_E/./src/operations/queries/home/useAdultStoryList.ts"],"sourcesContent":["import React from 'react';\nimport useTranslation from 'next-translate/useTranslation';\nimport { WeekdayEmptyStoryIcon } from 'public/assets';\nimport { css } from '@emotion/react';\nimport theme from '@styles/theme';\n\nconst HomeTabStoryEmptyStory = () => {\n  const { t } = useTranslation();\n\n  return (\n    <div css={text}>\n      <WeekdayEmptyStoryIcon />\n      <p className=\"centent\">\n        {t('common_screen_label_message_not_exist_weekday_story')}\n      </p>\n    </div>\n  );\n};\n\nconst text = css`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 6.75rem 0;\n\n  .centent {\n    margin-top: 0.75rem;\n    font-weight: 400;\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    text-align: center;\n    letter-spacing: -0.0187rem;\n    color: ${theme.colors.gray500};\n  }\n`;\n\nexport default HomeTabStoryEmptyStory;\n","import React from 'react';\nimport useTranslation from 'next-translate/useTranslation';\nimport { css } from '@emotion/react';\nimport theme from '@styles/theme';\nimport {\n  AdultLabelIcon,\n  HomeTabTitleUpIcon,\n  HomeTabTitlePauseIcon,\n} from 'public/assets';\nimport { getStatusText, getLabelText } from '@common/utils';\nimport { Story_Play_Type } from '@/baseType';\nimport { useAppDispatch } from '@store/hooks';\nimport { setPreviousSection } from '@slices/eventSlice';\nimport { HOME_TAB_TYPE } from '@customTypes/home';\nimport { StoryVerticalCoverDtoFragment } from '@/operations/fragments/__generated__/home.generated';\n\nimport SPImage from '@components/commons/image/SPImage';\n\nimport StoryItemLink from '../../../common/storyItem/link/StoryItemLink';\n\ninterface IAdultTabStoryItem {\n  index: number;\n  data: StoryVerticalCoverDtoFragment;\n  hasTitle?: boolean;\n}\n\nconst AdultTabStoryItem = ({ data, hasTitle, index }: IAdultTabStoryItem) => {\n  const { t } = useTranslation();\n  const dispatch = useAppDispatch();\n\n  const setEventParams = () => {\n    dispatch(setPreviousSection(HOME_TAB_TYPE.Adult));\n  };\n\n  return (\n    <div\n      css={wrapper}\n      data-name={data.name}\n      data-index={index}\n      data-id={data.storyId}\n      data-label={getLabelText({\n        currentHomeTab: HOME_TAB_TYPE.Adult,\n        isFinished: data.isFinished,\n        isOnHiatus: data.onHiatus,\n        isNew: data.isNew,\n        isUp: data.isUp,\n      })}\n      data-status={getStatusText(data)}\n      data-content-type={\n        data.playType === Story_Play_Type.Epub ? 'novel' : 'interactive'\n      }\n    >\n      <StoryItemLink\n        storyId={data.storyId}\n        isAdult={data.isAdult}\n        setEventParams={setEventParams}\n      >\n        <div className=\"thumbnail\">\n          <SPImage\n            src={data.mainImageFile?.link || ''}\n            layout=\"fill\"\n            alt={data.name}\n          />\n          {data.isAdult && (\n            <div className=\"adult-sign\">\n              <AdultLabelIcon width={24} height={24} />\n            </div>\n          )}\n        </div>\n        <>\n          {hasTitle && (\n            <>\n              <div css={container}>\n                <div className=\"title-wrapper\">\n                  <span>\n                    {data?.isUp ? (\n                      <HomeTabTitleUpIcon />\n                    ) : (\n                      data.onHiatus && <HomeTabTitlePauseIcon />\n                    )}\n                  </span>\n                  <h2 className=\"title\">{data?.name}</h2>\n                </div>\n                <div className=\"genre\">\n                  <span>{t(data?.genreKey?.text.key ?? '')} ・ </span>{' '}\n                  <span>{data.authorName}</span>\n                </div>\n              </div>\n            </>\n          )}\n        </>\n      </StoryItemLink>\n    </div>\n  );\n};\n\nconst FIVE_ITEMS_MAX_WIDTH = '800px';\nconst FOUR_ITEMS_MAX_WIDTH = '610px';\nconst THREE_ITEMS_MAX_WIDTH = '490px';\n\nconst wrapper = css`\n  display: flex;\n  flex-direction: column;\n  width: 7.8125rem;\n  text-align: left;\n  cursor: pointer;\n\n  .thumbnail {\n    position: relative;\n    width: 7.8125rem;\n    height: 11.875rem;\n    border: 0.0625rem solid ${theme.colors.gray200};\n    border-radius: 0.22rem;\n\n    img {\n      border-radius: 0.22rem;\n      image-rendering: auto;\n    }\n\n    .adult-sign {\n      position: absolute;\n      top: 0.25rem;\n      right: 0.25rem;\n    }\n  }\n\n  .event-wrapper {\n    position: relative;\n    display: flex;\n    align-items: flex-end;\n    padding: 0.25rem;\n    height: 100%;\n  }\n\n  .event {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    padding: 0.375rem 0.25rem 0.25rem;\n    background: ${theme.colors.primary500};\n    color: ${theme.colors.white};\n    font-weight: 600;\n    font-size: 0.5625rem;\n    letter-spacing: -0.0313rem;\n    border-radius: 0.125rem;\n  }\n\n  // 30px: 양 옆 마진\n  @media screen and (max-width: ${FIVE_ITEMS_MAX_WIDTH}) {\n    width: 100%;\n\n    .thumbnail {\n      width: calc((100vw - 30px) / 5);\n      height: calc(((100vw - 30px) / 5) * 1.5);\n    }\n  }\n\n  @media screen and (max-width: ${FOUR_ITEMS_MAX_WIDTH}) {\n    width: 100%;\n\n    .thumbnail {\n      width: calc((100vw - 30px) / 4);\n      height: calc(((100vw - 30px) / 4) * 1.5);\n    }\n  }\n\n  @media screen and (max-width: ${THREE_ITEMS_MAX_WIDTH}) {\n    width: 100%;\n\n    .thumbnail {\n      width: calc((100vw - 30px) / 3);\n      height: calc(((100vw - 30px) / 3) * 1.5);\n    }\n  }\n`;\n\nconst container = css`\n  margin-top: 0.5rem;\n  width: 100%;\n\n  .title-wrapper {\n    display: flex;\n\n    svg {\n      margin: 0 0.25rem 0.0375rem 0;\n    }\n  }\n\n  /* 줄바꿈 문자 */\n  .title {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-all;\n    word-wrap: break-word;\n    height: 1.25rem;\n    white-space: nowrap;\n    color: ${theme.colors.gray800};\n    ${theme.font.header.subhead1}\n  }\n\n  .genre {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-all;\n    word-wrap: break-word;\n    height: 1.125rem;\n    white-space: nowrap;\n    overflow: hidden;\n    ${theme.font.body.caption}\n    color: ${theme.colors.gray500};\n  }\n`;\n\nexport default AdultTabStoryItem;\n","import React, { useRef, useEffect } from 'react';\nimport { useRouter } from 'next/router';\nimport { NetworkStatus } from '@common/values';\nimport { WeekDayTab } from '@customTypes/story';\nimport { SPLoading } from '@components/commons';\nimport useInfiniteScroll from '@hooks/useInfiniteScroll';\nimport { AdultStoryListQuery } from '@/operations/queries/home/__generated__/useAdultStoryList.generated';\nimport { getWeekDaySectionName } from '@common/utils';\n\nimport StoryGrid from '../../../common/StoryGrid';\nimport AdultTabStoryItem from './AdultTabStoryItem';\n\ninterface IAdultTabStoryGrid {\n  data?: AdultStoryListQuery;\n  fetchMore: (options: { variables: { page: number } }) => void;\n  hasNext: boolean;\n  networkStatus: number;\n  nextPage: number;\n}\n\nconst AdultTabStoryGrid = ({\n  data,\n  fetchMore,\n  networkStatus,\n  hasNext,\n  nextPage,\n}: IAdultTabStoryGrid) => {\n  const router = useRouter();\n  const fetchMoreRef = useRef<HTMLDivElement>(null);\n  const { week } = router.query;\n\n  const intersecting = useInfiniteScroll(fetchMoreRef);\n\n  const fetchNextPage = () => {\n    if (!data) return;\n\n    fetchMore({\n      variables: {\n        page: nextPage,\n      },\n    });\n  };\n\n  useEffect(() => {\n    if (intersecting && hasNext) {\n      fetchNextPage();\n    }\n  }, [intersecting, hasNext]);\n\n  return (\n    <StoryGrid section={getWeekDaySectionName(week as WeekDayTab)}>\n      <>\n        {data?.listStoryByWebV3.list.map((item, index) => (\n          <AdultTabStoryItem\n            index={index}\n            key={item.storyId}\n            data={item}\n            hasTitle\n          />\n        ))}\n        {networkStatus === NetworkStatus.loading && <SPLoading />}\n        <div ref={fetchMoreRef} />\n      </>\n    </StoryGrid>\n  );\n};\n\nexport default AdultTabStoryGrid;\n","import React from 'react';\nimport { Direct_Ads_Type, Story_Play_Type } from '@/baseType';\n\nimport DirectAdsBannerWrapper from '@/components/main/common/banner/DirectAdsBannerWrapper';\nimport { useAdultStoryListQuery } from '@/operations/queries/home/useAdultStoryList';\nimport HomeTabStoryEmptyStory from './item/HomeTabStoryEmptyStory';\nimport AdultTabStoryGrid from './item/AdultTabStoryGrid';\nimport StorySkeletonGrid from '../grid/StorySkeletonGrid';\n\ninterface IAdultContainer {\n  playType?: Story_Play_Type;\n}\n\nconst AdultContainer = ({ playType }: IAdultContainer) => {\n  const { data, hasNext, fetchMore, networkStatus, loading } =\n    useAdultStoryListQuery({\n      playType,\n    });\n\n  return (\n    <>\n      <DirectAdsBannerWrapper\n        type={Direct_Ads_Type.Home}\n        section=\"홈\"\n        location={'홈탭-후방주의_배너'}\n      />\n      {loading ? (\n        <StorySkeletonGrid />\n      ) : (\n        <>\n          {data?.listStoryByWebV3.list ? (\n            <AdultTabStoryGrid\n              data={data}\n              fetchMore={fetchMore}\n              hasNext={!!hasNext}\n              nextPage={Number(data?.listStoryByWebV3.page) + 1}\n              networkStatus={networkStatus}\n            />\n          ) : (\n            <HomeTabStoryEmptyStory />\n          )}\n        </>\n      )}\n    </>\n  );\n};\n\nexport default AdultContainer;\n","import React from 'react';\nimport useTranslation from 'next-translate/useTranslation';\nimport { WeekdayEmptyStoryIcon } from 'public/assets';\nimport { css } from '@emotion/react';\nimport theme from '@styles/theme';\n\nconst HomeTabStoryEmptyStory = () => {\n  const { t } = useTranslation();\n\n  return (\n    <div css={text}>\n      <WeekdayEmptyStoryIcon />\n      <p className=\"centent\">\n        {t('common_screen_label_message_not_exist_weekday_story')}\n      </p>\n    </div>\n  );\n};\n\nconst text = css`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 6.75rem 0;\n\n  .centent {\n    margin-top: 0.75rem;\n    font-weight: 400;\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    text-align: center;\n    letter-spacing: -0.0187rem;\n    color: ${theme.colors.gray500};\n  }\n`;\n\nexport default HomeTabStoryEmptyStory;\n","import React from 'react';\nimport useTranslation from 'next-translate/useTranslation';\nimport { css } from '@emotion/react';\nimport theme from '@styles/theme';\nimport {\n  AdultLabelIcon,\n  HomeTabTitleUpIcon,\n  HomeTabTitlePauseIcon,\n} from 'public/assets';\nimport { getStatusText, getLabelText } from '@common/utils';\nimport { Story_Play_Type } from '@/baseType';\nimport { useAppDispatch } from '@store/hooks';\nimport { setPreviousSection } from '@slices/eventSlice';\nimport { HOME_TAB_TYPE } from '@customTypes/home';\nimport { StoryVerticalCoverDtoFragment } from '@/operations/fragments/__generated__/home.generated';\nimport SPImage from '@components/commons/image/SPImage';\nimport StoryItemLink from '../../../common/storyItem/link/StoryItemLink';\n\ninterface IGenreTabStoryItem {\n  index: number;\n  data: StoryVerticalCoverDtoFragment;\n  hasTitle?: boolean;\n}\n\nconst GenreTabStoryItem = ({ data, hasTitle, index }: IGenreTabStoryItem) => {\n  const { t } = useTranslation();\n  const dispatch = useAppDispatch();\n\n  const setEventParams = () => {\n    dispatch(setPreviousSection(HOME_TAB_TYPE.Adult));\n  };\n\n  return (\n    <div\n      css={wrapper}\n      data-name={data.name}\n      data-index={index}\n      data-id={data.storyId}\n      data-label={getLabelText({\n        currentHomeTab: HOME_TAB_TYPE.Adult,\n        isFinished: data.isFinished,\n        isOnHiatus: data.onHiatus,\n        isNew: data.isNew,\n        isUp: data.isUp,\n      })}\n      data-status={getStatusText(data)}\n      data-content-type={\n        data.playType === Story_Play_Type.Epub ? 'novel' : 'interactive'\n      }\n    >\n      <StoryItemLink\n        storyId={data.storyId}\n        isAdult={data.isAdult}\n        setEventParams={setEventParams}\n      >\n        <div className=\"thumbnail\">\n          <SPImage\n            src={data.mainImageFile?.link || ''}\n            layout=\"fill\"\n            alt={data.name}\n          />\n          {data.isAdult && (\n            <div className=\"adult-sign\">\n              <AdultLabelIcon width={24} height={24} />\n            </div>\n          )}\n        </div>\n        <>\n          {hasTitle && (\n            <>\n              <div css={container}>\n                <div className=\"title-wrapper\">\n                  <span>\n                    {data?.isUp ? (\n                      <HomeTabTitleUpIcon />\n                    ) : (\n                      data.onHiatus && <HomeTabTitlePauseIcon />\n                    )}\n                  </span>\n                  <h2 className=\"title\">{data?.name}</h2>\n                </div>\n                <div className=\"genre\">\n                  <span>{t(data?.genreKey?.text.key ?? '')} ・ </span>{' '}\n                  <span>{data.authorName}</span>\n                </div>\n              </div>\n            </>\n          )}\n        </>\n      </StoryItemLink>\n    </div>\n  );\n};\n\nconst FIVE_ITEMS_MAX_WIDTH = '800px';\nconst FOUR_ITEMS_MAX_WIDTH = '610px';\nconst THREE_ITEMS_MAX_WIDTH = '490px';\n\nconst wrapper = css`\n  display: flex;\n  flex-direction: column;\n  width: 7.8125rem;\n  text-align: left;\n  cursor: pointer;\n\n  .thumbnail {\n    position: relative;\n    width: 7.8125rem;\n    height: 11.875rem;\n    border: 0.0625rem solid ${theme.colors.gray200};\n    border-radius: 0.22rem;\n\n    img {\n      border-radius: 0.22rem;\n      image-rendering: auto;\n    }\n\n    .adult-sign {\n      position: absolute;\n      top: 0.25rem;\n      right: 0.25rem;\n    }\n  }\n\n  .event-wrapper {\n    position: relative;\n    display: flex;\n    align-items: flex-end;\n    padding: 0.25rem;\n    height: 100%;\n  }\n\n  .event {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    padding: 0.375rem 0.25rem 0.25rem;\n    background: ${theme.colors.primary500};\n    color: ${theme.colors.white};\n    font-weight: 600;\n    font-size: 0.5625rem;\n    letter-spacing: -0.0313rem;\n    border-radius: 0.125rem;\n  }\n\n  // 30px: 양 옆 마진\n  @media screen and (max-width: ${FIVE_ITEMS_MAX_WIDTH}) {\n    width: 100%;\n\n    .thumbnail {\n      width: calc((100vw - 30px) / 5);\n      height: calc(((100vw - 30px) / 5) * 1.5);\n    }\n  }\n\n  @media screen and (max-width: ${FOUR_ITEMS_MAX_WIDTH}) {\n    width: 100%;\n\n    .thumbnail {\n      width: calc((100vw - 30px) / 4);\n      height: calc(((100vw - 30px) / 4) * 1.5);\n    }\n  }\n\n  @media screen and (max-width: ${THREE_ITEMS_MAX_WIDTH}) {\n    width: 100%;\n\n    .thumbnail {\n      width: calc((100vw - 30px) / 3);\n      height: calc(((100vw - 30px) / 3) * 1.5);\n    }\n  }\n`;\n\nconst container = css`\n  margin-top: 0.5rem;\n  width: 100%;\n\n  .title-wrapper {\n    display: flex;\n\n    svg {\n      margin: 0 0.25rem 0.0375rem 0;\n    }\n  }\n\n  /* 줄바꿈 문자 */\n  .title {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-all;\n    word-wrap: break-word;\n    height: 1.25rem;\n    white-space: nowrap;\n    color: ${theme.colors.gray800};\n    ${theme.font.header.subhead1}\n  }\n\n  .genre {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-all;\n    word-wrap: break-word;\n    height: 1.125rem;\n    white-space: nowrap;\n    overflow: hidden;\n    ${theme.font.body.caption}\n    color: ${theme.colors.gray500};\n  }\n`;\n\nexport default GenreTabStoryItem;\n","import React, { useRef, useEffect } from 'react';\nimport { useRouter } from 'next/router';\nimport { WeekDayTab } from '@customTypes/story';\nimport useInfiniteScroll from '@hooks/useInfiniteScroll';\nimport { AdultStoryListQuery } from '@/operations/queries/home/__generated__/useAdultStoryList.generated';\nimport { getWeekDaySectionName } from '@common/utils';\n\nimport StoryGrid from '../../../common/StoryGrid';\nimport GenreTabStoryItem from './GenreTabStoryItem';\n\ninterface IGenreTabStoryGrid {\n  data?: AdultStoryListQuery;\n  fetchMore: (options: { variables: { page: number } }) => void;\n  hasNext: boolean;\n  networkStatus: number;\n  nextPage: number;\n}\n\nconst GenreTabStoryGrid = ({\n  data,\n  fetchMore,\n  hasNext,\n  nextPage,\n}: IGenreTabStoryGrid) => {\n  const router = useRouter();\n  const fetchMoreRef = useRef<HTMLDivElement>(null);\n  const { week } = router.query;\n\n  const intersecting = useInfiniteScroll(fetchMoreRef);\n\n  useEffect(() => {\n    if (intersecting && hasNext) {\n      fetchMore({\n        variables: {\n          page: nextPage,\n        },\n      });\n    }\n  }, [intersecting, hasNext]);\n\n  return (\n    <StoryGrid section={getWeekDaySectionName(week as WeekDayTab)}>\n      <>\n        {data?.listStoryByWebV3.list.map((item, index) => (\n          <GenreTabStoryItem\n            index={index}\n            key={item.storyId}\n            data={item}\n            hasTitle\n          />\n        ))}\n        <div ref={fetchMoreRef} />\n      </>\n    </StoryGrid>\n  );\n};\n\nexport default GenreTabStoryGrid;\n","import * as Types from '../../../../baseType';\n\nimport { gql } from '@apollo/client';\nimport { StoryVerticalCoverDtoFragmentDoc } from '../../../fragments/__generated__/home.generated';\nimport * as Apollo from '@apollo/client';\nconst defaultOptions = {} as const;\nexport type GenreStoryListQueryVariables = Types.Exact<{\n  page?: Types.InputMaybe<Types.Scalars['Int']>;\n  playType?: Types.InputMaybe<Types.Story_Play_Type>;\n  genre?: Types.InputMaybe<Types.Scalars['String']>;\n}>;\n\n\nexport type GenreStoryListQuery = { __typename?: 'Query', listStoryByWebV3: { __typename?: 'ListableStory', totalCount: number, page: number, pageSize: number, list: Array<{ __typename?: 'Story', type: Types.Story_Type, storyId: number, name: string, authorName: string, onHiatus: boolean, isFinished: boolean, isNew: boolean, isUp: boolean, isTimeLeapFree: boolean, playType: Types.Story_Play_Type, representedAt?: any | null, sectionType: Types.Story_Section_Type, isAdult: boolean, mainImageFile?: { __typename?: 'File', link: string } | null, storyWeekdays?: Array<{ __typename?: 'StoryWeekday', weekday: Types.Story_Weekday }> | null, genreKey?: { __typename?: 'StoryGenre', text: { __typename?: 'LocalizeKey', key: string } } | null, language?: { __typename?: 'Language', display: string, code: string } | null }> } };\n\n\nexport const GenreStoryListDocument = gql`\n    query GenreStoryList($page: Int, $playType: STORY_PLAY_TYPE, $genre: String) {\n  listStoryByWebV3(\n    data: {page: $page, playType: $playType, pageSize: 15, genre: $genre}\n  ) {\n    totalCount\n    page\n    pageSize\n    list {\n      ...StoryVerticalCoverDto\n    }\n  }\n}\n    ${StoryVerticalCoverDtoFragmentDoc}`;\n\n/**\n * __useGenreStoryListQuery__\n *\n * To run a query within a React component, call `useGenreStoryListQuery` and pass it any options that fit your needs.\n * When your component renders, `useGenreStoryListQuery` returns an object from Apollo Client that contains loading, error, and data properties\n * you can use to render your UI.\n *\n * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;\n *\n * @example\n * const { data, loading, error } = useGenreStoryListQuery({\n *   variables: {\n *      page: // value for 'page'\n *      playType: // value for 'playType'\n *      genre: // value for 'genre'\n *   },\n * });\n */\nexport function useGenreStoryListQuery(baseOptions?: Apollo.QueryHookOptions<GenreStoryListQuery, GenreStoryListQueryVariables>) {\n        const options = {...defaultOptions, ...baseOptions}\n        return Apollo.useQuery<GenreStoryListQuery, GenreStoryListQueryVariables>(GenreStoryListDocument, options);\n      }\nexport function useGenreStoryListLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GenreStoryListQuery, GenreStoryListQueryVariables>) {\n          const options = {...defaultOptions, ...baseOptions}\n          return Apollo.useLazyQuery<GenreStoryListQuery, GenreStoryListQueryVariables>(GenreStoryListDocument, options);\n        }\nexport type GenreStoryListQueryHookResult = ReturnType<typeof useGenreStoryListQuery>;\nexport type GenreStoryListLazyQueryHookResult = ReturnType<typeof useGenreStoryListLazyQuery>;\nexport type GenreStoryListQueryResult = Apollo.QueryResult<GenreStoryListQuery, GenreStoryListQueryVariables>;","import { gql } from '@apollo/client';\nimport { STORY_VERTICAL_COVER_DTO } from '@/operations/fragments/home';\nimport {\n  GenreStoryListQueryVariables,\n  useGenreStoryListQuery as useQuery,\n} from './__generated__/useGenreStoryList.generated';\n\nexport const GENRE_STORY_LIST = gql`\n  query GenreStoryList($page: Int, $playType: STORY_PLAY_TYPE, $genre: String) {\n    listStoryByWebV3(\n      data: { page: $page, playType: $playType, pageSize: 15, genre: $genre }\n    ) {\n      totalCount\n      page\n      pageSize\n      list {\n        ...StoryVerticalCoverDto\n      }\n    }\n  }\n  ${STORY_VERTICAL_COVER_DTO}\n`;\n\nexport const useGenreStoryListQuery = (\n  variables?: GenreStoryListQueryVariables,\n) => {\n  const { data, fetchMore, networkStatus, loading } = useQuery({\n    variables,\n  });\n\n  const hasNext =\n    data &&\n    data?.listStoryByWebV3.totalCount > data?.listStoryByWebV3.list.length;\n\n  return { data, fetchMore, hasNext, networkStatus, loading };\n};\n","import React from 'react';\nimport { Direct_Ads_Type, Story_Play_Type } from '@/baseType';\n\nimport DirectAdsBannerWrapper from '@/components/main/common/banner/DirectAdsBannerWrapper';\nimport HomeTabStoryEmptyStory from './item/HomeTabStoryEmptyStory';\nimport GenreTabStoryGrid from './item/GenreTabStoryGrid';\nimport StorySkeletonGrid from '../grid/StorySkeletonGrid';\nimport { useGenreStoryListQuery } from '@/operations/queries/home/useGenreStoryList';\nimport { useRouter } from 'next/router';\n\ninterface IGenreContainer {\n  playType?: Story_Play_Type;\n  genreType: string;\n  genreName: string;\n}\n\nconst GenreContainer = ({\n  playType,\n  genreType,\n  genreName,\n}: IGenreContainer) => {\n  const router = useRouter();\n  const { data, hasNext, fetchMore, networkStatus, loading } =\n    useGenreStoryListQuery({\n      playType,\n      genre: genreType,\n    });\n\n  return (\n    <>\n      <DirectAdsBannerWrapper\n        type={Direct_Ads_Type.Home}\n        section=\"홈\"\n        location={\n          router.pathname.includes('interactive')\n            ? `인터랙티브탭-${genreName}_배너`\n            : router.pathname.includes('webnovel')\n            ? `웹소설탭-${genreName}_배너`\n            : `홈탭-${genreName}_배너`\n        }\n      />\n      {loading ? (\n        <StorySkeletonGrid />\n      ) : (\n        <>\n          {data?.listStoryByWebV3.list ? (\n            <GenreTabStoryGrid\n              data={data}\n              fetchMore={fetchMore}\n              hasNext={!!hasNext}\n              nextPage={Number(data?.listStoryByWebV3.page) + 1}\n              networkStatus={networkStatus}\n            />\n          ) : (\n            <HomeTabStoryEmptyStory />\n          )}\n        </>\n      )}\n    </>\n  );\n};\n\nexport default GenreContainer;\n","import React from 'react';\nimport StoryItemPlaceHolder from '@components/commons/loading/StoryItemPlaceHolder';\nimport StoryGrid from '../../common/StoryGrid';\nimport { Section } from '@/customTypes/event';\n\nconst StorySkeletonGrid = ({ section }: { section?: Section }) => {\n  return (\n    <StoryGrid section={section}>\n      {new Array(6).fill('').map((_, index) => (\n        <StoryItemPlaceHolder key={index} />\n      ))}\n    </StoryGrid>\n  );\n};\n\nexport default StorySkeletonGrid;\n","import { gql } from '@apollo/client';\n\nexport const STORY_VERTICAL_COVER_DTO = gql`\n  fragment StoryVerticalCoverDto on Story {\n    type\n    storyId\n    name\n    authorName\n    onHiatus\n    isFinished\n    isNew\n    isUp\n    isTimeLeapFree\n    playType\n    representedAt\n    sectionType\n    playType\n    isAdult\n    mainImageFile {\n      link\n    }\n    storyWeekdays {\n      weekday\n    }\n    genreKey {\n      text {\n        key\n      }\n    }\n    language {\n      display\n      code\n    }\n  }\n`;\nexport const STORY_HORIZONTAL_COVER_DTO = gql`\n  fragment StoryHorizontalCoverDto on Story {\n    storyId\n    name\n    oneLineDesc\n    authorName\n    numViews\n    numLikes\n    numComment\n    onHiatus\n    isFinished\n    isUp\n    isAdult\n    isTimeLeapFree\n    playType\n    mainImageFile {\n      link\n    }\n    genreKey {\n      text {\n        key\n        ko_KR\n      }\n    }\n  }\n`;\n\nexport const GENRE_INFO_DTO = gql`\n  fragment GenreInfoDto on StoryGenre {\n    type\n    text {\n      key\n      ko_KR\n    }\n    title {\n      key\n      ko_KR\n    }\n  }\n`;\n","import { gql } from '@apollo/client';\nimport { STORY_VERTICAL_COVER_DTO } from '@/operations/fragments/home';\nimport {\n  AdultStoryListQueryVariables,\n  useAdultStoryListQuery as useQuery,\n} from './__generated__/useAdultStoryList.generated';\n\nexport const ADULT_STORY_LIST = gql`\n  query AdultStoryList(\n    $page: Int\n    $playType: STORY_PLAY_TYPE\n    $sorting: STORY_SORTING\n  ) {\n    listStoryByWebV3(\n      data: {\n        page: $page\n        playType: $playType\n        pageSize: 15\n        uiSectionType: Adult\n        sorting: $sorting\n      }\n    ) {\n      totalCount\n      page\n      pageSize\n      list {\n        ...StoryVerticalCoverDto\n      }\n    }\n  }\n  ${STORY_VERTICAL_COVER_DTO}\n`;\n\nexport const useAdultStoryListQuery = (\n  variables?: AdultStoryListQueryVariables,\n) => {\n  const { data, fetchMore, networkStatus, loading } = useQuery({\n    variables,\n  });\n\n  const hasNext =\n    data &&\n    data?.listStoryByWebV3.totalCount > data?.listStoryByWebV3.list.length;\n\n  return { data, fetchMore, hasNext, networkStatus, loading };\n};\n"],"names":["text","css","theme","t","useTranslation","className","wrapper","container","data","hasTitle","index","dispatch","useAppDispatch","name","storyId","getLabelText","currentHomeTab","HOME_TAB_TYPE","isFinished","isOnHiatus","onHiatus","isNew","isUp","getStatusText","playType","Story_Play_Type","StoryItemLink","isAdult","setEventParams","setPreviousSection","SPImage","src","mainImageFile","link","layout","alt","width","height","genreKey","key","authorName","fetchMore","networkStatus","hasNext","nextPage","router","useRouter","fetchMoreRef","useRef","week","query","intersecting","useInfiniteScroll","useEffect","variables","page","StoryGrid","section","getWeekDaySectionName","listStoryByWebV3","list","map","item","NetworkStatus","ref","useAdultStoryListQuery","loading","DirectAdsBannerWrapper","type","Direct_Ads_Type","location","StorySkeletonGrid","Number","defaultOptions","GenreStoryListDocument","gql","StoryVerticalCoverDtoFragmentDoc","STORY_VERTICAL_COVER_DTO","useGenreStoryListQuery","baseOptions","options","Apollo","useQuery","totalCount","length","genreType","genreName","genre","pathname","includes","Array","fill","_"],"sourceRoot":""}