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";
type num = {
slides: any[],
}
export function MySlide({ slides}: num) {
slides: any[];
};
const firstLeftClick = useRef(true);
const firstRightClick = useRef(true);
const [page, setPage] = useState(1);
const [slide,setSlide] = useState(1);
// const slide = useRef(1);
const [style, setStyle] = useState("");
export function MySlide({ slides }: num) {
const firstLeftClick = useRef(true);
const firstRightClick = useRef(true);
const [page, setPage] = useState(1);
const [slide, setSlide] = useState(1);
// const slide = useRef(1);
const [style, setStyle] = useState("");
const leftClick = () => {
if (firstLeftClick.current) {
firstLeftClick.current = false;
firstRightClick.current = true;
} else {
setPage(page - 1)
}
// slide.current -= 1;
setSlide(slide-1)
setStyle("-translate-x-full animate-slidetoright");
};
const leftClick = () => {
if (firstLeftClick.current) {
firstLeftClick.current = false;
firstRightClick.current = true;
} else {
setPage(page - 1);
}
// slide.current -= 1;
setSlide(slide - 1);
setStyle("-translate-x-full animate-slidetoright");
};
const rightClick = () => {
if (firstRightClick.current) {
firstLeftClick.current = true;
firstRightClick.current = false;
} else {
setPage(page + 1)
}
// slide.current += 1;
setSlide(slide+1)
setStyle("animate-slidetoleft");
};
const rightClick = () => {
if (firstRightClick.current) {
firstLeftClick.current = true;
firstRightClick.current = false;
} else {
setPage(page + 1);
}
// slide.current += 1;
setSlide(slide + 1);
setStyle("animate-slidetoleft");
};
return (
<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}>
&lt;
</button>
return (
<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}
>
&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
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) => (
<div key={Math.random()} className="min-w-full"
>
<div key={slide} className={`inline-grid grid-cols-2 ${style} min-w-full`}>
{slide}
</div>
</div>
))}
{slide}
</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>
);
};
</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() {
setLoading(true);
await login(user.email, user.password, () => {
navigate("/", { replace: true });
});
// console.log("서버연결됬나요", res);
// console.log("로그인");
......@@ -106,13 +104,6 @@ export default function Login() {
<button className="bg-white ">
<Link to="/signup">회원가입</Link>
</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>
......
frontend/src/auth/profile.tsx
View file @ 10dbd505
......@@ -68,78 +68,86 @@ export default function Profile() {
}, []);
return (
<div className="grid ">
<form className="" onSubmit={handleSubmit}>
<div className=" mt-10 text-2xl">프로필 수정</div>
<div className="grid mt-10 border-0 border-y-2 border-gray-400 ">
<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=" 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
</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}
</div>
</div>
<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 className="basis-full py-4 ">
<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 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">
이미지 선택
</label>
</div>
</div>
<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>
<input
name="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}
/>
</div>
</div>
<div className="flex md:mb-20 justify-center gap-x-3">
<div className="flex mb-5 justify-center gap-x-3">
<button
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 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>
</button>
<button
type="button"
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>
......
frontend/src/home/body.tsx
View file @ 10dbd505
......@@ -72,7 +72,7 @@ export default function Body() {
src={
"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">
<span>{picture.title}</span>
......
frontend/src/home/header.tsx
View file @ 10dbd505
......@@ -14,8 +14,8 @@ export default function Header() {
};
// bg-gradient-to-t from-sky-200
return (
<div className="flex flex-col ">
<div className="flex flex-col md:px-56 z-10 ">
<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">
<button className="ml-3 shrink-0 md:text-2xl">
......@@ -28,10 +28,10 @@ export default function Header() {
</button>
<div className="flex h-12">
<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}
/>
<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>
</div>
......@@ -44,7 +44,11 @@ export default function Header() {
</Link>
<div className="border-0 border-r-2 border-black "></div>
{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}
<button
className="ml-2 text-xs"
......@@ -80,7 +84,7 @@ export default function Header() {
<Outlet />
</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>
);
}
frontend/src/home/theme.tsx
View file @ 10dbd505
import React, { MouseEventHandler, useState } from "react";
import React, { MouseEventHandler, useEffect, useState } from "react";
type ThemeProps = {
handleClick: MouseEventHandler;
......@@ -15,7 +15,7 @@ export default function Theme({ handleClick }: ThemeProps) {
};
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)}>
<button
id={"surfing"}
......
frontend/src/pages/citylist.tsx
View file @ 10dbd505
......@@ -8,7 +8,7 @@ export default function Citylist({ handleClick }: CityProps) {
const [active, setActive] = useState(0);
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 clickActive = (a: number) => {
......@@ -16,10 +16,7 @@ export default function Citylist({ handleClick }: CityProps) {
};
return (
<div className="overflow-auto w-full flex flex-row md:flex-col md:mr-24 bg-red-100 shadow-lg">
<div className="text-start px-5 py-2 bg-white whitespace-nowrap">
도시
</div>
<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"}
......
src/app.ts
View file @ 10dbd505
......@@ -12,7 +12,6 @@ app.use(cookieParser());
app.use("/api", router);
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) => {
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