board.tsx 2.03 KB
Newer Older
Lee Soobeom's avatar
Lee Soobeom committed
1
import React, {useState} from "react";
2
import Post, { PostType } from "./post";
Lee Soobeom's avatar
Lee Soobeom committed
3
4
5
6
7

function range(start:number, end:number) {
    return (new Array(end - start + 1)).fill(undefined).map((_, i) => i + start);
}

8
9
10
11
12
13
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[];
}

Lee Soobeom's avatar
Lee Soobeom committed
14
export default function BoardPage() {
Lee Soobeom's avatar
Lee Soobeom committed
15

16
17
    const [posts, setPosts] = useState<PostType[]>(fakes);  

백승민's avatar
theme1    
백승민 committed
18
    return (
Lee Soobeom's avatar
Lee Soobeom committed
19
20
21
22
23
24
25
26
27
        <div className="flex flex-col items-center">
            <div className="flex flex-col items-center mt-6">
                <div>
                    `Travel Report's Board`
                </div>
                <div>
                    `여행지 후기를 남겨주세요!`
                </div>
            </div>
Lee Soobeom's avatar
Lee Soobeom committed
28

29
30
31
32
33
            <div className="flex flex-col w-10/12 mt-16">
                <div className="flex justify-end">
                    <div className="border-2 mb-2"><button>글쓰기+</button></div> {/* Link */}
                </div>
                <div className="sm:overflow-y-scroll">
Lee Soobeom's avatar
Lee Soobeom committed
34
35
36
37
                    <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-3/12">Date</div>
                                <div className="basis-2/12">Clicks</div>
Lee Soobeom's avatar
Lee Soobeom committed
38
39
                    </div>
                    <div>
40
41
                        {posts.map((post) => (
                            <Post key={post.id} post={post}/>
Lee Soobeom's avatar
Lee Soobeom committed
42
43
44
45
46
                        ))}
                    </div>
                </div>
            </div>
        </div>
백승민's avatar
theme1    
백승민 committed
47
    );
Lee Soobeom's avatar
Lee Soobeom committed
48
}