From 4ce2e1fd7aeb784d6152da63ceecd52d52321e5b Mon Sep 17 00:00:00 2001 From: yoosangwook Date: Mon, 5 Aug 2024 13:44:30 +0900 Subject: [PATCH] feat: Add datepicker prototype --- package.json | 1 + src/app/intro/page.jsx | 4 +- src/components/Hero.jsx | 2 +- src/components/Intro.jsx | 34 +++++++- .../ui/datepicker/RangeDatePicker.jsx | 19 +++++ .../ui/datepicker/SingleDatePicker.jsx | 8 ++ yarn.lock | 80 ++++++++++++++++++- 7 files changed, 141 insertions(+), 7 deletions(-) create mode 100644 src/components/ui/datepicker/RangeDatePicker.jsx create mode 100644 src/components/ui/datepicker/SingleDatePicker.jsx diff --git a/package.json b/package.json index 28845ef0..07d7828e 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "mongodb": "^6.8.0", "next": "14.2.3", "react": "^18", + "react-datepicker": "^7.3.0", "react-dom": "^18", "recoil": "^0.7.7", "uuid": "^9.0.1" diff --git a/src/app/intro/page.jsx b/src/app/intro/page.jsx index d26257fb..840b1f93 100644 --- a/src/app/intro/page.jsx +++ b/src/app/intro/page.jsx @@ -6,8 +6,8 @@ import Intro from '@/components/Intro' export default function IntroPage() { return ( <> - -
+ +
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index c7ac519f..a6e7761f 100644 --- a/src/components/Hero.jsx +++ b/src/components/Hero.jsx @@ -1,7 +1,7 @@ export default function Hero(props) { return (
-

{props.title}

+

{props.title}

) } diff --git a/src/components/Intro.jsx b/src/components/Intro.jsx index fdb994b0..b6626a37 100644 --- a/src/components/Intro.jsx +++ b/src/components/Intro.jsx @@ -1,8 +1,38 @@ +'use client' + +import { useState } from 'react' +import SingleDatePicker from './ui/datepicker/SingleDatePicker' +import RangeDatePicker from './ui/datepicker/RangeDatePicker' + export default function Intro() { + const [startDate, setStartDate] = useState(new Date()) + const singleDatePickerProps = { + startDate, + setStartDate, + } + + const [dateRange, setDateRange] = useState([null, null]) + const [startRangeDate, endRangeDate] = dateRange + const rangeDatePickerProps = { + startRangeDate, + endRangeDate, + setDateRange, + } + return ( <> -

Intro

-

Drawing on canvas 2D is a simple way to create graphics on the web.

+
+

Single Date Picker

+
+ +
+
+
+

Range Date Picker

+
+ +
+
) } diff --git a/src/components/ui/datepicker/RangeDatePicker.jsx b/src/components/ui/datepicker/RangeDatePicker.jsx new file mode 100644 index 00000000..ad802f49 --- /dev/null +++ b/src/components/ui/datepicker/RangeDatePicker.jsx @@ -0,0 +1,19 @@ +import DatePicker from 'react-datepicker' +import 'react-datepicker/dist/react-datepicker.css' + +export default function RangeDatePicker(props) { + const { startRangeDate, endRangeDate, setDateRange } = props + + return ( + { + setDateRange(update) + }} + isClearable={true} + /> + ) +} diff --git a/src/components/ui/datepicker/SingleDatePicker.jsx b/src/components/ui/datepicker/SingleDatePicker.jsx new file mode 100644 index 00000000..ca5feba0 --- /dev/null +++ b/src/components/ui/datepicker/SingleDatePicker.jsx @@ -0,0 +1,8 @@ +import DatePicker from 'react-datepicker' +import 'react-datepicker/dist/react-datepicker.css' + +export default function SingleDatePicker(props) { + const { startDate, setStartDate } = props + + return setStartDate(date)} /> +} diff --git a/yarn.lock b/yarn.lock index 7c678f91..e77fea4b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -21,6 +21,42 @@ dependencies: regenerator-runtime "^0.14.0" +"@floating-ui/core@^1.6.0": + version "1.6.5" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.5.tgz#102335cac0d22035b04d70ca5ff092d2d1a26f2b" + integrity sha512-8GrTWmoFhm5BsMZOTHeGD2/0FLKLQQHvO/ZmQga4tKempYRLz8aqJGqXVuQgisnMObq2YZ2SgkwctN1LOOxcqA== + dependencies: + "@floating-ui/utils" "^0.2.5" + +"@floating-ui/dom@^1.0.0": + version "1.6.8" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.8.tgz#45e20532b6d8a061b356a4fb336022cf2609754d" + integrity sha512-kx62rP19VZ767Q653wsP1XZCGIirkE09E0QUGNYTM/ttbbQHqcGPdSfWFxUyyNLc/W6aoJRBajOSXhP6GXjC0Q== + dependencies: + "@floating-ui/core" "^1.6.0" + "@floating-ui/utils" "^0.2.5" + +"@floating-ui/react-dom@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.1.tgz#cca58b6b04fc92b4c39288252e285e0422291fb0" + integrity sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg== + dependencies: + "@floating-ui/dom" "^1.0.0" + +"@floating-ui/react@^0.26.2": + version "0.26.20" + resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.20.tgz#49ae23347666626db8671c2aa2df469bbec7db71" + integrity sha512-RixKJJG92fcIsVoqrFr4Onpzh7hlOx4U7NV4aLhMLmtvjZ5oTB/WzXaANYUZATKqXvvW7t9sCxtzejip26N5Ag== + dependencies: + "@floating-ui/react-dom" "^2.1.1" + "@floating-ui/utils" "^0.2.5" + tabbable "^6.0.0" + +"@floating-ui/utils@^0.2.5": + version "0.2.5" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.5.tgz#105c37d9d9620ce69b7f692a20c821bf1ad2cbf9" + integrity sha512-sTcG+QZ6fdEUObICavU+aB3Mp8HY4n14wYHdxK4fXjPmv3PXZZeY5RaguJmGyeH/CJQhX3fqKUtS4qc1LoHwhQ== + "@formatjs/ecma402-abstract@2.0.0": version "2.0.0" resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-2.0.0.tgz#39197ab90b1c78b7342b129a56a7acdb8f512e17" @@ -2288,7 +2324,7 @@ clsx@^1.2.1: resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== -clsx@^2.0.0: +clsx@^2.0.0, clsx@^2.1.0: version "2.1.1" resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999" integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA== @@ -2403,6 +2439,11 @@ data-urls@^3.0.1: whatwg-mimetype "^3.0.0" whatwg-url "^11.0.0" +date-fns@^3.3.1: + version "3.6.0" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf" + integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww== + debug@4: version "4.3.5" resolved "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz" @@ -2902,7 +2943,7 @@ lodash.omit@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60" integrity sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg== -loose-envify@^1.0.0, loose-envify@^1.1.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -3252,6 +3293,15 @@ prisma@^5.17.0: dependencies: "@prisma/engines" "5.17.0" +prop-types@^15.7.2: + version "15.8.1" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" + integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.13.1" + proxy-from-env@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2" @@ -3277,6 +3327,17 @@ queue-microtask@^1.2.2: resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz" integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A== +react-datepicker@^7.3.0: + version "7.3.0" + resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-7.3.0.tgz#666664a609d4b57b095083fe29d080943fa7b3ed" + integrity sha512-EqRKLAtLZUTztiq6a+tjSjQX9ES0Xd229JPckAtyZZ4GoY3rtvNWAzkYZnQUf6zTWT50Ki0+t+W9VRQIkSJLfg== + dependencies: + "@floating-ui/react" "^0.26.2" + clsx "^2.1.0" + date-fns "^3.3.1" + prop-types "^15.7.2" + react-onclickoutside "^6.13.0" + react-dom@^18: version "18.3.1" resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz" @@ -3285,6 +3346,16 @@ react-dom@^18: loose-envify "^1.1.0" scheduler "^0.23.2" +react-is@^16.13.1: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" + integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== + +react-onclickoutside@^6.13.0: + version "6.13.1" + resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz#1f5e0241c08784b6e65745d91aca0d700c548a89" + integrity sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w== + react-remove-scroll-bar@^2.3.6: version "2.3.6" resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz#3e585e9d163be84a010180b18721e851ac81a29c" @@ -3607,6 +3678,11 @@ symbol-tree@^3.2.4: resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz" integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw== +tabbable@^6.0.0: + version "6.2.0" + resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97" + integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew== + tailwind-merge@^1.14.0: version "1.14.0" resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-1.14.0.tgz#e677f55d864edc6794562c63f5001f45093cdb8b"