Calendar ๐Ÿ“† & dayjs

GoGoDevยท2022๋…„ 3์›” 15์ผ
1

Wanted_PreOnBoarding_FE

๋ชฉ๋ก ๋ณด๊ธฐ
11/14

Calendar

๊ณผ์ œ๋ฅผ ํ•˜๋ฉด์„œ ๋‹ฌ๋ ฅ์„ ๊ตฌํ˜„ํ•˜๊ฒŒ ๋˜์—ˆ๋Š”๋ฐ ๋‹ฌ๋ ฅ์„ ์ง์ ‘ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ์•ˆ๊ณผ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์•ˆ์œผ๋กœ ๋‚˜๋‰˜์—ˆ๋‹ค.
๋‚˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹ฌ๋ ฅ์„ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๊ฒฐ์ •ํ–ˆ๋‹ค.
๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์† ์‰ฝ๊ฒŒ ๋‹ฌ๋ ฅ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ  ์ปค์Šคํ„ฐ๋งˆ์ด์ง•๋„ ์‰ฌ์šธ ๊ฒƒ์ด๋ผ ์ƒ๊ฐํ–ˆ๋‹ค.

ํ•˜์ง€๋งŒ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•์€ ์‰ฝ์ง€ ์•Š์•˜๋‹ค..

๐Ÿ“† Mui date picker

์ฒ˜์Œ์—๋Š” Mui์˜ date picker, date range picker ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค.

Mui Date picker๋Š” ์ข‹์€ date ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. date ์„ ํƒ, time ์„ ํƒ, date range ์„ ํƒ ๋“ฑ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ด ์ฃผ์—ˆ๋‹ค.
ํ•˜์ง€๋งŒ CSS๋ฅผ ์ปค์Šคํ…€ํ•˜๊ธฐ์—๋Š” ๋งŽ์€ ์–ด๋ ค์›€์„ ๊ฒช์—ˆ๋‹ค.

import { makeStyles } from "@material-ui/core/styles";

export const styles = makeStyles(() => ({
  root: {
    border: "1px solid grey"
  }
}));

makeStlyes()๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์ปค์Šคํ…€์„ ํ•˜๋ คํ–ˆ์ง€๋งŒ Date์˜ ๋‚ ์งœ Text ๋ถ€๋ถ„๋งŒ ์ปค์Šคํ…€์„ ํ•  ์ˆ˜ ์žˆ์—ˆ๊ณ  ๋ฐ‘์— ๋‚ ์งœ๋ฅผ ๋ฐ”๊พธ๊ธฐ์—๋Š” ๋งŽ์€ ์‹œ๊ฐ„์ด ์ง€๋‚˜ ๋” ์ด์ƒ ๊ฐ€๋ง์ด ์—†์–ด ํฌ๊ธฐํ–ˆ๋‹ค.
(date picker์˜ root element ์ ‘๊ทผ์€ ๊ฐ€๋Šฅํ–ˆ์ง€๋งŒ ๊ทธ ์ž์‹ element์— ์ ‘๊ทผ์„ ๊ณ„์†ํ•ด์„œ ์‹คํŒจํ–ˆ๋‹ค..)

Mui๋Š” lab ํƒœ๊ทธ์— ์žˆ๋Š”๊ฑฐ ๋ณด๋‹ˆ ์•„์ง ๊ณ„์†ํ•ด์„œ ๊ฐœ๋ฐœ์ค‘์ธ ๊ฒƒ ๊ฐ™๋‹ค.

๐Ÿ“† react date picker

https://reactdatepicker.com/
๋‹ค์Œ ๋Œ€์•ˆ์œผ๋กœ ์ฐพ์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” react date picker ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‹ค. Mui๋ณด๋‹ค ์˜ˆ์‹œ๊ฐ€ ๋” ๋งŽ๊ณ  ๊ณต์‹ ๋ฌธ์„œ์— ์ปค์Šคํ…€ํ•˜๋Š” ๋ฒ•๋„ ์ ํ˜€์žˆ์–ด Mui๋ณด๋‹ค ์ˆ˜์›”ํ•˜๋‹ค ์ƒ๊ฐํ–ˆ๋‹ค.

yarn add react-datepicker

() => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
  );
};

