Merge pull request #18 from SoluxProject/feature/#15

시험일정관리 기능 구현
SoluxProject · Aug 16, 2021 · d63a202 · d63a202
2 parents 1837ed8 + 3c185f9
commit d63a202
Show file tree

Hide file tree

Showing 3 changed files with 199 additions and 30 deletions.
diff --git a/src/ExamDday.css b/src/ExamDday.css
@@ -11,7 +11,7 @@
     display: flex;
     flex-direction: column;
   }
-  .ExamDdayInsertForm {
+  .ExamInsertForm {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -28,10 +28,10 @@
     padding: 12px;
     border-radius: 4px;
     border: 1px solid #dee2e6;
-    width: 70%;
+    margin-left: 15px;
     outline: none;
     font-size: 18px;
-    margin-left: 45px;
+    width: 60%;
   }
   .ExamInputDay{
     padding: 12px;
@@ -42,6 +42,7 @@
     font-size: 18px;
     margin-left: 10px;
   }
+
   .ExamDdayHeadBlock{
     padding-top: 48px;
     padding-left: 32px;
@@ -66,19 +67,25 @@
     flex-direction: row;
     margin-bottom: 20px;
     margin-top: 10px;
+    margin-left: 35px;
     align-items: center;
     padding-left: 15px;
     position: relative;
   }
-  .ExamContentday .ExamContentMonth{
-    margin-left : 30px;
-    margin-right: 30px;
+  .ExamContentDay {
+    font-weight: bold;
+    font-size: 18px;
+    width:18px;
+  }
+  .ExamContentMonth{
+
     font-weight: bold;
     font-size: 18px;
+    width:18px;
   }
   .ExamDdayContent{
     margin-left: 20px;
-    width: 235px;
+    width: 275px;
     padding-top: 1px;
   }
   .ExamEditButton {
@@ -113,3 +120,16 @@
   .ExamdeleteBtn :hover{
     opacity: 0.5;
   }
+  #EditExamDay{
+
+  }
+  .Examchild{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: absolute;
+    left: 10px;
+    background-color: white;
+    width: 480.333px;
+    height: 60px;
+  }
diff --git a/src/component/ExamDday.js b/src/component/ExamDday.js
@@ -5,11 +5,128 @@ import React, {useState, useEffect} from 'react';
 import Axios from "axios";
 import MyPageNavbar from './MyPageNavbar';
 import '../ExamDday.css';
+import axios from 'axios';
 
-export default function ExamDday(){
+export default function ExamDday({location}){
+
+    const id=location.state.id;
+
+    const [month, setMonth] = useState(0);
+    const [date, setDate] = useState(0);
     const [exam,setExam]=useState('');
+    const [year, setYear]=useState(2021);
+
+    const [newMonth, setNewMonth] = useState(0);
+    const [newDate, setNewDate] = useState(0);
+    const [newExam, setNewExam] = useState('');
+
     const [examList, setExamList]=useState([]);
     const [isEdit, setIsEdit] = useState(false);
+    const [examListExist, setExamListExist]=useState(false);
+    const [index, setIndex] = useState(-1);
+
+    useEffect(() => {
+        Axios.get("/manage/list")
+        .then(res => {
+            showExamList(res);
+        })
+    }, []);
+
+    const showExamList = (res)=>{
+        if(res.data.success===undefined) {
+            setExamListExist(true);
+            setExamList(res.data);
+        }
+        else {
+            setExamListExist(false);
+            alert(res.data.message);
+        }
+    }
+
+    const submitExam = ()=>{
+        axios.post("/manage/insert",{
+            manageid:id,
+            date: new Date(year, month-1, date+1),
+            subject: exam
+        })
+        .then(()=>{
+            setMonth(0);
+            setDate(0);
+            setExam('');
+         })
+    }
+    const calcMonth =(date) =>{
+        var date = new Date(Date.parse(date));
+        var month=date.getMonth();
+        return month+1;
+    }
+    const calcDay =(date) =>{
+        var date = new Date(Date.parse(date));
+        var day=date.getDate();
+        return day;
+    }
+    const EditExamDday =(val) =>{
+        if (isEdit ===false){
+            setIsEdit(true);
+            setIndex(val.index);
+        }
+        else{
+            setIsEdit(false);
+            setIndex(-1);
+        }
+    }
+    const changeExamDate=(idx)=>{
+        Axios.post('/manage/changeDate', {
+            index: idx,
+            date: new Date(2021,newMonth-1, newDate+1),
+        })
+        .then(res => {
+            if(!res.data.success && res.data.message==='dday 날짜 수정 오류'){
+                alert(res.data.message);
+            }
+            else {
+                setIsEdit(false);
+                setIndex(-1);
+                showExamList(res);
+            }
+        });
+
+        setNewMonth(0);
+        setNewDate(0);
+    }
+    const changeExamCont=(idx)=>{
+        Axios.post('/manage/changeSub', {
+            index: idx,
+            subject: newExam,
+        })
+        .then(res => {
+            if(!res.data.success && res.data.message==='dday 내용 수정 오류'){
+                alert(res.data.message);
+            }
+            else {
+                setIsEdit(false);
+                setIndex(-1);
+                showExamList(res);
+            }
+        });
+
+        setNewExam('');
+    }
+    const deleteExam = (idx) => {
+        if(window.confirm('삭제하시겠습니까?')) {
+            Axios.post('/manage/del', {
+            index: idx,
+            })
+            .then(res => {
+                if(!res.data.success && res.data.message==='dday delete 오류') {
+                    alert(res.data.message);
+                }
+                else{
+                    showExamList(res);
+                }
+            });
+        }
+    };
 
     return(
     <div className="wrapper">
@@ -20,32 +137,59 @@ export default function ExamDday(){
             <div className="ExamDdayHeadBlock">
                 <h1>시험 일정 관리</h1>
             </div>
-        <div className="ExamInsertFormPositioner">
-          <div className="ExamInsertForm">
-            <input className="ExamInputDay" id="InputMonth" placeholder="월" />
-            <input className="ExamInputDay" id="InputDate" placeholder="일" />
-            <input className="ExamDdayInput" placeholder="시험" />
+        <div className="InsertFormPositioner">
+          <div className="InsertForm ExamInsertForm">
+            <input className="ExamInputDay" id="InputMonth" placeholder="월" onChange = {(e) => {setMonth(Number(e.target.value))}} />
+            <input className="ExamInputDay" id="InputDate" placeholder="일" onChange = {(e) => {setDate(Number(e.target.value))}}/>
+            <input className="ExamDdayInput" placeholder="시험" onChange = {(e) => {setExam(e.target.value)}}/>
           </div>
         </div>
-        <button className="CircleButton" >
+        <button className="CircleButton" onClick={()=>submitExam} >
           <MdAdd />
         </button>
-        <div className="ExamScroll">
-            <div className="ExamDdaySet">
-            <p className="ExamContentMonth">9</p>
-                <p>/</p>
-                <p className="ExamContentDay">4</p>
-                <p className="ExamDdayContent">알고리즘 중간고사</p> 
-                <button className="ExamEditButton" >
-                    <RiEdit2Fill />
-                </button>
-                <button className="ExamdeleteBtn">
-                    <img src="img/delete.png" className="ExamdeleteImg"></img>
-                </button>
-
+        {examListExist ? 
+        (
+            <div className="ExamScroll">
+                {examList.map((val) => {
+                        return( 
+                                <div key={val.index} className="ExamDdaySet">
+                                <p className="ExamContentMonth">{calcMonth(val.date)}</p>
+                                <p>/</p>
+                                <p className="ExamContentDay">{calcDay(val.date)}</p>
+                                <p className="ExamDdayContent">{val.subject}</p> 
+                                <button className="ExamEditButton" onClick={()=>EditExamDday(val)}>
+                                    <RiEdit2Fill />
+                                </button>
+                                <button className="ExamdeleteBtn" onClick={()=>deleteExam(val.index)} >
+                                    <img src="img/delete.png" className="ExamdeleteImg"></img>
+                                </button>
+                                {isEdit && (index === val.index) && 
+                                    (
+                                        <div className="Examchild">
+                                            <input className="EditDday" id="EditExamMonth" placeholder="월" onChange = {(e) => {setNewMonth(Number(e.target.value))}} />
+                                            <input className="EditDday" id="EditExamDay" placeholder="일" onChange = {(e) => {setNewDate(Number(e.target.value))}} />
+                                            <button className="DdayEditButton" onClick={()=>changeExamDate(val.index)}>
+                                                <AiOutlineCheckCircle />
+                                            </button>
+                                            <input className="EditDdayContent" placeholder="시험" onChange = {(e) => {setNewExam(e.target.value)}} />
+                                            <button className="DdayEditButton"onClick={()=>changeExamCont(val.index)} >
+                                                <AiOutlineCheckCircle />
+                                            </button>
+                                        </div>
+                                    )
+                                }
+                                </div>
+                        )})
+                }        
             </div>
-
-        </div>
+        ) : 
+        (
+            <div className="ExamScroll">
+                    <div className="ExamDdaySet" />
+            </div>
+        )
+        }
+
     </div>
 
     </div>

diff --git a/src/component/MyPage.js b/src/component/MyPage.js
@@ -60,7 +60,12 @@ export default function MyPage(){
                         <button className="MyPageBtn MyPageEditBtn">회원정보 수정</button>
 
                 </Link>
-                    <Link to="/examDday">
+                    <Link to={{
+                        pathname:"/examDday",
+                        state: {
+                            id:user.id
+                        }
+                        }}>
                         <button className="MyPageBtn MyPageExamBtn">시험일정 관리</button>
                     </Link>
                     <button className="MyPageBtn MyPageTimeBtn">공부시간 관리</button>