Skip to content

GitLab

Commit 516dbb80 authored by Lee Soobeom's avatar Lee Soobeom
Browse files

Lifting state up

parent e928e6d8
Hide whitespace changes
Inline Side-by-side
frontend/src/App.tsx
View file @ 516dbb80
...@@ -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/post.tsx
View file @ 516dbb80
import React, { useState, MouseEvent } from "react"; import React, { useState, MouseEvent, MouseEventHandler } from "react";
import { PostType } from "./typesrc"; import { PostType } from "./typesrc";
type Props = { type Props = {
post: PostType; post: PostType;
handleClick: MouseEventHandler;
} }
export default function Post({ post }: Props) { export default function Post({ handleClick, post }: Props) {
const [count, setCount] = useState(0);
// const titleHandleClick = (event:MouseEvent<HTMLButtonElement>) => {
// setCount(count + 1)
// }
return ( return (
<div className="flex flex-row h-16 divide-x-2 border-2 border-solid"> <div className="flex flex-row h-16 divide-x-2 border-2 border-solid">
<div className="basis-full"> <div className="basis-full">
<button id={post.id} onClick={() => setCount(count + 1)}>{post.title}</button> <button id={post.id} onClick={handleClick}>{post.title}</button>
</div> {/*<Link to>title</Link> */} </div>
<div className="basis-3/12">{post.date}</div> <div className="basis-3/12">{post.date}</div>
<div className="basis-2/12">{count}</div> <div className="basis-2/12">{post.counts}</div>
</div> </div>
); );
} }
\ No newline at end of file
frontend/src/Pages/posting.tsx 0 → 100644
View file @ 516dbb80
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 border-4">
<textarea placeholder="title" className="w-3/4 h-8"></textarea>
</div>
<div className="flex border-2">
<textarea placeholder="body" className="w-3/4 h-96"></textarea>
</div>
</form>
</div>
);
}
\ No newline at end of file
frontend/src/Pages/typesrc.tsx
View file @ 516dbb80
...@@ -2,4 +2,5 @@ export interface PostType { ...@@ -2,4 +2,5 @@ export interface PostType {
id: string; id: string;
title: string; title: string;
date: string; date: string;
counts: number;
} }
\ No newline at end of file
frontend/src/pages/board.tsx
View file @ 516dbb80
import React, { useState, } from "react"; import React, { useState, MouseEvent } from "react";
import { Link } from "react-router-dom";
import { PostType } from "./typesrc"; import { PostType } from "./typesrc";
import Post from "./post"; import Post from "./post";
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',}];
interface Posts { interface Posts {
posts: PostType[]; posts: PostType[];
} }
export const fakes = [
{ id: "a", title: '여행가고싶다...', date: '2022-06-30', counts: 0 },
{ id: "b", title: '바다!바다!바다!', date: '2022-08-01', counts: 0 },
{ id: "c", title: 'Jeju-island', date: '2022-9-10', counts: 0 },
{ id: "d", title: '마! 부싼 가봤나!', date: '2022-9-22', counts: 0 },
{ id: "e", title: 'Daegu', date: '2022-10-1', counts: 0 },
{ id: "f", title: '강원도 감자는 맛있다.', date: '2022-12-12', counts: 0 },
{ id: "g", title: '부산남자의 서울여행', date: '2022-12-25', counts: 0 }
];
export default function BoardPage() { export default function BoardPage() {
const [posts, setPosts] = useState<PostType[]>(fakes); const [posts, setPosts] = useState<PostType[]>(fakes);
const titleHandleClick = (event: MouseEvent<HTMLButtonElement>) => {
const postId = event.currentTarget.id
const newposts = [...posts]
newposts.forEach(post => {
if (post.id === postId) {
post.counts = post.counts + 1
return
}
})
setPosts(newposts)
}
return ( return (
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<div className="flex flex-col items-center mt-6"> <div className="flex flex-col items-center mt-6">
...@@ -29,17 +52,17 @@ export default function BoardPage() { ...@@ -29,17 +52,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} handleClick={titleHandleClick} />
))} ))}
</div> </div>
</div> </div>
......
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