intopost.tsx 3.23 KB
Newer Older
Lee Soobeom's avatar
Lee Soobeom committed
1
import React, { MouseEvent, useEffect, useState } from "react";
Lee Soobeom's avatar
Lee Soobeom committed
2
import { useLocation, useNavigate, Link, Outlet } from "react-router-dom";
Lee Soobeom's avatar
Lee Soobeom committed
3
import { catchErrors } from "../helpers";
Lee Soobeom's avatar
Lee Soobeom committed
4
import { postApi } from "../apis";
Yoon, Daeki's avatar
Yoon, Daeki committed
5
import { PostType } from "../types";
Lee Soobeom's avatar
Lee Soobeom committed
6

Lee Soobeom's avatar
Lee Soobeom committed
7
export interface PostState {
Yoon, Daeki's avatar
Yoon, Daeki committed
8
  state: PostType;
Lee Soobeom's avatar
Lee Soobeom committed
9
10
11
}

export function IntoPost() {
Lee Soobeom's avatar
Lee Soobeom committed
12
  const [posts, setPosts] = useState<PostType>();
Lee Soobeom's avatar
Lee Soobeom committed
13
14
  const location = useLocation() as PostState;
  const post = location.state;
Lee Soobeom's avatar
Lee Soobeom committed
15
  const navigate = useNavigate();
Lee Soobeom's avatar
Lee Soobeom committed
16

Lee Soobeom's avatar
Lee Soobeom committed
17
18
19
20
21
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [addSuccess, setAddSuccess] = useState(false);
  const [delSuccess, setDelSuccess] = useState(false);

Lee Soobeom's avatar
Lee Soobeom committed
22
23
24
25
26
27
  // console.log("post.file", post.file);

  useEffect(() => {
    setPosts(post);
  }, []);

Lee Soobeom's avatar
Lee Soobeom committed
28
  const handleDeleteClick = async (event: MouseEvent<HTMLButtonElement>) => {
Lee Soobeom's avatar
Lee Soobeom committed
29
30
31
32
    try {
      if (confirm("삭제하시겠습니까?") == true) {
        const postId = event.currentTarget.id;
        const res = await postApi.deletePost(postId);
Lee Soobeom's avatar
Lee Soobeom committed
33
        navigate("/board");
Lee Soobeom's avatar
Lee Soobeom committed
34
35
36
37
38
39
40
41
        console.log("delete post", res);
      } else {
        return false;
      }
    } catch (error) {
      console.log("에러발생");
      catchErrors(error, setError);
    }
Lee Soobeom's avatar
Lee Soobeom committed
42
43
  };

Lee Soobeom's avatar
Lee Soobeom committed
44
  return (
Kim, MinGyu's avatar
Kim, MinGyu committed
45
46
47
    <div className="flex flex-col">
      <div className="flex h-8 gap-x-1 place-content-end place-items-center">
        <button
Lee Soobeom's avatar
Lee Soobeom committed
48
          id={posts?._id}
Kim, MinGyu's avatar
Kim, MinGyu committed
49
50
51
52
53
          onClick={handleDeleteClick}
          className=" whitespace-nowrap flex border-2 border-sky-100 place-self-center h-6 w-8 text-xs text-center transition delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-red-300 duration-300"
        >
          삭제
        </button>
Lee Soobeom's avatar
Lee Soobeom committed
54
        <Link to="/edit" state={posts}>
Kim, MinGyu's avatar
Kim, MinGyu committed
55
56
57
58
59
60
          <button className="whitespace-nowrap flex border-2 border-sky-100 place-self-center h-6 w-8 text-xs transition delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-sky-300 duration-300">
            수정
          </button>
        </Link>
      </div>
      <div className="flex h-10 border-t-2 border-sky-500 items-center font-semibold">
Lee Soobeom's avatar
Lee Soobeom committed
61
        {posts?.title}
Kim, MinGyu's avatar
Kim, MinGyu committed
62
63
64
65
      </div>

      <div className="flex h-10 items-center border-t-2 border-sky-200 md:flex-row justify-between bg-slate-50 text-sm">
        <div className="flex whitespace-nowrap pr-5 ">
Lee Soobeom's avatar
Lee Soobeom committed
66
          작성자: {posts?.user.name}
Lee Soobeom's avatar
Lee Soobeom committed
67
        </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
68
69
70

        <div className="flex divide-x divide-slate-300 ">
          <div className="flex basis-1/2 whitespace-nowrap px-2">
Lee Soobeom's avatar
Lee Soobeom committed
71
            작성일 : {posts?.date.slice(0, 10)}
Kim, MinGyu's avatar
Kim, MinGyu committed
72
          </div>
Lee Soobeom's avatar
Lee Soobeom committed
73
74
          <div className="flex whitespace-nowrap px-2"> {posts?.city}</div>
          <div className="flex whitespace-nowrap px-2"> {posts?.theme}</div>
Kim, MinGyu's avatar
Kim, MinGyu committed
75
          <div className="flex whitespace-nowrap px-2">
Lee Soobeom's avatar
Lee Soobeom committed
76
            조회수 : {posts?.counts}
Lee Soobeom's avatar
Lee Soobeom committed
77
78
          </div>
        </div>
Lee Soobeom's avatar
Lee Soobeom committed
79
      </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
80
81

      <div className="flex border-t-2 border-sky-200 h-44 p-2 overflow-auto mb-5 ">
Lee Soobeom's avatar
Lee Soobeom committed
82
        {posts?.file?.map((file, i) => (
Kim, MinGyu's avatar
Kim, MinGyu committed
83
84
85
86
87
88
89
90
          <img
            key={i}
            src={"http://localhost:3000/images/" + file.newfilename}
            width={200}
            height={200}
          />
        ))}
      </div>
Lee Soobeom's avatar
Lee Soobeom committed
91
      <div className="border-b-2 border-sky-500 h-44 mb-10">{posts?.text}</div>
Lee Soobeom's avatar
Lee Soobeom committed
92
93
94
    </div>
  );
}