@mustmove/react-native-stripe

React Native용 주간 스크롤 달력 컴포넌트입니다. RecyclerListView 기반으로 부드럽고 가벼운 주간 페이징 스크롤을 지원하며, 커스텀 날짜 셀 렌더러와 이전/다음 주 스크롤 제어용 ref API를 제공합니다.

설치

npm

npm install @mustmove/react-native-stripe dayjs recyclerlistview

yarn

yarn add @mustmove/react-native-stripe dayjs recyclerlistview

Peer Dependencies

• react (>=18)
• react-native (>=0.80)
• dayjs
• recyclerlistview

사용법

CalendarStrip 컴포넌트를 사용하여 주간 달력을 렌더링합니다.

import React, { useRef, useMemo } from 'react';
import { View, Text } from 'react-native';
import CalendarStrip, { CalendarDayStripHandle } from '@mustmove/react-native-stripe';
import dayjs, { Dayjs } from 'dayjs';
import { groupByDate, GroupByDate } from '@mustmove/react-native-stripe/utils/dateUtils';

// 예시 스케줄 데이터 타입 (실제 프로젝트에 맞게 정의)
type MemberScheduleDataType = {
  startTime: string;
  // ... 기타 스케줄 관련 속성
};

export default function MyScreen() {
  const stripRef = useRef<CalendarDayStripHandle>(null);

  // 예시 스케줄 데이터 (실제 데이터로 교체)
  const memberScheduleData: MemberScheduleDataType[] = [
    { startTime: '2025-07-20T10:00:00Z' },
    { startTime: '2025-07-21T11:00:00Z' },
    { startTime: '2025-07-23T14:00:00Z' },
  ];

  // 1. 스케줄을 날짜별로 묶기 (groupByDate 유틸리티 사용)
  const scheduleMap: GroupByDate<MemberScheduleDataType> = useMemo(() => {
    if (!memberScheduleData) return {};
    return groupByDate<MemberScheduleDataType>(
      memberScheduleData,
      (item) => dayjs(item.startTime) // 각 아이템에서 날짜를 추출할 함수
    );
  }, [memberScheduleData]);

  return (
    <View style={{ flex: 1, padding: 16 }}>
      <CalendarStrip
        ref={stripRef} // ref를 연결하여 외부에서 제어 가능
        minDate="2025-01-01" // 표시할 최소 날짜 (ISO 포맷)
        maxDate="2025-12-31" // 표시할 최대 날짜 (ISO 포맷)
        width="100%" // 컴포넌트 전체 너비
        height={100} // 컴포넌트 전체 높이
        startOfWeek="mon" // 한 주의 시작 요일 (mon, sun 등)
        showDate={true} // 달력 표시 여부 (기본값 true)
        customDayRenderer={(date: Dayjs) => ( // 날짜 셀 커스텀 렌더러
          <View style={{ alignItems: 'center' }}>
            <Text>{date.format('ddd')}</Text> {/* 요일 */}
            <Text>{date.format('D')}</Text> {/* 일 */}
            {/* 해당 날짜에 스케줄이 있다면 추가 표시 가능 */}
            {scheduleMap[date.format('YYYY-MM-DD')] && (
              <Text style={{ fontSize: 10, color: 'blue' }}>{scheduleMap[date.format('YYYY-MM-DD')].length} 스케줄</Text>
            )}
          </View>
        )}
        onWeekChanged={(start, end) => { // 스크롤 후 주가 변경될 때 호출
          console.log(
            'New week:',
            start.format('YYYY-MM-DD'),
            '~',
            end.format('YYYY-MM-DD')
          );
        }}
      />

      {/* ref를 사용하여 이전/다음 주로 스크롤 제어 */}
      <Text onPress={() => stripRef.current?.onPressPrev()}>
        이전 주로
      </Text>
      <Text onPress={() => stripRef.current?.onPressNext()}>
        다음 주로
      </Text>
    </View>
  );
}

주요 Props

| Prop | 타입 | 기본값 | 설명 | | :------------------ | :--------------------------------- | :-------- | :---------------------------------------------------------------- | | showDate | boolean | true | 달력을 렌더링할지 여부 | | minDate | string | — | ISO 8601 문자열. 달력에 표시할 최소 날짜 | | maxDate | string | — | ISO 8601 문자열. 달력에 표시할 최대 날짜 | | width | string \| number | "100%" | 컴포넌트 전체 너비 ("100%", "300px" 또는 숫자) | | height | number | 100 | 컴포넌트 전체 높이 (픽셀 단위) | | customDayRenderer | (date: Dayjs) => React.ReactNode | — | 각 날짜 셀을 완전히 커스텀 렌더링할 함수 | | startOfWeek | 'sun' \| 'mon' \| ... \| 'sat' | 'mon' | 한 주의 시작 요일 설정 (0=일요일…6=토요일) | | onWeekChanged | (start: Dayjs, end: Dayjs) => void | — | 스크롤이 멈춘 이후 새로 보이는 주의 시작/끝을 받을 콜백 |

ref API

useRef를 사용하여 CalendarStrip 컴포넌트에 접근하고 다음 메서드를 호출할 수 있습니다.

| 메서드 | 설명 | | :-------------- | :--------------- | | onPressPrev() | 이전 주로 스크롤 | | onPressNext() | 다음 주로 스크롤 |

유틸리티 함수: groupByDate

날짜별로 아이템 배열을 그룹핑할 때 사용하는 제네릭 유틸 함수입니다.

import { groupByDate, GroupByDate } from '@mustmove/react-native-stripe/utils/dateUtils';
import dayjs, { Dayjs } from 'dayjs';

/** 스케줄 데이터를 날짜별로 묶어두기 */
const scheduleMap: GroupByDate<MemberScheduleDataType> = useMemo(() => {
  if (!memberScheduleData) return {};
  return groupByDate<MemberScheduleDataType>(
    memberScheduleData,
    item => dayjs(item.startTime) // → 각 아이템에서 날짜를 추출할 함수
  );
}, [memberScheduleData]);

// 이후 scheduleMap['2025-07-01'] 처럼 해당 날짜의 스케줄 배열을 조회 가능