[#24] fix: connect with server

super-waffle · Feb 3, 2022 · 4d78d69 · 4d78d69
2 parents 142b04a + 236532e
commit 4d78d69
Show file tree

Hide file tree

Showing 77 changed files with 4,758 additions and 261 deletions.
diff --git a/.gitignore b/.gitignore
@@ -276,4 +276,7 @@ yarn-error.log*
 .github
 
 #prettier
-.prettierignore
+.prettierignore
+
+#IntelliJ
+.idea
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,21 +1,35 @@
 {
+  "proxy": "http://localhost:8080",
   "name": "client",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.17",
+    "@fullcalendar/daygrid": "^5.10.1",
+    "@fullcalendar/interaction": "^5.10.1",
+    "@fullcalendar/react": "^5.10.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.25.0",
+    "bootstrap": "^5.1.3",
+    "classnames": "^2.3.1",
+    "node-sass": "^7.0.1",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.1.1",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4",
     "@material-ui/core": "4.9.10",
     "@material-ui/icons": "4.9.1",
     "jquery": "3.5.0",
-    "openvidu-browser": "2.20.0"
+    "openvidu-browser": "2.20.0",
+    "styled-components": "^5.3.3",
+    "yarn": "^1.22.17"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/icons/_default-user.svg b/public/icons/_default-user.svg
diff --git a/public/icons/_moon.svg b/public/icons/_moon.svg
diff --git a/public/icons/_paper-plane-darkmode.svg b/public/icons/_paper-plane-darkmode.svg
diff --git a/public/icons/_paper-plane.svg b/public/icons/_paper-plane.svg
diff --git a/public/icons/_sun.svg b/public/icons/_sun.svg
diff --git a/public/icons/_x-btn.svg b/public/icons/_x-btn.svg
diff --git a/public/icons/home/_book.svg b/public/icons/home/_book.svg
diff --git a/public/icons/home/_coin.svg b/public/icons/home/_coin.svg
diff --git a/public/icons/home/_light-bulb.svg b/public/icons/home/_light-bulb.svg
diff --git a/public/icons/home/_light-bulb2.svg b/public/icons/home/_light-bulb2.svg
diff --git a/public/icons/notice.svg b/public/icons/notice.svg
diff --git a/public/icons/success-filled.svg b/public/icons/success-filled.svg
diff --git a/public/index.html b/public/index.html
@@ -11,6 +11,12 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
     <title>공부하는 습관</title>
   </head>
   <body>

diff --git a/src/App.js b/src/App.js
@@ -1,24 +1,18 @@
-import { Outlet, NavLink } from "react-router-dom";
+import React from "react";
+// import { useNavigate } from "react-router-dom";
+// import { useState } from "react/cjs/react.development";
+import Navbar from "./components/navbar";
+import NavbarLanding from "./components/navbarLanding";
+import isLogin from "./utils/isLogin";
+import "./statics/css/main.css";
+import { Outlet } from "react-router-dom";
 
 function App() {
   return (
     <div>
-      <h1>공부하는 습관</h1>
-      <nav
-        style={{
-          borderBottom: "solid 1px",
-          paddingBottom: "1rem",
-        }}
-      >
-        <NavLink to="/home">홈</NavLink> |{" "}
-        <NavLink to="/meetingrooms">자유열람실</NavLink> |{" "}
-        <NavLink to="/studyrooms">스터디룸</NavLink> |{" "}
-        <NavLink to="/schedules">일정관리</NavLink> |{" "}
-        <NavLink to="/profile">프로필</NavLink> |{" "}
-        <NavLink to="/settings">마이페이지</NavLink> |{" "}
-        <NavLink to="/login">로그인</NavLink> |{" "}
-        <NavLink to="/signup">회원가입</NavLink> |{" "}
-      </nav>
+      {isLogin() && <Navbar sticky="top" />}
+      {!isLogin() && <NavbarLanding sticky="top" />}
+      <p>Landing Page</p>
       <Outlet />
     </div>
   );

diff --git a/src/components/Schedule/calendar.js b/src/components/Schedule/calendar.js
@@ -0,0 +1,143 @@
+import Dailydetails from './dailydetails';
+import classNames from 'classnames';
+import { Container, Col, Row } from 'react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faChevronLeft,
+  faChevronRight,
+} from '@fortawesome/free-solid-svg-icons';
+import getCalendarData from './calendarData';
+import { useState } from 'react';
+import Card from 'react-bootstrap/Card';
+
+const StudyCard = (event) => {
+  const studies = event.arr;
+  return (
+    <>
+      {studies.map((study, index) => (
+        <Card
+          key={index}
+          style={{
+            margin: '1rem 0rem',
+            border: '0px',
+            backgroundColor: 'transparent',
+            paddingLeft: '0.5rem',
+          }}
+        >
+          <Card.Title style={{ fontWeight: 'bold' }}>
+            {study.studyName}
+          </Card.Title>
+          <Card.Subtitle>
+            {study.startTime}~{study.endTime}
+          </Card.Subtitle>
+        </Card>
+      ))}
+    </>
+  );
+};
+
+export default function Calendar() {
+  const monthNames = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+  const days = [
+    'MON',
+    'TUE',
+    'WED',
+    'THU',
+    'FRI',
+    'SAT',
+    'SUN',
+  ];
+  const today = new Date();
+  const [weekly, setWeekly] = useState(getCalendarData);
+  return (
+    <>
+      <Container
+        fluid
+        style={{
+          padding: '2rem 4rem',
+        }}
+      >
+        <Row>
+          <p className={classNames('month-nav')}>
+            {monthNames[today.getMonth()]}{' '}
+            <FontAwesomeIcon
+              icon={faChevronLeft}
+              size="xs"
+              style={{
+                opacity: 0.5,
+              }}
+            />{' '}
+            <FontAwesomeIcon
+              icon={faChevronRight}
+              size="xs"
+              style={{
+                opacity: 0.5,
+              }}
+            />
+          </p>
+        </Row>
+        <Row
+          style={{
+            background: '#fcfcfc',
+            border: '1px solid #ededed',
+            boxSizing: 'border-box',
+            borderRadius: '5px',
+          }}
+        >
+          <Row className={classNames('day')}>
+            {days.map((day, index) => (
+              <Col
+                key={index}
+                style={{ margin: '0.3rem' }}
+                selected={false}
+              >
+                <p style={{ marginTop: '1rem' }}>{day}</p>
+                <div
+                  className={classNames('day-line')}
+                  style={{
+                    border: 'solid 2px #6C757D',
+                  }}
+                />
+                <div
+                  style={{
+                    backgroundColor: '#F2F1F6',
+                    borderRadius: '5px',
+                    paddingBottom: '0.5rem',
+                  }}
+                >
+                  <p
+                    style={{
+                      margin: '2rem 0rem',
+                      fontFamily: 'pretandard',
+                      fontSize: '26px',
+                      paddingLeft: '0.5rem',
+                    }}
+                  >
+                    {parseInt(
+                      weekly[day].date.split('-').slice(2)
+                    )}
+                  </p>
+                  <StudyCard arr={weekly[day].studies} />
+                </div>
+              </Col>
+            ))}
+          </Row>
+        </Row>
+        <Dailydetails />
+      </Container>
+    </>
+  );
+}