Skip to content

GitLab

Commit 2e4c838d authored by 백승민's avatar 백승민
Browse files

theme1

parent dde8c872
Show whitespace changes
Inline Side-by-side
frontend/src/App.tsx
View file @ 2e4c838d
import React from "react"; import React from "react";
import { BrowserRouter, Route, Routes, Link, Outlet} from "react-router-dom";
import "tailwindcss/tailwind.css"; import "tailwindcss/tailwind.css";
import Header from "./pages/header";
import Body from "./pages/body";
import Board from "./pages/board";
import Login from "./pages/login";
import Citylist from "./pages/citylist";
import Theme from "./pages/theme";
export const App = () => { export const App = () => {
return ( return (
<div className="text-slate-300 bg-red-600 text-3xl font-bold underline"> <BrowserRouter>
App 안녕하세요. <Routes>
</div> <Route path="/login" element={<Login />} />
<Route path="/signup" element={<signup />} />
<Route path="/" element={<Header />}>
<Route index element={<Body />} />
<Route path="/board" element={<Board />} />
</Route>
</Routes>
</BrowserRouter>
); );
}; };
frontend/src/pages/board.tsx 0 → 100644
View file @ 2e4c838d
import React from "react";
export default function Board() {
return (
<div>Board</div> // Board Page
);
};
\ No newline at end of file
frontend/src/pages/body.tsx 0 → 100644
View file @ 2e4c838d
import React, { MouseEventHandler, useEffect, MouseEvent } from "react";
import { BrowserRouter, Route, Routes, Link, Outlet, useSearchParams } from "react-router-dom";
import Theme from "./theme";
import getUrl from "../url"
// const initSearchParams = ["theme", "city"]
const initSearchParams = { "theme": "1", "city": "1" }
export default function Body() {
const [searchParams, setSearchParams] = useSearchParams(initSearchParams)
useEffect(() => {
console.log(searchParams.get('theme'), searchParams.get('city'))
setSearchParams(searchParams)
}, [])
const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
console.log(`theme id= ${event.currentTarget.id}`)
}
// const imgs = [1, 2, 3, 4, 5]
let url=getUrl();
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">{url.url}</div>
))}
{/* pic */}
</div>
</div>
<Outlet />
</div>
</div> // Body Page
);
};
frontend/src/pages/citylist.tsx 0 → 100644
View file @ 2e4c838d
import React from "react";
export default function Citylist() {
return (
<div>citylist</div> // Citylist Page
);
};
\ No newline at end of file
frontend/src/pages/header.tsx 0 → 100644
View file @ 2e4c838d
import React from "react";
import {Link, Outlet} from "react-router-dom";
import "tailwindcss/tailwind.css";
export default function Header() {
return (
<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>
</button>
<div className="flex flex-row-reverse">
<button className="px-5 py-2 bg-teal-400 rounded">
<Link to="/login" className="hover:bg-teal-100 focus:text-purple-500 ">Login</Link>
</button>
<button className="px-5 py-2 bg-purple-400 rounded">
<Link to="/board" className="hover:bg-purple-300 focus:text-purple-500 ">Board</Link>
</button>
<div>
<label>
{/* <span className="sr-only">Search</span> */}
<span className="absolute inset-y-0 left-0 flex items-center pl-2">
<svg className="h-5 w-5 fill-slate-300" viewBox="0 0 20 20"></svg>
</span>
<input className="placeholder:italic placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-2 pl-9 pr-3 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm" placeholder="Search for anything..." type="text" name="search" />
</label>
</div>
</div>
</div>
<Outlet/>
</div>
);
}
\ No newline at end of file
frontend/src/pages/login.tsx 0 → 100644
View file @ 2e4c838d
import React from "react";
export default function Login() {
return (
<div className="text-center">Login</div> // Login Page
);
};
\ No newline at end of file
frontend/src/pages/theme.tsx 0 → 100644
View file @ 2e4c838d
import React, { MouseEvent, MouseEventHandler } from "react";
type ThemeProps = {
handleClick: MouseEventHandler;
}
export default function Theme({handleClick}: ThemeProps) {
// const handleClick = (event: MouseEvent<HTMLElement>) => {
// console.log(event.currentTarget.id)
// }
return (
<div className="flex flex-cols-10 justify-evenly w-full bg-emerald-400 rounded ">
<button id={"01"} onClick={handleClick}>01</button>
<button>02</button>
<button>03</button>
<button>04</button>
<button>05</button>
<button>06</button>
<button>07</button>
<button>08</button>
<button>09</button>
<button>10</button>
</div>
);
};
\ No newline at end of file
frontend/src/url.tsx 0 → 100644
View file @ 2e4c838d
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;
}
// Url() {
// const imgs = [1, 2, 3, 4, 5];
// return (
// {
// imgs.map(img => (
// <div className="flex justify-items-center">{img}</div>
// ))
// } // Board Page
// );
// };
\ 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