Skip to content

GitLab

Commit 375dd180 authored by Kim, MinGyu's avatar Kim, MinGyu
Browse files

글쓰기

parent e928e6d8
Hide whitespace changes
Inline Side-by-side
frontend/src/App.tsx
View file @ 375dd180
...@@ -6,6 +6,7 @@ import Body from "./Pages/body"; ...@@ -6,6 +6,7 @@ import Body from "./Pages/body";
import Board from "./Pages/board"; import Board from "./Pages/board";
import Login from "./Pages/login"; import Login from "./Pages/login";
import Signup from "./Pages/signup"; import Signup from "./Pages/signup";
import Posting from "./Pages/posting";
export const App = () => { export const App = () => {
return ( return (
...@@ -17,6 +18,7 @@ export const App = () => { ...@@ -17,6 +18,7 @@ export const App = () => {
<Route path="/" element={<Header />}> <Route path="/" element={<Header />}>
<Route index element={<Body />} /> <Route index element={<Body />} />
<Route path="board" element={<Board />} /> <Route path="board" element={<Board />} />
<Route path="posting" element={<Posting/>} />
</Route> </Route>
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>
......
frontend/src/Pages/posting.tsx 0 → 100644
View file @ 375dd180
import React from "react";
export default function Posting() {
return(
<div className="flex flex-col border-3">
<form className="w-full items-center" >
<div className="flex flex-row relative">
<p className="basis-4/12 place-self-center">Id</p>
<p className="basis-8/12 invisible">empty</p>
<button data-dropdown-toggle="dropdownId"className="basis-1/12">Theme</button>
<p className="basis-1/12">city</p>
<button className="basis-1/12 ">글쓰기</button>
</div>
<div className="flex border-4">
<textarea placeholder="title" className="w-full h-8"></textarea>
</div>
<div className="flex border-2">
<textarea placeholder="body" className="w-full h-96"></textarea>
</div>
</form>
</div>
);
}
\ No newline at end of file
frontend/src/pages/board.tsx
View file @ 375dd180
import React, { useState, } from "react"; import React, { useState, } from "react";
import { PostType } from "./typesrc"; import { PostType } from "./typesrc";
import Post from "./post"; import Post from "./post";
import {Link} from "react-router-dom"
function range(start:number, end:number) { function range(start: number, end: number) {
return (new Array(end - start + 1)).fill(undefined).map((_, i) => i + start); return (new Array(end - start + 1)).fill(undefined).map((_, i) => i + start);
} }
const fakes = [{id: "a", title:'부산남자의 서울여행', date:'2022-06-30',},{id: "b", title:'바다!바다!바다!', date:'2022-08-01',}, {id: "c", title:'Jeju-island', date:'2022-9-10',}, {id: "d", title:'마! 부싼 가봤나!', date:'2022-9-22', }, {id: "e", title:'Daegu', date:'2022-10-1', }, {id: "f", title:'강원도 감자는 맛있다.', date:'2022-12-12',},{id: "g", title:'여행가고싶다...',date:'2022-12-25',}]; const fakes = [{ id: "a", title: '부산남자의 서울여행', date: '2022-06-30', }, { id: "b", title: '바다!바다!바다!', date: '2022-08-01', }, { id: "c", title: 'Jeju-island', date: '2022-9-10', }, { id: "d", title: '마! 부싼 가봤나!', date: '2022-9-22', }, { id: "e", title: 'Daegu', date: '2022-10-1', }, { id: "f", title: '강원도 감자는 맛있다.', date: '2022-12-12', }, { id: "g", title: '여행가고싶다...', date: '2022-12-25', }];
interface Posts { interface Posts {
posts: PostType[]; posts: PostType[];
} }
export default function BoardPage() { export default function BoardPage() {
const [posts, setPosts] = useState<PostType[]>(fakes); const [posts, setPosts] = useState<PostType[]>(fakes);
return ( return (
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
...@@ -29,17 +30,17 @@ export default function BoardPage() { ...@@ -29,17 +30,17 @@ export default function BoardPage() {
<div className="flex flex-col w-10/12 mt-16"> <div className="flex flex-col w-10/12 mt-16">
<div className="flex justify-end"> <div className="flex justify-end">
<div className="border-2 mb-2"><button>글쓰기+</button></div> {/* Link */} <div className="border-2 mb-2"><Link to="/posting"><button>글쓰기+</button></Link></div> {/* Link */}
</div> </div>
<div className="sm:overflow-y-scroll"> <div className="sm:overflow-y-scroll">
<div className="flex flex-row divide-x-2 border-2 border-solid bg-gray-500 border-y-2 h-10 "> <div className="flex flex-row divide-x-2 border-2 border-solid bg-gray-500 border-y-2 h-10 ">
<div className="basis-full">Title</div> <div className="basis-full">Title</div>
<div className="basis-3/12">Date</div> <div className="basis-3/12">Date</div>
<div className="basis-2/12">Clicks</div> <div className="basis-2/12">Clicks</div>
</div> </div>
<div> <div>
{posts.map((post) => ( {posts.map((post) => (
<Post key={post.id} post={post}/> <Post key={post.id} post={post} />
))} ))}
</div> </div>
</div> </div>
......
frontend/src/pages/login.tsx
View file @ 375dd180
import { Link, } from "react-router-dom"; import { Link, } from "react-router-dom";
import React from "react"; import React, { useState } from "react";
interface login {
id : string;
password : string;
}
export default function Login () { const fake = {id : "asdf", password : "qwer"}
function Logindata(fake :login){
const [id, setId] = useState("");
const [password, setPassword] = useState("");
return( <div className="flex flex-col md:w-2/3 md:gap-2">
<input className="placeholder:text-slate-300
bg-white border border-slate-500 rounded-2xl
py-2 pl-9 pr-3
focus:border-black
" placeholder="Id" type="text" name="Id"
onChange={(e) => setId(e.target.value)} />
<input className="placeholder:italic placeholder:text-slate-300
bg-white border border-slate-500 rounded-2xl
py-2 pl-9 pr-3
focus:border-black
" placeholder="Password" type="text" name="Password"
onChange={(e) => setPassword(e.target.value)} />
</div>
)
}
export default function Login() {
return ( return (
<div>
<div className="flex flex-row grid grid-rows-2">
<div className=" p-12 w-1/2 h-1/2 md:w-40 md:h-40 bg-red-400 place-self-center rounded-2xl">
<Link to="/">Travel Report</Link>
</div>
<div className=" flex-row w-auto h-60 md:w-1/2 bg-white border-2 border-black grid place-items-center rounded-xl place-self-center">
<div className="flex flex-col w-full md:flex-row md:p-20 md:gap-10">
<div className="flex flex-col md:w-2/3 md:gap-2">
<input className="placeholder:text-slate-300
bg-white border border-slate-500 rounded-2xl
py-2 pl-9 pr-3
focus:border-black
" placeholder="Id" type="text" name="Id"/>
<input className="placeholder:italic placeholder:text-slate-300
bg-white border border-slate-500 rounded-2xl
py-2 pl-9 pr-3
focus:border-black
" placeholder="Password" type="text" name="Password"/>
<div>
{/* <form onSubmit={loginsubmit}> */}
<div className="flex flex-row grid grid-rows-2">
<div className=" p-12 w-1/2 h-1/2 md:w-40 md:h-40 bg-red-400 place-self-center rounded-2xl">
<Link to="/">Travel Report</Link>
</div> </div>
<button className="md:w-1/3 bg-sky-600 hover:bg-sky-700 rounded-xl"> <div className=" flex-row w-auto h-60 md:w-1/2 bg-white border-2 border-black grid place-items-center rounded-xl place-self-center">
login
</button> <div className="flex flex-col w-full md:flex-row md:p-20 md:gap-10">
</div>
<div className="flex-row grid grid-cols-3"> <Logindata id={""} password={""} />
<button className="bg-white bottom-0 right-0">
<Link to="/signup">회원가입</Link> <button type="submit" className="md:w-1/3 bg-sky-600 hover:bg-sky-700 rounded-xl">
</button> login
<div></div> </button>
<button className="bg-white inset-x-0"> </div>
<Link to="/forgot">비밀번호 찾기</Link> <div className="flex-row grid grid-cols-3">
</button> <button className="bg-white bottom-0 right-0">
<Link to="/signup">회원가입</Link>
</button>
<div></div>
<button className="bg-white inset-x-0">
<Link to="/forgot">비밀번호 찾기</Link>
</button>
</div>
</div>
</div> </div>
</div> {/* </form> */}
</div> // Login Page
</div>
</div> // Login Page
); );
} }
\ No newline at end of file \ 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