Feature/ys2

package.json

@@ -6,13 +6,19 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "axios": "^1.3.4",
+    "global": "^4.4.0",
     "immer": "^9.0.19",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",
     "react-minimal-side-navigation": "^1.9.2",
     "react-router-dom": "^6.9.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "^1.8.1",
+    "styled-components": "^5.3.10",
+    "swiper": "^9.2.0",
     "use": "^3.1.1",
     "use-immer": "^0.8.1",
     "web-vitals": "^2.1.0"

src/App.js

@@ -1,14 +1,14 @@
 import { Outlet } from 'react-router-dom';
 import Navbar from './components/Navbar';
-
+import Footer from './components/Footer';
 function App() {
     return (
     <>
-        <Navbar />
+        <Navbar/>
         <Outlet />
+        <Footer />
     </>
     );
 }
-
 export default App;
 

src/Hooks/useScrollCount.jsx

@@ -0,0 +1,41 @@
+import { useRef, useEffect, useCallback } from 'react';
+
+const useScrollCount = (end, start = 0, duration = 3000, delay = 0) => {
+const elementRef = useRef();
+const observerRef = useRef(null);
+const stepTime = Math.abs(Math.floor(duration / (end - start)));
+
+const handleScroll = useCallback(
+    ([entry]) => {
+    const { current } = elementRef;
+    if (entry.isIntersecting) {
+        let currentNumber = start;
+        const counter = setInterval(() => {
+        currentNumber += 1;
+        current.innerHTML = currentNumber;
+        if (currentNumber === end) {
+            clearInterval(counter);
+            observerRef.current.disconnect(elementRef.current);
+        }
+        }, stepTime);
+    }
+    },
+    [end, start, stepTime]
+);
+
+useEffect(() => {
+    if (elementRef.current) {
+    observerRef.current = new IntersectionObserver(handleScroll, { threshold: 0.7 });
+    observerRef.current.observe(elementRef.current);
+    }
+
+    return () => observerRef.current && observerRef.current.disconnect();
+}, [handleScroll]);
+
+return {
+    ref: elementRef
+};
+};
+
+export default useScrollCount;
+

src/Hooks/useScrollFadeIn.jsx

@@ -0,0 +1,70 @@
+import { useRef, useEffect } from 'react';
+// 스크롤 내릴 때 Fade in 효과 Hook
+const useScrollFadeIn = (direction = 'up', duration = 1, delay = 0) => {
+    const ref = useRef();
+
+    useEffect(() => {
+    const element = ref.current;
+    if (element) {
+        const handleScroll = () => {
+        const { top, bottom } = element.getBoundingClientRect();
+        const { innerHeight } = window;
+        if (top < innerHeight && bottom >= 0) {
+            element.style.transitionProperty = 'opacity transform';
+            element.style.transitionDuration = `${duration}s`;
+            element.style.transitionTimingFunction = 'cubic-bezier(0, 0, 0.2, 1)';
+            element.style.transitionDelay = `${delay}s`;
+            element.style.opacity = 1;
+            element.style.transform = 'translateY(0)';
+        }
+        };
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+        window.removeEventListener('scroll', handleScroll);
+        };
+    }
+    }, [delay, duration]);
+
+    if (direction === 'up') {
+    return {
+        ref,
+        style: {
+        opacity: 0,
+        transform: 'translateY(50px)',
+        },
+        };
+    }
+
+    if (direction === 'right') {
+    return {
+        ref,
+        style: {
+        opacity: 0,
+        transform: 'translateX(-50px)',
+        },
+        };
+    }
+
+    if (direction === 'down') {
+    return {
+        ref,
+        style: {
+        opacity: 0,
+        transform: 'translateY(-50px)',
+        },
+    };
+    }
+
+    if (direction === 'left') {
+    return {
+        ref,
+        style: {
+        opacity: 0,
+        transform: 'translateX(50px)',
+        },
+    };
+    }
+};
+
+export default useScrollFadeIn;
+

src/components/Banner.css

@@ -0,0 +1,12 @@
+
+.swiper-container {
+    --swiper-navigation-color: #b9bcc175;
+    --swiper-pagination-color: #b9bcc175;
+}
+
+.slide .BannerImage{
+    width : 100%;
+    height: 200px;
+    object-fit: fill;
+}
+

src/components/Banner.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Swiper, SwiperSlide } from "swiper/react"; // basic
+import SwiperCore, { Navigation, Pagination, Autoplay } from "swiper";
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import './Banner.css';
+SwiperCore.use([Navigation, Pagination, Autoplay]);
+
+export default function Banner() {
+    return (
+            <div className="swiper-container">
+                <Swiper
+                spaceBetween={0} // 슬라이드간의 간격
+                slidesPerView={1} // 한 번에 보여지는 슬라이드 개수
+                loop={true} // 루프 슬라이드
+                autoplay={{ delay: 3000 }} // 자동
+                navigation
+                pagination={{ clickable: true }}
+                >
+                    <SwiperSlide className='slide'>
+                    <img src="/images/banner1.png" alt="banner1" className='BannerImage'/>
+                    </SwiperSlide>
+                    <SwiperSlide className='slide'>
+                    <img src="/images/banner2.png" alt="banner2" className='BannerImage'/>
+                    </SwiperSlide>
+                </Swiper>
+            </div>
+    );
+}
+

src/components/Bot.jsx

@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import axios from "axios";
+import "./Room.css";
+
+export default function Bot(props) {
+  const [input, setInput] = useState("");
+
+  const handleChange = (event) => {
+    setInput(event.target.value);
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    if (!input) {
+      return;
+    }
+
+    const message = `You: ${input}`;
+    props.onMessage(message);
+
+    try {
+      const response = await axios.post("http://localhost:5000/generate", {
+        input_text: input,
+      });
+
+      const reply = `Bot: ${response.data.text}`;
+      props.onMessage(reply);
+
+      if (response.data.other_results) {
+        props.onOtherResult(response.data.other_results);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+
+    setInput("");
+  };
+
+  return (
+    <div className="input_chat">
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          value={input}
+          onChange={handleChange}
+          style={{ color: "black" }}
+          className="textinput"
+        />
+        <button type="submit" style={{ color: "white" }} className="sendbtn">
+          Send
+        </button>
+      </form>
+    </div>
+  );
+}

src/components/DownloadCount.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import useScrollCount from '../Hooks/useScrollCount';
+
+const DownloadCountPage = () => {
+const { ref } = useScrollCount(650, 0, 3000, 0);
+
+return (
+    <div style={{ textAlign: 'center' }}>
+
+        <p
+        ref={ref}
+        style={{
+            fontSize: '2rem',
+            fontWeight: 'bold',
+            color: 'black',
+            display: 'inline-block',
+        }}
+        >
+        0
+        </p>
+        <span style={{ fontSize: '2rem', fontWeight: 'bold', color: 'black' }}>
+        +
+        </span>
+        <h1 style={{ color: 'black' }}>누적 다운로드 수</h1>
+    </div>
+    );
+};
+
+export default DownloadCountPage;