Skip to content

GitLab

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

css 수정

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