Skip to content

GitLab

Commit 154cb55a authored by Kim, MinGyu's avatar Kim, MinGyu
Browse files

css개선 및 bg 약간 수정

parent 8fb026f5
Hide whitespace changes
Inline Side-by-side
frontend/src/App.tsx
View file @ 154cb55a
...@@ -14,9 +14,9 @@ export const App = () => { ...@@ -14,9 +14,9 @@ export const App = () => {
<BrowserRouter> <BrowserRouter>
<Routes> <Routes>
<Route element={<Layout />}> <Route element={<Layout />}>
<Route path="login" element={<Login />} />
<Route path="signup" element={<Signup />} />
<Route path="/" element={<Header />}> <Route path="/" element={<Header />}>
<Route path="login" element={<Login />} />
<Route path="signup" element={<Signup />} />
<Route index element={<Body />} /> <Route index element={<Body />} />
<Route <Route
path="posting" path="posting"
......
frontend/src/apis/profile.api.ts
View file @ 154cb55a
...@@ -11,6 +11,6 @@ export const profileUpload = async (formdata: FormData) => { ...@@ -11,6 +11,6 @@ export const profileUpload = async (formdata: FormData) => {
}; };
export const deleteUser = async () => { export const deleteUser = async () => {
const success = await axios.post(`${baseUrl}/profile/delete`); const success = await axios.delete(`${baseUrl}/profile/delete`);
return success; return success;
}; };
frontend/src/auth/login.tsx
View file @ 154cb55a
...@@ -36,7 +36,7 @@ export default function Login() { ...@@ -36,7 +36,7 @@ export default function Login() {
setLoading(true); setLoading(true);
await login(user.email, user.password, () => { await login(user.email, user.password, () => {
if (user.email == "admin@korea.ac.kr" && user.password == "111111") { if (user.email == "admin@korea.ac.kr" && user.password == "111111") {
navigate("/admin", { replace: true }) navigate("/admin", { replace: true });
} else { } else {
navigate("/", { replace: true }); navigate("/", { replace: true });
} }
...@@ -54,9 +54,9 @@ export default function Login() { ...@@ -54,9 +54,9 @@ 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="bg-white w-1/2 md:w-1/3 my-8 text-center text-2xl">
<Link to="/">Travel Report</Link> <Link to="/">로그인</Link>
</div> </div>
<div className="flex flex-col w-full md:w-2/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 md:flex-row md:justify-around border-2 border-black rounded-xl p-8 gap-y-4"
......
frontend/src/auth/profile.tsx
View file @ 154cb55a
...@@ -59,14 +59,14 @@ export default function Profile() { ...@@ -59,14 +59,14 @@ export default function Profile() {
formdata.append("picture", file); formdata.append("picture", file);
formdata.append("nickname", nickname); formdata.append("nickname", nickname);
console.log("both"); console.log("both");
console.log(formdata);
await profileApi.profileUpload(formdata); await profileApi.profileUpload(formdata);
} else if (!(nickname === "")) { } else if (!(file === undefined) && nickname === "") {
formdata.append("nickname", nickname);
console.log("picture");
await profileApi.profileUpload(formdata);
} else if (!(file === undefined)) {
formdata.append("picture", file); formdata.append("picture", file);
await profileApi.profileUpload(formdata); await profileApi.profileUpload(formdata);
} else if (file === undefined && !(nickname === "")) {
formdata.append("nickname", nickname);
await profileApi.profileUpload(formdata);
} else { } else {
alert("수정할 정보를 입력해주세요."); alert("수정할 정보를 입력해주세요.");
} }
...@@ -87,22 +87,24 @@ export default function Profile() { ...@@ -87,22 +87,24 @@ export default function Profile() {
}, []); }, []);
return ( return (
<div className="grid md:px-60"> <div className="grid ">
<form className="justify-items-center"> <form className="justify-items-center">
<div className="ml-20 mt-10">프로필 수정</div> <div className=" mt-10">프로필 수정</div>
<div className="grid mt-20 border-0 border-y-2 "> <div className="grid mt-10 border-0 border-y-2 border-gray-400 ">
<div className="flex"> <div className="flex h-20">
<div className="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0"> <div className=" basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0">
Email Email
</div> </div>
<div className="basis-full my-5 p-5">{email}</div> <div className=" basis-full grid place-items-center justify-items-stretch px-4">
{email}
</div>
</div> </div>
<div className="flex border-0 border-t-2"> <div className="flex border-0 border-t-2">
<div className="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0"> <div className="basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0">
사진 사진
</div> </div>
<div className="basis-full p-2 "> <div className="basis-full py-4 ">
<div className="overflow-hidden w-40 h-40 rounded-full border-2 m-5"> <div className="overflow-hidden w-28 h-28 rounded-full border-2 m-5">
{imageSrc ? ( {imageSrc ? (
<img <img
src={imageSrc} src={imageSrc}
...@@ -126,17 +128,16 @@ export default function Profile() { ...@@ -126,17 +128,16 @@ export default function Profile() {
</label> </label>
</div> </div>
</div> </div>
<div className="flex border-0 border-t-2"> <div className="flex border-0 border-t-2 h-20">
<div className="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0"> <div className="basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0">
별명 별명
</div> </div>
<div className="basis-full ">
<input <input
placeholder={placeholder} placeholder={placeholder}
className="basis-full placeholder:text-black my-10 ml-5 border-2" className="basis-1/5 placeholder:text-black my-6 ml-5 border-2 "
onChange={onNickChange} onChange={onNickChange}
/> />
</div>
</div> </div>
</div> </div>
<div className="grid grid-cols-2 my-4 md:mb-20 justify-items-center"> <div className="grid grid-cols-2 my-4 md:mb-20 justify-items-center">
......
frontend/src/auth/signup.tsx
View file @ 154cb55a
...@@ -69,61 +69,61 @@ export default function Signup() { ...@@ -69,61 +69,61 @@ export default function Signup() {
return ( return (
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<div className="p-12 md:w-40 mt-8 bg-red-400 rounded-2xl"> <div className=" md:w-40 mt-8 text-center text-2xl rounded-2xl">
<Link to="/">Travel Report</Link> <Link to="/">회원가입</Link>
</div> </div>
<form
onSubmit={handleSubmit}
className="flex flex-col items-center mt-16 gap-y-4"
>
<input
className="placeholder:text-slate-300 bg-white border border-slate-500 rounded-2xl py-2 pl-9 pr-3 focus:border-black"
placeholder="이름"
type="text"
name="name"
onChange={handleChange}
/>
<input <form onSubmit={handleSubmit} className="flex flex-col mt-16 gap-y-4">
className="placeholder:text-slate-300 bg-white border border-slate-500 rounded-2xl py-2 pl-9 pr-3 focus:border-black" <div className="flex flex-col">
placeholder="이메일" <div className="flex">
type="email" <div className="basis-1/5 shrink-0">이름</div>
name="email" <input
onChange={handleChange} className="border-2 focus:border-black"
/> type="text"
name="name"
<input onChange={handleChange}
className="placeholder:text-slate-300 />
bg-white border border-slate-500 rounded-2xl </div>
py-2 pl-9 pr-3 <div className="flex">
focus:border-black" <div className="basis-1/5 shrink-0">이메일</div>
placeholder="비밀번호" <input
type="password" className="border-2 focus:border-black"
name="password" type="email"
onChange={handleChange} name="email"
/> onChange={handleChange}
/>
<input
className="placeholder:text-slate-300
bg-white border border-slate-500 rounded-2xl
py-2 pl-9 pr-3
focus:border-black"
placeholder="비밀번호 확인"
type="password"
name="password2"
onChange={handleChange}
/>
{error && (
<div className="text-red-500 text-sm">
<p>{error}</p>
</div> </div>
)} <div className="flex">
<button disabled={disabled} className="border-b border-white"> <div className="basis-1/5 shrink-0">비밀번호</div>
{loading && ( <input
<SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-slate" /> className="border-2 focus:border-black"
type="password"
name="password"
onChange={handleChange}
/>
</div>
<div className="flex">
<div className="basis-1/5 shrink-0">비밀번호 확인</div>
<input
className="border-2 focus:border-black"
type="password"
name="password2"
onChange={handleChange}
/>
</div>
{error && (
<div className="text-red-500 text-sm">
<p>{error}</p>
</div>
)} )}
회원가입
</button> <button disabled={disabled} className="border-b border-white">
{loading && (
<SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-slate" />
)}
회원가입
</button>
</div>
</form> </form>
</div> </div>
); );
......
frontend/src/home/header.tsx
View file @ 154cb55a
...@@ -14,63 +14,64 @@ export default function Header() { ...@@ -14,63 +14,64 @@ export default function Header() {
}; };
return ( return (
<div className="flex flex-col "> <div className="flex flex-col md:px-56 ">
<div className="flex py-10 "> <div className="flex flex-col-reverse pt-3 pb-12 border-b-2 ">
<button className="shrink-0 mx-5"> <div className="flex mt-5 justify-between pr-3">
<Link to="/" className="hover:text-sky-300 focus:text-purple-500"> <button className="ml-3 shrink-0 text-2xl">
Travel Report <Link to="/" className="hover:text-sky-300 active:text-purple-500">
</Link> Travel Report
</button> </Link>
</button>
<input <div className="flex ">
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" <input
placeholder="어디로 여행가고 싶나요?" className="ml-10 focus:outline-none focus:border-y-4 focus:border-l-4 focus:border-sky-500 w-20 w-40 md:w-4/5 border-y-4 border-l-4 border-sky-300 pl-9 rounded-l-full focus:border-0"
onChange={handleChange} onChange={handleChange}
/> />
<button className="shrink-0 border-y-4 border-r-4 border-sky-500 rounded-r-full pr-4"> <button className="shrink-0 bg-white 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">
{useAuth().user.isLoggedIn ? (
<div className="flex">
<Link to="/profile" className="mr-2 ">
프로필
</Link>
<div className="border-0 border-r-2"></div>
<div></div>
<button
className="ml-2 mr-2"
onClick={() => {
logout();
}}
>
로그아웃
</button>
<div className="border-0 border-r-2"></div>
<div></div>
</div>
) : (
<button className="shrink-0 bg-white ">
<Link
className="hover:text-sky-300 focus:text-purple-500"
to="/login"
>
로그인
</Link>
</button> </button>
)} </div>
</div>
<div className="flex justify-end">
<div className=" p-3 bg-transparent ">
{useAuth().user.isLoggedIn ? (
<div className="flex text-xs">
<Link to="/profile" className="mr-2 ">
프로필
</Link>
<div className="border-0 border-r-2 border-black "></div>
<div></div>
<button
className="ml-2 mr-2 text-xs"
onClick={() => {
logout();
}}
>
로그아웃
</button>
<div className="border-0 border-r-2 border-black"></div>
<div></div>
</div>
) : (
<button className="shrink-0 bg-transparent pb-1">
<Link
className="hover:text-sky-300 focus:text-purple-500 text-xs"
to="/login"
>
로그인
</Link>
</button>
)}
</div>
<button className="shrink-0 bg-transparent pr-3 text-xs">
<Link
to="/board"
className="hover:text-sky-300 focus:text-purple-500"
>
게시판
</Link>
</button>
</div> </div>
<button className="shrink-0 bg-white">
<Link
to="/board"
className="hover:text-sky-300 focus:text-purple-500"
>
게시판
</Link>
</button>
</div> </div>
<Outlet /> <Outlet />
......
frontend/src/home/theme.tsx
View file @ 154cb55a
...@@ -6,38 +6,82 @@ type ThemeProps = { ...@@ -6,38 +6,82 @@ type ThemeProps = {
export default function Theme({ handleClick }: ThemeProps) { export default function Theme({ handleClick }: ThemeProps) {
return ( return (
<div className="overflow-x-auto flex rounded md:justify-center"> <div className="overflow-x-auto flex rounded md:justify-center py-2 border-b-2 divide-x-2">
<button id={"surfing"} onClick={handleClick} className="shrink-0 px-5 hover:text-sky-300"> <button
id={"surfing"}
onClick={handleClick}
className="shrink-0 px-5 hover:text-sky-300"
>
서핑 서핑
</button> </button>
<button id={"activity"} onClick={handleClick} className="shrink-0 px-5 hover:text-sky-300"> <button
id={"activity"}
onClick={handleClick}
className="shrink-0 px-5 hover:text-sky-300"
>
액티비티 액티비티
</button> </button>
<button id={"camping"} onClick={handleClick} className="shrink-0 px-5 hover:text-sky-300 "> <button
id={"camping"}
onClick={handleClick}
className="shrink-0 px-5 hover:text-sky-300 "
>
캠핑 캠핑
</button> </button>
<button id={"sking"} onClick={handleClick} className="shrink-0 px-5 hover:text-sky-300"> <button
id={"sking"}
onClick={handleClick}
className="shrink-0 px-5 hover:text-sky-300"
>
스키 스키
</button> </button>
<button id={"boat"} onClick={handleClick} className="shrink-0 px-5 hover:text-sky-300"> <button
id={"boat"}
onClick={handleClick}
className="shrink-0 px-5 hover:text-sky-300"
>
보트 보트
</button> </button>
<button id={"desert"} onClick={handleClick} className="shrink-0 px-5 hover:text-sky-300"> <button
id={"desert"}
onClick={handleClick}
className="shrink-0 px-5 hover:text-sky-300"
>
사막 사막
</button> </button>
<button id={"golf"} onClick={handleClick} className="shrink-0 px-5 hover:text-sky-300"> <button
id={"golf"}
onClick={handleClick}
className="shrink-0 px-5 hover:text-sky-300"
>
골프 골프
</button> </button>
<button id={"cave"} onClick={handleClick} className="shrink-0 px-5 hover:text-sky-300"> <button
id={"cave"}
onClick={handleClick}
className="shrink-0 px-5 hover:text-sky-300"
>
동굴 동굴
</button> </button>
<button id={"history"} onClick={handleClick} className="shrink-0 px-5 hover:text-sky-300"> <button
id={"history"}
onClick={handleClick}
className="shrink-0 px-5 hover:text-sky-300"
>
문화재 문화재
</button> </button>
<button id={"zoo"} onClick={handleClick} className="shrink-0 px-5 hover:text-sky-300"> <button
id={"zoo"}
onClick={handleClick}
className="shrink-0 px-5 hover:text-sky-300"
>
동물원 동물원
</button> </button>
<button id={"cycling"} onClick={handleClick} className="shrink-0 px-5 hover:text-sky-300"> <button
id={"cycling"}
onClick={handleClick}
className="shrink-0 px-5 hover:text-sky-300"
>
사이클링 사이클링
</button> </button>
</div> </div>
......
frontend/src/pages/citylist.tsx
View file @ 154cb55a
...@@ -7,74 +7,74 @@ type CityProps = { ...@@ -7,74 +7,74 @@ type CityProps = {
export default function Citylist({ handleClick }: CityProps) { export default function Citylist({ handleClick }: CityProps) {
return ( return (
<div className="overflow-auto w-full flex flex-row md:flex-col md:mr-24 bg-sky-100"> <div className="overflow-auto w-full flex flex-row md:flex-col md:mr-24 bg-sky-100">
<div className="text-center px-5 py-2 bg-sky-300 shrink-0">도시</div> <div className="text-start px-5 py-2 bg-white shrink-0">도시</div>
<button <button
id={"Seoul"} id={"Seoul"}
onClick={handleClick} onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0" className="text-start px-5 py-2 hover:underline shrink-0"
> >
서울 서울
</button> </button>
<button <button
id={"Busan"} id={"Busan"}
onClick={handleClick} onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0" className="text-start px-5 py-2 hover:underline shrink-0"
> >
부산 부산
</button> </button>
<button <button
id={"Incheon"} id={"Incheon"}
onClick={handleClick} onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0" className="text-start px-5 py-2 hover:underline shrink-0"
> >
인천 인천
</button> </button>
<button <button
id={"Daegoo"} id={"Daegoo"}
onClick={handleClick} onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0" className="text-start px-5 py-2 hover:underline shrink-0"
> >
대구 대구
</button> </button>
<button <button
id={"Kwangjoo"} id={"Kwangjoo"}
onClick={handleClick} onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0" className="text-start px-5 py-2 hover:underline shrink-0"
> >
광주 광주
</button> </button>
<button <button
id={"Daejeon"} id={"Daejeon"}
onClick={handleClick} onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0" className="text-start px-5 py-2 hover:underline shrink-0"
> >
대전 대전
</button> </button>
<button <button
id={"Woolsan"} id={"Woolsan"}
onClick={handleClick} onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0" className="text-start px-5 py-2 hover:underline shrink-0"
> >
울산 울산
</button> </button>
<button <button
id={"Sejong"} id={"Sejong"}
onClick={handleClick} onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0" className="text-start px-5 py-2 hover:underline shrink-0"
> >
세종 세종
</button> </button>
<button <button
id={"Dokdo"} id={"Dokdo"}
onClick={handleClick} onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0" className="text-start px-5 py-2 hover:underline shrink-0"
> >
독도 독도
</button> </button>
<button <button
id={"Jeju"} id={"Jeju"}
onClick={handleClick} onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0" className="text-start px-5 py-2 hover:underline shrink-0"
> >
제주 제주
</button> </button>
......
src/controllers/user.controller.ts
View file @ 154cb55a
import { userDb } from "../db"; import { userDb } from "../db";
import { asyncWrap } from "../helpers/asyncWrap"; import { asyncWrap } from "../helpers/asyncWrap";
import { Request } from "express"; import { Request } from "express";
import formidable from "formidable";
import { TypedRequest } from "../types"; import { TypedRequest } from "../types";
export interface TypedRequestAuth<T> extends Request { export interface TypedRequestAuth<T> extends Request {
...@@ -31,35 +30,29 @@ export const getProfile = asyncWrap(async (reqExp, res) => { ...@@ -31,35 +30,29 @@ export const getProfile = asyncWrap(async (reqExp, res) => {
export const postPicture = asyncWrap(async (reqExp, res) => { export const postPicture = asyncWrap(async (reqExp, res) => {
const req = reqExp as TypedRequest; const req = reqExp as TypedRequest;
const { userId } = req.auth; const { userId } = req.auth;
const field = req.body;
const file = req.files;
const form = formidable({ if (!Array.isArray(file.picture)) {
uploadDir: "uploads", //파일 좁히기 중
keepExtensions: true, if (!Array.isArray(field.nickname)) {
multiples: false, const nickname = field.nickname;
}); if (!(file.picture === undefined)) {
const originalfilename = file.picture.originalFilename;
form.parse(req, (err, fields, files) => { const newfilename = file.picture.newFilename;
if (!Array.isArray(files.picture)) { const picturepath = file.picture.filepath;
//파일 좁히기 중 userDb.postPicture(
if (!Array.isArray(fields.nickname)) { userId,
const nickname = fields.nickname; nickname,
if (!(files.picture === undefined)) { originalfilename,
const originalfilename = files.picture.originalFilename; newfilename,
const newfilename = files.picture.newFilename; picturepath
const picturepath = files.picture.filepath; );
userDb.postPicture( } else {
userId, userDb.postPicture(userId, nickname);
nickname,
originalfilename,
newfilename,
picturepath
);
} else {
userDb.postPicture(userId, nickname);
}
} }
} }
}); }
res.json(); res.json();
}); });
...@@ -71,5 +64,7 @@ export const deleteUser = asyncWrap(async (reqExp, res) => { ...@@ -71,5 +64,7 @@ export const deleteUser = asyncWrap(async (reqExp, res) => {
const finish = await userDb.deleteUser(userId); const finish = await userDb.deleteUser(userId);
if (finish?.deletedCount === 1) { if (finish?.deletedCount === 1) {
res.json(true); res.json(true);
} else {
res.status(422).send("삭제에 실패하였습니다.");
} }
}); });
src/db/user.db.ts
View file @ 154cb55a
...@@ -86,13 +86,16 @@ export const postPicture = async ( ...@@ -86,13 +86,16 @@ export const postPicture = async (
nickname: nickname, nickname: nickname,
}); });
} else if (nickname === "") { } else if (nickname === "") {
const ref = FileInfo.findById(profile.fileInfo._id);
console.log(ref);
await FileInfo.findByIdAndUpdate(profile.fileInfo._id, { await FileInfo.findByIdAndUpdate(profile.fileInfo._id, {
originalfilename: originalfilename, originalfilename: originalfilename,
newfilename: newfilename, newfilename: newfilename,
picturepath: picturepath, picturepath: picturepath,
}); });
} else { } else {
await FileInfo.findByIdAndUpdate(profile.fileInfo._id, { const ref = await FileInfo.findByIdAndUpdate(profile.fileInfo._id, {
originalfilename: originalfilename, originalfilename: originalfilename,
newfilename: newfilename, newfilename: newfilename,
picturepath: picturepath, picturepath: picturepath,
......
src/routes/profile.route.ts
View file @ 154cb55a
...@@ -6,8 +6,8 @@ const router = express.Router(); ...@@ -6,8 +6,8 @@ const router = express.Router();
router router
.route("/") .route("/")
.get(authCtrl.requireLogin, userCtrl.getProfile) .get(authCtrl.requireLogin, userCtrl.getProfile)
.post(authCtrl.requireLogin, fileInfoCtrl.uploadFiles, userCtrl.postPicture); //중간에 req쪽에 fields와 files 넣는 미들웨어 추가 .post(authCtrl.requireLogin, fileInfoCtrl.uploadFile, userCtrl.postPicture); //중간에 req쪽에 fields와 files 넣는 미들웨어 추가
router.route("/delete").post(authCtrl.requireLogin, userCtrl.deleteUser); router.route("/delete").delete(authCtrl.requireLogin, userCtrl.deleteUser);
export default router; export default router;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment