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 = () => {
<BrowserRouter>
<Routes>
<Route element={<Layout />}>
<Route path="login" element={<Login />} />
<Route path="signup" element={<Signup />} />
<Route path="/" element={<Header />}>
<Route path="login" element={<Login />} />
<Route path="signup" element={<Signup />} />
<Route index element={<Body />} />
<Route
path="posting"
......
frontend/src/apis/profile.api.ts
View file @ 154cb55a
......@@ -11,6 +11,6 @@ export const profileUpload = async (formdata: FormData) => {
};
export const deleteUser = async () => {
const success = await axios.post(`${baseUrl}/profile/delete`);
const success = await axios.delete(`${baseUrl}/profile/delete`);
return success;
};
frontend/src/auth/login.tsx
View file @ 154cb55a
......@@ -36,7 +36,7 @@ export default function Login() {
setLoading(true);
await login(user.email, user.password, () => {
if (user.email == "admin@korea.ac.kr" && user.password == "111111") {
navigate("/admin", { replace: true })
navigate("/admin", { replace: true });
} else {
navigate("/", { replace: true });
}
......@@ -54,9 +54,9 @@ 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">
<Link to="/">Travel Report</Link>
<Link to="/">로그인</Link>
</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
onSubmit={handleSubmit}
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() {
formdata.append("picture", file);
formdata.append("nickname", nickname);
console.log("both");
console.log(formdata);
await profileApi.profileUpload(formdata);
} else if (!(nickname === "")) {
formdata.append("nickname", nickname);
console.log("picture");
await profileApi.profileUpload(formdata);
} else if (!(file === undefined)) {
} else if (!(file === undefined) && nickname === "") {
formdata.append("picture", file);
await profileApi.profileUpload(formdata);
} else if (file === undefined && !(nickname === "")) {
formdata.append("nickname", nickname);
await profileApi.profileUpload(formdata);
} else {
alert("수정할 정보를 입력해주세요.");
}
......@@ -87,22 +87,24 @@ export default function Profile() {
}, []);
return (
<div className="grid md:px-60">
<div className="grid ">
<form className="justify-items-center">
<div className="ml-20 mt-10">프로필 수정</div>
<div className="grid mt-20 border-0 border-y-2 ">
<div className="flex">
<div className="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0">
<div className=" mt-10">프로필 수정</div>
<div className="grid mt-10 border-0 border-y-2 border-gray-400 ">
<div className="flex h-20">
<div className=" basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0">
Email
</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 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 className="basis-full p-2 ">
<div className="overflow-hidden w-40 h-40 rounded-full border-2 m-5">
<div className="basis-full py-4 ">
<div className="overflow-hidden w-28 h-28 rounded-full border-2 m-5">
{imageSrc ? (
<img
src={imageSrc}
......@@ -126,17 +128,16 @@ export default function Profile() {
</label>
</div>
</div>
<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="flex border-0 border-t-2 h-20">
<div className="basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0">
별명
</div>
<div className="basis-full ">
<input
placeholder={placeholder}
className="basis-full placeholder:text-black my-10 ml-5 border-2"
onChange={onNickChange}
/>
</div>
<input
placeholder={placeholder}
className="basis-1/5 placeholder:text-black my-6 ml-5 border-2 "
onChange={onNickChange}
/>
</div>
</div>
<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() {
return (
<div className="flex flex-col items-center">
<div className="p-12 md:w-40 mt-8 bg-red-400 rounded-2xl">
<Link to="/">Travel Report</Link>
<div className=" md:w-40 mt-8 text-center text-2xl rounded-2xl">
<Link to="/">회원가입</Link>
</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
className="placeholder:text-slate-300 bg-white border border-slate-500 rounded-2xl py-2 pl-9 pr-3 focus:border-black"
placeholder="이메일"
type="email"
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="password"
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>
<form onSubmit={handleSubmit} className="flex flex-col mt-16 gap-y-4">
<div className="flex flex-col">
<div className="flex">
<div className="basis-1/5 shrink-0">이름</div>
<input
className="border-2 focus:border-black"
type="text"
name="name"
onChange={handleChange}
/>
</div>
<div className="flex">
<div className="basis-1/5 shrink-0">이메일</div>
<input
className="border-2 focus:border-black"
type="email"
name="email"
onChange={handleChange}
/>
</div>
)}
<button disabled={disabled} className="border-b border-white">
{loading && (
<SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-slate" />
<div className="flex">
<div className="basis-1/5 shrink-0">비밀번호</div>
<input
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>
</div>
);
......
frontend/src/home/header.tsx
View file @ 154cb55a
......@@ -14,63 +14,64 @@ export default function Header() {
};
return (
<div className="flex flex-col ">
<div className="flex py-10 ">
<button className="shrink-0 mx-5">
<Link to="/" className="hover:text-sky-300 focus:text-purple-500">
Travel Report
</Link>
</button>
<input
className="md:ml-20 placeholder:text-white focus:outline-none focus:border-y-4 focus:border-l-4 focus:border-sky-500 md:placeholder:text-slate-400 w-20 md:w-1/2 border-y-4 border-l-4 border-sky-300 pl-9 rounded-l-full focus:border-0"
placeholder="어디로 여행가고 싶나요?"
onChange={handleChange}
/>
<button className="shrink-0 border-y-4 border-r-4 border-sky-500 rounded-r-full pr-4">
{/* <Link to="/search" state={}>
검색
</Link> */}
</button>
<div className="shrink-0 p-3 md:ml-40 h-12">
{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>
<div className="flex flex-col md:px-56 ">
<div className="flex flex-col-reverse pt-3 pb-12 border-b-2 ">
<div className="flex mt-5 justify-between pr-3">
<button className="ml-3 shrink-0 text-2xl">
<Link to="/" className="hover:text-sky-300 active:text-purple-500">
Travel Report
</Link>
</button>
<div className="flex ">
<input
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}
/>
<button className="shrink-0 bg-white border-y-4 border-r-4 border-sky-500 rounded-r-full pr-4">
검색
</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>
<button className="shrink-0 bg-white">
<Link
to="/board"
className="hover:text-sky-300 focus:text-purple-500"
>
게시판
</Link>
</button>
</div>
<Outlet />
......
frontend/src/home/theme.tsx
View file @ 154cb55a
......@@ -6,38 +6,82 @@ type ThemeProps = {
export default function Theme({ handleClick }: ThemeProps) {
return (
<div className="overflow-x-auto flex rounded md:justify-center">
<button id={"surfing"} onClick={handleClick} className="shrink-0 px-5 hover:text-sky-300">
<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>
<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 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 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 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 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 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 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 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 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 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>
</div>
......
frontend/src/pages/citylist.tsx
View file @ 154cb55a
......@@ -7,74 +7,74 @@ type CityProps = {
export default function Citylist({ handleClick }: CityProps) {
return (
<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
id={"Seoul"}
onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0"
className="text-start px-5 py-2 hover:underline shrink-0"
>
서울
</button>
<button
id={"Busan"}
onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0"
className="text-start px-5 py-2 hover:underline shrink-0"
>
부산
</button>
<button
id={"Incheon"}
onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0"
className="text-start px-5 py-2 hover:underline shrink-0"
>
인천
</button>
<button
id={"Daegoo"}
onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0"
className="text-start px-5 py-2 hover:underline shrink-0"
>
대구
</button>
<button
id={"Kwangjoo"}
onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0"
className="text-start px-5 py-2 hover:underline shrink-0"
>
광주
</button>
<button
id={"Daejeon"}
onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0"
className="text-start px-5 py-2 hover:underline shrink-0"
>
대전
</button>
<button
id={"Woolsan"}
onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0"
className="text-start px-5 py-2 hover:underline shrink-0"
>
울산
</button>
<button
id={"Sejong"}
onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0"
className="text-start px-5 py-2 hover:underline shrink-0"
>
세종
</button>
<button
id={"Dokdo"}
onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0"
className="text-start px-5 py-2 hover:underline shrink-0"
>
독도
</button>
<button
id={"Jeju"}
onClick={handleClick}
className="px-5 py-2 hover:underline shrink-0"
className="text-start px-5 py-2 hover:underline shrink-0"
>
제주
</button>
......
src/controllers/user.controller.ts
View file @ 154cb55a
import { userDb } from "../db";
import { asyncWrap } from "../helpers/asyncWrap";
import { Request } from "express";
import formidable from "formidable";
import { TypedRequest } from "../types";
export interface TypedRequestAuth<T> extends Request {
......@@ -31,35 +30,29 @@ export const getProfile = asyncWrap(async (reqExp, res) => {
export const postPicture = asyncWrap(async (reqExp, res) => {
const req = reqExp as TypedRequest;
const { userId } = req.auth;
const field = req.body;
const file = req.files;
const form = formidable({
uploadDir: "uploads",
keepExtensions: true,
multiples: false,
});
form.parse(req, (err, fields, files) => {
if (!Array.isArray(files.picture)) {
//파일 좁히기 중
if (!Array.isArray(fields.nickname)) {
const nickname = fields.nickname;
if (!(files.picture === undefined)) {
const originalfilename = files.picture.originalFilename;
const newfilename = files.picture.newFilename;
const picturepath = files.picture.filepath;
userDb.postPicture(
userId,
nickname,
originalfilename,
newfilename,
picturepath
);
} else {
userDb.postPicture(userId, nickname);
}
if (!Array.isArray(file.picture)) {
//파일 좁히기 중
if (!Array.isArray(field.nickname)) {
const nickname = field.nickname;
if (!(file.picture === undefined)) {
const originalfilename = file.picture.originalFilename;
const newfilename = file.picture.newFilename;
const picturepath = file.picture.filepath;
userDb.postPicture(
userId,
nickname,
originalfilename,
newfilename,
picturepath
);
} else {
userDb.postPicture(userId, nickname);
}
}
});
}
res.json();
});
......@@ -71,5 +64,7 @@ export const deleteUser = asyncWrap(async (reqExp, res) => {
const finish = await userDb.deleteUser(userId);
if (finish?.deletedCount === 1) {
res.json(true);
} else {
res.status(422).send("삭제에 실패하였습니다.");
}
});
src/db/user.db.ts
View file @ 154cb55a
......@@ -86,13 +86,16 @@ export const postPicture = async (
nickname: nickname,
});
} else if (nickname === "") {
const ref = FileInfo.findById(profile.fileInfo._id);
console.log(ref);
await FileInfo.findByIdAndUpdate(profile.fileInfo._id, {
originalfilename: originalfilename,
newfilename: newfilename,
picturepath: picturepath,
});
} else {
await FileInfo.findByIdAndUpdate(profile.fileInfo._id, {
const ref = await FileInfo.findByIdAndUpdate(profile.fileInfo._id, {
originalfilename: originalfilename,
newfilename: newfilename,
picturepath: picturepath,
......
src/routes/profile.route.ts
View file @ 154cb55a
......@@ -6,8 +6,8 @@ const router = express.Router();
router
.route("/")
.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;
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