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() {
<button
disabled={disabled}
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 && (
......
frontend/src/auth/profile.tsx
View file @ 263c370b
......@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
import { Profile } from "../types";
import { profileApi } from "../apis";
import { useAuth } from "../auth/auth.context";
import { Link } from "react-router-dom";
export default function Profile() {
// 로컬 저장소에는 로그인 여부만 저장
......@@ -88,8 +89,8 @@ export default function Profile() {
return (
<div className="grid ">
<form className="justify-items-center">
<div className=" mt-10">프로필 수정</div>
<form className="">
<div className=" mt-10 text-2xl">프로필 수정</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">
......@@ -104,7 +105,7 @@ export default function Profile() {
사진
</div>
<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 ? (
<img
src={imageSrc}
......@@ -140,16 +141,21 @@ export default function Profile() {
/>
</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
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 className=" mt-5 h-12 w-40 text-lg border-2 border-orange-400 place-self-center">
<Link to="/">취소</Link>
</button>
<button
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>
......
frontend/src/auth/signup.tsx
View file @ 263c370b
......@@ -68,48 +68,68 @@ export default function Signup() {
}
return (
<div className="flex flex-col items-center">
<div className=" md:w-40 mt-8 text-center text-2xl rounded-2xl">
<div className="flex flex-col">
<div className="flex place-items-strat ml-2 mt-8 text-center text-2xl ">
<Link to="/">회원가입</Link>
</div>
<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>
<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 className="flex flex-col ">
<div className="border-0 border-y-2 border-black">
<div className="h-16 flex ">
<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="h-10 basis-1/5 border-2 focus:border-black"
type="text"
name="name"
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="email"
name="email"
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="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>
{error && (
<div className="text-red-500 text-sm">
......@@ -117,7 +137,10 @@ export default function Signup() {
</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 && (
<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() {
};
return (
<div className="flex flex-col items-center">
<div className="flex flex-col w-10/12 items-center mt-6">
<div>`Travel Report's Board`</div>
<div>`여행지 후기를 남겨주세요!`</div>
<div className="flex flex-col ">
<div className="flex flex-col mt-6">
<div className="text-2xl">자유 게시판</div>
<div className="text-sm mt-5">여행지 후기를 남겨주세요!</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="border-2 border-blue-500 rounded mb-2">
<Link to="/posting">
......@@ -51,13 +51,13 @@ export default function BoardPage() {
</div>{" "}
{/* Link */}
</div>
<div className="sm:overflow-y-scroll">
<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="basis-full">Title</div>
<div className="basis-3/12">Date</div>
<div className="basis-2/12">Clicks</div>
<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="basis-full">제목</div>
<div className="basis-3/12">게시 날짜</div>
<div className="basis-2/12">조회수</div>
</div>
<div>
<div className="">
{posts?.map((post, i) => (
<Post key={i} post={post} handleClick={titleHandleClick} />
))}
......
frontend/src/home/body.tsx
View file @ 263c370b
......@@ -15,8 +15,8 @@ export default function Body() {
async function imgsData() {
const imgs = await mainimgApi.getmainimg();
setGetimgs(imgs)
};
setGetimgs(imgs);
}
useEffect(() => {
imgsData();
}, []);
......@@ -59,22 +59,26 @@ export default function Body() {
let limit = 4;
const numPages = Math.ceil(Idpics.length / limit);
const slides = []
const slides = [];
for (let i = 0; i < numPages; i++) {
const k = [
Idpics.slice(i * limit, i * limit + limit).map((picture, index: number) => (
<div
className={`m-1 shrink-0 rounded shadow-md h-45 relative overflow-hidden`}
key={index}>
<img
src={"http://localhost:3000/images/" + picture.pic.newfilename}
className="w-full h-40 object-cover hover:scale-110 transition duration-0 hover:duration-500"
/>
<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>
Idpics.slice(i * limit, i * limit + limit).map(
(picture, index: number) => (
<div
className={`m-1 shrink-0 rounded shadow-md h-45 relative overflow-hidden`}
key={index}
>
<img
src={"http://localhost:3000/images/" + picture.pic.newfilename}
className="w-full h-40 object-cover hover:scale-110 transition duration-0 hover:duration-500"
/>
<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>
))]
)
),
];
slides.push(k);
}
......@@ -82,13 +86,11 @@ export default function Body() {
<div className="flex flex-col">
<Theme handleClick={themeHandleClick} />
<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} />
</div>
<div className="flex flex-col">
<MySlide key={Math.random()}
slides={slides}
/>
<MySlide key={Math.random()} slides={slides} />
</div>
</div>
<Outlet />
......
frontend/src/home/header.tsx
View file @ 263c370b
......@@ -14,15 +14,15 @@ export default function Header() {
};
return (
<div className="flex flex-col md:px-56 ">
<div className="flex flex-col-reverse pt-3 pb-12 border-b-2 ">
<div className="flex flex-col lg: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 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 ">
<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-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}
......@@ -32,41 +32,39 @@ export default function Header() {
</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>
<div className="flex justify-end ">
{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 text-xs"
onClick={() => {
logout();
}}
>
로그아웃
</button>
)}
</div>
<button className="shrink-0 bg-transparent pr-3 text-xs">
</div>
) : (
<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
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>
......
frontend/src/home/theme.tsx
View file @ 263c370b
......@@ -10,7 +10,7 @@ export default function Theme({ handleClick }: ThemeProps) {
<button
id={"surfing"}
onClick={handleClick}
className="shrink-0 px-5 hover:text-sky-300"
className="shrink-0 px-5 hover:text-sky-300 "
>
서핑
</button>
......
frontend/src/pages/citylist.tsx
View file @ 263c370b
......@@ -6,75 +6,77 @@ 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-start px-5 py-2 bg-white shrink-0">도시</div>
<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>
<button
id={"서울"}
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
id={"부산"}
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
id={"인천"}
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
id={"대구"}
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
id={"광주"}
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
id={"대전"}
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
id={"울산"}
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
id={"세종"}
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
id={"독도"}
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
id={"제주"}
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>
......
frontend/src/post/editpost.tsx
View file @ 263c370b
......@@ -171,106 +171,95 @@ export function EditPost() {
};
return (
<div className="flex place-content-center">
<form
onSubmit={reWriteSubmit}
className="flex flex-col w-96 items-center"
>
<div className="flex flex-row h-8 gap-x-1">
<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">
<input
id="files"
type="file"
multiple
onChange={handleInputPic}
className="hidden"
/>
<label htmlFor="files" className="text-xs mt-1.5 ml-1 ">
파일 선택
</label>
</div>
<form onSubmit={reWriteSubmit} className="flex flex-col w-full">
<div className="flex flex-row h-10 gap-x-1 justify-end">
<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">
<input
id="files"
type="file"
multiple
onChange={handleInputPic}
className="hidden"
/>
<label htmlFor="files" className="text-xs grid place-items-center">
파일 선택
</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={post.city}
>
<option value="city">도시</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>
<select
name="city"
className="border-2 border-sky-400 text-xs h-6 place-self-center"
onChange={cityChange}
defaultValue={post.city}
>
<option value="city">도시</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 className="flex w-20">
<select
name="theme"
className="border-2 border-sky-400 rounded-full w-20 text-xs"
onChange={themeChange}
defaultValue={post.theme}
>
<option value="theme">테마</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>
<select
name="theme"
className="border-2 border-sky-400 text-xs h-6 place-self-center"
onChange={themeChange}
defaultValue={post.theme}
>
<option value="theme">테마</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 className="flex w-20">
<button
type="submit"
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>
</div>
</div>
<button
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"
>
수정
</button>
</div>
<div className="flex flex-col">
<textarea
name="title"
onChange={titleChange}
placeholder="제목을 입력해 주세요!"
className="flex w-96 border-2 border-sky-500 rounded"
/>
<div className="flex flex-col mt-1 mb-1">
<div className="flex gap-x-2 h-48 overflow-x-scroll">
{filesList?.map((file, i) => (
<img
key={i}
src={"http://localhost:3000/images/" + file.newfilename}
width={200}
height={200}
/>
))}
</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 ">
{filesList?.map((file, i) => (
<img
key={i}
src={"http://localhost:3000/images/" + file.newfilename}
width={200}
height={200}
/>
))}
</div>
<textarea
onChange={textChange}
name="text"
placeholder="여행 후기를 알려주세요!"
className="flex w-96 h-96 border-2 border-sky-500 rounded"
/>
</div>
</form>
</div>
<textarea
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() {
};
return (
<div>
<div>
<div>
<div className="flex flex-row h-8 gap-x-1 place-content-end">
<div className="w-8">
<button
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>
</div>
<div className="w-8">
<Link to="/edit" state={post}>
<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">
수정
</button>
</Link>
</div>
</div>
<div className="flex flex-col h-16 md:h-8 md:flex-row">
<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 className="flex flex-col">
<div className="flex h-8 gap-x-1 place-content-end place-items-center">
<button
id={post._id}
onClick={handleDeleteClick}
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"
>
삭제
</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>
</Link>
</div>
<div className="flex h-10 border-t-2 border-sky-500 items-center font-semibold">
{post.title}
</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 className="flex whitespace-nowrap pr-5 ">
작성자: {post.user.slice(0, 8)}
</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">
{filesList?.map((file, i) => (
<img
key={i}
src={"http://localhost:3000/images/" + file.newfilename}
width={200}
height={200}
/>
))}
<div className="flex divide-x divide-slate-300 ">
<div className="flex basis-1/2 whitespace-nowrap px-2">
작성일 : {post.date.slice(0, 10)}
</div>
<div className="flex whitespace-nowrap px-2"> {post.city}</div>
<div className="flex whitespace-nowrap px-2"> {post.theme}</div>
<div className="flex whitespace-nowrap px-2">
조회수 : {post.counts}
</div>
</div>
<div className="border-2 border-sky-500 rounded h-96">{post.text}</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>
);
}
frontend/src/post/posting.tsx
View file @ 263c370b
......@@ -166,101 +166,90 @@ export default function Posting() {
};
return (
<div className="flex place-content-center">
<form
onSubmit={handlePostSubmit}
className="flex flex-col w-96 items-center"
>
<div className="flex flex-row h-8 gap-x-1">
<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">
<input
id="files"
type="file"
multiple
onChange={handleInputPic}
className="hidden"
/>
<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>
<form onSubmit={handlePostSubmit} className="flex flex-col w-full">
<div className="flex flex-row gap-x-1 justify-end h-10 ">
<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">
<input
id="files"
type="file"
multiple
onChange={handleInputPic}
className="hidden"
/>
<label htmlFor="files" className="text-xs grid place-items-center">
파일 선택
</label>
</div>
<div className="flex flex-col">
<textarea
name="title"
onChange={titleChange}
placeholder="제목을 입력해 주세요!"
className="flex w-96 border-2 border-sky-500 rounded"
/>
<div className="flex flex-col mt-1 mb-1">
<div className="flex gap-x-2 h-48 overflow-x-scroll">
{imgSrc?.map((img, i) => (
<img key={i} src={img} width={200} height={200} />
))}
</div>
<select
name="city"
className="border-2 border-sky-400 text-xs h-6 place-self-center"
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>
<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>
<textarea
onChange={textChange}
name="text"
placeholder="여행 후기를 알려주세요!"
className="flex w-96 h-96 border-2 border-sky-500 rounded"
/>
</div>
</form>
</div>
<textarea
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) => {
};
export const getMainimg = async () => {
const img = await Mainimg.find({}).populate("pic");
const img = await Mainimg.find({}).populate("fileInfo");
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