Skip to content

Commit

Permalink
Merge pull request #35 from potato-club/dlgusdn
Browse files Browse the repository at this point in the history 
Feat MainPage banner react-slick chagne #12
  • Loading branch information
@gusdn010158
gusdn010158 authored Mar 31, 2024
2 parents 9a36d93 + 11b0e39 commit fa584d0
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 105 deletions.
154 changes: 56 additions & 98 deletions src/MainPage/Main.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { PRIMARY_COLOR_BLUE } from "../Constants/constants";
import MainContents from "./MainContents";

import React, { useEffect, useState } from "react";
import Pagenation from "../Components/Pagenation";
import { BiChevronLeft, BiChevronRight } from "react-icons/bi";
import Slider from "react-slick";
import styled from "styled-components";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import axios from "axios";

interface MainProps {
Expand All @@ -22,7 +22,6 @@ interface Ct {
id: string;
}
const Main: React.FC<MainProps> = ({ isSidebarOpen }) => {
const [currentSlide, setCurrentSlide] = useState(0);
const [paddingLeft, setPaddingLeft] = useState(0);
const [main, setMain] = useState<MainDB[]>([]);

Expand All @@ -37,36 +36,12 @@ const Main: React.FC<MainProps> = ({ isSidebarOpen }) => {
});
}, []);

useEffect(() => {
const interval = setInterval(() => {
nextSlide();
}, 3000);
return () => clearInterval(interval);
}, [currentSlide]);

useEffect(() => {
const newPaddingLeft = isSidebarOpen ? 200 : 0;
setPaddingLeft(newPaddingLeft);
}, [isSidebarOpen]);

const nextSlide = () => {
setCurrentSlide((prevSlide) =>
prevSlide === main.length - 1 ? 0 : prevSlide + 1
);
};

const prevSlide = () => {
setCurrentSlide((prevSlide) =>
prevSlide === 0 ? main.length - 1 : prevSlide - 1
);
};

const goToSlide = (index: number) => {
setCurrentSlide(index);
};

const [pagecontent, setpageContent] = useState([]);

async function handlePostInfo() {
const result = await axios({
url: "http://localhost:3001/MainCt",
Expand All @@ -77,11 +52,9 @@ const Main: React.FC<MainProps> = ({ isSidebarOpen }) => {
});
setpageContent(result.data);
}

useEffect(() => {
handlePostInfo();
}, []);

const [currentpage, setcurrentPage] = useState(1); //페이지
const eight = 8; // posts가 보일 최대한의 갯수
const startindex = (currentpage - 1) * eight; //2-1*8=8 result로 가면
Expand All @@ -93,33 +66,27 @@ const Main: React.FC<MainProps> = ({ isSidebarOpen }) => {
}
};
//pagecontent 종합 즉 38 개

