posting에서 axios.post를 사용해 db에 저장

frontend/src/apis/index.ts

 import axios from "axios";
 
 export * as authApi from "./auth.api";
+export * as postApi from "./post.api";

frontend/src/apis/post.api.ts

+import axios from "axios";
+import baseUrl from "./baseUrl";
+import { PostingType } from "../types";
+
+export const posting = async (post: PostingType) => {
+  const { data } = await axios.post(`${baseUrl}/posts/`, post);
+  return data;
+};

frontend/src/board/board.tsx

@@ -14,6 +14,7 @@ interface Posts {
 export const fakes = [
   {
     id: "a",
+    username: "lsb",
     title: "여행가고싶다...",
     date: "2022-06-30",
     counts: 0,
@@ -22,6 +23,7 @@ export const fakes = [
   },
   {
     id: "b",
+    username: "lsb",
     title: "바다!바다!바다!",
     date: "2022-08-01",
     counts: 0,
@@ -30,6 +32,7 @@ export const fakes = [
   },
   {
     id: "c",
+    username: "lsb",
     title: "Jeju-island",
     date: "2022-9-10",
     counts: 0,
@@ -38,6 +41,7 @@ export const fakes = [
   },
   {
     id: "d",
+    username: "lsb",
     title: "마! 부싼 가봤나!",
     date: "2022-9-22",
     counts: 0,
@@ -46,26 +50,29 @@ export const fakes = [
   },
   {
     id: "e",
+    username: "lsb",
     title: "Daegu",
     date: "2022-10-1",
     counts: 0,
-    theme: "surfing",
-    city: "seoul",
+    theme: "ski",
+    city: "Daegu",
   },
   {
     id: "f",
+    username: "lsb",
     title: "강원도 감자는 맛있다.",
     date: "2022-12-12",
     counts: 0,
-    theme: "surfing",
-    city: "seoul",
+    theme: "camping",
+    city: "강원도",
   },
   {
     id: "g",
+    username: "lsb",
     title: "부산남자의 서울여행",
     date: "2022-12-25",
     counts: 0,
-    theme: "surfing",
+    theme: "activity",
     city: "seoul",
   },
 ];

frontend/src/post/posting.tsx

-import React, { useState } from "react";
+import React, { FormEvent, useState } from "react";
+import isLength from "validator/lib/isLength";
+import equals from "validator/lib/equals";
+import { catchErrors } from "../helpers";
+import { PostingType } from "../types";
+import { postApi } from "../apis";
 
-function Title() {
-  const [title, setTitle] = useState<string>("질문종류");
+export default function Posting() {
+  const [city, setCity] = useState<string>("질문종류");
+  const [theme, setTheme] = useState<string>("질문종류");
+  const [title, setTitle] = useState<string>("");
+  const [text, setText] = useState<string>("");
 
-  function TitleChange(e: { target: { value: React.SetStateAction<string> } }) {
-    setTitle(e.target.value);
-  }
-}
+  const [user, setUser] = useState<PostingType>({
+    title: "",
+    text: "",
+    theme: "",
+    city: "",
+    username: "",
+  });
 
-function Body() {
-  const [body, setBody] = useState<string>("질문종류");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [disabled, setDisabled] = useState(false);
+  const [success, setSuccess] = useState(false);
 
-  function BodyChange(e: { target: { value: React.SetStateAction<string> } }) {
-    setBody(e.target.value);
+  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);
+        console.log("서버연결됬나요", res);
+        console.log("user save");
+        setSuccess(true);
+        setError("");
+      }
+    } catch (error) {
+      console.log("에러발생");
+      catchErrors(error, setError);
+    } finally {
+      setLoading(false);
+    }
   }
-}
-
-function SelectCity() {
-  const [selectCity, setSelectCity] = useState<string>("질문종류");
 
-  function CityChange(e: { target: { value: React.SetStateAction<string> } }) {
-    setSelectCity(e.target.value);
+  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;
     }
+  }
+
+  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);
+  };
+
+  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);
+  };
+
+  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);
+  };
+
   return (
+    <div className="flex flex-col border-3">
+      <form onSubmit={handlePostSubmit} className="w-full items-center">
+        <div className="flex flex-row relative">
+          <p className="basis-1/12 gap-x-8">Id</p>
+          <p className="basis-8/12 invisible">empty</p>
           <select
+            name="city"
             id="Questions"
             className="border border-3 border-black w-1/12"
-      onChange={CityChange}
+            onChange={cityChange}
             defaultValue="질문종류"
           >
             <option value="질문종류">도시</option>
@@ -41,20 +120,11 @@ function SelectCity() {
             <option value="Dokdo">독도</option>
             <option value="Jeju">제주</option>
           </select>
-  );
-}
-
-function SelectTheme() {
-  const [selectTheme, setSelectTheme] = useState<string>("질문종류");
-
-  function ThemeChange(e: { target: { value: React.SetStateAction<string> } }) {
-    setSelectTheme(e.target.value);
-  }
-  return (
           <select
+            name="theme"
             id="Questions"
             className="border border-3 border-black w-1/12"
-      onChange={ThemeChange}
+            onChange={themeChange}
             defaultValue="질문종류"
           >
             <option value="질문종류">테마</option>
@@ -70,32 +140,7 @@ function SelectTheme() {
             <option value="history">문화재</option>
             <option value="zoo">동물원</option>
             <option value="cycling">사이클링</option>
-      <option value="cycling">{selectTheme}</option>
           </select>
-  );
-}
-// 눌렀다는 데이터가 어딘가에 있어야 한다. Map 객체를 이용해서 기타등등
-
-// function postup() {
-//   axios.post("localhost:3000/api/post/up", {
-//     id: "a",
-//     title: title,
-//     body: body,
-//     date: `${() => new Date()}`,
-//     theme: selectTheme,
-//     city: selectCity,
-//   });
-// }
-
-export default function Posting() {
-  return (
-    <div className="flex flex-col border-3">
-      <form className="w-full items-center">
-        <div className="flex flex-row relative">
-          <p className="basis-1/12 gap-x-8">Id</p>
-          <p className="basis-8/12 invisible">empty</p>
-          <SelectCity />
-          <SelectTheme />
 
           <button
             type="submit"
@@ -107,13 +152,19 @@ export default function Posting() {
 
         <div className="flex border-4">
           <textarea
-            onChange={Title}
+            name="title"
+            onChange={titleChange}
             placeholder="title"
             className="w-full h-8"
           ></textarea>
         </div>
-        <div onChange={Body} className="flex border-2">
-          <textarea placeholder="body" className="w-full h-96"></textarea>
+        <div className="flex border-2">
+          <textarea
+            onChange={textChange}
+            name="text"
+            placeholder="text"
+            className="w-full h-96"
+          ></textarea>
         </div>
       </form>
     </div>

frontend/src/types/index.tsx

-export interface PostType {
-  id: string;
-  title: string;
-  body?: string;
-  date: string;
+export interface PostType extends PostingType {
+  date?: string;
   counts: number;
-  theme?: string;
-  city?: string;
+  id?: string;
+}
+
+export interface PostingType {
+  title: string;
+  text?: string;
+  theme: string;
+  city: string;
+  username: string;
 }
 
 export interface SignupUser {

src/controllers/post.controller.ts

 import { NextFunction, Request, Response } from "express";
+import isLength from "validator/lib/isLength";
+import equals from "validator/lib/equals";
 import { asyncWrap } from "../helpers";
-import jwt, { JwtPayload } from "jsonwebtoken";
-import { jwtCofig, envConfig, cookieConfig } from "../config";
-import { postDb } from "../db";
-
-
 
 export const posting = asyncWrap(async (req, res) => {
-    const { title, body, date, theme, city } = req.body;
+  const { title, text, date, theme, city } = req.body;
+
+  console.log("body", req.body);
 
   // 1) title 빈 문자열인지 확인
-    const titleString = postDb.checkTitleNull(title, );
-    if (!titleString) {
-        return res.status(422).send(`${title} 제목을 입력해 주세요`);
+  if (!isLength(title ?? "", { min: 1 })) {
+    return res.status(422).send("제목을 한 글자 이상 입력해주세요");
   }
 
   // 2) body 빈 문자열인지 확인
-    const bodyString = postDb.checkBodyNull(body, );
-    if (!bodyString) {
-        return res.status(422).send(`${body} 여행 후기를 입력해 주세요`);
+  if (!isLength(text ?? "", { min: 1 })) {
+    return res.status(422).send("제목을 한 글자 이상 입력해주세요");
   }
 
   // 3) submit 이벤트 발생시 date값 입력
-    const dateGet = postDb.getSubmitDate(date, );
 
-
-    // 4) theme dropdown default-value일 경우 에러
-    const themeSelect = postDb.selectTheme(theme, );
-    if (!themeSelect) {
-        return res.status(422).send(`${theme} 테마를 선택해 주세요`)
+  // 4) theme dropdown default-value "테마"일 경우 에러
+  if (equals(theme, "질문종류")) {
+    return res.status(422).send("테마를 입력해 주세요");
   }
 
-    // 5) cuty dropdown default-value일 경우 에러
-    const citySelect = postDb.selectCity(city, );
-    if (!citySelect) {
-        return res.status(422).send(`${city} 도시를 선택해 주세요`)
+  // 5) city dropdown default-value "도시"일 경우 에러
+  if (equals(city, "질문종류")) {
+    return res.status(422).send("도시를 선택해 주세요");
   }
-    // 6) 토큰 생성
-    const token = jwt.sign({  }, jwtCofig.secret, {
-        expiresIn: jwtCofig.expires,
-      });
-
-    // 7) 쿠키에 토큰 저장
-    res.cookie(cookieConfig.name, token, {
-        maxAge: cookieConfig.maxAge,
-        path: "/",
-        httpOnly: envConfig.mode === "production",
-        secure: envConfig.mode === "production",
-      });
-
-    // 8) 사용자 반환
-    res.json({});
 });

src/db/index.ts

 export * as userDb from "./user.db";
-export * as postDb from "./post.db";
+// export * as postDb from "./post.db";

src/db/post.db.ts

-import { PostType, Post } from "../models";
-
-export const createPost = async (post: PostType) => {
-    const newPost = await Post.create(post);
-    return newPost;
-};
-
-
-export const checkTitleNull = async (
-    title : string,
-
-) => {
-
-}
-
-export const checkBodyNull = async (
-    body : string,
-
-) => {
-
-}
-
-export const getSubmitDate = async (
-    date : string,
-
-) => {
-
-}
-
-export const selectTheme = async (
-    theme : string,
-)  => {
-    let user;
-    if( theme != "테마" ) {
-        
-    }
-}
-
-export const selectCity = async (
-    city : string,
-) => {
-    let user;
-    if ( city != "도시" ) {
-        
-    }
-}
-  

src/routes/index.ts

@@ -7,7 +7,7 @@ const router = express.Router();
 
 router.use("/users", userRouter);
 router.use("/auth", authRouter);
-router.use("/posts", postRouter); //router.route
-
+router.use("/posts", postRouter);
+//posting함수 -> mongodb에 posts json형식으로 저장
 
 export default router;

src/routes/post.route.ts

@@ -3,6 +3,6 @@ import { postCtrl } from "../controllers";
 
 const router = express.Router();
 
-router.route("/posting").post(postCtrl.posting);
+router.route("/").post(postCtrl.posting);
 
 export default router;