Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
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
Hide 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,17 +52,17 @@ 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 "
>
<
div
className
=
"basis-full"
>
Title
</
div
>
<
div
className
=
"basis-3/12"
>
Date
</
div
>
<
div
className
=
"basis-2/12"
>
Clicks
</
div
>
<
div
className
=
"basis-full"
>
Title
</
div
>
<
div
className
=
"basis-3/12"
>
Date
</
div
>
<
div
className
=
"basis-2/12"
>
Clicks
</
div
>
</
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