[#123] feat: Add settings meetingromm bookmark

super-waffle · Feb 17, 2022 · 74dd683 · 74dd683
1 parent a16a6f6
commit 74dd683
Show file tree

Hide file tree

Showing 4 changed files with 243 additions and 6 deletions.
diff --git a/src/components/navbar.js b/src/components/navbar.js
@@ -262,6 +262,15 @@ function Navbar() {
           <span className="navbar-dropdown-email">{email}</span>
         </div>
         <div className="navbar-dropdown-list">
+          <button
+            // className="dropdown-menu"
+            onClick={() => {
+              navigate('profile');
+              setIsActive(!isActive);
+            }}
+          >
+            내 프로필
+          </button>
           <button
             // className="dropdown-menu"
             onClick={() => {

diff --git a/src/index.js b/src/index.js
@@ -47,10 +47,10 @@ ReactDOM.render(
             <Route path="studyrecruit/:studyseq" element={isLogin() ? <StudyRecruitDetail /> : <Login />} />
             <Route path="meetingrooms" element={isLogin() ? <Meetingrooms /> : <Login />} />
             <Route path="schedules" element={isLogin() ? <Schedule /> : <Login />} />
-            <Route path="profile" element={isLogin() ? <Profile /> : <Login />} />
             <Route path="meeting/:meetingSeq" element={isLogin() ? <VideoRoomComponent /> : <Login />} />
             <Route path="studyroom" element={isLogin() ? <StudyRoomComponent /> : <Login />} />
             <Route path="settings" element={isLogin() ? <Settings /> : <Login />}>
+              <Route path="profile" element={<SettingsProfile />} />
               <Route path="admin" element={<SettingsAdmin />} />
               <Route path="alarm" element={<SettingsAlarm />} />
               <Route path="mystudy" element={<SettingsStudy />} />

diff --git a/src/pages/SettingsMeeting.js b/src/pages/SettingsMeeting.js
@@ -1,7 +1,10 @@
 export default function SettingsMeeting() {
   return (
-    <div>
-      <div>자유열람실</div>
+    <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>
   );
 }
diff --git a/src/pages/SettingsMeetingFavorite.js b/src/pages/SettingsMeetingFavorite.js
@@ -1,7 +1,232 @@
+import { Card, Col, Container, Row } from 'react-bootstrap';
+import { useState } from 'react';
+import axios from 'axios';
+import { useEffect } from 'react';
+import { Link } from 'react-router-dom';
+
+import ApplicationModal from '../components/applicationModal';
+import CategorySelect from '../components/categorySelect';
+
+const MeetingroomCard = ({ meeting, openModal, setMeetingSeq }) => {
+  const meetingroomImg = 'https://i6a301.p.ssafy.io:8080/images/' + meeting.meetingImg;
+  const defaultImg = '../../images/meetingroom.png';
+  const [bookmark, setBookmark] = useState(true);
+  const sendMeetingSeq = () => {
+    setMeetingSeq(meeting.meetingSeq);
+  };
+  const changeBookmark = () => {
+    // 현재 즐겨찾기 중 => 누르면 해제
+    if (bookmark) {
+      axios
+        .delete(process.env.REACT_APP_SERVER_URL + `/bookmarks/${meeting.meetingSeq}`, {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+          },
+        })
+        .then((res) => {
+          setBookmark(false);
+        });
+    } else {
+      axios
+        .post(
+          process.env.REACT_APP_SERVER_URL + `/bookmarks/${meeting.meetingSeq}`,
+          {},
+          {
+            headers: {
+              Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+            },
+          }
+        )
+        .then((res) => {
+          setBookmark(true);
+        });
+    }
+  };
+  return (
+    <Col
+      lg={4}
+      style={{ marginBottom: '0.5rem', cursor: 'pointer' }}
+      onClick={() => {
+        openModal();
+        sendMeetingSeq();
+        localStorage.setItem('meetingSeq', meeting.meetingSeq);
+      }}
+    >
+      <Card style={{ marginBottom: '0.5rem' }}>
+        <div>
+          <Card.Img
+            style={{ position: 'relative', height: '200px' }}
+            src={meeting.meetingImg ? meetingroomImg : defaultImg}
+          />
+
+          <div
+            style={{
+              padding: '0rem 0.5rem',
+              position: 'absolute',
+              bottom: '0.5rem',
+              left: '0.5rem',
+              backgroundColor: 'white',
+              opacity: 0.7,
+              borderRadius: '5px',
+            }}
+          >
+            <div>{meeting.meetingHeadcount} / 12</div>
+          </div>
+          <div>
+            {bookmark ? (
+              <img
+                style={{ position: 'absolute', top: '0.5rem', right: '0.5rem' }}
+                src="/icons/meetingroom/_bookmark_true.svg"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  changeBookmark();
+                }}
+                alt=""
+              />
+            ) : (
+              <img
+                style={{ position: 'absolute', top: '0.5rem', right: '0.5rem' }}
+                src="/icons/meetingroom/_bookmark_false.svg"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  changeBookmark();
+                }}
+                alt=""
+              />
+            )}
+          </div>
+        </div>
+      </Card>
+      <Card.Subtitle
+        style={{
+          fontFamily: 'pretendard',
+        }}
+      >
+        {meeting.meetingTitle}
+      </Card.Subtitle>
+    </Col>
+  );
+};
+
 export default function SettingsMeetingFavorite() {
+  const TOKEN = localStorage.getItem('accessToken');
+  const [category, setCategory] = useState(0);
+  const [categorized, setCategorized] = useState([]);
+  const [meetings, setMeetings] = useState('');
+  const [modalStatus, setModalStatus] = useState(false);
+  const [selectedMeeting, setSelectedMeeting] = useState('');
+  const [meetingSeq, setMeetingSeq] = useState('');
+  const [hostname, setHostname] = useState('');
+  const getMeeting = async () => {
+    axios
+      .get(process.env.REACT_APP_SERVER_URL + `/bookmarks`, {
+        headers: {
+          Authorization: `Bearer ${TOKEN}`,
+        },
+      })
+      .then((response) => {
+        setMeetings(() => response.data.bookmarkList);
+        setCategorized(() => response.data.bookmarkList);
+      });
+  };
+  const renewCategory = () => {
+    if (meetings) {
+      if (category === '카테고리 선택') {
+        setCategorized(() => meetings);
+      } else {
+        setCategorized((current) => meetings.filter((meeting) => meeting.categorySeq === parseInt(category)));
+      }
+    }
+  };
+  const getMeetingDetails = () => {
+    setSelectedMeeting(() => meetings.filter((meeting) => meeting.meetingSeq === parseInt(meetingSeq))[0]);
+  };
+  const getHostname = async () => {
+    if (selectedMeeting) {
+      var hostSeq = selectedMeeting.hostSeq;
+      await axios
+        .get(process.env.REACT_APP_SERVER_URL + `/users/${hostSeq}`, {
+          headers: {
+            Authorization: `Bearer ${TOKEN}`,
+          },
+        })
+        .then((response) => {
+          console.log(response.data.otherUserProfileInfo.userNickname);
+          setHostname(() => response.data.otherUserProfileInfo.userNickname);
+        });
+    }
+  };
+  useEffect(() => {
+    getMeeting();
+  }, []);
+  useEffect(() => {
+    renewCategory();
+  }, [category]);
+  useEffect(() => {
+    if (meetingSeq) {
+      getMeetingDetails();
+    }
+  }, [meetingSeq]);
+  useEffect(() => {
+    getHostname();
+  }, [selectedMeeting]);
+
+  const openModal = () => {
+    setModalStatus(true);
+  };
+  const closeModal = () => {
+    setModalStatus(false);
+  };
   return (
-    <div>
-      <div>meeting fav</div>
-    </div>
+    <>
+      <div className="settings-study">
+        <div className="settings-study-heading">
+          <div className="settings-study-heading__h1">자유열람실 즐겨찾기</div>
+          <div className="settings-study-heading__h2">즐겨찾기한 자유열람실 목록을 확인할 수 있습니다</div>
+        </div>
+
+        <CategorySelect categoryseq={setCategory} />
+
+        <Container style={{ marginTop: '1rem' }}>
+          <Row>
+            {categorized &&
+              categorized.map((meeting, index) => (
+                <MeetingroomCard meeting={meeting} openModal={openModal} setMeetingSeq={setMeetingSeq} key={index} />
+              ))}
+          </Row>
+        </Container>
+        {selectedMeeting && (
+          <ApplicationModal open={modalStatus} close={closeModal}>
+            <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.meetingHeadcount} / 12
+            </div>
+            <div style={{ textAlign: 'left', padding: '0 20%' }}>미팅룸 이름: {selectedMeeting.meetingTitle}</div>
+            <div style={{ textAlign: 'left', padding: '0 20%' }}>미팅룸 설명: {selectedMeeting.meetingDesc}</div>
+
+            <Link
+              to={{
+                pathname: `/meeting/${meetingSeq}`,
+              }}
+            >
+              <button
+                style={{
+                  border: 'none',
+                  margin: '2rem',
+                  backgroundColor: '#6667ab',
+                  color: '#eeeeee',
+                }}
+                onClick={() => {
+                  localStorage.setItem('meetingSeq', meetingSeq);
+                }}
+              >
+                입실하기
+              </button>
+            </Link>
+          </ApplicationModal>
+        )}
+      </div>
+    </>
   );
 }