Commit 13bd5ce0 authored by Kim, MinGyu's avatar Kim, MinGyu
Browse files

처음

parent a4f3f070
import React from "react"; import React from "react";
import { Route, Routes, BrowserRouter} from "react-router-dom";
import "tailwindcss/tailwind.css"; import "tailwindcss/tailwind.css";
import Layout from "./Layout";
import Home from "./Home";
import Theme from "./Theme";
import List from "./list";
import Board from "./Board";
import Login from "./Login";
import Signup from "./Signup";
import Forgot from "./Forgot";
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>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="board" element={<Board />} />
<Route path="theme" element={<Theme />} />
<Route path="list" element={<List />} />
</Route>
</Route>
<Route path="login" element={<Login />} >
<Route path="/" element={<Home />} />
<Route path="signup" element={<Signup />} />
<Route path="forgot" element={<Forgot />} />
</Route>
</Routes>
</BrowserRouter>
); );
}; };
import React from "react";
export default function Board () {
return (
<div>
<p>리액트 라우터 실습 프로젝트입니다.</p>
</div> // Board Page
);
}
\ No newline at end of file
import React from "react";
export default function Forgot () {
return (
<div>
<p>리액트 라우터 실습 프로젝트입니다.</p>
</div> // Board Page
);
}
\ No newline at end of file
import React from "react";
export default function Home(){
return (
<div > pic2 </div>
);
}
\ No newline at end of file
import { Link, Outlet } from "react-router-dom";
import React from "react";
export default function Layout(){
return (
<div className="flex flex-col">
<div className="flex flex-row px-5 py-20 place-content-between">
<div className="px-5 py-2 bg-amber-400 rounded">
<Link to="/">Travel Report</Link>
</div>
<div className="flex flex-row-reverse">
<div className="px-5 py-2 bg-teal-400 rounded">
<Link to="/login">Login</Link>
</div>
<div className="px-5 py-2 bg-purple-400 rounded">
<Link to="/board">Board</Link>
</div>
<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>
<div className="flex px-5 py-5">
<div className="flex w-full bg-emerald-400 rounded"> <Link to="/theme">Theme</Link> </div>
</div>
<div className="flex flex-row px-5 py-40 place-content-between">
<div className="px-20 py-40 bg-gray-400 rounded"> <Link to="/list">List</Link> </div>
<div className="w-60 px-80 py-60 mr-16 bg-red-400 rounded"> pic<Outlet /> </div>
</div>
</div>
);
}
\ No newline at end of file
import { Link, Outlet } from "react-router-dom";
import React from "react";
export default function Login () {
return (
<div>
<div className="flex flex-col grid grid-rows-2 place-items-center">
<div className="w-40 h-40 bg-red-400 place-self-center ">
<Link to="/">Travel Report</Link>
</div>
<div className="flex-row w-full h-80 md:w-1/2 bg-amber-300 grid place-items-center">
<div className="flex flex-col w-full md:flex-row ">
<div className="flex flex-col w-full">
<input className="placeholder:italic placeholder:text-slate-300 block
bg-white border border-slate-500 rounded-md
py-2 pl-9 pr-3 shadow-sm
focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-2
" placeholder="Id" type="text" name="Id"/>
<input className="placeholder:italic placeholder:text-slate-300 block
bg-white border border-slate-500 rounded-md
py-2 pl-9 pr-3 shadow-sm
focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1
" placeholder="Password" type="text" name="Password"/>
</div>
<button className="w-full bg-sky-600 hover:bg-sky-700 ...">
Log-in
</button>
</div>
</div>
</div>
<div className="flex-row relative w-full h-20 grid place-items-center">
<button className="bg-white left-1 top-0">
<Link to="/signup">회원가입</Link>
</button>
<button className="bg-white left-2 top-0">
<Link to="/forgot">비밀번호 찾기</Link>
</button>
</div>
</div> // Login Page
);
}
\ No newline at end of file
import React from "react";
export default function Signup () {
return (
<div>
<p>리액트 라우터 실습 프로젝트입니다.</p>
</div> // Board Page
);
}
\ No newline at end of file
import React from "react";
export default function Theme() {
return (
<div > Theme</div>
);
}
\ No newline at end of file
import React from "react";
export default function List() {
return (
<div > list </div>
);
}
\ No newline at end of file
...@@ -6,5 +6,5 @@ const common = require("./webpack.common.js"); ...@@ -6,5 +6,5 @@ const common = require("./webpack.common.js");
module.exports = merge(common, { module.exports = merge(common, {
mode: "development", mode: "development",
devtool: "inline-source-map", devtool: "inline-source-map",
devServer: {}, devServer: {historyApiFallback: true},
}); });
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