posting.tsx 5.78 KB
Newer Older
1
import React, { FormEvent, useState } from "react";
Lee Soobeom's avatar
Lee Soobeom committed
2
import { useNavigate } from "react-router-dom";
3
4
5
import isLength from "validator/lib/isLength";
import equals from "validator/lib/equals";
import { catchErrors } from "../helpers";
Lee Soobeom's avatar
Lee Soobeom committed
6
import { PostType } from "../types";
7
import { postApi } from "../apis";
Kim, MinGyu's avatar
Kim, MinGyu committed
8

9
10
11
12
13
export default function Posting() {
  const [city, setCity] = useState<string>("질문종류");
  const [theme, setTheme] = useState<string>("질문종류");
  const [title, setTitle] = useState<string>("");
  const [text, setText] = useState<string>("");
Lee Soobeom's avatar
Lee Soobeom committed
14
  const navigate = useNavigate();
Kim, MinGyu's avatar
Kim, MinGyu committed
15

Lee Soobeom's avatar
Lee Soobeom committed
16
  const [user, setUser] = useState<PostType>({
17
18
19
20
    title: "",
    text: "",
    theme: "",
    city: "",
Lee Soobeom's avatar
Lee Soobeom committed
21
22
    date: "",
    user: "",
Lee Soobeom's avatar
Lee Soobeom committed
23
    counts: 0,
Lee Soobeom's avatar
Lee Soobeom committed
24
    _id: "",
25
  });
Kim, MinGyu's avatar
Kim, MinGyu committed
26

27
28
29
30
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [disabled, setDisabled] = useState(false);
  const [success, setSuccess] = useState(false);
Kim, MinGyu's avatar
Kim, MinGyu committed
31

32
33
34
35
36
37
38
39
  async function handlePostSubmit(event: FormEvent) {
    event.preventDefault(); // prevent onSubmit -> rerendering
    try {
      setError("");
      console.log("user data", user);
      if (postingFormMatch()) {
        setLoading(true);
        const res = await postApi.posting(user);
Lee Soobeom's avatar
Lee Soobeom committed
40
41
42
        // console.log("서버연결됬나요", res);
        // console.log("user save");
        navigate("/board", { replace: true });
43
44
45
46
47
48
49
50
51
        setSuccess(true);
        setError("");
      }
    } catch (error) {
      console.log("에러발생");
      catchErrors(error, setError);
    } finally {
      setLoading(false);
    }
Kim, MinGyu's avatar
Kim, MinGyu committed
52
53
  }

54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
  function postingFormMatch() {
    if (!isLength(user.title ?? "", { min: 1 })) {
      setError("제목을 입력해 주세요.");
      return false;
    } else if (!isLength(user.text ?? "", { min: 1 })) {
      setError("내용을 입력해 주세요.");
      return false;
    } else if (equals(city, "질문종류")) {
      setError("테마를 선택해 주세요.");
      return false;
    } else if (equals(theme, "질문종류")) {
      setError("도시를 선택해 주세요.");
      return false;
    } else {
      return true;
    }
Kim, MinGyu's avatar
Kim, MinGyu committed
70
71
  }

72
73
74
75
76
77
78
  const titleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    const title = event.currentTarget.value;
    const newUser = { ...user, title: title };
    console.log(event.currentTarget.value);
    setTitle(event.currentTarget.value);
    setUser(newUser);
  };
Kim, MinGyu's avatar
Kim, MinGyu committed
79

80
81
82
83
84
85
86
  const textChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    const text = event.currentTarget.value;
    const newUser = { ...user, text: text };
    console.log(event.currentTarget.value);
    setText(event.currentTarget.value);
    setUser(newUser);
  };
Kim, MinGyu's avatar
Kim, MinGyu committed
87

88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
  const cityChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const city = event.currentTarget.value;
    const newUser = { ...user, city: city };
    console.log(event.currentTarget.value);
    setCity(event.currentTarget.value);
    setUser(newUser);
  };

  const themeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const theme = event.currentTarget.value;
    const newUser = { ...user, theme: theme };
    console.log(event.currentTarget.value);
    setTheme(event.currentTarget.value);
    setUser(newUser);
  };
Lee Soobeom's avatar
Lee Soobeom committed
103

Kim, MinGyu's avatar
Kim, MinGyu committed
104
105
  return (
    <div className="flex flex-col border-3">
106
      <form onSubmit={handlePostSubmit} className="w-full items-center">
Kim, MinGyu's avatar
Kim, MinGyu committed
107
108
109
        <div className="flex flex-row relative">
          <p className="basis-1/12 gap-x-8">Id</p>
          <p className="basis-8/12 invisible">empty</p>
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
          <select
            name="city"
            id="Questions"
            className="border border-3 border-black w-1/12"
            onChange={cityChange}
            defaultValue="질문종류"
          >
            <option value="질문종류">도시</option>
            <option value="Seoul">서울</option>
            <option value="Busan">부산</option>
            <option value="Incheon">인천</option>
            <option value="Daegoo">대구</option>
            <option value="Kwangjoo">광주</option>
            <option value="Daejeon">대전</option>
            <option value="Woolsan">울산</option>
            <option value="Sejong">세종</option>
            <option value="Dokdo">독도</option>
            <option value="Jeju">제주</option>
          </select>
          <select
            name="theme"
            id="Questions"
            className="border border-3 border-black w-1/12"
            onChange={themeChange}
            defaultValue="질문종류"
          >
            <option value="질문종류">테마</option>
            <option value="cycling">사이클링</option>
            <option value="surfing">서핑</option>
            <option value="activity">액티비티</option>
            <option value="camping">캠핑</option>
            <option value="sking">스키</option>
            <option value="boat">보트</option>
            <option value="desert">사막</option>
            <option value="golf">골프</option>
            <option value="cave">동굴</option>
            <option value="history">문화재</option>
            <option value="zoo">동물원</option>
            <option value="cycling">사이클링</option>
          </select>
Kim, MinGyu's avatar
Kim, MinGyu committed
150
151
152
153
154
155
156
157
158
159
160

          <button
            type="submit"
            className="border border-black basis-1/12 gap-x-8"
          >
            글쓰기
          </button>
        </div>

        <div className="flex border-4">
          <textarea
161
162
            name="title"
            onChange={titleChange}
Kim, MinGyu's avatar
Kim, MinGyu committed
163
164
165
166
            placeholder="title"
            className="w-full h-8"
          ></textarea>
        </div>
167
168
169
170
171
172
173
        <div className="flex border-2">
          <textarea
            onChange={textChange}
            name="text"
            placeholder="text"
            className="w-full h-96"
          ></textarea>
Lee Soobeom's avatar
Lee Soobeom committed
174
        </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
175
176
177
178
      </form>
    </div>
  );
}