{"version":3,"file":"0eae7d52-19ee5ce63efdcd4f0bf1.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 { cardList, copySessionCardList } = 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(/\\s*,\\s*/)[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":["_ref","name","styles","_ref2","_ref3","styleSessionFlowListTitle","css","marginBottom","fontSize","desktopFirstMediaQuery","tablet","mobile","styleSessionFlowList","overflow","display","gap","SessionFlowList","data","speakersResponse","useSessionSpeakerPages","programResponse","useSessionProgramPages","isHover","setIsHover","useState","tickerAnimationRef","useRef","sessions","useMemo","undefined","SessionPagesDto","program","cardList","copySessionCardList","_sampleSize","concat","_toConsumableArray","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","React","Fragment","motion","section","styleSection","padding","backgroundColor","flexDirection","justifyContent","alignItems","overflowX","Background","div","initial","whileInView","viewport","once","variants","commonSectionItemVariants","delay","Title","align","order","mb","Box","href","URLS","INFCON_2023__SESSION","Button","rightIcon","Icon","icon","faArrowRight","size","radius","variant","color","_css","width","overflowY","height","id","onMouseEnter","onMouseLeave","component","map","index","key","SessionCard","subType","type","trackName","split","title","speakerName","company","affiliation","image","profileUrl"],"sourceRoot":""}