@conscience-technology/ctds 0.0.0-stage → 0.1.0

package/assets/components/MetricCard/MetricCard.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import {
+  forwardRef,
+  type AnchorHTMLAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+  type Ref,
+} from "react";
+
+import { Icon, type IconName } from "../Icon";
+
+import styles from "./MetricCard.module.css";
+
+/**
+ * MetricCard — 대시보드 상단 KPI/Stat 카드.
+ * label + value + 선택적 아이콘 + trend 매핑된 inline delta + 선택적 보조 설명.
+ *
+ * trend prop을 주면 delta는 trend-up/trend-down/minus 아이콘 + 숫자 inline으로 자동 생성.
+ * delta를 직접 ReactNode로 주면 수동 모드, trend 매핑은 무시된다.
+ */
+export type MetricCardVariant = "line" | "soft" | "bare";
+export type MetricCardTrend = "up" | "down" | "flat";
+
+type Common = {
+  label: ReactNode;
+  value: ReactNode;
+  icon?: IconName;
+  trend?: MetricCardTrend;
+  deltaLabel?: ReactNode;
+  delta?: ReactNode;
+  description?: ReactNode;
+  variant?: MetricCardVariant;
+};
+
+type DivProps = Common &
+  Omit<HTMLAttributes<HTMLDivElement>, keyof Common> & {
+    href?: undefined;
+  };
+
+type AnchorProps = Common &
+  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof Common> & {
+    href: string;
+  };
+
+export type MetricCardProps = DivProps | AnchorProps;
+
+const variantClass: Record<MetricCardVariant, string> = {
+  line: styles.line,
+  soft: styles.soft,
+  bare: styles.bare,
+};
+
+const trendIcon: Record<MetricCardTrend, IconName> = {
+  up: "trend-up",
+  down: "trend-down",
+  flat: "minus",
+};
+
+const MetricCard = forwardRef<HTMLElement, MetricCardProps>((props, ref) => {
+  const {
+    className,
+    label,
+    value,
+    icon,
+    trend,
+    deltaLabel,
+    delta,
+    description,
+    variant = "line",
+    ...rest
+  } = props as Common & { className?: string } & Record<string, unknown>;
+
+  const isLink = typeof (props as AnchorProps).href === "string";
+
+  const rootClass = [
+    styles.root,
+    variantClass[variant],
+    isLink ? styles.interactive : "",
+    className ?? "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const resolvedDelta =
+    delta ??
+    (trend && deltaLabel !== undefined ? (
+      <span className={styles.delta} data-trend={trend}>
+        <span className={styles.deltaIcon} aria-hidden>
+          <Icon name={trendIcon[trend]} />
+        </span>
+        <span>{deltaLabel}</span>
+      </span>
+    ) : null);
+
+  const content = (
+    <>
+      <div className={styles.head}>
+        {icon && (
+          <span className={styles.icon} aria-hidden>
+            <Icon name={icon} />
+          </span>
+        )}
+        <span className={styles.label}>{label}</span>
+      </div>
+      <div className={styles.valueRow}>
+        <span className={styles.value}>{value}</span>
+        {resolvedDelta}
+      </div>
+      {description && <div className={styles.description}>{description}</div>}
+    </>
+  );
+
+  if (isLink) {
+    return (
+      <a
+        ref={ref as Ref<HTMLAnchorElement>}
+        className={rootClass}
+        {...(rest as AnchorHTMLAttributes<HTMLAnchorElement>)}
+        href={(props as AnchorProps).href}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <div
+      ref={ref as Ref<HTMLDivElement>}
+      className={rootClass}
+      {...(rest as HTMLAttributes<HTMLDivElement>)}
+    >
+      {content}
+    </div>
+  );
+});
+
+MetricCard.displayName = "MetricCard";
+
+export { MetricCard };

package/assets/components/MetricCard/index.ts

@@ -0,0 +1,2 @@
+export { MetricCard } from "./MetricCard";
+export type { MetricCardProps, MetricCardVariant, MetricCardTrend } from "./MetricCard";

package/assets/components/Modal/Modal.module.css

@@ -0,0 +1,175 @@
+/* Modal ─────────────────────────────────────────────────────────
+   흐름을 끊는 중앙 다이얼로그. 결정·입력·확인의 자리.
+   구조: [header: title · close] · [body: 자유 children] · [footer: actions]
+   원사이즈(560) · dismiss는 X + ESC만 (오버레이 클릭 ❌). */
+
+/* Overlay ───────────────────────────────────────────────────── */
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay);
+  background: var(--scrim);
+  animation: modal-overlay-in var(--duration-base) var(--ease-out);
+}
+
+.overlay[data-state="closed"] {
+  animation: modal-overlay-out var(--duration-fast) var(--ease-in);
+}
+
+/* Content ───────────────────────────────────────────────────── */
+.content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: var(--z-modal);
+  display: flex;
+  flex-direction: column;
+  /* 440 = space-2(8) * 55. 모달은 좁고 집중된 자리 — 긴 폼은 페이지 자리. */
+  width: calc(100vw - var(--space-8));
+  max-width: calc(var(--space-2) * 55);
+  /* 세로는 뷰포트 - 좌우 여백과 동일 비율로 캡. body 스크롤 가능. */
+  max-height: calc(100vh - var(--space-8));
+  background: var(--bg);
+  border: var(--hairline) solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  font-family: var(--font-sans);
+  color: var(--fg);
+  outline: none;
+  overflow: hidden;
+  animation: modal-content-in var(--duration-slow) var(--ease-out);
+  transform: translate(-50%, -50%);
+  will-change: transform, opacity;
+}
+
+.content[data-state="closed"] {
+  animation: modal-content-out var(--duration-base) var(--ease-in);
+}
+
+/* Header ────────────────────────────────────────────────────── */
+.header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  /* 상단은 넉넉히, header 자체 bottom은 0 — description↔footer 간격은 footer top padding으로 분담. */
+  padding: var(--space-5) var(--space-5) 0;
+}
+
+/* title + description을 하나의 묶음으로 감싸 좌측 flex 열에 둠. */
+.headerText {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  /* description은 title에 바짝 — 둘은 하나의 "소개" 묶음. */
+  gap: var(--space-1);
+}
+
+.title {
+  margin: 0;
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+  letter-spacing: var(--type-sm-tracking);
+  font-weight: var(--font-weight-semibold);
+  color: var(--fg);
+}
+
+.description {
+  margin: 0;
+  font-size: var(--text-xs);
+  line-height: var(--lh-xs);
+  color: var(--fg-muted);
+}
+
+.close {
+  flex-shrink: 0;
+  color: var(--fg-muted);
+  /* title 첫 줄 line-height 중앙에 X 중심 맞춤 (Toast/Callout과 동일 패턴). */
+  margin-top: calc((var(--lh-sm) - var(--iconbtn-h-md)) / 2);
+}
+
+/* Body ──────────────────────────────────────────────────────── */
+/* 스크롤 컨테이너와 콘텐츠 트랙을 2단으로 분리 —
+   바깥(.body)은 overflow만 담당, 안쪽(.bodyInner)이 좌우 padding을 깐다.
+   스크롤바가 콘텐츠를 가리지 않고, 트랙 여백 규칙(bodyInner padding) 유지. */
+.body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.bodyInner {
+  /* children은 "description과 분리된 자유 콘텐츠 영역" — 여유 간격. */
+  padding: var(--space-4) var(--space-5) 0;
+  color: var(--fg);
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+}
+
+/* footer가 없을 땐 body에 하단 여백을 돌려줌. */
+.body:last-child .bodyInner {
+  padding-bottom: var(--space-5);
+}
+
+/* Footer ────────────────────────────────────────────────────── */
+/* 액션 Button은 우측으로 몰린다 — justify가 아니라 첫 자식 margin-left:auto로 밀어
+   스크롤 컨테이너 아니지만 코드 일관성 위해 우측 정렬은 margin 패턴 사용. */
+.footer {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  /* header bottom이 0이므로 footer top이 header↔footer 전체 간격을 담당. */
+  padding: var(--space-5) var(--space-5) var(--space-5);
+}
+
+.footer > :first-child {
+  margin-left: auto;
+}
+
+/* Animations ────────────────────────────────────────────────── */
+@keyframes modal-overlay-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes modal-overlay-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+@keyframes modal-content-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(var(--modal-scale-from, 0.96));
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes modal-content-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(var(--modal-scale-from, 0.96));
+  }
+}
+
+/* Motion 축 스왑 — scale 프리미티브 스펙(0.94/0.96/0.98) 참조. */
+:root[data-motion="bouncy"]   .content { --modal-scale-from: 0.94; }
+:root[data-motion="standard"] .content { --modal-scale-from: 0.96; }
+:root[data-motion="calm"]     .content { --modal-scale-from: 0.98; }
+:root[data-motion="none"]     .content { --modal-scale-from: 1; }
+
+@media (prefers-reduced-motion: reduce) {
+  .overlay,
+  .overlay[data-state="closed"],
+  .content,
+  .content[data-state="closed"] {
+    animation: none;
+  }
+}

