Merge pull request #22 from TABA-4th/dev

merge dev branch

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fullcalendar/core": "^6.1.9",
+    "@fullcalendar/daygrid": "^6.1.9",
+    "@fullcalendar/react": "^6.1.9",
     "@hookform/resolvers": "^3.3.2",
     "@mui/icons-material": "^5.14.16",
     "@mui/material": "^5.14.18",
@@ -51,4 +54,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/App.jsx

@@ -6,9 +6,11 @@ import Home from './pages/Home';
 import About from './pages/About';
 import NotFound from './pages/NotFound';
 import WishlistPage from './pages/WishlistPage';
-import Calender from './pages/Calender';
 import Magazine from './pages/Magazine';
 import Survey from './pages/Survey';
+import SignupForm from './pages/Signup';
+import CalendarPage from './pages/CalendarPage';
+
 import LoginPage from './pages/login';
 import RegisterPage from './pages/register';
 import Register_success from './pages/Register_success';
@@ -35,7 +37,7 @@ function App() {
               <Routes>
                 <Route path="/" element={<Home />} />
                 <Route path="/about" element={isLoggedIn ? <About /> : <Navigate to="/" />} />
-                <Route path="/calender" element={isLoggedIn ? <Calender/> : <Navigate to="/" />} />
+                <Route path="/calender" element={isLoggedIn ? <CalendarPage/> : <Navigate to="/" />} />
                 <Route path="/magazine" element={isLoggedIn ? <Magazine/> : <Navigate to="/" />} />
                 <Route path="*" element={<NotFound/>} />
                 <Route path="/wishlist" element={isLoggedIn ? <WishlistPage/> : <Navigate to="/" />} />

src/components/Calendar.jsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import FullCalendar from '@fullcalendar/react';
+import dayGridPlugin from '@fullcalendar/daygrid';
+
+/*
+    Calendar 컴포넌트에서 매개변수로 받아야 하는 props :: diagnoseData
+*/
+
+const Calendar = (props) => {
+  const { diagnoseData } = props; // props로부터 diagnoseData를 추출
+
+  const [defaultView, setDefaultView] = useState('dayGridMonth');
+
+  const handleDateClick = (info) => {
+    if (info.event.extendedProps && info.event.extendedProps.diagnoseResult) {
+      alert(`검사 결과 : ${info.event.extendedProps.diagnoseResult}`);
+      // 여기서 새로운 팝업을 띄우거나, 새로운 페이지로 넘어가는 작업 등 추가 가능.
+    }
+  };
+
+  const events = diagnoseData.map(data => ({
+    title: '두피 자가진단 검사결과',
+    date: data.diagnoseDate,
+    extendedProps: {
+      diagnoseResult: data.diagnoseResult
+    },
+  }));
+
+  return (
+    <div>
+      <FullCalendar
+        defaultView={defaultView}
+        plugins={[dayGridPlugin]}
+        eventClick={handleDateClick}
+        events={events}
+      />
+    </div>
+  );
+};
+
+export default Calendar;
+
+/*
+    꼭 참고해서 사용하자 !!!! FullCalendar의 events 프롭 안에 선언할 수 있는 prop 목록
+
+    title (필수): 이벤트의 제목을 나타내는 문자열.
+    date (필수): 이벤트가 발생하는 날짜를 나타내는 문자열 또는 Date 객체.
+    start (선택적): 이벤트의 시작 날짜 및 시간을 나타내는 Date 객체 또는 문자열.
+    end (선택적): 이벤트의 종료 날짜 및 시간을 나타내는 Date 객체 또는 문자열.
+    allDay (선택적): 이벤트가 하루 종일인지 여부를 나타내는 불리언 값.
+    extendedProps (선택적): 사용자 정의 속성을 나타내는 객체. 이 속성을 사용하여 추가적인 정보를 이벤트에 첨부할 수 있습니다.
+    color (선택적): 이벤트의 배경색을 지정하는 문자열.
+    editable (선택적): 이벤트가 사용자에 의해 편집 가능한지 여부를 나타내는 불리언 값.
+    display (선택적): 이벤트를 표시하는 방법을 나타내는 문자열.
+    classNames (선택적): 이벤트에 적용할 CSS 클래스를 나타내는 문자열 또는 문자열 배열.
+    
+*/

src/components/Navbar.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Link,NavLink } from 'react-router-dom';
+import { Link , NavLink } from 'react-router-dom';
 import { useMediaQuery } from 'react-responsive';
 import "./Navbar.css";
 import UserMenu from './UserMenu';
@@ -50,7 +50,7 @@ const Navbar = ({ isLoggedIn, handleLogout }) => {
         />
       </NavLink>
       {isTabletOrMobile ? (
-        <div className="mobile-menu-align">
+        <>
           <div className="mobile-menu-icon" onClick={handleMenuToggle}>
             ☰
           </div>
@@ -60,7 +60,7 @@ const Navbar = ({ isLoggedIn, handleLogout }) => {
             <li><NavLink to="/magazine" onClick={handleMenuToggle} style={getResponsiveLinkStyle}>Magazine</NavLink></li>
             <li><NavLink to="/calender" onClick={handleMenuToggle} style={getResponsiveLinkStyle}>Calender</NavLink></li>
           </ul>
-        </div>
+        </>
       ) : (
         <ul>
           <li><NavLink to="/" style={getLinkStyle}>Home</NavLink></li>

src/components/Signup.css

@@ -0,0 +1,41 @@
+/* Signup.css */
+
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between; /* 양쪽 정렬 추가 */
+    width: 450px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 10px;
+    width: 100%; /* 부모인 form에 따라가도록 width 100% 설정 */
+  }
+
+  label > span {
+    width: 30%;
+    margin-right: 10px;
+    justify-content: space-between;
+  }
+
+  input {
+    width: 70%;
+    padding: 8px;
+    margin-bottom: 10px;
+  }
+
+  button {
+    width: 40%;
+    padding: 10px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+  }
+

src/components/SubSlider.jsx

@@ -1,6 +1,6 @@
 import React, {Component} from "react";
 import styled from 'styled-components';
-import Slider from "react-slick";
+import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';