Commit 2b496d1c authored by Lee Soobeom's avatar Lee Soobeom
Browse files

css 수정

parent 89ceb5ae
...@@ -37,7 +37,14 @@ export const App = () => { ...@@ -37,7 +37,14 @@ export const App = () => {
</RequireAuth> </RequireAuth>
} }
/> />
<Route path="admin" element={<RequireAuth><Admin /></RequireAuth>} /> <Route
path="admin"
element={
<RequireAuth>
<Admin />
</RequireAuth>
}
/>
<Route path="admin/:imgId" element={<ImgRewrite />} /> <Route path="admin/:imgId" element={<ImgRewrite />} />
<Route path="rewrite" element={<ImgRewrite />} /> <Route path="rewrite" element={<ImgRewrite />} />
</Route> </Route>
......
...@@ -46,7 +46,7 @@ export function MySlide({ slides }: num) { ...@@ -46,7 +46,7 @@ export function MySlide({ slides }: num) {
&lt; &lt;
</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 w-full overflow-hidden`}
> >
{slides.slice(page - 1, page + 2).map((slide) => ( {slides.slice(page - 1, page + 2).map((slide) => (
<div key={Math.random()} className="min-w-full"> <div key={Math.random()} className="min-w-full">
......
...@@ -113,7 +113,7 @@ export default function Admin() { ...@@ -113,7 +113,7 @@ export default function Admin() {
.slice(i * limit, i * limit + limit) .slice(i * limit, i * limit + limit)
.map((picture, index: number) => ( .map((picture, index: number) => (
<div key={index}> <div key={index}>
<div className={`m-1 shrink-0 bg-gray-200 rounded shadow-md `}> <div className={`m-1 shrink-0 bg-white rounded shadow-md `}>
<img <img
src={ src={
"http://localhost:3000/images/" + picture.fileInfo.newfilename "http://localhost:3000/images/" + picture.fileInfo.newfilename
...@@ -122,8 +122,8 @@ export default function Admin() { ...@@ -122,8 +122,8 @@ export default function Admin() {
/> />
<p className="text-center text-xs">{picture.title}</p> <p className="text-center text-xs">{picture.title}</p>
</div> </div>
<div className="text-end"> <div className="text-center">
<button className="border-r-2 border-r-indigo-500 text-xs"> <button className="border-r-2 border-r-indigo-500 px-3 text-xs md:text-m">
<Link to={`/admin/${picture._id}`} state={picture}> <Link to={`/admin/${picture._id}`} state={picture}>
수정 수정
</Link> </Link>
...@@ -131,7 +131,7 @@ export default function Admin() { ...@@ -131,7 +131,7 @@ export default function Admin() {
<button <button
id={picture._id} id={picture._id}
onClick={handleDeleteClick} onClick={handleDeleteClick}
className="text-xs" className="text-xs md:text-m px-3"
> >
삭제 삭제
</button> </button>
...@@ -145,7 +145,7 @@ export default function Admin() { ...@@ -145,7 +145,7 @@ export default function Admin() {
return ( return (
<div> <div>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="flex flex-wrap justify-center gap-3"> <div className="flex flex-wrap justify-center gap-3 bg-white md:shadow-lg rounded">
<div className="gap-3 md:flex "> <div className="gap-3 md:flex ">
<select <select
name="city" name="city"
...@@ -187,18 +187,18 @@ export default function Admin() { ...@@ -187,18 +187,18 @@ export default function Admin() {
<option value="zoo">동물원</option> <option value="zoo">동물원</option>
<option value="cycling">사이클링</option> <option value="cycling">사이클링</option>
</select> </select>
<div className="flex items-center justify-end gap-3"> <div className="flex items-center md:justify-end gap-3">
<input <input
type="file" type="file"
id="files" id="files"
className="hidden" className="hidden"
onChange={handleFileChange} onChange={handleFileChange}
></input> ></input>
<label htmlFor="files" className="border-2 m-5"> <label htmlFor="files" className="border-2 md:m-5">
이미지 선택 이미지 선택
</label> </label>
</div> </div>
<div className="flex items-center justify-end gap-3 mt-2 md:mt-0"> <div className="flex items-center md:justify-end gap-3 mt-2 md:mt-0">
<p>title :</p> <p>title :</p>
<input <input
name="title" name="title"
...@@ -215,6 +215,7 @@ export default function Admin() { ...@@ -215,6 +215,7 @@ export default function Admin() {
<div className="flex justify-center"> <div className="flex justify-center">
<MySlide key={Math.random()} slides={slides} /> <MySlide key={Math.random()} slides={slides} />
</div> </div>
<div className="bg-lime-100 h-48" />
</div> </div>
); );
} }
...@@ -6,264 +6,253 @@ import equals from "validator/lib/equals"; ...@@ -6,264 +6,253 @@ import equals from "validator/lib/equals";
import { catchErrors } from "../helpers"; import { catchErrors } from "../helpers";
import { MainimgType } from "../types"; import { MainimgType } from "../types";
export interface ImgState { export interface ImgState {
state: MainimgType; state: MainimgType;
} }
export default function ImgRewrite() { export default function ImgRewrite() {
// 이미지 수정 // 이미지 수정
const [theme, setTheme] = useState<string>("질문종류"); const [theme, setTheme] = useState<string>("질문종류");
const [city, setCity] = useState<string>("질문종류"); const [city, setCity] = useState<string>("질문종류");
const [url, setUrl] = useState<string>(""); const [url, setUrl] = useState<string>("");
const [title, setTitle] = useState<string>(""); const [title, setTitle] = useState<string>("");
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation() as ImgState; const location = useLocation() as ImgState;
const img = location.state; const img = location.state;
const [imgdata, setImgData] = useState<MainimgType>({ const [imgdata, setImgData] = useState<MainimgType>({
_id: img._id, _id: img._id,
theme: img.theme, theme: img.theme,
city: img.city, city: img.city,
title: img.title, title: img.title,
fileInfo: { originalfilename: "", newfilename: "" }, fileInfo: { originalfilename: "", newfilename: "" },
}); });
useEffect(() => { useEffect(() => {
console.log("수정 전 : ",imgdata); console.log("수정 전 : ", imgdata);
}, []); }, []);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState(""); const [error, setError] = useState("");
const [success, setSuccess] = useState(false); const [success, setSuccess] = useState(false);
const [file, setFile] = useState<File>(); const [file, setFile] = useState<File>();
const [imageSrc, setImageSrc] = useState(""); const [imageSrc, setImageSrc] = useState("");
const PictureSrc = (fileBlob: Blob) => { const PictureSrc = (fileBlob: Blob) => {
const reader = new FileReader(); const reader = new FileReader();
reader.readAsDataURL(fileBlob); reader.readAsDataURL(fileBlob);
reader.onload = (data) => { reader.onload = (data) => {
if (typeof data.target?.result === "string") { if (typeof data.target?.result === "string") {
console.log(data.target?.result); console.log(data.target?.result);
setImageSrc(data.target?.result); setImageSrc(data.target?.result);
} }
};
}; };
};
const onUploadFile = (e: React.ChangeEvent<HTMLInputElement>) => { const onUploadFile = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0]; const file = e.target.files?.[0];
if (!(file === undefined)) { if (!(file === undefined)) {
setFile(file); setFile(file);
PictureSrc(file); PictureSrc(file);
} }
}; };
async function reWriteSubmit(event: FormEvent) { async function reWriteSubmit(event: FormEvent) {
event.preventDefault(); event.preventDefault();
if (confirm("수정하시겠습니까?") == true) { if (confirm("수정하시겠습니까?") == true) {
// try { setError("");
setError(""); console.log("user data", imgdata);
console.log("user data", imgdata); const formdata = new FormData();
// if (infoFormMatch(imgdata) === true) { formdata.append("id", imgdata._id);
// setLoading(true); console.log(imgdata._id);
// const res = await mainimgApi.updating(imgdata); formdata.append("city", imgdata.city);
// console.log("clear", res); formdata.append("theme", imgdata.theme);
// navigate("/admin", { replace: true }); formdata.append("title", imgdata.title);
// setSuccess(true); console.log(formdata);
// setError(""); if (!(file === undefined)) {
const formdata = new FormData(); formdata.append("updatemainimg", file);
formdata.append("id", imgdata._id) console.log("formdata", formdata);
console.log(imgdata._id) const res = await mainimgApi.updateimg(formdata, imgdata._id);
formdata.append("city", imgdata.city); navigate("/admin", { replace: true });
formdata.append("theme", imgdata.theme); console.log("확인 중 ", res);
formdata.append("title", imgdata.title); } else {
console.log(formdata) formdata.append("updatemainimg", "");
if (!(file === undefined)) { console.log("formdata", formdata);
formdata.append("updatemainimg", file); const res = await mainimgApi.updateimg(formdata, imgdata._id);
console.log("formdata", formdata); navigate("/admin", { replace: true });
const res = await mainimgApi.updateimg(formdata,imgdata._id); console.log("확인 중 ", res);
navigate("/admin", { replace: true }); }
console.log("확인 중 ", res); } else {
} return false;
else {
formdata.append("updatemainimg","");
console.log("formdata",formdata);
const res = await mainimgApi.updateimg(formdata,imgdata._id);
navigate("/admin", { replace: true });
console.log("확인 중 ", res);
}
// }
// } catch (error) {
// console.log("에러발생");
// catchErrors(error, setError);
// } finally {
// setLoading(false);
// }
} else {
return false;
}
} }
// console.log(user._id) }
function infoFormMatch(pic: MainimgType) { // console.log(user._id)
if (!isLength(pic.title ?? "", { min: 1 })) { function infoFormMatch(pic: MainimgType) {
setError("제목을 입력해 주세요."); if (!isLength(pic.title ?? "", { min: 1 })) {
return false; setError("제목을 입력해 주세요.");
} else if (!isLength(pic.fileInfo.newfilename ?? "", { min: 1 })) { return false;
setError("파일을 선택해 주세요."); } else if (!isLength(pic.fileInfo.newfilename ?? "", { min: 1 })) {
return false; setError("파일을 선택해 주세요.");
} else if (equals(pic.city, "city")) { return false;
setError("도시를 선택해 주세요."); } else if (equals(pic.city, "city")) {
return false; setError("도시를 선택해 주세요.");
} else if (equals(pic.theme, "theme")) { return false;
setError("테마를 선택해 주세요."); } else if (equals(pic.theme, "theme")) {
return false; setError("테마를 선택해 주세요.");
} else { return false;
return true; } else {
} return true;
} }
}
const cityChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const city = event.currentTarget.value;
const newUser = { ...imgdata, city: city };
console.log(event.currentTarget.value);
setCity(event.currentTarget.value);
setImgData(newUser);
};
const cityChange = (event: React.ChangeEvent<HTMLSelectElement>) => { const themeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const city = event.currentTarget.value; const theme = event.currentTarget.value;
const newUser = { ...imgdata, city: city }; const newUser = { ...imgdata, theme: theme };
console.log(event.currentTarget.value); console.log(event.currentTarget.value);
setCity(event.currentTarget.value); setTheme(event.currentTarget.value);
setImgData(newUser); setImgData(newUser);
}; };
const themeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const theme = event.currentTarget.value;
const newUser = { ...imgdata, theme: theme };
console.log(event.currentTarget.value);
setTheme(event.currentTarget.value);
setImgData(newUser);
};
const titleChange = (event: React.ChangeEvent<HTMLInputElement>) => { const titleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const title = event.currentTarget.value; const title = event.currentTarget.value;
const newUser = { ...imgdata, title: title }; const newUser = { ...imgdata, title: title };
setTitle(event.currentTarget.value); setTitle(event.currentTarget.value);
setImgData(newUser); setImgData(newUser);
}; };
const fileChange = (event: React.ChangeEvent<HTMLInputElement>) => { const fileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const url = event.currentTarget.value; const url = event.currentTarget.value;
const newUser = { ...imgdata, pic: { originalfilename: "", newfilename: url } }; const newUser = {
setUrl(event.currentTarget.value); ...imgdata,
setImgData(newUser); pic: { originalfilename: "", newfilename: url },
}; };
return ( setUrl(event.currentTarget.value);
<div> setImgData(newUser);
<form onSubmit={reWriteSubmit} className="px-10 md:px-40"> };
<table className="w-full "> return (
<thead></thead> <div>
<tbody className=" border-separate border border-slate-400 "> <div className="bg-white md:shadow-lg rounded py-24">
<tr > <form onSubmit={reWriteSubmit} className="px-3 md:px-25">
<td className="border border-slate-300 min-w-max"> <table className="m-auto">
도시이름 <thead></thead>
</td> <tbody>
<td> <tr>
<select <td className="border border-slate-300 px-5">도시이름</td>
name="city" <td>
className="border border-3 border-black" <select
onChange={cityChange} name="city"
defaultValue={img.city} className="border border-3 border-black"
> onChange={cityChange}
<option value="city">도시</option> defaultValue={img.city}
<option value="Seoul">서울</option> >
<option value="Busan">부산</option> <option value="city">도시</option>
<option value="Incheon">인천</option> <option value="Seoul">서울</option>
<option value="Daegoo">대구</option> <option value="Busan">부산</option>
<option value="Kwangjoo">광주</option> <option value="Incheon">인천</option>
<option value="Daejeon">대전</option> <option value="Daegoo">대구</option>
<option value="Woolsan">울산</option> <option value="Kwangjoo">광주</option>
<option value="Sejong">세종</option> <option value="Daejeon">대전</option>
<option value="Dokdo">독도</option> <option value="Woolsan">울산</option>
<option value="Jeju">제주</option> <option value="Sejong">세종</option>
</select> <option value="Dokdo">독도</option>
</td> <option value="Jeju">제주</option>
</tr> </select>
<tr> </td>
<td className="border border-slate-300 min-w-max"> </tr>
테마이름 <tr>
</td> <td className="border border-slate-300 min-w-max px-5">
<td> 테마이름
<select </td>
name="theme" <td>
className="border border-3 border-black" <select
onChange={themeChange} name="theme"
defaultValue={img.theme} className="border border-3 border-black"
> onChange={themeChange}
<option value="theme">테마</option> defaultValue={img.theme}
<option value="cycling">사이클링</option> >
<option value="surfing">서핑</option> <option value="theme">테마</option>
<option value="activity">액티비티</option> <option value="cycling">사이클링</option>
<option value="camping">캠핑</option> <option value="surfing">서핑</option>
<option value="sking">스키</option> <option value="activity">액티비티</option>
<option value="boat">보트</option> <option value="camping">캠핑</option>
<option value="desert">사막</option> <option value="sking">스키</option>
<option value="golf">골프</option> <option value="boat">보트</option>
<option value="cave">동굴</option> <option value="desert">사막</option>
<option value="history">문화재</option> <option value="golf">골프</option>
<option value="zoo">동물원</option> <option value="cave">동굴</option>
<option value="cycling">사이클링</option> <option value="history">문화재</option>
</select> <option value="zoo">동물원</option>
</td> <option value="cycling">사이클링</option>
</tr> </select>
<tr> </td>
<td className="border border-slate-300"> </tr>
url <tr className="items-center border border-slate-300">
</td> <td className="min-w-max px-7">이미지</td>
<td> <td>
<input <input
type="file" type="file"
id="files" id="files"
className="hidden" className="hidden"
onChange={onUploadFile} onChange={onUploadFile}
></input> ></input>
<label htmlFor="files" className="border-2 m-5" > <label htmlFor="files" className="border-2">
이미지 선택 이미지 선택
</label> </label>
{imageSrc ? ( {imageSrc ? (
<img <img
src={imageSrc} src={imageSrc}
className="object-cover object-center h-full" className="object-cover object-center h-full"
/> />
) : ( ) : (
<img <img
src={"http://localhost:3000/images/" + img.fileInfo.newfilename} src={
className="object-cover object-center h-full" "http://localhost:3000/images/" +
/> img.fileInfo.newfilename
)} }
</td> className="object-cover object-center max-w-lg max-h-36"
</tr> />
<tr> )}
<td className="border border-slate-300"> </td>
title </tr>
</td> <tr>
<td> <td className="border border-slate-300 min-w-max px-9">
<input className="border-2 border-sky-500 rounded w-full" title
onChange={titleChange} </td>
defaultValue={img.title} <td>
/> <input
</td> className="border-2 border-sky-500 rounded w-full"
</tr> onChange={titleChange}
</tbody> defaultValue={img.title}
</table> />
<div className="text-end"> </td>
<button type="submit" className="border-2"> </tr>
수정 </tbody>
</button> </table>
<button className="border-2"> <div className="text-center pt-10 whitespace-nowrap">
<Link to={`/admin`}> <button
취소 type="submit"
</Link> className="border-2 sm:mr-3 md:mr-10 md:text-lg"
</button> >
</div> 수정
</form> </button>
<Outlet /> <button className="border-2 sm:mr-3 md:mr-10 md:text-lg">
</div> <Link to={`/admin`}>취소</Link>
); </button>
}; </div>
</form>
{/* <Outlet /> */}
</div>
<div className="bg-lime-100 h-12" />
</div>
);
}
...@@ -49,13 +49,13 @@ export default function Login() { ...@@ -49,13 +49,13 @@ export default function Login() {
return ( return (
<div className="flex flex-col items-center my-10"> <div className="flex flex-col items-center my-10">
<div className="bg-white w-1/2 md:w-1/3 my-8 text-center text-2xl"> <div className="w-1/2 md:w-1/3 my-8 text-center text-2xl font-semibold">
<Link to="/">로그인</Link> <Link to="/">로그인</Link>
</div> </div>
<div className="flex flex-col w-full md:w-3/5 p-8 md:p-4"> <div className="flex flex-col w-full md:w-3/5 p-8 md:p-4">
<form <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
className="flex flex-col md:flex-row md:justify-around border-2 border-black rounded-xl p-8 gap-y-4" className="flex flex-col bg-white md:flex-row md:justify-around border-2 border-black rounded-xl p-8 gap-y-4"
> >
<div className="flex flex-col md:w-2/3 gap-2"> <div className="flex flex-col md:w-2/3 gap-2">
<input <input
...@@ -101,12 +101,13 @@ export default function Login() { ...@@ -101,12 +101,13 @@ export default function Login() {
</div> </div>
)} )}
<div className="flex justify-around m-4"> <div className="flex justify-around m-4">
<button className="bg-white "> <button>
<Link to="/signup">회원가입</Link> <Link to="/signup">회원가입</Link>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div className="bg-lime-100 h-36" />
</div> </div>
); );
} }
...@@ -68,91 +68,94 @@ export default function Profile() { ...@@ -68,91 +68,94 @@ export default function Profile() {
}, []); }, []);
return ( return (
<div className="grid bg-white rounded shadow-lg mb-5"> <div>
<form className="mx-24 " onSubmit={handleSubmit}> <div className="grid bg-white rounded shadow-lg mb-5">
<div className=" mt-7 text-2xl">프로필 수정</div> <form className="mx-24 " onSubmit={handleSubmit}>
<div className=" mt-10 border-0 border-y-2 border-gray-400"> <div className=" mt-7 text-2xl">프로필 수정</div>
<div className="flex h-20"> <div className=" mt-10 border-0 border-y-2 border-gray-400">
<div className="w-24 border-0 border-r-2 bg-gray-100 grid place-items-center whitespace-nowrap"> <div className="flex h-20">
Email <div className="w-24 border-0 border-r-2 bg-gray-100 grid place-items-center whitespace-nowrap">
</div> Email
<div className=" grid place-items-center px-4 whitespace-nowrap"> </div>
{email} <div className=" grid place-items-center px-4 whitespace-nowrap">
</div> {email}
</div> </div>
<div className="flex border-0 border-t-2">
<div className="w-24 border-0 border-r-2 bg-gray-100 grid place-items-center whitespace-nowrap">
사진
</div> </div>
<div className="flex py-4 "> <div className="flex border-0 border-t-2">
<div className=""> <div className="w-24 border-0 border-r-2 bg-gray-100 grid place-items-center whitespace-nowrap">
<div className="overflow-hidden w-28 h-28 rounded-full border-2 mx-3 mb-3"> 사진
{imageSrc ? ( </div>
<img <div className="flex py-4 ">
src={imageSrc} <div className="">
className="object-cover object-center h-full" <div className="overflow-hidden w-28 h-28 rounded-full border-2 mx-3 mb-3">
/> {imageSrc ? (
) : (
avatarUrl && (
<img <img
src={"http://localhost:3000/images/" + avatarUrl} src={imageSrc}
className="object-cover object-center h-full" className="object-cover object-center h-full"
/> />
) ) : (
)} avatarUrl && (
<img
src={"http://localhost:3000/images/" + avatarUrl}
className="object-cover object-center h-full"
/>
)
)}
</div>
<input
type="file"
name="avatar"
id="avatar"
className="hidden"
onChange={handleChange}
></input>
<label
htmlFor="avatar"
className="border-2 m-5 whitespace-nowrap "
>
이미지 선택
</label>
</div>
<div className="pl-10 flex place-self-center text-gray-400 text-sm whitespace-nowrap">
{"<새로운 이미지를 넣어보세요!>"}
</div> </div>
<input
type="file"
name="avatar"
id="avatar"
className="hidden"
onChange={handleChange}
></input>
<label
htmlFor="avatar"
className="border-2 m-5 whitespace-nowrap "
>
이미지 선택
</label>
</div>
<div className="pl-10 flex place-self-center text-gray-400 text-sm whitespace-nowrap">
{"<새로운 이미지를 넣어보세요!>"}
</div> </div>
</div> </div>
</div> <div className="flex border-0 border-t-2 h-20">
<div className="flex border-0 border-t-2 h-20"> <div className="w-24 border-0 border-r-2 bg-gray-100 grid place-items-center whitespace-nowrap">
<div className="w-24 border-0 border-r-2 bg-gray-100 grid place-items-center whitespace-nowrap"> 이름
이름 </div>
<input
name="name"
placeholder={profile.name}
className=" placeholder:text-black my-6 ml-5 border-2 "
onChange={handleChange}
/>
</div> </div>
<input
name="name"
placeholder={profile.name}
className=" placeholder:text-black my-6 ml-5 border-2 "
onChange={handleChange}
/>
</div> </div>
</div> <div className="flex mb-5 justify-center gap-x-3">
<div className="flex mb-5 justify-center gap-x-3"> <button
<button onClick={handleSubmit}
onClick={handleSubmit} className=" mt-5 h-12 w-1/5 border-2 border-blue-400 text-lg place-self-center whitespace-nowrap"
className=" mt-5 h-12 w-1/5 border-2 border-blue-400 text-lg place-self-center whitespace-nowrap" >
> 저장하기
저장하기 </button>
</button>
<button className=" mt-5 h-12 w-1/5 text-lg border-2 border-orange-400 place-self-center whitespace-nowrap"> <button className=" mt-5 h-12 w-1/5 text-lg border-2 border-orange-400 place-self-center whitespace-nowrap">
<Link to="/">취소</Link> <Link to="/">취소</Link>
</button> </button>
<button <button
type="button" type="button"
onClick={onDelete} onClick={onDelete}
className=" mt-5 h-12 w-1/5 text-lg border-2 border-red-400 place-self-center whitespace-nowrap" className=" mt-5 h-12 w-1/5 text-lg border-2 border-red-400 place-self-center whitespace-nowrap"
> >
계정 삭제 계정 삭제
</button> </button>
</div> </div>
</form> </form>
</div>
<div className="bg-lime-100 h-4" />
</div> </div>
); );
} }
...@@ -68,86 +68,89 @@ export default function Signup() { ...@@ -68,86 +68,89 @@ export default function Signup() {
} }
return ( return (
<div className="flex flex-col"> <div>
<div className="flex place-items-strat ml-2 mt-8 text-center text-2xl "> <div className="flex flex-col shadow-lg bg-white rounded">
<Link to="/">회원가입</Link> <div className="grid place-items-center ml-2 mt-8 text-center text-2xl ">
</div> <Link to="/">회원가입</Link>
</div>
<form onSubmit={handleSubmit} className="flex flex-col mt-16 gap-y-4"> <form onSubmit={handleSubmit} className="flex flex-col mt-16 gap-y-4">
<div className="flex flex-col "> <div className="flex flex-col px-32 pb-5">
<div className="border-0 border-y-2 border-black"> <div className="border-0 border-y-2 border-black">
<div className="h-16 flex "> <div className="h-16 flex">
<div className="whitespace-nowrap grid place-items-center w-32 lg:basis-1/5 shrink-0 border-0 border-r-2"> <div className="whitespace-nowrap grid place-items-center w-32 lg:basis-1/5 shrink-0 border-0 border-r-2">
이름 이름
</div>
<div className="flex items-center mx-5">
<input
className="h-10 w-4/5 lg:w-60 border-2 focus:border-black"
type="text"
name="name"
onChange={handleChange}
/>
</div>
</div> </div>
<div className="flex items-center mx-5"> <div className="h-16 flex border-0 border-t-2">
<input <div className="whitespace-nowrap grid place-items-center w-32 lg:basis-1/5 shrink-0 border-0 border-r-2">
className="h-10 w-4/5 lg:w-60 border-2 focus:border-black" 이메일
type="text" </div>
name="name" <div className="flex items-center mx-5">
onChange={handleChange} <input
/> className=" w-4/5 h-10 lg:w-60 border-2 focus:border-black"
type="email"
name="email"
onChange={handleChange}
/>
</div>
</div> </div>
</div> <div className="h-16 flex border-0 border-t-2">
<div className="h-16 flex border-0 border-t-2"> <div className="whitespace-nowrap grid place-items-center w-32 lg:basis-1/5 shrink-0 border-0 border-r-2">
<div className="whitespace-nowrap grid place-items-center w-32 lg:basis-1/5 shrink-0 border-0 border-r-2"> 비밀번호
이메일 </div>
<div className="flex items-center mx-5">
<input
className="w-4/5 h-10 lg:w-60 border-2 focus:border-black"
type="password"
name="password"
onChange={handleChange}
/>
</div>
</div> </div>
<div className="flex items-center mx-5">
<input
className=" w-4/5 h-10 lg:w-60 border-2 focus:border-black"
type="email"
name="email"
onChange={handleChange}
/>
</div>
</div>
<div className="h-16 flex border-0 border-t-2">
<div className="whitespace-nowrap grid place-items-center w-32 lg:basis-1/5 shrink-0 border-0 border-r-2">
비밀번호
</div>
<div className="flex items-center mx-5">
<input
className="w-4/5 h-10 lg:w-60 border-2 focus:border-black"
type="password"
name="password"
onChange={handleChange}
/>
</div>
</div>
<div className="h-16 flex border-0 border-t-2"> <div className="h-16 flex border-0 border-t-2">
<div className="whitespace-nowrap grid place-items-center w-32 lg:basis-1/5 shrink-0 border-0 border-r-2"> <div className="whitespace-nowrap grid place-items-center w-32 lg:basis-1/5 shrink-0 border-0 border-r-2">
비밀번호 확인 비밀번호 확인
</div> </div>
<div className="flex items-center mx-5"> <div className="flex items-center mx-5">
<input <input
className="w-4/5 h-10 lg:w-60 border-2 focus:border-black" className="w-4/5 h-10 lg:w-60 border-2 focus:border-black"
type="password" type="password"
name="password2" name="password2"
onChange={handleChange} onChange={handleChange}
/> />
</div>
</div> </div>
</div> </div>
</div> {error && (
{error && ( <div className="text-red-500 text-sm">
<div className="text-red-500 text-sm"> <p>{error}</p>
<p>{error}</p> </div>
</div>
)}
<button
disabled={disabled}
className="border-b border-white mt-5 h-12 w-52 text-white text-lg bg-amber-400 place-self-center"
>
{loading && (
<SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-slate" />
)} )}
회원가입
</button> <button
</div> disabled={disabled}
</form> className="border-b border-white mt-5 h-12 w-52 text-white text-lg bg-amber-400 place-self-center"
>
{loading && (
<SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-slate" />
)}
회원가입
</button>
</div>
</form>
</div>
<div className="bg-lime-100 h-36" />
</div> </div>
); );
} }
...@@ -41,17 +41,22 @@ export default function BoardPage() { ...@@ -41,17 +41,22 @@ export default function BoardPage() {
}; };
const titleHandleClick = async (event: MouseEvent<HTMLButtonElement>) => { const titleHandleClick = async (event: MouseEvent<HTMLButtonElement>) => {
const postId = event.currentTarget.id; if (!user.isLoggedIn) {
const newpost = posts?.find((element) => { alert("로그인이 필요합니다.");
if (element._id === postId) { navigate("/login", { replace: true });
return element; } else {
const postId = event.currentTarget.id;
const newpost = posts?.find((element) => {
if (element._id === postId) {
return element;
}
});
if (!(newpost?._id === undefined)) {
const post = newpost;
const res = await postApi.addCounts(post._id, post.counts);
// console.log(res);
setPosts(res);
} }
});
if (!(newpost?._id === undefined)) {
const post = newpost;
const res = await postApi.addCounts(post._id, post.counts);
// console.log(res);
setPosts(res);
} }
}; };
......
...@@ -96,6 +96,7 @@ export default function Body() { ...@@ -96,6 +96,7 @@ export default function Body() {
</div> </div>
</div> </div>
<Outlet /> <Outlet />
<div className="bg-lime-100 h-16" />
</div> </div>
// Body Page // Body Page
); );
......
...@@ -14,7 +14,7 @@ export default function Header() { ...@@ -14,7 +14,7 @@ export default function Header() {
}; };
// bg-gradient-to-t from-sky-200 // bg-gradient-to-t from-sky-200
return ( return (
<div className="flex flex-col bg-lime-100"> <div className="flex flex-col bg-lime-100 ">
<div className="flex flex-col md:px-14 lg:px-52 z-10 "> <div className="flex flex-col md:px-14 lg:px-52 z-10 ">
<div className="flex flex-col-reverse pt-3 pb-12 "> <div className="flex flex-col-reverse pt-3 pb-12 ">
<div className="flex mt-5 justify-between pr-3"> <div className="flex mt-5 justify-between pr-3">
...@@ -85,6 +85,7 @@ export default function Header() { ...@@ -85,6 +85,7 @@ export default function Header() {
<Outlet /> <Outlet />
</div> </div>
<div className="bg-right bg-cover z-0 absolute w-full h-44 overflow-hidden object-cover object-center bg-[url('https://a-static.besthdwallpaper.com/seom-punggyeong-ilreoseuteu-byeogji-3840x1200-81006_62.jpg')]"></div> <div className="bg-right bg-cover z-0 absolute w-full h-44 overflow-hidden object-cover object-center bg-[url('https://a-static.besthdwallpaper.com/seom-punggyeong-ilreoseuteu-byeogji-3840x1200-81006_62.jpg')]"></div>
<div className="bg-lime-100 h-12" />
</div> </div>
); );
} }
...@@ -7,7 +7,7 @@ type ThemeProps = { ...@@ -7,7 +7,7 @@ type ThemeProps = {
export default function Theme({ handleClick }: ThemeProps) { export default function Theme({ handleClick }: ThemeProps) {
const [active, setActive] = useState(0); const [active, setActive] = useState(0);
const onactive = "whitespace-nowrap px-5 text-sky-300 "; const onactive = "whitespace-nowrap px-5 text-lime-500 ";
const offactive = "whitespace-nowrap px-5 "; const offactive = "whitespace-nowrap px-5 ";
const clickActive = (a: number) => { const clickActive = (a: number) => {
...@@ -16,7 +16,7 @@ export default function Theme({ handleClick }: ThemeProps) { ...@@ -16,7 +16,7 @@ export default function Theme({ handleClick }: ThemeProps) {
return ( return (
<div className=" overflow-x-auto flex rounded py-2 md:py-4 md:pl-3 shadow-lg divide-x-2 bg-white"> <div className=" overflow-x-auto flex rounded py-2 md:py-4 md:pl-3 shadow-lg divide-x-2 bg-white">
<div onClick={() => clickActive(1)}> <div onClick={() => clickActive(1)} className="px-0 md:px-2">
<button <button
id={"surfing"} id={"surfing"}
onClick={handleClick} onClick={handleClick}
...@@ -25,7 +25,7 @@ export default function Theme({ handleClick }: ThemeProps) { ...@@ -25,7 +25,7 @@ export default function Theme({ handleClick }: ThemeProps) {
서핑 서핑
</button> </button>
</div> </div>
<div onClick={() => clickActive(2)}> <div onClick={() => clickActive(2)} className="px-0 md:px-2">
<button <button
id={"activity"} id={"activity"}
onClick={handleClick} onClick={handleClick}
...@@ -34,7 +34,7 @@ export default function Theme({ handleClick }: ThemeProps) { ...@@ -34,7 +34,7 @@ export default function Theme({ handleClick }: ThemeProps) {
액티비티 액티비티
</button> </button>
</div> </div>
<div onClick={() => clickActive(3)}> <div onClick={() => clickActive(3)} className="px-0 md:px-2">
<button <button
id={"camping"} id={"camping"}
onClick={handleClick} onClick={handleClick}
...@@ -43,7 +43,7 @@ export default function Theme({ handleClick }: ThemeProps) { ...@@ -43,7 +43,7 @@ export default function Theme({ handleClick }: ThemeProps) {
캠핑 캠핑
</button> </button>
</div> </div>
<div onClick={() => clickActive(4)}> <div onClick={() => clickActive(4)} className="px-0 md:px-2">
<button <button
id={"skiing"} id={"skiing"}
onClick={handleClick} onClick={handleClick}
...@@ -52,7 +52,7 @@ export default function Theme({ handleClick }: ThemeProps) { ...@@ -52,7 +52,7 @@ export default function Theme({ handleClick }: ThemeProps) {
스키 스키
</button> </button>
</div> </div>
<div onClick={() => clickActive(5)}> <div onClick={() => clickActive(5)} className="px-0 md:px-2">
<button <button
id={"boat"} id={"boat"}
onClick={handleClick} onClick={handleClick}
...@@ -61,7 +61,7 @@ export default function Theme({ handleClick }: ThemeProps) { ...@@ -61,7 +61,7 @@ export default function Theme({ handleClick }: ThemeProps) {
보트 보트
</button> </button>
</div> </div>
<div onClick={() => clickActive(6)}> <div onClick={() => clickActive(6)} className="px-0 md:px-2">
<button <button
id={"desert"} id={"desert"}
onClick={handleClick} onClick={handleClick}
...@@ -70,7 +70,7 @@ export default function Theme({ handleClick }: ThemeProps) { ...@@ -70,7 +70,7 @@ export default function Theme({ handleClick }: ThemeProps) {
사막 사막
</button> </button>
</div> </div>
<div onClick={() => clickActive(7)}> <div onClick={() => clickActive(7)} className="px-0 md:px-2">
<button <button
id={"golf"} id={"golf"}
onClick={handleClick} onClick={handleClick}
...@@ -79,7 +79,7 @@ export default function Theme({ handleClick }: ThemeProps) { ...@@ -79,7 +79,7 @@ export default function Theme({ handleClick }: ThemeProps) {
골프 골프
</button> </button>
</div> </div>
<div onClick={() => clickActive(8)}> <div onClick={() => clickActive(8)} className="px-0 md:px-2">
<button <button
id={"cave"} id={"cave"}
onClick={handleClick} onClick={handleClick}
...@@ -88,7 +88,7 @@ export default function Theme({ handleClick }: ThemeProps) { ...@@ -88,7 +88,7 @@ export default function Theme({ handleClick }: ThemeProps) {
동굴 동굴
</button> </button>
</div> </div>
<div onClick={() => clickActive(9)}> <div onClick={() => clickActive(9)} className="px-0 md:px-2">
<button <button
id={"history"} id={"history"}
onClick={handleClick} onClick={handleClick}
...@@ -97,7 +97,7 @@ export default function Theme({ handleClick }: ThemeProps) { ...@@ -97,7 +97,7 @@ export default function Theme({ handleClick }: ThemeProps) {
문화재 문화재
</button> </button>
</div> </div>
<div onClick={() => clickActive(10)}> <div onClick={() => clickActive(10)} className="px-0 md:px-2">
<button <button
id={"zoo"} id={"zoo"}
onClick={handleClick} onClick={handleClick}
...@@ -106,7 +106,7 @@ export default function Theme({ handleClick }: ThemeProps) { ...@@ -106,7 +106,7 @@ export default function Theme({ handleClick }: ThemeProps) {
동물원 동물원
</button> </button>
</div> </div>
<div onClick={() => clickActive(11)}> <div onClick={() => clickActive(11)} className="px-0 md:px-2">
<button <button
id={"cycling"} id={"cycling"}
onClick={handleClick} onClick={handleClick}
......
...@@ -16,7 +16,7 @@ export default function Citylist({ handleClick }: CityProps) { ...@@ -16,7 +16,7 @@ export default function Citylist({ handleClick }: CityProps) {
}; };
return ( return (
<div className="overflow-auto w-full md:w-36 bg-white flex flex-row md:flex-col md:mr-24 shadow-lg"> <div className="overflow-auto w-full md:w-36 bg-white flex flex-row md:flex-col md:mr-24 shadow-lg">
<div onClick={() => clickActive(1)}> <div onClick={() => clickActive(1)}>
<button <button
id={"Seoul"} id={"Seoul"}
......
...@@ -72,11 +72,11 @@ export function IntoPost() { ...@@ -72,11 +72,11 @@ export function IntoPost() {
<div className="flex basis-1/2 whitespace-nowrap px-0.5 md:px-2"> <div className="flex basis-1/2 whitespace-nowrap px-0.5 md:px-2">
작성일 : {posts?.date.slice(0, 10)} 작성일 : {posts?.date.slice(0, 10)}
</div> </div>
<div className="flex hidden md:whitespace-nowrap md:px-2 "> <div className="md:flex hidden md:whitespace-nowrap md:px-2 ">
{" "} {" "}
{posts?.city} {posts?.city}
</div> </div>
<div className="flex hidden md:whitespace-nowrap md:px-2"> <div className="md:flex hidden md:whitespace-nowrap md:px-2">
{" "} {" "}
{posts?.theme} {posts?.theme}
</div> </div>
......
...@@ -12,11 +12,11 @@ export default function Post({ handleClick, post }: Props) { ...@@ -12,11 +12,11 @@ export default function Post({ handleClick, post }: Props) {
return ( return (
<div className="flex flex-row h-16 divide-x-2 border-2 border-solid"> <div className="flex flex-row h-16 divide-x-2 border-2 border-solid">
<div className="basis-full"> <div className="basis-full">
<Link to={`/post/${post._id}`} state={post}> <button id={post._id} onClick={handleClick}>
<button id={post._id} onClick={handleClick}> <Link to={`/post/${post._id}`} state={post}>
{post.title} {post.title}
</button> </Link>
</Link> </button>
</div> </div>
<div className="basis-3/12">{post.date.slice(0, 10)}</div> <div className="basis-3/12">{post.date.slice(0, 10)}</div>
<div className="basis-2/12">{post.counts}</div> <div className="basis-2/12">{post.counts}</div>
......
...@@ -18,8 +18,8 @@ export default function Posting() { ...@@ -18,8 +18,8 @@ export default function Posting() {
const [user, setUser] = useState<PostType>({ const [user, setUser] = useState<PostType>({
title: "", title: "",
text: "", text: "",
theme: "", theme: "theme",
city: "", city: "city",
date: "", date: "",
user: { user: {
_id: "", _id: "",
...@@ -107,11 +107,11 @@ export default function Posting() { ...@@ -107,11 +107,11 @@ export default function Posting() {
alert("사진을 첨부해 주세요."); alert("사진을 첨부해 주세요.");
setError("사진을 첨부해 주세요."); setError("사진을 첨부해 주세요.");
return false; return false;
} else if (equals(city, "city")) { } else if (equals(user.city, "city")) {
alert("도시를 선택해 주세요."); alert("도시를 선택해 주세요.");
setError("도시를 선택해 주세요."); setError("도시를 선택해 주세요.");
return false; return false;
} else if (equals(theme, "theme")) { } else if (equals(user.theme, "theme")) {
alert("테마를 선택해 주세요."); alert("테마를 선택해 주세요.");
setError("테마를 선택해 주세요."); setError("테마를 선택해 주세요.");
return false; return false;
...@@ -205,11 +205,11 @@ export default function Posting() { ...@@ -205,11 +205,11 @@ export default function Posting() {
<select <select
name="city" name="city"
className="border-2 border-sky-400 text-xs h-6 place-self-center" className="border-2 border-sky-400 text-xs h-6 place-self-center"
onChange={cityChange} onChange={cityChange}
defaultValue="질문종류" defaultValue="city"
> >
<option value="질문종류">도시</option> <option value="city">도시</option>
<option value="Seoul">서울</option> <option value="Seoul">서울</option>
<option value="Busan">부산</option> <option value="Busan">부산</option>
<option value="Incheon">인천</option> <option value="Incheon">인천</option>
...@@ -226,9 +226,9 @@ export default function Posting() { ...@@ -226,9 +226,9 @@ export default function Posting() {
name="theme" name="theme"
className="border-2 border-sky-400 text-xs h-6 place-self-center" className="border-2 border-sky-400 text-xs h-6 place-self-center"
onChange={themeChange} onChange={themeChange}
defaultValue="질문종류" defaultValue="theme"
> >
<option value="질문종류">테마</option> <option value="theme">테마</option>
<option value="cycling">사이클링</option> <option value="cycling">사이클링</option>
<option value="surfing">서핑</option> <option value="surfing">서핑</option>
<option value="activity">액티비티</option> <option value="activity">액티비티</option>
......
...@@ -22,6 +22,10 @@ export const authenticate = asyncWrap( ...@@ -22,6 +22,10 @@ export const authenticate = asyncWrap(
if (req.auth) { if (req.auth) {
const { userId } = req.auth; const { userId } = req.auth;
const user = req.user; const user = req.user;
console.log("req.user", req.user);
console.log("user.id", user.id);
console.log("userId", userId);
if (user && user.id === userId) { if (user && user.id === userId) {
return next(); return next();
} else { } else {
......
...@@ -70,11 +70,23 @@ export const updateMainimg = asyncWrap(async (reqExp, res) => { ...@@ -70,11 +70,23 @@ export const updateMainimg = asyncWrap(async (reqExp, res) => {
// const { id } = reqExp.params; // const { id } = reqExp.params;
const { id, theme, city, title } = req.body; const { id, theme, city, title } = req.body;
const { updatemainimg }: { updatemainimg: formidable.File } = req.files; const { updatemainimg }: { updatemainimg: formidable.File } = req.files;
console.log("전부 제대로", id,theme, city, title, updatemainimg) console.log("전부 제대로", id, theme, city, title, updatemainimg);
const img = await mainimgDb.updateOneMainimg(id, theme,city,title, updatemainimg); if (updateMainimg === undefined) {
const img = await mainimgDb.updateOneMainimg(id, theme, city, title);
res.json(img); return res.json(img);
}) } else {
const img = await mainimgDb.updateOneMainimg(
id,
theme,
city,
title,
updatemainimg
);
return res.json(img);
}
});
// const form = formidable({ // const form = formidable({
// uploadDir: "uploads", // uploadDir: "uploads",
// keepExtensions: true, // keepExtensions: true,
......
import { NextFunction, Request, Response } from "express"; import { NextFunction, Request, Response } from "express";
import formidable, { Fields, Files } from "formidable"; import formidable, { Fields, Files } from "formidable";
import { TypedRequestAuth } from "./auth.controller"; import { TypedRequestAuth } from "./auth.controller";
import equals from "validator/lib/equals";
import { asyncWrap } from "../helpers"; import { asyncWrap } from "../helpers";
import { postDb, userDb } from "../db"; import { postDb, userDb } from "../db";
import { TypedRequest } from "../types"; import { TypedRequest } from "../types";
import { Types } from "mongoose"; import { Types } from "mongoose";
export const userByPostId = ( export const userByPostId = async (
reqExp: Request, reqExp: Request,
res: Response, res: Response,
next: NextFunction, next: NextFunction,
postId: string postId: string
) => { ) => {
const req = reqExp as TypedRequest; const req = reqExp as TypedRequest;
req.user = userDb.findUserByPostId(postId);
req.user = await userDb.findUserByPostId(postId);
next(); next();
}; };
......
...@@ -44,26 +44,22 @@ export const updateOneMainimg = async ( ...@@ -44,26 +44,22 @@ export const updateOneMainimg = async (
theme: string, theme: string,
city: string, city: string,
title: string, title: string,
fileInfo: formidable.File fileInfo?: formidable.File
// originalfilename?: string | null,
// newfilename?: string
) => { ) => {
// const newMainimg = await Mainimg.findById(_Id) const newMainimg = await Mainimg.findById(_Id).populate<{
const newMainimg = await Mainimg.findById(_Id).populate<{ fileInfo: IFileInfo }>( fileInfo: IFileInfo;
"fileInfo" }>("fileInfo");
); // console.log("error2", newMainimg);
console.log("error2", newMainimg);
if (!newMainimg) { if (!newMainimg) {
throw new Error("mainimg가 존재하지 않습니다") throw new Error("mainimg가 존재하지 않습니다");
} }
if ( if (
fileInfo.originalFilename && fileInfo?.originalFilename &&
newMainimg?.fileInfo.originalfilename !== fileInfo.originalFilename newMainimg?.fileInfo.originalfilename !== fileInfo?.originalFilename
) { ) {
// 같지 않으면 기존의 파일을 디스크에서 삭제한 후 // 같지 않으면 기존의 파일을 디스크에서 삭제한 후
try { try {
console.log("picturepath", newMainimg.fileInfo.picturepath) // console.log("picturepath", newMainimg.fileInfo.picturepath)
await fs.unlink(newMainimg.fileInfo.picturepath); await fs.unlink(newMainimg.fileInfo.picturepath);
} catch (error) { } catch (error) {
console.log("error", error); console.log("error", error);
...@@ -76,44 +72,10 @@ export const updateOneMainimg = async ( ...@@ -76,44 +72,10 @@ export const updateOneMainimg = async (
await mainimgAvatar.save(); await mainimgAvatar.save();
} }
newMainimg.theme = theme; newMainimg.theme = theme;
newMainimg.city = city; newMainimg.city = city;
newMainimg.title = title; newMainimg.title = title;
await newMainimg.save(); await newMainimg.save();
console.log("mainimg updated", newMainimg); console.log("mainimg updated", newMainimg);
return newMainimg; return newMainimg;
} };
// if (!(newMainimg?.fileInfo === undefined)) {
// if (originalfilename === undefined) {
// await Mainimg.findByIdAndUpdate(newMainimg._id, {
// theme: theme,
// city: city,
// title: title,
// });
// console.log("errrror4");
// } else if (
// !(originalfilename === undefined) &&
// (!(theme === undefined) ||
// !(city === undefined) ||
// !(title === undefined))
// ) {
// await Mainimg.findByIdAndUpdate(newMainimg._id, {
// theme: theme,
// city: city,
// title: title,
// });
// await FileInfo.findByIdAndUpdate(newMainimg.fileInfo._id, {
// originalfilename: originalfilename,
// newfilename: newfilename,
// });
// console.log("error6");
// } else {
// await FileInfo.findByIdAndUpdate(newMainimg.fileInfo._id, {
// originalfilename: originalfilename,
// newfilename: newfilename,
// });
// console.log("error5", newfilename, originalfilename, theme, city, title);
// }
// } else console.log("error3", newMainimg);
// };
\ No newline at end of file
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