Skip to content

GitLab

Commit 2762e04b authored by 백승민's avatar 백승민
Browse files

theme&citylist done

parent 53b3261d
Show whitespace changes
Inline Side-by-side
frontend/src/Pages/pic.ts 0 → 100644
View file @ 2762e04b
let url = [
{
themeid:"surfing",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "종로 서핑"
},
{
themeid: "surfing",
cityid: "Busan",
url: "https://cdn.crowdpic.net/detail-thumb/thumb_d_1F5AF0BCBB2F43EF3C5B79DA763D3CFB.jpg",
name: "해운대 서핑"
},
{
themeid: "surfing",
cityid: "Daegoo",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "대구 서핑"
},
{
themeid: "activity",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2019/05/17/13/36/umbrella-4209724__340.jpg",
name: "서대문 번지점프"
},
{
themeid: "sking",
cityid: "Kwangjoo",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "광주 스키"
},
{
themeid: "camping",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2021/11/16/11/13/man-6800728__340.jpg",
name: "강남 캠핑"
},
{
themeid: "boat",
cityid: "Sejong",
url: "https://cdn.pixabay.com/photo/2018/02/19/22/21/water-3166432__340.jpg",
name: "조치원 보트"
},
{
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: "번지점프"
},
{
themeid: "activity",
cityid: "Busan",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "레일바이크"
},
{
themeid: "activity",
cityid: "Daegoo",
url: "https://cdn.pixabay.com/photo/2017/06/17/10/55/hot-air-balloon-2411851__340.jpg",
name: "열기구"
},
{
themeid: "activity",
cityid: "Jeju",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "스카이다이빙"
},
{
themeid: "activity",
cityid: "Incheon",
url: "https://cdn.pixabay.com/photo/2015/03/11/15/19/divers-668777__480.jpg",
name: "인천 스쿠버다이빙"
},
{
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: "수상스키"
},
{
themeid: "desert",
cityid: "Incheon",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "인천 사막"
},
{
themeid: "activity",
cityid: "Woolsan",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "클라이밍"
},
{
themeid: "zoo",
cityid: "Daejeon",
url: "https://cdn.pixabay.com/photo/2020/06/10/18/45/africa-5283871__340.jpg",
name: "대전 동물원"
},
{
themeid: "activity",
cityid: "Dokdo",
url: "https://cdn.pixabay.com/photo/2020/04/19/08/03/adventure-5062314__340.jpg",
name: "산"
},
{
themeid: "cave",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2016/08/23/16/34/italy-1614931__340.jpg",
name: "서울 동굴"
},
];
export default function getpic(){
return url;
};
\ No newline at end of file
frontend/src/pages/body.tsx
View file @ 2762e04b
import React, { useEffect, MouseEvent } from "react"; import React, { useEffect, MouseEvent } from "react";
import { BrowserRouter, Route, Routes, Link, Outlet, useSearchParams } from "react-router-dom"; import { Outlet, useSearchParams } from "react-router-dom";
import Theme from "./theme"; import Theme from "./theme";
import getUrl from "../url" import Citylist from "./citylist";
import getpic from "./pic";
const initSearchParams = { "theme": "", "city": "" }
const initSearchParams = { "theme": "1", "city": "1" }
export default function Body() { export default function Body() {
const [searchParams, setSearchParams] = useSearchParams(initSearchParams) const [searchParams, setSearchParams] = useSearchParams(initSearchParams)
let getpics = getpic();
useEffect(() => { useEffect(() => {
console.log(searchParams.get('theme'), searchParams.get('city')) console.log(searchParams.get('theme'), searchParams.get('city'))
setSearchParams(searchParams) // setSearchParams(searchParams)
}, []) }, [])
const handleClick = (event: MouseEvent<HTMLButtonElement>) => { const themeHandleClick = (event: MouseEvent<HTMLButtonElement>) => {
console.log(`theme id= ${event.currentTarget.id}`) console.log(`theme id= ${event.currentTarget.id}`)
setSearchParams({
...Object.fromEntries(searchParams),
theme: event.currentTarget.id,
})
} }
let url = getUrl(); const cityHandleClick = (event: MouseEvent<HTMLButtonElement>) => {
return ( console.log(`city id= ${event.currentTarget.id}`)
setSearchParams({
...Object.fromEntries(searchParams),
city: event.currentTarget.id
})
}
const Idpics = getpics.filter(p =>
p.themeid == searchParams.get('theme')&&
p.cityid == searchParams.get('city')
)
<div className="flex flex-col px-5 py-5"> return (
<Theme handleClick={handleClick} /> <div className="flex flex-col px-1 py-1">
<div className="flex flex-col md:flex-row px-5 py-40 "> <Theme handleClick={themeHandleClick} />
<div className="flex flex-row justify-evenly md:flex-col md:basis-1/5 bg-gray-400 rounded "> <div className="flex flex-col md:flex-row py-10 ">
<button>01</button> <Citylist handleClick={cityHandleClick} />
<button>02</button> <div className="overflow-y-auto flex mr:10 md:basis-4/5 grid grid-rows-3 grid-cols-5">
<button>03</button> {Idpics.map((pic, index:number) => (
<button>04</button> <div className="m-1 shrink-0 bg-gray-200 rounded overflow-hidden shadow-md" key={index}>
<button>06</button> <img src={pic.url} className="w-full h-10 md:h-20 object-cover"/>
<button>07</button> <p className="text-center text-xs">{pic.name}</p>
<button>05</button>
<button>08</button>
<button>09</button>
<button>10</button>
{/* citylist */}
</div> </div>
<div className="flex md:basis-4/5 grid grid-rows-3 grid-cols-5 outline">
{url.map(url => (
<div className="flex justify-items-center" key={url.url}>{url.url}</div>
))} ))}
{/* pic */}
</div> </div>
</div> </div>
<Outlet /> <Outlet />
</div> </div>
// Body Page // Body Page
); );
}; };
frontend/src/pages/citylist.tsx
View file @ 2762e04b
import React from "react"; import React, { MouseEventHandler } from "react";
export default function Citylist() { type CityProps = {
handleClick: MouseEventHandler;
}
export default function Citylist({handleClick}: CityProps) {
return ( return (
<div>citylist</div> // Citylist Page <div className="overflow-auto flex flex-row mb-10 md:flex-col md:basis-1/5 md:mr-10 bg-gray-400 rounded ">
<button id={"Seoul"} onClick={handleClick} className="shrink-0 px-5 hover:underline">seoul</button>
<button id={"Busan"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Busan</button>
<button id={"Incheon"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Incheon</button>
<button id={"Daegoo"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Daegoo</button>
<button id={"Kwangjoo"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Kwangjoo</button>
<button id={"Daejeon"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Daejeon</button>
<button id={"Woolsan"} onClick={handleClick} className="shrink-0 px-5 hover:underline">woolsan</button>
<button id={"Sejong"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Sejong</button>
<button id={"Dokdo"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Dokdo</button>
<button id={"Jeju"} onClick={handleClick} className="shrink-0 px-5 hover:underline">jeju</button>
{/* citylist */}
</div> // Citylist Page
); );
}; };
\ No newline at end of file
frontend/src/pages/theme.tsx
View file @ 2762e04b
import React, { MouseEvent, MouseEventHandler } from "react"; import React, { useEffect, MouseEvent, MouseEventHandler } from "react";
import { Outlet, useSearchParams } from "react-router-dom";
type ThemeProps = { type ThemeProps = {
handleClick: MouseEventHandler; handleClick: MouseEventHandler;
} }
export default function Theme({handleClick}: ThemeProps) { export default function Theme({handleClick}: ThemeProps) {
return ( return (
<div className="flex flex-cols-10 justify-evenly w-full bg-emerald-400 rounded "> <div className="overflow-x-scroll flex bg-emerald-400 rounded ">
<button id={"01"} onClick={handleClick}>서핑</button> <button id={"surfing"} onClick={handleClick} className="shrink-0 px-5">서핑</button>
<button>액티비티</button> <button id={"activity"} onClick={handleClick} className="shrink-0 px-5">액티비티</button>
<button>캠핑</button> <button id={"camping"} onClick={handleClick} className="shrink-0 px-5 ">캠핑</button>
<button>스키</button> <button id={"sking"} onClick={handleClick} className="shrink-0 px-5">스키</button>
<button>보트</button> <button id={"boat"} onClick={handleClick} className="shrink-0 px-5">보트</button>
<button>사막</button> <button id={"desert"} onClick={handleClick} className="shrink-0 px-5">사막</button>
<button>골프</button> <button id={"golf"} onClick={handleClick} className="shrink-0 px-5">골프</button>
<button>동굴</button> <button id={"cave"} onClick={handleClick} className="shrink-0 px-5">동굴</button>
<button>문화재</button> <button id={"history"} onClick={handleClick} className="shrink-0 px-5">문화재</button>
<button>동물원</button> <button id={"zoo"} onClick={handleClick} className="shrink-0 px-5">동물원</button>
<button id={"cycling"} onClick={handleClick} className="shrink-0 px-5">사이클링</button>
</div> </div>
); );
}; };
\ 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