post 파일 분리, 구조분해 Type

frontend/src/Pages/post.tsx

+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

 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>