Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
travel
Commits
263c370b
Commit
263c370b
authored
Jul 25, 2022
by
Kim, MinGyu
Browse files
전체적인 css 개선
parent
769ea9f4
Changes
12
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-
6
00 hover:bg-sky-
7
00 rounded-xl text-xl py-4 md:px-4"
className
=
"my-4 md:my-0 bg-sky-
5
00 hover:bg-sky-
4
00 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 m
x-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-
2
0 border-2
shrink-0 ml-10
"
className
=
"
mt-5 h-12
w-
4
0 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-
2
0
border-2 shrink-0 mr-10
"
className
=
"
mt-5 h-12
w-
4
0
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
;
};
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment