From f4ab4299e658b6c02fd76a1216ca124cce56a4e3 Mon Sep 17 00:00:00 2001 From: Baek SeungMin Date: Wed, 13 Jul 2022 13:15:15 +0900 Subject: [PATCH] =?UTF-8?q?slide=20paginaiton=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Pages/picpagination.tsx | 90 +++++++++++++++------------- frontend/src/Pages/slide.tsx | 84 ++++++++++++++++++++++++++ frontend/src/home/body.tsx | 78 +++++++++++++++++------- frontend/tailwind.config.js | 27 ++++++++- 4 files changed, 212 insertions(+), 67 deletions(-) create mode 100644 frontend/src/Pages/slide.tsx diff --git a/frontend/src/Pages/picpagination.tsx b/frontend/src/Pages/picpagination.tsx index 862a5ea..656596a 100644 --- a/frontend/src/Pages/picpagination.tsx +++ b/frontend/src/Pages/picpagination.tsx @@ -1,54 +1,50 @@ -import React, { useRef } from "react"; +// import React, { useRef, useState} from "react"; -type num = { - total: number, - page: number, - setPage: Function -} +// type num = { +// total: number, +// page: number, +// setPage: Function -export function Pagination({ total, page, setPage }: num) { - const numPages = Math.ceil(total / 15); - const firstLeftClick = useRef(true); - const firstRightClick = useRef(true); +// } - const left = () => { - if (firstLeftClick.current) { - firstLeftClick.current = false; - firstRightClick.current = true; - } else { - setPage(page - 1) - } - }; +// export function Pagination({ total, page, setPage}: num) { +// const numPages = Math.ceil(total / 15); +// const firstLeftClick = useRef(true); +// const firstRightClick = useRef(true); + +// const leftClick = () => { +// if (firstLeftClick.current) { +// firstLeftClick.current = false; +// firstRightClick.current = true; +// } else { +// setPage(page - 1) +// } +// }; - const right = () => { - if (firstRightClick.current) { - firstLeftClick.current = true; - firstRightClick.current = false; - } else { - setPage(page + 1) - } - }; +// const rightClick = () => { +// if (firstRightClick.current) { +// firstLeftClick.current = true; +// firstRightClick.current = false; +// } else { +// setPage(page + 1) +// } +// }; +// }; - return ( -
- +// return ( +//
+// +// - {/* {Array(numPages) - .fill(1) - .map((_, i) => ( - - ))} */} +//
+// ); +// }; - -
- ); -}; // export function PaginationRight({ total, page, setPage }: num) { // const numPages = Math.ceil(total / 15); // const firstLeftClick = useRef(true); @@ -72,3 +68,11 @@ export function Pagination({ total, page, setPage }: num) { // // ); // }; + + {/* {Array(numPages) + .fill(1) + .map((_, i) => ( + + ))} */} \ No newline at end of file diff --git a/frontend/src/Pages/slide.tsx b/frontend/src/Pages/slide.tsx new file mode 100644 index 0000000..cb602be --- /dev/null +++ b/frontend/src/Pages/slide.tsx @@ -0,0 +1,84 @@ +import React from "react"; + +const slides = [ + "Slide 0", + "Slide 1", + "Slide 2", + "Slide 3", + "Slide 4", + "Slide 5", + "Slide 6", + "Slide 7", +]; + +export const Slide = () => { + const [page, setPage] = React.useState(1); + const [style, setStyle] = React.useState(""); + const firstRightClick = React.useRef(true); + const firstLeftClick = React.useRef(true); + const slide = React.useRef(0); + + const handleLeftClick = () => { + if (firstLeftClick.current) { //왼쪽 버튼이 true이면 + firstLeftClick.current = false;// 왼쪽 버튼은 false로 + firstRightClick.current = true; // 오른쪽 버튼은 true로 + } else { + setPage(page - 1); // 왼쪽 버튼이 false이면 눌렸을때 page-1 + } + slide.current -= 1; + setStyle("-translate-x-full animate-slidetoright"); + }; + + const handleRightClick = () => { + if (firstRightClick.current) { + firstLeftClick.current = true; + firstRightClick.current = false; + } else { + setPage(page + 1); + } + slide.current += 1; + setStyle("animate-slidetoleft"); + }; + + console.log(`page: ${page}`); + console.log(`style: ${style}`); + console.log(slides.slice(page - 1, page + 2)); + console.log(`slide number: ${slide.current}`); + + return ( +
+

