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
516dbb80
Commit
516dbb80
authored
Jul 04, 2022
by
Lee Soobeom
Browse files
Lifting state up
parent
e928e6d8
Changes
5
Show whitespace changes
Inline
Side-by-side
frontend/src/App.tsx
View file @
516dbb80
...
...
@@ -6,6 +6,7 @@ import Body from "./Pages/body";
import
Board
from
"
./Pages/board
"
;
import
Login
from
"
./Pages/login
"
;
import
Signup
from
"
./Pages/signup
"
;
import
Posting
from
"
./Pages/posting
"
;
export
const
App
=
()
=>
{
return
(
...
...
@@ -17,6 +18,7 @@ export const App = () => {
<
Route
path
=
"/"
element
=
{
<
Header
/>
}
>
<
Route
index
element
=
{
<
Body
/>
}
/>
<
Route
path
=
"board"
element
=
{
<
Board
/>
}
/>
<
Route
path
=
"posting"
element
=
{
<
Posting
/>
}
/>
</
Route
>
</
Routes
>
</
BrowserRouter
>
...
...
frontend/src/Pages/post.tsx
View file @
516dbb80
import
React
,
{
useState
,
MouseEvent
}
from
"
react
"
;
import
React
,
{
useState
,
MouseEvent
,
MouseEventHandler
}
from
"
react
"
;
import
{
PostType
}
from
"
./typesrc
"
;
type
Props
=
{
post
:
PostType
;
handleClick
:
MouseEventHandler
;
}
export
default
function
Post
({
post
}:
Props
)
{
const
[
count
,
setCount
]
=
useState
(
0
);
// const titleHandleClick = (event:MouseEvent<HTMLButtonElement>) => {
// setCount(count + 1)
// }
export
default
function
Post
({
handleClick
,
post
}:
Props
)
{
return
(
<
div
className
=
"flex flex-row h-16 divide-x-2 border-2 border-solid"
>
<
div
className
=
"basis-full"
>
<
button
id
=
{
post
.
id
}
onClick
=
{
()
=>
setCount
(
count
+
1
)
}
>
{
post
.
title
}
</
button
>
</
div
>
{
/*<Link to>title</Link> */
}
<
button
id
=
{
post
.
id
}
onClick
=
{
handleClick
}
>
{
post
.
title
}
</
button
>
</
div
>
<
div
className
=
"basis-3/12"
>
{
post
.
date
}
</
div
>
<
div
className
=
"basis-2/12"
>
{
count
}
</
div
>
<
div
className
=
"basis-2/12"
>
{
post
.
count
s
}
</
div
>
</
div
>
);
}
\ No newline at end of file
frontend/src/Pages/posting.tsx
0 → 100644
View file @
516dbb80
import
React
from
"
react
"
;
export
default
function
Posting
()
{
return
(
<
div
className
=
"flex flex-col border-3"
>
<
form
className
=
"w-full items-center"
>
<
div
className
=
"flex border-4"
>
<
textarea
placeholder
=
"title"
className
=
"w-3/4 h-8"
></
textarea
>
</
div
>
<
div
className
=
"flex border-2"
>
<
textarea
placeholder
=
"body"
className
=
"w-3/4 h-96"
></
textarea
>
</
div
>
</
form
>
</
div
>
);
}
\ No newline at end of file
frontend/src/Pages/typesrc.tsx
View file @
516dbb80
...
...
@@ -2,4 +2,5 @@ export interface PostType {
id
:
string
;
title
:
string
;
date
:
string
;
counts
:
number
;
}
\ No newline at end of file
frontend/src/pages/board.tsx
View file @
516dbb80
import
React
,
{
useState
,
}
from
"
react
"
;
import
React
,
{
useState
,
MouseEvent
}
from
"
react
"
;
import
{
Link
}
from
"
react-router-dom
"
;
import
{
PostType
}
from
"
./typesrc
"
;
import
Post
from
"
./post
"
;
function
range
(
start
:
number
,
end
:
number
)
{
function
range
(
start
:
number
,
end
:
number
)
{
return
(
new
Array
(
end
-
start
+
1
)).
fill
(
undefined
).
map
((
_
,
i
)
=>
i
+
start
);
}
const
fakes
=
[{
id
:
"
a
"
,
title
:
'
부산남자의 서울여행
'
,
date
:
'
2022-06-30
'
,},{
id
:
"
b
"
,
title
:
'
바다!바다!바다!
'
,
date
:
'
2022-08-01
'
,},
{
id
:
"
c
"
,
title
:
'
Jeju-island
'
,
date
:
'
2022-9-10
'
,},
{
id
:
"
d
"
,
title
:
'
마! 부싼 가봤나!
'
,
date
:
'
2022-9-22
'
,
},
{
id
:
"
e
"
,
title
:
'
Daegu
'
,
date
:
'
2022-10-1
'
,
},
{
id
:
"
f
"
,
title
:
'
강원도 감자는 맛있다.
'
,
date
:
'
2022-12-12
'
,},{
id
:
"
g
"
,
title
:
'
여행가고싶다...
'
,
date
:
'
2022-12-25
'
,}];
interface
Posts
{
posts
:
PostType
[];
}
export
const
fakes
=
[
{
id
:
"
a
"
,
title
:
'
여행가고싶다...
'
,
date
:
'
2022-06-30
'
,
counts
:
0
},
{
id
:
"
b
"
,
title
:
'
바다!바다!바다!
'
,
date
:
'
2022-08-01
'
,
counts
:
0
},
{
id
:
"
c
"
,
title
:
'
Jeju-island
'
,
date
:
'
2022-9-10
'
,
counts
:
0
},
{
id
:
"
d
"
,
title
:
'
마! 부싼 가봤나!
'
,
date
:
'
2022-9-22
'
,
counts
:
0
},
{
id
:
"
e
"
,
title
:
'
Daegu
'
,
date
:
'
2022-10-1
'
,
counts
:
0
},
{
id
:
"
f
"
,
title
:
'
강원도 감자는 맛있다.
'
,
date
:
'
2022-12-12
'
,
counts
:
0
},
{
id
:
"
g
"
,
title
:
'
부산남자의 서울여행
'
,
date
:
'
2022-12-25
'
,
counts
:
0
}
];
export
default
function
BoardPage
()
{
const
[
posts
,
setPosts
]
=
useState
<
PostType
[]
>
(
fakes
);
const
titleHandleClick
=
(
event
:
MouseEvent
<
HTMLButtonElement
>
)
=>
{
const
postId
=
event
.
currentTarget
.
id
const
newposts
=
[...
posts
]
newposts
.
forEach
(
post
=>
{
if
(
post
.
id
===
postId
)
{
post
.
counts
=
post
.
counts
+
1
return
}
})
setPosts
(
newposts
)
}
return
(
<
div
className
=
"flex flex-col items-center"
>
<
div
className
=
"flex flex-col items-center mt-6"
>
...
...
@@ -29,7 +52,7 @@ export default function BoardPage() {
<
div
className
=
"flex flex-col w-10/12 mt-16"
>
<
div
className
=
"flex justify-end"
>
<
div
className
=
"border-2 mb-2"
><
button
>
글쓰기+
</
button
></
div
>
{
/* Link */
}
<
div
className
=
"border-2 mb-2"
><
Link
to
=
"/posting"
><
button
>
글쓰기+
</
button
></
Link
></
div
>
{
/* Link */
}
</
div
>
<
div
className
=
"sm:overflow-y-scroll"
>
<
div
className
=
"flex flex-row divide-x-2 border-2 border-solid bg-gray-500 border-y-2 h-10 "
>
...
...
@@ -39,7 +62,7 @@ export default function BoardPage() {
</
div
>
<
div
>
{
posts
.
map
((
post
)
=>
(
<
Post
key
=
{
post
.
id
}
post
=
{
post
}
/>
<
Post
key
=
{
post
.
id
}
post
=
{
post
}
handleClick
=
{
titleHandleClick
}
/>
))
}
</
div
>
</
div
>
...
...
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