package/assets/components/Modal/Modal.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { forwardRef, type ReactNode } from "react";
+
+import { Icon } from "../Icon";
+import { IconButton } from "../IconButton";
+
+import styles from "./Modal.module.css";
+
+export interface ModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** 헤더 좌측 타이틀. 접근성상 필수 — 숨길 땐 titleSrOnly. */
+  title: ReactNode;
+  /** 타이틀 바로 아래 한두 줄 설명. 헤더 영역 안에서 title과 바짝 붙음. 긴 폼이면 children 쪽으로. */
+  description?: ReactNode;
+  /** 타이틀을 시각적으로 숨기고 스크린리더에만 노출. 일러스트 중심 모달 등. */
+  titleSrOnly?: boolean;
+  /** 바디 콘텐츠. input/image/list 등 자유. 헤더(title + description)와 분리된 아래 영역. */
+  children?: ReactNode;
+  /** 하단 액션 영역. Button들을 넘김. 없으면 footer 자체가 렌더되지 않음. */
+  footer?: ReactNode;
+  /** 헤더 우측 X 버튼. 기본 true. */
+  dismissible?: boolean;
+  /** 스크린리더용 X 버튼 라벨. i18n 호출부 책임. */
+  dismissLabel?: string;
+  /** ESC 키 닫힘 차단. 중요한 확인/저장 중엔 true. */
+  disableEscape?: boolean;
+}
+
+export const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(
+  {
+    open,
+    onOpenChange,
+    title,
+    description,
+    titleSrOnly,
+    children,
+    footer,
+    dismissible = true,
+    dismissLabel,
+    disableEscape,
+  },
+  ref,
+) {
+  return (
+    <RadixDialog.Root open={open} onOpenChange={onOpenChange}>
+      <RadixDialog.Portal>
+        <RadixDialog.Overlay className={styles.overlay} />
+        <RadixDialog.Content
+          ref={ref}
+          className={styles.content}
+          onEscapeKeyDown={(e) => {
+            if (disableEscape) e.preventDefault();
+          }}
+          onPointerDownOutside={(e) => {
+            // 오버레이 클릭 닫기는 비활성 (실수 유발 방지).
+            e.preventDefault();
+          }}
+        >
+          <div className={styles.header}>
+            <div className={styles.headerText}>
+              <RadixDialog.Title
+                className={[styles.title, titleSrOnly && "visually-hidden"]
+                  .filter(Boolean)
+                  .join(" ")}
+              >
+                {title}
+              </RadixDialog.Title>
+              {description && (
+                <RadixDialog.Description className={styles.description}>
+                  {description}
+                </RadixDialog.Description>
+              )}
+            </div>
+            {dismissible && (
+              <RadixDialog.Close asChild>
+                <IconButton
+                  className={styles.close}
+                  variant="ghost"
+                  icon={<Icon name="x" />}
+                  aria-label={dismissLabel}
+                />
+              </RadixDialog.Close>
+            )}
+          </div>
+          {children !== undefined && children !== null && (
+            <div className={styles.body}>
+              <div className={styles.bodyInner}>{children}</div>
+            </div>
+          )}
+          {footer && <div className={styles.footer}>{footer}</div>}
+        </RadixDialog.Content>
+      </RadixDialog.Portal>
+    </RadixDialog.Root>
+  );
+});

