From 009148816692322068e331117e39752260cf3c1c Mon Sep 17 00:00:00 2001 From: Sae-byeol Date: Mon, 16 Aug 2021 03:21:02 +0900 Subject: [PATCH] =?UTF-8?q?=EC=8B=9C=ED=97=98=EC=9D=BC=EC=A0=95=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=20ui=201=EC=B0=A8,=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=82=B4=EB=B9=84=EB=B0=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 2 + src/EditMyPage.css | 12 +++- src/ExamDday.css | 115 ++++++++++++++++++++++++++++++++++ src/component/EditMyPage.js | 6 ++ src/component/ExamDday.js | 54 ++++++++++++++++ src/component/MyPage.js | 5 +- src/component/MyPageNavbar.js | 18 ++++++ 7 files changed, 207 insertions(+), 5 deletions(-) create mode 100644 src/ExamDday.css create mode 100644 src/component/ExamDday.js create mode 100644 src/component/MyPageNavbar.js diff --git a/src/App.js b/src/App.js index b83a65a..95a6000 100644 --- 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() { + ); diff --git a/src/EditMyPage.css b/src/EditMyPage.css index 3beaf42..a20fd78 100644 --- 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 new file mode 100644 index 0000000..f43692b --- /dev/null +++ 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 index 790e4c8..7952951 100644 --- 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(
+ + +

회원정보 수정

@@ -118,6 +122,8 @@ export default function EditMyPage({location}){
+ + ) } \ No newline at end of file diff --git a/src/component/ExamDday.js b/src/component/ExamDday.js new file mode 100644 index 0000000..0d02535 --- /dev/null +++ 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( +
+
+ +
+
+
+

시험 일정 관리

+
+
+
+ + + +
+
+ +
+
+

9

+

/

+

4

+

알고리즘 중간고사

+ + + +
+ +
+
+ +
+ +); +} \ No newline at end of file diff --git a/src/component/MyPage.js b/src/component/MyPage.js index c9d78fa..13ad767 100644 --- a/src/component/MyPage.js +++ b/src/component/MyPage.js @@ -60,8 +60,9 @@ export default function MyPage(){ - - + + + diff --git a/src/component/MyPageNavbar.js b/src/component/MyPageNavbar.js new file mode 100644 index 0000000..a7e1674 --- /dev/null +++ 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( +
+
+ + + +
+ +
+ ) +} \ No newline at end of file