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

7
interface Posts {
Kim, MinGyu's avatar
Kim, MinGyu committed
8
  posts: PostType[];
9
10
}

Lee Soobeom's avatar
Lee Soobeom committed
11
12
13
14
interface Newpost {
  state: PostType;
}

Lee Soobeom's avatar
Lee Soobeom committed
15
export default function BoardPage() {
Lee Soobeom's avatar
Lee Soobeom committed
16
  const [posts, setPosts] = useState<PostType[]>();
Lee Soobeom's avatar
Lee Soobeom committed
17
18
19
  const location = useLocation() as Newpost;
  const newPost = location.state;

Lee Soobeom's avatar
Lee Soobeom committed
20
  console.log("get newPost Info", newPost);
Lee Soobeom's avatar
Lee Soobeom committed
21
22
23
24
25
26
27

  const setNewPosts = (newpost: PostType) => {
    const postArr = posts?.splice(-1, 0, newPost);
    if (!(postArr === undefined)) {
      setPosts(postArr);
    }
  };
Lee Soobeom's avatar
Lee Soobeom committed
28
29
30

  useEffect(() => {
    getDataList();
Lee Soobeom's avatar
Lee Soobeom committed
31
    setNewPosts(newPost);
Lee Soobeom's avatar
Lee Soobeom committed
32
  }, []);
33

Lee Soobeom's avatar
Lee Soobeom committed
34
  // posts
Lee Soobeom's avatar
Lee Soobeom committed
35
36
  const getDataList = async () => {
    const res = await postApi.getData();
Lee Soobeom's avatar
Lee Soobeom committed
37
    setPosts(res); //posts = res
Lee Soobeom's avatar
Lee Soobeom committed
38
  };
Lee Soobeom's avatar
Lee Soobeom committed
39

Lee Soobeom's avatar
Lee Soobeom committed
40
  const titleHandleClick = async (event: MouseEvent<HTMLButtonElement>) => {
Kim, MinGyu's avatar
Kim, MinGyu committed
41
    const postId = event.currentTarget.id;
Lee Soobeom's avatar
Lee Soobeom committed
42
43
44
    const newpost = posts?.find((element) => {
      if (element._id === postId) {
        return element;
Kim, MinGyu's avatar
Kim, MinGyu committed
45
46
      }
    });
Lee Soobeom's avatar
Lee Soobeom committed
47
48
49
50
51
52
    if (!(newpost?._id === undefined)) {
      const post = newpost;
      const res = await postApi.addCounts(post._id, post.counts);
      // console.log(res);
      setPosts(res);
    }
Kim, MinGyu's avatar
Kim, MinGyu committed
53
  };
54

Kim, MinGyu's avatar
Kim, MinGyu committed
55
  return (
Kim, MinGyu's avatar
Kim, MinGyu committed
56
57
58
59
    <div className="flex flex-col ">
      <div className="flex flex-col  mt-6">
        <div className="text-2xl">자유 게시판</div>
        <div className="text-sm mt-5">여행지 후기를 남겨주세요!</div>
Kim, MinGyu's avatar
Kim, MinGyu committed
60
      </div>
Lee Soobeom's avatar
Lee Soobeom committed
61

Kim, MinGyu's avatar
Kim, MinGyu committed
62
      <div className="flex flex-col w-full mt-16">
Kim, MinGyu's avatar
Kim, MinGyu committed
63
        <div className="flex justify-end">
Lee Soobeom's avatar
Lee Soobeom committed
64
          <div className="border-2 border-blue-500 rounded mb-2">
Kim, MinGyu's avatar
Kim, MinGyu committed
65
            <Link to="/posting">
Lee Soobeom's avatar
Lee Soobeom committed
66
              <button>글쓰기</button>
Kim, MinGyu's avatar
Kim, MinGyu committed
67
68
69
            </Link>
          </div>{" "}
          {/* Link */}
Lee Soobeom's avatar
Lee Soobeom committed
70
        </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
71
72
73
74
75
        <div className="sm:overflow-y-auto">
          <div className="flex place-items-center divide-x-2 border-2 border-solid border-y-2 h-10 bg-gradient-to-r from-cyan-500 to-blue-500 ">
            <div className="basis-full">제목</div>
            <div className="basis-3/12">게시 날짜</div>
            <div className="basis-2/12">조회수</div>
Kim, MinGyu's avatar
Kim, MinGyu committed
76
          </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
77
          <div className="">
Lee Soobeom's avatar
Lee Soobeom committed
78
79
            {posts?.map((post, i) => (
              <Post key={i} post={post} handleClick={titleHandleClick} />
Kim, MinGyu's avatar
Kim, MinGyu committed
80
81
82
83
84
85
86
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}