From bd58b0ee284e0557dfd00b53c357b7d0a312403e Mon Sep 17 00:00:00 2001 From: hckang17 Date: Fri, 17 Nov 2023 10:24:50 +0900 Subject: [PATCH 1/6] =?UTF-8?q?test:=EC=9E=84=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 26 +++++++++++++------------- package.json | 2 +- src/components/Slider.jsx | 2 +- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index ab506a0..5000d0b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,7 @@ "react-icons": "^4.11.0", "react-material-ui-carousel": "^3.4.2", "react-responsive": "^9.0.2", - "react-router-dom": "^6.18.0", + "react-router-dom": "^6.19.0", "react-scripts": "5.0.1", "react-slick": "^0.29.0", "slick-carousel": "^1.8.1", @@ -3794,9 +3794,9 @@ } }, "node_modules/@remix-run/router": { - "version": "1.11.0", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz", - "integrity": "sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==", + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.12.0.tgz", + "integrity": "sha512-2hXv036Bux90e1GXTWSMfNzfDDK8LA8JYEWfyHxzvwdp6GyoWEovKc9cotb3KCKmkdwsIBuFGX7ScTWyiHv7Eg==", "engines": { "node": ">=14.0.0" } @@ -15646,11 +15646,11 @@ } }, "node_modules/react-router": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.18.0.tgz", - "integrity": "sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==", + "version": "6.19.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.19.0.tgz", + "integrity": "sha512-0W63PKCZ7+OuQd7Tm+RbkI8kCLmn4GPjDbX61tWljPxWgqTKlEpeQUwPkT1DRjYhF8KSihK0hQpmhU4uxVMcdw==", "dependencies": { - "@remix-run/router": "1.11.0" + "@remix-run/router": "1.12.0" }, "engines": { "node": ">=14.0.0" @@ -15660,12 +15660,12 @@ } }, "node_modules/react-router-dom": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.18.0.tgz", - "integrity": "sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==", + "version": "6.19.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.19.0.tgz", + "integrity": "sha512-N6dWlcgL2w0U5HZUUqU2wlmOrSb3ighJmtQ438SWbhB1yuLTXQ8yyTBMK3BSvVjp7gBtKurT554nCtMOgxCZmQ==", "dependencies": { - "@remix-run/router": "1.11.0", - "react-router": "6.18.0" + "@remix-run/router": "1.12.0", + "react-router": "6.19.0" }, "engines": { "node": ">=14.0.0" diff --git a/package.json b/package.json index 9f1c38f..0fc767d 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "react-icons": "^4.11.0", "react-material-ui-carousel": "^3.4.2", "react-responsive": "^9.0.2", - "react-router-dom": "^6.18.0", + "react-router-dom": "^6.19.0", "react-scripts": "5.0.1", "react-slick": "^0.29.0", "slick-carousel": "^1.8.1", diff --git a/src/components/Slider.jsx b/src/components/Slider.jsx index 24470ea..4922383 100644 --- a/src/components/Slider.jsx +++ b/src/components/Slider.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'; From 7b8dadb627eea31977dcac0a2974d5735ba42437 Mon Sep 17 00:00:00 2001 From: hckang17 Date: Thu, 23 Nov 2023 09:14:23 +0900 Subject: [PATCH 2/6] feat:calendar prototype --- src/App.jsx | 7 +++- src/components/Calendar.jsx | 57 +++++++++++++++++++++++++++ src/components/Navbar.jsx | 20 +++++----- src/components/Signup.css | 42 ++++++++++++++++++++ src/pages/CalendarPage.jsx | 37 ++++++++++++++++++ src/pages/Calender.jsx | 34 ---------------- src/pages/Signup.jsx | 78 +++++++++++++++++++++++++++++++++++++ 7 files changed, 229 insertions(+), 46 deletions(-) create mode 100644 src/components/Calendar.jsx create mode 100644 src/components/Signup.css create mode 100644 src/pages/CalendarPage.jsx delete mode 100644 src/pages/Calender.jsx create mode 100644 src/pages/Signup.jsx diff --git a/src/App.jsx b/src/App.jsx index c05ebdc..e0b648b 100644 --- a/src/App.jsx +++ b/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'; + function App() { return ( @@ -21,11 +23,12 @@ function App() { } /> } /> - } /> + } /> } /> } /> }/> }/> + }/> diff --git a/src/components/Calendar.jsx b/src/components/Calendar.jsx new file mode 100644 index 0000000..01f22d8 --- /dev/null +++ b/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 ( +
+ +
+ ); +}; + +export default Calendar; + +/* + 꼭 참고해서 사용하자 !!!! FullCalendar의 events 프롭 안에 선언할 수 있는 prop 목록 + + title (필수): 이벤트의 제목을 나타내는 문자열. + date (필수): 이벤트가 발생하는 날짜를 나타내는 문자열 또는 Date 객체. + start (선택적): 이벤트의 시작 날짜 및 시간을 나타내는 Date 객체 또는 문자열. + end (선택적): 이벤트의 종료 날짜 및 시간을 나타내는 Date 객체 또는 문자열. + allDay (선택적): 이벤트가 하루 종일인지 여부를 나타내는 불리언 값. + extendedProps (선택적): 사용자 정의 속성을 나타내는 객체. 이 속성을 사용하여 추가적인 정보를 이벤트에 첨부할 수 있습니다. + color (선택적): 이벤트의 배경색을 지정하는 문자열. + editable (선택적): 이벤트가 사용자에 의해 편집 가능한지 여부를 나타내는 불리언 값. + display (선택적): 이벤트를 표시하는 방법을 나타내는 문자열. + classNames (선택적): 이벤트에 적용할 CSS 클래스를 나타내는 문자열 또는 문자열 배열. + +*/ diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 3a02122..da30a8c 100644 --- a/src/components/Navbar.jsx +++ b/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'; @@ -7,7 +7,6 @@ import UserMenu from './UserMenu'; function getLinkStyle({isActive}){ return { textDecoration: isActive ? 'underline' : undefined, - } } @@ -29,29 +28,30 @@ const Navbar = () => {