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
c8a72edb
Commit
c8a72edb
authored
Jul 01, 2022
by
Lee Soobeom
Browse files
post 파일 분리, 구조분해 Type
parent
b0182a85
Changes
2
Show 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"
>
...
...
@@ -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