Skip to content

GitLab

Commit 263c370b authored by Kim, MinGyu's avatar Kim, MinGyu
Browse files

전체적인 css 개선

parent 769ea9f4
Hide whitespace changes
Inline Side-by-side
frontend/src/auth/login.tsx
View file @ 263c370b
...@@ -89,7 +89,7 @@ export default function Login() { ...@@ -89,7 +89,7 @@ export default function Login() {
<button <button
disabled={disabled} disabled={disabled}
type="submit" type="submit"
className="my-4 md:my-0 bg-sky-600 hover:bg-sky-700 rounded-xl text-xl py-4 md:px-4" className="my-4 md:my-0 bg-sky-500 hover:bg-sky-400 rounded-xl text-xl py-4 md:px-4 text-white"
> >
{" "} {" "}
{loading && ( {loading && (
......
frontend/src/auth/profile.tsx
View file @ 263c370b
...@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react"; ...@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
import { Profile } from "../types"; import { Profile } from "../types";
import { profileApi } from "../apis"; import { profileApi } from "../apis";
import { useAuth } from "../auth/auth.context"; import { useAuth } from "../auth/auth.context";
import { Link } from "react-router-dom";
export default function Profile() { export default function Profile() {
// 로컬 저장소에는 로그인 여부만 저장 // 로컬 저장소에는 로그인 여부만 저장
...@@ -88,8 +89,8 @@ export default function Profile() { ...@@ -88,8 +89,8 @@ export default function Profile() {
return ( return (
<div className="grid "> <div className="grid ">
<form className="justify-items-center"> <form className="">
<div className=" mt-10">프로필 수정</div> <div className=" mt-10 text-2xl">프로필 수정</div>
<div className="grid mt-10 border-0 border-y-2 border-gray-400 "> <div className="grid 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=" basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0">
...@@ -104,7 +105,7 @@ export default function Profile() { ...@@ -104,7 +105,7 @@ export default function Profile() {
사진 사진
</div> </div>
<div className="basis-full py-4 "> <div className="basis-full py-4 ">
<div className="overflow-hidden w-28 h-28 rounded-full border-2 m-5"> <div className="overflow-hidden w-28 h-28 rounded-full border-2 mx-3 mb-3">
{imageSrc ? ( {imageSrc ? (
<img <img
src={imageSrc} src={imageSrc}
...@@ -140,16 +141,21 @@ export default function Profile() { ...@@ -140,16 +141,21 @@ export default function Profile() {
/> />
</div> </div>
</div> </div>
<div className="grid grid-cols-2 my-4 md:mb-20 justify-items-center"> <div className="flex md:mb-20 justify-center gap-x-3">
<button <button
onClick={handleClick} onClick={handleClick}
className="w-20 border-2 shrink-0 ml-10" className=" mt-5 h-12 w-40 border-2 border-blue-400 text-lg place-self-center"
> >
저장하기 저장하기
</button> </button>
<button className=" mt-5 h-12 w-40 text-lg border-2 border-orange-400 place-self-center">
<Link to="/">취소</Link>
</button>
<button <button
onClick={deleteClick} onClick={deleteClick}
className="w-20 border-2 shrink-0 mr-10" className=" mt-5 h-12 w-40 text-lg border-2 border-red-400 place-self-center"
> >
계정 삭제 계정 삭제
</button> </button>
......
frontend/src/auth/signup.tsx
View file @ 263c370b
...@@ -68,48 +68,68 @@ export default function Signup() { ...@@ -68,48 +68,68 @@ export default function Signup() {
} }
return ( return (
<div className="flex flex-col items-center"> <div className="flex flex-col">
<div className=" md:w-40 mt-8 text-center text-2xl rounded-2xl"> <div className="flex place-items-strat ml-2 mt-8 text-center text-2xl ">
<Link to="/">회원가입</Link> <Link to="/">회원가입</Link>
</div> </div>
<form onSubmit={handleSubmit} className="flex flex-col mt-16 gap-y-4"> <form onSubmit={handleSubmit} className="flex flex-col mt-16 gap-y-4">
<div className="flex flex-col"> <div className="flex flex-col ">
<div className="flex"> <div className="border-0 border-y-2 border-black">
<div className="basis-1/5 shrink-0">이름</div> <div className="h-16 flex ">
<input <div className="whitespace-nowrap grid place-items-center basis-1/5 shrink-0 border-0 border-r-2">
className="border-2 focus:border-black" 이름
type="text" </div>
name="name" <div className="grid place-items-center mx-5">
onChange={handleChange} <input
/> className="h-10 basis-1/5 border-2 focus:border-black"
</div> type="text"
<div className="flex"> name="name"
<div className="basis-1/5 shrink-0">이메일</div> onChange={handleChange}
<input />
className="border-2 focus:border-black" </div>
type="email" </div>
name="email" <div className="h-16 flex border-0 border-t-2">
onChange={handleChange} <div className="whitespace-nowrap grid place-items-center basis-1/5 shrink-0 border-0 border-r-2">
/> 이메일
</div> </div>
<div className="flex"> <div className="grid place-items-center mx-5">
<div className="basis-1/5 shrink-0">비밀번호</div> <input
<input className=" grid place-items-center h-10 basis-1/5 border-2 focus:border-black"
className="border-2 focus:border-black" type="email"
type="password" name="email"
name="password" onChange={handleChange}
onChange={handleChange} />
/> </div>
</div> </div>
<div className="flex"> <div className="h-16 flex border-0 border-t-2">
<div className="basis-1/5 shrink-0">비밀번호 확인</div> <div className="whitespace-nowrap grid place-items-center basis-1/5 shrink-0 border-0 border-r-2">
<input 비밀번호
className="border-2 focus:border-black" </div>
type="password" <div className="grid place-items-center mx-5">
name="password2" <input
onChange={handleChange} className="grid place-items-center h-10 basis-1/5 border-2 focus:border-black"
/> type="password"
name="password"
onChange={handleChange}
/>
</div>
</div>
<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>
<div className="grid place-items-center mx-5">
<input
className="grid place-items-center h-10 basis-1/5 border-2 focus:border-black"
type="password"
name="password2"
onChange={handleChange}
/>
</div>
</div>
</div> </div>
{error && ( {error && (
<div className="text-red-500 text-sm"> <div className="text-red-500 text-sm">
...@@ -117,7 +137,10 @@ export default function Signup() { ...@@ -117,7 +137,10 @@ export default function Signup() {
</div> </div>
)} )}
<button disabled={disabled} className="border-b border-white"> <button
disabled={disabled}
className="border-b border-white mt-5 h-12 w-52 text-white text-lg bg-amber-400 place-self-center"
>
{loading && ( {loading && (
<SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-slate" /> <SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-slate" />
)} )}
......
frontend/src/board/board.tsx
View file @ 263c370b
...@@ -36,13 +36,13 @@ export default function BoardPage() { ...@@ -36,13 +36,13 @@ export default function BoardPage() {
}; };
return ( return (
<div className="flex flex-col items-center"> <div className="flex flex-col ">
<div className="flex flex-col w-10/12 items-center mt-6"> <div className="flex flex-col mt-6">
<div>`Travel Report's Board`</div> <div className="text-2xl">자유 게시판</div>
<div>`여행지 후기를 남겨주세요!`</div> <div className="text-sm mt-5">여행지 후기를 남겨주세요!</div>
</div> </div>
<div className="flex flex-col w-10/12 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">
<Link to="/posting"> <Link to="/posting">
...@@ -51,13 +51,13 @@ export default function BoardPage() { ...@@ -51,13 +51,13 @@ export default function BoardPage() {
</div>{" "} </div>{" "}
{/* Link */} {/* Link */}
</div> </div>
<div className="sm:overflow-y-scroll"> <div className="sm:overflow-y-auto">
<div className="flex flex-row divide-x-2 border-2 border-solid border-y-2 h-10 bg-gradient-to-r from-cyan-500 to-blue-500 "> <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="basis-full">Title</div> <div className="basis-full">제목</div>
<div className="basis-3/12">Date</div> <div className="basis-3/12">게시 날짜</div>
<div className="basis-2/12">Clicks</div> <div className="basis-2/12">조회수</div>
</div> </div>
<div> <div className="">
{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 @ 263c370b
...@@ -15,8 +15,8 @@ export default function Body() { ...@@ -15,8 +15,8 @@ export default function Body() {
async function imgsData() { async function imgsData() {
const imgs = await mainimgApi.getmainimg(); const imgs = await mainimgApi.getmainimg();
setGetimgs(imgs) setGetimgs(imgs);
}; }
useEffect(() => { useEffect(() => {
imgsData(); imgsData();
}, []); }, []);
...@@ -59,22 +59,26 @@ export default function Body() { ...@@ -59,22 +59,26 @@ export default function Body() {
let limit = 4; let limit = 4;
const numPages = Math.ceil(Idpics.length / limit); const numPages = Math.ceil(Idpics.length / limit);
const slides = [] const slides = [];
for (let i = 0; i < numPages; i++) { for (let i = 0; i < numPages; i++) {
const k = [ const k = [
Idpics.slice(i * limit, i * limit + limit).map((picture, index: number) => ( Idpics.slice(i * limit, i * limit + limit).map(
<div (picture, index: number) => (
className={`m-1 shrink-0 rounded shadow-md h-45 relative overflow-hidden`} <div
key={index}> className={`m-1 shrink-0 rounded shadow-md h-45 relative overflow-hidden`}
<img key={index}
src={"http://localhost:3000/images/" + picture.pic.newfilename} >
className="w-full h-40 object-cover hover:scale-110 transition duration-0 hover:duration-500" <img
/> src={"http://localhost:3000/images/" + picture.pic.newfilename}
<div className="bg-transparent text-neutral-50 text-xs rounded-full absolute bottom-0 ml-1 mb-1 hover:scale-110 transition duration-0 hover:duration-500"> className="w-full h-40 object-cover hover:scale-110 transition duration-0 hover:duration-500"
<span >{picture.title}</span> />
<div className="bg-transparent text-neutral-50 text-xs rounded-full absolute bottom-0 ml-1 mb-1 hover:scale-110 transition duration-0 hover:duration-500">
<span>{picture.title}</span>
</div>
</div> </div>
</div> )
))] ),
];
slides.push(k); slides.push(k);
} }
...@@ -82,13 +86,11 @@ export default function Body() { ...@@ -82,13 +86,11 @@ export default function Body() {
<div className="flex flex-col"> <div className="flex flex-col">
<Theme handleClick={themeHandleClick} /> <Theme handleClick={themeHandleClick} />
<div className="flex flex-col md:flex-row py-5 "> <div className="flex flex-col md:flex-row py-5 ">
<div className="w-50"> <div className="md:w-1/5 lg:w-1/6">
<Citylist handleClick={cityHandleClick} /> <Citylist handleClick={cityHandleClick} />
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<MySlide key={Math.random()} <MySlide key={Math.random()} slides={slides} />
slides={slides}
/>
</div> </div>
</div> </div>
<Outlet /> <Outlet />
......
frontend/src/home/header.tsx
View file @ 263c370b
...@@ -14,15 +14,15 @@ export default function Header() { ...@@ -14,15 +14,15 @@ export default function Header() {
}; };
return ( return (
<div className="flex flex-col md:px-56 "> <div className="flex flex-col lg:px-56 ">
<div className="flex flex-col-reverse pt-3 pb-12 border-b-2 "> <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 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 "> <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-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}
...@@ -32,41 +32,39 @@ export default function Header() { ...@@ -32,41 +32,39 @@ export default function Header() {
</button> </button>
</div> </div>
</div> </div>
<div className="flex justify-end"> <div className="flex justify-end ">
<div className=" p-3 bg-transparent "> {useAuth().user.isLoggedIn ? (
{useAuth().user.isLoggedIn ? ( <div className="flex text-xs">
<div className="flex text-xs"> <Link to="/profile" className="mr-2 ">
<Link to="/profile" className="mr-2 "> 프로필
프로필 </Link>
</Link> <div className="border-0 border-r-2 border-black "></div>
<div className="border-0 border-r-2 border-black "></div> <div></div>
<div></div> <button
<button className="ml-2 text-xs"
className="ml-2 mr-2 text-xs" onClick={() => {
onClick={() => { logout();
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> </button>
)} </div>
</div> ) : (
<button className="shrink-0 bg-transparent pr-3 text-xs"> <button className="shrink-0 ">
<Link
className="hover:text-sky-300 focus:text-purple-500 text-xs grid items-center"
to="/login"
>
로그인
</Link>
</button>
)}
<div className="ml-2 border-0 border-r-2 border-black "></div>
<div></div>
<button className="shrink-0 mr-3 text-xs ">
<Link <Link
to="/board" to="/board"
className="hover:text-sky-300 focus:text-purple-500" className="hover:text-sky-300 focus:text-purple-500 mx-2 grid items-center"
> >
게시판 게시판
</Link> </Link>
......
frontend/src/home/theme.tsx
View file @ 263c370b
...@@ -10,7 +10,7 @@ export default function Theme({ handleClick }: ThemeProps) { ...@@ -10,7 +10,7 @@ export default function Theme({ handleClick }: ThemeProps) {
<button <button
id={"surfing"} id={"surfing"}
onClick={handleClick} onClick={handleClick}
className="shrink-0 px-5 hover:text-sky-300" className="shrink-0 px-5 hover:text-sky-300 "
> >
서핑 서핑
</button> </button>
......
frontend/src/pages/citylist.tsx
View file @ 263c370b
...@@ -6,75 +6,77 @@ type CityProps = { ...@@ -6,75 +6,77 @@ 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-start px-5 py-2 bg-white shrink-0">도시</div> <div className="text-start px-5 py-2 bg-white whitespace-nowrap">
도시
</div>
<button <button
id={"서울"} id={"서울"}
onClick={handleClick} onClick={handleClick}
className="text-start px-5 py-2 hover:underline shrink-0" className="text-start px-5 py-2 hover:underline whitespace-nowrap"
> >
서울 서울
</button> </button>
<button <button
id={"부산"} id={"부산"}
onClick={handleClick} onClick={handleClick}
className="text-start px-5 py-2 hover:underline shrink-0" className="text-start px-5 py-2 hover:underline whitespace-nowrap"
> >
부산 부산
</button> </button>
<button <button
id={"인천"} id={"인천"}
onClick={handleClick} onClick={handleClick}
className="text-start px-5 py-2 hover:underline shrink-0" className="text-start px-5 py-2 hover:underline whitespace-nowrap"
> >
인천 인천
</button> </button>
<button <button
id={"대구"} id={"대구"}
onClick={handleClick} onClick={handleClick}
className="text-start px-5 py-2 hover:underline shrink-0" className="text-start px-5 py-2 hover:underline whitespace-nowrap"
> >
대구 대구
</button> </button>
<button <button
id={"광주"} id={"광주"}
onClick={handleClick} onClick={handleClick}
className="text-start px-5 py-2 hover:underline shrink-0" className="text-start px-5 py-2 hover:underline whitespace-nowrap"
> >
광주 광주
</button> </button>
<button <button
id={"대전"} id={"대전"}
onClick={handleClick} onClick={handleClick}
className="text-start px-5 py-2 hover:underline shrink-0" className="text-start px-5 py-2 hover:underline whitespace-nowrap"
> >
대전 대전
</button> </button>
<button <button
id={"울산"} id={"울산"}
onClick={handleClick} onClick={handleClick}
className="text-start px-5 py-2 hover:underline shrink-0" className="text-start px-5 py-2 hover:underline whitespace-nowrap"
> >
울산 울산
</button> </button>
<button <button
id={"세종"} id={"세종"}
onClick={handleClick} onClick={handleClick}
className="text-start px-5 py-2 hover:underline shrink-0" className="text-start px-5 py-2 hover:underline whitespace-nowrap"
> >
세종 세종
</button> </button>
<button <button
id={"독도"} id={"독도"}
onClick={handleClick} onClick={handleClick}
className="text-start px-5 py-2 hover:underline shrink-0" className="text-start px-5 py-2 hover:underline whitespace-nowrap"
> >
독도 독도
</button> </button>
<button <button
id={"제주"} id={"제주"}
onClick={handleClick} onClick={handleClick}
className="text-start px-5 py-2 hover:underline shrink-0" className="text-start px-5 py-2 hover:underline whitespace-nowrap"
> >
제주 제주
</button> </button>
......
frontend/src/post/editpost.tsx
View file @ 263c370b
...@@ -171,106 +171,95 @@ export function EditPost() { ...@@ -171,106 +171,95 @@ export function EditPost() {
}; };
return ( return (
<div className="flex place-content-center"> <form onSubmit={reWriteSubmit} className="flex flex-col w-full">
<form <div className="flex flex-row h-10 gap-x-1 justify-end">
onSubmit={reWriteSubmit} <div className="place-self-center w-16 h-6 border-2 border-sky-400 transition delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-gray-300 duration-300">
className="flex flex-col w-96 items-center" <input
> id="files"
<div className="flex flex-row h-8 gap-x-1"> type="file"
<div className="flex border-2 border-sky-400 rounded-full w-20 place-content-center transition ease-in-out delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-gray-300 duration-300"> multiple
<input onChange={handleInputPic}
id="files" className="hidden"
type="file" />
multiple <label htmlFor="files" className="text-xs grid place-items-center">
onChange={handleInputPic} 파일 선택
className="hidden" </label>
/> </div>
<label htmlFor="files" className="text-xs mt-1.5 ml-1 ">
파일 선택
</label>
</div>
<div className="flex w-20"> <select
<select name="city"
name="city" className="border-2 border-sky-400 text-xs h-6 place-self-center"
className="border-2 border-sky-400 rounded-full w-20 text-xs" onChange={cityChange}
onChange={cityChange} defaultValue={post.city}
defaultValue={post.city} >
> <option value="city">도시</option>
<option value="city">도시</option> <option value="Seoul">서울</option>
<option value="Seoul">서울</option> <option value="Busan">부산</option>
<option value="Busan">부산</option> <option value="Incheon">인천</option>
<option value="Incheon">인천</option> <option value="Daegu">대구</option>
<option value="Daegu">대구</option> <option value="Gwangju">광주</option>
<option value="Gwangju">광주</option> <option value="Daejeon">대전</option>
<option value="Daejeon">대전</option> <option value="Woolsan">울산</option>
<option value="Woolsan">울산</option> <option value="Sejong">세종</option>
<option value="Sejong">세종</option> <option value="Dokdo">독도</option>
<option value="Dokdo">독도</option> <option value="Jeju">제주</option>
<option value="Jeju">제주</option> </select>
</select>
</div>
<div className="flex w-20"> <select
<select name="theme"
name="theme" className="border-2 border-sky-400 text-xs h-6 place-self-center"
className="border-2 border-sky-400 rounded-full w-20 text-xs" onChange={themeChange}
onChange={themeChange} defaultValue={post.theme}
defaultValue={post.theme} >
> <option value="theme">테마</option>
<option value="theme">테마</option> <option value="cycling">사이클링</option>
<option value="cycling">사이클링</option> <option value="surfing">서핑</option>
<option value="surfing">서핑</option> <option value="activity">액티비티</option>
<option value="activity">액티비티</option> <option value="camping">캠핑</option>
<option value="camping">캠핑</option> <option value="sking">스키</option>
<option value="sking">스키</option> <option value="boat">보트</option>
<option value="boat">보트</option> <option value="desert">사막</option>
<option value="desert">사막</option> <option value="golf">골프</option>
<option value="golf">골프</option> <option value="cave">동굴</option>
<option value="cave">동굴</option> <option value="history">문화재</option>
<option value="history">문화재</option> <option value="zoo">동물원</option>
<option value="zoo">동물원</option> <option value="cycling">사이클링</option>
<option value="cycling">사이클링</option> </select>
</select>
</div>
<div className="flex w-20"> <button
<button type="submit"
type="submit" className="h-6 w-10 place-self-center place-self-center border-2 border-sky-400 text-xs text-center transition delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-sky-300 duration-300"
className="border-2 border-sky-400 rounded-full w-20 text-xs text-center transition delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-sky-300 duration-300" >
> 수정
수정 </button>
</button> </div>
</div>
</div>
<div className="flex flex-col"> <div className="flex flex-col w-full border-y-2 border-sky-500">
<textarea <textarea
name="title" name="title"
onChange={titleChange} onChange={titleChange}
placeholder="제목을 입력해 주세요!" placeholder="제목을 입력해 주세요!"
className="flex w-96 border-2 border-sky-500 rounded" className="flex focus:outline-none"
/> />
<div className="flex flex-col mt-1 mb-1"> <div className="flex flex-col mt-1 mb-1 border-t-2 border-sky-200">
<div className="flex gap-x-2 h-48 overflow-x-scroll"> <div className="flex gap-x-2 h-44 overflow-x-auto ">
{filesList?.map((file, i) => ( {filesList?.map((file, i) => (
<img <img
key={i} key={i}
src={"http://localhost:3000/images/" + file.newfilename} src={"http://localhost:3000/images/" + file.newfilename}
width={200} width={200}
height={200} height={200}
/> />
))} ))}
</div>
</div> </div>
<textarea
onChange={textChange}
name="text"
placeholder="여행 후기를 알려주세요!"
className="flex w-96 h-96 border-2 border-sky-500 rounded"
/>
</div> </div>
</form> <textarea
</div> onChange={textChange}
name="text"
placeholder="여행 후기를 알려주세요!"
className="flex h-44 border-t-2 border-sky-200 focus:outline-none "
/>
</div>
</form>
); );
} }
frontend/src/post/intopost.tsx
View file @ 263c370b
...@@ -59,68 +59,53 @@ export function IntoPost() { ...@@ -59,68 +59,53 @@ export function IntoPost() {
}; };
return ( return (
<div> <div className="flex flex-col">
<div> <div className="flex h-8 gap-x-1 place-content-end place-items-center">
<div> <button
<div className="flex flex-row h-8 gap-x-1 place-content-end"> id={post._id}
<div className="w-8"> onClick={handleDeleteClick}
<button className=" whitespace-nowrap flex border-2 border-sky-100 place-self-center h-6 w-8 text-xs text-center transition delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-red-300 duration-300"
id={post._id} >
onClick={handleDeleteClick} 삭제
className="border-2 border-sky-100 rounded-full h-8 w-8 text-xs text-center transition delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-red-300 duration-300" </button>
> <Link to="/edit" state={post}>
삭제 <button className="whitespace-nowrap flex border-2 border-sky-100 place-self-center h-6 w-8 text-xs transition delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-sky-300 duration-300">
</button> 수정
</div> </button>
<div className="w-8"> </Link>
<Link to="/edit" state={post}> </div>
<button className="border-2 border-sky-100 rounded-full h-8 w-8 text-xs transition delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-sky-300 duration-300"> <div className="flex h-10 border-t-2 border-sky-500 items-center font-semibold">
수정 {post.title}
</button> </div>
</Link>
</div> <div className="flex h-10 items-center border-t-2 border-sky-200 md:flex-row justify-between bg-slate-50 text-sm">
</div> <div className="flex whitespace-nowrap pr-5 ">
<div className="flex flex-col h-16 md:h-8 md:flex-row"> 작성자: {post.user.slice(0, 8)}
<div className="flex basis-1/2 place-content-between h-8">
<div className="flex basis-1/2 border-2 border-sky-200 rounded h-8">
작성자: {post.user.slice(0, 8)}
</div>
<div className="flex basis-1/2 border-2 border-sky-200 rounded h-8">
작성일: {post.date.slice(0, 10)}
</div>
</div>
<div className="flex basis-1/2 place-content-between h-8">
<div className="flex basis-1/3 border-2 border-sky-300 rounded">
도시: {post.city}
</div>
<div className="flex basis-1/3 border-2 border-sky-300 rounded">
테마: {post.theme}
</div>
<div className="flex basis-1/3 border-2 border-sky-300 rounded">
조회수: {post.counts}
</div>
</div>
</div>
<div className="flex flex-row h-8 gap-x-1 ">
<div className="flex w-full border-2 border-sky-200 rounded">
제목: {post.title}
</div>
</div>
</div> </div>
<div className="flex-row border-2 border-sky-400 rounded h-48 gap-x-2 ">
<div className="flex gap-x-2 h-48 overflow-x-scroll"> <div className="flex divide-x divide-slate-300 ">
{filesList?.map((file, i) => ( <div className="flex basis-1/2 whitespace-nowrap px-2">
<img 작성일 : {post.date.slice(0, 10)}
key={i} </div>
src={"http://localhost:3000/images/" + file.newfilename} <div className="flex whitespace-nowrap px-2"> {post.city}</div>
width={200} <div className="flex whitespace-nowrap px-2"> {post.theme}</div>
height={200} <div className="flex whitespace-nowrap px-2">
/> 조회수 : {post.counts}
))}
</div> </div>
</div> </div>
<div className="border-2 border-sky-500 rounded h-96">{post.text}</div>
</div> </div>
<div className="flex border-t-2 border-sky-200 h-44 p-2 overflow-auto mb-5 ">
{filesList?.map((file, i) => (
<img
key={i}
src={"http://localhost:3000/images/" + file.newfilename}
width={200}
height={200}
/>
))}
</div>
<div className="border-b-2 border-sky-500 h-44 mb-10">{post.text}</div>
</div> </div>
); );
} }
frontend/src/post/posting.tsx
View file @ 263c370b
...@@ -166,101 +166,90 @@ export default function Posting() { ...@@ -166,101 +166,90 @@ export default function Posting() {
}; };
return ( return (
<div className="flex place-content-center"> <form onSubmit={handlePostSubmit} className="flex flex-col w-full">
<form <div className="flex flex-row gap-x-1 justify-end h-10 ">
onSubmit={handlePostSubmit} <div className="place-self-center w-16 h-6 border-2 border-sky-400 transition delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-gray-300 duration-300">
className="flex flex-col w-96 items-center" <input
> id="files"
<div className="flex flex-row h-8 gap-x-1"> type="file"
<div className="flex border-2 border-sky-400 rounded-full w-20 place-content-center transition delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-gray-300 duration-300"> multiple
<input onChange={handleInputPic}
id="files" className="hidden"
type="file" />
multiple <label htmlFor="files" className="text-xs grid place-items-center">
onChange={handleInputPic} 파일 선택
className="hidden" </label>
/>
<label htmlFor="files" className="text-xs text-center mt-1.5 ml-1 ">
파일 선택
</label>
</div>
<div className="flex w-20">
<select
name="city"
className="border-2 border-sky-400 rounded-full w-20 text-xs"
onChange={cityChange}
defaultValue="질문종류"
>
<option value="질문종류">도시</option>
<option value="Seoul">서울</option>
<option value="Busan">부산</option>
<option value="Incheon">인천</option>
<option value="Daegu">대구</option>
<option value="Gwangju">광주</option>
<option value="Daejeon">대전</option>
<option value="Woolsan">울산</option>
<option value="Sejong">세종</option>
<option value="Dokdo">독도</option>
<option value="Jeju">제주</option>
</select>
</div>
<div className="flex w-20">
<select
name="theme"
className="border-2 border-sky-400 rounded-full w-20 text-xs"
onChange={themeChange}
defaultValue="질문종류"
>
<option value="질문종류">테마</option>
<option value="cycling">사이클링</option>
<option value="surfing">서핑</option>
<option value="activity">액티비티</option>
<option value="camping">캠핑</option>
<option value="sking">스키</option>
<option value="boat">보트</option>
<option value="desert">사막</option>
<option value="golf">골프</option>
<option value="cave">동굴</option>
<option value="history">문화재</option>
<option value="zoo">동물원</option>
<option value="cycling">사이클링</option>
</select>
</div>
<div className="flex w-20">
<button
type="submit"
className="border-2 border-sky-400 rounded-full w-20 text-xs text-center transition ease-in-out delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-sky-300 duration-300"
>
글쓰기
</button>
</div>
</div> </div>
<div className="flex flex-col"> <select
<textarea name="city"
name="title" className="border-2 border-sky-400 text-xs h-6 place-self-center"
onChange={titleChange} onChange={cityChange}
placeholder="제목을 입력해 주세요!" defaultValue="질문종류"
className="flex w-96 border-2 border-sky-500 rounded" >
/> <option value="질문종류">도시</option>
<div className="flex flex-col mt-1 mb-1"> <option value="Seoul">서울</option>
<div className="flex gap-x-2 h-48 overflow-x-scroll"> <option value="Busan">부산</option>
{imgSrc?.map((img, i) => ( <option value="Incheon">인천</option>
<img key={i} src={img} width={200} height={200} /> <option value="Daegu">대구</option>
))} <option value="Gwangju">광주</option>
</div> <option value="Daejeon">대전</option>
<option value="Woolsan">울산</option>
<option value="Sejong">세종</option>
<option value="Dokdo">독도</option>
<option value="Jeju">제주</option>
</select>
<select
name="theme"
className="border-2 border-sky-400 text-xs h-6 place-self-center"
onChange={themeChange}
defaultValue="질문종류"
>
<option value="질문종류">테마</option>
<option value="cycling">사이클링</option>
<option value="surfing">서핑</option>
<option value="activity">액티비티</option>
<option value="camping">캠핑</option>
<option value="sking">스키</option>
<option value="boat">보트</option>
<option value="desert">사막</option>
<option value="golf">골프</option>
<option value="cave">동굴</option>
<option value="history">문화재</option>
<option value="zoo">동물원</option>
<option value="cycling">사이클링</option>
</select>
<button
type="submit"
className="h-6 place-self-center place-self-center border-2 border-sky-400 text-xs text-center transition ease-in-out delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-sky-300 duration-300"
>
글쓰기
</button>
</div>
<div className="flex flex-col w-full border-y-2 border-sky-500">
<textarea
name="title"
onChange={titleChange}
placeholder="제목을 입력해 주세요!"
className="flex focus:outline-none"
/>
<div className="flex flex-col mt-1 mb-1 border-t-2 border-sky-200">
<div className="flex gap-x-2 h-44 overflow-x-auto">
{imgSrc?.map((img, i) => (
<img key={i} src={img} width={200} height={200} />
))}
</div> </div>
<textarea
onChange={textChange}
name="text"
placeholder="여행 후기를 알려주세요!"
className="flex w-96 h-96 border-2 border-sky-500 rounded"
/>
</div> </div>
</form> <textarea
</div> onChange={textChange}
name="text"
placeholder="여행 후기를 알려주세요!"
className="flex h-44 border-t-2 border-sky-200 focus:outline-none "
/>
</div>
</form>
); );
} }
src/db/mainimg.db.ts
View file @ 263c370b
...@@ -18,7 +18,7 @@ export const createMainimg = async (mainimg: MainimgType, pic: IFileInfo) => { ...@@ -18,7 +18,7 @@ export const createMainimg = async (mainimg: MainimgType, pic: IFileInfo) => {
}; };
export const getMainimg = async () => { export const getMainimg = async () => {
const img = await Mainimg.find({}).populate("pic"); const img = await Mainimg.find({}).populate("fileInfo");
return img; return img;
}; };
......
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