크기

styled 패키지에는 타이포그래피, 간격, 셀 크기, 트리거 크기를 비례적으로 조정하는 4가지 내장 크기 변형이 포함되어 있습니다.

사용 가능한 크기

크기	셀 크기	기본 폰트	트리거 최소 너비
`small`	28px	11px	160px
`medium`	36px	13px	200px
`large`	44px	14px	240px
`x-large`	52px	15px	280px

medium이 기본값입니다.

사용법

피커 컴포넌트에 size prop을 전달하세요:

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";
import type { DatePickerSize } from "react-date-range-picker-headless";

const sizes: DatePickerSize[] = ["small", "medium", "large", "x-large"];

function Sizes() {
  const [values, setValues] = useState<Record<DatePickerSize, Date | null>>({
    small: null,
    medium: null,
    large: null,
    "x-large": null,
  });

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
      {sizes.map((size) => (
        <div key={size} style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span style={{ width: 60, fontSize: 13, fontWeight: 600, opacity: 0.5, flexShrink: 0 }}>
            {size}
          </span>
          <DatePicker
            value={values[size]}
            onChange={(date) => setValues((prev) => ({ ...prev, [size]: date }))}
            size={size}
          />
        </div>
      ))}
    </div>
  );
}

small

medium

large

x-large

크기별 변경 사항

각 크기 변형은 클래스(예: rdrp-size-small)를 통해 CSS 변수 세트를 재정의합니다. 각 크기별로 조정되는 항목은 다음과 같습니다:

Small

.rdrp-size-small {
  --rdrp-cell-size: 28px;
  --rdrp-nav-btn-size: 24px;
  --rdrp-weekday-height: 24px;
  --rdrp-grid-min-height: 168px;
  --rdrp-panel-min-width: 196px;
  --rdrp-dual-gap: 16px;

  --rdrp-font-size-xs: 10px;
  --rdrp-font-size-sm: 11px;
  --rdrp-font-size-base: 11px;
  --rdrp-font-size-md: 12px;
  --rdrp-font-size-lg: 13px;

  --rdrp-trigger-min-width: 160px;
  --rdrp-trigger-padding-x: 10px;
  --rdrp-trigger-padding-y: 6px;
  --rdrp-popup-padding: 12px;

  --rdrp-btn-padding-x: 10px;
  --rdrp-btn-padding-y: 4px;

  --rdrp-spacing-lg: 8px;
  --rdrp-spacing-xl: 12px;

  --rdrp-time-item-height: 28px;
  --rdrp-time-panel-height: 148px;
  --rdrp-time-column-height: 132px;
  --rdrp-time-panel-min-width: 100px;
  --rdrp-time-picker-content-min-width: 210px;

  --rdrp-preset-min-width: 110px;
}

Large

.rdrp-size-large {
  --rdrp-cell-size: 44px;
  --rdrp-nav-btn-size: 32px;
  --rdrp-weekday-height: 32px;
  --rdrp-grid-min-height: 264px;
  --rdrp-panel-min-width: 308px;
  --rdrp-dual-gap: 28px;

  --rdrp-font-size-xs: 12px;
  --rdrp-font-size-sm: 13px;
  --rdrp-font-size-base: 14px;
  --rdrp-font-size-md: 15px;
  --rdrp-font-size-lg: 16px;

  --rdrp-trigger-min-width: 240px;
  --rdrp-trigger-padding-x: 16px;
  --rdrp-trigger-padding-y: 10px;
  --rdrp-popup-padding: 20px;

  --rdrp-btn-padding-x: 16px;
  --rdrp-btn-padding-y: 8px;

  --rdrp-spacing-lg: 16px;
  --rdrp-spacing-xl: 20px;

  --rdrp-time-item-height: 36px;
  --rdrp-time-panel-height: 196px;
  --rdrp-time-column-height: 180px;
  --rdrp-time-panel-min-width: 140px;
  --rdrp-time-picker-content-min-width: 290px;

  --rdrp-preset-min-width: 160px;
}

X-Large

.rdrp-size-x-large {
  --rdrp-cell-size: 52px;
  --rdrp-nav-btn-size: 36px;
  --rdrp-weekday-height: 36px;
  --rdrp-grid-min-height: 312px;
  --rdrp-panel-min-width: 364px;
  --rdrp-dual-gap: 32px;

  --rdrp-font-size-xs: 13px;
  --rdrp-font-size-sm: 14px;
  --rdrp-font-size-base: 15px;
  --rdrp-font-size-md: 16px;
  --rdrp-font-size-lg: 18px;

  --rdrp-trigger-min-width: 280px;
  --rdrp-trigger-padding-x: 20px;
  --rdrp-trigger-padding-y: 12px;
  --rdrp-popup-padding: 24px;

  --rdrp-btn-padding-x: 20px;
  --rdrp-btn-padding-y: 10px;

  --rdrp-spacing-lg: 20px;
  --rdrp-spacing-xl: 24px;

  --rdrp-time-item-height: 40px;
  --rdrp-time-panel-height: 216px;
  --rdrp-time-column-height: 200px;
  --rdrp-time-panel-min-width: 160px;

  --rdrp-preset-min-width: 180px;
}

커스텀 크기

크기 변수를 재정의하는 CSS 클래스를 정의하여 나만의 크기를 만들 수 있습니다:

.rdrp-size-custom {
  --rdrp-cell-size: 40px;
  --rdrp-nav-btn-size: 30px;
  --rdrp-font-size-base: 14px;
  --rdrp-font-size-md: 15px;
  --rdrp-trigger-min-width: 220px;
  --rdrp-popup-padding: 18px;
}

그런 다음 래퍼를 통해 적용합니다:

<div className="rdrp-size-custom">
  <DatePicker value={value} onChange={setValue} />
</div>

또는 Compound Component API를 사용하여 Root에 클래스를 추가합니다:

<DatePicker.Root value={value} onChange={setValue} className="rdrp-size-custom">
  {/* ... */}
</DatePicker.Root>

인라인 스타일을 통해 크기 변수를 재정의할 수도 있습니다:

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";

function CustomSizeViaCSS() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <div
      style={{
        ["--rdrp-cell-size" as string]: "44px",
        ["--rdrp-font-size-base" as string]: "15px",
        ["--rdrp-font-size-md" as string]: "16px",
        ["--rdrp-font-size-lg" as string]: "18px",
        ["--rdrp-nav-btn-size" as string]: "34px",
        ["--rdrp-trigger-padding-x" as string]: "18px",
        ["--rdrp-trigger-padding-y" as string]: "12px",
      }}
    >
      <DatePicker value={value} onChange={setValue} />
    </div>
  );
}

💡 Tip

medium 크기는 기본값이므로 재정의가 적용되지 않습니다. variables.css의 기본 변수는 medium 값입니다.