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
b2cc9167
Commit
b2cc9167
authored
Aug 18, 2022
by
Kim, MinGyu
Browse files
test
parent
2b496d1c
Changes
11
Hide whitespace changes
Inline
Side-by-side
frontend/src/App.tsx
View file @
b2cc9167
...
...
@@ -4,7 +4,7 @@ import "tailwindcss/tailwind.css";
import
{
IntoPost
}
from
"
./post/intopost
"
;
import
{
Login
,
Profile
,
RequireAuth
,
Signup
,
Admin
,
ImgRewrite
}
from
"
./auth
"
;
import
{
Header
,
Body
}
from
"
./home
"
;
import
{
Board
}
from
"
./board
"
;
import
{
Board
,
Posts
}
from
"
./board
"
;
import
Posting
from
"
./post/posting
"
;
import
{
Layout
}
from
"
./commons
"
;
import
{
EditPost
}
from
"
./post/editpost
"
;
...
...
@@ -18,7 +18,7 @@ export const App = () => {
<
Route
path
=
"login"
element
=
{
<
Login
/>
}
/>
<
Route
path
=
"signup"
element
=
{
<
Signup
/>
}
/>
<
Route
index
element
=
{
<
Body
/>
}
/>
<
Route
{
/*
<Route
path="posting"
element={
<RequireAuth>
...
...
@@ -28,7 +28,29 @@ export const App = () => {
/>
<Route path="board" element={<Board />} />
<Route path="post/:postId" element={<IntoPost />} />
<
Route
path
=
"edit"
element
=
{
<
EditPost
/>
}
/>
<Route path="edit" element={<EditPost />} /> */
}
<
Route
path
=
"posts"
element
=
{
<
Posts
/>
}
>
<
Route
path
=
"posting"
element
=
{
<
RequireAuth
>
<
Posting
/>
</
RequireAuth
>
}
/>
<
Route
path
=
":postId"
element
=
{
<
RequireAuth
>
<
IntoPost
/>
</
RequireAuth
>
}
/>
<
Route
path
=
":postId/edit"
element
=
{
<
EditPost
/>
}
/>
<
Route
index
element
=
{
<
Board
/>
}
/>
</
Route
>
<
Route
path
=
"profile"
element
=
{
...
...
frontend/src/auth/profile.tsx
View file @
b2cc9167
...
...
@@ -69,8 +69,8 @@ export default function Profile() {
return
(
<
div
>
<
div
className
=
"grid bg-white rounded shadow-lg mb-5"
>
<
form
className
=
"mx-24 "
onSubmit
=
{
handleSubmit
}
>
<
div
className
=
"
mx-6
grid bg-white rounded shadow-lg mb-5"
>
<
form
className
=
"
md:
mx-24 "
onSubmit
=
{
handleSubmit
}
>
<
div
className
=
" mt-7 text-2xl"
>
프로필 수정
</
div
>
<
div
className
=
" mt-10 border-0 border-y-2 border-gray-400"
>
<
div
className
=
"flex h-20"
>
...
...
@@ -102,22 +102,24 @@ export default function Profile() {
)
)
}
</
div
>
<
input
type
=
"file"
name
=
"avatar"
id
=
"avatar"
className
=
"hidden"
onChange
=
{
handleChange
}
></
input
>
<
label
htmlFor
=
"avatar"
className
=
"border-2 m-5 whitespace-nowrap "
>
이미지 선택
</
label
>
</
div
>
<
div
className
=
"pl-10 flex place-self-center text-gray-400 text-sm whitespace-nowrap"
>
{
"
<새로운 이미지를 넣어보세요!>
"
}
<
div
className
=
"flex"
>
<
input
type
=
"file"
name
=
"avatar"
id
=
"avatar"
className
=
"hidden"
onChange
=
{
handleChange
}
></
input
>
<
label
htmlFor
=
"avatar"
className
=
"border-2 m-5 whitespace-nowrap "
>
이미지 선택
</
label
>
<
div
className
=
" flex place-self-center text-gray-400 text-sm whitespace-nowrap"
>
{
"
<새로운 이미지를 넣어보세요!>
"
}
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
...
...
frontend/src/auth/signup.tsx
View file @
b2cc9167
...
...
@@ -75,13 +75,13 @@ export default function Signup() {
</
div
>
<
form
onSubmit
=
{
handleSubmit
}
className
=
"flex flex-col mt-16 gap-y-4"
>
<
div
className
=
"flex flex-col px-32 pb-5"
>
<
div
className
=
"border-0 border-y-2 border-black"
>
<
div
className
=
"h-16 flex"
>
<
div
className
=
"flex flex-col
px-8 sm:
px-32 pb-5"
>
<
div
className
=
"border-0 border-y-2 border-black
"
>
<
div
className
=
"h-16 flex
"
>
<
div
className
=
"whitespace-nowrap grid place-items-center w-32 lg:basis-1/5 shrink-0 border-0 border-r-2"
>
이름
</
div
>
<
div
className
=
"flex items-center mx-5"
>
<
div
className
=
"flex items-center mx-5
"
>
<
input
className
=
"h-10 w-4/5 lg:w-60 border-2 focus:border-black"
type
=
"text"
...
...
frontend/src/board/board.tsx
View file @
b2cc9167
import
React
,
{
useState
,
MouseEvent
,
useEffect
}
from
"
react
"
;
import
{
Link
,
useLocation
,
useNavigate
}
from
"
react-router-dom
"
;
import
{
Link
,
Outlet
,
useLocation
,
useNavigate
,
useOutletContext
,
}
from
"
react-router-dom
"
;
import
{
PostType
}
from
"
../types
"
;
import
Post
from
"
../post/post
"
;
import
{
postApi
}
from
"
../apis
"
;
import
{
useAuth
}
from
"
../auth/auth.context
"
;
interface
P
ost
s
{
interface
P
rop
s
{
posts
:
PostType
[];
}
...
...
@@ -14,49 +21,24 @@ interface Newpost {
}
export
default
function
BoardPage
()
{
const
[
posts
,
setPosts
]
=
useState
<
PostType
[]
>
();
const
posts
=
useOutletContext
<
PostType
[]
>
();
const
location
=
useLocation
()
as
Newpost
;
const
newPost
=
location
.
state
;
const
navigate
=
useNavigate
();
const
{
user
}
=
useAuth
();
// console.log("get newPost Info", newPost);
const
setNewPosts
=
(
newpost
:
PostType
)
=>
{
const
postArr
=
posts
?.
splice
(
-
1
,
0
,
newPost
);
if
(
!
(
postArr
===
undefined
))
{
setPosts
(
postArr
);
}
};
useEffect
(()
=>
{
getDataList
();
setNewPosts
(
newPost
);
},
[]);
// posts
const
getDataList
=
async
()
=>
{
const
res
=
await
postApi
.
getData
();
setPosts
(
res
);
//posts = res
};
const
titleHandleClick
=
async
(
event
:
MouseEvent
<
HTMLButtonElement
>
)
=>
{
if
(
!
user
.
isLoggedIn
)
{
alert
(
"
로그인이 필요합니다.
"
);
navigate
(
"
/login
"
,
{
replace
:
true
});
}
else
{
const
postId
=
event
.
currentTarget
.
id
;
const
newpost
=
posts
?.
find
((
element
)
=>
{
if
(
element
.
_id
===
postId
)
{
return
element
;
}
});
if
(
!
(
newpost
?.
_id
===
undefined
))
{
const
post
=
newpost
;
const
res
=
await
postApi
.
addCounts
(
post
.
_id
,
post
.
counts
);
// console.log(res);
setPosts
(
res
);
const
handleClick
=
async
(
event
:
MouseEvent
<
HTMLButtonElement
>
)
=>
{
const
postId
=
event
.
currentTarget
.
id
;
const
newpost
=
posts
?.
find
((
element
)
=>
{
if
(
element
.
_id
===
postId
)
{
return
element
;
}
});
if
(
!
(
newpost
?.
_id
===
undefined
))
{
const
post
=
newpost
;
const
res
=
await
postApi
.
addCounts
(
post
.
_id
,
post
.
counts
);
// console.log(res);
// setPosts(res);
}
};
...
...
@@ -82,7 +64,7 @@ export default function BoardPage() {
<
div
className
=
"flex justify-end"
>
<
div
className
=
"border-2 border-blue-500 rounded mb-2 whitespace-nowrap"
>
<
button
onClick
=
{
GoLogin
}
>
<
Link
to
=
"
/
posting"
>
글쓰기
</
Link
>
<
Link
to
=
"posting"
>
글쓰기
</
Link
>
</
button
>
</
div
>
</
div
>
...
...
@@ -94,11 +76,12 @@ export default function BoardPage() {
</
div
>
<
div
className
=
"whitespace-nowrap"
>
{
posts
?.
map
((
post
,
i
)
=>
(
<
Post
key
=
{
i
}
post
=
{
post
}
handleClick
=
{
titleH
andleClick
}
/>
<
Post
key
=
{
i
}
post
=
{
post
}
handleClick
=
{
h
andleClick
}
/>
))
}
</
div
>
</
div
>
</
div
>
<
Outlet
/>
</
div
>
);
}
frontend/src/board/index.tsx
View file @
b2cc9167
export
{
default
as
Board
}
from
"
./board
"
;
export
{
default
as
Posts
}
from
"
./board
"
;
frontend/src/board/posts.tsx
0 → 100644
View file @
b2cc9167
import
React
,
{
ReactNode
,
useState
,
useEffect
}
from
"
react
"
;
import
{
Outlet
,
useLocation
}
from
"
react-router-dom
"
;
import
{
postApi
}
from
"
../apis
"
;
import
{
PostType
}
from
"
../types
"
;
interface
FormType
{
state
:
FormData
;
}
export
default
function
Posts
()
{
const
[
posts
,
setPosts
]
=
useState
<
PostType
[]
>
([]);
const
location
=
useLocation
()
as
FormType
;
const
formdata
=
location
.
state
;
useEffect
(()
=>
{
getDataList
();
},
[]);
//Read
const
getDataList
=
async
()
=>
{
const
res
=
await
postApi
.
getData
();
setPosts
(
res
);
};
//Create
const
createPost
=
async
(
filelist
:
FileList
)
=>
{
if
(
!
(
filelist
===
undefined
||
filelist
===
null
))
{
if
(
filelist
.
length
===
1
)
{
formdata
.
append
(
"
picture
"
,
filelist
?.[
0
]);
const
res
=
await
postApi
.
createFileAndPost
(
formdata
);
return
res
;
}
else
{
for
(
var
i
=
0
;
i
<
filelist
.
length
;
i
++
)
{
formdata
.
append
(
"
picture
"
,
filelist
?.[
i
]);
}
const
res
=
await
postApi
.
createFileAndPost
(
formdata
);
return
res
;
}
}
};
//Delete
const
deletePost
=
async
(
postId
:
string
)
=>
{
const
res
=
await
postApi
.
deletePost
(
postId
);
return
res
;
};
console
.
log
(
"
sdfa
"
,
posts
);
return
<
Outlet
context
=
{
{
posts
,
createPost
,
deletePost
}
}
/>;
}
frontend/src/home/header.tsx
View file @
b2cc9167
...
...
@@ -73,7 +73,7 @@ export default function Header() {
<
div
></
div
>
<
button
className
=
"shrink-0 mr-3 text-xs "
>
<
Link
to
=
"/
board
"
to
=
"/
posts
"
className
=
"hover:text-sky-300 focus:text-purple-500 mx-2 grid items-center"
>
게시판
...
...
frontend/src/post/editpost.tsx
View file @
b2cc9167
...
...
@@ -54,9 +54,9 @@ export function EditPost() {
for
(
var
i
=
0
;
i
<
filelist
.
length
;
i
++
)
{
formdata
.
append
(
"
picture
"
,
filelist
?.[
i
]);
}
console
.
log
(
"
one file update before
"
);
//
console.log("one file update before");
const
res
=
await
postApi
.
updateImgAndPost
(
user
.
_id
,
formdata
);
console
.
log
(
"
one file update
"
,
res
);
//
console.log("one file update", res);
return
res
;
}
};
...
...
@@ -72,7 +72,7 @@ export function EditPost() {
const
updateRes
=
await
updateImg2Db
(
file
);
// console.log("find newfilename", updateRes);
navigate
(
{
pathname
:
`/post/
${
post
.
_id
}
`
},
{
pathname
:
`/post
s
/
${
post
.
_id
}
`
},
{
replace
:
true
,
state
:
updateRes
}
);
...
...
frontend/src/post/intopost.tsx
View file @
b2cc9167
...
...
@@ -28,10 +28,10 @@ export function IntoPost() {
const
handleDeleteClick
=
async
(
event
:
MouseEvent
<
HTMLButtonElement
>
)
=>
{
try
{
if
(
confirm
(
"
삭제하시겠습니까?
"
)
==
true
)
{
const
postId
=
event
.
currentTarget
.
id
;
const
res
=
await
postApi
.
deletePost
(
postId
);
navigate
(
"
/
board
"
);
console
.
log
(
"
delete post
"
,
res
);
//
const postId = event.currentTarget.id;
//
const res = await postApi.deletePost(postId);
navigate
(
"
/
posts
"
);
//
console.log("delete post", res);
}
else
{
return
false
;
}
...
...
@@ -54,11 +54,11 @@ export function IntoPost() {
>
삭제
</
button
>
<
Link
to
=
"/edit"
state
=
{
posts
}
>
<
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:bg-sky-300 duration-300"
>
<
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:bg-sky-300 duration-300"
>
<
Link
to
=
"edit"
state
=
{
posts
}
>
수정
</
button
>
</
Link
>
</
Link
>
</
button
>
</
div
>
<
div
className
=
"flex h-10 border-t-2 border-sky-500 items-center text-2xl font-medium md:text-2xl"
>
{
posts
?.
title
}
...
...
frontend/src/post/post.tsx
View file @
b2cc9167
...
...
@@ -13,7 +13,7 @@ export default function Post({ handleClick, post }: Props) {
<
div
className
=
"flex flex-row h-16 divide-x-2 border-2 border-solid"
>
<
div
className
=
"basis-full"
>
<
button
id
=
{
post
.
_id
}
onClick
=
{
handleClick
}
>
<
Link
to
=
{
`
/post/
${
post
.
_id
}
`
}
state
=
{
post
}
>
<
Link
to
=
{
`
${
post
.
_id
}
`
}
state
=
{
post
}
>
{
post
.
title
}
</
Link
>
</
button
>
...
...
frontend/src/post/posting.tsx
View file @
b2cc9167
...
...
@@ -45,29 +45,29 @@ export default function Posting() {
const
imgArr
=
new
Array
();
const
sendImg2Db
=
async
(
filelist
:
FileList
)
=>
{
const
formdata
=
new
FormData
();
formdata
.
append
(
"
title
"
,
user
.
title
);
formdata
.
append
(
"
text
"
,
user
.
text
);
formdata
.
append
(
"
theme
"
,
user
.
theme
);
formdata
.
append
(
"
city
"
,
user
.
city
);
if
(
!
(
filelist
===
undefined
||
filelist
===
null
))
{
if
(
filelist
.
length
===
1
)
{
formdata
.
append
(
"
picture
"
,
filelist
?.[
0
]);
//
const sendImg2Db = async (filelist: FileList) => {
//
const formdata = new FormData();
//
formdata.append("title", user.title);
//
formdata.append("text", user.text);
//
formdata.append("theme", user.theme);
//
formdata.append("city", user.city);
//
if (!(filelist === undefined || filelist === null)) {
//
if (filelist.length === 1) {
//
formdata.append("picture", filelist?.[0]);
const
res
=
await
postApi
.
createFileAndPost
(
formdata
);
//
const res = await postApi.createFileAndPost(formdata);
return
res
;
}
else
{
for
(
var
i
=
0
;
i
<
filelist
.
length
;
i
++
)
{
formdata
.
append
(
"
picture
"
,
filelist
?.[
i
]);
}
const
res
=
await
postApi
.
createFileAndPost
(
formdata
);
//
return res;
//
} else {
//
for (var i = 0; i < filelist.length; i++) {
//
formdata.append("picture", filelist?.[i]);
//
}
//
const res = await postApi.createFileAndPost(formdata);
return
res
;
}
}
};
//
return res;
//
}
//
}
//
};
async
function
handlePostSubmit
(
event
:
FormEvent
)
{
event
.
preventDefault
();
...
...
@@ -77,8 +77,13 @@ export default function Posting() {
if
(
postingFormMatch
(
user
,
file
))
{
setLoading
(
true
);
if
(
file
)
{
const
postRes
=
await
sendImg2Db
(
file
);
navigate
(
"
/board
"
,
{
replace
:
true
,
state
:
postRes
});
const
formdata
=
new
FormData
();
formdata
.
append
(
"
title
"
,
user
.
title
);
formdata
.
append
(
"
text
"
,
user
.
text
);
formdata
.
append
(
"
theme
"
,
user
.
theme
);
formdata
.
append
(
"
city
"
,
user
.
city
);
// const postRes = await createPost(file, formdata);
navigate
(
"
/posts
"
,
{
replace
:
true
,
state
:
formdata
});
}
setSuccess
(
true
);
setError
(
""
);
...
...
@@ -120,38 +125,22 @@ export default function Posting() {
}
}
const
title
Change
=
(
event
:
React
.
ChangeEvent
<
HTMLTextAreaElement
>
)
=>
{
const
title
=
event
.
currentTarget
.
value
;
const
newUser
=
{
...
user
,
title
:
titl
e
};
const
string
Change
=
(
event
:
React
.
ChangeEvent
<
HTMLTextAreaElement
>
)
=>
{
const
{
name
,
value
}
=
event
.
currentTarget
;
const
newUser
=
{
...
user
,
[
name
]:
valu
e
};
console
.
log
(
event
.
currentTarget
.
value
);
setTitle
(
event
.
currentTarget
.
value
);
setUser
(
newUser
);
};
const
tex
tChange
=
(
event
:
React
.
ChangeEvent
<
HTML
TextArea
Element
>
)
=>
{
const
text
=
event
.
currentTarget
.
value
;
const
newUser
=
{
...
user
,
text
:
text
};
const
selec
tChange
=
(
event
:
React
.
ChangeEvent
<
HTML
Select
Element
>
)
=>
{
const
{
name
,
value
}
=
event
.
currentTarget
;
const
newUser
=
{
...
user
,
[
name
]:
value
};
console
.
log
(
event
.
currentTarget
.
value
);
setText
(
event
.
currentTarget
.
value
);
setUser
(
newUser
);
};
const
cityChange
=
(
event
:
React
.
ChangeEvent
<
HTMLSelectElement
>
)
=>
{
const
city
=
event
.
currentTarget
.
value
;
const
newUser
=
{
...
user
,
city
:
city
};
console
.
log
(
event
.
currentTarget
.
value
);
setCity
(
event
.
currentTarget
.
value
);
setUser
(
newUser
);
};
const
themeChange
=
(
event
:
React
.
ChangeEvent
<
HTMLSelectElement
>
)
=>
{
const
theme
=
event
.
currentTarget
.
value
;
const
newUser
=
{
...
user
,
theme
:
theme
};
console
.
log
(
event
.
currentTarget
.
value
);
setTheme
(
event
.
currentTarget
.
value
);
setUser
(
newUser
);
};
const
handleInputPic
=
async
(
event
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
{
const
maxImg
=
10
;
const
{
files
}
=
event
.
target
;
...
...
@@ -206,7 +195,7 @@ export default function Posting() {
<
select
name
=
"city"
className
=
"border-2 border-sky-400 text-xs h-6 place-self-center"
onChange
=
{
city
Change
}
onChange
=
{
select
Change
}
defaultValue
=
"city"
>
<
option
value
=
"city"
>
도시
</
option
>
...
...
@@ -225,7 +214,7 @@ export default function Posting() {
<
select
name
=
"theme"
className
=
"border-2 border-sky-400 text-xs h-6 place-self-center"
onChange
=
{
theme
Change
}
onChange
=
{
select
Change
}
defaultValue
=
"theme"
>
<
option
value
=
"theme"
>
테마
</
option
>
...
...
@@ -254,7 +243,7 @@ export default function Posting() {
<
div
className
=
"flex flex-col w-full border-y-2 border-sky-500"
>
<
textarea
name
=
"title"
onChange
=
{
title
Change
}
onChange
=
{
string
Change
}
placeholder
=
"제목을 입력해 주세요!"
className
=
"flex focus:outline-none"
/>
...
...
@@ -266,7 +255,7 @@ export default function Posting() {
</
div
>
</
div
>
<
textarea
onChange
=
{
text
Change
}
onChange
=
{
string
Change
}
name
=
"text"
placeholder
=
"여행 후기를 알려주세요!"
className
=
"flex h-44 border-t-2 border-sky-200 focus:outline-none "
...
...
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