Skip to content

Commit

Permalink
[#123] feat: Add bookmarked meetings at home
Browse files Browse the repository at this point in the history
  • Loading branch information
@FallingStar624
FallingStar624 committed Feb 17, 2022
1 parent c7e305d commit 8d0db4d
Show file tree
Hide file tree
Showing 4 changed files with 119 additions and 67 deletions.
74 changes: 74 additions & 0 deletions src/components/home/todays/homeMeetings.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import { Container, Row, Col, Card } from 'react-bootstrap';
import { useState } from 'react';
import axios from 'axios';
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const MeetingroomCard = ({ meeting }) => {
const meetingroomImg = 'https://i6a301.p.ssafy.io:8080/images/' + meeting.meetingImg;
const defaultImg = '../../../../images/meetingroom.png';
const [bookmark, setBookmark] = useState(meeting.inBookmark);
const navigate = useNavigate();
return (
<Col lg={4} md={4} sm={4}>
<Card
style={{ marginBottom: '0.5rem', cursor: 'pointer' }}
onClick={() => {
localStorage.setItem('meetingSeq', meeting.meetingSeq);
navigate(`/meeting/${meeting.meetingSeq}`);
}}
>
<div>
<Card.Img
style={{ position: 'relative', height: '150px' }}
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>
</Card>
<Card.Subtitle
style={{
fontFamily: 'pretendard',
}}
>
{meeting.meetingTitle}
</Card.Subtitle>
</Col>
);
};

export default function HomeMeetings() {
const [meetings, setMeetings] = useState();
const getBookmarks = async () => {
axios
.get(process.env.REACT_APP_SERVER_URL + `/bookmarks`, {
headers: {
Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
},
})
.then((response) => {
setMeetings(response.data.bookmarkList);
});
};
useEffect(() => {
getBookmarks();
}, []);
return (
<Container>
<Row>{meetings && meetings.map((meeting) => <MeetingroomCard meeting={meeting} />)}</Row>
</Container>
);
}
82 changes: 35 additions & 47 deletions src/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./store";
import App from "./App";
import Home from "./pages/Home";
import StudyRecruit from "./pages/StudyRecruit";
import Meetingrooms from "./pages/Meetingrooms";
import Profile from "./pages/Profile";
import Settings from "./pages/Settings";
import Schedule from "./pages/Schedule";
import Login from "./components/login";
import Signup from "./components/signup";
import isLogin from "./utils/isLogin";
import HomeAchievement from "./pages/Home_achievement";
import HomeStatistics from "./pages/Home_statistics";
import HomeTodays from "./pages/Home_todays";
import StudyRecruitCreate from "./pages/studyRecruitCreate";
import StudyRecruitDetail from "./pages/studyRecruitDetail";
import StudyRecruitModify from "./pages/studyRecruitModify";
import SettingsProfile from "./pages/SettingsProfile";
import SettingsAdmin from "./pages/SettingsAdmin";
import SettingsAlarm from "./pages/SettingsAlarm";
import SettingsStudy from "./pages/SettingsStudy_refac";
import SettingsMeeting from "./pages/SettingsMeeting";
import SettingsMeetingFavorite from "./pages/SettingsMeetingFavorite";
import VideoRoomComponent from "./components/meetingroom/VideoRoomComponent";
import StudyRoomComponent from "./components/studyroom/StudyRoomComponent";
import SettingsStudyApplied from "./pages/SettingsStudyApplied";
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
import Home from './pages/Home';
import StudyRecruit from './pages/StudyRecruit';
import Meetingrooms from './pages/Meetingrooms';
import Profile from './pages/Profile';
import Settings from './pages/Settings';
import Schedule from './pages/Schedule';
import Login from './components/login';
import Signup from './components/signup';
import isLogin from './utils/isLogin';
import HomeAchievement from './pages/Home_achievement';
import HomeStatistics from './pages/Home_statistics';
import HomeTodays from './pages/Home_todays';
import StudyRecruitCreate from './pages/studyRecruitCreate';
import StudyRecruitDetail from './pages/studyRecruitDetail';
import StudyRecruitModify from './pages/studyRecruitModify';
import SettingsProfile from './pages/SettingsProfile';
import SettingsAdmin from './pages/SettingsAdmin';
import SettingsAlarm from './pages/SettingsAlarm';
import SettingsStudy from './pages/SettingsStudy_refac';
import SettingsMeeting from './pages/SettingsMeeting';
import SettingsMeetingFavorite from './pages/SettingsMeetingFavorite';
import VideoRoomComponent from './components/meetingroom/VideoRoomComponent';
import StudyRoomComponent from './components/studyroom/StudyRoomComponent';
import SettingsStudyApplied from './pages/SettingsStudyApplied';

ReactDOM.render(
<React.StrictMode>
Expand All @@ -42,25 +42,13 @@ ReactDOM.render(
</Route>

<Route path="studyrecruit" element={isLogin() ? <StudyRecruit /> : <Login />} />
<Route
path="studyrecruit/create"
element={isLogin() ? <StudyRecruitCreate /> : <Login />}
/>
<Route
path="studyrecruit/modify"
element={isLogin() ? <StudyRecruitModify /> : <Login />}
/>
<Route
path="studyrecruit/:studyseq"
element={isLogin() ? <StudyRecruitDetail /> : <Login />}
/>
<Route path="studyrecruit/create" element={isLogin() ? <StudyRecruitCreate /> : <Login />} />
<Route path="studyrecruit/modify" element={isLogin() ? <StudyRecruitModify /> : <Login />} />
<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="videoRoomComponent"
element={isLogin() ? <VideoRoomComponent /> : <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 />} />
Expand All @@ -78,5 +66,5 @@ ReactDOM.render(
</BrowserRouter>
</Provider>
</React.StrictMode>,
document.getElementById("root")
document.getElementById('root')
);
25 changes: 9 additions & 16 deletions src/pages/Home_todays.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
import { useEffect, useState } from "react";
import HomeTodos from "../components/home/todays/homeTodos";
import "../statics/css/home/homeTodays.css";
import HomeStudies from "../components/home/todays/homeStudiesList";
import MyGoal from "../components/home/todays/homeGoal";
import { useEffect, useState } from 'react';

import HomeMeetings from '../components/home/todays/homeMeetings';
import HomeTodos from '../components/home/todays/homeTodos';
import '../statics/css/home/homeTodays.css';
import HomeStudies from '../components/home/todays/homeStudiesList';
import MyGoal from '../components/home/todays/homeGoal';

export default function HomeTodays() {
const [isAddTodo, setIsAddTodo] = useState(false);

// 할일 추가하기 버튼 누르면 자동으로 인풋 박스로 포커스 (스크롤 이동)
useEffect(() => {
if (isAddTodo) {
let needFocus = document.getElementById("home-todays-todos-box");
let needFocus = document.getElementById('home-todays-todos-box');
needFocus.scrollTop = needFocus.scrollHeight;
}
}, [isAddTodo]);
Expand Down Expand Up @@ -39,16 +41,7 @@ export default function HomeTodays() {

<div className="home-todays-meetingrooms">
<span>자유열람실</span>
<div className="home-todays-meetingrooms-row">
<div className="home-todays-meetingrooms-box"></div>
<div className="home-todays-meetingrooms-box"></div>
<div className="home-todays-meetingrooms-box"></div>
</div>
<div className="home-todays-meetingrooms-row">
<div className="home-todays-meetingrooms-box"></div>
<div className="home-todays-meetingrooms-box"></div>
<div className="home-todays-meetingrooms-box"></div>
</div>
<HomeMeetings />
</div>
</div>
);
Expand Down
5 changes: 1 addition & 4 deletions src/pages/Meetingrooms.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ const MeetingroomCard = ({ meeting, openModal, setMeetingSeq }) => {
}}
>
<Card style={{ marginBottom: '0.5rem' }}>
{console.log(meeting.inBookmark)}
<div>
<Card.Img
style={{ position: 'relative', height: '150px' }}
Expand Down Expand Up @@ -233,7 +232,6 @@ export default function Meetingrooms() {
{postData.data &&
postData.data.map((meeting) => (
<>
{console.log(meeting)}
<MeetingroomCard
setMeetingSeq={setMeetingSeq}
openModal={openModal}
Expand All @@ -260,8 +258,7 @@ export default function Meetingrooms() {

<Link
to={{
pathname: `/videoRoomComponent`,
state: { meetingSeq: meetingSeq },
pathname: `/meeting/${meetingSeq}`,
}}
>
<button
Expand Down

0 comments on commit 8d0db4d

Please sign in to comment.