Skip to content

Commit

Permalink
Feat - 날짜 설정 커스텀 화 (#60)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cheonseunghyeon
cheonseunghyeon committed Sep 22, 2023
1 parent a095dec commit aef7d87
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 26 deletions.
6 changes: 5 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,21 @@
"@types/jest": "^29.5.4",
"@types/node": "^16.18.38",
"@types/react": "^18.2.14",
"@types/react-date-range": "^1.4.4",
"@types/react-datepicker": "^4.15.0",
"@types/react-dom": "^18.2.6",
"@types/uuid": "^9.0.2",
"axios": "^1.5.0",
"babel-jest": "^29.7.0",
"date-fns": "^2.30.0",
"editor_likelion": "^1.1.1",
"http-proxy-middleware": "^2.0.6",
"jest": "^29.7.0",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-cookie": "^6.1.0",
"react-datepicker": "^4.16.0",
"react-date-range": "^1.4.0",
"react-datepicker": "^4.18.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.45.4",
"react-redux": "^8.1.1",
Expand Down
59 changes: 57 additions & 2 deletions src/component/project/publish/ProjectPublish.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable jsx-a11y/label-has-associated-control */
/** @jsxImportSource @emotion/react */
import React, { useState, useEffect, useRef } from 'react';
import React, { useState, useEffect, useRef, useCallback } from 'react';
import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css';
import { Calendar, DateRangePicker, DateRange } from 'react-date-range';

import { css } from '@emotion/react';
import { v4 } from 'uuid';
import { Editor } from 'editor_likelion';
Expand Down Expand Up @@ -140,6 +144,22 @@ const ProjectPublish = () => {
console.error('데이터 전송 중 오류 발생:', error);
}
};
const [selectedRange, setSelectedRange] = useState([
{
startDate: new Date(),
endDate: new Date(),
key: 'selection',
},
]);

const handleSelect = (ranges: any) => {
setSelectedRange([ranges.selection]);
};
const [isDatePickerVisible, setDatePickerVisible] = useState(false);

const handleDatePickerClick = () => {
setDatePickerVisible((prevVisible) => !prevVisible);
};

return (
<Inner>
Expand Down Expand Up @@ -257,7 +277,42 @@ const ProjectPublish = () => {
)}
/>
<Header2>프로젝트 기간</Header2>
<DateSelector onDateRangeChange={DateRangeChange} />
<div
css={css`
position: relative;
`}
>
<button type="button" onClick={handleDatePickerClick}>
시작 날짜를 선택하세요
</button>
<p>Selected Start Date: {selectedRange[0].startDate.toDateString()}</p>
<p>Selected End Date: {selectedRange[0].endDate.toDateString()}</p>
{isDatePickerVisible && (
<div
css={css`
position: absolute;
z-index: 1;
top: 100%;
background-color: white;
margin-top: 2rem;
border: 1px solid #ccc;
border-radius: 20px;
padding: 20px;
`}
>
<DateRangePicker
css={css`
color: black;
`}
ranges={selectedRange}
onChange={handleSelect}
/>
</div>
)}
</div>

{/* <DateSelector onDateRangeChange={DateRangeChange} /> */}

