Commit 1254b3cc authored by 백승민's avatar 백승민
Browse files

theme&city really done

parent e928e6d8
......@@ -51,7 +51,7 @@ let url = [
{
themeid: "activity",
cityid: "Busan",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
url:"https://cdn.pixabay.com/photo/2015/04/07/07/51/railroad-tracks-710614__480.jpg",
name: "레일바이크"
},
{
......@@ -63,7 +63,7 @@ let url = [
{
themeid: "activity",
cityid: "Jeju",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
url: "https://cdn.pixabay.com/photo/2012/10/10/05/07/combat-diver-60545__340.jpg",
name: "스카이다이빙"
},
{
......@@ -87,7 +87,7 @@ let url = [
{
themeid: "activity",
cityid: "Woolsan",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
url: "https://cdn.pixabay.com/photo/2019/05/11/20/44/free-climbing-4196577__480.jpg",
name: "클라이밍"
},
{
......@@ -108,8 +108,9 @@ let url = [
url: "https://cdn.pixabay.com/photo/2016/08/23/16/34/italy-1614931__340.jpg",
name: "서울 동굴"
},
];
export default function getpic(){
export function getPicure(){
return url;
};
\ No newline at end of file
......@@ -2,14 +2,14 @@ import React, { useEffect, MouseEvent } from "react";
import { Outlet, useSearchParams } from "react-router-dom";
import Theme from "./theme";
import Citylist from "./citylist";
import getpic from "./pic";
import {getPicure} from "./pic";
const initSearchParams = { "theme": "", "city": "" }
export default function Body() {
const [searchParams, setSearchParams] = useSearchParams(initSearchParams)
let getpics = getpic();
let getPics = getPicure();
useEffect(() => {
console.log(searchParams.get('theme'), searchParams.get('city'))
......@@ -32,27 +32,29 @@ export default function Body() {
})
}
const Idpics = getpics.filter(p =>
p.themeid == searchParams.get('theme')&&
p.cityid == searchParams.get('city')
)
return (
<div className="flex flex-col px-1 py-1">
<Theme handleClick={themeHandleClick} />
<div className="flex flex-col md:flex-row py-10 ">
<Citylist handleClick={cityHandleClick} />
<div className="overflow-y-auto flex mr:10 md:basis-4/5 grid grid-rows-3 grid-cols-5">
{Idpics.map((pic, index:number) => (
const Idpics = getPics.filter(p => {
return (p.themeid == searchParams.get('theme') && p.cityid == searchParams.get('city'))||(p.themeid == searchParams.get('theme') && searchParams.get('city') == "")
||(searchParams.get('theme') == "" && p.cityid == searchParams.get('city'))||(searchParams.get('theme') == "" && searchParams.get('city') == "")
})
return (
<div className="flex flex-col px-1 py-1">
<Theme handleClick={themeHandleClick} />
<div className="flex flex-col md:flex-row py-10 ">
<Citylist handleClick={cityHandleClick} />
<div className="flex md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5">
{Idpics.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-cover"/>
<img src={pic.url} className="w-full h-10 md:h-20 object-cover" />
<p className="text-center text-xs">{pic.name}</p>
</div>
))}
</div>
))}
</div>
<Outlet />
</div>
// Body Page
);
};
<Outlet />
</div>
// Body Page
);
};
......@@ -9,7 +9,7 @@ export default function Header() {
<div className="flex flex-col ">
<div className="flex flex-row px-5 py-20 md:place-content-between">
<button className="px-5 py-2">
<Link to="/" className="hover:bg-gray-200 focus:text-purple-500 ">Travel Report</Link>
<Link to="/" className="hover:bg-gray-200 focus:text-purple-500">Travel Report</Link>
</button>
<div className="flex flex-row-reverse">
<button className="px-5 py-2 bg-teal-400 rounded">
......
let url = [
{url : "1"},
{url : "2"},
{url : "3"},
{url : "4"},
{url : "5"},
{url : "6"},
{url : "7"},
{url : "8"},
{url : "9"},
{url : "10"},
{url : "11"},
{url : "12"},
{url : "13"},
{url : "14"},
];
export default function getUrl(){
return url;
}
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