From 070d2a2c4671a1597d1fb9cb66ba725a84b1c3a2 Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Fri, 18 Feb 2022 06:09:15 +0900 Subject: [PATCH] [#123] design: create meetings --- src/components/settings/createMeeting.js | 83 +++++++++----- src/pages/SettingsMeeting.js | 26 ++--- src/statics/css/settings/createMeeting.css | 101 ++++++++++++++++++ .../css/settings/createMeeting.css.map | 1 + src/statics/css/settings/settingMeetings.css | 6 ++ .../css/settings/settingMeetings.css.map | 1 + src/statics/scss/settings/createMeeting.scss | 100 +++++++++++++++++ .../scss/settings/settingMeetings.scss | 1 + 8 files changed, 282 insertions(+), 37 deletions(-) create mode 100644 src/statics/css/settings/createMeeting.css create mode 100644 src/statics/css/settings/createMeeting.css.map create mode 100644 src/statics/css/settings/settingMeetings.css create mode 100644 src/statics/css/settings/settingMeetings.css.map create mode 100644 src/statics/scss/settings/createMeeting.scss create mode 100644 src/statics/scss/settings/settingMeetings.scss diff --git a/src/components/settings/createMeeting.js b/src/components/settings/createMeeting.js index 32ba45a..6e81098 100644 --- a/src/components/settings/createMeeting.js +++ b/src/components/settings/createMeeting.js @@ -1,22 +1,23 @@ -import { useState } from 'react'; -import axios from 'axios'; -import CategorySelect from '../categorySelect'; +import { useState } from "react"; +import axios from "axios"; +import CategorySelect from "../categorySelect"; +import "../../statics/css/settings/createMeeting.css"; export default function CreateMeeting({ setIsExist, setWantEdit }) { - const [meetingTitle, setMeetingTitle] = useState(''); - const [category, setCategory] = useState(''); - const [meetingDesc, setMeetingDesc] = useState(''); + const [meetingTitle, setMeetingTitle] = useState(""); + const [category, setCategory] = useState(""); + const [meetingDesc, setMeetingDesc] = useState(""); const onCreateMeeting = async () => { var data = new FormData(); - data.append('CategorySeq', category); - data.append('meetingTitle', meetingTitle); - data.append('meetingDesc', meetingDesc); - data.append('meetingCamType', 0); - data.append('meetingMicType', 0); + data.append("CategorySeq", category); + data.append("meetingTitle", meetingTitle); + data.append("meetingDesc", meetingDesc); + data.append("meetingCamType", 0); + data.append("meetingMicType", 0); axios - .post(process.env.REACT_APP_SERVER_URL + '/meetings', data, { + .post(process.env.REACT_APP_SERVER_URL + "/meetings", data, { headers: { - Authorization: `Bearer ${localStorage.getItem('accessToken')}`, + Authorization: `Bearer ${localStorage.getItem("accessToken")}`, }, }) .then((response) => { @@ -25,20 +26,52 @@ export default function CreateMeeting({ setIsExist, setWantEdit }) { }); }; return ( -
-
자유열람실 생성
-
생성된 자유열람실이 없습니다. 자유열람실을 생성해주세요.
-
카테고리 선택: {setCategory && }
-
- 자유열람실 이름:{' '} - setMeetingTitle(e.target.value)} />{' '} -
-
- 자유열람실 설명:{' '} - setMeetingDesc(e.target.value)}> +
+
+
자유열람실 생성
+
+ 나만의 규칙으로 새로운 자유열람실을 만들어보세요 +
- + + + + + + + + + + + +
카테고리 + {setCategory && } +
자유열람실 이름 + setMeetingTitle(e.target.value)} + placeholder="자유열람실 이름을 입력하세요" + /> +
+ +
+
+ 자유열람실 설명 +
+ +
+
+ +
); } diff --git a/src/pages/SettingsMeeting.js b/src/pages/SettingsMeeting.js index b0e96e5..faa3a51 100644 --- a/src/pages/SettingsMeeting.js +++ b/src/pages/SettingsMeeting.js @@ -1,9 +1,9 @@ -import axios from 'axios'; -import { useState, useEffect } from 'react'; +import axios from "axios"; +import { useState, useEffect } from "react"; -import ReadMeeting from '../components/settings/readMeeting'; -import EditMeeting from '../components/settings/editMeeting'; -import CreateMeeting from '../components/settings/createMeeting'; +import ReadMeeting from "../components/settings/readMeeting"; +import EditMeeting from "../components/settings/editMeeting"; +import CreateMeeting from "../components/settings/createMeeting"; export default function SettingsMeeting() { const [isExist, setIsExist] = useState(false); @@ -11,9 +11,9 @@ export default function SettingsMeeting() { const checkExist = async () => { axios - .get(process.env.REACT_APP_SERVER_URL + '/users/meetings', { + .get(process.env.REACT_APP_SERVER_URL + "/users/meetings", { headers: { - Authorization: `Bearer ${localStorage.getItem('accessToken')}`, + Authorization: `Bearer ${localStorage.getItem("accessToken")}`, }, }) .then((response) => { @@ -28,11 +28,13 @@ export default function SettingsMeeting() { checkExist(); }, []); return ( -
-
-
내 자유열람실 관리
-
내 자유열람실을 관리할 수 있습니다
-
+
+ {/*
+
내 자유열람실 관리
+
+ 내 자유열람실을 관리할 수 있습니다 +
+
*/} {isExist ? (
{wantEdit ? ( diff --git a/src/statics/css/settings/createMeeting.css b/src/statics/css/settings/createMeeting.css new file mode 100644 index 0000000..f329645 --- /dev/null +++ b/src/statics/css/settings/createMeeting.css @@ -0,0 +1,101 @@ +@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css"); +.hidden { + display: none; +} + +.create-meeting { + padding-top: 80px; + width: 100%; +} +.create-meeting table { + margin-bottom: 18px; + padding-top: 18px; +} + +.settings-meeting-heading { + padding-bottom: 24px; +} +.settings-meeting-heading .settings-meeting-heading__h1 { + font-size: 20px; + color: var(--textColor); +} +.settings-meeting-heading .settings-meeting-heading__h1.second-box { + margin-top: 4.5rem; +} +.settings-meeting-heading .settings-meeting-heading__h2 { + font-size: 12px; + line-height: 14px; + color: var(--textColor-dark); + padding-bottom: 30px; + border-bottom: 1px solid var(--textColor-todo); +} + +.create-meeting__table-row { + margin: 2rem; +} + +.create-meeting-row.a1 { + font-size: 14px; + line-height: 17px; + color: var(--textColor); + width: 8rem; +} +.create-meeting-row.a1.meeting-desc { + width: 100%; + border-top: 1px solid var(--textColor-darkest); + padding-top: 30px; + padding-bottom: 12px; +} +.create-meeting-row.a2 { + width: 32rem; +} +.create-meeting-row input { + background: var(--bgColor); + border: 1px solid var(--borderColor); + border-radius: 7px; + box-sizing: border-box; + color: var(--textColor); + font-size: 12px; + height: 30px; + margin-bottom: 5px; + margin-top: 5px; + padding-left: 8px; + width: 95%; +} +.create-meeting-row ::placeholder { + font-size: 12px; + color: var(--textColor-darker); + padding-left: 10px; +} +.create-meeting-row :focus { + outline: 1px solid #6667ab; +} + +.create-meeting-desc textarea { + width: 100%; + height: 240px; + border-radius: 10px; + border: 1px solid var(--borderColor); + background-color: var(--bgColor); + padding: 12px; + color: var(--textColor); + font-size: 14px; +} +.create-meeting-desc ::placeholder { + font-size: 12px; + color: var(--textColor-darker); +} +.create-meeting-desc :focus { + outline: 1px solid #6667ab; +} + +.create-meeting-btn { + margin-top: 45px; + background-color: #6667ab; + color: #eeeeee; + border: none; + border-radius: 5px; + padding: 0.4rem 1rem; +} + +/*# sourceMappingURL=createMeeting.css.map */ diff --git a/src/statics/css/settings/createMeeting.css.map b/src/statics/css/settings/createMeeting.css.map new file mode 100644 index 0000000..b58edc9 --- /dev/null +++ b/src/statics/css/settings/createMeeting.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/settings/createMeeting.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;;AACA;EACE;EACA;;;AAIJ;EAEE;;AAEA;EACE;EACA;;AACA;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;;;AAGJ;EACE;;;AAIA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGJ;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;;AAGJ;EACE;EACA,kBDxFU;ECyFV;EACA;EACA;EACA","file":"createMeeting.css"} \ No newline at end of file diff --git a/src/statics/css/settings/settingMeetings.css b/src/statics/css/settings/settingMeetings.css new file mode 100644 index 0000000..0f63627 --- /dev/null +++ b/src/statics/css/settings/settingMeetings.css @@ -0,0 +1,6 @@ +@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css"); +.hidden { + display: none; +} + +/*# sourceMappingURL=settingMeetings.css.map */ diff --git a/src/statics/css/settings/settingMeetings.css.map b/src/statics/css/settings/settingMeetings.css.map new file mode 100644 index 0000000..f77db2d --- /dev/null +++ b/src/statics/css/settings/settingMeetings.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../../scss/main.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE","file":"settingMeetings.css"} \ No newline at end of file diff --git a/src/statics/scss/settings/createMeeting.scss b/src/statics/scss/settings/createMeeting.scss new file mode 100644 index 0000000..d55b8b4 --- /dev/null +++ b/src/statics/scss/settings/createMeeting.scss @@ -0,0 +1,100 @@ +@import "../main.scss"; + +.create-meeting { + padding-top: 80px; + width: 100%; + & table { + margin-bottom: 18px; + padding-top: 18px; + // border-top: 1px solid var(--textColor-darkest); + } +} +.settings-meeting-heading { + // margin-left: 10px; + padding-bottom: 24px; + // border-bottom: 1px solid var(--textColor-todo); + .settings-meeting-heading__h1 { + font-size: 20px; + color: var(--textColor); + &.second-box { + margin-top: 4.5rem; + } + } + .settings-meeting-heading__h2 { + font-size: 12px; + line-height: 14px; + color: var(--textColor-dark); + padding-bottom: 30px; + border-bottom: 1px solid var(--textColor-todo); + } +} +.create-meeting__table-row { + margin: 2rem; +} +.create-meeting-row { + // margin-bottom: 15px; + &.a1 { + font-size: 14px; + line-height: 17px; + color: var(--textColor); + width: 8rem; + // margin-bottom: 5px; + &.meeting-desc { + width: 100%; + border-top: 1px solid var(--textColor-darkest); + padding-top: 30px; + padding-bottom: 12px; + } + } + &.a2 { + width: 32rem; + } + & input { + background: var(--bgColor); + border: 1px solid var(--borderColor); + border-radius: 7px; + box-sizing: border-box; + color: var(--textColor); + font-size: 12px; + height: 30px; + margin-bottom: 5px; + margin-top: 5px; + padding-left: 8px; + width: 95%; + } + ::placeholder { + font-size: 12px; + color: var(--textColor-darker); + padding-left: 10px; + } + :focus { + outline: 1px solid $mainColor; + } +} +.create-meeting-desc { + & textarea { + width: 100%; + height: 240px; + border-radius: 10px; + border: 1px solid var(--borderColor); + background-color: var(--bgColor); + padding: 12px; + color: var(--textColor); + font-size: 14px; + } + ::placeholder { + font-size: 12px; + color: var(--textColor-darker); + } + :focus { + outline: 1px solid $mainColor; + } +} +.create-meeting-btn { + margin-top: 45px; + background-color: $mainColor; + color: #eeeeee; + border: none; + border-radius: 5px; + padding: 0.4rem 1rem; +} diff --git a/src/statics/scss/settings/settingMeetings.scss b/src/statics/scss/settings/settingMeetings.scss new file mode 100644 index 0000000..1057bd7 --- /dev/null +++ b/src/statics/scss/settings/settingMeetings.scss @@ -0,0 +1 @@ +@import "../main.scss";