✨ Feat - add Swiper

GDSC-DGU · Apr 21, 2024 · ba29257 · ba29257
1 parent 30504af
commit ba29257
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,8 @@
         "next": "14.1.3",
         "react": "^18",
         "react-dom": "^18.2.0",
-        "react-icons": "^5.0.1"
+        "react-icons": "^5.0.1",
+        "swiper": "^11.1.1"
     },
     "devDependencies": {
         "@svgr/webpack": "^8.1.0",

diff --git a/src/components/home/activity/Activity.tsx b/src/components/home/activity/Activity.tsx
@@ -1,5 +1,13 @@
+'use client';
 import HomeTitle from '../title/HomeTitle';
 
+import { Navigation, Autoplay } from 'swiper/modules';
+
+import 'swiper/css';
+import 'swiper/css/navigation';
+
+import { Swiper, SwiperSlide } from 'swiper/react';
+
 const ActivityCard: React.FC<Activity> = ({ icon, title, description }) => {
   return (
     <div className="flex-grow">
@@ -89,10 +97,23 @@ const Activity = () => {
               <img className="w-[352px] h-[198px] flex-shrink-0 bg-red-900" />
               <img className="w-[352px] h-[198px] flex-shrink-0 bg-red-900" />
             </div>
-
             {/* 스크롤되는 부분 */}
 
-            {/* 스크롤되는 부분 */}
+            <Swiper
+              // navigation={true}
+              autoplay={{ delay: 2000 }}
+              modules={[Navigation, Autoplay]}
+              className="tablet:hidden flex w-full"
+              loop
+            >
+              {[1, 2, 3].map((item, index) => {
+                return (
+                  <SwiperSlide key={index}>
+                    <img className="w-[352px] h-[198px] flex-shrink-0 bg-red-900" />
+                  </SwiperSlide>
+                );
+              })}
+            </Swiper>
           </div>
           {/* 내용 */}
         </section>

diff --git a/src/components/home/storiesFrom/StoriesFrom.tsx b/src/components/home/storiesFrom/StoriesFrom.tsx
@@ -1,11 +1,32 @@
-const ImageBox: React.FC<{ label: string; img: string }> = ({ label, img }) => {
+'use client';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/css';
+import 'swiper/css/navigation';
+
+import { Navigation, Autoplay } from 'swiper/modules';
+
+interface Story {
+  label: string;
+  img: string;
+}
+
+const ImageBox: React.FC<Story> = ({ label, img }) => {
   return (
-    <div className="flex flex-col gap-6">
-      <img className="w-full  bg-red-900 " src="/images/main/story_ex.png" />
-      <div className="H6">사진에 대한 제목이 들어갑니다.</div>
+    <div className="flex flex-col gap-6 w-full">
+      <img className="w-full   bg-red-900 " src="/images/main/story_ex.png" />
+      <div className="H6">{label}</div>
     </div>
   );
 };
+
+const StoryList: Story[] = [
+  { label: '일번', img: '22' },
+  { label: '이번', img: '22' },
+  { label: '삼번', img: '22' },
+  { label: '사번', img: '22' },
+];
+
 const StoriesFrom = () => {
   return (
     <div className="w-full flex justify-center items-center  bg-white ">
@@ -35,9 +56,22 @@ const StoriesFrom = () => {
           </div>
         </div>
 
-        <div className="tablet:hidden flex">
-          <ImageBox label="1" img="" />
-        </div>
+        <Swiper
+          // navigation={true}
+          autoplay={{ delay: 3000 }}
+          modules={[Navigation, Autoplay]}
+          className="tablet:hidden flex w-full"
+          loop
+        >
+          {StoryList.map((item, index) => {
+            return (
+              <SwiperSlide key={index}>
+                <ImageBox label={item.label} img={item.img} />
+              </SwiperSlide>
+            );
+          })}
+        </Swiper>
+
         {/* content */}
       </section>
     </div>

diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
@@ -110,7 +110,7 @@ export default function Navigation() {
 
         {/* -- 사이드 바 -- */}
         {isSideBarOpen ? (
-          <div className=" bg-black w-full tablet:px-10 px-4 pt-4 pb-20 rounded-b-lg desktop:hidden">
+          <div className=" bg-mono_900 w-full tablet:px-10 px-4 pt-4 pb-16 rounded-b-lg desktop:hidden">
             <div className="gap-10 flex flex-col ">
               {NavgationList.map((item, index) => {
                 return item.length == 1 ? (
@@ -140,7 +140,7 @@ export default function Navigation() {
       {isModalOpen ? (
         <div
           className={`fixed left-0 top-0 z-0 w-lvw h-lvh mix-blend-multiply  ${
-            isSideBarOpen ? 'bg-slate-200' : ''
+            isSideBarOpen ? ' desktop:bg-transparent bg-mono_200' : ''
           }`}
           onClick={setIsModalClose}
         />
@@ -190,7 +190,7 @@ const NavToggle: React.FC<{ label: NavItem; navList: NavItem[] }> = ({
       )}
 
       {label.isModalShow ? (
-        <div className="absolute px-6 py-4 z-999 bg-mono_900 flex flex-col rounded-lg  gap-3  right-0 top-12">
+        <div className="absolute px-6 py-4 z-999 bg-mono_900 flex flex-col rounded-lg  gap-3  right-0 top-10">
           {navList.map((item, index) => {
             return (
               <NavButton key={index} label={item.label} link={item.link} />