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) => { ...@@ -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;
}; };
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 { 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,10 +58,18 @@ export default function Admin() { ...@@ -56,10 +58,18 @@ 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,14 +77,17 @@ export default function Admin() { ...@@ -67,14 +77,17 @@ 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>
<button id={pic._id} onClick={handleDeleteClick}>
삭제
</button>
</div> </div>
))] ))]
slides.push(k); slides.push(k);
...@@ -84,67 +97,70 @@ export default function Admin() { ...@@ -84,67 +97,70 @@ 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">
<select <div className="gap-3 md:flex ">
name="city" <select
id="Questions" name="city"
className="border border-3 border-black w-20 my-5" id="Questions"
defaultValue="질문종류" className="border border-3 border-black w-20 my-5"
onChange={handleSelectChange} defaultValue="질문종류"
> onChange={handleSelectChange}
<option value="질문종류">도시</option> >
<option value="Seoul">서울</option> <option value="질문종류">도시</option>
<option value="Busan">부산</option> <option value="Seoul">서울</option>
<option value="Incheon">인천</option> <option value="Busan">부산</option>
<option value="Daegoo">대구</option> <option value="Incheon">인천</option>
<option value="Kwangjoo">광주</option> <option value="Daegoo">대구</option>
<option value="Daejeon">대전</option> <option value="Kwangjoo">광주</option>
<option value="Woolsan">울산</option> <option value="Daejeon">대전</option>
<option value="Sejong">세종</option> <option value="Woolsan">울산</option>
<option value="Dokdo">독도</option> <option value="Sejong">세종</option>
<option value="Jeju">제주</option> <option value="Dokdo">독도</option>
</select> <option value="Jeju">제주</option>
<select </select>
name="theme" <select
id="Questions" name="theme"
className="border border-3 border-black w-20 my-5" id="Questions"
defaultValue="질문종류" className="border border-3 border-black w-20 my-5"
onChange={handleSelectChange} defaultValue="질문종류"
> onChange={handleSelectChange}
<option value="질문종류">테마</option> >
<option value="cycling">사이클링</option> <option value="질문종류">테마</option>
<option value="surfing">서핑</option> <option value="cycling">사이클링</option>
<option value="activity">액티비티</option> <option value="surfing">서핑</option>
<option value="camping">캠핑</option> <option value="activity">액티비티</option>
<option value="sking">스키</option> <option value="camping">캠핑</option>
<option value="boat">보트</option> <option value="sking">스키</option>
<option value="desert">사막</option> <option value="boat">보트</option>
<option value="golf">골프</option> <option value="desert">사막</option>
<option value="cave">동굴</option> <option value="golf">골프</option>
<option value="history">문화재</option> <option value="cave">동굴</option>
<option value="zoo">동물원</option> <option value="history">문화재</option>
<option value="cycling">사이클링</option> <option value="zoo">동물원</option>
</select> <option value="cycling">사이클링</option>
<div> </select>
<p>url</p> <div className="flex items-center justify-end gap-3">
<input name="url" className="border-2 border-sky-500" <p>url :</p>
onChange={handleInputeChange} /> <input name="url" className="border-2 border-sky-500"
{/* type="file"/> */} onChange={handleInputeChange} />
</div> {/* type="file"/> */}
<div> </div>
<p>title</p> <div className="flex items-center justify-end gap-3 mt-2 md:mt-0">
<input name="title" className="border-2 border-sky-500" <p>title :</p>
onChange={handleInputeChange} /> <input name="title" className="border-2 border-sky-500"
onChange={handleInputeChange} />
</div>
</div> </div>
<div className="my-5 "> <div className="my-5 flex items-center">
<button className="border-2 border-gray-500 rounded">추가</button> <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>
); );
......
frontend/src/auth/adminslide.tsx
View file @ e7e8eef0
...@@ -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`}
......
frontend/src/types/index.tsx
View file @ e7e8eef0
...@@ -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;
......
src/controllers/mainimg.controller.ts
View file @ e7e8eef0
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;
...@@ -15,10 +17,10 @@ export const createMainimg = asyncWrap(async (reqExp, res, next) => { ...@@ -15,10 +17,10 @@ export const createMainimg = asyncWrap(async (reqExp, res, next) => {
console.log("body", req.body); console.log("body", req.body);
if (!isLength(url ?? "", { min: 1 })) { if (!isLength(url ?? "", { min: 1 })) {
return res.status(422).send("이미지 url을 입력해주세요"); return res.status(422).send("이미지 url을 입력해주세요");
} }
if (!isLength(title ?? "", { min: 1 })) { if (!isLength(title ?? "", { min: 1 })) {
return res.status(422).send("이미지 제목을 입력해주세요"); return res.status(422).send("이미지 제목을 입력해주세요");
} }
...@@ -34,10 +36,18 @@ export const createMainimg = asyncWrap(async (reqExp, res, next) => { ...@@ -34,10 +36,18 @@ 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);
});
src/db/mainimg.db.ts
View file @ e7e8eef0
...@@ -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;
};
src/routes/mainimg.route.ts
View file @ e7e8eef0
...@@ -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