atomsystem 0.2.1 → 0.4.0

package/README.md

@@ -134,7 +134,7 @@ AI Agent는 자동으로 디자인 토큰과 UX 표준을 적용하여 일관된
 | :--- | :--- |
 | `atomsystem` | 토큰 데이터 모델, 테마 엔진, 색상/타이포 유틸리티 |
 | `atomsystem/css/atom-ui.css` | 전역 스타일 및 시멘틱 UI 클래스 (`.atom-btn`, `.atom-card` 등) |
-| `atomsystem/components/*` | React UI 컴포넌트 (`Button`, `Card`, `Modal`, `Input`, `Badge`) |
+| `atomsystem/components/*` | React UI 컴포넌트 풀세트 (`Button`, `Input`, `Card`, `Badge`, `Modal`, `Calendar`, `Select`, `Accordion`, `Radio`, `Slider`, `Avatar`, `Progress`, `Skeleton`, `Breadcrumb`, `Separator`, `Textarea`, `Pagination`, `Tooltip`) |
 | `atomsystem/token.json` | W3C DTCG 포맷 단일 진실 공급원 토큰 파일 |
 | `atomsystem/design.md` | 마크다운 기반 디자인 시스템 가이드 규격 |
 | `atomsystem/uxPattern.md` | 마크다운 기반 UX 인터랙션 패턴 가이드 |

