[#123] design: create meetings

super-waffle · Feb 17, 2022 · 070d2a2 · 070d2a2
1 parent b576d93
commit 070d2a2
Show file tree

Hide file tree

Showing 8 changed files with 282 additions and 37 deletions.
diff --git 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 (
-    <div>
-      <div>자유열람실 생성</div>
-      <div>생성된 자유열람실이 없습니다. 자유열람실을 생성해주세요.</div>
-      <div>카테고리 선택: {setCategory && <CategorySelect categoryseq={setCategory} />}</div>
-      <div>
-        자유열람실 이름:{' '}
-        <input type="text" defaultValue={meetingTitle} onChange={(e) => setMeetingTitle(e.target.value)} />{' '}
-      </div>
-      <div>
-        자유열람실 설명:{' '}
-        <input type="textarea" defaultValue={meetingDesc} onChange={(e) => setMeetingDesc(e.target.value)}></input>
+    <div className="create-meeting">
+      <div className="settings-meeting-heading">
+        <div className="settings-meeting-heading__h1">자유열람실 생성</div>
+        <div className="settings-meeting-heading__h2">
+          나만의 규칙으로 새로운 자유열람실을 만들어보세요
+        </div>
       </div>
 
-      <button onClick={onCreateMeeting}>자유열람실 생성</button>
+      <table>
+        <tbody>
+          <tr className="create-meeting__table-row">
+            <td className="create-meeting-row a1">카테고리</td>
+            <td className="create-meeting-row a2">
+              {setCategory && <CategorySelect categoryseq={setCategory} />}
+            </td>
+          </tr>
+          <tr>
+            <td className="create-meeting-row a1">자유열람실 이름</td>
+            <td className="create-meeting-row a2">
+              <input
+                type="text"
+                defaultValue={meetingTitle}
+                onChange={(e) => setMeetingTitle(e.target.value)}
+                placeholder="자유열람실 이름을 입력하세요"
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div className="create-meeting-desc">
+        <div className="create-meeting-row a1 meeting-desc">
+          자유열람실 설명
+        </div>
+        <textarea
+          type="text"
+          defaultValue={meetingDesc}
+          onChange={(e) => setMeetingDesc(e.target.value)}
+          placeholder="내 자유열람실에 대해 자세하게 소개해주세요"
+        ></textarea>
+      </div>
+      <center>
+        <button className="create-meeting-btn" onClick={onCreateMeeting}>
+          자유열람실 생성
+        </button>
+      </center>
     </div>
   );
 }
diff --git a/src/pages/SettingsMeeting.js b/src/pages/SettingsMeeting.js
@@ -1,19 +1,19 @@
-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);
   const [wantEdit, setWantEdit] = useState(false);
 
   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 (
-    <div className="settings-study">
-      <div className="settings-study-heading">
-        <div className="settings-study-heading__h1">내 자유열람실 관리</div>
-        <div className="settings-study-heading__h2">내 자유열람실을 관리할 수 있습니다</div>
-      </div>
+    <div className="settings-meeting">
+      {/* <div className="settings-meeting-heading">
+        <div className="settings-meeting-heading__h1">내 자유열람실 관리</div>
+        <div className="settings-meeting-heading__h2">
+          내 자유열람실을 관리할 수 있습니다
+        </div>
+      </div> */}
       {isExist ? (
         <div>
           {wantEdit ? (

diff --git a/src/statics/css/settings/createMeeting.css b/src/statics/css/settings/createMeeting.css
diff --git a/src/statics/css/settings/createMeeting.css.map b/src/statics/css/settings/createMeeting.css.map
diff --git a/src/statics/css/settings/settingMeetings.css b/src/statics/css/settings/settingMeetings.css
diff --git a/src/statics/css/settings/settingMeetings.css.map b/src/statics/css/settings/settingMeetings.css.map
diff --git a/src/statics/scss/settings/createMeeting.scss 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
@@ -0,0 +1 @@
+@import "../main.scss";