From d17da9170058f35b90cc5e7828716aec0867b687 Mon Sep 17 00:00:00 2001 From: Baek SeungMin Date: Mon, 25 Jul 2022 18:06:00 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95=201?= =?UTF-8?q?=EC=B0=A8=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.tsx | 2 +- frontend/src/auth/admin.tsx | 377 +++++++++++++------------- frontend/src/auth/imgrewrite.tsx | 13 +- frontend/src/board/board.tsx | 1 + frontend/src/home/body.tsx | 2 +- frontend/src/home/header.tsx | 2 +- frontend/src/home/theme.tsx | 2 +- frontend/src/pages/citylist.tsx | 20 +- frontend/src/types/index.tsx | 2 +- src/controllers/mainimg.controller.ts | 36 +-- src/db/mainimg.db.ts | 20 +- src/models/mainimg.model.ts | 2 +- src/routes/mainimg.route.ts | 8 +- 13 files changed, 252 insertions(+), 235 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c532f52..ab9e910 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -37,7 +37,7 @@ export const App = () => { } /> - } /> + } /> } /> } /> diff --git a/frontend/src/auth/admin.tsx b/frontend/src/auth/admin.tsx index ac5bed8..698e854 100644 --- a/frontend/src/auth/admin.tsx +++ b/frontend/src/auth/admin.tsx @@ -1,3 +1,4 @@ +import { get } from "mongoose"; import React, { FormEvent, useEffect, useState, MouseEvent } from "react"; import { Link } from "react-router-dom"; import { mainimgApi } from "../apis"; @@ -11,200 +12,214 @@ import { MySlide } from "./adminslide"; // } export default function Admin() { - // 이미지 전체 불러오기 - const [getimgs, setGetimgs] = useState([]); + // 이미지 전체 불러오기 + const [getimgs, setGetimgs] = useState([]); - async function imgsData() { - const imgs = await mainimgApi.getmainimg(); - setGetimgs(imgs); - } - useEffect(() => { - imgsData(); - }, []); + async function imgsData() { + const imgs = await mainimgApi.getmainimg(); + setGetimgs(imgs); + } + useEffect(() => { + imgsData(); + }, []); + // 이미지 추가하기 + const [addimg, setAddimg] = useState({ + _id: "", + theme: "", + city: "", + title: "", + fileInfo: { originalfilename: "", newfilename: "" }, + }); - // 이미지 추가하기 - const [addimg, setAddimg] = useState({ - _id: "", - theme: "", - city: "", - title: "", - pic: { originalfilename: "", newfilename: "" }, - }); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(""); - const [addSuccess, setAddSuccess] = useState(false); - const [delSuccess, setDelSuccess] = useState(false); - const [file, setFile] = useState(); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(""); + const [addSuccess, setAddSuccess] = useState(false); + const [delSuccess, setDelSuccess] = useState(false); + const [file, setFile] = useState(); - function handleSelectChange(event: React.ChangeEvent) { - const { name, value } = event.currentTarget; - console.log(value); - setAddimg({ ...addimg, [name]: value }); - } - function handleInputeChange(event: React.ChangeEvent) { - const { name, value } = event.currentTarget; - setAddimg({ ...addimg, [name]: value }); - } + function handleSelectChange(event: React.ChangeEvent) { + const { name, value } = event.currentTarget; + console.log(value); + setAddimg({ ...addimg, [name]: value }); + } + function handleInputeChange(event: React.ChangeEvent) { + const { name, value } = event.currentTarget; + setAddimg({ ...addimg, [name]: value }); + } - function handleFileChange(e: React.ChangeEvent) { - const file = e.target.files?.[0]; - if (!(file === undefined)) { - setFile(file); + function handleFileChange(e: React.ChangeEvent) { + const file = e.target.files?.[0]; + if (!(file === undefined)) { + setFile(file); + } } - } - async function handleSubmit(event: FormEvent) { - event.preventDefault(); - const formdata = new FormData(); - console.log(addimg); - formdata.append("city", addimg.city); - formdata.append("theme", addimg.theme); - formdata.append("title", addimg.title); - if (!(file === undefined)) { - formdata.append("mainimg", file); - console.log(formdata); - const res = await mainimgApi.mainimg(formdata); - console.log("확인 중 ", res); - alert("img 추가되었습니다"); + async function handleSubmit(event: FormEvent) { + event.preventDefault(); + const formdata = new FormData(); + console.log(addimg); + formdata.append("city", addimg.city); + formdata.append("theme", addimg.theme); + formdata.append("title", addimg.title); + try { + if (!(file === undefined)) { + formdata.append("mainimg", file); + console.log("fordata", formdata); + const res = await mainimgApi.mainimg(formdata); + console.log("확인 중 ", res); + alert("img 추가되었습니다"); + setGetimgs([...getimgs, res]) + } + else ( + console.log("file === undefined") + ) + } catch (error) { + console.log("에러발생"); + catchErrors(error, setError); + } finally { + setLoading(false); + } } - } - // 이미지 삭제하기 - async function handleDeleteClick(event: MouseEvent) { - try { - if (confirm("삭제하시겠습니까?") == true) { - const picId = event.currentTarget.id; - console.log("picId : ", picId); - const res = await mainimgApi.delmainimg(picId); - console.log("delete img", res); - // setGetimgs(getimgs) - setDelSuccess(true); - setError(""); - alert("img 삭제되었습니다"); - } else { - return false; - } - } catch (error) { - console.log("에러발생"); - catchErrors(error, setError); - } finally { - setLoading(false); + + // 이미지 삭제하기 + async function handleDeleteClick(event: MouseEvent) { + try { + if (confirm("삭제하시겠습니까?") == true) { + const picId = event.currentTarget.id; + console.log("picId : ", picId); + const res = await mainimgApi.delmainimg(picId); + console.log("delete img", res); + // setGetimgs(getimgs) + setDelSuccess(true); + setError(""); + alert("img 삭제되었습니다"); + const deleteimg = getimgs.filter(pic=>picId!==pic._id) + setGetimgs(deleteimg) + } else { + return false; + } + } catch (error) { + console.log("에러발생"); + catchErrors(error, setError); + } finally { + setLoading(false); + } } - } - let limit = 15; - const numPages = Math.ceil(getimgs.length / 15); + let limit = 15; + const numPages = Math.ceil(getimgs.length / 15); - // const location = useLocation() as ImgState; - // const img = location.state; + // const location = useLocation() as ImgState; + // const img = location.state; - const slides = []; - for (let i = 0; i < numPages; i++) { - const k = [ - getimgs - .slice(i * limit, i * limit + limit) - .map((picture, index: number) => ( -
-
- -

