Merge pull request #308 from vsgg12/dev

Deploy: pc/모바일 버전 피드백 배너 퍼블리싱 추가

Author: jjaeho0415

package-lock.json

@@ -39,6 +39,7 @@
     "react-js-pagination": "^3.0.2",
     "react-quill": "^2.0.0",
     "react-responsive": "^10.0.0",
+    "swiper": "^11.2.6",
     "zustand": "^4.5.2"
   },
   "devDependencies": {

package.json

@@ -234,3 +234,20 @@ button {
     transform: rotate(1turn);
   }
 }
+
+.custom-pagination {
+  display: flex;
+  gap: 8px;
+  z-index: 100;
+  cursor: pointer;
+  --swiper-pagination-bullet-vertical-gap: 0px;
+}
+
+.custom-pagination .swiper-pagination-bullet {
+  background-color: #999999;
+  width: 5px;
+  height: 5px;
+}
+.custom-pagination .swiper-pagination-bullet-active {
+  background-color: #8a1f21;
+}

public/images/banner/VSGG배너_영상업로드시RP증정.png

@@ -60,7 +60,7 @@ export default function HomePostItems({
             }}
           >
             <div className='flex w-full font-medium justify-center items-center gap-[8px]'>
-              <div className='h-[40px] text-black text-[1.563rem] '>{post.title}</div>
+              <div className='max-w-[70%] text-black text-[1.563rem] '>{post.title}</div>
               <p className='text-[#C8C8C8] flex-grow text-[0.75rem]'>
                 | 조회수 {formatNumberWithCommas(post.viewCount)}
               </p>

public/images/banner/VSGG배너_피드백시RP증정.png

@@ -0,0 +1,57 @@
+'use client';
+import React from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Pagination, Autoplay } from 'swiper/modules';
+
+import 'swiper/css';
+import 'swiper/css/pagination';
+import { useRouter } from 'next/navigation';
+
+function HorizontalBannerSwiper() {
+  const router = useRouter();
+  const handleFeedbackBannerClick = () => {
+    router.push('https://forms.gle/RN9FPwW6UgrExoTo8');
+  };
+  const handleUploadBannerClick = () => {
+    router.push('https://forms.gle/gFMtaNWqMZN7oqJW7');
+  };
+
+  return (
+    <div className='w-full flex flex-col gap-[10px]'>
+      <Swiper
+        modules={[Autoplay, Pagination]}
+        spaceBetween={30}
+        pagination={{
+          clickable: true,
+          el: '.custom-pagination',
+        }}
+        autoplay={{
+          delay: 3000,
+          disableOnInteraction: false,
+        }}
+        loop={true}
+        className='w-[304px] h-[134.89px] flex'
+      >
+        <SwiperSlide>
+          <img
+            src='/images/banner/VSGG배너_피드백시RP증정.png'
+            alt='피드백배너'
+            className='w-full h-full cursor-pointer'
+            onClick={handleFeedbackBannerClick}
+          />
+        </SwiperSlide>
+        <SwiperSlide>
+          <img
+            src='/images/banner/VSGG배너_영상업로드시RP증정.png'
+            alt='영상업로드배너'
+            className='w-full h-full cursor-pointer'
+            onClick={handleUploadBannerClick}
+          />
+        </SwiperSlide>
+      </Swiper>
+      <div className='custom-pagination flex justify-end'></div>
+    </div>
+  );
+}
+
+export default HorizontalBannerSwiper;

public/svg/banner/banner.svg

@@ -1,10 +1,9 @@
+'use client'
 import { GoSearch } from 'react-icons/go';
 import Logo from '../../../components/Logo';
 import useSearchStore from '../store/useSearchStore';
 import { useState } from 'react';
-// import Image from 'next/image';
-// import Banner from '../../../../public/svg/banner/banner.svg';
-// import { useRouter } from 'next/navigation';
+import HorizontalBannerSwiper from './HorizontalBannerSwiper';
 
 export default function Search({
   handleSearch,
@@ -15,18 +14,13 @@ export default function Search({
 }) {
   const { setKeyword } = useSearchStore();
   const [searchKeyword, setSearchKeyword] = useState<string>('');
-  // const router = useRouter();
 
   const handleKeywordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const trimmedKeyword = e.target.value.trim();
     setKeyword(trimmedKeyword);
     setSearchKeyword(e.target.value);
   };
 
-  // const handleFeedbackBannerClick = () => {
-  //   router.push('https://forms.gle/iszzzg32YAeSLJPq9');
-  // };
-
   return (
     <div className='flex w-full justify-center relative'>
       <div className='mb-[100px] mt-[100px] flex flex-col items-center justify-center gap-[32px]'>
@@ -40,18 +34,13 @@ export default function Search({
             value={searchKeyword}
           />
           <button onClick={handleSearch}>
-            <GoSearch className='absolute right-5 top-2.5  text-[#8A1F21]' />
+            <GoSearch className='absolute right-5 top-2.5 text-[#8A1F21]' />
           </button>
         </div>
       </div>
-      {/* <Image
-        src={Banner}
-        alt='feedback banner'
-        width={284}
-        height={112}
-        className='absolute right-0 top-[20%] translate-y-[-50%] cursor-pointer'
-        onClick={handleFeedbackBannerClick}
-      /> */}
+      <div className='absolute right-0 top-1/2 -translate-y-1/2'>
+        <HorizontalBannerSwiper />
+      </div>
     </div>
   );
 }