<Header2>사용된 기술 스택</Header2>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.8rem' }}>
{StackTags.length > 0 &&
Expand Down
66 changes: 43 additions & 23 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,11 +68,7 @@
json5 "^2.2.3"
semver "^6.3.1"

<<<<<<< Updated upstream
"@babel/core@^7.11.6", "@babel/core@^7.22.17":
=======
"@babel/core@^7.11.6":
>>>>>>> Stashed changes
version "7.22.17"
resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.22.17.tgz#2f9b0b395985967203514b24ee50f9fd0639c866"
integrity sha512-2EENLmhpwplDux5PSsZnSbnSkB3tZ6QTksgO25xwEL7pIDcNOMhF5v/s6RzwjMZzZzw9Ofc30gHv5ChCC8pifQ==
Expand Down Expand Up @@ -256,11 +252,7 @@
dependencies:
"@babel/types" "^7.22.15"

<<<<<<< Updated upstream
"@babel/helper-module-transforms@^7.22.15", "@babel/helper-module-transforms@^7.22.17":
=======
"@babel/helper-module-transforms@^7.22.17":
>>>>>>> Stashed changes
version "7.22.17"
resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.22.17.tgz#7edf129097a51ccc12443adbc6320e90eab76693"
integrity sha512-XouDDhQESrLHTpnBtCKExJdyY4gJCdrvH2Pyv8r8kovX2U8G0dRUOT45T9XlbLtuu9CLXP15eusnkprhoPV5iQ==
Expand Down Expand Up @@ -404,16 +396,13 @@
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.16.tgz#180aead7f247305cce6551bea2720934e2fa2c95"
integrity sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA==

<<<<<<< Updated upstream
"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.22.15":
version "7.22.15"
resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.15.tgz#02dc8a03f613ed5fdc29fb2f728397c78146c962"
integrity sha512-FB9iYlz7rURmRJyXRKEnalYPPdn87H5no108cyuQQyMwlpJ2SJtpIUBI27kdTin956pz+LPypkPVPUTlxOmrsg==
dependencies:
"@babel/helper-plugin-utils" "^7.22.5"

=======
>>>>>>> Stashed changes
"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.22.5":
version "7.22.5"
resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.5.tgz#87245a21cd69a73b0b81bcda98d443d6df08f05e"
Expand Down Expand Up @@ -2844,6 +2833,14 @@
resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==

"@types/react-date-range@^1.4.4":
version "1.4.4"
resolved "https://registry.yarnpkg.com/@types/react-date-range/-/react-date-range-1.4.4.tgz#235910d6c00d9be905fc5de037a8820616bb2a79"
integrity sha512-9Y9NyNgaCsEVN/+O4HKuxzPbVjRVBGdOKRxMDcsTRWVG62lpYgnxefNckTXDWup8FvczoqPW0+ESZR6R1yymDg==
dependencies:
"@types/react" "*"
date-fns "^2.16.1"

"@types/react-datepicker@^4.15.0":
version "4.15.0"
resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-4.15.0.tgz#24a9c03e79ab4b232b346edd006cfb6060b0fb43"
Expand Down Expand Up @@ -4464,7 +4461,7 @@ data-urls@^2.0.0:
whatwg-mimetype "^2.3.0"
whatwg-url "^8.0.0"

date-fns@^2.0.1, date-fns@^2.30.0:
date-fns@^2.0.1, date-fns@^2.16.1, date-fns@^2.30.0:
version "2.30.0"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
Expand Down Expand Up @@ -6819,11 +6816,7 @@ jest-leak-detector@^29.7.0:
jest-get-type "^29.6.3"
pretty-format "^29.7.0"

<<<<<<< Updated upstream
jest-matcher-utils@^27.5.1:
=======
jest-matcher-utils@^27.0.0, jest-matcher-utils@^27.5.1:
>>>>>>> Stashed changes
version "27.5.1"
resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz#9c0cdbda8245bc22d2331729d1091308b40cf8ab"
integrity sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==
Expand Down Expand Up @@ -7808,6 +7801,11 @@ mkdirp@~0.5.1:
dependencies:
minimist "^1.2.6"

moment@^2.29.4:
version "2.29.4"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==

[email protected]:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
Expand Down Expand Up @@ -8884,7 +8882,7 @@ prompts@^2.0.1, prompts@^2.4.2:
kleur "^3.0.3"
sisteransi "^1.0.5"

prop-types@^15.5.10, prop-types@^15.7.2, prop-types@^15.8.1:
prop-types@15, prop-types@^15.5.10, prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
Expand Down Expand Up @@ -9006,16 +9004,26 @@ react-cookie@^6.1.0:
hoist-non-react-statics "^3.3.2"
universal-cookie "^6.0.0"

react-datepicker@^4.16.0:
version "4.16.0"
resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.16.0.tgz#b9dd389bb5611a1acc514bba1dd944be21dd877f"
integrity sha512-hNQ0PAg/LQoVbDUO/RWAdm/RYmPhN3cz7LuQ3hqbs24OSp69QCiKOJRrQ4jk1gv1jNR5oYu8SjjgfDh8q6Q1yw==
react-date-range@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/react-date-range/-/react-date-range-1.4.0.tgz#d2073b85bdb4185e4dde288ce29198dd90074045"
integrity sha512-+9t0HyClbCqw1IhYbpWecjsiaftCeRN5cdhsi9v06YdimwyMR2yYHWcgVn3URwtN/txhqKpEZB6UX1fHpvK76w==
dependencies:
classnames "^2.2.6"
prop-types "^15.7.2"
react-list "^0.8.13"
shallow-equal "^1.2.1"

react-datepicker@^4.18.0:
version "4.18.0"
resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.18.0.tgz#d66301acc47833d31fa6f46f98781b084106da0e"
integrity sha512-0MYt3HmLbHVk1sw4v+RCbLAVg5TA3jWP7RyjZbo53PC+SEi+pjdgc92lB53ai/ENZaTOhbXmgni9GzvMrorMAw==
dependencies:
"@popperjs/core" "^2.11.8"
classnames "^2.2.6"
date-fns "^2.30.0"
prop-types "^15.7.2"
react-onclickoutside "^6.12.2"
react-onclickoutside "^6.13.0"
react-popper "^2.3.0"

react-dev-utils@^12.0.1:
Expand Down Expand Up @@ -9086,7 +9094,14 @@ react-is@^18.0.0:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==

react-onclickoutside@^6.12.2:
react-list@^0.8.13:
version "0.8.17"
resolved "https://registry.yarnpkg.com/react-list/-/react-list-0.8.17.tgz#49f55af2797cfdf3974ad2188a191e0ee919d254"
integrity sha512-pgmzGi0G5uGrdHzMhgO7KR1wx5ZXVvI3SsJUmkblSAKtewIhMwbQiMuQiTE83ozo04BQJbe0r3WIWzSO0dR1xg==
dependencies:
prop-types "15"

react-onclickoutside@^6.13.0:
version "6.13.0"
resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz#e165ea4e5157f3da94f4376a3ab3e22a565f4ffc"
integrity sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==
Expand Down Expand Up @@ -9668,6 +9683,11 @@ [email protected]:
resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==

shallow-equal@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==

shebang-command@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
Expand Down

0 comments on commit aef7d87

Please sign in to comment.