From c8a72edbda9c94e7582ec332d827137aa2e09da8 Mon Sep 17 00:00:00 2001
From: Lee Soobeom <lsb5116@korea.ac.kr>
Date: Fri, 1 Jul 2022 16:16:20 +0900
Subject: [PATCH] =?UTF-8?q?post=20=ED=8C=8C=EC=9D=BC=20=EB=B6=84=EB=A6=AC,?=
 =?UTF-8?q?=20=EA=B5=AC=EC=A1=B0=EB=B6=84=ED=95=B4=20Type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/Pages/post.tsx  | 26 ++++++++++++++++++++++++++
 frontend/src/pages/board.tsx | 30 ++++++++++++++++--------------
 2 files changed, 42 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/Pages/post.tsx

diff --git a/frontend/src/Pages/post.tsx b/frontend/src/Pages/post.tsx
new file mode 100644
index 0000000..3390174
--- /dev/null
+++ b/frontend/src/Pages/post.tsx
@@ -0,0 +1,26 @@
+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
diff --git a/frontend/src/pages/board.tsx b/frontend/src/pages/board.tsx
index 87863d4..90e12db 100644
--- a/frontend/src/pages/board.tsx
+++ b/frontend/src/pages/board.tsx
@@ -1,15 +1,20 @@
 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>
-- 
GitLab