확인페이지 기능 완성

server/client/src/Pages/ApplyPage.js

@@ -46,7 +46,7 @@ function Apply() {
                             <div className="row justify-content-center align-items-center">
                                 <form onSubmit={handleSubmit} className="col-sm-3">
                                     <button type="submit" className="btn btn-dark" disabled={isSubmitting}>
-                                        Sign Up
+                                    신청
                                 </button>
                                 </form>
                             </div>

server/client/src/Pages/CheckPage.js

 import React, { useState, useEffect } from 'react';
 import Menu from '../Components/Menu';
-import List from '../Components/List';
 import axios from 'axios';
 
 function Check(props) {
@@ -19,6 +18,45 @@ function Check(props) {
                 alert(err.error)
             });
     }
+    function remove(index) {
+        axios.delete(`/reserves/${reserve[index]._id}`)
+            .then(res => {
+                if (res.status === 404) return alert(res.data.error)
+                alert("삭제되었습니다!")
+            })
+            .catch(err => {
+                alert(err.error)
+            });
+    };
+    function renderTableBody() {
+        return reserve.map((reserve, index) => {
+            return (
+                <tr key={index}>
+                    <td>{props.match.params.id}</td>
+                    <td>{reserve.name}</td>
+                    <td>{reserve.date}</td>
+                    <td>{reserve.room}</td>
+                    <td>
+                        <button onClick={() => remove(index)} className="btn btn-dark">
+                            취소
+                        </button>
+                    </td>
+                </tr>
+            )
+        })
+    }
+    
+    function renderTableHeader(props) {
+        return (
+            <tr>
+                <th>아이디</th>
+                <th>이름</th>
+                <th>날짜</th>
+                <th>강의실</th>
+                <th>예약취소</th>
+            </tr>
+        )
+    }
 
     const [reserve, setReserve] = useState([]);
     useEffect(() => {
@@ -27,10 +65,11 @@ function Check(props) {
     return (
         <div>
             <Menu />
-            <div className="container">check
-            {reserve.map((reserve, index) =>
-                <List id={props.match.params.id} index={index} date={reserve.date} name={reserve.name} room={reserve.room} time={reserve.time} num={reserve.num} _id={reserve._id}/>
-            )}
+            <div className="">check
+                    <tbody>
+                        {renderTableHeader()}
+                        {renderTableBody()}
+                    </tbody>
             </div>
         </div>
     )