const settings = {
infinite: true,
speed: 1000, // 넘어가는 속도 (ms)
autoplay: true, // 자동 넘김 활성화
autoplaySpeed: 5000, // 자동 넘김 속도 (ms)
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
pauseOnHover: true,
};
return (
<MainContainer paddingLeft={paddingLeft}>
<Top>
<TopButton onClick={prevSlide}>
<BiChevronLeft size="40" />
</TopButton>
<Slide>
<SlideImg
src={main.length > 0 ? main[currentSlide].images : ""}
alt="Slide"
/>

<Buttons>
{main.map((_, id) => (
<ButtonsButton
className={`ButtonsButton ${
id === currentSlide ? "active" : ""
}`}
key={id}
onClick={() => goToSlide(id)}
></ButtonsButton>
))}
</Buttons>
</Slide>
<TopButton onClick={nextSlide}>
<BiChevronRight size="40" />
</TopButton>
<StyledSlider {...settings}>
{main.map((m) => (
<Slide>
<SlideImg src={m.images} alt="Slide" />
</Slide>
))}
</StyledSlider>
</Top>

<Bottom>
Expand All @@ -137,65 +104,56 @@ const Main: React.FC<MainProps> = ({ isSidebarOpen }) => {

export default Main;

const MainContainer = styled.div<{ paddingLeft: number }>`
padding-top: 70px;
margin-left: 0;
height: 855px;
padding-left: ${(props) => props.paddingLeft}px;
`;

const Top = styled.div`
const StyledSlider = styled(Slider)`
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 37%;
`;
.slick-prev {
z-index: 1;
left: 30px;
top: 135px;
}
const TopButton = styled.button`
background-color: ${PRIMARY_COLOR_BLUE};
color: white;
border-radius: 15px;
border: 0px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
.slick-next {
z-index: 1;
right: 40px;
top: 135px;
}
.slick-prev:before,
.slick-next:before {
font-size: 30px;
opacity: 0.3;
color: black;
}
.slick-prev:before:hover,
.slick-next:before:hover {
opacity: 1;
}
`;

const Slide = styled.div`
height: 400px;
width: 1200px;
height: 290px;
width: 100%;
flex-direction: column;
display: flex;
align-items: center;
justify-content: center;
`;

const SlideImg = styled.img`
width: 80%;
height: 60%;
height: 100%;
width: 100%;
`;
const MainContainer = styled.div<{ paddingLeft: number }>`
padding-top: 70px;
margin-left: 0;
height: 855px;
padding-left: ${(props) => props.paddingLeft}px;
`;

const Buttons = styled.div`
margin-top: 20px;
const Top = styled.div`
width: 100%;
display: flex;
width: 150px;
justify-content: space-around;
`;
const ButtonsButton = styled.div`
width: 10px;
height: 10px;
transform: translateX(-50%);
background-color: #b9b9b9;
border-radius: 50%;
z-index: 1;
cursor: pointer;
&.active {
background-color: black;
}
height: 37%;
`;

const Bottom = styled.div`
Expand Down
2 changes: 1 addition & 1 deletion src/MainPage/MainBox.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import styled from "styled-components";
import { useState } from "react";
import SlideShow from "../SilderForMainBox";
import SlideShow from "./SilderForMainBox";
import { PRIMARY_COLOR_BLUE } from "../Constants/constants";
import Board from "../Board";
const MainBox = () => {
Expand Down
12 changes: 6 additions & 6 deletions src/json-server/db.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,19 +24,19 @@
"Main": [
{
"id": "1",
"images": "https://www.lge.co.kr/kr/upload/admin/storyThumbnail/tvc_codezero_thumb[20230607_105950].jpg"
"images": "https://as1.ftcdn.net/v2/jpg/04/86/66/48/1000_F_486664896_TxOuOR9WcKdvle5uG4kCZVnL80QyWp1t.jpg"
},
{
"id": "2",
"images": "https://company.eduwill.net/img/promotion/20230331154337ef62af81-9b54-4e6f-8f86-044e3e55f5fc.png"
"images": "https://as1.ftcdn.net/v2/jpg/04/75/95/86/1000_F_475958688_H77LPzr4MNdBkOOK3ddhMcxFSXzqdwMl.jpg"
},
{
"id": "3",
"images": "https://www.samchully.co.kr/upload/pr/paperad/l3tppifzgysi7kp3k8re.png"
"images": "https://as1.ftcdn.net/v2/jpg/04/86/41/00/1000_F_486410063_UUigkonrwxhIMsVta1XT5024el1iDnoa.jpg"
},
{
"id": 3,
"images": "https://www.samchully.co.kr/upload/pr/paperad/l3tppifzgysi7kp3k8re.png"
"id": "4",
"images": "https://yozm.wishket.com/media/news/985/image001.png"
}
],
"Community": [
Expand Down Expand Up @@ -362,4 +362,4 @@
"content": "ㅁㅇ"
}
]
}
}

0 comments on commit fa584d0

Please sign in to comment.