네이티브 React Suite 6.2.4 Calendar, Panel, Modal, Input, Message, Button, Tag. · 구현 레퍼런스
02
React Suite 디자인 시스템 디자인 참조
React Suite 6.2.4 컴파일된 스타일시트이며, 현재 v6 CSS 변수 문서를 기준으로 확인했습니다. 아래 값은 최초 정의 또는 기본 정의이며, 시맨틱 별칭은 다른 제공자 테마에서 다르게 해석될 수 있습니다. 캘린더의 독자적인 레이아웃 규칙은 별도로 표시했습니다.
React Suite는 컴포넌트가 풍부한 애플리케이션을 대상으로 하며, Calendar와 같은 컨트롤과 더 넓은 작업 영역을 모두 제공합니다. 이 예제는 컴파일된 스타일시트와 함께 버전 6.2.4를 사용합니다. CustomProvider가 애플리케이션을 감싸고, Calendar, Panel, Modal 및 기타 컴포넌트는 rsuite에서 가져옵니다.
이 캘린더는 연결된 일정 관리 서비스인 것처럼 동작하지 않습니다. 초기 샘플 일정 두 개를 표시하며, 로컬에서 항목을 추가하거나 삭제할 수 있습니다. 선택한 날짜와 일정 목록은 서로 다른 React 상태이므로, 날짜를 이동해도 일정이 변경되지 않습니다. 전체 App 소스에서 모든 상태 전이를 확인할 수 있습니다.
이 사양은 오래된 Less 튜토리얼이 아니라 설치된 v6 CSS를 기준으로 합니다. 타이포그래피, 간격, 모서리 반경, 팔레트 및 시맨틱 역할은 모두 --rs 변수로 제공됩니다. 기본 본문은 작은 글자 크기인 0.875rem을 사용하며, 루트 크기는 16px로 유지됩니다. 이 차이로 인해 기본 컨트롤 영역이 16px 본문 콘텐츠보다 더 조밀해 보일 수 있습니다.
페이지는 --rs-bg-well을 배경으로 사용하고, 그 위에 --rs-bg-card 패널을 배치하며, 일정 구분선에는 --rs-border-primary를 사용합니다. 마커에는 primary-500을, 필드 오류에는 시맨틱 text-error 역할을 사용합니다. 이 참조에서는 텍스트와 배경의 별칭을 그대로 유지하므로, provider 테마에 따라 실제 값이 달라져도 각 역할을 쉽게 파악할 수 있습니다.
기본 루트 크기에서 실제 모서리 반경 스케일은 sm부터 xl까지 4px, 6px, 8px, 12px 값을 포함합니다. 기본 간격 단위는 0.25rem입니다. 제공된 CSS는 이를 장식용 팔레트처럼 다루지 않고, 주변 일정 및 도움말 콘텐츠에 실제 배경과 텍스트 변수를 사용합니다.
애플리케이션 제목은 줄 높이 1.2의 32px로 명시하고, 좁은 화면에서는 28px로 줄입니다. 세션 제목은 조밀한 일정 행에 맞도록 17px로 설정합니다. 이러한 페이지 설정은 라이브러리의 전역 글자 크기 변수를 덮어쓰지 않습니다. 따라서 Calendar 레이블과 모달 컨트롤은 네이티브 컴포넌트 크기를 유지합니다.
Calendar는 Date 값을 받고, onSelect는 선택된 값을 갱신합니다. isoWeek는 표시되는 주가 월요일에 시작하도록 합니다. 고정된 초기 값은 new Date(2026,9,14)이며, JavaScript의 월은 0부터 시작하므로 9는 10월을 뜻합니다. 이 페이지는 오늘 날짜를 나타내는 것이 아니라, 의도적으로 고정한 예시입니다.
키 생성 함수는 getFullYear, getMonth, getDate를 사용해 로컬 YYYY-MM-DD 키를 만듭니다. 시간대를 거치며 로컬 날짜가 달라질 수 있는 toISOString().slice(0,10)은 사용하지 않습니다. 이 레코드는 시간이 없는 날짜를 나타내므로, 암묵적인 UTC 변환을 추가하면 데이터에 없는 의미가 생깁니다.
renderCell은 로컬 레코드에 해당 날짜의 항목이 있는지 확인하고 작은 이벤트 마커를 반환합니다. 마커는 보조적인 표시이며, 날짜를 선택하면 일정에 실제 제목이 표시됩니다. 색상 점만으로는 어떤 일정이 있는지 알 수 없고, 삭제할 항목도 정확히 선택할 수 없습니다.
컴팩트한 캘린더는 모바일 화면에서도 충분히 좁게 유지됩니다. 일정은 날짜 제목, 세션 카드, 로컬 추가 작업으로 구성된 별도의 Panel에 표시됩니다. 기존 760px 전환점에서는 Panel이 캘린더 아래로 이동합니다. 이 구성은 모든 캘린더 셀에 긴 이벤트 제목을 억지로 넣거나, 읽기 어려운 가로형 캘린더를 만드는 일을 방지합니다.
getDay() 값이 0 또는 6이면 주말 일정 등록을 비활성화합니다. 일정에서 해당 규칙을 설명할 수 있도록 주말 날짜 자체는 선택할 수 있습니다. 주말을 선택하면 경고 메시지가 표시되고 추가 버튼은 비활성화됩니다. 이는 로컬 팀 정책이지 React Suite Calendar의 제한 사항이 아닙니다.
일정이 없는 평일에는 구체적인 빈 상태를 표시하고 추가 작업을 계속 사용할 수 있습니다. 세션을 삭제하면 레코드가 변경되고 로컬 알림이 표시됩니다. 참석자에게 알림을 보냈다고 주장하지 않습니다. Date 객체, 레코드 배열, 간단한 정책이 모두 소스에 드러나 있으므로 실제 제품에 맞게 의도적으로 교체할 수 있습니다.
‘검토 세션 추가’를 열면 제목과 이전 오류가 모두 지워집니다. 모달은 Header, Title, Body, Footer 구성으로 만들며, 열림 상태와 onClose는 React 상태로 제어합니다. 입력 필드에는 실제로 연결된 레이블이 있고, 유효하지 않은 상태와 오류 설명도 제공됩니다. 공백을 제거한 제목이 세 글자 미만이면 모달을 닫지 않고 알림을 표시합니다.
유효한 항목을 제출하면 선택한 날짜에 기록 하나가 추가되고 모달이 닫히며 안내 메시지가 표시됩니다. Modal 컴포넌트는 Escape 키 처리와 포커스 관리 등 대화상자 동작을 담당합니다. 취소를 선택하면 작성 중인 내용만 닫힙니다. 애플리케이션은 자체 제목 규칙을 통과했는지 확인하기 전에 모달을 닫지 않습니다.
React 프로젝트에 [email protected]를 설치하고 rsuite/dist/rsuite.min.css를 가져옵니다. App 예제에는 해당 가져오기와 기존 style.css, CustomProvider 래퍼가 포함되어 있습니다. 설정 진입점은 React createRoot를 사용하며 원격 CDN에 의존하지 않습니다. 독립 실행형 미리보기에는 동일한 기본 컴포넌트와 CSS이 로컬로 번들링되어 있습니다.
React Suite는 리셋 스타일이 포함되지 않은 스타일시트 배포판도 제공합니다. 이 예제에서는 표준 스타일시트를 의도적으로 사용합니다. 두 배포판을 함께 사용하면 스타일이 중복되고 페이지에 어떤 리셋이 적용되는지 불분명해집니다. 기존 애플리케이션에서는 주변 스타일 아키텍처에 맞는 배포판을 선택하고 폼과 제목에 미치는 영향을 함께 확인하세요.
연결된 일정 관리 기능이라면 시간, 시간대, 참석자, 권한, 저장 결과가 필요합니다. 날짜만 다루는 이 예제에서는 그런 필드를 임의로 추가하거나 상태 업데이트에 성공했으니 초대도 전송됐다고 가장하지 않습니다. 푸터와 알림을 통해 로컬 범위임을 명확히 보여줍니다. 로컬 날짜 키 함수는 이 기록에 적합하지만, 시간대가 반영된 회의를 처리하기 위한 완전한 전략은 아닙니다.
원격 요청을 추가한다면 결과가 확인될 때까지 초안 모달을 열어 두거나 복구할 수 있는 오류를 표시하세요. 중복 제출을 막고 요청이 실패하더라도 선택한 날짜와 제목을 유지하세요. 라이브러리는 인터페이스 기본 요소를 제공하지만, 애플리케이션의 정확성은 이러한 요소를 실제 작업과 올바르게 연결하는 데 달려 있습니다.
import React,{useState} from 'react';
import {CustomProvider,Calendar,Panel,Button,Modal,Input,Message,Tag} from 'rsuite';
import 'rsuite/dist/rsuite.min.css';
import './style.css';
const key=d=>`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
export default function App(){const[date,setDate]=useState(new Date(2026,9,14)),[open,setOpen]=useState(false),[title,setTitle]=useState(''),[error,setError]=useState(''),[notice,setNotice]=useState(''),[events,setEvents]=useState([{id:1,date:'2026-10-14',title:'Navigation review'},{id:2,date:'2026-10-16',title:'Prototype handoff'}]);const selected=events.filter(e=>e.date===key(date));const weekend=[0,6].includes(date.getDay());function save(){if(title.trim().length<3){setError('Use at least three characters for the session title.');return;}setEvents([...events,{id:Date.now(),date:key(date),title:title.trim()}]);setOpen(false);setNotice('Added to the local calendar only. No invitation was sent.');}
return <CustomProvider><main className='schedule'><header><div><p className='eyebrow'>REACT SUITE / TEAM CADENCE</p><h1>Give the work a place in the week.</h1><p>Select a day to inspect its sessions. Weekend scheduling is disabled in this example.</p></div><Tag color='blue'>Local calendar</Tag></header>{notice&&<Message type='info' closable onClose={()=>setNotice('')}>{notice}</Message>}<div className='schedule-grid'><Panel bordered className='calendar-panel'><Calendar compact bordered isoWeek value={date} onSelect={setDate} renderCell={d=>events.some(e=>e.date===key(d))?<span className='event-dot' aria-label='Has a session'/>:null}/><p className='calendar-legend'><span className='event-dot'/> A date with one or more local sessions</p></Panel><Panel bordered className='agenda-panel'><p className='eyebrow'>{date.toLocaleDateString('en',{weekday:'long'})}</p><h2>{date.toLocaleDateString('en',{month:'long',day:'numeric',year:'numeric'})}</h2>{weekend&&<Message type='warning'>The sample team does not schedule weekend reviews.</Message>}<div className='agenda'>{selected.length?selected.map(e=><article key={e.id}><div><span className='event-kind'>Review session</span><h3>{e.title}</h3></div><Button appearance='subtle' size='sm' aria-label={'Remove '+e.title} onClick={()=>{setEvents(events.filter(x=>x.id!==e.id));setNotice('Removed from the local calendar. No attendee was notified.')}}>Remove</Button></article>):<div className='empty'><h3>No sessions for this day.</h3><p>Choose another date or add a local review session.</p></div>}</div><Button appearance='primary' disabled={weekend} onClick={()=>{setTitle('');setError('');setOpen(true)}}>Add review session</Button></Panel></div><footer>Native React Suite Calendar, Panel, Modal, Input, Message and Button. All dates are local calendar dates; no remote calendar connection.</footer><Modal open={open} onClose={()=>setOpen(false)} size='sm'><Modal.Header><Modal.Title>Add review session</Modal.Title></Modal.Header><Modal.Body><p>For {key(date)}. This adds a record only in the preview.</p><label htmlFor='session-title'>Session title</label><Input id='session-title' value={title} onChange={v=>{setTitle(v);setError('')}} aria-invalid={!!error} aria-describedby='title-error' autoFocus/>{error&&<p id='title-error' role='alert' className='field-error'>{error}</p>}</Modal.Body><Modal.Footer><Button onClick={()=>setOpen(false)} appearance='subtle'>Cancel</Button><Button onClick={save} appearance='primary'>Add locally</Button></Modal.Footer></Modal></main></CustomProvider>}
React 19 및 React Suite 6.2.4로 만든 기본 컴포넌트 예제입니다. 외부 캘린더 서비스는 사용하지 않습니다. 전체 애플리케이션과 스타일은 위에 제공되어 있습니다.
jsx
// Create the project first:
// npm create vite@latest react-suite-specimen -- --template react
// cd react-suite-specimen && npm install
// In a React project:
// npm install [email protected]
// Save the complete App example as App.jsx and the CSS example as style.css.
import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App.jsx';
createRoot(document.getElementById('root')).render(<App/>);
// index.html needs <div id="root"></div> and the Vite module entry.
// App.jsx imports rsuite/dist/rsuite.min.css and wraps CustomProvider.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
프로젝트를 위한 프롬프트
에이전트 프롬프트
React Suite 6.2.4의 Calendar 및 일정 구성을 CustomProvider와 기본 스타일시트로 사용하세요. 요일 선택, 주말 비활성화 동작, 로컬 검토 항목을 위한 Modal/Input 흐름을 유지하세요. 선택한 날짜와 일정 항목은 애플리케이션 상태로 관리하고, 추가하기 전에 입력한 검토 정보를 검증하며, 취소 시 일정이 변경되지 않도록 하세요. 반응형 캘린더 레이아웃과 날짜별 일정 표시를 유지하세요. 캘린더 초대나 외부 일정 관리 서비스를 암시하지 마세요.
05
React Suite 디자인 시스템의 출처 및 범위
React Suite 6.2.4. 주말 정책과 예시 기록을 자체적으로 설정한 로컬 날짜 전용 캘린더이며, 초대나 외부 일정 관리 기능은 없습니다.
