타이포그래피

styled 패키지는 기본적으로 시스템 폰트 스택을 사용합니다:

--rdrp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

각 플랫폼의 OS 네이티브 폰트로 렌더링됩니다 (macOS의 San Francisco, Windows의 Segoe UI, Android의 Roboto). 시스템 폰트는 OS가 CJK, 아랍어 및 기타 스크립트 폴백을 자동으로 처리하므로 다국어 지원에 유리합니다.

이를 재정의하려면 상위 요소에 --rdrp-font-family를 설정하세요. 이 스타일은 피커 내부로 전파됩니다.

CSS 변수 인라인 스타일

래퍼 요소의 style 속성을 통해 폰트를 재정의할 수 있습니다:

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

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

  return (
    <div
      style={{
        ["--rdrp-font-family" as string]: '"Georgia", "Times New Roman", serif',
      }}
    >
      <DatePicker value={value} onChange={setValue} />
    </div>
  );
}

폰트 계열

래퍼에 --rdrp-font-family를 설정하여 폰트 계열을 전환할 수 있습니다:

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

const fonts = {
  System: {},
  Serif: { "--rdrp-font-family": '"Georgia", "Times New Roman", serif' },
  Mono: { "--rdrp-font-family": '"Menlo", "Courier New", monospace' },
};

type FontName = keyof typeof fonts;

function CompoundCustomFont() {
  const [value, setValue] = useState<Date | null>(null);
  const [font, setFont] = useState<FontName>("System");

  return (
    <div>
      <div style={{ display: "flex", gap: 6, marginBottom: 12 }}>
        {(Object.keys(fonts) as FontName[]).map((name) => (
          <button
            key={name}
            onClick={() => setFont(name)}
            style={{
              padding: "6px 14px",
              border: `1px solid ${font === name ? "#3b82f6" : "#d1d5db"}`,
              borderRadius: 6,
              background: font === name ? "#eff6ff" : "#fff",
              cursor: "pointer",
              fontSize: 13,
            }}
          >
            {name}
          </button>
        ))}
      </div>
      <div style={fonts[font] as React.CSSProperties}>
        <DatePicker value={value} onChange={setValue} inline />
      </div>
    </div>
  );
}

March 2026

웹 폰트 사용하기 (Noto Sans)

플랫폼 간 일관된 렌더링이나 i18n 프로젝트를 위해서는 Noto Sans와 같은 웹 폰트를 로드하고 변수를 재정의하세요:

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

// 1. HTML 또는 CSS에서 Noto Sans를 로드합니다:
//    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

// 2. 폰트 변수를 재정의합니다:
<div style={{ "--rdrp-font-family": '"Noto Sans", sans-serif' } as React.CSSProperties}>
  <DatePicker value={value} onChange={setValue} inline />
</div>;

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

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

  useEffect(() => {
    // Load Noto Sans from Google Fonts (for demo purposes only)
    if (!document.getElementById("noto-sans-font")) {
      const link = document.createElement("link");
      link.id = "noto-sans-font";
      link.rel = "stylesheet";
      link.href =
        "https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap";
      document.head.appendChild(link);
    }
  }, []);

  return (
    <div style={{ "--rdrp-font-family": '"Noto Sans", sans-serif' } as React.CSSProperties}>
      <DatePicker value={value} onChange={setValue} inline />
    </div>
  );
}

March 2026

웹 폰트 갤러리

다양한 웹 폰트를 비교하여 타이포그래피가 피커의 외관을 얼마나 극적으로 변화시키는지 확인해 보세요. 아래의 모든 폰트는 다국어 렌더링(라틴어, CJK, 한국어)을 지원합니다.

⚠️ 데모 전용

아래 폰트들은 데모 목적으로 Google Fonts CDN에서 로드됩니다. 이 라이브러리는 웹 폰트를 번들로 제공하지 않으므로 직접 프로젝트에 로드해야 합니다.

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

