{"version":3,"file":"static/js/652.e4765065.chunk.js","mappings":"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","sources":["apis/api.js","components/Common/Carousel/BannerCarousel.jsx","components/Common/Skeleton/GallerySkeleton.jsx","components/Common/Carousel/Carousel.jsx","components/Common/Carousel/CarouselWrapper.jsx","components/Common/Skeleton/BannerSkeleton.jsx","components/Common/Skeleton/SkeletonItem.jsx","hooks/useLoading.jsx","pages/Main.jsx"],"sourcesContent":["import axios from 'axios';\r\n\r\nconst { REACT_APP_API } = process.env;\r\nexport const getData = async (path, navigate) => {\r\n  try {\r\n    const response = await axios.get(`${REACT_APP_API}/${path}`);\r\n    return response.data;\r\n  } catch (error) {\r\n    console.log(error);\r\n    navigate('/error');\r\n  }\r\n};\r\n\r\nexport const postData = async (path, data) => {\r\n  try {\r\n    const response = await axios.post(`${REACT_APP_API}/${path}`, data, {\r\n      headers: {\r\n        'Content-Type': 'application/json',\r\n      },\r\n    });\r\n    return response;\r\n  } catch (error) {\r\n    console.log(error);\r\n  }\r\n};\r\n","import React from 'react';\r\nimport Slider from 'react-slick';\r\nimport 'slick-carousel/slick/slick.css';\r\nimport 'slick-carousel/slick/slick-theme.css';\r\nimport styled from 'styled-components';\r\nimport BannerSkeleton from '../Skeleton/BannerSkeleton';\r\n\r\nconst SliderContainer = styled.section`\r\n  .slick-slider {\r\n  }\r\n  .slick-dots {\r\n    position: static;\r\n    padding-top: 50px;\r\n\r\n    @media screen and (max-width: 991px) {\r\n      padding-top: 40px;\r\n      li button:before {\r\n        font-size: 10px;\r\n      }\r\n    }\r\n  }\r\n  .slick-dots li.slick-active button:before {\r\n    color: var(--text-point-color);\r\n  }\r\n`;\r\n\r\nconst MainImgBox = styled.div`\r\n  outline: none;\r\n  @media screen and (max-width: 1440px) {\r\n    height: 540px;\r\n  }\r\n  @media screen and (max-width: 991px) {\r\n    height: 480px;\r\n  }\r\n  @media screen and (max-width: 500px) {\r\n    height: 550px;\r\n  }\r\n`;\r\nconst MainImg = styled.img`\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n`;\r\n\r\nexport const BannerLargeCarousel = React.memo(({ slides, path, loading }) => {\r\n  const settings = {\r\n    dots: true,\r\n    infinite: true,\r\n    autoplay: true,\r\n    autoplaySpeed: 3000,\r\n    slidesToShow: 1,\r\n    slidesToScroll: 1,\r\n    arrows: false,\r\n    pauseOnHover: false,\r\n    fade: true,\r\n  };\r\n  return (\r\n    <SliderContainer>\r\n      {loading ? (\r\n        <BannerSkeleton size={'large'} />\r\n      ) : (\r\n        <Slider {...settings}>\r\n          {slides &&\r\n            slides.map((slide, index) =>\r\n              //! 메인화면 배너\r\n              path === 'main' ? (\r\n                <MainImgBox key={index}>\r\n                  <picture>\r\n                    <source\r\n                      srcSet={\r\n                        slide.image_m_url === 'no-image-error'\r\n                          ? slide.image_url\r\n                          : slide.image_m_url\r\n                      }\r\n                      media=\"(max-width : 500px)\"\r\n                    />\r\n                    <MainImg src={slide.image_url} alt={slide.title} />\r\n                  </picture>\r\n                </MainImgBox>\r\n              ) : (\r\n                //! 스테이 배너\r\n                <MainImgBox key={index}>\r\n                  <picture>\r\n                    <source\r\n                      srcSet={\r\n                        slide.banner_m_url === 'no-image-error'\r\n                          ? slide.banner_url\r\n                          : slide.banner_m_url\r\n                      }\r\n                      media=\"(max-width : 500px)\"\r\n                    />\r\n                    <MainImg src={slide.banner_url} alt={slide.title} />\r\n                  </picture>\r\n                </MainImgBox>\r\n              ),\r\n            )}\r\n        </Slider>\r\n      )}\r\n    </SliderContainer>\r\n  );\r\n});\r\n\r\nexport const BannerSmallCarousel = React.memo(({ slides, loading }) => {\r\n  const settings = {\r\n    dots: true,\r\n    infinite: true,\r\n    autoplay: true,\r\n    autoplaySpeed: 3000,\r\n    slidesToShow: 1,\r\n    slidesToScroll: 1,\r\n    arrows: false,\r\n    pauseOnHover: false,\r\n    fade: true,\r\n  };\r\n  return (\r\n    <SliderContainer>\r\n      {loading ? (\r\n        <BannerSkeleton size={'small'} />\r\n      ) : (\r\n        <Slider {...settings}>\r\n          {slides &&\r\n            slides.map((slide, index) => {\r\n              <>\r\n                <MainImgBox key={index}>\r\n                  <picture>\r\n                    <source\r\n                      srcSet={\r\n                        slide.banner_url === 'no-image-error'\r\n                          ? slide.banner_url\r\n                          : slide.banner_m_url\r\n                      }\r\n                      media=\"(max-width : 500px)\"\r\n                    />\r\n\r\n                    <MainImg src={slide.banner_url} alt={slide.title} />\r\n                  </picture>\r\n                </MainImgBox>\r\n              </>;\r\n            })}\r\n        </Slider>\r\n      )}\r\n    </SliderContainer>\r\n  );\r\n});\r\n\r\nBannerLargeCarousel.displayName = 'BannerLargeCarousel';\r\nBannerSmallCarousel.displayName = 'BannerSmallCarousel';\r\n","import React from 'react';\r\nimport styled from 'styled-components';\r\nimport SkeletonItem from './SkeletonItem';\r\n\r\nconst GallerySkeletonWrapper = styled.section`\r\n  position: relative;\r\n`;\r\n\r\nconst EmblaViewport = styled.div`\r\n  overflow: hidden;\r\n`;\r\n\r\nconst EmblaContainer = styled.div`\r\n  display: flex;\r\n`;\r\n\r\nconst EmblaSlide = styled.div`\r\n  margin-right: ${({ padding }) => padding && padding};\r\n\r\n  @media screen and (max-width: 500px) {\r\n    margin-right: 15px;\r\n  }\r\n`;\r\n\r\nconst Image = styled(SkeletonItem)`\r\n  height: ${({ height }) => height && height};\r\n  width: ${({ width }) => width && width};\r\n  display: block;\r\n  object-fit: cover;\r\n\r\n  @media screen and (max-width: 500px) {\r\n    width: ${({ mobilewidth }) => mobilewidth && mobilewidth};\r\n    height: ${({ mobileheight }) => mobileheight && mobileheight};\r\n  }\r\n`;\r\nconst GallerySkeleton = ({\r\n  length,\r\n  width,\r\n  height,\r\n  padding,\r\n  mobilewidth,\r\n  mobileheight,\r\n}) => {\r\n  return (\r\n    <GallerySkeletonWrapper>\r\n      <EmblaViewport>\r\n        <EmblaContainer>\r\n          {new Array(length).fill('').map((_, index) => (\r\n            <EmblaSlide key={index} padding={padding}>\r\n              <Image\r\n                width={width}\r\n                height={height}\r\n                mobilewidth={mobilewidth}\r\n                mobileheight={mobileheight}\r\n              />\r\n            </EmblaSlide>\r\n          ))}\r\n        </EmblaContainer>\r\n      </EmblaViewport>\r\n    </GallerySkeletonWrapper>\r\n  );\r\n};\r\n\r\nexport default GallerySkeleton;\r\n","import React from 'react';\r\nimport Autoplay from 'embla-carousel-autoplay';\r\nimport useEmblaCarousel from 'embla-carousel-react';\r\nimport styled from 'styled-components';\r\n\r\nconst Embla = styled.div``;\r\n\r\nconst EmblaViewport = styled.div`\r\n  overflow: hidden;\r\n`;\r\n\r\nconst EmblaContainer = styled.div`\r\n  display: flex;\r\n`;\r\n\r\nconst EmblaSlide = styled.div`\r\n  margin-right: ${({ padding }) => padding && padding};\r\n\r\n  @media screen and (max-width: 500px) {\r\n    margin-right: 15px;\r\n  }\r\n`;\r\n\r\nconst Image = styled.img`\r\n  height: ${({ height }) => height && height};\r\n  width: ${({ width }) => width && width};\r\n  display: block;\r\n  object-fit: cover;\r\n\r\n  @media screen and (max-width: 500px) {\r\n    width: ${({ mobilewidth }) => mobilewidth && mobilewidth};\r\n    height: ${({ mobileheight }) => mobileheight && mobileheight};\r\n  }\r\n`;\r\n\r\nconst Carousel = React.memo(\r\n  ({ slides, width, height, padding, mobilewidth, mobileheight }) => {\r\n    const options = { loop: true, align: 'start' };\r\n    const [emblaRef] = useEmblaCarousel(options, [Autoplay({ delay: 2000 })]);\r\n    return (\r\n      <Embla>\r\n        <EmblaViewport ref={emblaRef}>\r\n          <EmblaContainer>\r\n            {slides &&\r\n              slides.map((slide, index) => (\r\n                <EmblaSlide key={index} padding={padding}>\r\n                  <picture>\r\n                    <source\r\n                      srcSet={\r\n                        slide.image_m_url === 'no-image-error'\r\n                          ? slide.image_url\r\n                          : slide.image_m_url\r\n                      }\r\n                      media=\"(max-width : 500px)\"\r\n                    />\r\n                    <Image\r\n                      src={slide.image_url}\r\n                      alt={slide.title}\r\n                      width={width}\r\n                      height={height}\r\n                      mobilewidth={mobilewidth}\r\n                      mobileheight={mobileheight}\r\n                    />\r\n                  </picture>\r\n                </EmblaSlide>\r\n              ))}\r\n          </EmblaContainer>\r\n        </EmblaViewport>\r\n      </Embla>\r\n    );\r\n  },\r\n);\r\n\r\nCarousel.displayName = 'Carousel';\r\nexport default Carousel;\r\n","import React from 'react';\r\nimport styled from 'styled-components';\r\nimport GallerySkeleton from '../Skeleton/GallerySkeleton';\r\nimport Carousel from './Carousel';\r\n\r\nconst CarosuelSection = styled.section`\r\n  position: relative;\r\n`;\r\n\r\nconst CarouselWrapper = React.memo(\r\n  ({ slides, width, height, padding, mobilewidth, mobileheight, loading }) => {\r\n    return (\r\n      <>\r\n        {loading ? (\r\n          <GallerySkeleton\r\n            length={5}\r\n            width={width}\r\n            height={height}\r\n            padding={padding}\r\n            mobilewidth={mobilewidth}\r\n            mobileheight={mobileheight}\r\n          />\r\n        ) : (\r\n          <CarosuelSection>\r\n            <Carousel\r\n              slides={slides}\r\n              width={width}\r\n              height={height}\r\n              padding={padding}\r\n              mobilewidth={mobilewidth}\r\n              mobileheight={mobileheight}\r\n            />\r\n          </CarosuelSection>\r\n        )}\r\n      </>\r\n    );\r\n  },\r\n);\r\nCarouselWrapper.displayName = 'CarouselWrapper';\r\nexport default CarouselWrapper;\r\n","import React from 'react';\r\nimport styled from 'styled-components';\r\nimport SkeletonItem from './SkeletonItem';\r\n\r\nconst LargeBannerWrapper = styled(SkeletonItem)`\r\n  padding-top: 50px;\r\n  height: calc(100vh - 277px);\r\n\r\n  @media screen and (max-width: 1440px) {\r\n    height: 540px;\r\n  }\r\n  @media screen and (max-width: 991px) {\r\n    height: 480px;\r\n    padding-top: 40px;\r\n    li button:before {\r\n      font-size: 10px;\r\n    }\r\n  }\r\n  @media screen and (max-width: 500px) {\r\n    height: 550px;\r\n  }\r\n`;\r\n\r\nconst SmallBannerWrapper = styled(SkeletonItem)`\r\n  width: 100%;\r\n  height: 35vh;\r\n  float: left;\r\n`;\r\n\r\nconst RoundBannerWrapper = styled(SkeletonItem)`\r\n  width: 100%;\r\n  height: 300px;\r\n  border-radius: 20px;\r\n  margin-top: 48px;\r\n\r\n  @media screen and (max-width: 991px) {\r\n    width: 100%;\r\n    height: 430px;\r\n    margin-top: 82px;\r\n  }\r\n`;\r\n\r\nconst BannerSkeleton = ({ size }) => {\r\n  return (\r\n    <>\r\n      {size === 'small and round' && <RoundBannerWrapper />}\r\n      {size === 'large' && <LargeBannerWrapper />}\r\n      {size === 'small' && <SmallBannerWrapper />}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default BannerSkeleton;\r\n","import styled from 'styled-components';\r\n\r\nconst SkeletonItem = styled.div`\r\n  width: 100%;\r\n  height: 30px;\r\n  background-color: #f2f2f2;\r\n  position: relative;\r\n  overflow: hidden;\r\n\r\n  @keyframes skeleton-gradient {\r\n    0% {\r\n      background-color: rgba(165, 165, 165, 0.1);\r\n    }\r\n    50% {\r\n      background-color: rgba(165, 165, 165, 0.3);\r\n    }\r\n    100% {\r\n      background-color: rgba(165, 165, 165, 0.1);\r\n    }\r\n  }\r\n\r\n  &:before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    animation: skeleton-gradient 1.5s infinite ease-in-out;\r\n  }\r\n`;\r\n\r\nexport default SkeletonItem;\r\n","import { useState } from 'react';\r\n\r\nconst useLoading = (action) => {\r\n  const [loading, setLoading] = useState(true);\r\n\r\n  const handleData = async (...rest) => {\r\n    return await action(...rest).finally(() => setLoading(false));\r\n  };\r\n\r\n  return [handleData, loading];\r\n};\r\n\r\nexport default useLoading;\r\n","import { useEffect, useState } from 'react';\r\nimport { useNavigate } from 'react-router-dom';\r\nimport { getData } from 'apis/api';\r\nimport { BannerLargeCarousel } from 'components/Common/Carousel/BannerCarousel';\r\nimport CarouselWrapper from 'components/Common/Carousel/CarouselWrapper';\r\nimport useLoading from 'hooks/useLoading';\r\nimport styled from 'styled-components';\r\n\r\nconst MainContainer = styled.main`\r\n  overflow: hidden;\r\n`;\r\n\r\nconst MainWrpper = styled.figure`\r\n  float: right;\r\n  //! 전체너비 - 네브바 너비\r\n  width: calc(100% - 435px);\r\n  position: relative;\r\n  margin-top: 150px;\r\n  margin-bottom: 130px;\r\n\r\n  @media screen and (max-width: 991px) {\r\n    width: 100%;\r\n    margin-top: 70px;\r\n    margin-bottom: 75px;\r\n  }\r\n`;\r\n\r\nconst MainIntroWrapper = styled.section`\r\n  width: 100%;\r\n  display: flex;\r\n  padding: 100px 0 150px;\r\n  @media screen and (max-width: 991px) {\r\n    padding: 55px 20px 90px;\r\n  }\r\n  @media screen and (max-width: 500px) {\r\n    padding: 55px 20px 70px;\r\n  }\r\n`;\r\nconst MainIntroBox = styled.div`\r\n  width: 500px;\r\n  text-align: center;\r\n  margin: 0 auto;\r\n  @media screen and (max-width: 991px) {\r\n    width: 100%;\r\n  }\r\n`;\r\n\r\nconst MainTitle = styled.h1`\r\n  display: none;\r\n  font-family: PretendardSemiBold;\r\n  font-size: var(--text-size-25);\r\n  color: var(--dark);\r\n  margin-bottom: 30px;\r\n  letter-spacing: -0.07em;\r\n\r\n  @media screen and (max-width: 991px) {\r\n    display: block;\r\n  }\r\n\r\n  @media screen and (max-width: 500px) {\r\n    font-size: var(--text-size-24);\r\n  }\r\n`;\r\nconst MainIntro = styled.p`\r\n  font-size: var(--text-size-18);\r\n  font-family: PretendardRegular;\r\n  color: var(--gray);\r\n  line-height: 1.8;\r\n  letter-spacing: -0.07em;\r\n\r\n  @media screen and (max-width: 991px) {\r\n    font-size: var(--text-size-20);\r\n  }\r\n  @media screen and (max-width: 500px) {\r\n    font-size: var(--text-size-16);\r\n  }\r\n`;\r\nconst Break = styled.br`\r\n  display: none;\r\n  @media screen and (max-width: 991px) {\r\n    display: block;\r\n  }\r\n`;\r\n\r\nconst Main = () => {\r\n  const [bannerImage, setBannerImage] = useState([]);\r\n  const [galleryImage, setGalleryImage] = useState([]);\r\n  const navigate = useNavigate();\r\n\r\n  const fetchMainBannerImage = async () => {\r\n    const response = await getData('banner/images/', navigate);\r\n    setBannerImage(response);\r\n  };\r\n  const fetchMainGalleryImage = async () => {\r\n    const response = await getData('gallery/images/', navigate);\r\n    setGalleryImage(response);\r\n  };\r\n  const [getBanner, isBannerLoading] = useLoading(fetchMainBannerImage);\r\n  const [getGallery, isGalleryLoading] = useLoading(fetchMainGalleryImage);\r\n\r\n  useEffect(() => {\r\n    getBanner();\r\n    getGallery();\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, []);\r\n\r\n  return (\r\n    <MainContainer>\r\n      <MainWrpper>\r\n        <BannerLargeCarousel\r\n          slides={bannerImage}\r\n          path={'main'}\r\n          loading={isBannerLoading}\r\n        />\r\n        <MainIntroWrapper>\r\n          <MainIntroBox>\r\n            <MainTitle>인서리공원</MainTitle>\r\n            <MainIntro>\r\n              인서리공원은 광양시 도시재생 프로젝트로 <Break />\r\n              리노베이션한 한옥 14채를 활용하여 <Break />\r\n              많은 사람들이 쉽게, 더 가까이 예술을 접하고 <Break />\r\n              향유 할 수 있기를 바라는 기대로 만들어진\r\n              <Break /> 복합문화공간입니다.\r\n            </MainIntro>\r\n          </MainIntroBox>\r\n        </MainIntroWrapper>\r\n        <CarouselWrapper\r\n          slides={galleryImage}\r\n          width={'435px'}\r\n          height={'435px'}\r\n          padding={'25px'}\r\n          mobilewidth={'270px'}\r\n          mobileheight={'270px'}\r\n          loading={isGalleryLoading}\r\n        />\r\n      </MainWrpper>\r\n    </MainContainer>\r\n  );\r\n};\r\n\r\n// * displayName 설정\r\nMain.displayName = 'Main';\r\nexport default Main;\r\n"],"names":["REACT_APP_API","process","getData","_ref","_asyncToGenerator","_regeneratorRuntime","mark","_callee","path","navigate","response","wrap","_context","prev","next","axios","concat","sent","abrupt","data","t0","console","log","stop","_x","_x2","apply","arguments","postData","_ref2","_callee2","_context2","headers","_x3","_x4","SliderContainer","styled","_templateObject","_taggedTemplateLiteral","MainImgBox","_templateObject2","MainImg","_templateObject3","BannerLargeCarousel","React","slides","loading","_jsx","children","BannerSkeleton","size","Slider","_objectSpread","dots","infinite","autoplay","autoplaySpeed","slidesToShow","slidesToScroll","arrows","pauseOnHover","fade","map","slide","index","_jsxs","srcSet","image_m_url","image_url","media","src","alt","title","banner_m_url","banner_url","BannerSmallCarousel","_Fragment","displayName","GallerySkeletonWrapper","EmblaViewport","EmblaContainer","EmblaSlide","_templateObject4","padding","Image","SkeletonItem","_templateObject5","height","_ref3","width","_ref4","mobilewidth","_ref5","mobileheight","_ref6","length","Array","fill","_","Embla","Carousel","_useEmblaCarousel","useEmblaCarousel","loop","align","Autoplay","delay","emblaRef","_slicedToArray","ref","CarosuelSection","CarouselWrapper","GallerySkeleton","LargeBannerWrapper","SmallBannerWrapper","RoundBannerWrapper","action","_useState","useState","_useState2","setLoading","handleData","_args","finally","MainContainer","MainWrpper","MainIntroWrapper","MainIntroBox","MainTitle","MainIntro","_templateObject6","Break","_templateObject7","Main","bannerImage","setBannerImage","_useState3","_useState4","galleryImage","setGalleryImage","useNavigate","fetchMainBannerImage","fetchMainGalleryImage","_useLoading","useLoading","_useLoading2","getBanner","isBannerLoading","_useLoading3","_useLoading4","getGallery","isGalleryLoading","useEffect"],"sourceRoot":""}