board.tsx 2.58 KB
Newer Older
Lee Soobeom's avatar
Lee Soobeom committed
1
2
import React, { useState, MouseEvent } from "react";
import { Link } from "react-router-dom";
Lee Soobeom's avatar
Lee Soobeom committed
3
4
import { PostType } from "./typesrc";
import Post from "./post";
Lee Soobeom's avatar
Lee Soobeom committed
5

Lee Soobeom's avatar
Lee Soobeom committed
6
function range(start: number, end: number) {
Lee Soobeom's avatar
Lee Soobeom committed
7
8
9
    return (new Array(end - start + 1)).fill(undefined).map((_, i) => i + start);
}

10
11
12
13
interface Posts {
    posts: PostType[];
}

Lee Soobeom's avatar
Lee Soobeom committed
14
15
16
17
18
19
20
21
22
23
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 }
];

Lee Soobeom's avatar
Lee Soobeom committed
24
export default function BoardPage() {
Lee Soobeom's avatar
Lee Soobeom committed
25

Lee Soobeom's avatar
Lee Soobeom committed
26
    const [posts, setPosts] = useState<PostType[]>(fakes);  
27

Lee Soobeom's avatar
Lee Soobeom committed
28
29
30
31
32
33
34
35
36
37
38
39
40
    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)
    }


백승민's avatar
theme1    
백승민 committed
41
    return (
Lee Soobeom's avatar
Lee Soobeom committed
42
43
44
45
46
47
48
49
50
        <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
51

52
53
            <div className="flex flex-col w-10/12 mt-16">
                <div className="flex justify-end">
Lee Soobeom's avatar
Lee Soobeom committed
54
                    <div className="border-2 mb-2"><Link to="/posting"><button>글쓰기+</button></Link></div> {/* Link */}
55
56
                </div>
                <div className="sm:overflow-y-scroll">
Lee Soobeom's avatar
Lee Soobeom committed
57
                    <div className="flex flex-row divide-x-2 border-2 border-solid bg-gray-500 border-y-2 h-10 ">
Lee Soobeom's avatar
Lee Soobeom committed
58
59
60
                        <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
61
62
                    </div>
                    <div>
63
                        {posts.map((post) => (
Lee Soobeom's avatar
Lee Soobeom committed
64
                            <Post key={post.id} post={post} handleClick={titleHandleClick} />
Lee Soobeom's avatar
Lee Soobeom committed
65
66
67
68
69
                        ))}
                    </div>
                </div>
            </div>
        </div>
백승민's avatar
theme1    
백승민 committed
70
    );
Lee Soobeom's avatar
Lee Soobeom committed
71
}