const WEB_FONTS = [
  { name: "Noto Sans", family: '"Noto Sans", sans-serif' },
  { name: "Noto Serif", family: '"Noto Serif", serif' },
  { name: "IBM Plex Sans", family: '"IBM Plex Sans", sans-serif' },
  { name: "Roboto Slab", family: '"Roboto Slab", serif' },
];

const FONT_URL =
  "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&family=Noto+Serif:wght@400;500;600;700&family=Roboto+Slab:wght@400;500;600;700&display=swap";

function CompoundWebFonts() {
  const [value, setValue] = useState<Date | null>(null);
  const [active, setActive] = useState(0);

  useEffect(() => {
    if (!document.getElementById("web-fonts-link")) {
      const link = document.createElement("link");
      link.id = "web-fonts-link";
      link.rel = "stylesheet";
      link.href = FONT_URL;
      document.head.appendChild(link);
    }
  }, []);

  return (
    <div>
      <div style={{ display: "flex", gap: 6, marginBottom: 12, flexWrap: "wrap" }}>
        {WEB_FONTS.map((f, i) => (
          <button
            key={f.name}
            onClick={() => setActive(i)}
            style={{
              padding: "6px 14px",
              border: `1px solid ${active === i ? "#3b82f6" : "#d1d5db"}`,
              borderRadius: 6,
              background: active === i ? "#eff6ff" : "#fff",
              color: active === i ? "#3b82f6" : "#374151",
              cursor: "pointer",
              fontSize: 13,
              fontFamily: f.family,
            }}
          >
            {f.name}
          </button>
        ))}
      </div>
      <div style={{ "--rdrp-font-family": WEB_FONTS[active].family } as React.CSSProperties}>
        <DatePicker value={value} onChange={setValue} inline />
      </div>
    </div>
  );
}

March 2026

폰트 크기 및 굵기

크기 및 굵기 변수를 재정의하여 타이포그래피 밀도를 미세 조정할 수 있습니다:

변수	기본값	설명
`--rdrp-font-size-xs`	`11px`	가장 작은 텍스트
`--rdrp-font-size-sm`	`12px`	요일 레이블
`--rdrp-font-size-base`	`13px`	날짜 셀, 버튼
`--rdrp-font-size-md`	`14px`	트리거, 시간 항목
`--rdrp-font-size-lg`	`15px`	월 제목
`--rdrp-font-weight-normal`	`400`	기본 굵기
`--rdrp-font-weight-medium`	`500`	중간 강조
`--rdrp-font-weight-semibold`	`600`	선택된 날짜, 제목
`--rdrp-font-weight-bold`	`700`	오늘 날짜 표시

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

const presets = {
  Compact: {
    "--rdrp-font-size-xs": "9px",
    "--rdrp-font-size-sm": "10px",
    "--rdrp-font-size-base": "11px",
    "--rdrp-font-size-md": "12px",
    "--rdrp-font-size-lg": "13px",
    "--rdrp-font-weight-semibold": "500",
    "--rdrp-font-weight-bold": "600",
  },
  Default: {},
  Large: {
    "--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-font-weight-semibold": "700",
    "--rdrp-font-weight-bold": "800",
  },
};

type PresetName = keyof typeof presets;

function CompoundCustomFontPopup() {
  const [value, setValue] = useState<Date | null>(null);
  const [preset, setPreset] = useState<PresetName>("Default");

  return (
    <div>
      <div style={{ display: "flex", gap: 6, marginBottom: 12 }}>
        {(Object.keys(presets) as PresetName[]).map((name) => (
          <button
            key={name}
            onClick={() => setPreset(name)}
            style={{
              padding: "6px 14px",
              border: `1px solid ${preset === name ? "#3b82f6" : "#d1d5db"}`,
              borderRadius: 6,
              background: preset === name ? "#eff6ff" : "#fff",
              cursor: "pointer",
              fontSize: 13,
            }}
          >
            {name}
          </button>
        ))}
      </div>
      <div style={presets[preset] as React.CSSProperties}>
        <DatePicker value={value} onChange={setValue} inline />
      </div>
    </div>
  );
}

March 2026