[#123] design: edit meetings

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

Hide file tree

Showing 8 changed files with 329 additions and 98 deletions.
diff --git a/src/components/settings/createMeeting.js b/src/components/settings/createMeeting.js
@@ -26,7 +26,7 @@ export default function CreateMeeting({ setIsExist, setWantEdit }) {
       });
   };
   return (
-    <div className="create-meeting">
+    <div className="setting-meeting-header">
       <div className="settings-meeting-heading">
         <div className="settings-meeting-heading__h1">자유열람실 생성</div>
         <div className="settings-meeting-heading__h2">

diff --git a/src/components/settings/editMeeting.js b/src/components/settings/editMeeting.js
@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react';
-import CategorySelect from '../categorySelect';
-import axios from 'axios';
+import { useEffect, useState } from "react";
+import CategorySelect from "../categorySelect";
+import axios from "axios";
 
 export default function EditMeeting({ setWantEdit, setIsExist }) {
   const [myMeeting, setMyMeeting] = useState();
@@ -11,9 +11,9 @@ export default function EditMeeting({ setWantEdit, setIsExist }) {
 
   const getMyMeeting = 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) => {
@@ -29,54 +29,118 @@ export default function EditMeeting({ setWantEdit, setIsExist }) {
   }, []);
   const onSaveChange = async () => {
     var data = new FormData();
-    data.append('meetingSeq', meetingSeq);
-    data.append('categorySeq', category);
-    data.append('meetingTitle', meetingTitle);
-    data.append('meetingDesc', meetingDesc);
-    data.append('meetingCamType', 0);
-    data.append('meetingMicType', 0);
+    data.append("meetingSeq", meetingSeq);
+    data.append("categorySeq", category);
+    data.append("meetingTitle", meetingTitle);
+    data.append("meetingDesc", meetingDesc);
+    data.append("meetingCamType", 0);
+    data.append("meetingMicType", 0);
     await axios
-      .patch(process.env.REACT_APP_SERVER_URL + `/users/meetings/${meetingSeq}`, data, {
-        headers: {
-          Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
-        },
-      })
+      .patch(
+        process.env.REACT_APP_SERVER_URL + `/users/meetings/${meetingSeq}`,
+        data,
+        {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+          },
+        }
+      )
       .then((response) => {
         setWantEdit(() => false);
         setIsExist(() => true);
       });
   };
   const onDelete = async () => {
     await axios
-      .delete(process.env.REACT_APP_SERVER_URL + `/users/meetings/${meetingSeq}`, {
-        headers: {
-          Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
-        },
-      })
+      .delete(
+        process.env.REACT_APP_SERVER_URL + `/users/meetings/${meetingSeq}`,
+        {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+          },
+        }
+      )
       .then((response) => {
         setWantEdit(() => false);
         setIsExist(() => false);
       });
   };
   return (
-    <div>
-      <div>미팅룸 수정</div>
+    <div className="setting-meeting-header">
+      <div className="settings-meeting-heading">
+        <div className="settings-meeting-heading__h1">내 자유열람실</div>
+        <div className="settings-meeting-heading__h2">
+          내가 만든 자유열람실을 확인하고 관리해보세요
+        </div>
+      </div>
+      <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={onSaveChange}>
+          정보 업데이트
+        </button>
+        {/* <button className="create-meeting-btn-delete" onClick={onDelete}>
+          삭제
+        </button> */}
+        {/* <button className="create-meeting-btn" onClick={onCreateMeeting}>
+          자유열람실 생성
+        </button> */}
+      </center>
+      {/* <div>미팅룸 수정</div>
       {myMeeting && (
         <div>
           <div>
             자유열람실 카테고리: <CategorySelect categoryseq={setCategory} />
           </div>
           <div>
-            자유열람실 이름:{' '}
-            <input defaultValue={meetingTitle} onChange={(e) => setMeetingTitle(e.target.value)}></input>
+            자유열람실 이름:{" "}
+            <input
+              defaultValue={meetingTitle}
+              onChange={(e) => setMeetingTitle(e.target.value)}
+            ></input>
           </div>
           <div>
-            미팅룸 설명: <textarea defaultValue={meetingDesc} onChange={(e) => setMeetingDesc(e.target.value)} />
+            미팅룸 설명:{" "}
+            <textarea
+              defaultValue={meetingDesc}
+              onChange={(e) => setMeetingDesc(e.target.value)}
+            />
           </div>
         </div>
       )}
       <button onClick={onSaveChange}>수정</button>
-      <button onClick={onDelete}>삭제</button>
+      <button onClick={onDelete}>삭제</button> */}
     </div>
   );
 }
diff --git a/src/components/settings/readMeeting.js b/src/components/settings/readMeeting.js
@@ -1,38 +1,85 @@
-import { useEffect, useState } from 'react';
-import axios from 'axios';
+import { useEffect, useState } from "react";
+import axios from "axios";
 
