Skip to content

GitLab

Commit ab76f24e authored by Kim, MinGyu's avatar Kim, MinGyu
Browse files

css 수정

parent fbaae34c
Hide whitespace changes
Inline Side-by-side
frontend/src/auth/signup.tsx
View file @ ab76f24e
...@@ -77,12 +77,12 @@ export default function Signup() { ...@@ -77,12 +77,12 @@ export default function Signup() {
<div className="flex flex-col "> <div className="flex flex-col ">
<div className="border-0 border-y-2 border-black"> <div className="border-0 border-y-2 border-black">
<div className="h-16 flex "> <div className="h-16 flex ">
<div className="whitespace-nowrap grid place-items-center basis-1/5 shrink-0 border-0 border-r-2"> <div className="whitespace-nowrap grid place-items-center w-32 lg:basis-1/5 shrink-0 border-0 border-r-2">
이름 이름
</div> </div>
<div className="grid place-items-center mx-5"> <div className="flex items-center mx-5">
<input <input
className="h-10 basis-1/5 border-2 focus:border-black" className="h-10 w-4/5 lg:w-60 border-2 focus:border-black"
type="text" type="text"
name="name" name="name"
onChange={handleChange} onChange={handleChange}
...@@ -90,12 +90,12 @@ export default function Signup() { ...@@ -90,12 +90,12 @@ export default function Signup() {
</div> </div>
</div> </div>
<div className="h-16 flex border-0 border-t-2"> <div className="h-16 flex border-0 border-t-2">
<div className="whitespace-nowrap grid place-items-center basis-1/5 shrink-0 border-0 border-r-2"> <div className="whitespace-nowrap grid place-items-center w-32 lg:basis-1/5 shrink-0 border-0 border-r-2">
이메일 이메일
</div> </div>
<div className="grid place-items-center mx-5"> <div className="flex items-center mx-5">
<input <input
className=" grid place-items-center h-10 basis-1/5 border-2 focus:border-black" className=" w-4/5 h-10 lg:w-60 border-2 focus:border-black"
type="email" type="email"
name="email" name="email"
onChange={handleChange} onChange={handleChange}
...@@ -103,12 +103,12 @@ export default function Signup() { ...@@ -103,12 +103,12 @@ export default function Signup() {
</div> </div>
</div> </div>
<div className="h-16 flex border-0 border-t-2"> <div className="h-16 flex border-0 border-t-2">
<div className="whitespace-nowrap grid place-items-center basis-1/5 shrink-0 border-0 border-r-2"> <div className="whitespace-nowrap grid place-items-center w-32 lg:basis-1/5 shrink-0 border-0 border-r-2">
비밀번호 비밀번호
</div> </div>
<div className="grid place-items-center mx-5"> <div className="flex items-center mx-5">
<input <input
className="grid place-items-center h-10 basis-1/5 border-2 focus:border-black" className="w-4/5 h-10 lg:w-60 border-2 focus:border-black"
type="password" type="password"
name="password" name="password"
onChange={handleChange} onChange={handleChange}
...@@ -117,13 +117,13 @@ export default function Signup() { ...@@ -117,13 +117,13 @@ export default function Signup() {
</div> </div>
<div className="h-16 flex border-0 border-t-2"> <div className="h-16 flex border-0 border-t-2">
<div className="whitespace-nowrap grid place-items-center basis-1/5 shrink-0 border-0 border-r-2"> <div className="whitespace-nowrap grid place-items-center w-32 lg:basis-1/5 shrink-0 border-0 border-r-2">
비밀번호 확인 비밀번호 확인
</div> </div>
<div className="grid place-items-center mx-5"> <div className="flex items-center mx-5">
<input <input
className="grid place-items-center h-10 basis-1/5 border-2 focus:border-black" className="w-4/5 h-10 lg:w-60 border-2 focus:border-black"
type="password" type="password"
name="password2" name="password2"
onChange={handleChange} onChange={handleChange}
......
frontend/src/board/board.tsx
View file @ ab76f24e
import React, { useState, MouseEvent, useEffect } from "react"; import React, { useState, MouseEvent, useEffect } from "react";
import { Link } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { PostType } from "../types"; import { PostType } from "../types";
import Post from "../post/post"; import Post from "../post/post";
import { postApi } from "../apis"; import { postApi } from "../apis";
import { useAuth } from "../auth/auth.context";
interface Posts { interface Posts {
posts: PostType[]; posts: PostType[];
...@@ -10,6 +11,8 @@ interface Posts { ...@@ -10,6 +11,8 @@ interface Posts {
export default function BoardPage() { export default function BoardPage() {
const [posts, setPosts] = useState<PostType[]>(); const [posts, setPosts] = useState<PostType[]>();
const navigate = useNavigate();
const { user } = useAuth();
useEffect(() => { useEffect(() => {
getDataList(); getDataList();
...@@ -36,29 +39,37 @@ export default function BoardPage() { ...@@ -36,29 +39,37 @@ export default function BoardPage() {
} }
}; };
const goLogin = async (event: React.MouseEvent) => {
if (!user.isLoggedIn) {
alert("로그인이 필요합니다.");
navigate("/login", { replace: true });
}
};
return ( return (
<div className="flex flex-col "> <div className="flex flex-col ">
<div className="flex flex-col mt-6"> <div className="flex flex-col mt-6">
<div className="text-2xl">자유 게시판</div> <div className="text-2xl whitespace-nowrap">자유 게시판</div>
<div className="text-sm mt-5">여행지 후기를 남겨주세요!</div> <div className="text-sm mt-5 whitespace-nowrap">
여행지 후기를 남겨주세요!
</div>
</div> </div>
<div className="flex flex-col w-full mt-16"> <div className="flex flex-col w-full mt-16">
<div className="flex justify-end"> <div className="flex justify-end">
<div className="border-2 border-blue-500 rounded mb-2"> <div className="border-2 border-blue-500 rounded mb-2 whitespace-nowrap">
<Link to="/posting"> <button onClick={goLogin}>
<button>글쓰기</button> <Link to="/posting">글쓰기</Link>
</Link> </button>
</div>{" "} </div>
{/* Link */}
</div> </div>
<div className="sm:overflow-y-auto"> <div className="sm:overflow-y-auto">
<div className="flex place-items-center divide-x-2 border-2 border-solid border-y-2 h-10 bg-gradient-to-r from-cyan-500 to-blue-500 "> <div className="whitespace-nowrap flex place-items-center divide-x-2 border-2 border-solid border-y-2 h-10 bg-gradient-to-r from-cyan-500 to-blue-500 ">
<div className="basis-full">제목</div> <div className="basis-full">제목</div>
<div className="basis-3/12">게시 날짜</div> <div className="basis-3/12">게시 날짜</div>
<div className="basis-2/12">조회수</div> <div className="basis-2/12">조회수</div>
</div> </div>
<div className=""> <div className="whitespace-nowrap">
{posts?.map((post, i) => ( {posts?.map((post, i) => (
<Post key={i} post={post} handleClick={titleHandleClick} /> <Post key={i} post={post} handleClick={titleHandleClick} />
))} ))}
......
frontend/src/home/body.tsx
View file @ ab76f24e
...@@ -21,10 +21,10 @@ export default function Body() { ...@@ -21,10 +21,10 @@ export default function Body() {
imgsData(); imgsData();
}, []); }, []);
useEffect(() => { // useEffect(() => {
console.log(searchParams.get("theme"), searchParams.get("city")); // console.log(searchParams.get("theme"), searchParams.get("city"));
setSearchParams(searchParams); // setSearchParams(searchParams);
}, []); // }, []);
const themeHandleClick = (event: MouseEvent<HTMLButtonElement>) => { const themeHandleClick = (event: MouseEvent<HTMLButtonElement>) => {
console.log(`theme id= ${event.currentTarget.id}`); console.log(`theme id= ${event.currentTarget.id}`);
......
frontend/src/home/header.tsx
View file @ ab76f24e
...@@ -14,20 +14,20 @@ export default function Header() { ...@@ -14,20 +14,20 @@ export default function Header() {
}; };
return ( return (
<div className="flex flex-col lg:px-56 "> <div className="flex flex-col md:px-56 ">
<div className="flex flex-col-reverse pt-3 pb-12 border-b-2 border-sky-200 bg-gradient-to-t from-sky-200"> <div className="flex flex-col-reverse pt-3 pb-12 border-b-2 border-sky-200 bg-gradient-to-t from-sky-200">
<div className="flex mt-5 justify-between pr-3"> <div className="flex mt-5 justify-between pr-3">
<button className="ml-3 shrink-0 text-2xl"> <button className="ml-3 shrink-0 md:text-2xl">
<Link to="/" className="hover:text-sky-300 active:text-purple-500"> <Link to="/" className="hover:text-sky-300 active:text-purple-500">
Travel Report Travel Report
</Link> </Link>
</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-20 w-40 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-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"
onChange={handleChange} onChange={handleChange}
/> />
<button className="shrink-0 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-sky-500 rounded-r-full pr-4">
검색 검색
</button> </button>
</div> </div>
......
frontend/src/home/theme.tsx
View file @ ab76f24e
import React, { MouseEventHandler } from "react"; import React, { MouseEventHandler, useState } from "react";
type ThemeProps = { type ThemeProps = {
handleClick: MouseEventHandler; handleClick: MouseEventHandler;
}; };
export default function Theme({ handleClick }: ThemeProps) { export default function Theme({ handleClick }: ThemeProps) {
const [active, setActive] = useState(0);
const onactive = "whitespace-nowrap px-5 text-sky-300 ";
const offactive = "whitespace-nowrap px-5 ";
const clickActive = (a: number) => {
setActive(a);
};
return ( return (
<div className="overflow-x-auto flex rounded md:justify-center py-2 border-b-2 divide-x-2"> <div className="overflow-x-auto flex rounded py-2 md:p-2 border-b-2 divide-x-2">
<button <div onClick={() => clickActive(1)}>
id={"surfing"} <button
onClick={handleClick} id={"surfing"}
className="shrink-0 px-5 hover:text-sky-300 " onClick={handleClick}
> className={active === 1 ? onactive : offactive}
서핑 >
</button> 서핑
<button </button>
id={"activity"} </div>
onClick={handleClick} <div onClick={() => clickActive(2)}>
className="shrink-0 px-5 hover:text-sky-300" <button
> id={"activity"}
액티비티 onClick={handleClick}
</button> className={active === 2 ? onactive : offactive}
<button >
id={"camping"} 액티비티
onClick={handleClick} </button>
className="shrink-0 px-5 hover:text-sky-300 " </div>
> <div onClick={() => clickActive(3)}>
캠핑 <button
</button> id={"camping"}
<button onClick={handleClick}
id={"skiing"} className={active === 3 ? onactive : offactive}
onClick={handleClick} >
className="shrink-0 px-5 hover:text-sky-300" 캠핑
> </button>
스키 </div>
</button> <div onClick={() => clickActive(4)}>
<button <button
id={"boat"} id={"skiing"}
onClick={handleClick} onClick={handleClick}
className="shrink-0 px-5 hover:text-sky-300" className={active === 4 ? onactive : offactive}
> >
보트 스키
</button> </button>
<button </div>
id={"desert"} <div onClick={() => clickActive(5)}>
onClick={handleClick} <button
className="shrink-0 px-5 hover:text-sky-300" id={"boat"}
> onClick={handleClick}
사막 className={active === 5 ? onactive : offactive}
</button> >
<button 보트
id={"golf"} </button>
onClick={handleClick} </div>
className="shrink-0 px-5 hover:text-sky-300" <div onClick={() => clickActive(6)}>
> <button
골프 id={"desert"}
</button> onClick={handleClick}
<button className={active === 6 ? onactive : offactive}
id={"cave"} >
onClick={handleClick} 사막
className="shrink-0 px-5 hover:text-sky-300" </button>
> </div>
동굴 <div onClick={() => clickActive(7)}>
</button> <button
<button id={"golf"}
id={"history"} onClick={handleClick}
onClick={handleClick} className={active === 7 ? onactive : offactive}
className="shrink-0 px-5 hover:text-sky-300" >
> 골프
문화재 </button>
</button> </div>
<button <div onClick={() => clickActive(8)}>
id={"zoo"} <button
onClick={handleClick} id={"cave"}
className="shrink-0 px-5 hover:text-sky-300" onClick={handleClick}
> className={active === 8 ? onactive : offactive}
동물원 >
</button> 동굴
<button </button>
id={"cycling"} </div>
onClick={handleClick} <div onClick={() => clickActive(9)}>
className="shrink-0 px-5 hover:text-sky-300" <button
> id={"history"}
사이클링 onClick={handleClick}
</button> className={active === 9 ? onactive : offactive}
>
문화재
</button>
</div>
<div onClick={() => clickActive(10)}>
<button
id={"zoo"}
onClick={handleClick}
className={active === 10 ? onactive : offactive}
>
동물원
</button>
</div>
<div onClick={() => clickActive(11)}>
<button
id={"cycling"}
onClick={handleClick}
className={active === 11 ? onactive : offactive}
>
사이클링
</button>
</div>
</div> </div>
); );
} }
frontend/src/pages/citylist.tsx
View file @ ab76f24e
import React, { MouseEventHandler } from "react"; import React, { MouseEventHandler, useState } from "react";
type CityProps = { type CityProps = {
handleClick: MouseEventHandler; handleClick: MouseEventHandler;
}; };
export default function Citylist({ handleClick }: CityProps) { export default function Citylist({ handleClick }: CityProps) {
const [active, setActive] = useState(0);
const onactive = "text-start px-5 py-2 underline whitespace-nowrap";
const offactive = "text-start px-5 py-2 whitespace-nowrap";
const clickActive = (a: number) => {
setActive(a);
};
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-start px-5 py-2 bg-white whitespace-nowrap"> <div className="text-start px-5 py-2 bg-white whitespace-nowrap">
도시 도시
</div> </div>
<button <div onClick={() => clickActive(1)}>
id={"Seoul"} <button
onClick={handleClick} id={"Seoul"}
className="text-start px-5 py-2 hover:underline whitespace-nowrap" onClick={handleClick}
> className={active === 1 ? onactive : offactive}
서울 >
</button> 서울
<button </button>
id={"Busan"} </div>
onClick={handleClick} <div onClick={() => clickActive(2)}>
className="text-start px-5 py-2 hover:underline whitespace-nowrap" <button
> id={"Busan"}
부산 onClick={handleClick}
</button> className={active === 2 ? onactive : offactive}
<button >
id={"Incheon"} 부산
onClick={handleClick} </button>
className="text-start px-5 py-2 hover:underline whitespace-nowrap" </div>
> <div onClick={() => clickActive(3)}>
인천 <button
</button> id={"Incheon"}
<button onClick={handleClick}
id={"Daegoo"} className={active === 3 ? onactive : offactive}
onClick={handleClick} >
className="text-start px-5 py-2 hover:underline whitespace-nowrap" 인천
> </button>
대구 </div>
</button> <div onClick={() => clickActive(4)}>
<button <button
id={"Gwangjoo"} id={"Daegoo"}
onClick={handleClick} onClick={handleClick}
className="text-start px-5 py-2 hover:underline whitespace-nowrap" className={active === 4 ? onactive : offactive}
> >
광주 대구
</button> </button>
<button </div>
id={"Daejeon"} <div onClick={() => clickActive(5)}>
onClick={handleClick} <button
className="text-start px-5 py-2 hover:underline whitespace-nowrap" id={"Gwangjoo"}
> onClick={handleClick}
대전 className={active === 5 ? onactive : offactive}
</button> >
<button 광주
id={"Woolsan"} </button>
onClick={handleClick} </div>
className="text-start px-5 py-2 hover:underline whitespace-nowrap" <div onClick={() => clickActive(6)}>
> <button
울산 id={"Daejeon"}
</button> onClick={handleClick}
<button className={active === 6 ? onactive : offactive}
id={"Sejong"} >
onClick={handleClick} 대전
className="text-start px-5 py-2 hover:underline whitespace-nowrap" </button>
> </div>
세종 <div onClick={() => clickActive(7)}>
</button> <button
<button id={"Woolsan"}
id={"Dokdo"} onClick={handleClick}
onClick={handleClick} className={active === 7 ? onactive : offactive}
className="text-start px-5 py-2 hover:underline whitespace-nowrap" >
> 울산
독도 </button>
</button> </div>
<button <div onClick={() => clickActive(8)}>
id={"Jeju"} <button
onClick={handleClick} id={"Sejong"}
className="text-start px-5 py-2 hover:underline whitespace-nowrap" onClick={handleClick}
> className={active === 8 ? onactive : offactive}
제주 >
</button> 세종
{/* citylist */} </button>
</div>
<div onClick={() => clickActive(9)}>
<button
id={"Dokdo"}
onClick={handleClick}
className={active === 9 ? onactive : offactive}
>
독도
</button>
</div>
<div onClick={() => clickActive(10)}>
<button
id={"Jeju"}
onClick={handleClick}
className={active === 10 ? onactive : offactive}
>
제주
</button>
</div>
</div> </div>
// Citylist Page // Citylist Page
); );
......
frontend/src/types/index.tsx
View file @ ab76f24e
...@@ -39,7 +39,8 @@ export interface SignupUser { ...@@ -39,7 +39,8 @@ export interface SignupUser {
export interface Profile { export interface Profile {
_id: string; _id: string;
email: string; email: string;
fileInfo: { name: string;
avatar: {
originalfilename: string; originalfilename: string;
newfilename: string; newfilename: string;
picturepath: string; picturepath: string;
......
src/controllers/fileinfo.controller.ts
View file @ ab76f24e
...@@ -4,7 +4,11 @@ import { TypedRequest } from "../types"; ...@@ -4,7 +4,11 @@ import { TypedRequest } from "../types";
export const uploadFile = asyncWrap(async (reqExp, res, next) => { export const uploadFile = asyncWrap(async (reqExp, res, next) => {
const req = reqExp as TypedRequest; const req = reqExp as TypedRequest;
const form = formidable({ multiples: false, uploadDir: "uploads" }); const form = formidable({
multiples: false,
uploadDir: "uploads",
keepExtensions: true,
});
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
form.parse(req, (err, fields, files) => { form.parse(req, (err, fields, files) => {
...@@ -25,7 +29,11 @@ export const uploadFile = asyncWrap(async (reqExp, res, next) => { ...@@ -25,7 +29,11 @@ export const uploadFile = asyncWrap(async (reqExp, res, next) => {
export const uploadFiles = asyncWrap(async (reqExp, res, next) => { export const uploadFiles = asyncWrap(async (reqExp, res, next) => {
const req = reqExp as TypedRequest; const req = reqExp as TypedRequest;
const form = formidable({ multiples: true, uploadDir: "uploads" }); const form = formidable({
multiples: true,
uploadDir: "uploads",
keepExtensions: true,
});
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
form.parse(req, (err, fields, files) => { form.parse(req, (err, fields, files) => {
......
src/db/index.ts
View file @ ab76f24e
export * as roleDb from "./role.db"; export * as roleDb from "./role.db";
export * as postDb from "./post.db"; export * as postDb from "./post.db";
export * as userDb from "./user.db"; export * as userDb from "./user.db";
export * as mainimgDb from "./mainimg.db" export * as mainimgDb from "./mainimg.db";
\ 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