Commit c8a72edb authored by Lee Soobeom's avatar Lee Soobeom
Browse files

post 파일 분리, 구조분해 Type

parent b0182a85
import React, { useState } from "react";
export interface PostType {
id: string;
title: string;
date: string;
click: number;
}
type Props = {
post: PostType;
}
export default function Post({ post }: Props) {
const [count, setCount] = useState(0);
return (
<div className="flex flex-row h-16 divide-x-2 border-2 border-solid">
<div className="basis-full">
<button onClick={() => setCount(count + 1)}>{post.title}</button>
</div> {/*<Link to>title</Link> */}
<div className="basis-3/12">{post.date}</div>
<div className="basis-2/12">{count}</div>
</div>
);
}
\ No newline at end of file
import React, {useState} from "react"; import React, {useState} from "react";
import Post, { PostType } 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', click: 0},{id: "b", title:'바다!바다!바다!', date:'2022-08-01',click:0}, {id: "c", title:'Jeju-island', date:'2022-9-10',click:0}, {id: "d", title:'마! 부싼 가봤나!', date:'2022-9-22', click:0}, {id: "e", title:'Daegu', date:'2022-10-1', click:0}, {id: "f", title:'강원도 감자는 맛있다.', date:'2022-12-12',click:0},{id: "g", title:'여행가고싶다...',date:'2022-12-25',click:0}];
interface Posts {
posts: PostType[];
}
export default function BoardPage() { export default function BoardPage() {
const ords = range(0,4); //[0,1,2,3,4];
const [count, setCount] = useState(0);
const fakes = [['Seoul', '2022-06-30', '0'], ['Jeju', '2022-9-10', '1'], ['Busan', '2022-9-22', '2'], ['Daegu', '2022-10-1', '3'], ['Incheon', '2022-12-12','4'],]; const [posts, setPosts] = useState<PostType[]>(fakes);
return ( return (
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
...@@ -21,22 +26,19 @@ export default function BoardPage() { ...@@ -21,22 +26,19 @@ export default function BoardPage() {
</div> </div>
</div> </div>
<div className="flex flex-col w-10/12 mt-16 "> <div className="flex flex-col w-10/12 mt-16">
<div> <div className="flex justify-end">
<div className="border-2 mb-2"><button>글쓰기+</button></div> {/* Link */}
</div>
<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-1/12">No.</div>
<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>
{ords.map((ord, index) => ( {posts.map((post) => (
<div key={index} className="flex flex-row h-16 divide-x-2 border-2 border-solid "> <Post key={post.id} post={post}/>
<div className="basis-1/12 bg-gray-100">{ord + 1}</div>
<div className="basis-full"><button onClick={() => setCount(count + 1)}>{fakes[ord][0]}</button></div> {/*<Link to>title</Link> */}
<div className="basis-3/12">{fakes[ord][1]}</div>
<div className="basis-2/12">{count}</div>
</div>
))} ))}
</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