Merge pull request #39 from shimseohyun/feature/28

Feature/28
GDSC-DGU · May 4, 2024 · 469f967 · 469f967
2 parents ab29cd0 + c7ea997
commit 469f967
Show file tree

Hide file tree

Showing 9 changed files with 304 additions and 29 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,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/public/images/main/aboutGDSC_map.png b/public/images/main/aboutGDSC_map.png
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -26,7 +26,7 @@ export default function RootLayout({
   return (
     <html
       lang="ko"
-      className="flex w-screen justify-center  bg-[#000] tablet:text-[16px] text-[14px]"
+      className="flex w-screen justify-center  bg-[#000] tablet:text-[16px] text-[14px] "
     >
       <body
         className={clsx(
@@ -39,7 +39,7 @@ export default function RootLayout({
         )}
       >
         <Navigation />
-        <div className="flex justify-center">{children}</div>
+        <div className="pt-[5rem] flex justify-center">{children}</div>
         <Footer />
       </body>
     </html>

diff --git a/src/components/home/aboutGDSC/AboutGDSC.tsx b/src/components/home/aboutGDSC/AboutGDSC.tsx
@@ -13,7 +13,7 @@ const NumberAbout: React.FC<{ label: string; number: string }> = ({
 const AboutGDSC = () => {
   return (
     <div className="w-full flex justify-center items-center">
-      <section className="w-full max-w-[1200px] tablet:px-10 px-4 py-40 flex flex-wrap flex-col gap-6 desktop:flex-row">
+      <section className="w-full max-w-[1200px] tablet:px-10 px-4 py-40 flex flex-wrap flex-col gap-6 tablet:flex-row">
         {/* 텍스트 */}
         <div className="flex flex-col mr-8 ">
           <p className="H3 pb-6">
@@ -44,7 +44,13 @@ const AboutGDSC = () => {
         </div>
 
         {/* 이미지 */}
-        <div className="flex-grow bg-red-900  h-[378px]"> </div>
+        <div className="desktop:flex-grow desktop:h-[378px] bg-red-100 desktop:w-auto w-full">
+          <div className="desktop:block hidden bg-cover h-full w-full bg-[url('/images/main/aboutGDSC_map.png')]" />
+          <img
+            className="desktop:hidden block object-contain w-full"
+            src="/images/main/aboutGDSC_map.png"
+          />
+        </div>
       </section>
     </div>
   );

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>