Skip to content

GitLab

Commit d1f8541e authored by Kim, MinGyu's avatar Kim, MinGyu
Browse files

admin 페이지 개선

parent 39e4b1fd
Hide whitespace changes
Inline Side-by-side
.gitignore
View file @ d1f8541e
......@@ -2,4 +2,5 @@ node_modules/
.vscode/
package-lock.json
dist/
uploads/
\ No newline at end of file
uploads/
adminpics
\ No newline at end of file
frontend/src/App.tsx
View file @ d1f8541e
......@@ -2,7 +2,15 @@ import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import "tailwindcss/tailwind.css";
import { IntoPost } from "./post/intopost";
import { Login, Profile, RequireAuth, Signup, Admin, ImgRewrite } from "./auth";
import {
Login,
Profile,
RequireAuth,
Signup,
Admin,
ImgRewrite,
Search,
} from "./auth";
import { Header, Body } from "./home";
import { Board } from "./board";
import Posting from "./post/posting";
......@@ -39,7 +47,8 @@ export const App = () => {
}
/>
<Route path="admin" element={<Admin />} />
<Route path="rewrite" element={<ImgRewrite/>}/>
<Route path="rewrite" element={<ImgRewrite />} />
<Route path="search" element={<Search />} />
</Route>
</Route>
</Routes>
......
frontend/src/apis/mainimg.api.ts
View file @ d1f8541e
......@@ -2,17 +2,17 @@ import axios from "axios";
import { MainimgType } from "../types";
import baseUrl from "./baseUrl";
export const mainimg = async (mainimg: MainimgType) => {
const { data } = await axios.post(`${baseUrl}/mainimg`, mainimg);
return data;
export const mainimg = async (formdata: FormData) => {
const { data } = await axios.post(`${baseUrl}/mainimg`, formdata);
return data;
};
export const delmainimg = async (_id : string) => {
const { data } = await axios.delete(`${baseUrl}/mainimg/${_id}`);
return data;
export const delmainimg = async (_id: string) => {
const { data } = await axios.delete(`${baseUrl}/mainimg/${_id}`);
return data;
};
export const getmainimg = async () => {
const { data } = await axios.get(`${baseUrl}/mainimg`);
return data;
const { data } = await axios.get(`${baseUrl}/mainimg`);
return data;
};
frontend/src/auth/admin.tsx
View file @ d1f8541e
import React, { FormEvent, useEffect, useState, MouseEvent } from "react";
import { Link } from "react-router-dom";
import { mainimgApi } from "../apis";
import { picture } from "../apis/profile.api";
import { catchErrors } from "../helpers";
import { MainimgType } from "../types";
import { MySlide } from "./adminslide";
export default function Admin() {
// 이미지 전체 불러오기
const [getimgs, setGetimgs] = useState<MainimgType[]>([]);
// 이미지 전체 불러오기
const [getimgs, setGetimgs] = useState<MainimgType[]>([]);
async function imgsData() {
const imgs = await mainimgApi.getmainimg();
setGetimgs(imgs)
};
async function imgsData() {
const imgs = await mainimgApi.getmainimg();
setGetimgs(imgs);
}
useEffect(() => {
imgsData();
}, []);
useEffect(() => {
imgsData();
}, []);
console.log(getimgs);
// 이미지 추가하기
const [addimg, setAddimg] = useState<MainimgType>({
_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<File>();
// 이미지 추가하기
const [addimg, setAddimg] = useState<MainimgType>({
_id: "",
theme: "",
city: "",
url: "",
title: "",
});
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
const [addSuccess, setAddSuccess] = useState(false);
const [delSuccess, setDelSuccess] = useState(false);
function handleSelectChange(event: React.ChangeEvent<HTMLSelectElement>) {
const { name, value } = event.currentTarget;
console.log(value);
setAddimg({ ...addimg, [name]: value });
}
function handleSelectChange(event: React.ChangeEvent<HTMLSelectElement>) {
const { name, value } = event.currentTarget;
setAddimg({ ...addimg, [name]: value });
}
function handleInputeChange(event: React.ChangeEvent<HTMLInputElement>) {
const { name, value } = event.currentTarget;
setAddimg({ ...addimg, [name]: value });
function handleInputeChange(event: React.ChangeEvent<HTMLInputElement>) {
const { name, value } = event.currentTarget;
setAddimg({ ...addimg, [name]: value });
}
function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
const file = e.target.files?.[0];
if (!(file === undefined)) {
setFile(file);
}
}
async function handleSubmit(event: FormEvent) {
event.preventDefault();
try {
setError("");
console.log("img data", addimg);
setLoading(true);
const res = await mainimgApi.mainimg(addimg);
console.log("서버연결됬나요", res);
setAddSuccess(true);
setError("");
} catch (error) {
console.log("에러발생");
catchErrors(error, setError);
} finally {
setLoading(false);
}
}
async function handleSubmit(event: FormEvent) {
event.preventDefault();
if (addSuccess) {
alert("img 추가되었습니다");
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);
}
// 이미지 삭제하기
async function handleDeleteClick(event: MouseEvent<HTMLButtonElement>) {
try {
if (confirm("삭제하시겠습니까?") == true) {
const picId = event.currentTarget.id;
console.log("picId : ", picId)
const res = await mainimgApi.delmainimg(picId);
console.log("delete img", res);
setDelSuccess(true);
setError("");
} else {
return false;
}
}
catch (error) {
console.log("에러발생");
catchErrors(error, setError);
} finally {
setLoading(false);
};
};
if (delSuccess) {
alert("img 삭제되었습니다");
}
let limit = 15;
const numPages = Math.ceil(getimgs.length / 15);
}
const slides = []
for (let i = 0; i < numPages; i++) {
const k = [
getimgs.slice(i * limit, i * limit + limit).map((pic, index: number) => (
<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>
<div className="text-end">
<button className="border-r-2 border-r-indigo-500 text-xs">
<Link to="/rewrite">
수정
</Link>
</button>
<button id={pic._id} onClick={handleDeleteClick} className="text-xs">
삭제
</button>
</div>
</div>
))]
slides.push(k);
if (addSuccess) {
alert("img 추가되었습니다");
}
// 이미지 삭제하기
async function handleDeleteClick(event: MouseEvent<HTMLButtonElement>) {
try {
if (confirm("삭제하시겠습니까?") == true) {
const picId = event.currentTarget.id;
console.log("picId : ", picId);
const res = await mainimgApi.delmainimg(picId);
console.log("delete img", res);
setDelSuccess(true);
setError("");
} else {
return false;
}
} catch (error) {
console.log("에러발생");
catchErrors(error, setError);
} finally {
setLoading(false);
}
}
if (delSuccess) {
alert("img 삭제되었습니다");
}
return (
<div>
<form
onSubmit={handleSubmit}>
<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="서울">서울</option>
<option value="부산">부산</option>
<option value="인천">인천</option>
<option value="대구">대구</option>
<option value="광주">광주</option>
<option value="대전">대전</option>
<option value="울산">울산</option>
<option value="세종">세종</option>
<option value="독도">독도</option>
<option value="제주">제주</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="사이클링">사이클링</option>
<option value="서핑">서핑</option>
<option value="액티비티">액티비티</option>
<option value="캠핑">캠핑</option>
<option value="스키">스키</option>
<option value="보트">보트</option>
<option value="사막">사막</option>
<option value="골프">골프</option>
<option value="동굴">동굴</option>
<option value="문화재">문화재</option>
<option value="동물원">동물원</option>
<option value="사이클링">사이클링</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 flex items-center">
<button className="border-2 border-gray-500 rounded ">추가</button>
</div>
</div>
</form>
<div className="flex justify-center">
<MySlide key={Math.random()}
slides={slides}
/>
let limit = 15;
const numPages = Math.ceil(getimgs.length / 15);
const slides = [];
for (let i = 0; i < numPages; i++) {
const k = [
getimgs
.slice(i * limit, i * limit + limit)
.map((picture, index: number) => (
<div key={index}>
<div className={`m-1 shrink-0 bg-gray-200 rounded shadow-md `}>
<img
src={"http://localhost:3000/images/" + picture.pic.newfilename}
className="w-full h-10 md:h-20 object-center"
/>
<p className="text-center text-xs">{picture.title}</p>
</div>
<div className="text-end">
<button className="border-r-2 border-r-indigo-500 text-xs">
<Link to="/rewrite">수정</Link>
</button>
<button
id={picture._id}
onClick={handleDeleteClick}
className="text-xs"
>
삭제
</button>
</div>
</div>
)),
];
slides.push(k);
}
return (
<div>
<form onSubmit={handleSubmit}>
<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="서울">서울</option>
<option value="부산">부산</option>
<option value="인천">인천</option>
<option value="대구">대구</option>
<option value="광주">광주</option>
<option value="대전">대전</option>
<option value="울산">울산</option>
<option value="세종">세종</option>
<option value="독도">독도</option>
<option value="제주">제주</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="사이클링">사이클링</option>
<option value="서핑">서핑</option>
<option value="액티비티">액티비티</option>
<option value="캠핑">캠핑</option>
<option value="스키">스키</option>
<option value="보트">보트</option>
<option value="사막">사막</option>
<option value="골프">골프</option>
<option value="동굴">동굴</option>
<option value="문화재">문화재</option>
<option value="동물원">동물원</option>
<option value="사이클링">사이클링</option>
</select>
<div className="flex items-center justify-end gap-3">
<input
type="file"
id="files"
className="hidden"
onChange={handleFileChange}
></input>
<label htmlFor="files" className="border-2 m-5">
이미지 선택
</label>
</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 flex items-center">
<button className="border-2 border-gray-500 rounded ">추가</button>
</div>
</div>
);
};
</form>
<div className="flex justify-center">
<MySlide key={Math.random()} slides={slides} />
</div>
</div>
);
}
frontend/src/auth/index.tsx
View file @ d1f8541e
......@@ -3,4 +3,5 @@ export { default as Signup } from "./signup";
export { default as Profile } from "./profile";
export { RequireAuth } from "./RequireAuth";
export { default as Admin } from "./admin";
export {default as ImgRewrite} from "./imgrewrite"
export { default as ImgRewrite } from "./imgrewrite";
export { default as Search } from "./search";
frontend/src/auth/search.tsx 0 → 100644
View file @ d1f8541e
import React from "react";
import { useLocation } from "react-router-dom";
export default function Search() {
const a = useLocation().state;
return (
<div>
<div></div>
</div>
);
}
frontend/src/home/header.tsx
View file @ d1f8541e
......@@ -6,6 +6,13 @@ import "tailwindcss/tailwind.css";
export default function Header() {
const { logout } = useAuth();
const [search, setSearch] = useState("");
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newvalue = e.target.value;
setSearch(newvalue);
};
return (
<div className="flex flex-col ">
<div className="flex py-10 ">
......@@ -18,9 +25,12 @@ export default function Header() {
<input
className="md:ml-20 placeholder:text-white focus:outline-none focus:border-y-4 focus:border-l-4 focus:border-sky-500 md:placeholder:text-slate-400 w-20 md:w-1/2 border-y-4 border-l-4 border-sky-300 pl-9 rounded-l-full focus:border-0"
placeholder="어디로 여행가고 싶나요?"
onChange={handleChange}
/>
<button className="shrink-0 border-y-4 border-r-4 border-sky-500 rounded-r-full pr-4">
검색
{/* <Link to="/search" state={}>
검색
</Link> */}
</button>
<div className="shrink-0 p-3 md:ml-40 h-12">
......
frontend/src/types/index.tsx
View file @ d1f8541e
......@@ -43,6 +43,9 @@ export interface MainimgType {
_id: string;
theme: string;
city: string;
url: string;
title: string;
pic: {
originalfilename: string;
newfilename: string;
};
}
src/app.ts
View file @ d1f8541e
......@@ -12,6 +12,7 @@ app.use(cookieParser());
app.use("/api", router);
app.use("/images", express.static(path.join(__dirname, "..", "/uploads")));
app.use("/images", express.static(path.join(__dirname, "..", "/adminpics")));
app.use((err: any, req: Request, res: Response, next: NextFunction) => {
console.log("익스프레스 에러: ", err);
......
src/controllers/mainimg.controller.ts
View file @ d1f8541e
......@@ -4,35 +4,53 @@ import { TypedRequestAuth } from "./auth.controller";
import { asyncWrap } from "../helpers";
import { mainimgDb } from "../db";
import { TypedRequest } from "../types";
import { ObjectId } from "mongoose";
import formidable from "formidable";
export const createMainimg = asyncWrap(async (reqExp, res, next) => {
const req = reqExp as TypedRequestAuth<{ userId: string }>;
export const createMainimg = asyncWrap(async (reqExp, res) => {
const req = reqExp as TypedRequestAuth<{ userId: ObjectId }>;
const { userId } = req.auth;
const { theme, city, url, title } = req.body as {
theme: string;
city: string;
url: string;
title: string;
};
console.log("body", req.body);
if (!isLength(url ?? "", { min: 1 })) {
return res.status(422).send("이미지 url을 입력해주세요");
}
const form = formidable({
uploadDir: "adminpics",
keepExtensions: true,
multiples: false,
});
if (!isLength(title ?? "", { min: 1 })) {
return res.status(422).send("이미지 제목을 입력해주세요");
}
form.parse(req, (err, fields, files) => {
if (!Array.isArray(files.mainimg)) {
//파일 좁히기 중
if (
!(
Array.isArray(fields.city) ||
Array.isArray(fields.title) ||
Array.isArray(fields.theme)
)
) {
const city = fields.city;
const title = fields.title;
const theme = fields.theme;
const newMainimg = await mainimgDb.createMainimg({
theme,
city,
url,
title,
// if (!isLength(title ?? "", { min: 1 })) {
// return res.status(422).send("이미지 제목을 입력해주세요");
// }
console.log(files);
const originalfilename = files.mainimg?.originalFilename;
const newfilename = files.mainimg.newFilename;
if (!(originalfilename === null || newfilename === undefined)) {
mainimgDb.createMainimg(
{ city, title, theme },
{
originalfilename,
newfilename,
}
);
}
}
}
});
return res.json(newMainimg);
res.json();
});
export const getMainimg = asyncWrap(async (req, res) => {
......@@ -40,7 +58,6 @@ export const getMainimg = asyncWrap(async (req, res) => {
return res.json(mainimgs);
});
export const deleteMainimg = asyncWrap(async (req, res) => {
const { imgId } = req.params;
console.log(imgId);
......@@ -48,6 +65,3 @@ export const deleteMainimg = asyncWrap(async (req, res) => {
return res.json(deleteCount);
});
src/controllers/user.controller.ts
View file @ d1f8541e
import { userDb } from "../db";
import { asyncWrap } from "../helpers/asyncWrap";
import { Request } from "express";
import formidable, { Fields, Files } from "formidable";
import formidable from "formidable";
import { ObjectId } from "mongoose";
import fs from "fs";
......
src/db/mainimg.db.ts
View file @ d1f8541e
import { Mainimg, MainimgType } from "../models";
import { ObjectId } from "mongoose";
import { Avatar, IAvatar, Mainimg, MainimgType } from "../models";
export const createMainimg = async (mainimg: MainimgType, pic: IAvatar) => {
const newPic = await Avatar.create({
originalfilename: pic.originalfilename,
newfilename: pic.newfilename,
pictureauth: pic.picturepath,
});
export const createMainimg = async (mainimg: MainimgType) => {
const newMainimg = await Mainimg.create({
theme: mainimg.theme,
city: mainimg.city,
url: mainimg.url,
pic: newPic._id,
title: mainimg.title,
});
return newMainimg;
};
export const getMainimg = async () => {
const users = await Mainimg.find({});
return users;
};
const img = await Mainimg.find({}).populate("pic");
return img;
};
export const deleteOneMainimg = async (_id: string) => {
const res = await Mainimg.deleteOne({ _id: _id });
......
src/db/user.db.ts
View file @ d1f8541e
import bcrypt from "bcryptjs";
import { ObjectId } from "mongoose";
import { IUser, Role, Post, User, Avatar } from "../models";
import fs from "fs";
import fs from "fs/promises";
export const createUser = async (user: IUser) => {
// 비밀번호 암호화
......@@ -106,9 +106,7 @@ export const deleteUser = async (userId: ObjectId) => {
const user = await User.findById(userId);
if (!(user?.avatar === undefined)) {
const ref = await Avatar.findById(user.avatar._id);
fs.unlink("../travel/uploads/" + ref?.newfilename, (err) => {
console.log(err);
});
await fs.unlink("../travel/uploads/" + ref?.newfilename);
await Avatar.deleteOne({ _id: user.avatar._id });
await User.deleteOne({ _id: userId });
}
......
src/models/mainimg.model.ts
View file @ d1f8541e
import {model, Schema } from "mongoose";
import { model, Schema, Types } from "mongoose";
export interface MainimgType {
theme: string;
city: string;
url: string;
title: string;
theme: string;
city: string;
title: string;
pic?: Types.ObjectId;
}
const MainimgSchema = new Schema<MainimgType>({
theme: {
type: String,
},
city: {
type: String,
},
url : {
type: String,
},
title: {
type: String,
required: true,
},
theme: {
type: String,
},
city: {
type: String,
},
title: {
type: String,
required: true,
},
pic: { type: Schema.Types.ObjectId, ref: "Avatar" },
});
export default model<MainimgType>("Mainimg", MainimgSchema);
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