[ADD] TimeTable

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "antd": "^4.6.3",
     "axios": "^0.19.2",
     "core-decorators": "^0.20.0",
     "history": "4.10.1",

src/components/Admin/AdminMain/AdminMain.js

@@ -23,6 +23,7 @@ const AdminMain = ({
   timetableFile,
   timeTableListMap,
   timeTableStartTime,
+  setPopup,
 }) => {
   return (
     <>
@@ -61,6 +62,9 @@ const AdminMain = ({
             </div>
           </div>
 
+          <div className="AdminMain_wrap_add">
+            <span onClick={() => setPopup(true)}>+</span>
+          </div>
           <div className={'AdminMain_wrap_item'}>
             <div className="AdminMain_wrap_item_icon">
               <div>
@@ -87,12 +91,12 @@ const AdminMain = ({
             <div className={'AdminMain_wrap_footer_item'}>
               <img src={survey} alt="chatting-icon" />
               <span>설문결과</span>
-              <img className={'AdminMain_wrap_footer_item_download'} src={download} alt="download-button" />
+              {/* <img className={'AdminMain_wrap_footer_item_download'} src={download} alt="download-button" /> */}
             </div>
             <div className={'AdminMain_wrap_footer_item'}>
               <img src={luckydraw} alt="chatting-icon" />
               <span>럭키드로우</span>
-              <img className={'AdminMain_wrap_footer_item_download'} src={download} alt="download-button" />
+              {/* <img className={'AdminMain_wrap_footer_item_download'} src={download} alt="download-button" /> */}
             </div>
             <img className={'AdminMain_wrap_footer_start'} src={webinaStart} alt="webina_start" onClick={() => handleCreateWebinarInfo()} />
           </div>

src/components/Admin/AdminMain/AdminMain.scss

@@ -25,6 +25,14 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    &_add {
+      width: 1600px;
+      font-size: 2rem;
+      text-align: right;
+      span {
+        cursor: pointer;
+      }
+    }
     &_item {
       margin-bottom: 19px;
       font-family: 'Noto Sans Korean', sans-serif;

src/components/Admin/AdminTimetable/AdminTimetable.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import './AdminTimetable.scss'
+import { TimePicker } from 'antd'
+import moment from 'moment'
+import 'antd/dist/antd.css'
+
+const format = 'HH:mm'
+
+const AdminTimetable = ({ setPopup }) => {
+  return (
+    <div className="admin-timetable">
+      <div className="admin-timetable-area" onClick={() => setPopup(false)} />
+      <div className="admin-timetable-box">
+        <div className="admin-timetable-box-form">
+          <TimePicker defaultValue={moment(new Date(), format)} format={format} />
+        </div>
+        <div className="admin-timetable-box-form">
+          <TimePicker defaultValue={moment(new Date(), format)} format={format} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default AdminTimetable

src/components/Admin/AdminTimetable/AdminTimetable.scss

@@ -0,0 +1,27 @@
+.admin-timetable {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: rgba(177, 177, 177, 0.486);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &-area {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  &-box {
+    z-index: 10;
+    padding: 15px;
+    background-color: #fff;
+  }
+}

src/components/Admin/AdminTimetable/index.js

@@ -0,0 +1 @@
+export { default } from './AdminTimetable'

src/components/TimeTable/TimeTable.js

@@ -10,7 +10,9 @@ const TimeTable = ({ title, timeTableListMap, timeTableStartTime }) => {
           <div>{timeTableStartTime}</div>
         </div>
         <div className="contents_table">
-          <table style={{ borderSpacing: '0' }}>{timeTableListMap}</table>
+          <table style={{ borderSpacing: '0' }}>
+            <tbody>{timeTableListMap}</tbody>
+          </table>
         </div>
       </div>
     </div>

src/container/Admin/AdminMain/AdminMainContainer.js

@@ -6,6 +6,7 @@ import { stores } from 'stores'
 import Swal from 'sweetalert2'
 import moment from 'moment'
 import TimeTableTemp from 'components/TimeTable/TimeTableTemp/TimeTableTemp'
+import AdminTimetable from 'components/Admin/AdminTimetable'
 
 const AdminMainContainer = observer(() => {
   const history = useHistory()
@@ -17,6 +18,7 @@ const AdminMainContainer = observer(() => {
   const [linkInput, setLinkInput] = useState('')
   const [titleInput, setTitleInput] = useState('')
   const [detailInput, setDetailInput] = useState('')
+  const [popup, setPopup] = useState(false)
 
   const handleGetTimeTable = useCallback(() => {
     getTimeTable().catch((error) => {
@@ -80,18 +82,16 @@ const AdminMainContainer = observer(() => {
 
   const timeTableListMap =
     timeTableList &&
-    timeTableList.map((data) => {
+    timeTableList.map((data, i) => {
       const { start_time, end_time, speech, track_name } = data
       const start_time_min = moment.duration(moment(start_time).format('HH:mm'))
       const end_time_min = moment.duration(moment(end_time).format('HH:mm'))
       const time_result = (end_time_min - start_time_min) / 60000
 
       return (
-        <>
-          <tr>
-            <TimeTableTemp start_time={start_time} end_time={end_time} speech={speech} track_name={track_name} result={time_result} />
-          </tr>
-        </>
+        <tr key={i}>
+          <TimeTableTemp start_time={start_time} end_time={end_time} speech={speech} track_name={track_name} result={time_result} />
+        </tr>
       )
     })
 
@@ -121,7 +121,9 @@ const AdminMainContainer = observer(() => {
         timetableFile={timetable}
         timeTableListMap={timeTableListMap}
         timeTableStartTime={timeTableStartTime}
+        setPopup={setPopup}
       />
+      {popup && <AdminTimetable setPopup={setPopup} />}
     </>
   )
 })