package/components/ui/Accordion.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+export interface AccordionItem {
+  id: string;
+  title: string;
+  content: React.ReactNode;
+}
+
+export interface AccordionProps {
+  items: AccordionItem[];
+  type?: 'single' | 'multiple';
+  className?: string;
+}
+
+export const Accordion: React.FC<AccordionProps> = ({ items, type = 'single', className = '' }) => {
+  const [openIds, setOpenIds] = useState<string[]>([]);
+
+  const toggle = (id: string) => {
+    if (type === 'single') {
+      setOpenIds(openIds.includes(id) ? [] : [id]);
+    } else {
+      setOpenIds(openIds.includes(id) ? openIds.filter((item) => item !== id) : [...openIds, id]);
+    }
+  };
+
+  return (
+    <div className={`atom-accordion ${className}`}>
+      {items.map((item) => {
+        const isOpen = openIds.includes(item.id);
+        return (
+          <div key={item.id} className="atom-accordion-item">
+            <button
+              type="button"
+              className="atom-accordion-trigger"
+              onClick={() => toggle(item.id)}
+              aria-expanded={isOpen}
+            >
+              <span>{item.title}</span>
+              <span className="atom-accordion-icon" style={{ transform: isOpen ? 'rotate(180deg)' : 'none' }}>
+                ▾
+              </span>
+            </button>
+            {isOpen && <div className="atom-accordion-content">{item.content}</div>}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/components/ui/Avatar.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+
+export interface AvatarProps {
+  src?: string;
+  alt?: string;
+  fallback?: string;
+  size?: 'sm' | 'md' | 'lg';
+  status?: 'online' | 'offline' | 'busy';
+  className?: string;
+}
+
+export const Avatar: React.FC<AvatarProps> = ({
+  src,
+  alt = 'Avatar',
+  fallback,
+  size = 'md',
+  status,
+  className = '',
+}) => {
+  const [hasError, setHasError] = useState(!src);
+
+  return (
+    <div className={`atom-avatar atom-avatar-${size} ${className}`}>
+      {src && !hasError ? (
+        <img src={src} alt={alt} onError={() => setHasError(true)} className="atom-avatar-img" />
+      ) : (
+        <span className="atom-avatar-fallback">{fallback || alt.slice(0, 2).toUpperCase()}</span>
+      )}
+      {status && <span className={`atom-avatar-status atom-avatar-status-${status}`} />}
+    </div>
+  );
+};

package/components/ui/Breadcrumb.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  separator?: string;
+  className?: string;
+}
+
+export const Breadcrumb: React.FC<BreadcrumbProps> = ({
+  items,
+  separator = '/',
+  className = '',
+}) => {
+  return (
+    <nav className={`atom-breadcrumb ${className}`} aria-label="Breadcrumb">
+      <ol className="atom-breadcrumb-list">
+        {items.map((item, idx) => {
+          const isLast = idx === items.length - 1;
+          return (
+            <React.Fragment key={idx}>
+              <li className={`atom-breadcrumb-item ${isLast ? 'atom-breadcrumb-current' : ''}`}>
+                {isLast || !item.href ? (
+                  <span aria-current={isLast ? 'page' : undefined}>{item.label}</span>
+                ) : (
+                  <a href={item.href}>{item.label}</a>
+                )}
+              </li>
+              {!isLast && <li className="atom-breadcrumb-separator">{separator}</li>}
+            </React.Fragment>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};

package/components/ui/Calendar.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+
+export interface CalendarProps {
+  selected?: Date;
+  onSelect?: (date: Date) => void;
+  className?: string;
+}
+
+export const Calendar: React.FC<CalendarProps> = ({ selected, onSelect, className = '' }) => {
+  const [currentDate, setCurrentDate] = useState(selected || new Date());
+
+  const year = currentDate.getFullYear();
+  const month = currentDate.getMonth();
+
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+
+  const handlePrevMonth = () => setCurrentDate(new Date(year, month - 1, 1));
+  const handleNextMonth = () => setCurrentDate(new Date(year, month + 1, 1));
+
+  const days = [];
+  for (let i = 0; i < firstDay; i++) {
+    days.push(null);
+  }
+  for (let i = 1; i <= daysInMonth; i++) {
+    days.push(new Date(year, month, i));
+  }
+
+  const isSelected = (d: Date | null) => {
+    if (!d || !selected) return false;
+    return (
+      d.getFullYear() === selected.getFullYear() &&
+      d.getMonth() === selected.getMonth() &&
+      d.getDate() === selected.getDate()
+    );
+  };
+
+  return (
+    <div className={`atom-calendar ${className}`}>
+      <div className="atom-calendar-header">
+        <button type="button" onClick={handlePrevMonth} className="atom-calendar-nav-btn" aria-label="이전 달">
+          &lt;
+        </button>
+        <span className="atom-calendar-title">
+          {year}년 {month + 1}월
+        </span>
+        <button type="button" onClick={handleNextMonth} className="atom-calendar-nav-btn" aria-label="다음 달">
+          &gt;
+        </button>
+      </div>
+      <div className="atom-calendar-grid">
+        {['일', '월', '화', '수', '목', '금', '토'].map((w) => (
+          <div key={w} className="atom-calendar-weekday">
+            {w}
+          </div>
+        ))}
+        {days.map((d, idx) =>
+          d ? (
+            <button
+              key={idx}
+              type="button"
+              onClick={() => onSelect?.(d)}
+              className={`atom-calendar-day ${isSelected(d) ? 'atom-calendar-day-selected' : ''}`}
+            >
+              {d.getDate()}
+            </button>
+          ) : (
+            <div key={idx} />
+          )
+        )}
+      </div>
+    </div>
+  );
+};

package/components/ui/Pagination.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+export interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange?: (page: number) => void;
+  className?: string;
+}
+
+export const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  className = '',
+}) => {
+  const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
+
+  return (
+    <nav className={`atom-pagination ${className}`} aria-label="페이지 네비게이션">
+      <button
+        type="button"
+        disabled={currentPage <= 1}
+        onClick={() => onPageChange?.(currentPage - 1)}
+        className="atom-pagination-btn"
+      >
+        &lt; 이전
+      </button>
+      {pages.map((p) => (
+        <button
+          key={p}
+          type="button"
+          onClick={() => onPageChange?.(p)}
+          className={`atom-pagination-btn ${p === currentPage ? 'atom-pagination-active' : ''}`}
+          aria-current={p === currentPage ? 'page' : undefined}
+        >
+          {p}
+        </button>
+      ))}
+      <button
+        type="button"
+        disabled={currentPage >= totalPages}
+        onClick={() => onPageChange?.(currentPage + 1)}
+        className="atom-pagination-btn"
+      >
+        다음 &gt;
+      </button>
+    </nav>
+  );
+};

package/components/ui/Progress.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export interface ProgressProps {
+  value: number;
+  max?: number;
+  variant?: 'primary' | 'success';
+  className?: string;
+}
+
+export const Progress: React.FC<ProgressProps> = ({
+  value,
+  max = 100,
+  variant = 'primary',
+  className = '',
+}) => {
+  const percent = Math.min(100, Math.max(0, (value / max) * 100));
+
+  return (
+    <div
+      className={`atom-progress ${className}`}
+      role="progressbar"
+      aria-valuenow={value}
+      aria-valuemin={0}
+      aria-valuemax={max}
+    >
+      <div
+        className={`atom-progress-bar atom-progress-${variant}`}
+        style={{ width: `${percent}%` }}
+      />
+    </div>
+  );
+};

package/components/ui/Radio.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+export interface RadioOption {
+  value: string;
+  label: string;
+  description?: string;
+}
+
+export interface RadioGroupProps {
+  name?: string;
+  value?: string;
+  options: RadioOption[];
+  onChange?: (val: string) => void;
+  className?: string;
+}
+
+export const RadioGroup: React.FC<RadioGroupProps> = ({
+  name = 'atom-radio-group',
+  value,
+  options,
+  onChange,
+  className = '',
+}) => {
+  return (
+    <div className={`atom-radio-group ${className}`} role="radiogroup">
+      {options.map((opt) => (
+        <label key={opt.value} className="atom-radio-label">
+          <input
+            type="radio"
+            name={name}
+            value={opt.value}
+            checked={value === opt.value}
+            onChange={() => onChange?.(opt.value)}
+            className="atom-radio"
+          />
+          <div className="flex flex-col">
+            <span className="font-semibold">{opt.label}</span>
+            {opt.description && <span className="text-xs text-neutral-500">{opt.description}</span>}
+          </div>
+        </label>
+      ))}
+    </div>
+  );
+};

package/components/ui/Select.tsx

@@ -0,0 +1,72 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export interface SelectProps {
+  options: SelectOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export const Select: React.FC<SelectProps> = ({
+  options,
+  value,
+  onChange,
+  placeholder = '선택하세요',
+  className = '',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <div ref={containerRef} className={`atom-select ${className}`}>
+      <button
+        type="button"
+        className="atom-select-trigger"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+      >
+        <span>{selectedOption ? selectedOption.label : placeholder}</span>
+        <span className="atom-select-arrow" style={{ transform: isOpen ? 'rotate(180deg)' : 'none' }}>
+          ▼
+        </span>
+      </button>
+      {isOpen && (
+        <ul className="atom-select-menu" role="listbox">
+          {options.map((opt) => (
+            <li
+              key={opt.value}
+              className="atom-select-option"
+              role="option"
+              aria-selected={opt.value === value}
+              onClick={() => {
+                onChange?.(opt.value);
+                setIsOpen(false);
+              }}
+            >
+              {opt.label}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};

package/components/ui/Separator.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export interface SeparatorProps {
+  orientation?: 'horizontal' | 'vertical';
+  label?: string;
+  className?: string;
+}
+
+export const Separator: React.FC<SeparatorProps> = ({
+  orientation = 'horizontal',
+  label,
+  className = '',
+}) => {
+  if (label && orientation === 'horizontal') {
+    return (
+      <div className={`atom-separator-with-label ${className}`}>
+        <span>{label}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      role="separator"
+      aria-orientation={orientation}
+      className={`atom-separator atom-separator-${orientation} ${className}`}
+    />
+  );
+};

package/components/ui/Skeleton.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export interface SkeletonProps {
+  width?: string | number;
+  height?: string | number;
+  circle?: boolean;
+  className?: string;
+}
+
+export const Skeleton: React.FC<SkeletonProps> = ({
+  width = '100%',
+  height = '1rem',
+  circle = false,
+  className = '',
+}) => {
+  return (
+    <div
+      className={`atom-skeleton ${circle ? '!rounded-full' : ''} ${className}`}
+      style={{
+        width: typeof width === 'number' ? `${width}px` : width,
+        height: typeof height === 'number' ? `${height}px` : height,
+      }}
+    />
+  );
+};

package/components/ui/Slider.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+export interface SliderProps {
+  value: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  onChange?: (val: number) => void;
+  className?: string;
+}
+
+export const Slider: React.FC<SliderProps> = ({
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  className = '',
+}) => {
+  return (
+    <div className={`atom-slider ${className}`}>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(e) => onChange?.(Number(e.target.value))}
+        className="atom-slider-input"
+      />
+    </div>
+  );
+};

package/components/ui/Textarea.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  maxLength?: number;
+  label?: string;
+}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ maxLength, label, value, className = '', ...props }, ref) => {
+    const currentLength = typeof value === 'string' ? value.length : 0;
+
+    return (
+      <div className="atom-textarea-group">
+        {label && <label className="text-xs font-semibold text-neutral-600 dark:text-neutral-400">{label}</label>}
+        <textarea ref={ref} value={value} maxLength={maxLength} className={`atom-textarea ${className}`} {...props} />
+        {maxLength && (
+          <div className="atom-textarea-counter">
+            {currentLength} / {maxLength}자
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+Textarea.displayName = 'Textarea';

package/components/ui/Tooltip.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+
+export interface TooltipProps {
+  content: React.ReactNode;
+  children: React.ReactNode;
+  position?: 'top' | 'bottom';
+  className?: string;
+}
+
+export const Tooltip: React.FC<TooltipProps> = ({ content, children, position = 'top', className = '' }) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <div
+      className={`atom-tooltip-wrapper ${className}`}
+      onMouseEnter={() => setIsVisible(true)}
+      onMouseLeave={() => setIsVisible(false)}
+      onFocus={() => setIsVisible(true)}
+      onBlur={() => setIsVisible(false)}
+    >
+      {children}
+      {isVisible && (
+        <div className={`atom-tooltip-bubble atom-tooltip-${position}`} role="tooltip">
+          {content}
+        </div>
+      )}
+    </div>
+  );
+};

package/components/ui/index.ts

@@ -3,3 +3,16 @@ export * from './Input';
 export * from './Card';
 export * from './Badge';
 export * from './Modal';
+export * from './Calendar';
+export * from './Select';
+export * from './Accordion';
+export * from './Tooltip';
+export * from './Pagination';
+export * from './Radio';
+export * from './Slider';
+export * from './Avatar';
+export * from './Progress';
+export * from './Skeleton';
+export * from './Breadcrumb';
+export * from './Separator';
+export * from './Textarea';