Sy2023 5 slider jeongmin

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.0"
   },

src/App.jsx

@@ -1,10 +1,20 @@
 import React from "react";
 import Main from "./pages/Main";
+import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import Root from "./pages/Root";
 
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Root />,
+    children: [
+      {
+        index: true,
+        element: <Main />,
+      },
+    ],
+  },
+]);
 export default function App() {
-  return (
-    <div>
-      <Main />
-    </div>
-  );
+  return <RouterProvider router={router} />;
 }

src/components/Header.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import GDSC_Symbol from "../assets/images/GDSC_Symbol.png";
-import "./Header.css";
 
 export default function Header() {
   return (

src/components/Slider/Carousel.jsx

@@ -0,0 +1,84 @@
+import React, { useRef, useState, useEffect } from "react";
+import LeftArrow from "../../assets/images/slides/LeftArrow.png";
+import RightArrow from "../../assets/images/slides/RightArrow.png";
+import CarouselItem from "./CarouselItem";
+
+export default function Carousel({ carouselList }) {
+  const [currIndex, setCurrIndex] = useState(0);
+  const [currList, setCurrList] = useState();
+
+  useEffect(
+    (index) => {
+      if (carouselRef.current !== null) {
+        const changeValue = currIndex * 20;
+        carouselRef.current.style.transform = `translateX(-${changeValue}%)`;
+        console.log(index);
+      }
+    },
+    [currIndex]
+  );
+
+  useEffect(() => {
+    if (carouselList.length !== 0) {
+      const startData = carouselList[0];
+      const endData = carouselList[carouselList.length - 1];
+      const newList = [endData, ...carouselList, startData];
+
+      setCurrList(newList);
+    }
+  }, [carouselList]);
+
+  const moveToNthSlide = (index) => {
+    setTimeout(() => {
+      setCurrIndex(index);
+      if (carouselRef.current !== null) {
+        carouselRef.current.style.transition = "";
+      }
+    }, 500);
+  };
+
+  const handleSwipe = (direction) => {
+    const newIndex = currIndex + direction;
+
+    if (newIndex < 0) {
+      moveToNthSlide(carouselList.length - 1);
+    } else if (newIndex >= carouselList.length) {
+      moveToNthSlide(0);
+    } else {
+      setCurrIndex((prev) => prev + direction);
+    }
+
+    console.log(currIndex);
+    if (carouselRef.current !== null) {
+      carouselRef.current.style.transition = "all 0.5s ease-in-out";
+    }
+  };
+
+  const carouselRef = useRef(null);
+
+  return (
+    <div class="flex items-center justify-center w-full group">
+      <button
+        class="absolute hidden left-10 top-3/5 z-10 group-hover:block"
+        onClick={() => handleSwipe(-1)}
+      >
+        <img src={LeftArrow} alt="LeftArrow" />
+      </button>
+      <button
+        class="absolute hidden right-10 top-3/5 z-10 group-hover:block"
+        onClick={() => handleSwipe(1)}
+      >
+        <img src={RightArrow} alt="RightArrow" />
+      </button>
+      <div class="w-full overflow-hidden">
+        <div ref={carouselRef} class="flex  whitespace-nowrap z-1">
+          {currList?.map((item, idx) => {
+            // const key = `${image}-${idx}`;
+
+            return <CarouselItem image={item.image} text={item.text} />;
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Slider/CarouselItem.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export default function CarouselItem({ image, text }) {
+  return (
+    <div
+      class={`relative h-[350px] w-[580px] mx-6 object-cover overflow-hidden`}
+    >
+      <img
+        src={image}
+        alt="carousel-img"
+        class="rounded-lg object-cover h-[350px] flex-shrink-0"
+      />
+      <div class="absolute inset-0 bg-black rounded-lg bg-opacity-50 flex opacity-0 hover:opacity-100 p-10">
+        <p class="text-white text-lg">{text}</p>
+      </div>
+    </div>
+  );
+}

src/components/Slider/Slider.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Carousel from "./Carousel";
+
+import FirstSessionImage from "../../assets/images/slides/1st_session.jpeg";
+import SecondSessionImage from "../../assets/images/slides/2nd_session.jpeg";
+import ThirdSessionImage from "../../assets/images/slides/3rd_session.png";
+
+const CAROSEL_IMAGES = [
+  { image: FirstSessionImage, text: "Gen AI" },
+  { image: SecondSessionImage, text: "Let's Git it" },
+  { image: ThirdSessionImage, text: "파트별 노션 꾸미기" },
+];
+
+export default function Slider() {
+  return (
+    <div>
+      <div class="text-center">
+        <h3 class="text-[54px] font-semibold">Grow With GDSC</h3>
+        <h4 class="text-[20px] font-semibold">"열정을 갖고 성장을 목표로"</h4>
+        <span class="mb-8">
+          GDSC Konkuk에서는 정기적으로 세션을 통해
+          <br /> 함께 성장해 나가는 기회를 만들고자 해요.
+        </span>
+        <Carousel carouselList={CAROSEL_IMAGES} />
+      </div>
+    </div>
+  );
+}

src/index.js

@@ -1,17 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/pages/Main.jsx

@@ -1,17 +1,13 @@
 import React from "react";
 
-import Header from "../components/Header";
-import Footer from "../components/Footer";
-import RotatingText from "../components/RotatingText";
-import AboutUs from "../components/AboutUs";
+import Slider from "../components/Slider/Slider";
+// InGdsc를 넣으면 localhost:3000 무한 로딩되는 에러가 있음
+// import InGdsc from "../components/InGdsc";
 
 export default function Main() {
   return (
     <>
-      <Header />
-      <RotatingText />
-      <AboutUs />
-      <Footer />
+      <Slider />
     </>
   );
 }

src/pages/Root.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+
+export default function Root() {
+  return (
+    <div>
+      <Outlet />
+      <Footer />
+    </div>
+  );
+}