-export default function ReadMeeting({ setWantEdit }) {
+export default function ReadMeeting({ setWantEdit, setIsExist }) {
   const [myMeeting, setMyMeeting] = useState();
+  const [meetingSeq, setMeetingSeq] = useState();
   const toEdit = () => {
     setWantEdit(() => true);
   };
   const getMyMeeting = 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) => {
-        console.log(response);
         setMyMeeting(() => response.data.meetingInfo);
+        setMeetingSeq(() => response.data.meetingInfo.meetingSeq);
+      });
+  };
+  const onDelete = async () => {
+    await axios
+      .delete(
+        process.env.REACT_APP_SERVER_URL + `/users/meetings/${meetingSeq}`,
+        {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+          },
+        }
+      )
+      .then((response) => {
+        setWantEdit(() => false);
+        setIsExist(() => false);
       });
   };
   useEffect(() => {
     getMyMeeting();
   }, []);
   return (
-    <div>
-      <div>미팅룸 조회</div>
-      <button onClick={toEdit}>수정</button>
+    <div className="setting-meeting-header">
+      <div className="settings-meeting-heading">
+        <div className="settings-meeting-heading__h1">내 자유열람실</div>
+        <div className="settings-meeting-heading__h2">
+          내가 만든 자유열람실을 확인하고 관리해보세요
+        </div>
+      </div>
+
       {myMeeting && (
         <div>
-          <div>자유열람실 이름: {myMeeting.meetingTitle}</div>
-          <div>자유열람실 카테고리: {myMeeting.category.categoryName}</div>
-          <div>현재 이용 중인 유저: {myMeeting.meetingHeadcount} 명</div>
-          <div>미팅룸 설명: {myMeeting.meetingDesc}</div>
+          <div className="read-meeting__header">
+            <div className="read-meeting__category">
+              {myMeeting.category.categoryName}
+            </div>
+            <div className="read-meeting__title">{myMeeting.meetingTitle}</div>
+          </div>
+          <div className="read-meeting__headcount">
+            <svg
+              width="13"
+              height="13"
+              viewBox="0 0 15 15"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M7.5 7.5C8.44483 7.5 9.35097 7.12467 10.0191 6.45657C10.6872 5.78847 11.0625 4.88233 11.0625 3.9375C11.0625 2.99267 10.6872 2.08653 10.0191 1.41843C9.35097 0.750334 8.44483 0.375 7.5 0.375C6.55517 0.375 5.64903 0.750334 4.98093 1.41843C4.31283 2.08653 3.9375 2.99267 3.9375 3.9375C3.9375 4.88233 4.31283 5.78847 4.98093 6.45657C5.64903 7.12467 6.55517 7.5 7.5 7.5V7.5ZM9.875 3.9375C9.875 4.56739 9.62478 5.17148 9.17938 5.61688C8.73398 6.06228 8.12989 6.3125 7.5 6.3125C6.87011 6.3125 6.26602 6.06228 5.82062 5.61688C5.37522 5.17148 5.125 4.56739 5.125 3.9375C5.125 3.30761 5.37522 2.70352 5.82062 2.25812C6.26602 1.81272 6.87011 1.5625 7.5 1.5625C8.12989 1.5625 8.73398 1.81272 9.17938 2.25812C9.62478 2.70352 9.875 3.30761 9.875 3.9375V3.9375ZM14.625 13.4375C14.625 14.625 13.4375 14.625 13.4375 14.625H1.5625C1.5625 14.625 0.375 14.625 0.375 13.4375C0.375 12.25 1.5625 8.6875 7.5 8.6875C13.4375 8.6875 14.625 12.25 14.625 13.4375ZM13.4375 13.4328C13.4363 13.1406 13.2546 12.2619 12.4495 11.4567C11.6753 10.6825 10.2182 9.875 7.5 9.875C4.78063 9.875 3.32475 10.6825 2.5505 11.4567C1.74538 12.2619 1.56488 13.1406 1.5625 13.4328H13.4375Z"
+                fill="var(--textColor-todo)"
+              />
+            </svg>
+            {myMeeting.meetingHeadcount}
+          </div>
+          <div className="read-meeting__desc">{myMeeting.meetingDesc}</div>
         </div>
       )}
+      <div className="setting-meeting-btns">
+        <button className="create-meeting-btn" onClick={toEdit}>
+          수정
+        </button>
+        <button className="create-meeting-btn-delete" onClick={onDelete}>
+          삭제
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/src/pages/SettingsMeeting.js b/src/pages/SettingsMeeting.js
@@ -29,18 +29,12 @@ export default function SettingsMeeting() {
   }, []);
   return (
     <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 ? (
             <EditMeeting setIsExist={setIsExist} setWantEdit={setWantEdit} />
           ) : (
-            <ReadMeeting setWantEdit={setWantEdit} />
+            <ReadMeeting setIsExist={setIsExist} setWantEdit={setWantEdit} />
           )}
         </div>
       ) : (