From e7e56fda432338222fa2cfa13eb1607c0af7dc67 Mon Sep 17 00:00:00 2001 From: Lee Soobeom Date: Fri, 8 Jul 2022 16:01:53 +0900 Subject: [PATCH] =?UTF-8?q?posting=EC=97=90=EC=84=9C=20axios.post=EB=A5=BC?= =?UTF-8?q?=20=EC=82=AC=EC=9A=A9=ED=95=B4=20db=EC=97=90=20=EC=A0=80?= =?UTF-8?q?=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/index.ts | 1 + frontend/src/apis/post.api.ts | 8 ++ frontend/src/board/board.tsx | 17 ++- frontend/src/post/posting.tsx | 221 ++++++++++++++++++----------- frontend/src/types/index.tsx | 18 ++- src/controllers/post.controller.ts | 64 +++------ src/db/index.ts | 2 +- src/db/post.db.ts | 47 ------ src/routes/index.ts | 4 +- src/routes/post.route.ts | 2 +- 10 files changed, 193 insertions(+), 191 deletions(-) create mode 100644 frontend/src/apis/post.api.ts delete mode 100644 src/db/post.db.ts diff --git a/frontend/src/apis/index.ts b/frontend/src/apis/index.ts index 7d06e7b..1c5e9ed 100644 --- a/frontend/src/apis/index.ts +++ b/frontend/src/apis/index.ts @@ -1,3 +1,4 @@ import axios from "axios"; export * as authApi from "./auth.api"; +export * as postApi from "./post.api"; diff --git a/frontend/src/apis/post.api.ts b/frontend/src/apis/post.api.ts new file mode 100644 index 0000000..9669e26 --- /dev/null +++ b/frontend/src/apis/post.api.ts @@ -0,0 +1,8 @@ +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; +}; diff --git a/frontend/src/board/board.tsx b/frontend/src/board/board.tsx index 0168571..6c666eb 100644 --- a/frontend/src/board/board.tsx +++ b/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", }, ]; diff --git a/frontend/src/post/posting.tsx b/frontend/src/post/posting.tsx index 888c514..9222ed7 100644 --- a/frontend/src/post/posting.tsx +++ b/frontend/src/post/posting.tsx @@ -1,101 +1,146 @@ -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("질문종류"); +export default function Posting() { + const [city, setCity] = useState("질문종류"); + const [theme, setTheme] = useState("질문종류"); + const [title, setTitle] = useState(""); + const [text, setText] = useState(""); - function TitleChange(e: { target: { value: React.SetStateAction } }) { - setTitle(e.target.value); - } -} + const [user, setUser] = useState({ + title: "", + text: "", + theme: "", + city: "", + username: "", + }); -function Body() { - const [body, setBody] = useState("질문종류"); + 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 } }) { - 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("질문종류"); - function CityChange(e: { target: { value: React.SetStateAction } }) { - 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; + } } - return ( - - ); -} -function SelectTheme() { - const [selectTheme, setSelectTheme] = useState("질문종류"); + const titleChange = (event: React.ChangeEvent) => { + const title = event.currentTarget.value; + const newUser = { ...user, title: title }; + console.log(event.currentTarget.value); + setTitle(event.currentTarget.value); + setUser(newUser); + }; - function ThemeChange(e: { target: { value: React.SetStateAction } }) { - setSelectTheme(e.target.value); - } - return ( - - ); -} -// 눌렀다는 데이터가 어딘가에 있어야 한다. Map 객체를 이용해서 기타등등 + const textChange = (event: React.ChangeEvent) => { + const text = event.currentTarget.value; + const newUser = { ...user, text: text }; + console.log(event.currentTarget.value); + setText(event.currentTarget.value); + setUser(newUser); + }; -// function postup() { -// axios.post("localhost:3000/api/post/up", { -// id: "a", -// title: title, -// body: body, -// date: `${() => new Date()}`, -// theme: selectTheme, -// city: selectCity, -// }); -// } + const cityChange = (event: React.ChangeEvent) => { + 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) => { + const theme = event.currentTarget.value; + const newUser = { ...user, theme: theme }; + console.log(event.currentTarget.value); + setTheme(event.currentTarget.value); + setUser(newUser); + }; -export default function Posting() { return (
-
+

