intopost.tsx 2.27 KB
Newer Older
Lee Soobeom's avatar
Lee Soobeom committed
1
import React, { MouseEvent } 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 { postApi } from "../apis";
Yoon, Daeki's avatar
Yoon, Daeki committed
4
import { PostType } from "../types";
Lee Soobeom's avatar
Lee Soobeom committed
5

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

export function IntoPost() {
  const location = useLocation() as PostState;
  const post = location.state;
Lee Soobeom's avatar
Lee Soobeom committed
13
  const navigate = useNavigate();
Lee Soobeom's avatar
Lee Soobeom committed
14
15
  // console.log(post);

Lee Soobeom's avatar
Lee Soobeom committed
16
17
18
19
20
21
22
  const handleDeleteClick = async (event: MouseEvent<HTMLButtonElement>) => {
    const postId = event.currentTarget.id;
    const res = await postApi.deletePost(postId);
    navigate("/board", { replace: true });
    console.log("delete post", res);
  };

Lee Soobeom's avatar
Lee Soobeom committed
23
24
25
  return (
    <div>
      <div>
Lee Soobeom's avatar
Lee Soobeom committed
26
        <div>
Lee Soobeom's avatar
css    
Lee Soobeom committed
27
28
          <div className="flex flex-row basis-8 gap-x-1">
            <div className="border-2 border-sky-300 border-current rounded">
Lee Soobeom's avatar
Lee Soobeom committed
29
              <button id={post._id} onClick={handleDeleteClick}>
Lee Soobeom's avatar
Lee Soobeom committed
30
                삭제
Lee Soobeom's avatar
Lee Soobeom committed
31
32
              </button>
            </div>
Lee Soobeom's avatar
css    
Lee Soobeom committed
33
            <div className="border-2 border-sky-300 border-current rounded">
Lee Soobeom's avatar
Lee Soobeom committed
34
              <Link to="/edit" state={post}>
Lee Soobeom's avatar
Lee Soobeom committed
35
                <button>수정</button>
Lee Soobeom's avatar
Lee Soobeom committed
36
37
              </Link>
            </div>
Lee Soobeom's avatar
Lee Soobeom committed
38
          </div>
Lee Soobeom's avatar
css    
Lee Soobeom committed
39
40
          <div className="flex flex-row gap-x-1">
            <div className="flex basis-3/4 border-2 border-sky-300 rounded">
Lee Soobeom's avatar
Lee Soobeom committed
41
42
              제목: {post.title}
            </div>
Lee Soobeom's avatar
css    
Lee Soobeom committed
43
44
            <div className="flex basis-1/4 border-2 border-sky-300 rounded">
              작성자: {post.user}
Lee Soobeom's avatar
Lee Soobeom committed
45
            </div>
Lee Soobeom's avatar
Lee Soobeom committed
46
          </div>
Lee Soobeom's avatar
css    
Lee Soobeom committed
47
48
          <div className="flex flex-row gap-x-1">
            <div className="flex basis-1/4 border-2 border-sky-300 rounded">
Lee Soobeom's avatar
Lee Soobeom committed
49
50
              도시: {post.city}
            </div>
Lee Soobeom's avatar
css    
Lee Soobeom committed
51
            <div className="flex basis-1/4 border-2 border-sky-300 rounded">
Lee Soobeom's avatar
Lee Soobeom committed
52
53
              테마: {post.theme}
            </div>
Lee Soobeom's avatar
css    
Lee Soobeom committed
54
            <div className="flex basis-1/4 border-2 border-sky-300 rounded">
Lee Soobeom's avatar
Lee Soobeom committed
55
56
              작성일: {post.date}
            </div>
Lee Soobeom's avatar
css    
Lee Soobeom committed
57
            <div className="flex basis-1/4 border-2 border-sky-300 rounded">
Lee Soobeom's avatar
Lee Soobeom committed
58
59
              조회수: {post.counts}
            </div>
Lee Soobeom's avatar
Lee Soobeom committed
60
          </div>
Lee Soobeom's avatar
Lee Soobeom committed
61
        </div>
Lee Soobeom's avatar
Lee Soobeom committed
62
        <div className="border-2 border-sky-300 rounded h-48">files</div>
Lee Soobeom's avatar
css    
Lee Soobeom committed
63
        <div className="border-2 border-sky-300 rounded h-96">{post.text}</div>
Lee Soobeom's avatar
Lee Soobeom committed
64
65
66
67
      </div>
    </div>
  );
}