Skip to content

GitLab

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

delete working

parent 316b6e6d
Hide whitespace changes
Inline Side-by-side
frontend/src/apis/mainimg.api.ts
View file @ e7e8eef0
......@@ -7,13 +7,12 @@ export const mainimg = async (mainimg: MainimgType) => {
return data;
};
export const delmainimg = async (id : string) => {
export const delmainimg = async (_id : string) => {
const { data } = await axios.delete(`${baseUrl}/mainimg`);
return data;
};
export const getmainimg = async () => {
const { data } = await axios.get(`${baseUrl}/mainimg`);
console.log("test",data)
return data;
};
frontend/src/auth/admin.tsx
View file @ e7e8eef0
import React, { FormEvent, useEffect, useState } from "react";
import React, { FormEvent, useEffect, useState, MouseEvent } from "react";
import { mainimgApi } from "../apis";
import { catchErrors } from "../helpers";
import { MainimgType } from "../types";
import {MySlide} from "./adminslide";
import { MySlide } from "./adminslide";
export default function Admin() {
......@@ -19,6 +19,7 @@ export default function Admin() {
}, []);
const [addimg, setAddimg] = useState<MainimgType>({
_id: "",
theme: "",
city: "",
url: "",
......@@ -48,6 +49,7 @@ export default function Admin() {
console.log("서버연결됬나요", res);
setSuccess(true);
setError("");
alert("img 추가되었습니다");
} catch (error) {
console.log("에러발생");
catchErrors(error, setError);
......@@ -56,10 +58,18 @@ export default function Admin() {
}
}
if (success) {
alert("img 추가되었습니다");
}
// if (success) {
// 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;
const numPages = Math.ceil(getimgs.length / 15);
......@@ -67,14 +77,17 @@ export default function Admin() {
for (let i = 0; i < numPages; i++) {
const k = [
getimgs.slice(i * limit, i * limit + limit).map((pic, index: number) => (
<div
className={`m-1 shrink-0 bg-gray-200 rounded shadow-md `}
key={index}>
<img
src={pic.url}
className="w-full h-10 md:h-20 object-center"
/>
<p className="text-center text-xs">{pic.title}</p>
<div key={index}>
<div className={`m-1 shrink-0 bg-gray-200 rounded shadow-md `}>
<img
src={pic.url}
className="w-full h-10 md:h-20 object-center"
/>
<p className="text-center text-xs">{pic.title}</p>
</div>
<button id={pic._id} onClick={handleDeleteClick}>
삭제
</button>
</div>
))]
slides.push(k);
......@@ -84,67 +97,70 @@ export default function Admin() {
<div>
<form
onSubmit={handleSubmit}>
<div className="flex justify-center gap-3">
<select
name="city"
id="Questions"
className="border border-3 border-black w-20 my-5"
defaultValue="질문종류"
onChange={handleSelectChange}
>
<option value="질문종류">도시</option>
<option value="Seoul">서울</option>
<option value="Busan">부산</option>
<option value="Incheon">인천</option>
<option value="Daegoo">대구</option>
<option value="Kwangjoo">광주</option>
<option value="Daejeon">대전</option>
<option value="Woolsan">울산</option>
<option value="Sejong">세종</option>
<option value="Dokdo">독도</option>
<option value="Jeju">제주</option>
</select>
<select
name="theme"
id="Questions"
className="border border-3 border-black w-20 my-5"
defaultValue="질문종류"
onChange={handleSelectChange}
>
<option value="질문종류">테마</option>
<option value="cycling">사이클링</option>
<option value="surfing">서핑</option>
<option value="activity">액티비티</option>
<option value="camping">캠핑</option>
<option value="sking">스키</option>
<option value="boat">보트</option>
<option value="desert">사막</option>
<option value="golf">골프</option>
<option value="cave">동굴</option>
<option value="history">문화재</option>
<option value="zoo">동물원</option>
<option value="cycling">사이클링</option>
</select>
<div>
<p>url</p>
<input name="url" className="border-2 border-sky-500"
onChange={handleInputeChange} />
{/* type="file"/> */}
</div>
<div>
<p>title</p>
<input name="title" className="border-2 border-sky-500"
onChange={handleInputeChange} />
<div className="flex flex-wrap justify-center gap-3">
<div className="gap-3 md:flex ">
<select
name="city"
id="Questions"
className="border border-3 border-black w-20 my-5"
defaultValue="질문종류"
onChange={handleSelectChange}
>
<option value="질문종류">도시</option>
<option value="Seoul">서울</option>
<option value="Busan">부산</option>
<option value="Incheon">인천</option>
<option value="Daegoo">대구</option>
<option value="Kwangjoo">광주</option>
<option value="Daejeon">대전</option>
<option value="Woolsan">울산</option>
<option value="Sejong">세종</option>
<option value="Dokdo">독도</option>
<option value="Jeju">제주</option>
</select>
<select
name="theme"
id="Questions"
className="border border-3 border-black w-20 my-5"
defaultValue="질문종류"
onChange={handleSelectChange}
>
<option value="질문종류">테마</option>
<option value="cycling">사이클링</option>
<option value="surfing">서핑</option>
<option value="activity">액티비티</option>
<option value="camping">캠핑</option>
<option value="sking">스키</option>
<option value="boat">보트</option>
<option value="desert">사막</option>
<option value="golf">골프</option>
<option value="cave">동굴</option>
<option value="history">문화재</option>
<option value="zoo">동물원</option>
<option value="cycling">사이클링</option>
</select>
<div className="flex items-center justify-end gap-3">
<p>url :</p>
<input name="url" className="border-2 border-sky-500"
onChange={handleInputeChange} />
{/* type="file"/> */}
</div>
<div className="flex items-center justify-end gap-3 mt-2 md:mt-0">
<p>title :</p>
<input name="title" className="border-2 border-sky-500"
onChange={handleInputeChange} />
</div>
</div>
<div className="my-5 ">
<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>
</form>
<div className="flex flex-col">
<div className="flex justify-center">
<MySlide key={Math.random()}
slides={slides}
/>
</div>
</div>
);
......
frontend/src/auth/adminslide.tsx
View file @ e7e8eef0
......@@ -10,7 +10,6 @@ export function MySlide({ slides}: num) {
const firstRightClick = useRef(true);
const [page, setPage] = useState(1);
const [slide,setSlide] = useState(1);
// const slide = useRef(1);
const [style, setStyle] = useState("");
const leftClick = () => {
......@@ -20,7 +19,6 @@ export function MySlide({ slides}: num) {
} else {
setPage(page - 1)
}
// slide.current -= 1;
setSlide(slide-1)
setStyle("-translate-x-full animate-slidetoright");
};
......@@ -32,16 +30,14 @@ export function MySlide({ slides}: num) {
} else {
setPage(page + 1)
}
// slide.current += 1;
setSlide(slide+1)
setStyle("animate-slidetoleft");
};
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}>
&lt;
{/* {slide.current} */}
</button>
<div
className={`m-3 md:m-5 md:basis-4/5 flex flex-row relative w-full overflow-hidden`}
......
frontend/src/types/index.tsx
View file @ e7e8eef0
......@@ -40,7 +40,7 @@ export interface Profile {
}
export interface MainimgType {
_id: string;
theme: string;
city: string;
url: string;
......
src/controllers/mainimg.controller.ts
View file @ e7e8eef0
import { NextFunction, Request, Response } from "express";
import isLength from "validator/lib/isLength";
import { TypedRequestAuth } from "./auth.controller";
import { asyncWrap } from "../helpers";
import { mainimgDb } from "../db";
import { TypedRequest } from "../types";
export const createMainimg = asyncWrap(async (reqExp, res, next) => {
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;
city: string;
url: string;
......@@ -15,10 +17,10 @@ export const createMainimg = asyncWrap(async (reqExp, res, next) => {
console.log("body", req.body);
if (!isLength(url ?? "", { min: 1 })) {
return res.status(422).send("이미지 url을 입력해주세요");
}
if (!isLength(url ?? "", { min: 1 })) {
return res.status(422).send("이미지 url을 입력해주세요");
}
if (!isLength(title ?? "", { min: 1 })) {
return res.status(422).send("이미지 제목을 입력해주세요");
}
......@@ -34,10 +36,18 @@ export const createMainimg = asyncWrap(async (reqExp, res, next) => {
});
export const getMainimg = asyncWrap(async (req, res) => {
const mainimgs = await mainimgDb.getMainimg();
return res.json(mainimgs);
});
const mainimgs = await mainimgDb.getMainimg();
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);
});
src/db/mainimg.db.ts
View file @ e7e8eef0
......@@ -14,3 +14,8 @@ export const getMainimg = async () => {
const users = await Mainimg.find({});
return users;
};
export const deleteOneMainimg = async (_id: string) => {
const res = await Mainimg.deleteOne({ _id: _id });
return res;
};
src/routes/mainimg.route.ts
View file @ e7e8eef0
......@@ -6,6 +6,8 @@ const router = express.Router();
router
.route("/")
.get(authCtrl.requireLogin, mainimgCtrl.getMainimg)
.post(authCtrl.requireLogin, mainimgCtrl.createMainimg);
.post(authCtrl.requireLogin, mainimgCtrl.createMainimg)
.delete(authCtrl.requireLogin, mainimgCtrl.deleteMainimg)
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