Commit a2b972b2 authored by 백승민's avatar 백승민
Browse files

theme name

parent 99795566
import React, { MouseEventHandler, useEffect, MouseEvent } from "react"; import React, { useEffect, MouseEvent } from "react";
import { BrowserRouter, Route, Routes, Link, Outlet, useSearchParams } from "react-router-dom"; import { BrowserRouter, Route, Routes, Link, Outlet, useSearchParams } from "react-router-dom";
import Theme from "./theme"; import Theme from "./theme";
import getUrl from "../url" import getUrl from "../url"
// const initSearchParams = ["theme", "city"]
const initSearchParams = { "theme": "1", "city": "1" } const initSearchParams = { "theme": "1", "city": "1" }
export default function Body() { export default function Body() {
const [searchParams, setSearchParams] = useSearchParams(initSearchParams) const [searchParams, setSearchParams] = useSearchParams(initSearchParams)
...@@ -17,37 +16,34 @@ export default function Body() { ...@@ -17,37 +16,34 @@ export default function Body() {
console.log(`theme id= ${event.currentTarget.id}`) console.log(`theme id= ${event.currentTarget.id}`)
} }
// const imgs = [1, 2, 3, 4, 5] let url = getUrl();
let url=getUrl();
return ( return (
<div>
<div className="flex flex-col px-5 py-5">
<Theme handleClick={handleClick} />
<div className="flex flex-col md:flex-row px-5 py-40 ">
<div className="flex flex-row md:flex-col md:basis-1/5 bg-gray-400 rounded ">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div>07</div>
<div>08</div>
<div>09</div>
<div>10</div>
{/* citylist */}
</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>
<Outlet /> <div className="flex flex-col px-5 py-5">
<Theme handleClick={handleClick} />
<div className="flex flex-col md:flex-row px-5 py-40 ">
<div className="flex flex-row justify-evenly md:flex-col md:basis-1/5 bg-gray-400 rounded ">
<button>01</button>
<button>02</button>
<button>03</button>
<button>04</button>
<button>06</button>
<button>07</button>
<button>05</button>
<button>08</button>
<button>09</button>
<button>10</button>
{/* citylist */}
</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>
<Outlet />
</div> // Body Page </div>
// Body Page
); );
}; };
...@@ -4,22 +4,18 @@ type ThemeProps = { ...@@ -4,22 +4,18 @@ type ThemeProps = {
handleClick: MouseEventHandler; handleClick: MouseEventHandler;
} }
export default function Theme({handleClick}: ThemeProps) { export default function Theme({handleClick}: ThemeProps) {
// const handleClick = (event: MouseEvent<HTMLElement>) => {
// console.log(event.currentTarget.id)
// }
return ( return (
<div className="flex flex-cols-10 justify-evenly w-full bg-emerald-400 rounded "> <div className="flex flex-cols-10 justify-evenly w-full bg-emerald-400 rounded ">
<button id={"01"} onClick={handleClick}>01</button> <button id={"01"} onClick={handleClick}>서핑</button>
<button>02</button> <button>액티비티</button>
<button>03</button> <button>캠핑</button>
<button>04</button> <button>스키</button>
<button>05</button> <button>보트</button>
<button>06</button> <button>사막</button>
<button>07</button> <button>골프</button>
<button>08</button> <button>동굴</button>
<button>09</button> <button>문화재</button>
<button>10</button> <button>동물원</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