package/assets/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export { Modal } from "./Modal";
+export type { ModalProps } from "./Modal";

package/assets/components/Onboarding/DocsIndex.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { Button } from "../Button";
+import { components, componentSlugs } from "../_data";
+import styles from "./Onboarding.module.css";
+
+export function DocsIndex() {
+  const [copied, setCopied] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const copyPrompt = async (name: string, slug: string) => {
+    setError(null);
+    try {
+      const promptSlug = slug.split("/").pop() ?? slug;
+      const res = await fetch(`/api/prompt/${promptSlug}`);
+      if (!res.ok) {
+        setError(name);
+        return;
+      }
+      const md = await res.text();
+      await navigator.clipboard.writeText(md);
+      setCopied(name);
+      setTimeout(() => setCopied(null), 1600);
+    } catch {
+      setError(name);
+    }
+  };
+
+  return (
+    <div className={styles.panel}>
+      {components.map((cat) => (
+        <div key={cat.id} className={styles.docsCategory}>
+          <span className={styles.docsCategoryTitle}>{cat.title}</span>
+          <div className={styles.docsGrid}>
+            {cat.items.map((name) => {
+              const slug = componentSlugs[name];
+              const hasDoc = Boolean(slug);
+              return (
+                <div key={name} className={styles.docsCard}>
+                  <span className={styles.docsCardName}>{name}</span>
+                  <div className={styles.docsCardActions}>
+                    {hasDoc ? (
+                      <Button variant="outline" size="sm" asChild>
+                        <Link
+                          href={`/components/${slug}`}
+                          target="_blank"
+                          rel="noopener"
+                        >
+                          문서 열기
+                        </Link>
+                      </Button>
+                    ) : (
+                      <Button variant="outline" size="sm" disabled>
+                        문서 없음
+                      </Button>
+                    )}
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      disabled={!hasDoc}
+                      onClick={() => hasDoc && copyPrompt(name, slug)}
+                    >
+                      프롬프트 복사
+                    </Button>
+                    {copied === name && (
+                      <span className={styles.docsBadge}>복사됨</span>
+                    )}
+                    {error === name && (
+                      <span className={styles.docsBadge}>실패</span>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/assets/components/Onboarding/LayoutBuilder.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+/* eslint-disable @next/next/no-img-element */
+
+import { useState, type ChangeEvent } from "react";
+import styles from "./Onboarding.module.css";
+
+type SidebarMode = "left" | "right" | "dual" | "none";
+type LogoKind = "symbol" | "combination";
+
+type LayoutPreset = {
+  id: string;
+  label: string;
+  sidebar: SidebarMode;
+  topbar: boolean;
+};
+
+const LAYOUT_PRESETS: LayoutPreset[] = [
+  { id: "sidebar-only", label: "사이드바만", sidebar: "left", topbar: false },
+  { id: "topbar-only", label: "탑바만", sidebar: "none", topbar: true },
+  { id: "sidebar-topbar", label: "사이드바 + 탑바", sidebar: "left", topbar: true },
+  { id: "dual-sidebar", label: "양쪽 사이드바", sidebar: "dual", topbar: true },
+  { id: "none", label: "레이아웃 없음", sidebar: "none", topbar: false },
+];
+
+export function LayoutBuilder() {
+  const [presetId, setPresetId] = useState<string>("sidebar-topbar");
+  const [logoUrl, setLogoUrl] = useState<string | null>(null);
+  const [logoKind, setLogoKind] = useState<LogoKind>("symbol");
+  const [serviceName, setServiceName] = useState("Acme");
+
+  const preset =
+    LAYOUT_PRESETS.find((p) => p.id === presetId) ?? LAYOUT_PRESETS[0];
+
+  const handleFile = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const url = URL.createObjectURL(file);
+    setLogoUrl(url);
+  };
+
+  return (
+    <div className={styles.layoutGrid}>
+      <div className={styles.layoutOptions}>
+        <div className={styles.optionGroup}>
+          <span className={styles.optionGroupLabel}>레이아웃 프리셋</span>
+          <div className={styles.optionList}>
+            {LAYOUT_PRESETS.map((p) => (
+              <button
+                key={p.id}
+                type="button"
+                className={styles.optionItem}
+                data-active={p.id === presetId || undefined}
+                onClick={() => setPresetId(p.id)}
+              >
+                {p.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className={styles.optionGroup}>
+          <span className={styles.optionGroupLabel}>로고 업로드</span>
+          <input
+            type="file"
+            accept="image/*"
+            onChange={handleFile}
+            className={styles.fieldControl}
+          />
+        </div>
+
+        <div className={styles.optionGroup}>
+          <span className={styles.optionGroupLabel}>로고 타입</span>
+          <div className={styles.optionList}>
+            <button
+              type="button"
+              className={styles.optionItem}
+              data-active={logoKind === "symbol" || undefined}
+              onClick={() => setLogoKind("symbol")}
+            >
+              심볼 (파비콘 + 서비스명)
+            </button>
+            <button
+              type="button"
+              className={styles.optionItem}
+              data-active={logoKind === "combination" || undefined}
+              onClick={() => setLogoKind("combination")}
+            >
+              콤비네이션 (로고 이미지만)
+            </button>
+          </div>
+        </div>
+
+        {logoKind === "symbol" && (
+          <div className={styles.field}>
+            <label className={styles.fieldLabel} htmlFor="onboarding-service">
+              서비스 이름
+            </label>
+            <input
+              id="onboarding-service"
+              type="text"
+              value={serviceName}
+              onChange={(e) => setServiceName(e.target.value)}
+              className={styles.fieldControl}
+            />
+          </div>
+        )}
+      </div>
+
+      <div
+        className={styles.mini}
+        data-sidebar={preset.sidebar}
+        data-topbar={preset.topbar}
+      >
+        {preset.topbar && (
+          <div className={styles.miniTopbar}>
+            {logoUrl && logoKind === "symbol" && (
+              <>
+                <img
+                  src={logoUrl}
+                  alt=""
+                  className={styles.miniBrandSymbol}
+                />
+                <span className={styles.miniBrand}>{serviceName}</span>
+              </>
+            )}
+            {logoUrl && logoKind === "combination" && (
+              <img src={logoUrl} alt={serviceName} className={styles.miniBrandImg} />
+            )}
+            {!logoUrl && <span className={styles.miniBrand}>{serviceName}</span>}
+          </div>
+        )}
+
+        {(preset.sidebar === "left" || preset.sidebar === "dual") && (
+          <aside className={styles.miniSidebar}>
+            <span className={styles.miniNavItem} data-active>
+              Inbox
+            </span>
+            <span className={styles.miniNavItem}>Issues</span>
+            <span className={styles.miniNavItem}>Projects</span>
+            <span className={styles.miniNavItem}>Docs</span>
+          </aside>
+        )}
+
+        <div className={styles.miniBody}>
+          {preset.sidebar === "none" && preset.topbar === false
+            ? "레이아웃 없음 — 순수 콘텐츠"
+            : "여기에 페이지 콘텐츠가 위치합니다."}
+        </div>
+
+        {preset.sidebar === "dual" && (
+          <aside className={`${styles.miniSidebar} ${styles.miniSidebarRight}`}>
+            <span className={styles.miniNavItem}>Details</span>
+            <span className={styles.miniNavItem}>Activity</span>
+          </aside>
+        )}
+      </div>
+    </div>
+  );
+}