Commit e7e8eef0 authored by 백승민's avatar 백승민
Browse files

delete working

parent 316b6e6d
...@@ -7,13 +7,12 @@ export const mainimg = async (mainimg: MainimgType) => { ...@@ -7,13 +7,12 @@ export const mainimg = async (mainimg: MainimgType) => {
return data; return data;
}; };
export const delmainimg = async (id : string) => { export const delmainimg = async (_id : string) => {
const { data } = await axios.delete(`${baseUrl}/mainimg`); const { data } = await axios.delete(`${baseUrl}/mainimg`);
return data; return data;
}; };
export const getmainimg = async () => { export const getmainimg = async () => {
const { data } = await axios.get(`${baseUrl}/mainimg`); const { data } = await axios.get(`${baseUrl}/mainimg`);
console.log("test",data)
return data; return data;
}; };
import React, { FormEvent, useEffect, useState } from "react"; import React, { FormEvent, useEffect, useState, MouseEvent } from "react";
import { mainimgApi } from "../apis"; import { mainimgApi } from "../apis";
import { catchErrors } from "../helpers"; import { catchErrors } from "../helpers";
import { MainimgType } from "../types"; import { MainimgType } from "../types";
import {MySlide} from "./adminslide"; import { MySlide } from "./adminslide";
export default function Admin() { export default function Admin() {
...@@ -19,6 +19,7 @@ export default function Admin() { ...@@ -19,6 +19,7 @@ export default function Admin() {
}, []); }, []);
const [addimg, setAddimg] = useState<MainimgType>({ const [addimg, setAddimg] = useState<MainimgType>({
_id: "",
theme: "", theme: "",
city: "", city: "",
url: "", url: "",
...@@ -48,6 +49,7 @@ export default function Admin() { ...@@ -48,6 +49,7 @@ export default function Admin() {
console.log("서버연결됬나요", res); console.log("서버연결됬나요", res);
setSuccess(true); setSuccess(true);
setError(""); setError("");
alert("img 추가되었습니다");
} catch (error) { } catch (error) {
console.log("에러발생"); console.log("에러발생");
catchErrors(error, setError); catchErrors(error, setError);
...@@ -56,9 +58,17 @@ export default function Admin() { ...@@ -56,9 +58,17 @@ export default function Admin() {
} }
} }
if (success) { // if (success) {
alert("img 추가되었습니다"); // alert("img 추가되었습니다");
} // }
async function handleDeleteClick(event: MouseEvent<HTMLButtonElement>) {
const picId = event.currentTarget.id;
console.log(picId)
const res = await mainimgApi.delmainimg(picId);
console.log("delete img", res);
alert("img 삭제되었습니다.")
};
let limit = 15; let limit = 15;
const numPages = Math.ceil(getimgs.length / 15); const numPages = Math.ceil(getimgs.length / 15);
...@@ -67,15 +77,18 @@ export default function Admin() { ...@@ -67,15 +77,18 @@ export default function Admin() {
for (let i = 0; i < numPages; i++) { for (let i = 0; i < numPages; i++) {
const k = [ const k = [
getimgs.slice(i * limit, i * limit + limit).map((pic, index: number) => ( getimgs.slice(i * limit, i * limit + limit).map((pic, index: number) => (
<div <div key={index}>
className={`m-1 shrink-0 bg-gray-200 rounded shadow-md `} <div className={`m-1 shrink-0 bg-gray-200 rounded shadow-md `}>
key={index}>
<img <img
src={pic.url} src={pic.url}
className="w-full h-10 md:h-20 object-center" className="w-full h-10 md:h-20 object-center"
/> />
<p className="text-center text-xs">{pic.title}</p> <p className="text-center text-xs">{pic.title}</p>
</div> </div>
<button id={pic._id} onClick={handleDeleteClick}>
삭제
</button>
</div>
))] ))]
slides.push(k); slides.push(k);
} }
...@@ -84,7 +97,8 @@ export default function Admin() { ...@@ -84,7 +97,8 @@ export default function Admin() {
<div> <div>
<form <form
onSubmit={handleSubmit}> onSubmit={handleSubmit}>
<div className="flex justify-center gap-3"> <div className="flex flex-wrap justify-center gap-3">
<div className="gap-3 md:flex ">
<select <select
name="city" name="city"
id="Questions" id="Questions"
...@@ -125,26 +139,28 @@ export default function Admin() { ...@@ -125,26 +139,28 @@ export default function Admin() {
<option value="zoo">동물원</option> <option value="zoo">동물원</option>
<option value="cycling">사이클링</option> <option value="cycling">사이클링</option>
</select> </select>
<div> <div className="flex items-center justify-end gap-3">
<p>url</p> <p>url :</p>
<input name="url" className="border-2 border-sky-500" <input name="url" className="border-2 border-sky-500"
onChange={handleInputeChange} /> onChange={handleInputeChange} />
{/* type="file"/> */} {/* type="file"/> */}
</div> </div>
<div> <div className="flex items-center justify-end gap-3 mt-2 md:mt-0">
<p>title</p> <p>title :</p>
<input name="title" className="border-2 border-sky-500" <input name="title" className="border-2 border-sky-500"
onChange={handleInputeChange} /> onChange={handleInputeChange} />
</div> </div>
<div className="my-5 "> </div>
<button className="border-2 border-gray-500 rounded">추가</button> <div className="my-5 flex items-center">
<button className="border-2 border-gray-500 rounded ">추가</button>
</div> </div>
</div> </div>
</form> </form>
<div className="flex flex-col"> <div className="flex justify-center">
<MySlide key={Math.random()} <MySlide key={Math.random()}
slides={slides} slides={slides}
/> />
</div> </div>
</div> </div>
); );
......
...@@ -10,7 +10,6 @@ export function MySlide({ slides}: num) { ...@@ -10,7 +10,6 @@ export function MySlide({ slides}: num) {
const firstRightClick = useRef(true); const firstRightClick = useRef(true);
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [slide,setSlide] = useState(1); const [slide,setSlide] = useState(1);
// const slide = useRef(1);
const [style, setStyle] = useState(""); const [style, setStyle] = useState("");
const leftClick = () => { const leftClick = () => {
...@@ -20,7 +19,6 @@ export function MySlide({ slides}: num) { ...@@ -20,7 +19,6 @@ export function MySlide({ slides}: num) {
} else { } else {
setPage(page - 1) setPage(page - 1)
} }
// slide.current -= 1;
setSlide(slide-1) setSlide(slide-1)
setStyle("-translate-x-full animate-slidetoright"); setStyle("-translate-x-full animate-slidetoright");
}; };
...@@ -32,16 +30,14 @@ export function MySlide({ slides}: num) { ...@@ -32,16 +30,14 @@ export function MySlide({ slides}: num) {
} else { } else {
setPage(page + 1) setPage(page + 1)
} }
// slide.current += 1;
setSlide(slide+1) setSlide(slide+1)
setStyle("animate-slidetoleft"); setStyle("animate-slidetoleft");
}; };
return ( return (
<div className="flex flex-row justify-center items-center "> <div className="flex flex-row items-center ">
<button className="mx-3 w-6 h-6 rounded-full hover:bg-sky-100 hover:text-gray-400"onClick={leftClick} disabled={slide === 1}> <button className="mx-3 w-6 h-6 rounded-full hover:bg-sky-100 hover:text-gray-400"onClick={leftClick} disabled={slide === 1}>
&lt; &lt;
{/* {slide.current} */}
</button> </button>
<div <div
className={`m-3 md:m-5 md:basis-4/5 flex flex-row relative w-full overflow-hidden`} className={`m-3 md:m-5 md:basis-4/5 flex flex-row relative w-full overflow-hidden`}
......
...@@ -40,7 +40,7 @@ export interface Profile { ...@@ -40,7 +40,7 @@ export interface Profile {
} }
export interface MainimgType { export interface MainimgType {
_id: string;
theme: string; theme: string;
city: string; city: string;
url: string; url: string;
......
import { NextFunction, Request, Response } from "express";
import isLength from "validator/lib/isLength"; import isLength from "validator/lib/isLength";
import { TypedRequestAuth } from "./auth.controller"; import { TypedRequestAuth } from "./auth.controller";
import { asyncWrap } from "../helpers"; import { asyncWrap } from "../helpers";
import { mainimgDb } from "../db"; import { mainimgDb } from "../db";
import { TypedRequest } from "../types";
export const createMainimg = asyncWrap(async (reqExp, res, next) => { export const createMainimg = asyncWrap(async (reqExp, res, next) => {
const req = reqExp as TypedRequestAuth<{ userId: string }>; const req = reqExp as TypedRequestAuth<{ userId: string }>;
const { theme, city, url, title} = req.body as { const { theme, city, url, title } = req.body as {
theme: string; theme: string;
city: string; city: string;
url: string; url: string;
...@@ -36,8 +38,16 @@ export const createMainimg = asyncWrap(async (reqExp, res, next) => { ...@@ -36,8 +38,16 @@ export const createMainimg = asyncWrap(async (reqExp, res, next) => {
export const getMainimg = asyncWrap(async (req, res) => { export const getMainimg = asyncWrap(async (req, res) => {
const mainimgs = await mainimgDb.getMainimg(); const mainimgs = await mainimgDb.getMainimg();
return res.json(mainimgs); return res.json(mainimgs);
}); });
export const deleteMainimg = asyncWrap(async (req, res) => {
const { imgId } = req.params;
console.log(imgId);
const deleteCount = await mainimgDb.deleteOneMainimg(imgId);
return res.json(deleteCount);
});
...@@ -14,3 +14,8 @@ export const getMainimg = async () => { ...@@ -14,3 +14,8 @@ export const getMainimg = async () => {
const users = await Mainimg.find({}); const users = await Mainimg.find({});
return users; return users;
}; };
export const deleteOneMainimg = async (_id: string) => {
const res = await Mainimg.deleteOne({ _id: _id });
return res;
};
...@@ -6,6 +6,8 @@ const router = express.Router(); ...@@ -6,6 +6,8 @@ const router = express.Router();
router router
.route("/") .route("/")
.get(authCtrl.requireLogin, mainimgCtrl.getMainimg) .get(authCtrl.requireLogin, mainimgCtrl.getMainimg)
.post(authCtrl.requireLogin, mainimgCtrl.createMainimg); .post(authCtrl.requireLogin, mainimgCtrl.createMainimg)
.delete(authCtrl.requireLogin, mainimgCtrl.deleteMainimg)
export default router; export default router;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment