{"version":3,"file":"0eae7d52-d9f1c545da964c262ed9.js","mappings":"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","sources":["webpack://inflearn-static/./src/components/infcon-2023/main/sections/SessionFlowList/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport { faArrowRight } from '@fortawesome/pro-regular-svg-icons';\nimport { Box, Button, desktopFirstMediaQuery, Icon, Title } from '@inflearn/ds-react';\nimport { motion } from 'framer-motion';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport SessionPagesDto from '../../../../../dtos/SessionPagesDto';\nimport useSessionProgramPages from '../../../../../hooks/useSessionProgramPages';\nimport useSessionSpeakerPages from '../../../../../hooks/useSessionSpeakerPages';\nimport { URLS } from '../../../../../utils/urls';\nimport { styleSection } from '../InteractionSections';\nimport { commonSectionItemVariants } from '../InteractionSections/variants';\nimport SessionCard, { CARD_WIDTH, MOBILE_CARD_WIDTH } from './SessionCard';\nimport { sampleSize } from 'lodash-es';\nimport Background from './Background';\n\nconst CARD_GAP = 20;\n\nconst SessionFlowList = () => {\n  const { data: speakersResponse } = useSessionSpeakerPages();\n  const { data: programResponse } = useSessionProgramPages();\n  const [isHover, setIsHover] = useState(false);\n  const tickerAnimationRef = useRef<Animation | null>(null);\n\n  const sessions = useMemo(() => {\n    if (speakersResponse === undefined) {\n      return [];\n    }\n\n    return new SessionPagesDto(speakersResponse).sessions;\n  }, [speakersResponse]);\n\n  const program = useMemo(() => {\n    if (programResponse === undefined) {\n      return [];\n    }\n\n    return new SessionPagesDto(programResponse).sessions;\n  }, [programResponse]);\n\n  const {\n    cardList,\n    copySessionCardList\n  } = useMemo(() => {\n    const cardList = sampleSize([...sessions, ...program], 5);\n    return {\n      cardList,\n      copySessionCardList: [...cardList, ...cardList]\n    };\n  }, [sessions, program]);\n\n  const tickerDurationTime = useMemo(() => {\n    return cardList.length * 2.5 * 1000;\n  }, [cardList]);\n\n  const transitionWidth = useMemo(() => {\n    return (CARD_WIDTH + CARD_GAP) * cardList.length;\n  }, [cardList]);\n\n  const mobileTransitionWidth = useMemo(() => {\n    return (MOBILE_CARD_WIDTH + CARD_GAP) * cardList.length;\n  }, [cardList]);\n\n  const setAnimateOnTicker = useCallback(\n    (transitionWidth: number) => {\n      const ticker = document.getElementById('session-ticker');\n      if (ticker != null) {\n        const tickerAnimation = ticker.animate(\n          [\n            {\n              transform: 'translateX(0)'\n            },\n            {\n              transform: `translateX(${-transitionWidth}px)`\n            }\n          ],\n          {\n            duration: tickerDurationTime,\n            easing: 'linear',\n            iterations: Infinity\n          }\n        );\n\n        tickerAnimationRef.current = tickerAnimation;\n      }\n    },\n    [tickerDurationTime]\n  );\n\n  const updateAnimateOnTicker = useCallback(() => {\n    const durationTime =\n      typeof window !== 'undefined' && window.innerWidth < 768\n        ? mobileTransitionWidth\n        : transitionWidth;\n    setAnimateOnTicker(durationTime);\n  }, [mobileTransitionWidth, transitionWidth]);\n\n  useEffect(() => {\n    updateAnimateOnTicker();\n  }, [cardList]);\n\n  useEffect(() => {\n    window.addEventListener('resize', updateAnimateOnTicker);\n\n    return () => {\n      window.removeEventListener('resize', updateAnimateOnTicker);\n    };\n  }, []);\n\n  useEffect(() => {\n    if (tickerAnimationRef.current !== null) {\n      tickerAnimationRef.current.updatePlaybackRate(isHover ? 0.5 : 1);\n    }\n  }, [isHover]);\n\n  if (speakersResponse === undefined) {\n    return <></>;\n  }\n\n  return (\n    <motion.section\n      css={[\n        styleSection,\n        {\n          padding: '200px 0px',\n          backgroundColor: 'white',\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'center',\n          alignItems: 'center',\n          overflowX: 'hidden',\n          [desktopFirstMediaQuery.mobile]: {\n            padding: '80px 0'\n          }\n        }\n      ]}>\n      <Background/>\n      <motion.div\n        initial=\"offscreen\"\n        whileInView=\"onscreen\"\n        viewport={{ once: true }}\n        variants={commonSectionItemVariants({ delay: 0.1 })}>\n        <Title align=\"center\" order={2} mb={40} css={styleSessionFlowListTitle}>\n          인프콘 2023\n          <br />\n          발표 세션을 소개합니다.\n        </Title>\n      </motion.div>\n      <Box\n        css={{\n          display: 'flex',\n          justifyContent: 'center'\n        }}>\n        <motion.div\n          initial=\"offscreen\"\n          whileInView=\"onscreen\"\n          viewport={{ once: true }}\n          variants={commonSectionItemVariants({ delay: 0.2 })}>\n          <a href={URLS.INFCON_2023__SESSION}>\n            <Button\n              rightIcon={<Icon icon={faArrowRight} />}\n              size=\"xl\"\n              radius=\"xl\"\n              variant=\"outline\"\n              css={{\n                backgroundColor: 'transparent',\n                ':hover': {\n                  backgroundColor: '#25262b',\n                  color: 'white'\n                }\n              }}\n              color=\"dark\">\n              전체 세션 보러 가기\n            </Button>\n          </a>\n        </motion.div>\n      </Box>\n      <motion.div\n        initial=\"offscreen\"\n        whileInView=\"onscreen\"\n        viewport={{ once: true }}\n        variants={commonSectionItemVariants({ delay: 0.3 })}\n        css={{\n          width: '100%',\n          overflowX: 'hidden',\n          overflowY: 'visible',\n          padding: '80px 0',\n          height: '520px',\n          [desktopFirstMediaQuery.mobile]: {\n            padding: '40px 0',\n            height: '340px'\n          }\n        }}>\n        <div\n          id=\"session-ticker\"\n          css={{\n            position: 'absolute',\n            width: 'fit-content'\n          }}\n          onMouseEnter={() => {\n            setIsHover(true);\n          }}\n          onMouseLeave={() => {\n            setIsHover(false);\n          }}>\n          <Box css={styleSessionFlowList} component=\"ul\">\n            {copySessionCardList.map((data, index) => {\n              return (\n                <Box component=\"li\" key={index}>\n                  <SessionCard\n                    subType={data.subType}\n                    type={data.trackName.split(',')[0]}\n                    title={data.title}\n                    speakerName={data.speakerName}\n                    company={data.affiliation}\n                    image={data.profileUrl}\n                    id={data.id}\n                  />\n                </Box>\n              );\n            })}\n          </Box>\n        </div>\n      </motion.div>\n    </motion.section>\n  );\n};\n\nconst styleSessionFlowListTitle = css({\n  marginBottom: '40px',\n  fontSize: '60px',\n  [desktopFirstMediaQuery.tablet]: {\n    fontSize: '54px'\n  },\n  [desktopFirstMediaQuery.mobile]: {\n    marginBottom: '24px',\n    fontSize: '32px'\n  }\n});\nconst styleSessionFlowList = css({\n  overflow: 'visible',\n  display: 'flex',\n  gap: `${CARD_GAP}px`\n});\n\nexport default SessionFlowList;\n"],"names":["styleSessionFlowListTitle","css","marginBottom","fontSize","desktopFirstMediaQuery","styleSessionFlowList","overflow","display","gap","CARD_GAP","data","speakersResponse","useSessionSpeakerPages","programResponse","useSessionProgramPages","isHover","setIsHover","useState","tickerAnimationRef","useRef","sessions","useMemo","undefined","SessionPagesDto","program","cardList","copySessionCardList","_sampleSize","tickerDurationTime","length","transitionWidth","CARD_WIDTH","mobileTransitionWidth","MOBILE_CARD_WIDTH","setAnimateOnTicker","useCallback","ticker","document","getElementById","tickerAnimation","animate","transform","duration","easing","iterations","Infinity","current","updateAnimateOnTicker","durationTime","window","innerWidth","useEffect","addEventListener","removeEventListener","updatePlaybackRate","___EmotionJSX","motion","styleSection","padding","backgroundColor","flexDirection","justifyContent","alignItems","overflowX","Background","initial","whileInView","viewport","once","variants","commonSectionItemVariants","delay","Title","align","order","mb","Box","href","URLS","Button","rightIcon","Icon","icon","faArrowRight","size","radius","variant","color","width","overflowY","height","id","onMouseEnter","onMouseLeave","component","map","index","key","SessionCard","subType","type","trackName","split","title","speakerName","company","affiliation","image","profileUrl"],"sourceRoot":""}