board.tsx 2.83 KB
Newer Older
Lee Soobeom's avatar
Lee Soobeom committed
1
import React, { useState, MouseEvent, useEffect } from "react";
2
import { Link, useLocation, useNavigate } 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";
Kim, MinGyu's avatar
Kim, MinGyu committed
6
import { useAuth } from "../auth/auth.context";
Lee Soobeom's avatar
Lee Soobeom committed
7

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

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

Lee Soobeom's avatar
Lee Soobeom committed
16
export default function BoardPage() {
Lee Soobeom's avatar
Lee Soobeom committed
17
  const [posts, setPosts] = useState<PostType[]>();
Lee Soobeom's avatar
Lee Soobeom committed
18
19
  const location = useLocation() as Newpost;
  const newPost = location.state;
Kim, MinGyu's avatar
Kim, MinGyu committed
20
21
  const navigate = useNavigate();
  const { user } = useAuth();
Lee Soobeom's avatar
Lee Soobeom committed
22

Lee Soobeom's avatar
Lee Soobeom committed
23
  // console.log("get newPost Info", newPost);
Lee Soobeom's avatar
Lee Soobeom committed
24
25
26
27
28
29
30

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

  useEffect(() => {
    getDataList();
Lee Soobeom's avatar
Lee Soobeom committed
34
    setNewPosts(newPost);
Lee Soobeom's avatar
Lee Soobeom committed
35
  }, []);
36

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

Lee Soobeom's avatar
Lee Soobeom committed
43
  const titleHandleClick = async (event: MouseEvent<HTMLButtonElement>) => {
Kim, MinGyu's avatar
Kim, MinGyu committed
44
    const postId = event.currentTarget.id;
Lee Soobeom's avatar
Lee Soobeom committed
45
46
47
    const newpost = posts?.find((element) => {
      if (element._id === postId) {
        return element;
Kim, MinGyu's avatar
Kim, MinGyu committed
48
49
      }
    });
Lee Soobeom's avatar
Lee Soobeom committed
50
51
52
53
54
55
    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
56
  };
57

58
  const GoLogin = async (event: React.MouseEvent) => {
Kim, MinGyu's avatar
Kim, MinGyu committed
59
60
61
62
63
64
    if (!user.isLoggedIn) {
      alert("로그인이 필요합니다.");
      navigate("/login", { replace: true });
    }
  };

Kim, MinGyu's avatar
Kim, MinGyu committed
65
  return (
Kim, MinGyu's avatar
Kim, MinGyu committed
66
67
    <div className="flex flex-col ">
      <div className="flex flex-col  mt-6">
Kim, MinGyu's avatar
Kim, MinGyu committed
68
69
70
71
        <div className="text-2xl whitespace-nowrap">자유 게시판</div>
        <div className="text-sm mt-5 whitespace-nowrap">
          여행지 후기를 남겨주세요!
        </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
72
      </div>
Lee Soobeom's avatar
Lee Soobeom committed
73

Kim, MinGyu's avatar
Kim, MinGyu committed
74
      <div className="flex flex-col w-full mt-16">
Kim, MinGyu's avatar
Kim, MinGyu committed
75
        <div className="flex justify-end">
Kim, MinGyu's avatar
Kim, MinGyu committed
76
          <div className="border-2 border-blue-500 rounded mb-2 whitespace-nowrap">
77
            <button onClick={GoLogin}>
Kim, MinGyu's avatar
Kim, MinGyu committed
78
79
80
              <Link to="/posting">글쓰기</Link>
            </button>
          </div>
Lee Soobeom's avatar
Lee Soobeom committed
81
        </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
82
        <div className="sm:overflow-y-auto">
Kim, MinGyu's avatar
Kim, MinGyu committed
83
          <div className="whitespace-nowrap 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 ">
Kim, MinGyu's avatar
Kim, MinGyu committed
84
85
86
            <div className="basis-full">제목</div>
            <div className="basis-3/12">게시 날짜</div>
            <div className="basis-2/12">조회수</div>
Kim, MinGyu's avatar
Kim, MinGyu committed
87
          </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
88
          <div className="whitespace-nowrap">
Lee Soobeom's avatar
Lee Soobeom committed
89
90
            {posts?.map((post, i) => (
              <Post key={i} post={post} handleClick={titleHandleClick} />
Kim, MinGyu's avatar
Kim, MinGyu committed
91
92
93
94
95
96
97
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}