qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add datepicker prototype

Browse Source
This commit is contained in:
yoosangwook 2024-08-05 13:44:30 +09:00
parent 060c8ce5b4
commit 4ce2e1fd7a
7 changed files with 141 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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"

4
src/app/intro/page.jsx
View File

@ -6,8 +6,8 @@ import Intro from '@/components/Intro'
export default function IntroPage() {
return (
<>
<Hero title="Drawing on canvas 2D Intro" />
<div className="container flex flex-wrap items-center justify-between mx-auto p-4 m-4 border">
<Hero title="Common Components Intro Page" />
<div className="container mx-auto p-4 m-4 border">
<Intro />
</div>
</>

2
src/components/Hero.jsx
View File

@ -1,7 +1,7 @@
export default function Hero(props) {
return (
<div className="pt-48 flex justify-center">
<h1 className="text-6xl archivo-black-regular">{props.title}</h1>
<h1 className="text-4xl archivo-black-regular">{props.title}</h1>
</div>
)
}

34
src/components/Intro.jsx
View File

@ -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 (
<>
<h1>Intro</h1>
<p>Drawing on canvas 2D is a simple way to create graphics on the web.</p>
<div className="my-2">
<h4>Single Date Picker</h4>
<div>
<SingleDatePicker {...singleDatePickerProps} />
</div>
</div>
<div className="my-2">
<h4>Range Date Picker</h4>
<div>
<RangeDatePicker {...rangeDatePickerProps} />
</div>
</div>
</>
)
}

19
src/components/ui/datepicker/RangeDatePicker.jsx Normal file
View File

@ -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 (
<DatePicker
dateFormat={`yyyy-MM-dd`}
selectsRange={true}
startDate={startRangeDate}
endDate={endRangeDate}
onChange={(update) => {
setDateRange(update)
}}
isClearable={true}
/>
)
}

8
src/components/ui/datepicker/SingleDatePicker.jsx Normal file
View File

@ -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 <DatePicker showIcon dateFormat={`yyyy-MM-dd`} selected={startDate} onChange={(date) => setStartDate(date)} />
}

80
yarn.lock
View File

@ -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"