feat: add gallery (#57)

* chore: add swiperjs

* feat: add gallery swiper

* feat: add sketch menu in header

components/Gallery.tsx

@@ -0,0 +1,127 @@
+import React, { useState } from 'react'
+import Image from 'next/image'
+import clsx from 'clsx'
+import { Navigation, Pagination, A11y } from 'swiper'
+import { Swiper as SwiperComponent, SwiperSlide } from 'swiper/react'
+import CloseIcon from '@mui/icons-material/Close'
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew'
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
+import 'swiper/css/pagination'
+import 'swiper/css'
+
+import NavButton from '@/components/gallery/NavButton'
+
+const Gallery = () => {
+  const totalSlide = 31
+  const [currentSlide, setCurrentSlide] = useState(0)
+  const [isClickedImage, setIsClickedImage] = useState(false)
+
+  const handleImageClick = () => {
+    setIsClickedImage(true)
+    return setCurrentSlide
+  }
+
+  return (
+    <section
+      id="gallery"
+      className="content relative p-12 tablet:p-32 px-4 bg-gray-100"
+    >
+      <div className="flex-col gap-4 tablet:gap-6 w-full flex-center tablet:w-[768px] desktop:w-[1024px] desktop-xl:w-[1360px] m-auto">
+        <p className="text-mobile-h1 tablet:text-h1 text-center">현장 스케치</p>
+        <p className="text-mobile-h2 tablet:text-h3 text-center">
+          다양한 사람들과 함께한
+          <br className="block tablet:hidden" /> 테오콘 1회 현장 스케치를
+          만나보세요
+        </p>
+      </div>
+      <SwiperComponent
+        modules={[Navigation, Pagination, A11y]}
+        slidesPerView={1}
+        slidesPerGroup={1}
+        navigation={true}
+        className="mt-10 tablet:max-w-[768px] desktop:max-w-[1024px] desktop-xl:max-w-[1360px]"
+        onActiveIndexChange={(swiper: any) => setCurrentSlide(swiper.realIndex)}
+        breakpoints={{
+          default: {
+            slidesPerView: 1,
+            spaceBetween: 20,
+            slidesPerGroup: 1,
+          },
+          1024: {
+            slidesPerView: 4,
+            spaceBetween: 16,
+            slidesPerGroup: 4,
+          },
+        }}
+      >
+        {Array.from({ length: totalSlide }).map((_, index) => {
+          return (
+            <SwiperSlide
+              className="relative tablet:cursor-pointer"
+              key={`first-swiper-${index}`}
+            >
+              <Image
+                id={`gallery image ${index}`}
+                src={`/images/sketch/${index}.png`}
+                width={330}
+                height={268}
+                className={
+                  (clsx('relative m-auto'),
+                  currentSlide === index
+                    ? 'tablet:grayscale-0 m-auto'
+                    : 'tablet:grayscale m-auto')
+                }
+                alt="현장 스케치 이미지"
+                onClick={() => handleImageClick()(index)}
+              />
+            </SwiperSlide>
+          )
+        })}
+        <div className="block tablet:hidden flex justify-center absolute bottom-3 left-[50%] -translate-x-1/2 z-10 ml-[120px]">
+          <div className="bg-gray-900 text-white z-10 text-body2 px-1 py-2 rounded-md flex justify-center items-center gap-1 w-[66px]">
+            <span>{currentSlide + 1}</span> / <span>{totalSlide}</span>
+          </div>
+        </div>
+        <NavButton className="bg-gray-100/20" />
+      </SwiperComponent>
+      {isClickedImage && (
+        <div className="mt-4 flex items-center relative justify-center hidden tablet:flex">
+          <div className="relative">
+            <ArrowBackIosNewIcon
+              className="text-gray-500 absolute -left-10 top-[50%] -translate-y-1/2 cursor-pointer"
+              onClick={() => {
+                if (currentSlide === 0) return
+                setCurrentSlide(currentSlide - 1)
+              }}
+            />
+            <ArrowForwardIosIcon
+              className="text-gray-500 absolute -right-10 top-[50%] -translate-y-1/2 cursor-pointer"
+              onClick={() => {
+                if (currentSlide === totalSlide - 1) return
+                setCurrentSlide(currentSlide + 1)
+              }}
+            />
+            <CloseIcon
+              className="cursor-pointer text-white absolute right-3 top-3"
+              onClick={() => setIsClickedImage(false)}
+            />
+            <Image
+              src={`/images/sketch/${currentSlide}.png`}
+              width={440}
+              height={354}
+              alt="현장 스케치 이미지"
+              className="desktop:w-[534px] desktop-xl:w-[720px]"
+            />
+            <div className="flex justify-center absolute bottom-3 right-3">
+              <div className="bg-gray-900 text-white z-10 text-body2 px-1 py-2 rounded-md flex justify-center items-center gap-1 w-[66px]">
+                <span>{currentSlide + 1}</span> / <span>{totalSlide}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </section>
+  )
+}
+
+export default Gallery

components/Header.tsx

@@ -25,7 +25,7 @@ export const Header = () => {
   return (
     <header
       className={clsx(
-        'w-full h-12 backdrop-blur-sm bg-opacity-90 flex-center sticky top-0 text-body2 z-50 p-4 transition-all duration-300',
+        'w-full h-12 tablet:h-14 backdrop-blur-sm bg-opacity-90 flex-center sticky top-0 text-body2 z-50 p-4 transition-all duration-300',
         currentId === 'banner' ? 'text-white bg-black' : 'text-black bg-white'
       )}
     >
@@ -57,6 +57,14 @@ export const Header = () => {
           >
             네트워킹
           </a>
+          <a
+            href="#gallery"
+            className={`${
+              currentId === 'gallery' ? 'font-bold text-[#00DE4F]' : ''
+            }`}
+          >
+            현장 스케치
+          </a>
           <a
             href="#name-card"
             className={`${

components/Sidebar.tsx

@@ -13,6 +13,7 @@ const SIDEBAR_ITEMS = {
   CONTENTS: [
     { name: '프로그램', link: '#program', id: 'program' },
     { name: '네트워킹', link: '#networking', id: 'networking' },
+    { name: '현장 스케치', link: '#gallery', id: 'gallery' },
     { name: '명함', link: '#name-card', id: 'name-card' },
     { name: '후원사', link: '#sponsor', id: 'sponsor' },
     { name: '장소', link: '#location', id: 'location' },

components/gallery/NavButton.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { useSwiper } from 'swiper/react'
+import Image from 'next/image'
+
+import ArrowLeft from '@/public/images/ArrowLeft.svg'
+import ArrowRight from '@/public/images/ArrowRight.svg'
+import clsx from 'clsx'
+
+interface MobileNavButtonsProps {
+  className?: string
+}
+
+const MobileNavButton = ({ className }: MobileNavButtonsProps) => {
+  const swiper = useSwiper()
+
+  return (
+    <div className="flex absolute items-center justify-center tablet:justify-between w-full z-10 gap-60 top-[50%] -translate-y-1/2 ">
+      <button
+        onClick={() => swiper.slidePrev()}
+        className={clsx(className, 'p-2 rounded-lg left-2 tablet:ml-2')}
+      >
+        <Image src={ArrowLeft} alt="왼쪽 버튼" className="w-5 h-5" />
+      </button>
+      <button
+        onClick={() => swiper.slideNext()}
+        className={clsx(className, 'p-2 rounded-lg right-2 tablet:mr-2')}
+      >
+        <Image src={ArrowRight} alt="오른쪽 버튼" className="w-5 h-5" />
+      </button>
+    </div>
+  )
+}
+
+export default MobileNavButton

package.json

@@ -25,6 +25,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.43.9",
+    "swiper": "^9.4.0",
     "tailwindcss": "3.3.1",
     "typescript": "5.0.4"
   },

pages/index.tsx

@@ -5,6 +5,7 @@ import FAQ from '@/components/FAQ'
 import Introduce from '@/components/Introduce'
 import Program from '@/components/Program'
 import Networking from '@/components/NetWorking'
+import Gallery from '@/components/Gallery'
 import NameCard from '@/components/NameCard'
 import Sponsor from '@/components/Sponsor'
 import Map from '@/components/Map'
@@ -24,6 +25,7 @@ export default function Home() {
       <Introduce />
       <Program />
       <Networking />
+      <Gallery />
       <NameCard />
       <Sponsor />
       <Map />

yarn.lock

@@ -2680,6 +2680,11 @@ source-map@^0.5.7:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
 
+ssr-window@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
+  integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
+
 stop-iteration-iterator@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4"
@@ -2801,6 +2806,13 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+swiper@^9.4.0:
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-9.4.0.tgz#ceb7dd1d05b93702aceba42d94ee37c381beab6a"
+  integrity sha512-AKame5qkFnNKCJ8Bfn3YuOi/LoUuAESVdCv/BJH5fKgdAUFRtImZXV3gdYlYovXbasJDV6hHNWdQvdzPB6aebw==
+  dependencies:
+    ssr-window "^4.0.2"
+
 synckit@^0.8.5:
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.5.tgz#b7f4358f9bb559437f9f167eb6bc46b3c9818fa3"