{picture.title}

-
-
- - -
-
- )), - ]; - slides.push(k); - } + const slides = []; + for (let i = 0; i < numPages; i++) { + const k = [ + getimgs + .slice(i * limit, i * limit + limit) + .map((picture, index: number) => ( +
+
+ +

{picture.title}

+
+
+ + +
+
+ )), + ]; + slides.push(k); + } - return ( -
-
-
-
- - -
- - -
-
-

title :

- + return ( +
+ +
+
+ + +
+ + +
+
+

title :

+ +
+
+
+ +
+
+ +
+
-
-
- -
- -
- -
-
- ); + ); } diff --git a/frontend/src/auth/imgrewrite.tsx b/frontend/src/auth/imgrewrite.tsx index 8e48b94..4038333 100644 --- a/frontend/src/auth/imgrewrite.tsx +++ b/frontend/src/auth/imgrewrite.tsx @@ -1,4 +1,4 @@ -import React, { FormEvent, useState } from "react"; +import React, { FormEvent, useState, useEffect } from "react"; import { Link, Outlet, useNavigate, useLocation } from "react-router-dom"; import { mainimgApi } from "../apis"; import isLength from "validator/lib/isLength"; @@ -27,9 +27,11 @@ export default function ImgRewrite() { theme: img.theme, city: img.city, title: img.title, - pic: { originalfilename: "", newfilename: "" }, + fileInfo: { originalfilename: "", newfilename: "" }, }); - + useEffect(() => { + console.log("수정 전 : ",imgdata); + }, []); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); @@ -86,7 +88,6 @@ export default function ImgRewrite() { console.log("확인 중 ", res); } else { - console.log("ㅇ에러") formdata.append("updatemainimg",""); console.log("formdata",formdata); const res = await mainimgApi.updateimg(formdata,imgdata._id); @@ -109,7 +110,7 @@ export default function ImgRewrite() { if (!isLength(pic.title ?? "", { min: 1 })) { setError("제목을 입력해 주세요."); return false; - } else if (!isLength(pic.pic.newfilename ?? "", { min: 1 })) { + } else if (!isLength(pic.fileInfo.newfilename ?? "", { min: 1 })) { setError("파일을 선택해 주세요."); return false; } else if (equals(pic.city, "city")) { @@ -232,7 +233,7 @@ export default function ImgRewrite() { /> ) : ( )} diff --git a/frontend/src/board/board.tsx b/frontend/src/board/board.tsx index 8c4f7a7..e73643e 100644 --- a/frontend/src/board/board.tsx +++ b/frontend/src/board/board.tsx @@ -14,6 +14,7 @@ export default function BoardPage() { useEffect(() => { getDataList(); }, []); + // posts const getDataList = async () => { const res = await postApi.getData(); diff --git a/frontend/src/home/body.tsx b/frontend/src/home/body.tsx index 2437e37..505ca19 100644 --- a/frontend/src/home/body.tsx +++ b/frontend/src/home/body.tsx @@ -67,7 +67,7 @@ export default function Body() { className={`m-1 shrink-0 rounded shadow-md h-45 relative overflow-hidden`} key={index}>
diff --git a/frontend/src/home/header.tsx b/frontend/src/home/header.tsx index d4248b6..fd5b7a3 100644 --- a/frontend/src/home/header.tsx +++ b/frontend/src/home/header.tsx @@ -15,7 +15,7 @@ export default function Header() { return (
-
+