[#123] feat: Add Settings Meetingroom

src/components/settings/createMeeting.js

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import axios from 'axios';
+import CategorySelect from '../categorySelect';
+
+export default function CreateMeeting({ setIsExist, setWantEdit }) {
+  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);
+    axios
+      .post(process.env.REACT_APP_SERVER_URL + '/meetings', data, {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+        },
+      })
+      .then((response) => {
+        setIsExist(true);
+        setWantEdit(false);
+      });
+  };
+  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>
+
+      <button onClick={onCreateMeeting}>자유열람실 생성</button>
+    </div>
+  );
+}

src/components/settings/editMeeting.js

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react';
+import CategorySelect from '../categorySelect';
+import axios from 'axios';
+
+export default function EditMeeting({ setWantEdit, setIsExist }) {
+  const [myMeeting, setMyMeeting] = useState();
+  const [meetingSeq, setMeetingSeq] = useState();
+  const [category, setCategory] = useState();
+  const [meetingTitle, setMeetingTitle] = useState();
+  const [meetingDesc, setMeetingDesc] = useState();
+
+  const getMyMeeting = async () => {
+    axios
+      .get(process.env.REACT_APP_SERVER_URL + '/users/meetings', {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+        },
+      })
+      .then((response) => {
+        setMyMeeting(() => response.data.meetingInfo);
+        setMeetingSeq(() => response.data.meetingInfo.meetingSeq);
+        setCategory(() => response.data.meetingInfo.categoryseq);
+        setMeetingTitle(() => response.data.meetingInfo.meetingTitle);
+        setMeetingDesc(() => response.data.meetingInfo.meetingDesc);
+      });
+  };
+  useEffect(() => {
+    getMyMeeting();
+  }, []);
+  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);
+    await axios
+      .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')}`,
+        },
+      })
+      .then((response) => {
+        setWantEdit(() => false);
+        setIsExist(() => false);
+      });
+  };
+  return (
+    <div>
+      <div>미팅룸 수정</div>
+      {myMeeting && (
+        <div>
+          <div>
+            자유열람실 카테고리: <CategorySelect categoryseq={setCategory} />
+          </div>
+          <div>
+            자유열람실 이름:{' '}
+            <input defaultValue={meetingTitle} onChange={(e) => setMeetingTitle(e.target.value)}></input>
+          </div>
+          <div>
+            미팅룸 설명: <textarea defaultValue={meetingDesc} onChange={(e) => setMeetingDesc(e.target.value)} />
+          </div>
+        </div>
+      )}
+      <button onClick={onSaveChange}>수정</button>
+      <button onClick={onDelete}>삭제</button>
+    </div>
+  );
+}

src/components/settings/readMeeting.js

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+export default function ReadMeeting({ setWantEdit }) {
+  const [myMeeting, setMyMeeting] = useState();
+  const toEdit = () => {
+    setWantEdit(() => true);
+  };
+  const getMyMeeting = async () => {
+    axios
+      .get(process.env.REACT_APP_SERVER_URL + '/users/meetings', {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+        },
+      })
+      .then((response) => {
+        console.log(response);
+        setMyMeeting(() => response.data.meetingInfo);
+      });
+  };
+  useEffect(() => {
+    getMyMeeting();
+  }, []);
+  return (
+    <div>
+      <div>미팅룸 조회</div>
+      <button onClick={toEdit}>수정</button>
+      {myMeeting && (
+        <div>
+          <div>자유열람실 이름: {myMeeting.meetingTitle}</div>
+          <div>자유열람실 카테고리: {myMeeting.category.categoryName}</div>
+          <div>현재 이용 중인 유저: {myMeeting.meetingHeadcount} 명</div>
+          <div>미팅룸 설명: {myMeeting.meetingDesc}</div>
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/SettingsMeeting.js

@@ -1,10 +1,49 @@
+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';
+
 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', {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+        },
+      })
+      .then((response) => {
+        if (response.data.statusCode === 200) {
+          setIsExist(() => true);
+        } else {
+          setIsExist(() => false);
+        }
+      });
+  };
+  useEffect(() => {
+    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>
+      {isExist ? (
+        <div>
+          {wantEdit ? (
+            <EditMeeting setIsExist={setIsExist} setWantEdit={setWantEdit} />
+          ) : (
+            <ReadMeeting setWantEdit={setWantEdit} />
+          )}
+        </div>
+      ) : (
+        <CreateMeeting setIsExist={setIsExist} setWantEdit={setWantEdit} />
+      )}
     </div>
   );
 }

src/pages/SettingsMeetingFavorite.js

@@ -197,8 +197,9 @@ export default function SettingsMeetingFavorite() {
         </Container>
         {selectedMeeting && (
           <ApplicationModal open={modalStatus} close={closeModal}>
+            {console.log(selectedMeeting)}
             <div style={{ textAlign: 'left', padding: '0 20%' }}>카테고리: {selectedMeeting.category.categoryName}</div>
-            <div style={{ textAlign: 'left', padding: '0 20%' }}>호스트 이름: {hostname}</div>
+            <div style={{ textAlign: 'left', padding: '0 20%' }}>호스트 이름: {selectedMeeting.hostNickname}</div>
             <div style={{ textAlign: 'left', padding: '0 20%' }}>
               현재 인원: {selectedMeeting.meetingHeadcount} / 12
             </div>