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

theme&city really done

parent e928e6d8
...@@ -51,7 +51,7 @@ let url = [ ...@@ -51,7 +51,7 @@ let url = [
{ {
themeid: "activity", themeid: "activity",
cityid: "Busan", 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: "레일바이크" name: "레일바이크"
}, },
{ {
...@@ -63,7 +63,7 @@ let url = [ ...@@ -63,7 +63,7 @@ let url = [
{ {
themeid: "activity", themeid: "activity",
cityid: "Jeju", 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: "스카이다이빙" name: "스카이다이빙"
}, },
{ {
...@@ -87,7 +87,7 @@ let url = [ ...@@ -87,7 +87,7 @@ let url = [
{ {
themeid: "activity", themeid: "activity",
cityid: "Woolsan", 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: "클라이밍" name: "클라이밍"
}, },
{ {
...@@ -108,8 +108,9 @@ let url = [ ...@@ -108,8 +108,9 @@ let url = [
url: "https://cdn.pixabay.com/photo/2016/08/23/16/34/italy-1614931__340.jpg", url: "https://cdn.pixabay.com/photo/2016/08/23/16/34/italy-1614931__340.jpg",
name: "서울 동굴" name: "서울 동굴"
}, },
]; ];
export default function getpic(){ export function getPicure(){
return url; return url;
}; };
\ No newline at end of file
...@@ -2,14 +2,14 @@ import React, { useEffect, MouseEvent } from "react"; ...@@ -2,14 +2,14 @@ import React, { useEffect, MouseEvent } from "react";
import { Outlet, useSearchParams } from "react-router-dom"; import { Outlet, useSearchParams } from "react-router-dom";
import Theme from "./theme"; import Theme from "./theme";
import Citylist from "./citylist"; import Citylist from "./citylist";
import getpic from "./pic"; import {getPicure} from "./pic";
const initSearchParams = { "theme": "", "city": "" } const initSearchParams = { "theme": "", "city": "" }
export default function Body() { export default function Body() {
const [searchParams, setSearchParams] = useSearchParams(initSearchParams) const [searchParams, setSearchParams] = useSearchParams(initSearchParams)
let getpics = getpic(); let getPics = getPicure();
useEffect(() => { useEffect(() => {
console.log(searchParams.get('theme'), searchParams.get('city')) console.log(searchParams.get('theme'), searchParams.get('city'))
...@@ -32,20 +32,22 @@ export default function Body() { ...@@ -32,20 +32,22 @@ export default function Body() {
}) })
} }
const Idpics = getpics.filter(p => const Idpics = getPics.filter(p => {
p.themeid == searchParams.get('theme')&&
p.cityid == searchParams.get('city') 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 ( return (
<div className="flex flex-col px-1 py-1"> <div className="flex flex-col px-1 py-1">
<Theme handleClick={themeHandleClick} /> <Theme handleClick={themeHandleClick} />
<div className="flex flex-col md:flex-row py-10 "> <div className="flex flex-col md:flex-row py-10 ">
<Citylist handleClick={cityHandleClick} /> <Citylist handleClick={cityHandleClick} />
<div className="overflow-y-auto flex mr:10 md:basis-4/5 grid grid-rows-3 grid-cols-5"> <div className="flex md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5">
{Idpics.map((pic, index:number) => ( {Idpics.map((pic, index: number) => (
<div className="m-1 shrink-0 bg-gray-200 rounded overflow-hidden shadow-md" key={index}> <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> <p className="text-center text-xs">{pic.name}</p>
</div> </div>
))} ))}
...@@ -55,4 +57,4 @@ export default function Body() { ...@@ -55,4 +57,4 @@ export default function Body() {
</div> </div>
// Body Page // Body Page
); );
}; };
...@@ -9,7 +9,7 @@ export default function Header() { ...@@ -9,7 +9,7 @@ export default function Header() {
<div className="flex flex-col "> <div className="flex flex-col ">
<div className="flex flex-row px-5 py-20 md:place-content-between"> <div className="flex flex-row px-5 py-20 md:place-content-between">
<button className="px-5 py-2"> <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> </button>
<div className="flex flex-row-reverse"> <div className="flex flex-row-reverse">
<button className="px-5 py-2 bg-teal-400 rounded"> <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