date picker, date range picker, time picker๋“ฑ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์ด ์กด์žฌํ–ˆ๋‹ค.
ํ•˜์ง€๋งŒ react-datepicker๋„ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•์€ ์‰ฝ์ง€ ์•Š์•˜๋‹ค.
ํ”„๋กœ์ ํŠธ์—์„œ next.js๋ฅผ ์‚ฌ์šฉํ•ด์„œ css๋ฅผ importํ•ด์˜ค๋Š” ๊ฒƒ๋ถ€ํ„ฐ ๋ง‰ํ˜”๋‹ค.
next.js์—์„œ ํด๋ž˜์Šค ๋ช…์— ๋”ฐ๋ผ css ์ ์šฉ์„ ์œ„ํ•ด global css๋กœ ์ง€์ •ํ•ด์ฃผ์–ด์•ผ ํ–ˆ๋‹ค. ์ด ๋ถ€๋ถ„์€ next.js๋ฅผ ์ž˜ ์•„์‹œ๋Š” ํŒ€์›๋ถ„์˜ ๋„์›€์œผ๋กœ ํ•ด๊ฒฐํ–ˆ๋‹คใ… ใ… 

๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•ํ•˜๋ฉด์„œ ๋‚ด๊ฐ€ ์›์น˜ ์•Š์€ ๋ถ€๋ถ„๊นŒ์ง€ css๊ฐ€ ์ ์šฉ๋˜๋Š” ์ƒํ™ฉ์ด ๋งŽ์•˜๋Š”๋ฐ :not ์—ฐ์‚ฐ์ž๋ฅผ ์ž˜ ํ™œ์šฉํ•ด์•ผ๊ฒ ๋‹ค๊ณ  ๋Š๊ผˆ๋‹ค.

๐Ÿ•’ dayjs

  const start = dayjs(startDate);
  const end = dayjs(endDate);
  const startFormat = start.format("YYYY-MM-DD");
  const endFormat = end.format("YYYY-MM-DD");
  const diff = Math.floor(end.diff(start, "day", true)); // ๋‚ ์งœ ์ฐจ์ด

dayjs๋Š” ๋‚ ์งœ์™€ ์‹œ๊ฐ„์„ ์ถœ๋ ฅํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค.
๋‹ฌ๋ ฅ์—์„œ ๋ฐ›์•„์˜จ ๋‚ ์งœ๋ฅผ dayjs()์•ˆ์— ๋„ฃ์–ด์ฃผ๋ฉด ์•Œ์•„์„œ

๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ˜ํ™˜ํ•ด์ค€๋‹ค.
์ด ๋ฐ์ดํ„ฐ๋ฅผ format์„ ํ†ตํ•ด ์ž์‹ ์ด ์›ํ•˜๋Š”๋Œ€๋กœ date format์„ ํ•  ์ˆ˜ ์žˆ๋‹ค.
์œ„์˜ ์˜ˆ์‹œ๋Š” "YYYY-MM-DD"๋กœ ํฌ๋งท์„ ํ•ด์ฃผ์—ˆ๋Š”๋ฐ
๊ฒฐ๊ณผ๋กœ 2022-03-15๋กœ ๋‚˜์˜จ๋‹ค.

๐Ÿ’ก ๋Š๋‚€์ 

  • ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ๋ฌด์กฐ๊ฑด ์ข‹์€ ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค
  • Document์˜ API๋ฅผ ์ž˜ ๋ณด๊ณ  ์ ์šฉํ•˜๋Š” ๋Šฅ๋ ฅ์„ ๊ธธ๋Ÿฌ์•ผ๊ฒ ๋‹ค.
  • ํ•œ๋ฒˆ ์ฏค์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์•„๋‹Œ ์ง์ ‘ ๊ตฌํ˜„ํ•ด ๋ณด์•„์•ผ๊ฒ ๋‹ค
    - ํŒ€์›๋ถ„์ด ์ง์ ‘ ๋‹ฌ๋ ฅ์„ ๊ตฌํ˜„ํ•˜๋ ค ํ•˜์…จ๋Š”๋ฐ ์ง์ ‘ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์ด ์ปค์Šคํ„ฐ๋งˆ์ด์ง•์ด ์ˆ˜์›”ํ•˜๊ฒŒ ๋ณด์˜€๋‹ค. (์‹œ๊ฐ„์ด ์—†์–ด์„œ ์™„์„ฑํ•˜์ง€ ๋ชปํ•˜์˜€์ง€๋งŒ..)
  • CSS ๋˜ํ•œ ํ•™์Šตํ•  ๋‚ด์šฉ์ด ๋งŽ๋‹ค.
  • ์„ธ์ƒ์—๋Š” ๋‹ค์–‘ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์กด์žฌํ•œ๋‹ค. ๋‹ค์–‘ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ฒฝํ—˜ํ•ด๋ณด์ž
profile
๐Ÿฃ์ฐจ๊ทผ์ฐจ๊ทผ ๋ฌด๋Ÿญ๋ฌด๋Ÿญ๐Ÿฃ

0๊ฐœ์˜ ๋Œ“๊ธ€