Id

empty

- - + +
-
- +
+
diff --git a/frontend/src/types/index.tsx b/frontend/src/types/index.tsx index 49f5d3a..6bf411e 100644 --- a/frontend/src/types/index.tsx +++ b/frontend/src/types/index.tsx @@ -1,11 +1,15 @@ -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 { diff --git a/src/controllers/post.controller.ts b/src/controllers/post.controller.ts index c09dc77..be542cd 100644 --- a/src/controllers/post.controller.ts +++ b/src/controllers/post.controller.ts @@ -1,54 +1,32 @@ 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; - - // 1) title 빈 문자열인지 확인 - const titleString = postDb.checkTitleNull(title, ); - if (!titleString) { - return res.status(422).send(`${title} 제목을 입력해 주세요`); - } - - // 2) body 빈 문자열인지 확인 - const bodyString = postDb.checkBodyNull(body, ); - if (!bodyString) { - return res.status(422).send(`${body} 여행 후기를 입력해 주세요`); - } + const { title, text, date, theme, city } = req.body; - // 3) submit 이벤트 발생시 date값 입력 - const dateGet = postDb.getSubmitDate(date, ); + console.log("body", req.body); + // 1) title 빈 문자열인지 확인 + if (!isLength(title ?? "", { min: 1 })) { + return res.status(422).send("제목을 한 글자 이상 입력해주세요"); + } - // 4) theme dropdown default-value일 경우 에러 - const themeSelect = postDb.selectTheme(theme, ); - if (!themeSelect) { - return res.status(422).send(`${theme} 테마를 선택해 주세요`) - } + // 2) body 빈 문자열인지 확인 + if (!isLength(text ?? "", { min: 1 })) { + return res.status(422).send("제목을 한 글자 이상 입력해주세요"); + } - // 5) cuty dropdown default-value일 경우 에러 - const citySelect = postDb.selectCity(city, ); - if (!citySelect) { - return res.status(422).send(`${city} 도시를 선택해 주세요`) - } - // 6) 토큰 생성 - const token = jwt.sign({ }, jwtCofig.secret, { - expiresIn: jwtCofig.expires, - }); + // 3) submit 이벤트 발생시 date값 입력 - // 7) 쿠키에 토큰 저장 - res.cookie(cookieConfig.name, token, { - maxAge: cookieConfig.maxAge, - path: "/", - httpOnly: envConfig.mode === "production", - secure: envConfig.mode === "production", - }); + // 4) theme dropdown default-value "테마"일 경우 에러 + if (equals(theme, "질문종류")) { + return res.status(422).send("테마를 입력해 주세요"); + } - // 8) 사용자 반환 - res.json({}); + // 5) city dropdown default-value "도시"일 경우 에러 + if (equals(city, "질문종류")) { + return res.status(422).send("도시를 선택해 주세요"); + } }); diff --git a/src/db/index.ts b/src/db/index.ts index 64daf8d..35d3ddc 100644 --- a/src/db/index.ts +++ b/src/db/index.ts @@ -1,2 +1,2 @@ export * as userDb from "./user.db"; -export * as postDb from "./post.db"; +// export * as postDb from "./post.db"; diff --git a/src/db/post.db.ts b/src/db/post.db.ts deleted file mode 100644 index 86dd9f4..0000000 --- a/src/db/post.db.ts +++ /dev/null @@ -1,47 +0,0 @@ -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 != "도시" ) { - - } -} - diff --git a/src/routes/index.ts b/src/routes/index.ts index cf0635c..cc45f51 100644 --- a/src/routes/index.ts +++ b/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; diff --git a/src/routes/post.route.ts b/src/routes/post.route.ts index 2d056b8..93e191e 100644 --- a/src/routes/post.route.ts +++ b/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; -- GitLab