diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c532f525db9181cc031eb2486ef94dc1c564ddb7..ab9e9102f91df356b048c3cca85f096a54244c69 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 ac5bed8bd3b8dd94fecc9c507a8af01dd53dfee5..698e854bb643939719f4f0b61706a3ad9244172f 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 8e48b947a4a979c40b520f513d30c78ee55434b4..40383333ef8c38da7134f1296159c47c66246173 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 0c7a640ed9951fdf271712e47e9b5b13bc87915a..2f1c7865c5b3bb0321e2e4f787ef6440809da97f 100644 --- a/frontend/src/board/board.tsx +++ b/frontend/src/board/board.tsx @@ -13,7 +13,8 @@ export default function BoardPage() { useEffect(() => { getDataList(); - }, [posts]); + }, []); + // posts const getDataList = async () => { const res = await postApi.getData(); diff --git a/frontend/src/home/body.tsx b/frontend/src/home/body.tsx index 0fad581a97ffd4e92530f7f3d73b226007b02526..a3be100083d390a158592ba35bf0ad4a5a2ef1f9 100644 --- a/frontend/src/home/body.tsx +++ b/frontend/src/home/body.tsx @@ -69,7 +69,9 @@ export default function Body() { key={index} >
diff --git a/frontend/src/home/theme.tsx b/frontend/src/home/theme.tsx index 77d993a6cb6098a7ae395124d7f9c333b129ee8c..1b70b00b1422d5577092b8ca3bbfab542c8638d3 100644 --- a/frontend/src/home/theme.tsx +++ b/frontend/src/home/theme.tsx @@ -29,7 +29,7 @@ export default function Theme({ handleClick }: ThemeProps) { 캠핑