Skip to content

GitLab

Commit 39f40906 authored by Lee Soobeom's avatar Lee Soobeom
Browse files

Merge remote-tracking branch 'origin/sm9' into develop

parents d6ce49aa 1df94f68
Hide whitespace changes
Inline Side-by-side
frontend/src/Pages/myslide.tsx 0 → 100644
View file @ 39f40906
import React, { useRef, useState } from "react";
type num = {
total: number,
page: number,
setPage: Function,
style: string,
setStyle: Function,
// slides : any[],
}
export function MySlide({ total, page, setPage, style, setStyle}: num) {
const numPages = Math.ceil(total / 15);
const firstLeftClick = useRef(true);
const firstRightClick = useRef(true);
const slide = useRef(1);
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");
};
return (
<div>
<button onClick={leftClick} disabled={slide.current === 1}>
&lt;{slide.current}
</button>
<button onClick={rightClick} disabled={slide.current === numPages}>
&gt;
</button>
</div>
);
};
{/* {Array(numPages)
.fill(1)
.map((_, i) => (
<button key={i + 1} onClick={() => setPage(i + 1)}>
{i + 1}
</button>
))} */}
\ No newline at end of file
frontend/src/Pages/pic.ts
View file @ 39f40906
......@@ -4,109 +4,433 @@ let url = [
themeid:"surfing",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "종로 서핑"
name: "1.종로 서핑"
},
{
themeid: "surfing",
cityid: "Busan",
url: "https://cdn.crowdpic.net/detail-thumb/thumb_d_1F5AF0BCBB2F43EF3C5B79DA763D3CFB.jpg",
name: "해운대 서핑"
name: "1.해운대 서핑"
},
{
themeid: "surfing",
cityid: "Daegoo",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "대구 서핑"
name: "1.대구 서핑"
},
{
themeid: "activity",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2019/05/17/13/36/umbrella-4209724__340.jpg",
name: "서대문 번지점프"
name: "1.서대문 번지점프"
},
{
themeid: "sking",
cityid: "Kwangjoo",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "광주 스키"
name: "1.광주 스키"
},
{
themeid: "camping",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2021/11/16/11/13/man-6800728__340.jpg",
name: "강남 캠핑"
name: "1.강남 캠핑"
},
{
themeid: "boat",
cityid: "Sejong",
url: "https://cdn.pixabay.com/photo/2018/02/19/22/21/water-3166432__340.jpg",
name: "조치원 보트"
name: "1.조치원 보트"
},
{
themeid: "activity",
cityid: "Sejong",
url: "https://media.istockphoto.com/photos/vertical-woman-is-wraped-in-bungee-jumping-picture-id1391927451?b=1&k=20&m=1391927451&s=170667a&w=0&h=haNtVpNjhj58PsjRi8N_RbyYfxZsFfKdb3NJi7NPdDI=",
name: "번지점프"
name: "1.번지점프"
},
{
themeid: "activity",
cityid: "Busan",
url:"https://cdn.pixabay.com/photo/2015/04/07/07/51/railroad-tracks-710614__480.jpg",
name: "레일바이크"
name: "1.레일바이크"
},
{
themeid: "activity",
cityid: "Daegoo",
url: "https://cdn.pixabay.com/photo/2017/06/17/10/55/hot-air-balloon-2411851__340.jpg",
name: "열기구"
name: "1.열기구"
},
{
themeid: "activity",
cityid: "Jeju",
url: "https://cdn.pixabay.com/photo/2012/10/10/05/07/combat-diver-60545__340.jpg",
name: "스카이다이빙"
name: "1.스카이다이빙"
},
{
themeid: "activity",
cityid: "Incheon",
url: "https://cdn.pixabay.com/photo/2015/03/11/15/19/divers-668777__480.jpg",
name: "인천 스쿠버다이빙"
name: "1.인천 스쿠버다이빙"
},
{
themeid: "activity",
cityid: "Daejeon",
url: "https://media.istockphoto.com/photos/playing-water-skiing-or-wakeboard-picture-id1021580500?b=1&k=20&m=1021580500&s=170667a&w=0&h=dL-mrlLeoQGrNBhbyAS-rN0TcpFg9s41D3WVKUoZgNo=",
name: "수상스키"
name: "1.수상스키"
},
{
themeid: "desert",
cityid: "Incheon",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "인천 사막"
name: "1.인천 사막"
},
{
themeid: "activity",
cityid: "Woolsan",
url: "https://cdn.pixabay.com/photo/2019/05/11/20/44/free-climbing-4196577__480.jpg",
name: "클라이밍"
name: "1.클라이밍"
},
{
themeid: "zoo",
cityid: "Daejeon",
url: "https://cdn.pixabay.com/photo/2020/06/10/18/45/africa-5283871__340.jpg",
name: "대전 동물원"
name: "2.대전 동물원"
},
{
themeid: "activity",
cityid: "Dokdo",
url: "https://cdn.pixabay.com/photo/2020/04/19/08/03/adventure-5062314__340.jpg",
name: "산"
name: "2.산"
},
{
themeid: "cave",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2016/08/23/16/34/italy-1614931__340.jpg",
name: "서울 동굴"
name: "2.서울 동굴"
},
{
themeid:"surfing",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "2.종로 서핑"
},
{
themeid: "surfing",
cityid: "Busan",
url: "https://cdn.crowdpic.net/detail-thumb/thumb_d_1F5AF0BCBB2F43EF3C5B79DA763D3CFB.jpg",
name: "2.해운대 서핑"
},
{
themeid: "surfing",
cityid: "Daegoo",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "2.대구 서핑"
},
{
themeid: "activity",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2019/05/17/13/36/umbrella-4209724__340.jpg",
name: "2.서대문 번지점프"
},
{
themeid: "sking",
cityid: "Kwangjoo",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "2.광주 스키"
},
{
themeid: "camping",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2021/11/16/11/13/man-6800728__340.jpg",
name: "2.강남 캠핑"
},
{
themeid: "boat",
cityid: "Sejong",
url: "https://cdn.pixabay.com/photo/2018/02/19/22/21/water-3166432__340.jpg",
name: "2.조치원 보트"
},
{
themeid: "activity",
cityid: "Sejong",
url: "https://media.istockphoto.com/photos/vertical-woman-is-wraped-in-bungee-jumping-picture-id1391927451?b=1&k=20&m=1391927451&s=170667a&w=0&h=haNtVpNjhj58PsjRi8N_RbyYfxZsFfKdb3NJi7NPdDI=",
name: "2.번지점프"
},
{
themeid: "activity",
cityid: "Busan",
url:"https://cdn.pixabay.com/photo/2015/04/07/07/51/railroad-tracks-710614__480.jpg",
name: "2.레일바이크"
},
{
themeid: "activity",
cityid: "Daegoo",
url: "https://cdn.pixabay.com/photo/2017/06/17/10/55/hot-air-balloon-2411851__340.jpg",
name: "2.열기구"
},
{
themeid: "activity",
cityid: "Jeju",
url: "https://cdn.pixabay.com/photo/2012/10/10/05/07/combat-diver-60545__340.jpg",
name: "2.스카이다이빙"
},
{
themeid: "activity",
cityid: "Incheon",
url: "https://cdn.pixabay.com/photo/2015/03/11/15/19/divers-668777__480.jpg",
name: "2.인천 스쿠버다이빙"
},
{
themeid: "activity",
cityid: "Daejeon",
url: "https://media.istockphoto.com/photos/playing-water-skiing-or-wakeboard-picture-id1021580500?b=1&k=20&m=1021580500&s=170667a&w=0&h=dL-mrlLeoQGrNBhbyAS-rN0TcpFg9s41D3WVKUoZgNo=",
name: "3.수상스키"
},
{
themeid: "desert",
cityid: "Incheon",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "3.인천 사막"
},
{
themeid: "activity",
cityid: "Woolsan",
url: "https://cdn.pixabay.com/photo/2019/05/11/20/44/free-climbing-4196577__480.jpg",
name: "3.클라이밍"
},
{
themeid: "zoo",
cityid: "Daejeon",
url: "https://cdn.pixabay.com/photo/2020/06/10/18/45/africa-5283871__340.jpg",
name: "3.대전 동물원"
},
{
themeid: "activity",
cityid: "Dokdo",
url: "https://cdn.pixabay.com/photo/2020/04/19/08/03/adventure-5062314__340.jpg",
name: "3.산"
},
{
themeid: "cave",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2016/08/23/16/34/italy-1614931__340.jpg",
name: "3.서울 동굴"
},
{
themeid:"surfing",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "3.종로 서핑"
},
{
themeid: "surfing",
cityid: "Busan",
url: "https://cdn.crowdpic.net/detail-thumb/thumb_d_1F5AF0BCBB2F43EF3C5B79DA763D3CFB.jpg",
name: "3.해운대 서핑"
},
{
themeid: "surfing",
cityid: "Daegoo",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "3.대구 서핑"
},
{
themeid: "activity",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2019/05/17/13/36/umbrella-4209724__340.jpg",
name: "3.서대문 번지점프"
},
{
themeid: "sking",
cityid: "Kwangjoo",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "3.광주 스키"
},
{
themeid: "camping",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2021/11/16/11/13/man-6800728__340.jpg",
name: "3.강남 캠핑"
},
{
themeid: "boat",
cityid: "Sejong",
url: "https://cdn.pixabay.com/photo/2018/02/19/22/21/water-3166432__340.jpg",
name: "3.조치원 보트"
},
{
themeid: "activity",
cityid: "Sejong",
url: "https://media.istockphoto.com/photos/vertical-woman-is-wraped-in-bungee-jumping-picture-id1391927451?b=1&k=20&m=1391927451&s=170667a&w=0&h=haNtVpNjhj58PsjRi8N_RbyYfxZsFfKdb3NJi7NPdDI=",
name: "3.번지점프"
},
{
themeid: "activity",
cityid: "Busan",
url:"https://cdn.pixabay.com/photo/2015/04/07/07/51/railroad-tracks-710614__480.jpg",
name: "3.레일바이크"
},
{
themeid: "activity",
cityid: "Daegoo",
url: "https://cdn.pixabay.com/photo/2017/06/17/10/55/hot-air-balloon-2411851__340.jpg",
name: "4.열기구"
},
{
themeid: "activity",
cityid: "Jeju",
url: "https://cdn.pixabay.com/photo/2012/10/10/05/07/combat-diver-60545__340.jpg",
name: "4.스카이다이빙"
},
{
themeid: "activity",
cityid: "Incheon",
url: "https://cdn.pixabay.com/photo/2015/03/11/15/19/divers-668777__480.jpg",
name: "4.인천 스쿠버다이빙"
},
{
themeid: "activity",
cityid: "Daejeon",
url: "https://media.istockphoto.com/photos/playing-water-skiing-or-wakeboard-picture-id1021580500?b=1&k=20&m=1021580500&s=170667a&w=0&h=dL-mrlLeoQGrNBhbyAS-rN0TcpFg9s41D3WVKUoZgNo=",
name: "4.수상스키"
},
{
themeid: "desert",
cityid: "Incheon",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "4.인천 사막"
},
{
themeid: "activity",
cityid: "Woolsan",
url: "https://cdn.pixabay.com/photo/2019/05/11/20/44/free-climbing-4196577__480.jpg",
name: "4.클라이밍"
},
{
themeid: "zoo",
cityid: "Daejeon",
url: "https://cdn.pixabay.com/photo/2020/06/10/18/45/africa-5283871__340.jpg",
name: "4.대전 동물원"
},
{
themeid: "activity",
cityid: "Dokdo",
url: "https://cdn.pixabay.com/photo/2020/04/19/08/03/adventure-5062314__340.jpg",
name: "4.산"
},
{
themeid: "cave",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2016/08/23/16/34/italy-1614931__340.jpg",
name: "4.서울 동굴"
},
{
themeid:"surfing",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "4.종로 서핑"
},
{
themeid: "surfing",
cityid: "Busan",
url: "https://cdn.crowdpic.net/detail-thumb/thumb_d_1F5AF0BCBB2F43EF3C5B79DA763D3CFB.jpg",
name: "4.해운대 서핑"
},
{
themeid: "surfing",
cityid: "Daegoo",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "4.대구 서핑"
},
{
themeid: "activity",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2019/05/17/13/36/umbrella-4209724__340.jpg",
name: "4.서대문 번지점프"
},
{
themeid: "sking",
cityid: "Kwangjoo",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "4.광주 스키"
},
{
themeid: "camping",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2021/11/16/11/13/man-6800728__340.jpg",
name: "4.강남 캠핑"
},
{
themeid: "boat",
cityid: "Sejong",
url: "https://cdn.pixabay.com/photo/2018/02/19/22/21/water-3166432__340.jpg",
name: "5.조치원 보트"
},
{
themeid: "activity",
cityid: "Sejong",
url: "https://media.istockphoto.com/photos/vertical-woman-is-wraped-in-bungee-jumping-picture-id1391927451?b=1&k=20&m=1391927451&s=170667a&w=0&h=haNtVpNjhj58PsjRi8N_RbyYfxZsFfKdb3NJi7NPdDI=",
name: "5.번지점프"
},
{
themeid: "activity",
cityid: "Busan",
url:"https://cdn.pixabay.com/photo/2015/04/07/07/51/railroad-tracks-710614__480.jpg",
name: "5.레일바이크"
},
{
themeid: "activity",
cityid: "Daegoo",
url: "https://cdn.pixabay.com/photo/2017/06/17/10/55/hot-air-balloon-2411851__340.jpg",
name: "5.열기구"
},
{
themeid: "activity",
cityid: "Jeju",
url: "https://cdn.pixabay.com/photo/2012/10/10/05/07/combat-diver-60545__340.jpg",
name: "5.스카이다이빙"
},
{
themeid: "activity",
cityid: "Incheon",
url: "https://cdn.pixabay.com/photo/2015/03/11/15/19/divers-668777__480.jpg",
name: "5.인천 스쿠버다이빙"
},
{
themeid: "activity",
cityid: "Daejeon",
url: "https://media.istockphoto.com/photos/playing-water-skiing-or-wakeboard-picture-id1021580500?b=1&k=20&m=1021580500&s=170667a&w=0&h=dL-mrlLeoQGrNBhbyAS-rN0TcpFg9s41D3WVKUoZgNo=",
name: "5.수상스키"
},
{
themeid: "desert",
cityid: "Incheon",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "5.인천 사막"
},
{
themeid: "activity",
cityid: "Woolsan",
url: "https://cdn.pixabay.com/photo/2019/05/11/20/44/free-climbing-4196577__480.jpg",
name: "5.클라이밍"
},
{
themeid: "zoo",
cityid: "Daejeon",
url: "https://cdn.pixabay.com/photo/2020/06/10/18/45/africa-5283871__340.jpg",
name: "5.대전 동물원"
},
{
themeid: "activity",
cityid: "Dokdo",
url: "https://cdn.pixabay.com/photo/2020/04/19/08/03/adventure-5062314__340.jpg",
name: "5.산"
},
{
themeid: "cave",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2016/08/23/16/34/italy-1614931__340.jpg",
name: "5.서울 동굴"
},
];
......
frontend/src/Pages/picpagination.tsx deleted 100644 → 0
View file @ d6ce49aa
import React from "react";
type num = {
// total: number,
page: number,
setPage: Function
}
// export function PaginationLeft ({total, page, setPage} : num) {
// const numPages = Math.ceil(total / 15);
export function PaginationLeft ({ page, setPage} : num) {
const numPages = 3
return (
<div>
<button onClick={() => setPage(page - 1)} disabled={page === 1}>
&lt;
</button>
{/* {Array(numPages)
.fill(1)
.map((_, i) => (
<button key={i + 1} onClick={() => setPage(i + 1)}>
{i + 1}
</button>
))} */}
</div>
);
};
// export function PaginationRight ({total, page, setPage} : num) {
// const numPages = Math.ceil(total / 15);
export function PaginationRight ({ page, setPage} : num) {
const numPages = 3;
return (
<div>
<button onClick={() => setPage(page + 1)} disabled={page === numPages}>
&gt;
</button>
</div>
);
};
frontend/src/Pages/slide.tsx 0 → 100644
View file @ 39f40906
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 (
<div className="flex flex-col items-center text-center">
<h1>슬라이드</h1>
<div className="h-screen w-full">
<div
key={Math.random()}
className="flex overflow-x-hidden border-solid border-2 w-full h-1/2 text-8xl"
>
{slides.slice(page - 1, page + 2).map((slide) => (
<div
key={slide}
className={`basis-full grow-0 shrink-0 border-8 bg-orange-300 ${style}`}
>
{slide}
</div>
))}
</div>
<div>
<button
onClick={handleLeftClick}
disabled={slide.current < 1}
className="bg-gray-400 p-1 disabled:opacity-40"
>
&lt;
</button>
<button
onClick={handleRightClick}
disabled={slide.current > slides.length - 2}
className="bg-gray-400 p-1 disabled:opacity-40"
>
&gt;
</button>
</div>
</div>
</div>
);
};
frontend/src/home/body.tsx
View file @ 39f40906
import React, { useEffect, MouseEvent, useState } from "react";
import React, { useEffect, MouseEvent, useState, useRef } from "react";
import { Outlet, useSearchParams } from "react-router-dom";
import Theme from "./theme";
import Citylist from "../Pages/citylist";
import { getPicure } from "../Pages/pic";
import { PaginationLeft, PaginationRight } from "../Pages/picpagination";
import { MySlide } from "../Pages/myslide";
const initSearchParams = { theme: "", city: "" };
export default function Body() {
let limit = 15;
const [searchParams, setSearchParams] = useSearchParams(initSearchParams);
const [page, setPage] = useState(1);
const offset = (page - 1) * limit;
const [selected, setSelected] = useState(1);
const [style, setStyle] = useState("");
const offset1 = (page - 1) * limit;
const offset2 = page * limit;
const offset3 = (page + 1) * limit;
let getPics = getPicure();
useEffect(() => {
console.log(searchParams.get("theme"), searchParams.get("city"));
// setSearchParams(searchParams)
setSearchParams(searchParams);
}, []);
const themeHandleClick = (event: MouseEvent<HTMLButtonElement>) => {
......@@ -36,6 +41,7 @@ export default function Body() {
});
};
//picture insert
let themechange = searchParams.get("theme");
let citylistchange = searchParams.get("city");
......@@ -48,13 +54,28 @@ export default function Body() {
);
});
const pre = () => {
setSelected(selected - 1);
};
const next = () => {
setSelected(selected + 1);
};
const numPages = Math.ceil(Idpics.length / 15);
console.log(page);
// const slides = []
// for (let i = 0; i < numPages + 1; i++) {
// const k =[
// <div key={Math.random()} className="min-w-full">
// <div className={`inline-grid grid-cols-5 ${style}`}>
// {Idpics.slice(i * limit, i * limit + limit).map((pic, index: number) => (
// <div
// className={`m-1 shrink-0 bg-gray-200 rounded shadow-md `}
// key={index}>
// <img
// src={pic.url}
// className="w-full h-10 md:h-20 object-center"
// />
// <p className="text-center text-xs">{pic.name}</p>
// </div>
// ))}
// </div>
// </div>]
// slides.push(k);
// }
return (
<div className="flex flex-col">
......@@ -63,35 +84,69 @@ export default function Body() {
<div className="w-50">
<Citylist handleClick={cityHandleClick} />
</div>
<div className="flex flex-col">
<div>
<button onClick={pre} disabled={selected === 1}>
&lt;{selected}
</button>
<button onClick={next} disabled={selected === 3}>
&gt;
</button>
</div>
<div>
<div className=" md:mr-10 md:basis-4/5 overflow-hidden">
<div
className=" flex flex-row transition duration-500 relative"
style={{
transform: "translate(-" + (selected - 1) * 100 + "%)",
}}
>
<img
className="border-2"
src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"
/>
<img
className="border-2"
src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"
/>
<img
className="border-2"
src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"
/>
<div className="flex flex-col overflow-hidden">
<MySlide
total={Idpics.length}
page={page}
setPage={setPage}
style={style}
setStyle={setStyle}
/>
<div
className={`md:mr-10 md:basis-4/5 flex flex-row relative w-full `}
>
<div key={Math.random()} className="min-w-full">
<div className={`inline-grid grid-cols-5 ${style}`}>
{Idpics.slice(offset1, offset1 + limit).map(
(pic, index: number) => (
<div
className={`m-1 shrink-0 bg-gray-200 rounded shadow-md `}
key={index}
>
<img
src={pic.url}
className="w-full h-10 md:h-20 object-center"
/>
<p className="text-center text-xs">{pic.name}</p>
</div>
)
)}
</div>
</div>
<div key={Math.random()} className="min-w-full">
<div className={`inline-grid grid-cols-5 ${style}`}>
{Idpics.slice(offset2, offset2 + limit).map(
(pic, index: number) => (
<div
className={`m-1 shrink-0 bg-gray-200 rounded shadow-md `}
key={index}
>
<img
src={pic.url}
className="w-full h-10 md:h-20 object-center"
/>
<p className="text-center text-xs">{pic.name}</p>
</div>
)
)}
</div>
</div>
<div key={Math.random()} className="min-w-full">
<div className={`inline-grid grid-cols-5 ${style}`}>
{Idpics.slice(offset3, offset3 + limit).map(
(pic, index: number) => (
<div
className={`m-1 shrink-0 bg-gray-200 rounded shadow-md `}
key={index}
>
<img
src={pic.url}
className="w-full h-10 md:h-20 object-center"
/>
<p className="text-center text-xs">{pic.name}</p>
</div>
)
)}
</div>
</div>
</div>
......@@ -103,26 +158,3 @@ export default function Body() {
// Body Page
);
}
{
/* <div className=" md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5"></div> */
}
{
/* {Idpics.slice(offset, offset + limit).map((pic, index: number) => (
<div
className="m-1 shrink-0 bg-gray-200 rounded overflow-hidden shadow-md"
key={index}
>
<img
src={pic.url}
className="w-full h-10 md:h-20 object-center"
/>
<p className="text-center text-xs">{pic.name}</p>
</div>
))} */
}
{
/* <PaginationLeft total={Idpics.length} page={page} setPage={setPage} /> */
}
{
/* <PaginationRight total={Idpics.length} page={page} setPage={setPage} /> */
}
frontend/src/home/theme.tsx
View file @ 39f40906
......@@ -6,82 +6,38 @@ type ThemeProps = {
export default function Theme({ handleClick }: ThemeProps) {
return (
<div className="flex overflow-x-auto bg-emerald-400 md:px-52 ">
<button
id={"surfing"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
<div className="overflow-x-auto flex bg-emerald-400 rounded ">
<button id={"surfing"} onClick={handleClick} className="shrink-0 px-5">
서핑
</button>
<button
id={"activity"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
<button id={"activity"} onClick={handleClick} className="shrink-0 px-5">
액티비티
</button>
<button
id={"camping"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
<button id={"camping"} onClick={handleClick} className="shrink-0 px-5 ">
캠핑
</button>
<button
id={"sking"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
<button id={"sking"} onClick={handleClick} className="shrink-0 px-5">
스키
</button>
<button
id={"boat"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
<button id={"boat"} onClick={handleClick} className="shrink-0 px-5">
보트
</button>
<button
id={"desert"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
<button id={"desert"} onClick={handleClick} className="shrink-0 px-5">
사막
</button>
<button
id={"golf"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
<button id={"golf"} onClick={handleClick} className="shrink-0 px-5">
골프
</button>
<button
id={"cave"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
<button id={"cave"} onClick={handleClick} className="shrink-0 px-5">
동굴
</button>
<button
id={"history"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
<button id={"history"} onClick={handleClick} className="shrink-0 px-5">
문화재
</button>
<button
id={"zoo"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
<button id={"zoo"} onClick={handleClick} className="shrink-0 px-5">
동물원
</button>
<button
id={"cycling"}
onClick={handleClick}
className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
>
<button id={"cycling"} onClick={handleClick} className="shrink-0 px-5">
사이클링
</button>
</div>
......
frontend/tailwind.config.js
View file @ 39f40906
// /** @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 2s linear forwards",
slidetoright: "slidetoright 2s linear forwards",
},
},
},
plugins: [],
};
};
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment