Skip to content

GitLab

Commit 10dbd505 authored by Kim, MinGyu's avatar Kim, MinGyu
Browse files

css 수정

parent 02b43c26
Hide whitespace changes
Inline Side-by-side
frontend/src/Pages/myslide.tsx
View file @ 10dbd505
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
type num = { type num = {
slides: any[], slides: any[];
} };
export function MySlide({ slides}: num) {
const firstLeftClick = useRef(true); export function MySlide({ slides }: num) {
const firstRightClick = useRef(true); const firstLeftClick = useRef(true);
const [page, setPage] = useState(1); const firstRightClick = useRef(true);
const [slide,setSlide] = useState(1); const [page, setPage] = useState(1);
// const slide = useRef(1); const [slide, setSlide] = useState(1);
const [style, setStyle] = useState(""); // const slide = useRef(1);
const [style, setStyle] = useState("");
const leftClick = () => { const leftClick = () => {
if (firstLeftClick.current) { if (firstLeftClick.current) {
firstLeftClick.current = false; firstLeftClick.current = false;
firstRightClick.current = true; firstRightClick.current = true;
} else { } else {
setPage(page - 1) setPage(page - 1);
} }
// slide.current -= 1; // slide.current -= 1;
setSlide(slide-1) setSlide(slide - 1);
setStyle("-translate-x-full animate-slidetoright"); setStyle("-translate-x-full animate-slidetoright");
}; };
const rightClick = () => { const rightClick = () => {
if (firstRightClick.current) { if (firstRightClick.current) {
firstLeftClick.current = true; firstLeftClick.current = true;
firstRightClick.current = false; firstRightClick.current = false;
} else { } else {
setPage(page + 1) setPage(page + 1);
} }
// slide.current += 1; // slide.current += 1;
setSlide(slide+1) setSlide(slide + 1);
setStyle("animate-slidetoleft"); setStyle("animate-slidetoleft");
}; };
return ( return (
<div className="flex flex-row justify-center items-center "> <div className="flex flex-row justify-center items-center ">
<button className="mx-3 w-6 h-6 rounded-full hover:bg-sky-100 hover:text-gray-400"onClick={leftClick} disabled={slide === 1}> <button
&lt; className="mx-3 w-6 h-6 rounded-full hover:bg-sky-100 hover:text-gray-400"
</button> onClick={leftClick}
disabled={slide === 1}
>
&lt;
</button>
<div
className={`m-3 md:m-5 md:basis-4/5 flex flex-row relative w-full overflow-hidden`}
>
{slides.slice(page - 1, page + 2).map((slide) => (
<div key={Math.random()} className="min-w-full">
<div <div
className={`m-3 md:m-5 md:basis-4/5 flex flex-row relative w-full overflow-hidden`} key={slide}
className={`inline-grid grid-cols-2 ${style} min-w-full`}
> >
{slides.slice(page - 1, page + 2).map((slide) => ( {slide}
<div key={Math.random()} className="min-w-full"
>
<div key={slide} className={`inline-grid grid-cols-2 ${style} min-w-full`}>
{slide}
</div>
</div>
))}
</div> </div>
<button className="mx-3 w-6 h-6 rounded-full hover:bg-sky-100 hover:text-gray-400"onClick={rightClick} disabled={slide === slides.length}> </div>
&gt; ))}
</button> </div>
</div> <button
className="mx-3 w-6 h-6 rounded-full hover:bg-sky-100 hover:text-gray-400"
onClick={rightClick}
); disabled={slide === slides.length}
}; >
&gt;
</button>
</div>
);
}
frontend/src/auth/login.tsx
View file @ 10dbd505
...@@ -35,9 +35,7 @@ export default function Login() { ...@@ -35,9 +35,7 @@ export default function Login() {
setLoading(true); setLoading(true);
await login(user.email, user.password, () => { await login(user.email, user.password, () => {
navigate("/", { replace: true }); navigate("/", { replace: true });
}); });
// console.log("서버연결됬나요", res); // console.log("서버연결됬나요", res);
// console.log("로그인"); // console.log("로그인");
...@@ -106,13 +104,6 @@ export default function Login() { ...@@ -106,13 +104,6 @@ export default function Login() {
<button className="bg-white "> <button className="bg-white ">
<Link to="/signup">회원가입</Link> <Link to="/signup">회원가입</Link>
</button> </button>
<div className="grid grid-cols-2 divide-x-2">
<div></div>
<div></div>
</div>
<button className="bg-white">
<Link to="/forgot">비밀번호 찾기</Link>
</button>
</div> </div>
</div> </div>
</div> </div>
......
frontend/src/auth/profile.tsx
View file @ 10dbd505
...@@ -68,78 +68,86 @@ export default function Profile() { ...@@ -68,78 +68,86 @@ export default function Profile() {
}, []); }, []);
return ( return (
<div className="grid "> <div className="grid bg-white rounded shadow-lg mb-5">
<form className="" onSubmit={handleSubmit}> <form className="mx-24 " onSubmit={handleSubmit}>
<div className=" mt-10 text-2xl">프로필 수정</div> <div className=" mt-7 text-2xl">프로필 수정</div>
<div className="grid mt-10 border-0 border-y-2 border-gray-400 "> <div className=" mt-10 border-0 border-y-2 border-gray-400">
<div className="flex h-20"> <div className="flex h-20">
<div className=" basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0"> <div className="w-24 border-0 border-r-2 bg-gray-100 grid place-items-center whitespace-nowrap">
Email Email
</div> </div>
<div className=" basis-full grid place-items-center justify-items-stretch px-4"> <div className=" grid place-items-center px-4 whitespace-nowrap">
{email} {email}
</div> </div>
</div> </div>
<div className="flex border-0 border-t-2"> <div className="flex border-0 border-t-2">
<div className="basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0"> <div className="w-24 border-0 border-r-2 bg-gray-100 grid place-items-center whitespace-nowrap">
사진 사진
</div> </div>
<div className="basis-full py-4 "> <div className="flex py-4 ">
<div className="overflow-hidden w-28 h-28 rounded-full border-2 mx-3 mb-3"> <div className="">
{imageSrc ? ( <div className="overflow-hidden w-28 h-28 rounded-full border-2 mx-3 mb-3">
<img {imageSrc ? (
src={imageSrc}
className="object-cover object-center h-full"
/>
) : (
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">
이미지 선택
</label>
</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="basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0"> <div className="w-24 border-0 border-r-2 bg-gray-100 grid place-items-center whitespace-nowrap">
이름 이름
</div> </div>
<input <input
name="name" name="name"
placeholder={profile.name} placeholder={profile.name}
className="basis-1/5 placeholder:text-black my-6 ml-5 border-2 " className=" placeholder:text-black my-6 ml-5 border-2 "
onChange={handleChange} onChange={handleChange}
/> />
</div> </div>
</div> </div>
<div className="flex md:mb-20 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-40 border-2 border-blue-400 text-lg place-self-center" 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-40 text-lg border-2 border-orange-400 place-self-center"> <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-40 text-lg border-2 border-red-400 place-self-center" className=" mt-5 h-12 w-1/5 text-lg border-2 border-red-400 place-self-center whitespace-nowrap"
> >
계정 삭제 계정 삭제
</button> </button>
......
frontend/src/home/body.tsx
View file @ 10dbd505
...@@ -72,7 +72,7 @@ export default function Body() { ...@@ -72,7 +72,7 @@ export default function Body() {
src={ src={
"http://localhost:3000/images/" + picture.fileInfo.newfilename "http://localhost:3000/images/" + picture.fileInfo.newfilename
} }
className="w-full h-48 object-cover hover:scale-110 transition duration-0 hover:duration-500" className="w-full h-44 object-cover hover:scale-110 transition duration-0 hover:duration-500"
/> />
<div className="bg-transparent text-neutral-50 text-xs md:text-lg rounded-full absolute bottom-0 ml-1 mb-1 hover:scale-110 transition duration-0 hover:duration-500"> <div className="bg-transparent text-neutral-50 text-xs md:text-lg rounded-full absolute bottom-0 ml-1 mb-1 hover:scale-110 transition duration-0 hover:duration-500">
<span>{picture.title}</span> <span>{picture.title}</span>
......
frontend/src/home/header.tsx
View file @ 10dbd505
...@@ -14,8 +14,8 @@ export default function Header() { ...@@ -14,8 +14,8 @@ 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 "> <div className="flex flex-col bg-lime-100">
<div className="flex flex-col md:px-56 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">
<button className="ml-3 shrink-0 md:text-2xl"> <button className="ml-3 shrink-0 md:text-2xl">
...@@ -28,10 +28,10 @@ export default function Header() { ...@@ -28,10 +28,10 @@ export default function Header() {
</button> </button>
<div className="flex h-12"> <div className="flex h-12">
<input <input
className="ml-10 focus:outline-none focus:border-y-4 focus:border-l-4 focus:border-sky-500 w-3/5 md:w-4/5 border-y-4 border-l-4 border-sky-300 pl-9 rounded-l-full focus:border-0" className="ml-10 focus:outline-none focus:border-y-4 focus:border-l-4 focus:border-yellow-900 w-3/5 md:w-4/5 border-y-4 border-l-4 border-yellow-600 pl-9 rounded-l-full focus:border-0"
onChange={handleChange} onChange={handleChange}
/> />
<button className="whitespace-nowrap bg-white border-y-4 border-r-4 border-sky-500 rounded-r-full pr-4"> <button className="whitespace-nowrap bg-white border-y-4 border-r-4 border-yellow-900 rounded-r-full pr-4">
검색 검색
</button> </button>
</div> </div>
...@@ -44,7 +44,11 @@ export default function Header() { ...@@ -44,7 +44,11 @@ export default function Header() {
</Link> </Link>
<div className="border-0 border-r-2 border-black "></div> <div className="border-0 border-r-2 border-black "></div>
{user.role === "admin" ? ( {user.role === "admin" ? (
<Link to={"/admin"}>어드민</Link> <div className="border-0 border-r-2 border-black ">
<Link to={"/admin"} className="mx-2">
관리자
</Link>
</div>
) : null} ) : null}
<button <button
className="ml-2 text-xs" className="ml-2 text-xs"
...@@ -80,7 +84,7 @@ export default function Header() { ...@@ -80,7 +84,7 @@ export default function Header() {
<Outlet /> <Outlet />
</div> </div>
<div className="bg-center z-0 absolute w-full h-44 overflow-hidden object-cover object-center bg-[url('https://blog.kakaocdn.net/dn/b5qUMZ/btqN9NEYqcW/ZuZmPcI4u7bdK89shT3RL1/img.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> </div>
); );
} }
frontend/src/home/theme.tsx
View file @ 10dbd505
import React, { MouseEventHandler, useState } from "react"; import React, { MouseEventHandler, useEffect, useState } from "react";
type ThemeProps = { type ThemeProps = {
handleClick: MouseEventHandler; handleClick: MouseEventHandler;
...@@ -15,7 +15,7 @@ export default function Theme({ handleClick }: ThemeProps) { ...@@ -15,7 +15,7 @@ export default function Theme({ handleClick }: ThemeProps) {
}; };
return ( return (
<div className="overflow-x-auto flex rounded py-2 md:p-4 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)}>
<button <button
id={"surfing"} id={"surfing"}
......
frontend/src/pages/citylist.tsx
View file @ 10dbd505
...@@ -8,7 +8,7 @@ export default function Citylist({ handleClick }: CityProps) { ...@@ -8,7 +8,7 @@ export default function Citylist({ handleClick }: CityProps) {
const [active, setActive] = useState(0); const [active, setActive] = useState(0);
const onactive = const onactive =
"text-start px-5 py-2 whitespace-nowrap w-full border-b-4 md:border-b-0 md:border-r-4 border-sky-500"; "text-start px-5 py-2 whitespace-nowrap w-full border-b-4 md:border-b-0 md:border-r-4 border-sky-400";
const offactive = "text-start px-5 py-2 whitespace-nowrap w-full "; const offactive = "text-start px-5 py-2 whitespace-nowrap w-full ";
const clickActive = (a: number) => { const clickActive = (a: number) => {
...@@ -16,10 +16,7 @@ export default function Citylist({ handleClick }: CityProps) { ...@@ -16,10 +16,7 @@ export default function Citylist({ handleClick }: CityProps) {
}; };
return ( return (
<div className="overflow-auto w-full flex flex-row md:flex-col md:mr-24 bg-red-100 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 className="text-start px-5 py-2 bg-white whitespace-nowrap">
도시
</div>
<div onClick={() => clickActive(1)}> <div onClick={() => clickActive(1)}>
<button <button
id={"Seoul"} id={"Seoul"}
......
src/app.ts
View file @ 10dbd505
...@@ -12,7 +12,6 @@ app.use(cookieParser()); ...@@ -12,7 +12,6 @@ app.use(cookieParser());
app.use("/api", router); app.use("/api", router);
app.use("/images", express.static(path.join(__dirname, "..", "/uploads"))); app.use("/images", express.static(path.join(__dirname, "..", "/uploads")));
app.use("/images", express.static(path.join(__dirname, "..", "/adminpics")));
app.use((err: any, req: Request, res: Response, next: NextFunction) => { app.use((err: any, req: Request, res: Response, next: NextFunction) => {
console.log("익스프레스 에러: ", err); console.log("익스프레스 에러: ", err);
......
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