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
c8a72edb
Commit
c8a72edb
authored
Jul 01, 2022
by
Lee Soobeom
Browse files
post 파일 분리, 구조분해 Type
parent
b0182a85
Changes
2
Hide whitespace changes
Inline
Side-by-side
frontend/src/Pages/post.tsx
0 → 100644
View file @
c8a72edb
import
React
,
{
useState
}
from
"
react
"
;
export
interface
PostType
{
id
:
string
;
title
:
string
;
date
:
string
;
click
:
number
;
}
type
Props
=
{
post
:
PostType
;
}
export
default
function
Post
({
post
}:
Props
)
{
const
[
count
,
setCount
]
=
useState
(
0
);
return
(
<
div
className
=
"flex flex-row h-16 divide-x-2 border-2 border-solid"
>
<
div
className
=
"basis-full"
>
<
button
onClick
=
{
()
=>
setCount
(
count
+
1
)
}
>
{
post
.
title
}
</
button
>
</
div
>
{
/*<Link to>title</Link> */
}
<
div
className
=
"basis-3/12"
>
{
post
.
date
}
</
div
>
<
div
className
=
"basis-2/12"
>
{
count
}
</
div
>
</
div
>
);
}
\ No newline at end of file
frontend/src/pages/board.tsx
View file @
c8a72edb
import
React
,
{
useState
}
from
"
react
"
;
import
Post
,
{
PostType
}
from
"
./post
"
;
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
'
,
click
:
0
},{
id
:
"
b
"
,
title
:
'
바다!바다!바다!
'
,
date
:
'
2022-08-01
'
,
click
:
0
},
{
id
:
"
c
"
,
title
:
'
Jeju-island
'
,
date
:
'
2022-9-10
'
,
click
:
0
},
{
id
:
"
d
"
,
title
:
'
마! 부싼 가봤나!
'
,
date
:
'
2022-9-22
'
,
click
:
0
},
{
id
:
"
e
"
,
title
:
'
Daegu
'
,
date
:
'
2022-10-1
'
,
click
:
0
},
{
id
:
"
f
"
,
title
:
'
강원도 감자는 맛있다.
'
,
date
:
'
2022-12-12
'
,
click
:
0
},{
id
:
"
g
"
,
title
:
'
여행가고싶다...
'
,
date
:
'
2022-12-25
'
,
click
:
0
}];
interface
Posts
{
posts
:
PostType
[];
}
export
default
function
BoardPage
()
{
const
ords
=
range
(
0
,
4
);
//[0,1,2,3,4];
const
[
count
,
setCount
]
=
useState
(
0
);
const
fakes
=
[[
'
Seoul
'
,
'
2022-06-30
'
,
'
0
'
],
[
'
Jeju
'
,
'
2022-9-10
'
,
'
1
'
],
[
'
Busan
'
,
'
2022-9-22
'
,
'
2
'
],
[
'
Daegu
'
,
'
2022-10-1
'
,
'
3
'
],
[
'
Incheon
'
,
'
2022-12-12
'
,
'
4
'
],];
const
[
posts
,
setPosts
]
=
useState
<
PostType
[]
>
(
fakes
);
return
(
<
div
className
=
"flex flex-col items-center"
>
<
div
className
=
"flex flex-col items-center mt-6"
>
...
...
@@ -21,22 +26,19 @@ export default function BoardPage() {
</
div
>
</
div
>
<
div
className
=
"flex flex-col w-10/12 mt-16 "
>
<
div
>
<
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
>
<
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-1/12"
>
No.
</
div
>
<
div
className
=
"basis-full"
>
Title
</
div
>
<
div
className
=
"basis-3/12"
>
Date
</
div
>
<
div
className
=
"basis-2/12"
>
Clicks
</
div
>
</
div
>
<
div
>
{
ords
.
map
((
ord
,
index
)
=>
(
<
div
key
=
{
index
}
className
=
"flex flex-row h-16 divide-x-2 border-2 border-solid "
>
<
div
className
=
"basis-1/12 bg-gray-100"
>
{
ord
+
1
}
</
div
>
<
div
className
=
"basis-full"
><
button
onClick
=
{
()
=>
setCount
(
count
+
1
)
}
>
{
fakes
[
ord
][
0
]
}
</
button
></
div
>
{
/*<Link to>title</Link> */
}
<
div
className
=
"basis-3/12"
>
{
fakes
[
ord
][
1
]
}
</
div
>
<
div
className
=
"basis-2/12"
>
{
count
}
</
div
>
</
div
>
{
posts
.
map
((
post
)
=>
(
<
Post
key
=
{
post
.
id
}
post
=
{
post
}
/>
))
}
</
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