{"version":3,"file":"static/chunks/3499-b5471b3742379b47.js","mappings":"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","sources":["webpack://_N_E/./src/components/main/common/StoryWrapper.tsx","webpack://_N_E/./src/components/main/common/label/TopLabel.tsx","webpack://_N_E/./src/components/main/common/storyItem/StoryItem.tsx","webpack://_N_E/./src/components/main/common/title/SectionTitle.tsx","webpack://_N_E/./src/components/main/common/title/StoryItemTitleWithRanking.tsx","webpack://_N_E/./src/components/main/home/grid/GenreStoryGrid.tsx","webpack://_N_E/./src/components/main/home/homeStory/AdultStory.tsx","webpack://_N_E/./src/components/main/home/homeStory/FavoriteStory.tsx","webpack://_N_E/./src/operations/queries/home/__generated__/useFeaturedStory.generated.ts","webpack://_N_E/./src/components/main/home/homeStory/FeaturedStoryItem.tsx","webpack://_N_E/./src/components/main/home/homeStory/FinishedStory.tsx","webpack://_N_E/./src/components/main/common/storyItem/SmallCardStoryItem.tsx","webpack://_N_E/./src/components/main/common/list/MultiLineStoryList.tsx","webpack://_N_E/./src/components/main/home/homeStory/GenerationStoryList.tsx","webpack://_N_E/./src/components/main/home/homeStory/GenreStoryList.tsx","webpack://_N_E/./src/operations/queries/home/__generated__/useOriginalStoryList.generated.ts","webpack://_N_E/./src/components/main/home/homeStory/OriginalStory.tsx","webpack://_N_E/./src/components/main/home/homeStory/PlayedStory.tsx","webpack://_N_E/./src/components/main/home/homeStory/RankingStory.tsx","webpack://_N_E/./src/components/main/home/homeStory/StoryRecommendation.tsx","webpack://_N_E/./src/components/main/home/homeStory/TopStory.tsx","webpack://_N_E/./src/components/main/home/homeStory/NewStory.tsx","webpack://_N_E/./src/components/main/home/grid/AllStoryGrid.tsx","webpack://_N_E/./src/components/main/home/homeStory/SearchStory.tsx","webpack://_N_E/./src/operations/queries/home/__generated__/useAdultStoryList.generated.ts","webpack://_N_E/./src/operations/queries/home/__generated__/useFavoriteStoryList.generated.ts","webpack://_N_E/./src/operations/queries/home/__generated__/useFinishedStoryList.generated.ts","webpack://_N_E/./src/operations/queries/home/__generated__/useGenerationStoryList.generated.ts","webpack://_N_E/./src/operations/queries/home/__generated__/useGetHomeTabGenreStoryList.generated.ts","webpack://_N_E/./src/operations/queries/home/__generated__/useHomeStoryGenres.generated.ts","webpack://_N_E/./src/operations/queries/home/__generated__/useMonthlyStoryList.generated.ts","webpack://_N_E/./src/operations/queries/home/__generated__/useNewStoryList.generated.ts","webpack://_N_E/./src/operations/queries/home/__generated__/useRankingStoryList.generated.ts","webpack://_N_E/./src/operations/queries/home/useFavoriteStoryList.ts","webpack://_N_E/./src/operations/queries/home/useUserHistoryList.ts","webpack://_N_E/./src/operations/queries/user/getUser.ts","webpack://_N_E/./src/provider/PlayTypeProvider.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { css } from '@emotion/react';\n\ninterface IStoryWrapper {\n  children: ReactNode;\n  backgroundColor?: string;\n}\n\nconst StoryWrapper = ({ children, backgroundColor }: IStoryWrapper) => {\n  return <div css={container({ backgroundColor })}>{children}</div>;\n};\n\ninterface IContainer {\n  backgroundColor?: string;\n}\n\nconst container = ({ backgroundColor }: IContainer) => css`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  padding: 2.5em 0.9375em 1.5em;\n  ${backgroundColor && `background: ${backgroundColor}`};\n`;\n\nexport default StoryWrapper;\n","import React from 'react';\nimport { css } from '@emotion/react';\nimport theme from '@styles/theme';\nimport useTranslation from 'next-translate/useTranslation';\n\ninterface ITopLabel {\n  ranking?: number;\n}\n\nconst TopLabel = ({ ranking }: ITopLabel) => {\n  const { t } = useTranslation();\n\n  return (\n    <div css={wrapper}>\n      <div className=\"text\">{t('home_screen_title_top_and_number')}</div>\n      <div className=\"text bold\">{ranking}</div>\n    </div>\n  );\n};\n\nconst wrapper = css`\n  width: 2rem;\n  height: 2rem;\n  background: ${theme.colors.primary500};\n  border-radius: 0.25rem 0 0.25rem 0;\n  color: black;\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.125rem;\n\n  .text {\n    color: rgba(255, 255, 255, 0.6);\n    font-size: 0.5625rem;\n    line-height: 0.75rem;\n    font-family: 'Lato';\n  }\n\n  .text.bold {\n    font-weight: 700;\n    font-size: 0.75rem;\n    line-height: 0.75rem;\n    letter-spacing: -0.0187rem;\n    color: ${theme.colors.white};\n  }\n`;\n\nexport default TopLabel;\n","import React from 'react';\nimport useTranslation from 'next-translate/useTranslation';\nimport { css } from '@emotion/react';\nimport { AdultLabelIcon } from 'public/assets';\nimport { useAppDispatch } from '@store/hooks';\nimport {\n  setCurrentStoryLabelText,\n  setPreviousSection,\n} from '@slices/eventSlice';\nimport { getStatusText, getLabelText } from '@common/utils';\nimport { HOME_TAB_TYPE } from '@customTypes/home';\nimport SPImage from '@components/commons/image/SPImage';\nimport { Section } from '@customTypes/event';\n\nimport StoryItemTitle from '../title/StoryItemTitle';\nimport StoryItemLink from './link/StoryItemLink';\nimport BandLabel from '../label/BandLabel';\nimport TopLabel from '@/components/main/common/label/TopLabel';\nimport { StoryVerticalCoverDtoFragment } from '@/operations/fragments/__generated__/home.generated';\nimport { Story_Play_Type } from '@/baseType';\nimport theme from '@/styles/theme';\n\ninterface IStoryItem {\n  data: StoryVerticalCoverDtoFragment;\n  index: number;\n  section: Section;\n  isFirstItem?: boolean;\n  isLastItem?: boolean;\n  showTopLabel?: boolean;\n  showInteractiveBanner?: boolean;\n}\n\nconst StoryItem = ({\n  data,\n  index,\n  section,\n  isFirstItem,\n  isLastItem,\n  showTopLabel,\n  showInteractiveBanner,\n}: IStoryItem) => {\n  const dispatch = useAppDispatch();\n  const { t } = useTranslation();\n\n  const setEventParams = () => {\n    dispatch(\n      setCurrentStoryLabelText(\n        getLabelText({\n          currentHomeTab: HOME_TAB_TYPE.Home,\n          isFinished: data.isFinished,\n          isOnHiatus: data.onHiatus,\n          isUp: data.isUp,\n        }),\n      ),\n    );\n    section && dispatch(setPreviousSection(section));\n  };\n\n  return (\n    <div\n      css={wrapper({ isFirstItem, isLastItem })}\n      data-name={data.name}\n      data-index={index}\n      data-id={data.storyId}\n      data-label={getLabelText({\n        currentHomeTab: HOME_TAB_TYPE.Home,\n        isFinished: data.isFinished,\n        isOnHiatus: data.onHiatus,\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          {showTopLabel && <TopLabel ranking={index + 1} />}\n          {showInteractiveBanner && (\n            <div className=\"labelContainer\">\n              <BandLabel\n                text={t('common_screen_title_interactive')}\n                borderColor={theme.colors.primary300}\n              />\n            </div>\n          )}\n        </div>\n        <StoryItemTitle\n          title={data?.name}\n          isShowUp={data?.isUp}\n          subTitle={`${t(data?.genreKey?.text?.key ?? '') || '-'} ・ ${\n            data?.authorName\n          }`}\n        />\n      </StoryItemLink>\n    </div>\n  );\n};\n\ninterface IWrapper {\n  isFirstItem?: boolean;\n  isLastItem?: boolean;\n}\n\nconst wrapper = ({ isFirstItem, isLastItem }: IWrapper) => css`\n  display: flex;\n  flex-direction: column;\n  width: 8.5625rem;\n  text-align: left;\n  cursor: pointer;\n  margin-left: 0.4375rem;\n\n  ${isFirstItem && `margin-left: 1.1875em;`}\n  ${isLastItem && `margin-right: 1.1875em;`}\n\n  .thumbnail {\n    position: relative;\n    width: 8.625rem;\n    height: 12.9375rem;\n\n    img {\n      border-radius: 0.22rem;\n      image-rendering: auto;\n    }\n  }\n\n  .adult-sign {\n    position: absolute;\n    top: 0.25rem;\n    right: 0.25rem;\n  }\n  .labelContainer {\n    display: flex;\n    align-items: center;\n    padding: 0.25rem;\n  }\n`;\n\nexport default StoryItem;\n","import React from 'react';\nimport Link from 'next/link';\nimport useTranslation from 'next-translate/useTranslation';\nimport { usePlayTypeContext } from '@/provider/PlayTypeProvider';\nimport { css } from '@emotion/react';\nimport theme from '@styles/theme';\nimport { NextBtn } from 'public/assets';\nimport { Story_Play_Type } from '@/baseType';\nimport {\n  touchInteractiveMoreChallenge,\n  touchNovelMoreChallenge,\n} from '@lib/eventManager';\n\ninterface ITextWithColor {\n  text: string;\n  coloredText: string;\n}\n\ninterface ISectionTitle {\n  title: string | string[];\n  desc?: string | ITextWithColor;\n  showMoreButton?: boolean;\n  isTextBlack?: boolean;\n  descLink?: string;\n  moreLink?: string;\n}\n\nconst SectionTitle = ({\n  title,\n  showMoreButton = false,\n  isTextBlack = false,\n  descLink,\n  moreLink,\n}: ISectionTitle) => {\n  const { t } = useTranslation();\n  const { playType } = usePlayTypeContext();\n\n  const handleMoreButtonClick = () => {\n    if (playType === Story_Play_Type.Interactive) {\n      touchInteractiveMoreChallenge();\n      return;\n    }\n    if (playType === Story_Play_Type.Epub) {\n      touchNovelMoreChallenge();\n      return;\n    }\n  };\n\n  return (\n    <div css={container({ isTextBlack, descLink })}>\n      {typeof title === 'string' ? (\n        <h2 className=\"section-title\">{title}</h2>\n      ) : (\n        <>\n          {title.map((item) => (\n            <h2 key={item} className=\"section-title\">\n              {item}\n            </h2>\n          ))}\n        </>\n      )}\n      {showMoreButton && (\n        <Link href={moreLink ?? ''}>\n          <a className=\"discover-button\" onClick={handleMoreButtonClick}>\n            <span className=\"discover-text\">{t('more_screen_title_more')}</span>\n            <NextBtn width={16} height={16} stroke={theme.colors.gray400} />\n          </a>\n        </Link>\n      )}\n    </div>\n  );\n};\n\ninterface IContainer {\n  isTextBlack: boolean;\n  descLink?: string;\n}\n\nconst container = ({ isTextBlack, descLink }: IContainer) => css`\n  position: relative;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 1em;\n\n  .section-title {\n    ${theme.font.header.headline2};\n    color: ${isTextBlack ? theme.colors.white : theme.colors.gray900};\n  }\n\n  .discover-button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    flex-shrink: 0;\n\n    .discover-text {\n      ${theme.font.body.body1};\n      color: ${theme.colors.gray400};\n    }\n  }\n`;\n\nexport default SectionTitle;\n","import React, { useMemo } from 'react';\nimport { css } from '@emotion/react';\nimport theme from '@styles/theme';\nimport { RankDownIcon, RankUpIcon } from 'public/assets';\n\nimport StoryItemTitle from './StoryItemTitle';\n\ninterface IStoryItemTitleWithRanking {\n  title?: string;\n  subTitle?: string | null;\n  author?: string | null;\n  isShowUp?: boolean;\n  ranking: number;\n  amountChange: number;\n  isNew: boolean;\n  isAdult: boolean;\n}\n\nconst StoryItemTitleWithRanking = ({\n  ranking,\n  amountChange,\n  isNew,\n  isAdult,\n  ...restProps\n}: IStoryItemTitleWithRanking) => {\n  return (\n    <div css={container}>\n      <RankingWrapper\n        ranking={ranking}\n        amountChange={amountChange}\n        isNew={isNew}\n      />\n      <StoryItemTitle {...restProps} isShowAdultIcon={isAdult} />\n    </div>\n  );\n};\n\nconst container = css`\n  display: flex;\n  align-items: center;\n`;\n\ninterface IRankingWrapper {\n  amountChange: number;\n  isNew: boolean;\n  ranking: number;\n}\n\nconst RankingWrapper = ({ ranking, amountChange, isNew }: IRankingWrapper) => {\n  const renderRankingStatus = useMemo(() => {\n    if (isNew) {\n      return <div className=\"new\">{'new'}</div>;\n    } else if (amountChange < 0) {\n      return (\n        <div className=\"amount-change-wrapper\">\n          <RankDownIcon />\n          <span className=\"number down\">\n            {amountChange.toString().replace('-', '')}\n          </span>\n        </div>\n      );\n    } else if (amountChange > 0) {\n      return (\n        <div className=\"amount-change-wrapper\">\n          <RankUpIcon />\n          <span className=\"number up\">{amountChange}</span>\n        </div>\n      );\n    } else if (amountChange === 0) {\n      return <div className=\"equal-icon\">{'='}</div>;\n    }\n  }, [ranking, amountChange, isNew]);\n\n  return (\n    <div css={rankingStatusIconWrapper}>\n      <div className=\"ranking-number\">{ranking}</div>\n      {renderRankingStatus}\n    </div>\n  );\n};\n\nconst rankingStatusIconWrapper = css`\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  min-width: 1rem;\n  margin-right: 0.75rem;\n\n  .amount-change-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 0.1563rem;\n\n    .number {\n      font-weight: 700;\n      font-size: 0.5rem;\n      line-height: 1rem;\n    }\n\n    .number.up {\n      color: ${theme.colors.emerald500};\n    }\n\n    .number.down {\n      color: ${theme.colors.red500};\n    }\n  }\n\n  .ranking-number {\n    color: ${theme.colors.gray800};\n    ${theme.font.header.subhead1};\n  }\n\n  .equal-icon {\n    color: ${theme.colors.gray500};\n    ${theme.font.body.caption};\n  }\n\n  .new {\n    color: ${theme.colors.primary300};\n    ${theme.font.body.caption};\n  }\n`;\n\nexport default StoryItemTitleWithRanking;\n","import React, { useRef } from 'react';\nimport { css } from '@emotion/react';\nimport theme from '@styles/theme';\nimport { Section } from '@customTypes/event';\nimport { useVisibleStoryItemEvent } from '@/hooks/useVisibleStoryItemEvent';\n\ninterface IAllStoryGrid {\n  section: Section;\n  children: JSX.Element[] | JSX.Element;\n}\n\nconst GenreStoryGrid = ({ section, children }: IAllStoryGrid) => {\n  const storyListRef = useRef<HTMLDivElement | null>(null);\n  useVisibleStoryItemEvent({ storyListRef, section });\n\n  return (\n    <section css={container}>\n      <div className=\"story-grid-wrapper\">\n        <div className=\"story-grid\" ref={storyListRef}>\n          {children}\n        </div>\n      </div>\n    </section>\n  );\n};\n\nconst container = css`\n  width: 100%;\n\n  .story-grid-wrapper {\n    width: 100%;\n\n    .story-grid {\n      width: 100%;\n      display: grid;\n      justify-content: center;\n      grid-template-columns: repeat(auto-fill, minmax(6.9375rem, 7.5rem));\n      grid-gap: 0.5rem;\n    }\n  }\n\n  @media screen and (max-width: ${theme.devices.mobile}) {\n    .story-grid-wrapper {\n      .story-grid {\n        grid-template-columns: repeat(3, minmax(0, 6.9375rem));\n      }\n    }\n  }\n`;\nexport default GenreStoryGrid;\n","import React from 'react';\nimport useTranslation from 'next-translate/useTranslation';\nimport { usePlayTypeContext } from '@/provider/PlayTypeProvider';\nimport { useAdultStoryListQuery } from '@/operations/queries/home/__generated__/useAdultStoryList.generated';\nimport { formatMoreLink, getHomeSectionName } from '@common/utils';\n\nimport StoryWrapper from '@components/main/common/StoryWrapper';\nimport SectionTitle from '@components/main/common/title/SectionTitle';\nimport GenreStoryGrid from '@components/main/home/grid/GenreStoryGrid';\nimport SmallStoryItem from '../../common/storyItem/SmallStoryItem';\nimport * as Types from '../../../../baseType';\nimport { useGetUserQuery } from '@/operations/queries/user/__generated__/getUser.generated';\n\nconst AdultStory = () => {\n  const { t } = useTranslation();\n  const { playType } = usePlayTypeContext();\n\n  const { data: userData } = useGetUserQuery();\n\n  const { data } = useAdultStoryListQuery({\n    variables: {\n      playType,\n      sorting: 'DAILY_RANK_ASC' as Types.Story_Sorting,\n    },\n  });\n\n  // 성인인증을 하지 않았거나 성인인증이 만료된 경우 성인 스토리를 보여주지 않는다.\n  if (\n    !data?.listStoryByWebV3.list.length ||\n    !userData?.getUser?.certificatedAt ||\n    userData?.getUser?.isExpiredCertification\n  ) {\n    return null;\n  }\n\n  return (\n    <StoryWrapper>\n      <SectionTitle\n        title={t('home_screen_title_stories_for_adult')}\n        showMoreButton\n        moreLink={formatMoreLink({ sectionName: 'adult', playType })}\n      />\n      <GenreStoryGrid\n        section={getHomeSectionName({\n          playType,\n          section: t('home_screen_title_stories_for_adult'),\n        })}\n      >\n        {data?.listStoryByWebV3.list?.slice(0, 6).map((item, index) => (\n          <SmallStoryItem\n            index={index}\n            section={getHomeSectionName({\n              playType,\n              section: t('home_screen_title_stories_for_adult'),\n            })}\n            key={item.storyId}\n            data={item}\n            hasTitle\n            showInteractiveBanner={item.playType === 'Interactive' && !playType}\n          />\n        ))}\n      </GenreStoryGrid>\n    </StoryWrapper>\n  );\n};\n\nexport default AdultStory;\n","import React from 'react';\nimport useTranslation from 'next-translate/useTranslation';\nimport { css } from '@emotion/react';\nimport { formatMoreLink } from '@/common/utils';\nimport { usePlayTypeContext } from '@/provider/PlayTypeProvider';\nimport { useFavoriteStoryListQuery } from '@/operations/queries/home/useFavoriteStoryList';\nimport { CarouselStory } from '@components/commons';\nimport StoryWrapper from '@components/main/common/StoryWrapper';\nimport SectionTitle from '@components/main/common/title/SectionTitle';\nimport SmallStoryItem from '../../common/storyItem/SmallStoryItem';\nimport { useGetUserQuery } from '@/operations/queries/user/getUser';\n\nconst FavoriteStory = () => {\n  const { t } = useTranslation();\n  const { playType } = usePlayTypeContext();\n\n  const { data: userData } = useGetUserQuery();\n  const { data } = useFavoriteStoryListQuery({\n    page: 1,\n  });\n\n  if (!data?.listUserLikeStoryBundle.list.length) {\n    return null;\n  }\n\n  return (\n    <StoryWrapper>\n      <SectionTitle\n        title={\n          userData?.getUser?.isAnonymous || !userData?.getUser?.name\n            ? t('home_screen_title_favorite')\n            : t('home_screen_title_favorite_with_nickname', {\n                value: userData?.getUser?.name,\n              })\n        }\n        moreLink={formatMoreLink({\n          sectionName: 'favorite',\n          playType: playType,\n        })}\n        showMoreButton={true}\n      />\n      <div css={wrapper}>\n        <CarouselStory section=\"홈_좋아한작품\">\n          {data?.listUserLikeStoryBundle.list.map((item, index) => (\n            <div className=\"item\" key={item.storyId}>\n              <SmallStoryItem\n                section=\"홈_좋아한작품\"\n                index={index}\n                data={item}\n                hasTitle\n              />\n            </div>\n          ))}\n        </CarouselStory>\n      </div>\n    </StoryWrapper>\n  );\n};\n\nconst wrapper = css`\n  padding: 0 1rem;\n\n  .item {\n    margin-right: 0.625rem;\n  }\n`;\n\nexport default FavoriteStory;\n","import * as Types from '../../../../baseType';\n\nimport { gql } from '@apollo/client';\nimport * as Apollo from '@apollo/client';\nconst defaultOptions = {} as const;\nexport type FeaturedDtoFragment = { __typename?: 'Featured', storyId: number, story: { __typename?: 'Story', name: string }, coverImageFile?: { __typename?: 'ImageFile', link: string } | null };\n\nexport type FeaturedStoryQueryVariables = Types.Exact<{ [key: string]: never; }>;\n\n\nexport type FeaturedStoryQuery = { __typename?: 'Query', getFeatured?: { __typename?: 'Featured', storyId: number, story: { __typename?: 'Story', name: string }, coverImageFile?: { __typename?: 'ImageFile', link: string } | null } | null };\n\nexport const FeaturedDtoFragmentDoc = gql`\n    fragment FeaturedDto on Featured {\n  story {\n    name\n  }\n  storyId\n  coverImageFile {\n    link\n  }\n}\n    `;\nexport const FeaturedStoryDocument = gql`\n    query FeaturedStory {\n  getFeatured {\n    ...FeaturedDto\n  }\n}\n    ${FeaturedDtoFragmentDoc}`;\n\n/**\n * __useFeaturedStoryQuery__\n *\n * To run a query within a React component, call `useFeaturedStoryQuery` and pass it any options that fit your needs.\n * When your component renders, `useFeaturedStoryQuery` 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 } = useFeaturedStoryQuery({\n *   variables: {\n *   },\n * });\n */\nexport function useFeaturedStoryQuery(baseOptions?: Apollo.QueryHookOptions<FeaturedStoryQuery, FeaturedStoryQueryVariables>) {\n        const options = {...defaultOptions, ...baseOptions}\n        return Apollo.useQuery<FeaturedStoryQuery, FeaturedStoryQueryVariables>(FeaturedStoryDocument, options);\n      }\nexport function useFeaturedStoryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<FeaturedStoryQuery, FeaturedStoryQueryVariables>) {\n          const options = {...defaultOptions, ...baseOptions}\n          return Apollo.useLazyQuery<FeaturedStoryQuery, FeaturedStoryQueryVariables>(FeaturedStoryDocument, options);\n        }\nexport type FeaturedStoryQueryHookResult = ReturnType<typeof useFeaturedStoryQuery>;\nexport type FeaturedStoryLazyQueryHookResult = ReturnType<typeof useFeaturedStoryLazyQuery>;\nexport type FeaturedStoryQueryResult = Apollo.QueryResult<FeaturedStoryQuery, FeaturedStoryQueryVariables>;","import React, { useEffect, useRef } from 'react';\nimport { useFeaturedStoryQuery } from '@/operations/queries/home/__generated__/useFeaturedStory.generated';\nimport { viewStoryThumbnail } from '@lib/eventManager';\nimport { css } from '@emotion/react';\nimport theme from '@styles/theme';\nimport { Story_Play_Type } from '@/baseType';\nimport { getHomeSectionName } from '@/common/utils';\nimport { usePlayTypeContext } from '@/provider/PlayTypeProvider';\nimport { useAppDispatch } from '@/store/hooks';\nimport { setPreviousSection } from '@/slices/eventSlice';\n\nimport StoryItemLink from '@components/main/common/storyItem/link/StoryItemLink';\nimport SPImage from '@components/commons/image/SPImage';\n\nconst FeaturedStoryItem = () => {\n  const { data } = useFeaturedStoryQuery();\n  const itemRef = useRef<HTMLDivElement | null>(null);\n  const { playType } = usePlayTypeContext();\n  const dispatch = useAppDispatch();\n\n  useEffect(() => {\n    if (!itemRef.current) return;\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (\n            entry.isIntersecting &&\n            itemRef.current &&\n            entry.target instanceof HTMLElement\n          ) {\n            viewStoryThumbnail({\n              section: getHomeSectionName({ playType, section: '피쳐드' }),\n              index: '0',\n              story: data?.getFeatured?.story.name,\n              storyId: String(data?.getFeatured?.storyId),\n              contentType:\n                playType === Story_Play_Type.Epub ? 'novel' : 'interactive',\n            });\n          }\n        });\n      },\n      {\n        threshold: 1,\n      },\n    );\n\n    observer.observe(itemRef.current as Element);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [playType]);\n\n  if (!data?.getFeatured) {\n    return null;\n  }\n\n  const setEventParams = () => {\n    dispatch(\n      setPreviousSection(getHomeSectionName({ playType, section: '피쳐드' })),\n    );\n  };\n\n  return (\n    <StoryItemLink\n      storyId={data.getFeatured.storyId}\n      setEventParams={setEventParams}\n    >\n      <div css={wrapper} ref={itemRef}>\n        <SPImage\n          src={data?.getFeatured?.coverImageFile?.link || ''}\n          objectFit=\"cover\"\n          height=\"343\"\n          width=\"343\"\n        />\n      </div>\n    </StoryItemLink>\n  );\n};\n\nconst wrapper = css`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  max-width: ${theme.maxWidth};\n  height: 100%;\n  margin-bottom: 1em;\n  background: ${theme.colors.gray100};\n\n  img {\n    border: 1px solid red;\n    border-radius: 0.22em;\n    image-rendering: auto;\n    cursor: pointer;\n  }\n`;\n\nexport default FeaturedStoryItem;\n","import React from 'react';\nimport { usePlayTypeContext } from '@/provider/PlayTypeProvider';\nimport { useFinishedStoryListQuery } from '@/operations/queries/home/__generated__/useFinishedStoryList.generated';\nimport { formatMoreLink, getHomeSectionName } from '@common/utils';\n\nimport StoryItem from '@components/main/common/storyItem/StoryItem';\nimport StoryWrapper from '@components/main/common/StoryWrapper';\nimport SectionTitle from '@components/main/common/title/SectionTitle';\nimport { CarouselStory } from '@components/commons';\n\ninterface IFinishedStory {\n  title: string;\n}\n\nconst FinishedStory = ({ title }: IFinishedStory) => {\n  const { playType: homeTabType } = usePlayTypeContext();\n  const { data } = useFinishedStoryListQuery({\n    variables: { playType: homeTabType },\n  });\n\n  if (!data?.listStoryByWebV3.list.length) {\n    return null;\n  }\n\n  return (\n    <StoryWrapper>\n      <SectionTitle\n        title={title}\n        showMoreButton\n        moreLink={formatMoreLink({\n          sectionName: 'finished',\n          playType: homeTabType,\n        })}\n      />\n      <CarouselStory\n        section={getHomeSectionName({\n          playType: homeTabType,\n          section: title,\n        })}\n      >\n        {data.listStoryByWebV3.list.map((item, index, array) => (\n          <StoryItem\n            index={index}\n            section={getHomeSectionName({\n              playType: homeTabType,\n              section: title,\n            })}\n            key={item.storyId}\n            data={item}\n            isFirstItem={index === 0}\n            isLastItem={index === array.length - 1}\n            showInteractiveBanner={\n              item.playType === 'Interactive' && !homeTabType\n            }\n          />\n        ))}\n      </CarouselStory>\n    </StoryWrapper>\n  );\n};\n\nexport default FinishedStory;\n","import React from 'react';\nimport { css } from '@emotion/react';\nimport { getStatusText } from '@common/utils';\n\nimport StoryItemTitle from '../title/StoryItemTitle';\nimport SPImage from '@components/commons/image/SPImage';\nimport StoryItemLink from './link/StoryItemLink';\nimport { Story_Play_Type } from '@/baseType';\nimport { GenerationStoryItemFragment } from '@/operations/queries/home/__generated__/useGenerationStoryList.generated';\n\ninterface ICardStoryItem {\n  data: GenerationStoryItemFragment;\n  index: number;\n}\n\nconst SmallCardStoryItem = ({ data, index }: ICardStoryItem) => {\n  return (\n    <div\n      data-name={data.name}\n      data-index={index}\n      data-id={data.storyId}\n      data-status={getStatusText(data)}\n      data-content-type={\n        data.playType === Story_Play_Type.Epub ? 'novel' : 'interactive'\n      }\n    >\n      <StoryItemLink storyId={data.storyId} isAdult={data.isAdult}>\n        <div css={wrapper}>\n          <div className=\"thumbnail\">\n            {data?.mainImageFile?.link && (\n              <SPImage\n                src={data.mainImageFile.link}\n                objectFit=\"cover\"\n                alt={data.name}\n                width={80}\n                height={80}\n              />\n            )}\n          </div>\n          <StoryItemTitle\n            title={data?.name}\n            subTitle={data?.shortDesc}\n            author={data?.authorName}\n            isShowUp={data.isUp}\n            isShowAdultIcon={data.isAdult}\n          />\n        </div>\n      </StoryItemLink>\n    </div>\n  );\n};\n\nconst wrapper = css`\n  display: flex;\n  gap: 0.625em;\n  width: 18.75em;\n  cursor: pointer;\n\n  .thumbnail {\n    width: 5em;\n    height: 5em;\n    flex-shrink: 0;\n\n    img {\n      border-radius: 0.25em;\n      image-rendering: auto;\n    }\n  }\n`;\n\nexport default SmallCardStoryItem;\n","import React from 'react';\nimport { css } from '@emotion/react';\nimport { splitArrayIntoN } from '@common/utils';\nimport { Section } from '@customTypes/event';\nimport SmallCardStoryItem from '@/components/main/common/storyItem/SmallCardStoryItem';\n\nimport SectionTitle from '../title/SectionTitle';\nimport { CarouselStory, LayoutForLazyLoading } from '@components/commons';\nimport StoryWrapper from '../StoryWrapper';\nimport { GenerationStoryFragment } from '@/operations/queries/home/__generated__/useGenerationStoryList.generated';\n\ninterface IStoryList {\n  section: Section;\n  data: GenerationStoryFragment;\n  title?: string;\n}\n\nconst MultiLineStoryList = ({ data, section, title }: IStoryList) => {\n  return (\n    <LayoutForLazyLoading>\n      <StoryWrapper>\n        <SectionTitle title={title || data.title} />\n        <CarouselStory section={section}>\n          {splitArrayIntoN(data.stories, 2)?.map((item, index) => (\n            <div css={wrapper} key={item[0].storyId}>\n              <SmallCardStoryItem data={item[0]} index={index} />\n              {item[1] && <SmallCardStoryItem data={item[1]} index={index} />}\n            </div>\n          ))}\n        </CarouselStory>\n      </StoryWrapper>\n    </LayoutForLazyLoading>\n  );\n};\n\nconst wrapper = css`\n  display: flex;\n  flex-direction: column;\n  margin-left: 0.75em;\n  gap: 1em;\n`;\n\nexport default MultiLineStoryList;\n","import React from 'react';\nimport { useGenerationStoryListQuery } from '@/operations/queries/home/__generated__/useGenerationStoryList.generated';\n\nimport MultiLineStoryList from '@components/main/common/list/MultiLineStoryList';\nimport StoryRecommendation from './StoryRecommendation';\nimport { getHomeSectionName } from '@/common/utils';\nimport { usePlayTypeContext } from '@/provider/PlayTypeProvider';\nimport { useGetUserQuery } from '@/operations/queries/user/__generated__/getUser.generated';\nimport useTranslation from 'next-translate/useTranslation';\n\nconst GenerationStoryList = () => {\n  const { data } = useGenerationStoryListQuery();\n  const { playType } = usePlayTypeContext();\n  const { data: userData } = useGetUserQuery();\n  const { t } = useTranslation();\n\n  if (!data) {\n    return null;\n  }\n\n  return (\n    <>\n      {data?.getHomeSections.length ? (\n        data?.getHomeSections.map((generation) => (\n          <MultiLineStoryList\n            key={generation.key}\n            section={getHomeSectionName({\n              playType,\n              section: `연령별_${generation.key}`,\n            })}\n            data={generation}\n            title={\n              userData?.getUser?.isAnonymous || !userData?.getUser?.name\n                ? t('home_screen_title_recommend')\n                : t('home_screen_title_recommend_with_nickname', {\n                    value: userData?.getUser?.name,\n                  })\n            }\n          />\n        ))\n      ) : (\n        <StoryRecommendation />\n      )}\n    </>\n  );\n};\n\nexport default GenerationStoryList;\n","import React from 'react';\nimport useTranslation from 'next-translate/useTranslation';\nimport { usePlayTypeContext } from '@/provider/PlayTypeProvider';\nimport { useHomeTabGenreStoryListQuery } from '@/operations/queries/home/__generated__/useGetHomeTabGenreStoryList.generated';\nimport { formatMoreLink, getHomeSectionName } from '@common/utils';\nimport { Story_Play_Type } from '@/baseType';\n\nimport GenreStoryGrid from '@components/main/home/grid/GenreStoryGrid';\nimport SmallStoryItem from '@components/main/common/storyItem/SmallStoryItem';\nimport StoryWrapper from '@components/main/common/StoryWrapper';\nimport SectionTitle from '@components/main/common/title/SectionTitle';\nimport { GenreInfoDtoFragment } from '@/operations/fragments/__generated__/home.generated';\nimport { useSectionStoryGenresQuery } from '@/operations/queries/home/__generated__/useHomeStoryGenres.generated';\n\nconst GenreStoryList = () => {\n  const { data } = useSectionStoryGenresQuery({\n    variables: {\n      tab: 'Home',\n    },\n  });\n\n  return (\n    <>\n      {data?.sectionStoryGenres.map((genre) => (\n        <GenreStory genre={genre} key={genre.type} />\n      ))}\n    </>\n  );\n};\n\nconst GenreStory = ({ genre }: { genre: GenreInfoDtoFragment }) => {\n  const { t } = useTranslation();\n  const { playType: homeTabType } = usePlayTypeContext();\n  const { data } = useHomeTabGenreStoryListQuery({\n    variables: {\n      genre: genre.type,\n      playType: homeTabType,\n    },\n  });\n\n  if (!data?.listStoryByWebV3.list.length) {\n    return null;\n  }\n\n  return (\n    <StoryWrapper key={genre.type}>\n      <SectionTitle\n        title={t(genre.title?.key ?? '') || '-'}\n        showMoreButton\n        moreLink={formatMoreLink({\n          sectionName: 'genre',\n          playType: homeTabType,\n          genreType: genre.type,\n        })}\n      />\n      <GenreStoryGrid\n        section={getHomeSectionName({\n          playType: homeTabType,\n          section: genre.text.ko_KR,\n        })}\n      >\n        <>\n          {data?.listStoryByWebV3.list.slice(0, 6).map((item, index) => (\n            <SmallStoryItem\n              key={item.storyId}\n              section={getHomeSectionName({\n                playType: homeTabType,\n                section: genre.text.ko_KR,\n              })}\n              data={item}\n              index={index}\n              hasTitle\n              showInteractiveBanner={\n                item.playType === Story_Play_Type.Interactive && !homeTabType\n              }\n            />\n          ))}\n        </>\n      </GenreStoryGrid>\n    </StoryWrapper>\n  );\n};\n\nexport default GenreStoryList;\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 OriginalStoryListQueryVariables = Types.Exact<{\n  page?: Types.InputMaybe<Types.Scalars['Int']>;\n  playType?: Types.InputMaybe<Types.Story_Play_Type>;\n}>;\n\n\nexport type OriginalStoryListQuery = { __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 OriginalStoryListDocument = gql`\n    query OriginalStoryList($page: Int, $playType: STORY_PLAY_TYPE) {\n  listStoryByWebV3(\n    data: {page: $page, playType: $playType, pageSize: 15, uiSectionType: Original}\n  ) {\n    totalCount\n    page\n    pageSize\n    list {\n      ...StoryVerticalCoverDto\n    }\n  }\n}\n    ${StoryVerticalCoverDtoFragmentDoc}`;\n\n/**\n * __useOriginalStoryListQuery__\n *\n * To run a query within a React component, call `useOriginalStoryListQuery` and pass it any options that fit your needs.\n * When your component renders, `useOriginalStoryListQuery` 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 } = useOriginalStoryListQuery({\n *   variables: {\n *      page: // value for 'page'\n *      playType: // value for 'playType'\n *   },\n * });\n */\nexport function useOriginalStoryListQuery(baseOptions?: Apollo.QueryHookOptions<OriginalStoryListQuery, OriginalStoryListQueryVariables>) {\n        const options = {...defaultOptions, ...baseOptions}\n        return Apollo.useQuery<OriginalStoryListQuery, OriginalStoryListQueryVariables>(OriginalStoryListDocument, options);\n      }\nexport function useOriginalStoryListLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<OriginalStoryListQuery, OriginalStoryListQueryVariables>) {\n          const options = {...defaultOptions, ...baseOptions}\n          return Apollo.useLazyQuery<OriginalStoryListQuery, OriginalStoryListQueryVariables>(OriginalStoryListDocument, options);\n        }\nexport type OriginalStoryListQueryHookResult = ReturnType<typeof useOriginalStoryListQuery>;\nexport type OriginalStoryListLazyQueryHookResult = ReturnType<typeof useOriginalStoryListLazyQuery>;\nexport type OriginalStoryListQueryResult = Apollo.QueryResult<OriginalStoryListQuery, OriginalStoryListQueryVariables>;","import React from 'react';\nimport useTranslation from 'next-translate/useTranslation';\nimport { usePlayTypeContext } from '@/provider/PlayTypeProvider';\nimport { useOriginalStoryListQuery } from '@/operations/queries/home/__generated__/useOriginalStoryList.generated';\nimport { formatMoreLink, getHomeSectionName } from '@common/utils';\n\nimport StoryItem from '@components/main/common/storyItem/StoryItem';\nimport StoryWrapper from '@components/main/common/StoryWrapper';\nimport SectionTitle from '@components/main/common/title/SectionTitle';\nimport { CarouselStory } from '@components/commons';\n\nconst OriginalStory = () => {\n  const { t } = useTranslation();\n  const { playType } = usePlayTypeContext();\n\n  const { data } = useOriginalStoryListQuery({\n    variables: { playType },\n  });\n\n  if (!data?.listStoryByWebV3.list.length) {\n    return null;\n  }\n\n  return (\n    <StoryWrapper>\n      <SectionTitle\n        title={t('home_screen_title_original_story')}\n        showMoreButton\n        moreLink={formatMoreLink({\n          sectionName: 'original',\n          playType,\n        })}\n      />\n      <CarouselStory\n        section={getHomeSectionName({\n          playType,\n          section: t('home_screen_title_original_story'),\n        })}\n      >\n        {data.listStoryByWebV3.list?.map((item, index, array) => (\n          <StoryItem\n            index={index}\n            section={getHomeSectionName({\n              playType,\n              section: t('home_screen_title_original_story'),\n            })}\n            key={item.storyId}\n            data={item}\n            isFirstItem={index === 0}\n            isLastItem={index === array.length - 1}\n            showInteractiveBanner={item.playType === 'Interactive' && !playType}\n          />\n        ))}\n      </CarouselStory>\n    </StoryWrapper>\n  );\n};\n\nexport default OriginalStory;\n","import React from 'react';\nimport useTranslation from 'next-translate/useTranslation';\nimport { useQuery } from '@apollo/client';\nimport { GET_USER } from '@api/user';\nimport { GetUser } from '@customTypes/user';\nimport { css } from '@emotion/react';\n\nimport SectionTitle from '@components/main/common/title/SectionTitle';\nimport StoryWrapper from '@components/main/common/StoryWrapper';\nimport SmallStoryItem from '../../common/storyItem/SmallStoryItem';\nimport { formatMoreLink } from '@/common/utils';\nimport { CarouselStory } from '@/components/commons';\nimport { useUserHistoryListQuery } from '@/operations/queries/home/useUserHistoryList';\nimport { usePlayTypeContext } from '@/provider/PlayTypeProvider';\nimport { Story_Play_Type } from '@/baseType';\n\nconst PlayedStory = () => {\n  const { t } = useTranslation();\n  const { data: userData } = useQuery<GetUser>(GET_USER);\n  const { playType } = usePlayTypeContext();\n  const { data } = useUserHistoryListQuery({\n    playType: playType as Story_Play_Type,\n  });\n\n  if (!data?.listUserStoryHistoryV3.list.length) {\n    return null;\n  }\n\n  return (\n    <StoryWrapper>\n      <SectionTitle\n        title={t('home_screen_title_read_with_nickname', {\n          value: userData?.getUser.name,\n        })}\n        showMoreButton\n        moreLink={formatMoreLink({\n          sectionName: 'history',\n          playType: playType,\n        })}\n      />\n      <div css={wrapper}>\n        <CarouselStory section=\"홈_지난스토리\">\n          {data.listUserStoryHistoryV3.list.map((item, index) => (\n            <div className=\"item\" key={item.story.storyId}>\n              <SmallStoryItem\n                key={item.story.storyId}\n                section={'홈_지난스토리'}\n                data={item.story}\n                index={index}\n                hasTitle\n                hasMoreIcon\n                userHistoryId={item.userStoryHistoryId}\n              />\n            </div>\n          ))}\n        </CarouselStory>\n      </div>\n    </StoryWrapper>\n  );\n};\n\nconst wrapper = css`\n  padding: 0 1rem;\n\n  .item {\n    margin-right: 0.625rem;\n  }\n`;\n\nexport default PlayedStory;\n","import React, { useRef } from 'react';\nimport useTranslation from 'next-translate/useTranslation';\nimport { usePlayTypeContext } from '@/provider/PlayTypeProvider';\nimport { useRankingStoryListQuery } from '@/operations/queries/home/__generated__/useRankingStoryList.generated';\nimport { css } from '@emotion/react';\nimport { formatMoreLink, getHomeSectionName } from '@common/utils';\n\nimport StoryItemTitleWithRanking from '@components/main/common/title/StoryItemTitleWithRanking';\nimport StoryItemLink from '@/components/main/common/storyItem/link/StoryItemLink';\nimport StoryWrapper from '@components/main/common/StoryWrapper';\nimport SectionTitle from '@components/main/common/title/SectionTitle';\nimport { SPImage } from '@components/commons';\nimport { useAppDispatch } from '@/store/hooks';\nimport { setPreviousSection } from '@/slices/eventSlice';\nimport { Story_Play_Type } from '@/baseType';\nimport { useVisibleStoryItemEvent } from '@/hooks/useVisibleStoryItemEvent';\n\nconst RankingStory = () => {\n  const { playType } = usePlayTypeContext();\n  const { data } = useRankingStoryListQuery({\n    variables: {\n      playType,\n      pageSize: 20,\n    },\n  });\n  const storyListRef = useRef<HTMLDivElement | null>(null);\n  const { t } = useTranslation();\n  const dispatch = useAppDispatch();\n  useVisibleStoryItemEvent({\n    storyListRef,\n    section: getHomeSectionName({ section: '이번 주 급 상승 작품', playType }),\n  });\n\n  if (!data?.listWeeklyStoryRankingV3.list.length) {\n    return null;\n  }\n\n  const setEventParams = () => {\n    dispatch(\n      setPreviousSection(\n        getHomeSectionName({\n          playType,\n          section: t('home_screen_title_ranking'),\n        }),\n      ),\n    );\n  };\n\n  return (\n    <StoryWrapper>\n      <SectionTitle\n        title={t('home_screen_title_ranking')}\n        showMoreButton\n        moreLink={formatMoreLink({\n          sectionName: 'ranking',\n          playType,\n        })}\n      />\n      <div css={container} ref={storyListRef}>\n        {data?.listWeeklyStoryRankingV3.list.slice(0, 5).map((item, index) => (\n          <div\n            data-name={item.story.name}\n            data-index={index}\n            data-id={item.story.storyId}\n            data-content-type={\n              item.story.playType === Story_Play_Type.Epub\n                ? 'novel'\n                : 'interactive'\n            }\n            key={item.story.storyId}\n          >\n            <StoryItemLink\n              storyId={item.story.storyId}\n              setEventParams={setEventParams}\n            >\n              <div className=\"item-wrapper\">\n                <div className=\"thumbnail\">\n                  <SPImage\n                    src={item.story.mainImageFile?.link ?? ''}\n                    objectFit=\"cover\"\n                    alt={item.story.name}\n                    width={52}\n                    height={74}\n                  />\n                </div>\n                <StoryItemTitleWithRanking\n                  title={item.story.name}\n                  subTitle={`${\n                    t(item.story?.genreKey?.text.key ?? '') || '-'\n                  } ・ ${item.story?.authorName}`}\n                  isShowUp={item.story.isUp}\n                  isNew={item.isNew}\n                  amountChange={item.amountChange}\n                  ranking={item.ranking}\n                  isAdult={item.story.isAdult}\n                />\n              </div>\n            </StoryItemLink>\n          </div>\n        ))}\n      </div>\n    </StoryWrapper>\n  );\n};\n\nconst container = css`\n  display: flex;\n  flex-direction: column;\n  gap: 0.5625rem;\n\n  .item-wrapper {\n    display: flex;\n    gap: 1rem;\n    cursor: pointer;\n\n    .thumbnail {\n      width: 3.25rem;\n      height: 4.625rem;\n\n      img {\n        border-radius: 0.25em;\n        image-rendering: auto;\n      }\n    }\n  }\n`;\n\nexport default RankingStory;\n","import React from 'react';\nimport { useRouter } from 'next/router';\nimport useTranslation from 'next-translate/useTranslation';\nimport { css } from '@emotion/react';\nimport theme from '@styles/theme';\nimport Button from '@components/commons/button/Button';\nimport { useIntersection } from '@hooks/useIntersection';\n\nimport SectionTitle from '../../common/title/SectionTitle';\n\nconst StoryRecommendation = () => {\n  const { t } = useTranslation();\n  const router = useRouter();\n  const [isView, setRef] = useIntersection();\n\n  return (\n    <section css={container} ref={setRef}>\n      {isView && (\n        <>\n          <SectionTitle title={t('home_screen_title_recommend')} />\n          <div className=\"recommendation-content\">\n            <Button\n              title={t('home_screen_button_recommend_story')}\n              customCSS={buttonStyle}\n              isFill={false}\n              onClick={() => router.push('/auth')}\n            />\n            <p className=\"recommendation-desc\">\n              {t('home_screen_description_more_infomation_for_story_recommand')}\n            </p>\n          </div>\n        </>\n      )}\n    </section>\n  );\n};\n\nconst buttonStyle = css`\n  width: 21.4375rem;\n  height: 2.25rem;\n  border-radius: 0.25rem;\n  ${theme.font.header.subhead2};\n  color: ${theme.colors.white};\n  margin-bottom: 1rem;\n  background: ${theme.colors.gray900};\n  cursor: pointer;\n\n  @media screen and (max-width: ${theme.devices.mobile}) {\n    width: 100%;\n  }\n`;\n\nconst container = css`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  padding: 2.5rem 0.9375rem 1rem;\n\n  .recommendation-content {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    .recommendation-desc {\n      ${theme.font.body.body1};\n      color: ${theme.colors.gray600};\n      padding-bottom: 1.5em;\n    }\n  }\n`;\n\nexport default StoryRecommendation;\n","import React from 'react';\nimport { usePlayTypeContext } from '@/provider/PlayTypeProvider';\nimport { useMonthlyStoryListQuery } from '@/operations/queries/home/__generated__/useMonthlyStoryList.generated';\nimport { formatMoreLink, getHomeSectionName } from '@common/utils';\n\nimport StoryItem from '@components/main/common/storyItem/StoryItem';\nimport StoryWrapper from '@components/main/common/StoryWrapper';\nimport SectionTitle from '@components/main/common/title/SectionTitle';\nimport { CarouselStory } from '@components/commons';\n\ninterface IMonthlyStory {\n  title: string;\n}\n\nconst TopStory = ({ title }: IMonthlyStory) => {\n  const { playType } = usePlayTypeContext();\n  const { data } = useMonthlyStoryListQuery({\n    variables: {\n      playType,\n    },\n  });\n\n  if (!data?.listStoryByWebV3.list.length) {\n    return null;\n  }\n\n  return (\n    <StoryWrapper>\n      <SectionTitle\n        title={title}\n        showMoreButton\n        moreLink={formatMoreLink({ sectionName: 'monthly', playType })}\n      />\n      <CarouselStory section={getHomeSectionName({ playType, section: title })}>\n        {data?.listStoryByWebV3.list.map((item, index, array) => (\n          <StoryItem\n            key={item.storyId}\n            section={getHomeSectionName({ playType, section: title })}\n            index={index}\n            data={item}\n            isFirstItem={index === 0}\n            isLastItem={index === array.length - 1}\n            showTopLabel\n          />\n        ))}\n      </CarouselStory>\n    </StoryWrapper>\n  );\n};\n\nexport default TopStory;\n","import React from 'react';\nimport { usePlayTypeContext } from '@/provider/PlayTypeProvider';\nimport { useNewStoryListQuery } from '@/operations/queries/home/__generated__/useNewStoryList.generated';\nimport { formatMoreLink, getHomeSectionName } from '@common/utils';\n\nimport StoryItem from '@components/main/common/storyItem/StoryItem';\nimport StoryWrapper from '@components/main/common/StoryWrapper';\nimport SectionTitle from '@components/main/common/title/SectionTitle';\nimport { CarouselStory } from '@components/commons';\n\ninterface INewStory {\n  title: string;\n}\n\nconst NewStory = ({ title }: INewStory) => {\n  const { playType: homeTabType } = usePlayTypeContext();\n  const { data } = useNewStoryListQuery({\n    variables: { playType: homeTabType },\n  });\n\n  if (!data?.listStoryByWebV3.list.length) {\n    return null;\n  }\n\n  return (\n    <StoryWrapper>\n      <SectionTitle\n        title={title}\n        moreLink={formatMoreLink({\n          sectionName: 'new',\n          playType: homeTabType,\n        })}\n        showMoreButton={true}\n      />\n      <CarouselStory\n        section={getHomeSectionName({\n          playType: homeTabType,\n          section: title,\n        })}\n      >\n        {data.listStoryByWebV3.list.map((item, index, array) => (\n          <StoryItem\n            key={item.storyId}\n            section={getHomeSectionName({\n              playType: homeTabType,\n              section: title,\n            })}\n            index={index}\n            data={item}\n            isFirstItem={index === 0}\n            isLastItem={index === array.length - 1}\n            showInteractiveBanner={\n              item.playType === 'Interactive' && !homeTabType\n            }\n          />\n        ))}\n      </CarouselStory>\n    </StoryWrapper>\n  );\n};\n\nexport default NewStory;\n","import React, { useRef } from 'react';\nimport { css } from '@emotion/react';\nimport theme from '@styles/theme';\nimport { Section } from '@customTypes/event';\n\nimport SectionTitle from '../../common/title/SectionTitle';\nimport { useVisibleStoryItemEvent } from '@/hooks/useVisibleStoryItemEvent';\n\ninterface IAllStoryGrid {\n  section: Section;\n  title: string | string[];\n  children: JSX.Element[] | JSX.Element;\n  isTitleTextBlack?: boolean;\n}\n\nconst AllStoryGrid = ({\n  section,\n  title,\n  children,\n  isTitleTextBlack = false,\n}: IAllStoryGrid) => {\n  const storyListRef = useRef<HTMLDivElement | null>(null);\n  useVisibleStoryItemEvent({ storyListRef, section });\n\n  return (\n    <section css={container}>\n      <SectionTitle title={title} isTextBlack={isTitleTextBlack} />\n      <div className=\"story-grid-wrapper\">\n        <div className=\"story-grid\" ref={storyListRef}>\n          {children}\n        </div>\n      </div>\n    </section>\n  );\n};\n\nconst container = css`\n  width: 100%;\n  margin-top: 1rem;\n  padding: 2.5rem 1.25rem 5rem;\n  background: ${theme.colors.gray900};\n\n  .story-grid-wrapper {\n    width: 100%;\n\n    .story-grid {\n      width: 100%;\n      display: grid;\n      justify-content: center;\n      grid-template-columns: repeat(auto-fill, minmax(6.9375rem, 7.5rem));\n      grid-gap: 0.5rem;\n    }\n  }\n\n  @media screen and (max-width: ${theme.devices.mobile}) {\n    padding: 2.5rem 1.25rem 1.5em;\n\n    .story-grid-wrapper {\n      .story-grid {\n        grid-template-columns: repeat(3, minmax(0, 6.9375rem));\n      }\n    }\n  }\n`;\nexport default AllStoryGrid;\n","import React, { useEffect, useRef } from 'react';\nimport useTranslation from 'next-translate/useTranslation';\nimport { StorySearchQuery } from '@/operations/queries/home/__generated__/useSearchStory.generated';\nimport SmallStoryItem from '@components/main/common/storyItem/SmallStoryItem';\nimport useInfiniteScroll from '@/hooks/useInfiniteScroll';\nimport { NetworkStatus } from '@/common/values';\nimport { SPLoading } from '@/components/commons';\nimport AllStoryGrid from '../grid/AllStoryGrid';\n\ninterface ISearchStory {\n  searchText?: string;\n  data?: StorySearchQuery;\n  fetchMore: (options: { variables: { page: number } }) => void;\n  hasNext: boolean;\n  networkStatus: number;\n  nextPage: number;\n}\n\nconst SearchStory = ({\n  searchText,\n  data,\n  fetchMore,\n  networkStatus,\n  hasNext,\n  nextPage,\n}: ISearchStory) => {\n  const { t } = useTranslation();\n\n  const fetchMoreRef = useRef<HTMLDivElement>(null);\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    <AllStoryGrid\n      isTitleTextBlack\n      section={'검색'}\n      title={\n        searchText\n          ? `${t('search_screen_label_search_result_from', {\n              value: searchText,\n            })}`\n          : `${t('search_screen_title_total_story')}`\n      }\n    >\n      <>\n        {data?.searchStoryByWebV3.list?.map((item, index) => (\n          <SmallStoryItem\n            index={index}\n            section={'검색'}\n            key={item.storyId}\n            data={item}\n            showInteractiveBanner={item.playType === 'Interactive'}\n            showStoryGameBanner={item.playType === 'Storygame'}\n          />\n        ))}\n        {networkStatus === NetworkStatus.loading && <SPLoading />}\n        <div ref={fetchMoreRef} />\n      </>\n    </AllStoryGrid>\n  );\n};\n\nexport default SearchStory;\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 AdultStoryListQueryVariables = Types.Exact<{\n  page?: Types.InputMaybe<Types.Scalars['Int']>;\n  playType?: Types.InputMaybe<Types.Story_Play_Type>;\n  sorting?: Types.InputMaybe<Types.Story_Sorting>;\n}>;\n\n\nexport type AdultStoryListQuery = { __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 AdultStoryListDocument = gql`\n    query AdultStoryList($page: Int, $playType: STORY_PLAY_TYPE, $sorting: STORY_SORTING) {\n  listStoryByWebV3(\n    data: {page: $page, playType: $playType, pageSize: 15, uiSectionType: Adult, sorting: $sorting}\n  ) {\n    totalCount\n    page\n    pageSize\n    list {\n      ...StoryVerticalCoverDto\n    }\n  }\n}\n    ${StoryVerticalCoverDtoFragmentDoc}`;\n\n/**\n * __useAdultStoryListQuery__\n *\n * To run a query within a React component, call `useAdultStoryListQuery` and pass it any options that fit your needs.\n * When your component renders, `useAdultStoryListQuery` 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 } = useAdultStoryListQuery({\n *   variables: {\n *      page: // value for 'page'\n *      playType: // value for 'playType'\n *      sorting: // value for 'sorting'\n *   },\n * });\n */\nexport function useAdultStoryListQuery(baseOptions?: Apollo.QueryHookOptions<AdultStoryListQuery, AdultStoryListQueryVariables>) {\n        const options = {...defaultOptions, ...baseOptions}\n        return Apollo.useQuery<AdultStoryListQuery, AdultStoryListQueryVariables>(AdultStoryListDocument, options);\n      }\nexport function useAdultStoryListLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AdultStoryListQuery, AdultStoryListQueryVariables>) {\n          const options = {...defaultOptions, ...baseOptions}\n          return Apollo.useLazyQuery<AdultStoryListQuery, AdultStoryListQueryVariables>(AdultStoryListDocument, options);\n        }\nexport type AdultStoryListQueryHookResult = ReturnType<typeof useAdultStoryListQuery>;\nexport type AdultStoryListLazyQueryHookResult = ReturnType<typeof useAdultStoryListLazyQuery>;\nexport type AdultStoryListQueryResult = Apollo.QueryResult<AdultStoryListQuery, AdultStoryListQueryVariables>;","import * as Types from '../../../../baseType';\n\nimport { gql } from '@apollo/client';\nimport { StoryHorizontalCoverDtoFragmentDoc } from '../../../fragments/__generated__/home.generated';\nimport * as Apollo from '@apollo/client';\nconst defaultOptions = {} as const;\nexport type FavoriteHorizontalCoverStoryQueryVariables = Types.Exact<{\n  page?: Types.InputMaybe<Types.Scalars['Int']>;\n}>;\n\n\nexport type FavoriteHorizontalCoverStoryQuery = { __typename?: 'Query', listUserLikeStoryBundle: { __typename?: 'ListableStory', totalCount: number, page: number, pageSize: number, list: Array<{ __typename?: 'Story', storyId: number, name: string, oneLineDesc: string, authorName: string, numViews: number, numLikes: number, numComment: number, onHiatus: boolean, isFinished: boolean, isUp: boolean, isAdult: boolean, isTimeLeapFree: boolean, playType: Types.Story_Play_Type, mainImageFile?: { __typename?: 'File', link: string } | null, genreKey?: { __typename?: 'StoryGenre', text: { __typename?: 'LocalizeKey', key: string, ko_KR: string } } | null }> } };\n\n\nexport const FavoriteHorizontalCoverStoryDocument = gql`\n    query FavoriteHorizontalCoverStory($page: Int) {\n  listUserLikeStoryBundle(data: {page: $page, pageSize: 6}) {\n    totalCount\n    page\n    pageSize\n    list {\n      ...StoryHorizontalCoverDto\n    }\n  }\n}\n    ${StoryHorizontalCoverDtoFragmentDoc}`;\n\n/**\n * __useFavoriteHorizontalCoverStoryQuery__\n *\n * To run a query within a React component, call `useFavoriteHorizontalCoverStoryQuery` and pass it any options that fit your needs.\n * When your component renders, `useFavoriteHorizontalCoverStoryQuery` 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 } = useFavoriteHorizontalCoverStoryQuery({\n *   variables: {\n *      page: // value for 'page'\n *   },\n * });\n */\nexport function useFavoriteHorizontalCoverStoryQuery(baseOptions?: Apollo.QueryHookOptions<FavoriteHorizontalCoverStoryQuery, FavoriteHorizontalCoverStoryQueryVariables>) {\n        const options = {...defaultOptions, ...baseOptions}\n        return Apollo.useQuery<FavoriteHorizontalCoverStoryQuery, FavoriteHorizontalCoverStoryQueryVariables>(FavoriteHorizontalCoverStoryDocument, options);\n      }\nexport function useFavoriteHorizontalCoverStoryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<FavoriteHorizontalCoverStoryQuery, FavoriteHorizontalCoverStoryQueryVariables>) {\n          const options = {...defaultOptions, ...baseOptions}\n          return Apollo.useLazyQuery<FavoriteHorizontalCoverStoryQuery, FavoriteHorizontalCoverStoryQueryVariables>(FavoriteHorizontalCoverStoryDocument, options);\n        }\nexport type FavoriteHorizontalCoverStoryQueryHookResult = ReturnType<typeof useFavoriteHorizontalCoverStoryQuery>;\nexport type FavoriteHorizontalCoverStoryLazyQueryHookResult = ReturnType<typeof useFavoriteHorizontalCoverStoryLazyQuery>;\nexport type FavoriteHorizontalCoverStoryQueryResult = Apollo.QueryResult<FavoriteHorizontalCoverStoryQuery, FavoriteHorizontalCoverStoryQueryVariables>;","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 FinishedStoryListQueryVariables = Types.Exact<{\n  page?: Types.InputMaybe<Types.Scalars['Int']>;\n  playType?: Types.InputMaybe<Types.Story_Play_Type>;\n}>;\n\n\nexport type FinishedStoryListQuery = { __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 FinishedStoryListDocument = gql`\n    query FinishedStoryList($page: Int, $playType: STORY_PLAY_TYPE) {\n  listStoryByWebV3(\n    data: {page: $page, playType: $playType, pageSize: 15, uiSectionType: Finished}\n  ) {\n    totalCount\n    page\n    pageSize\n    list {\n      ...StoryVerticalCoverDto\n    }\n  }\n}\n    ${StoryVerticalCoverDtoFragmentDoc}`;\n\n/**\n * __useFinishedStoryListQuery__\n *\n * To run a query within a React component, call `useFinishedStoryListQuery` and pass it any options that fit your needs.\n * When your component renders, `useFinishedStoryListQuery` 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 } = useFinishedStoryListQuery({\n *   variables: {\n *      page: // value for 'page'\n *      playType: // value for 'playType'\n *   },\n * });\n */\nexport function useFinishedStoryListQuery(baseOptions?: Apollo.QueryHookOptions<FinishedStoryListQuery, FinishedStoryListQueryVariables>) {\n        const options = {...defaultOptions, ...baseOptions}\n        return Apollo.useQuery<FinishedStoryListQuery, FinishedStoryListQueryVariables>(FinishedStoryListDocument, options);\n      }\nexport function useFinishedStoryListLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<FinishedStoryListQuery, FinishedStoryListQueryVariables>) {\n          const options = {...defaultOptions, ...baseOptions}\n          return Apollo.useLazyQuery<FinishedStoryListQuery, FinishedStoryListQueryVariables>(FinishedStoryListDocument, options);\n        }\nexport type FinishedStoryListQueryHookResult = ReturnType<typeof useFinishedStoryListQuery>;\nexport type FinishedStoryListLazyQueryHookResult = ReturnType<typeof useFinishedStoryListLazyQuery>;\nexport type FinishedStoryListQueryResult = Apollo.QueryResult<FinishedStoryListQuery, FinishedStoryListQueryVariables>;","import * as Types from '../../../../baseType';\n\nimport { gql } from '@apollo/client';\nimport * as Apollo from '@apollo/client';\nconst defaultOptions = {} as const;\nexport type GenerationStoryItemFragment = { __typename?: 'Story', type: Types.Story_Type, name: string, storyId: number, sectionType: Types.Story_Section_Type, isUp: boolean, isAdult: boolean, shortDesc?: string | null, authorName: string, playType: Types.Story_Play_Type, isFinished: boolean, onHiatus: boolean, mainImageFile?: { __typename?: 'File', link: string } | null };\n\nexport type GenerationStoryFragment = { __typename?: 'HomeSection', title: string, key?: string | null, stories: Array<{ __typename?: 'Story', type: Types.Story_Type, name: string, storyId: number, sectionType: Types.Story_Section_Type, isUp: boolean, isAdult: boolean, shortDesc?: string | null, authorName: string, playType: Types.Story_Play_Type, isFinished: boolean, onHiatus: boolean, mainImageFile?: { __typename?: 'File', link: string } | null }> };\n\nexport type GenerationStoryListQueryVariables = Types.Exact<{ [key: string]: never; }>;\n\n\nexport type GenerationStoryListQuery = { __typename?: 'Query', getHomeSections: Array<{ __typename?: 'HomeSection', title: string, key?: string | null, stories: Array<{ __typename?: 'Story', type: Types.Story_Type, name: string, storyId: number, sectionType: Types.Story_Section_Type, isUp: boolean, isAdult: boolean, shortDesc?: string | null, authorName: string, playType: Types.Story_Play_Type, isFinished: boolean, onHiatus: boolean, mainImageFile?: { __typename?: 'File', link: string } | null }> }> };\n\nexport const GenerationStoryItemFragmentDoc = gql`\n    fragment GenerationStoryItem on Story {\n  type\n  name\n  storyId\n  sectionType\n  isUp\n  isAdult\n  shortDesc\n  authorName\n  playType\n  isFinished\n  onHiatus\n  mainImageFile {\n    link\n  }\n}\n    `;\nexport const GenerationStoryFragmentDoc = gql`\n    fragment GenerationStory on HomeSection {\n  title\n  key\n  stories {\n    ...GenerationStoryItem\n  }\n}\n    ${GenerationStoryItemFragmentDoc}`;\nexport const GenerationStoryListDocument = gql`\n    query GenerationStoryList {\n  getHomeSections(data: {type: UserGeneration}) {\n    ...GenerationStory\n  }\n}\n    ${GenerationStoryFragmentDoc}`;\n\n/**\n * __useGenerationStoryListQuery__\n *\n * To run a query within a React component, call `useGenerationStoryListQuery` and pass it any options that fit your needs.\n * When your component renders, `useGenerationStoryListQuery` 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 } = useGenerationStoryListQuery({\n *   variables: {\n *   },\n * });\n */\nexport function useGenerationStoryListQuery(baseOptions?: Apollo.QueryHookOptions<GenerationStoryListQuery, GenerationStoryListQueryVariables>) {\n        const options = {...defaultOptions, ...baseOptions}\n        return Apollo.useQuery<GenerationStoryListQuery, GenerationStoryListQueryVariables>(GenerationStoryListDocument, options);\n      }\nexport function useGenerationStoryListLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GenerationStoryListQuery, GenerationStoryListQueryVariables>) {\n          const options = {...defaultOptions, ...baseOptions}\n          return Apollo.useLazyQuery<GenerationStoryListQuery, GenerationStoryListQueryVariables>(GenerationStoryListDocument, options);\n        }\nexport type GenerationStoryListQueryHookResult = ReturnType<typeof useGenerationStoryListQuery>;\nexport type GenerationStoryListLazyQueryHookResult = ReturnType<typeof useGenerationStoryListLazyQuery>;\nexport type GenerationStoryListQueryResult = Apollo.QueryResult<GenerationStoryListQuery, GenerationStoryListQueryVariables>;","import * as Types from '../../../../baseType';\n\nimport { gql } from '@apollo/client';\nimport * as Apollo from '@apollo/client';\nconst defaultOptions = {} as const;\nexport type GenreStoryItemFragment = { __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, 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 };\n\nexport type HomeTabGenreStoryListQueryVariables = Types.Exact<{\n  page?: Types.InputMaybe<Types.Scalars['Int']>;\n  genre: Types.Scalars['String'];\n  playType?: Types.InputMaybe<Types.Story_Play_Type>;\n}>;\n\n\nexport type HomeTabGenreStoryListQuery = { __typename?: 'Query', listStoryByWebV3: { __typename?: 'ListableStory', totalCount: number, page: number, pageSize: number, version?: number | null, 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, 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 }> } };\n\nexport const GenreStoryItemFragmentDoc = gql`\n    fragment GenreStoryItem on Story {\n  type\n  storyId\n  name\n  authorName\n  onHiatus\n  isFinished\n  isNew\n  isUp\n  isTimeLeapFree\n  playType\n  isAdult\n  mainImageFile {\n    link\n  }\n  storyWeekdays {\n    weekday\n  }\n  genreKey {\n    text {\n      key\n    }\n  }\n}\n    `;\nexport const HomeTabGenreStoryListDocument = gql`\n    query HomeTabGenreStoryList($page: Int, $genre: String!, $playType: STORY_PLAY_TYPE) {\n  listStoryByWebV3(\n    data: {page: $page, pageSize: 6, genre: $genre, playType: $playType}\n  ) {\n    totalCount\n    page\n    pageSize\n    version\n    list {\n      ...GenreStoryItem\n    }\n  }\n}\n    ${GenreStoryItemFragmentDoc}`;\n\n/**\n * __useHomeTabGenreStoryListQuery__\n *\n * To run a query within a React component, call `useHomeTabGenreStoryListQuery` and pass it any options that fit your needs.\n * When your component renders, `useHomeTabGenreStoryListQuery` 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 } = useHomeTabGenreStoryListQuery({\n *   variables: {\n *      page: // value for 'page'\n *      genre: // value for 'genre'\n *      playType: // value for 'playType'\n *   },\n * });\n */\nexport function useHomeTabGenreStoryListQuery(baseOptions: Apollo.QueryHookOptions<HomeTabGenreStoryListQuery, HomeTabGenreStoryListQueryVariables>) {\n        const options = {...defaultOptions, ...baseOptions}\n        return Apollo.useQuery<HomeTabGenreStoryListQuery, HomeTabGenreStoryListQueryVariables>(HomeTabGenreStoryListDocument, options);\n      }\nexport function useHomeTabGenreStoryListLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<HomeTabGenreStoryListQuery, HomeTabGenreStoryListQueryVariables>) {\n          const options = {...defaultOptions, ...baseOptions}\n          return Apollo.useLazyQuery<HomeTabGenreStoryListQuery, HomeTabGenreStoryListQueryVariables>(HomeTabGenreStoryListDocument, options);\n        }\nexport type HomeTabGenreStoryListQueryHookResult = ReturnType<typeof useHomeTabGenreStoryListQuery>;\nexport type HomeTabGenreStoryListLazyQueryHookResult = ReturnType<typeof useHomeTabGenreStoryListLazyQuery>;\nexport type HomeTabGenreStoryListQueryResult = Apollo.QueryResult<HomeTabGenreStoryListQuery, HomeTabGenreStoryListQueryVariables>;","import * as Types from '../../../../baseType';\n\nimport { gql } from '@apollo/client';\nimport * as Apollo from '@apollo/client';\nconst defaultOptions = {} as const;\nexport type HomeStoryGenreItemFragment = { __typename?: 'StoryGenre', type: string, text: { __typename?: 'LocalizeKey', key: string, ko_KR: string }, title?: { __typename?: 'LocalizeKey', key: string, ko_KR: string } | null, subTitle?: { __typename?: 'LocalizeKey', key: string, ko_KR: string } | null };\n\nexport type SectionStoryGenresQueryVariables = Types.Exact<{\n  tab: Types.Scalars['String'];\n}>;\n\n\nexport type SectionStoryGenresQuery = { __typename?: 'Query', sectionStoryGenres: Array<{ __typename?: 'StoryGenre', type: string, text: { __typename?: 'LocalizeKey', key: string, ko_KR: string }, title?: { __typename?: 'LocalizeKey', key: string, ko_KR: string } | null, subTitle?: { __typename?: 'LocalizeKey', key: string, ko_KR: string } | null }> };\n\nexport const HomeStoryGenreItemFragmentDoc = gql`\n    fragment homeStoryGenreItem on StoryGenre {\n  type\n  text {\n    key\n    ko_KR\n  }\n  title {\n    key\n    ko_KR\n  }\n  subTitle {\n    key\n    ko_KR\n  }\n}\n    `;\nexport const SectionStoryGenresDocument = gql`\n    query sectionStoryGenres($tab: String!) {\n  sectionStoryGenres(data: {tab: $tab}) {\n    ...homeStoryGenreItem\n  }\n}\n    ${HomeStoryGenreItemFragmentDoc}`;\n\n/**\n * __useSectionStoryGenresQuery__\n *\n * To run a query within a React component, call `useSectionStoryGenresQuery` and pass it any options that fit your needs.\n * When your component renders, `useSectionStoryGenresQuery` 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 } = useSectionStoryGenresQuery({\n *   variables: {\n *      tab: // value for 'tab'\n *   },\n * });\n */\nexport function useSectionStoryGenresQuery(baseOptions: Apollo.QueryHookOptions<SectionStoryGenresQuery, SectionStoryGenresQueryVariables>) {\n        const options = {...defaultOptions, ...baseOptions}\n        return Apollo.useQuery<SectionStoryGenresQuery, SectionStoryGenresQueryVariables>(SectionStoryGenresDocument, options);\n      }\nexport function useSectionStoryGenresLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<SectionStoryGenresQuery, SectionStoryGenresQueryVariables>) {\n          const options = {...defaultOptions, ...baseOptions}\n          return Apollo.useLazyQuery<SectionStoryGenresQuery, SectionStoryGenresQueryVariables>(SectionStoryGenresDocument, options);\n        }\nexport type SectionStoryGenresQueryHookResult = ReturnType<typeof useSectionStoryGenresQuery>;\nexport type SectionStoryGenresLazyQueryHookResult = ReturnType<typeof useSectionStoryGenresLazyQuery>;\nexport type SectionStoryGenresQueryResult = Apollo.QueryResult<SectionStoryGenresQuery, SectionStoryGenresQueryVariables>;","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 MonthlyStoryListQueryVariables = Types.Exact<{\n  playType?: Types.InputMaybe<Types.Story_Play_Type>;\n}>;\n\n\nexport type MonthlyStoryListQuery = { __typename?: 'Query', listStoryByWebV3: { __typename?: 'ListableStory', totalCount: number, page: number, pageSize: number, version?: number | null, 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 MonthlyStoryListDocument = gql`\n    query MonthlyStoryList($playType: STORY_PLAY_TYPE) {\n  listStoryByWebV3(\n    data: {pageSize: 20, uiSectionType: Monthly, playType: $playType}\n  ) {\n    totalCount\n    page\n    pageSize\n    version\n    list {\n      ...StoryVerticalCoverDto\n    }\n  }\n}\n    ${StoryVerticalCoverDtoFragmentDoc}`;\n\n/**\n * __useMonthlyStoryListQuery__\n *\n * To run a query within a React component, call `useMonthlyStoryListQuery` and pass it any options that fit your needs.\n * When your component renders, `useMonthlyStoryListQuery` 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 } = useMonthlyStoryListQuery({\n *   variables: {\n *      playType: // value for 'playType'\n *   },\n * });\n */\nexport function useMonthlyStoryListQuery(baseOptions?: Apollo.QueryHookOptions<MonthlyStoryListQuery, MonthlyStoryListQueryVariables>) {\n        const options = {...defaultOptions, ...baseOptions}\n        return Apollo.useQuery<MonthlyStoryListQuery, MonthlyStoryListQueryVariables>(MonthlyStoryListDocument, options);\n      }\nexport function useMonthlyStoryListLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MonthlyStoryListQuery, MonthlyStoryListQueryVariables>) {\n          const options = {...defaultOptions, ...baseOptions}\n          return Apollo.useLazyQuery<MonthlyStoryListQuery, MonthlyStoryListQueryVariables>(MonthlyStoryListDocument, options);\n        }\nexport type MonthlyStoryListQueryHookResult = ReturnType<typeof useMonthlyStoryListQuery>;\nexport type MonthlyStoryListLazyQueryHookResult = ReturnType<typeof useMonthlyStoryListLazyQuery>;\nexport type MonthlyStoryListQueryResult = Apollo.QueryResult<MonthlyStoryListQuery, MonthlyStoryListQueryVariables>;","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 NewStoryItemFragment = { __typename?: 'Story', storyId: number, name: string, type: Types.Story_Type, onHiatus: boolean, isFinished: boolean, isOriginal: boolean, isNew: boolean, isUp: boolean, isAdult: boolean, authorName: string, isTimeLeapFree: boolean, shortDesc?: string | null, sectionType: Types.Story_Section_Type, playType: Types.Story_Play_Type, mainImageFile?: { __typename?: 'File', link: string } | null, introImageFile?: { __typename?: 'File', link: string } | null, storyWeekdays?: Array<{ __typename?: 'StoryWeekday', weekday: Types.Story_Weekday }> | null, genreKey?: { __typename?: 'StoryGenre', text: { __typename?: 'LocalizeKey', key: string } } | null };\n\nexport type NewStoryListQueryVariables = Types.Exact<{\n  page?: Types.InputMaybe<Types.Scalars['Int']>;\n  version?: Types.InputMaybe<Types.Scalars['Int']>;\n  playType?: Types.InputMaybe<Types.Story_Play_Type>;\n}>;\n\n\nexport type NewStoryListQuery = { __typename?: 'Query', listStoryByWebV3: { __typename?: 'ListableStory', totalCount: number, page: number, pageSize: number, version?: number | null, 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\nexport const NewStoryItemFragmentDoc = gql`\n    fragment NewStoryItem on Story {\n  storyId\n  name\n  type\n  onHiatus\n  isFinished\n  isOriginal\n  isNew\n  isUp\n  isAdult\n  mainImageFile {\n    link\n  }\n  introImageFile {\n    link\n  }\n  storyWeekdays {\n    weekday\n  }\n  genreKey {\n    text {\n      key\n    }\n  }\n  authorName\n  isTimeLeapFree\n  shortDesc\n  sectionType\n  playType\n}\n    `;\nexport const NewStoryListDocument = gql`\n    query NewStoryList($page: Int, $version: Int, $playType: STORY_PLAY_TYPE) {\n  listStoryByWebV3(\n    data: {page: $page, playType: $playType, version: $version, pageSize: 15, uiSectionType: New, sorting: RANDOM}\n  ) {\n    totalCount\n    page\n    pageSize\n    version\n    list {\n      ...StoryVerticalCoverDto\n    }\n  }\n}\n    ${StoryVerticalCoverDtoFragmentDoc}`;\n\n/**\n * __useNewStoryListQuery__\n *\n * To run a query within a React component, call `useNewStoryListQuery` and pass it any options that fit your needs.\n * When your component renders, `useNewStoryListQuery` 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 } = useNewStoryListQuery({\n *   variables: {\n *      page: // value for 'page'\n *      version: // value for 'version'\n *      playType: // value for 'playType'\n *   },\n * });\n */\nexport function useNewStoryListQuery(baseOptions?: Apollo.QueryHookOptions<NewStoryListQuery, NewStoryListQueryVariables>) {\n        const options = {...defaultOptions, ...baseOptions}\n        return Apollo.useQuery<NewStoryListQuery, NewStoryListQueryVariables>(NewStoryListDocument, options);\n      }\nexport function useNewStoryListLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<NewStoryListQuery, NewStoryListQueryVariables>) {\n          const options = {...defaultOptions, ...baseOptions}\n          return Apollo.useLazyQuery<NewStoryListQuery, NewStoryListQueryVariables>(NewStoryListDocument, options);\n        }\nexport type NewStoryListQueryHookResult = ReturnType<typeof useNewStoryListQuery>;\nexport type NewStoryListLazyQueryHookResult = ReturnType<typeof useNewStoryListLazyQuery>;\nexport type NewStoryListQueryResult = Apollo.QueryResult<NewStoryListQuery, NewStoryListQueryVariables>;","import * as Types from '../../../../baseType';\n\nimport { gql } from '@apollo/client';\nimport * as Apollo from '@apollo/client';\nconst defaultOptions = {} as const;\nexport type RankingStoryItemFragment = { __typename?: 'WeeklyStoryRanking', ranking: number, amountChange: number, isNew: boolean, story: { __typename?: 'Story', storyId: number, name: string, authorName: string, onHiatus: boolean, isFinished: boolean, isUp: boolean, playType: Types.Story_Play_Type, isAdult: boolean, mainImageFile?: { __typename?: 'File', link: string } | null, genreKey?: { __typename?: 'StoryGenre', text: { __typename?: 'LocalizeKey', key: string } } | null } };\n\nexport type RankingStoryListQueryVariables = Types.Exact<{\n  page?: Types.InputMaybe<Types.Scalars['Int']>;\n  pageSize?: Types.InputMaybe<Types.Scalars['Int']>;\n  playType?: Types.InputMaybe<Types.Story_Play_Type>;\n}>;\n\n\nexport type RankingStoryListQuery = { __typename?: 'Query', listWeeklyStoryRankingV3: { __typename?: 'ListableWeeklyStoryRanking', totalCount: number, page: number, pageSize: number, list: Array<{ __typename?: 'WeeklyStoryRanking', ranking: number, amountChange: number, isNew: boolean, story: { __typename?: 'Story', storyId: number, name: string, authorName: string, onHiatus: boolean, isFinished: boolean, isUp: boolean, playType: Types.Story_Play_Type, isAdult: boolean, mainImageFile?: { __typename?: 'File', link: string } | null, genreKey?: { __typename?: 'StoryGenre', text: { __typename?: 'LocalizeKey', key: string } } | null } }> } };\n\nexport const RankingStoryItemFragmentDoc = gql`\n    fragment RankingStoryItem on WeeklyStoryRanking {\n  ranking\n  amountChange\n  isNew\n  story {\n    storyId\n    name\n    authorName\n    onHiatus\n    isFinished\n    isUp\n    playType\n    isAdult\n    mainImageFile {\n      link\n    }\n    genreKey {\n      text {\n        key\n      }\n    }\n  }\n}\n    `;\nexport const RankingStoryListDocument = gql`\n    query RankingStoryList($page: Int, $pageSize: Int, $playType: STORY_PLAY_TYPE) {\n  listWeeklyStoryRankingV3(\n    data: {page: $page, pageSize: $pageSize, playType: $playType}\n  ) {\n    totalCount\n    page\n    pageSize\n    list {\n      ...RankingStoryItem\n    }\n  }\n}\n    ${RankingStoryItemFragmentDoc}`;\n\n/**\n * __useRankingStoryListQuery__\n *\n * To run a query within a React component, call `useRankingStoryListQuery` and pass it any options that fit your needs.\n * When your component renders, `useRankingStoryListQuery` 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 } = useRankingStoryListQuery({\n *   variables: {\n *      page: // value for 'page'\n *      pageSize: // value for 'pageSize'\n *      playType: // value for 'playType'\n *   },\n * });\n */\nexport function useRankingStoryListQuery(baseOptions?: Apollo.QueryHookOptions<RankingStoryListQuery, RankingStoryListQueryVariables>) {\n        const options = {...defaultOptions, ...baseOptions}\n        return Apollo.useQuery<RankingStoryListQuery, RankingStoryListQueryVariables>(RankingStoryListDocument, options);\n      }\nexport function useRankingStoryListLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<RankingStoryListQuery, RankingStoryListQueryVariables>) {\n          const options = {...defaultOptions, ...baseOptions}\n          return Apollo.useLazyQuery<RankingStoryListQuery, RankingStoryListQueryVariables>(RankingStoryListDocument, options);\n        }\nexport type RankingStoryListQueryHookResult = ReturnType<typeof useRankingStoryListQuery>;\nexport type RankingStoryListLazyQueryHookResult = ReturnType<typeof useRankingStoryListLazyQuery>;\nexport type RankingStoryListQueryResult = Apollo.QueryResult<RankingStoryListQuery, RankingStoryListQueryVariables>;","import { gql } from '@apollo/client';\nimport {\n  useFavoriteHorizontalCoverStoryQuery as useQuery,\n  FavoriteHorizontalCoverStoryQueryVariables,\n} from './__generated__/useFavoriteStoryList.generated';\n\nexport const FAVORITE_STORY_LIST = gql`\n  query FavoriteHorizontalCoverStory($page: Int) {\n    listUserLikeStoryBundle(data: { page: $page, pageSize: 6 }) {\n      totalCount\n      page\n      pageSize\n      list {\n        ...StoryHorizontalCoverDto\n      }\n    }\n  }\n`;\n\nexport const useFavoriteStoryListQuery = (\n  variables?: FavoriteHorizontalCoverStoryQueryVariables,\n) => {\n  const { data, fetchMore } = useQuery({\n    variables,\n  });\n\n  const hasNext =\n    data &&\n    data.listUserLikeStoryBundle.totalCount >\n      data.listUserLikeStoryBundle.list.length;\n\n  return { data, hasNext, fetchMore };\n};\n","import { gql } from '@apollo/client';\nimport {\n  UserHistoryListQueryVariables,\n  useUserHistoryListQuery as useQuery,\n} from './__generated__/useUserHistoryList.generated';\n\nexport const USER_HISTORY_LIST = gql`\n  query UserHistoryList($page: Int, $playType: STORY_PLAY_TYPE) {\n    listUserStoryHistoryV3(\n      data: { page: $page, pageSize: 6, playType: $playType }\n    ) {\n      totalCount\n      page\n      pageSize\n      list {\n        userStoryHistoryId\n        story {\n          ...StoryHorizontalCoverDto\n        }\n      }\n    }\n  }\n`;\n\nexport const useUserHistoryListQuery = (\n  variables?: UserHistoryListQueryVariables,\n) => {\n  const { data, fetchMore } = useQuery({\n    variables,\n  });\n\n  const hasNext =\n    data &&\n    data?.listUserStoryHistoryV3.totalCount >\n      data?.listUserStoryHistoryV3.list.length;\n\n  return { data, fetchMore, hasNext };\n};\n","import { gql } from '@apollo/client';\nimport { useGetUserQuery as useQuery } from './__generated__/getUser.generated';\n\nconst TERMS_DTO = gql`\n  fragment TermsDto on NewTermsToAcceptV2 {\n    TOS {\n      termsId\n      link\n    }\n    CollectionAndUseOfPrivacy {\n      termsId\n      link\n    }\n    PP {\n      termsId\n      link\n    }\n  }\n`;\n\nexport const GET_USER = gql`\n  query getUser {\n    getUser {\n      userId\n      name\n      isAnonymous\n      email\n      verifiedAt\n      currentCoin\n      updateToAuthorAt\n      authorName\n      priv\n      ssoLogins {\n        sId\n        userId\n        ssoProvider\n        ssoId\n        profile\n      }\n      isExpiredCertification\n      certificatedAt\n      birthDateToken\n      countryCode\n      myStory {\n        stat {\n          numStory\n          numViews\n          numChapter\n          numViews\n          numLikes\n        }\n      }\n      registeredAt\n      isTester\n      geo {\n        country\n        timezone\n        region\n      }\n      systemLanguage {\n        code\n        display\n      }\n      newTermsToAcceptV2 {\n        ...TermsDto\n      }\n    }\n  }\n  ${TERMS_DTO}\n`;\n\nexport const useGetUserQuery = () => {\n  const { data, loading } = useQuery();\n\n  return { data, loading };\n};\n","/* eslint-disable react/prop-types */\nimport React, { createContext, useContext } from 'react';\nimport { Story_Play_Type } from '@/baseType';\n\ninterface IPlayTypeContext {\n  playType?: Story_Play_Type;\n}\n\ninterface IPlayTypeProvider {\n  children: JSX.Element | Array<JSX.Element>;\n  playType?: Story_Play_Type;\n}\n\nconst initialState = {};\n\nconst PlayTypeContext = createContext<IPlayTypeContext>(initialState);\n\nconst PlayTypeProvider = ({ children, playType }: IPlayTypeProvider) => {\n  return (\n    <PlayTypeContext.Provider value={{ playType }}>\n      {children}\n    </PlayTypeContext.Provider>\n  );\n};\n\nexport const usePlayTypeContext = () => {\n  const state = useContext(PlayTypeContext);\n  if (!state) throw new Error('PlayTypeContext is undefined!');\n  return state;\n};\n\nexport default PlayTypeProvider;\n"],"names":["container","backgroundColor","css","children","wrapper","theme","ranking","t","useTranslation","className","isFirstItem","isLastItem","data","index","section","showTopLabel","showInteractiveBanner","dispatch","useAppDispatch","name","storyId","getLabelText","currentHomeTab","HOME_TAB_TYPE","isFinished","isOnHiatus","onHiatus","isUp","getStatusText","playType","Story_Play_Type","StoryItemLink","isAdult","setEventParams","setCurrentStoryLabelText","setPreviousSection","SPImage","src","mainImageFile","link","layout","alt","width","height","BandLabel","text","borderColor","StoryItemTitle","title","isShowUp","subTitle","genreKey","key","authorName","isTextBlack","descLink","showMoreButton","moreLink","usePlayTypeContext","map","item","href","onClick","touchNovelMoreChallenge","touchInteractiveMoreChallenge","stroke","RankingWrapper","amountChange","isNew","renderRankingStatus","useMemo","toString","replace","rankingStatusIconWrapper","restProps","isShowAdultIcon","storyListRef","useRef","useVisibleStoryItemEvent","ref","userData","useGetUserQuery","useAdultStoryListQuery","variables","sorting","listStoryByWebV3","list","length","getUser","certificatedAt","isExpiredCertification","formatMoreLink","sectionName","getHomeSectionName","slice","hasTitle","useFavoriteStoryListQuery","page","listUserLikeStoryBundle","isAnonymous","value","defaultOptions","FeaturedDtoFragmentDoc","gql","FeaturedStoryDocument","baseOptions","options","Apollo","useFeaturedStoryQuery","itemRef","useEffect","current","observer","IntersectionObserver","entries","forEach","entry","isIntersecting","target","HTMLElement","viewStoryThumbnail","story","getFeatured","String","contentType","threshold","observe","disconnect","coverImageFile","objectFit","homeTabType","useFinishedStoryListQuery","array","shortDesc","author","StoryWrapper","SectionTitle","splitArrayIntoN","stories","useGenerationStoryListQuery","getHomeSections","generation","StoryRecommendation","GenreStory","genre","useHomeTabGenreStoryListQuery","type","genreType","ko_KR","useSectionStoryGenresQuery","tab","sectionStoryGenres","OriginalStoryListDocument","StoryVerticalCoverDtoFragmentDoc","useOriginalStoryListQuery","StoryItem","useQuery","GET_USER","useUserHistoryListQuery","listUserStoryHistoryV3","hasMoreIcon","userHistoryId","userStoryHistoryId","useRankingStoryListQuery","pageSize","listWeeklyStoryRankingV3","buttonStyle","router","useRouter","useIntersection","isView","setRef","customCSS","isFill","push","useMonthlyStoryListQuery","useNewStoryListQuery","isTitleTextBlack","searchText","fetchMore","networkStatus","hasNext","nextPage","fetchMoreRef","intersecting","useInfiniteScroll","searchStoryByWebV3","SmallStoryItem","showStoryGameBanner","NetworkStatus","AdultStoryListDocument","FavoriteHorizontalCoverStoryDocument","StoryHorizontalCoverDtoFragmentDoc","useFavoriteHorizontalCoverStoryQuery","FinishedStoryListDocument","GenerationStoryItemFragmentDoc","GenerationStoryFragmentDoc","GenerationStoryListDocument","GenreStoryItemFragmentDoc","HomeTabGenreStoryListDocument","HomeStoryGenreItemFragmentDoc","SectionStoryGenresDocument","MonthlyStoryListDocument","NewStoryListDocument","RankingStoryItemFragmentDoc","RankingStoryListDocument","totalCount","TERMS_DTO","loading","initialState","PlayTypeContext","createContext","state","useContext","Error","Provider"],"sourceRoot":""}