From 27e9cf2010507b4d7c986505977722ebe6f98890 Mon Sep 17 00:00:00 2001 From: songtaejin1 Date: Sat, 25 May 2024 03:28:29 +0900 Subject: [PATCH] =?UTF-8?q?Mainpage=20=EB=B0=98=EC=9D=91=ED=98=95=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C=20#1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Mainpage/Mainpage.tsx | 408 +++++++++++++++-------------- 1 file changed, 209 insertions(+), 199 deletions(-) diff --git a/frontend/src/Mainpage/Mainpage.tsx b/frontend/src/Mainpage/Mainpage.tsx index b67bdf4..8bff67b 100644 --- a/frontend/src/Mainpage/Mainpage.tsx +++ b/frontend/src/Mainpage/Mainpage.tsx @@ -1,170 +1,180 @@ import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; // import Slider from 'react-slick'; -import Nav from '../UnderNavBar/NaverBar'; +//import Nav from '../UnderNavBar/NaverBar'; // import 'slick-carousel/slick/slick.css'; // import 'slick-carousel/slick/slick-theme.css'; +const images = [ + 'https://pimg.hackers.com/land/main/land_default.jpg', + 'https://i.ytimg.com/vi/zvTgwgams-Q/maxresdefault.jpg', + 'https://cdn.autotribune.co.kr/news/photo/202312/11209_56884_5312.png', + 'https://cdn.bosa.co.kr/news/photo/202206/2174709_206247_5859.png' +]; + +function Mainpage() { + const [currentImageIndex, setCurrentImageIndex] = useState(0); + + useEffect(() => { + const interval = setInterval(() => { + setCurrentImageIndex((prevIndex) => (prevIndex === images.length - 1 ? 0 : prevIndex + 1)); + }, 5000); + + return () => clearInterval(interval); // 정리 함수 추가 + }, []); + + return( +
+ + + + CheQ + + + + + + + + + + 현재 출결 현황 + + + + + + + + + + + + + + + + + + + + + + + + + {/* + + */} + + + +
+ + ); +} + +export default Mainpage; + const BigBox = styled.div` display: flex; - flex-direction: column; width: 100vw; - height: 100vh; min-width: 200px; max-width: 600px; - margin: 0 auto; + margin: auto; + flex-direction: column; box-shadow: 0 2px 4px rgba(76, 76, 76, 0), 0 -2px 4px rgba(76, 76, 76, 0.1), 2px 0 4px rgba(76, 76, 76, 0.1), -2px 0 4px rgba(76, 76, 76, 0.1); `; -const AttendanceTitle = styled.div` +const Box1 = styled.div` display: flex; - justify-content: center; - align-items: center; - width: auto; - margin-right: 450px; -`; - -const MainTitle = styled.h1` - color: white; -`; - -const SquareA = styled.div` - width: 100%; - height: 350px; - background-color: #375cde; - display: flex; - flex-direction: column; - justify-content: center; + justify-content: flex-start; + padding: 5px; box-shadow: 0 2px 4px rgba(76, 76, 76, 0), 0 -2px 4px rgba(76, 76, 76, 0.1), 2px 0 4px rgba(76, 76, 76, 0.1), -2px 0 4px rgba(76, 76, 76, 0.1); + background-color: #375cde; `; -const SquareAboxA = styled.div` +const AttendanceTitle = styled.div` display: flex; - width: 100%; - height: 30%; - justify-content: center; align-items: center; - box-shadow: 0 2px 4px rgba(76, 76, 76, 0), 0 -2px 4px rgba(76, 76, 76, 0.1), - 2px 0 4px rgba(76, 76, 76, 0.1), -2px 0 4px rgba(76, 76, 76, 0.1); + margin-left: 30px; `; -const SquareAboxB = styled.div` - display: flex; - width: 100%; - height: 70%; - justify-content: center; - align-items: center; - box-shadow: 0 2px 4px rgba(76, 76, 76, 0), 0 -2px 4px rgba(76, 76, 76, 0.1), - 2px 0 4px rgba(76, 76, 76, 0.1), -2px 0 4px rgba(76, 76, 76, 0.1); +const MainTitle = styled.h1` + color: white; `; -const SquareAboxBAdvertisement = styled.div` +const Box2 = styled.div` +display: flex; +justify-content: center; +align-items: center; +height: 250px; +flex-direction: column; +box-shadow: 0 2px 4px rgba(76, 76, 76, 0), 0 -2px 4px rgba(76, 76, 76, 0.1), + 2px 0 4px rgba(76, 76, 76, 0.1), -2px 0 4px rgba(76, 76, 76, 0.1); +`; + +const Box2Advertisement = styled.div` display: flex; justify-content: center; align-items: center; width: 100%; - height: 100%; /* Set explicit height to maintain the size */ - overflow: cover; /* Hide overflow to ensure the image fits within the div */ + height: 100%; + overflow: cover; `; const AdvertisementImage = styled.img` width: 100%; height: 100%; - /* overflow: hidden; */ `; -const SquareB = styled.div` - width: 100%; - height: 150px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - position: relative; - box-shadow: 0 2px 4px rgba(76, 76, 76, 0), 0 -2px 4px rgba(76, 76, 76, 0.1), +const Box3A = styled.div` +display: flex; +justify-content: flex-start; +align-items: center; +padding: 5px; +box-shadow: 0 2px 4px rgba(76, 76, 76, 0), 0 -2px 4px rgba(76, 76, 76, 0.1), 2px 0 4px rgba(76, 76, 76, 0.1), -2px 0 4px rgba(76, 76, 76, 0.1); `; -const SquareBboxA = styled.div` - display: flex; - width: 100%; - height: 50%; - justify-content: center; - align-items: center; +const Box3Atext = styled.div` + display: flex; + justify-content: center; + align-items: center; + font-size: 8px; + margin-left: 50px; + /* box-shadow: 0 2px 4px rgba(76, 76, 76, 0), 0 -2px 4px rgba(76, 76, 76, 0.1), + 2px 0 4px rgba(76, 76, 76, 0.1), -2px 0 4px rgba(76, 76, 76, 0.1); + border-radius: 10px; */ `; -const SquareBboxAtext = styled.div` - display: flex; - width: auto; - height: 100%; - font-size: 12px; - font-weight: bold; - justify-content: center; - align-items: center; - margin-right: 400px; +const Box3AtextTitle = styled.h2` + color: black; `; -const SquareBboxB = styled.div` +const Box3B = styled.div` +display: flex; +justify-content: center; +align-items: center; +padding:5px; +box-shadow: 0 2px 4px rgba(76, 76, 76, 0), 0 -2px 4px rgba(76, 76, 76, 0.1), + 2px 0 4px rgba(76, 76, 76, 0.1), -2px 0 4px rgba(76, 76, 76, 0.1); +`; + +const Box3BCircle = styled.div` display: flex; - width: 100%; - height: 50%; - justify-content: center; align-items: center; -`; - -const SquareBboxBcircle = styled.div` - display: flex; + justify-content: space-around; //요소 주위를 동일하게 나누기 flex-direction: row; - align-items: center; - justify-content: center; - gap: 80px; - height: 100%; - width: 100%; - margin-bottom: 20px; -`; - -const SquareC = styled.div` - display: flex; - flex-direction: column; - background-color: white; - height: 100vh; - overflow-y: auto; /* 스크롤이 필요한 경우만 표시 */ - &::-webkit-scrollbar { - width: 0; /* 수평 스크롤바 너비를 0으로 설정하여 숨김 */ - } - &::-webkit-scrollbar-thumb { - background-color: transparent; /* 스크롤바 썸 색상을 투명으로 설정하여 숨김 */ - } -`; -const SquareCboxA = styled.div` - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 50%; - gap: 80px; -`; - -const SquareCboxASquare = styled.div` - display: flex; - width: 100px; - height: 100px; - background-color: white; - border-radius: 5px; - margin-top: 20px; - margin-bottom: 20px; - box-shadow: 0 2px 4px rgba(76, 76, 76, 0), 0 -2px 4px rgba(76, 76, 76, 0.1), - 2px 0 4px rgba(76, 76, 76, 0.1), -2px 0 4px rgba(76, 76, 76, 0.1); - &:hover { - cursor: pointer; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); - transform: scale(1); - } + padding: 3px; + width: 80%; + /* box-shadow: 0 2px 4px rgba(76, 76, 76, 0), 0 -2px 4px rgba(76, 76, 76, 0.1), + 2px 0 4px rgba(76, 76, 76, 0.1), -2px 0 4px rgba(76, 76, 76, 0.1); */ `; -const CircleA = styled.div` +const Box3BCircleA = styled.div` display: flex; background-color: red; width: 15px; @@ -172,112 +182,112 @@ const CircleA = styled.div` border-radius: 50px; `; -const CircleB = styled.div` +const Box3BCircleB = styled.div` + display: flex; background-color: green; width: 15px; height: 15px; border-radius: 50px; + `; -const CircleC = styled.div` +const Box3BCircleC = styled.div` + display: flex; background-color: green; width: 15px; height: 15px; border-radius: 50px; + `; -const CircleD = styled.div` +const Box3BCircleD = styled.div` + display: flex; background-color: green; width: 15px; height: 15px; border-radius: 50px; + `; -const CircleE = styled.div` +const Box3BCircleE = styled.div` + display: flex; background-color: green; width: 15px; height: 15px; border-radius: 50px; + `; -const images = [ - 'https://pimg.hackers.com/land/main/land_default.jpg', - 'https://i.ytimg.com/vi/zvTgwgams-Q/maxresdefault.jpg', - 'https://cdn.autotribune.co.kr/news/photo/202312/11209_56884_5312.png', - 'https://cdn.bosa.co.kr/news/photo/202206/2174709_206247_5859.png' -]; +const Box4 = styled.div` +display: flex; +justify-content: center; +flex-direction: column; +align-items: center; //컨테이너 박스를 꼭대기에 옮기기 +padding: 30px 10px 30px 10px; +box-shadow: 0 2px 4px rgba(76, 76, 76, 0), 0 -2px 4px rgba(76, 76, 76, 0.1), + 2px 0 4px rgba(76, 76, 76, 0.1), -2px 0 4px rgba(76, 76, 76, 0.1); +`; + +const Box4MainA = styled.div` + display: flex; + justify-content: space-around; //요소 주의 간격을 동일하게 + align-items: center; + flex-direction: row; + width: 100%; + height: 130px; + margin-bottom: 50px; +`; + +const Box4MainAButton1 = styled.div` + display: flex; + align-items: center; + width: 150px; + height: 100%; + margin-left: 5px; + margin-right: 5px; + border-radius: 20px; + box-shadow: 0 2px 4px rgba(76, 76, 76, 0), 0 -2px 4px rgba(76, 76, 76, 0.1), + 2px 0 4px rgba(76, 76, 76, 0.1), -2px 0 4px rgba(76, 76, 76, 0.1); +`; + +const Box4MainAButton2 = styled.div` + display: flex; + align-items: center; + width: 150px; + height: 100%; + margin-left: 5px; + margin-right: 5px; + border-radius: 20px; + box-shadow: 0 2px 4px rgba(76, 76, 76, 0), 0 -2px 4px rgba(76, 76, 76, 0.1), + 2px 0 4px rgba(76, 76, 76, 0.1), -2px 0 4px rgba(76, 76, 76, 0.1); +`; + +const Box4MainAButton3 = styled.div` + display: flex; + align-items: center; + width: 150px; + height: 100%; + margin-left: 5px; + margin-right: 5px; + border-radius: 20px; + box-shadow: 0 2px 4px rgba(76, 76, 76, 0), 0 -2px 4px rgba(76, 76, 76, 0.1), + 2px 0 4px rgba(76, 76, 76, 0.1), -2px 0 4px rgba(76, 76, 76, 0.1); +`; + +// const Box4MainB = styled.div` +// display: flex; +// justify-content: center; +// align-items: center; +// width: 100%; +// height: 150px; +// box-shadow: 0 2px 4px rgba(76, 76, 76, 0), 0 -2px 4px rgba(76, 76, 76, 0.1), +// 2px 0 4px rgba(76, 76, 76, 0.1), -2px 0 4px rgba(76, 76, 76, 0.1); +// `; + + + + -function Mainpage() { - const [numberOfBoxes, setNumberOfBoxes] = useState(1); // 숫자 값을 상태로 관리 - const [currentImageIndex, setCurrentImageIndex] = useState(0); - useEffect(() => { - const interval = setInterval(() => { - setCurrentImageIndex((prevIndex) => (prevIndex === images.length - 1 ? 0 : prevIndex + 1)); - }, 5000); - return () => clearInterval(interval); - }, []); - // const settings = { - // dots: true, - // infinite: true, - // speed: 300, - // slidesToShow: 1, - // slidesToScroll: 1, - // arrows: true, - // autoplay: true, - // autoplaySpeed: 3000, - // }; - - // SquareCboxA를 numberOfBoxes 수만큼 반복해서 렌더링 - const renderSquareCboxA = () => { - const boxes = []; - for (let i = 0; i < numberOfBoxes; i++) { - boxes.push( - - - - - - ); - } - return boxes; - }; - - return ( - - - - - CheQ - - - - - - - - - - - 현재 출결사항 - - - - - - - - - - - - - {renderSquareCboxA()} {/* 동적으로 SquareCboxA 렌더링 */} - -