슬라이드

+
+
+ {slides.slice(page - 1, page + 2).map((slide) => ( +
+ {slide} +
+ ))} +
+
+ + +
+
+
+ ); +}; diff --git a/frontend/src/home/body.tsx b/frontend/src/home/body.tsx index a5d2120..da2f5bb 100644 --- a/frontend/src/home/body.tsx +++ b/frontend/src/home/body.tsx @@ -3,7 +3,7 @@ import { Outlet, useSearchParams } from "react-router-dom"; import Theme from "./theme"; import Citylist from "../Pages/citylist"; import { getPicure } from "../Pages/pic"; -import { Pagination} from "../Pages/picpagination"; +// import { Pagination} from "../Pages/picpagination"; const initSearchParams = { theme: "", city: "" }; @@ -11,11 +11,16 @@ export default function Body() { let limit = 15; const [searchParams, setSearchParams] = useSearchParams(initSearchParams); const [page, setPage] = useState(1); + const [style, setStyle] = useState(""); + const firstRightClick = useRef(true); + const firstLeftClick = useRef(true); + const slide = useRef(1); const offset1 = (page - 1) * limit; const offset2 = page * limit; const offset3 = (page + 1) * limit; - let getPics = getPicure(); + let getPics = getPicure(); + useEffect(() => { console.log(searchParams.get("theme"), searchParams.get("city")); setSearchParams(searchParams) @@ -36,20 +41,46 @@ export default function Body() { city: event.currentTarget.id, }); }; - + + const leftClick = () => { + if (firstLeftClick.current) { + firstLeftClick.current = false; + firstRightClick.current = true; + } else { + setPage(page - 1) + } + slide.current -= 1; + setStyle("-translate-x-full animate-slidetoright"); + }; + + const rightClick = () => { + if (firstRightClick.current) { + firstLeftClick.current = true; + firstRightClick.current = false; + } else { + setPage(page + 1) + } + slide.current += 1; + setStyle("animate-slidetoleft"); + }; + console.log(`page: ${slide.current}`); + console.log(`style: ${style}`); + let themechange = searchParams.get("theme"); let citylistchange = searchParams.get("city"); - + const Idpics = getPics.filter((p) => { return ( (p.themeid == themechange && p.cityid == citylistchange) || (p.themeid == themechange && citylistchange == "") || (themechange == "" && p.cityid == citylistchange) || (themechange == "" && citylistchange == "") - ); - }); + ); + }); - return ( + const numPages = Math.ceil(Idpics.length / 15); + + return (
@@ -57,14 +88,20 @@ export default function Body() {
- -
-
-
+
+ + +
+
+
+
{Idpics.slice(offset1, offset1 + limit).map((pic, index: number) => ( -

{pic.name}

- ))}
-
-
+
+
{Idpics.slice(offset2, offset2 + limit).map((pic, index: number) => (

{pic.name}

- ))}
-
-
+
+
{Idpics.slice(offset3, offset3 + limit).map((pic, index: number) => (

{pic.name}

- ))}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index e673c48..5246027 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -1,7 +1,30 @@ +// /** @type {import('tailwindcss').Config} */ +// module.exports = { +// content: ["./src/**/*.{html,js,jsx,ts,tsx}"], +// theme: { +// extend: {}, +// plugins: [], +// }}; /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js,jsx,ts,tsx}"], theme: { - extend: {}, + extend: { + keyframes: { + slidetoleft: { + "33.33%": { transform: "translateX(-100%)", color: "white" }, + "66.66%, 100%": { transform: "translateX(-100%)" }, + }, + slidetoright: { + "33.33%": { transform: "translateX(0%)", color: "white" }, + "66.66%, 100%": { transform: "translateX(0%)" }, + }, + }, + animation: { + slidetoleft: "slidetoleft 3s linear forwards", + slidetoright: "slidetoright 3s linear forwards", + }, + }, + }, plugins: [], -}}; +}; \ No newline at end of file -- GitLab