Merge pull request #12 from SoluxProject/feature/#9

시험일정관리 ui 1차, 마이페이지 내비바
SoluxProject · Aug 15, 2021 · 26db7b9 · 26db7b9
2 parents 093e56d + 0091488
commit 26db7b9
Show file tree

Hide file tree

Showing 7 changed files with 207 additions and 5 deletions.
diff --git a/src/App.js b/src/App.js
@@ -10,6 +10,7 @@ import Dailynote from './component/Dailynote';
 import MyPage from './component/MyPage';
 import EditMyPage from './component/EditMyPage';
 import Timer from './component/Timer';
+import ExamDday from './component/ExamDday';
 
 function App() {
   return (
@@ -25,6 +26,7 @@ function App() {
           <Route exact path="/mypage" component={MyPage}/>
           <Route exact path="/editMyPage" component={EditMyPage}/>
           <Route exact path="/timer" component={Timer} />
+          <Route exact path="/examDday" component={ExamDday}/>
       </div>
     </BrowserRouter>
   );

diff --git a/src/EditMyPage.css b/src/EditMyPage.css
@@ -6,14 +6,20 @@
 .EditMyPage{
     display: flex;
     flex-direction: column;
-    align-items: center;
-    margin-top: 100px;
+}
+.EditMyPageMainContent{
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    justify-content: center;
+    margin-top: 50px;
 }
 
 .EditMyPageUser{
     display: flex;
     flex-direction: row;
-    margin-top: 45px;   
+    justify-content: center;
+    margin-top: 60px;   
     font-size: 18px;
 }
 .EditMyPageContent {

diff --git a/src/ExamDday.css b/src/ExamDday.css
@@ -0,0 +1,115 @@
+.ExamDday {
+    width: 512px;
+    height: 768px;
+    position: relative; /* 추후 박스 하단에 추가 버튼을 위치시키기 위한 설정 */
+    background: white;
+    border-radius: 16px;
+    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04);
+    margin: 0 auto; /* 페이지 중앙에 나타나도록 설정 */
+    margin-top: 32px;
+    margin-bottom: 32px;
+    display: flex;
+    flex-direction: column;
+  }
+  .ExamDdayInsertForm {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background: #f8f9fa;
+    padding-left: 32px;
+    padding-top: 32px;
+    padding-right: 32px;
+    padding-bottom: 72px;
+    border-bottom-left-radius: 16px;
+    border-bottom-right-radius: 16px;
+    border-top: 1px solid #e9ecef;
+  }
+  .ExamDdayInput  {
+    padding: 12px;
+    border-radius: 4px;
+    border: 1px solid #dee2e6;
+    width: 70%;
+    outline: none;
+    font-size: 18px;
+    margin-left: 45px;
+  }
+  .ExamInputDay{
+    padding: 12px;
+    border-radius: 4px;
+    border: 1px solid #dee2e6;
+    width: 15%;
+    outline: none;
+    font-size: 18px;
+    margin-left: 10px;
+  }
+  .ExamDdayHeadBlock{
+    padding-top: 48px;
+    padding-left: 32px;
+    padding-right: 32px;
+    padding-bottom: 24px;
+    border-bottom: 1px solid #e9ecef;
+  }
+  .ExamDdayHeadBlock h1 {
+    font: bold;
+    margin: 0;
+    font-size: 35px;
+    color: #343a40;
+  }
+  .ExamDdayScroll {
+    overflow: scroll;
+    margin-bottom: 160px; 
+    text-align: left;
+  }
+
+  .ExamDdaySet{
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 20px;
+    margin-top: 10px;
+    align-items: center;
+    padding-left: 15px;
+    position: relative;
+  }
+  .ExamContentday .ExamContentMonth{
+    margin-left : 30px;
+    margin-right: 30px;
+    font-weight: bold;
+    font-size: 18px;
+  }
+  .ExamDdayContent{
+    margin-left: 20px;
+    width: 235px;
+    padding-top: 1px;
+  }
+  .ExamEditButton {
+    color: #456268;
+    background-color: transparent;
+    width: 60px;
+    height: 60px;
+    font-size: 25px;
+    border: none;
+    outline: none;
+    position: relative;
+  }
+
+  .ExamEditButton :hover {
+    opacity: 0.5;
+  }
+
+
+  .ExamdeleteBtn{
+    width: 60px;
+    height: 60px;
+    background: transparent;
+    opacity: 1;
+    border: transparent; 
+
+  }
+  .ExamdeleteImg{
+    height: 20px;
+    width: 20px;
+  }
+
+  .ExamdeleteBtn :hover{
+    opacity: 0.5;
+  }
diff --git a/src/component/EditMyPage.js b/src/component/EditMyPage.js
@@ -3,6 +3,7 @@ import React , {useState, useEffect,useCallback} from 'react';
 import axios from "axios";
 import { RiEdit2Fill } from "react-icons/ri";
 import { FaCrown } from "react-icons/fa";
+import MyPageNavbar from "./MyPageNavbar";
 
 export default function EditMyPage({location}){
 
@@ -84,6 +85,9 @@ export default function EditMyPage({location}){
     }
     return(
         <div className="EditMyPage">
+
+            <MyPageNavbar></MyPageNavbar>
+            <div className="EditMyPageMainContent">
             <div className="EditMyPageTitle">
                     <h1>회원정보 수정</h1>
             </div>
@@ -118,6 +122,8 @@ export default function EditMyPage({location}){
 
                     </div>
             </div>
+            </div>
+
         </div>
     )
 }
diff --git a/src/component/ExamDday.js b/src/component/ExamDday.js
@@ -0,0 +1,54 @@
+import { MdAdd } from 'react-icons/md';
+import { RiEdit2Fill } from "react-icons/ri";
+import { AiOutlineCheckCircle } from "react-icons/ai";
+import React, {useState, useEffect} from 'react';
+import Axios from "axios";
+import MyPageNavbar from './MyPageNavbar';
+import '../ExamDday.css';
+
+export default function ExamDday(){
+    const [exam,setExam]=useState('');
+    const [examList, setExamList]=useState([]);
+    const [isEdit, setIsEdit] = useState(false);
+
+    return(
+    <div className="wrapper">
+        <div className="MyPageNavbar">
+            <MyPageNavbar></MyPageNavbar>
+        </div>
+        <div className="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>
+        </div>
+        <button className="CircleButton" >
+          <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>
+
+            </div>
+
+        </div>
+    </div>
+
+    </div>
+
+);
+}
diff --git a/src/component/MyPage.js b/src/component/MyPage.js
@@ -60,8 +60,9 @@ export default function MyPage(){
                         <button className="MyPageBtn MyPageEditBtn">회원정보 수정</button>
 
                 </Link>
-
-                    <button className="MyPageBtn MyPageExamBtn">시험일정 관리</button>
+                    <Link to="/examDday">
+                        <button className="MyPageBtn MyPageExamBtn">시험일정 관리</button>
+                    </Link>
                     <button className="MyPageBtn MyPageTimeBtn">공부시간 관리</button>
                 </div>
             </div>

diff --git a/src/component/MyPageNavbar.js b/src/component/MyPageNavbar.js
@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+import { BsChevronDoubleLeft } from 'react-icons/bs';
+import { Link } from 'react-router-dom';
+import '../Navbar.css';
+
+export default function MyPageNavbar(){
+
+    return(
+        <div className="nav-bar">
+                <div className="menu-toggle">
+                    <Link to="/mypage">
+                        <BsChevronDoubleLeft style={{color: 'white', width: '1.5rem', height: '1.5rem'}} />
+                    </Link>
+                </div>
+
+            </div>
+    )
+}