@conscience-technology/ctds 0.0.0-stage → 0.1.0

package/assets/components/AttachmentThumb/AttachmentThumb.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import type { CSSProperties, HTMLAttributes, MouseEvent } from "react";
+import { ImageSquare as PhImageSquare, X as PhX } from "@phosphor-icons/react";
+import styles from "./AttachmentThumb.module.css";
+
+export type AttachmentThumbSize = "sm" | "md" | "lg";
+
+export interface AttachmentThumbProps
+  extends Omit<HTMLAttributes<HTMLSpanElement>, "children" | "onError"> {
+  /** 이미지 소스. 없으면 image glyph placeholder (블루톤 L/D pair). */
+  src?: string;
+  alt?: string;
+  /** sm=32 / md=40 / lg=56. 기본 md. */
+  size?: AttachmentThumbSize;
+  /** 로딩 중 pulse. src 디코딩 전·업로드 처리 중. */
+  loading?: boolean;
+  /** 지정 시 hover에서 코너에 X 노출. */
+  onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+
+const sizeClass: Record<AttachmentThumbSize, string> = {
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+  lg: styles.sizeLg,
+};
+
+/* placeholder 블루톤 L/D pair — FileIcon 제너릭 그룹과 같은 패턴.
+   브랜드 자산 범주 — CSS 토큰으로 추상화 X. inline style로 주입해 CSS 린터 범위 밖. */
+const PLACEHOLDER_VARS = {
+  "--at-ph-bg-light": "#D5E8FD",
+  "--at-ph-fg-light": "#2D7FD3",
+  "--at-ph-bg-dark": "#1E3A5F",
+  "--at-ph-fg-dark": "#C5DFF8",
+} as CSSProperties;
+
+export function AttachmentThumb({
+  src,
+  alt = "",
+  size = "md",
+  loading = false,
+  onRemove,
+  className,
+  style,
+  ...rest
+}: AttachmentThumbProps) {
+  const isPlaceholder = !loading && !src;
+
+  const cls = [
+    styles.root,
+    sizeClass[size],
+    loading
+      ? styles.loading
+      : src
+      ? styles.hasImage
+      : styles.placeholder,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const mergedStyle: CSSProperties = isPlaceholder
+    ? { ...PLACEHOLDER_VARS, ...style }
+    : style ?? {};
+
+  return (
+    <span
+      className={cls}
+      style={mergedStyle}
+      data-removable={onRemove ? "" : undefined}
+      {...rest}
+    >
+      {loading ? null : src ? (
+        <img src={src} alt={alt} className={styles.img} />
+      ) : (
+        <PhImageSquare className={styles.glyph} weight="regular" aria-hidden />
+      )}
+
+      {onRemove && !loading ? (
+        <button
+          type="button"
+          className={styles.removeBtn}
+          onClick={onRemove}
+          aria-label="첨부 제거"
+        >
+          <PhX className={styles.removeIcon} weight="bold" />
+        </button>
+      ) : null}
+    </span>
+  );
+}

package/assets/components/AttachmentThumb/index.ts

@@ -0,0 +1,2 @@
+export { AttachmentThumb } from "./AttachmentThumb";
+export type { AttachmentThumbProps, AttachmentThumbSize } from "./AttachmentThumb";

package/assets/components/Avatar/Avatar.module.css

@@ -0,0 +1,167 @@
+/* Avatar ───────────────────────────────────────────────────────
+   사람/팀/봇을 시각화하는 라벨.
+   이미지 > 이니셜 > 아이콘 순으로 폴백(안쪽 내용만 바뀌고 컨테이너는 동일).
+
+   shape prop:
+   - circle(기본): 사람·개인 계정. 항상 --radius-full.
+   - rounded: 팀·조직·봇·서비스. size별로 radius 스왑(Shape 축을 밟음).
+   두 모양이 나란히 있으면 "사람 vs 아닌 것"이 한눈에 구분됨. */
+.root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background: var(--_avatar-bg, var(--bg-muted));
+  color: var(--_avatar-fg, var(--fg));
+  font-family: var(--label-font);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+  letter-spacing: 0;   /* 이니셜은 tracking 0 — narrow letter 조합에서 시각 균형 */
+  user-select: none;
+}
+
+/* Shape ─────────────────────────────────────────────────── */
+.circle { border-radius: var(--radius-full); }
+
+/* rounded는 size에 맞춰 radius 크기가 자연스럽게 커짐.
+   xs/sm은 컨테이너 자체가 작아 xs radius, md는 sm, lg는 md, xl은 lg. */
+.rounded.xs { border-radius: var(--radius-xs); }
+.rounded.sm { border-radius: var(--radius-sm); }
+.rounded.md { border-radius: var(--radius-md); }
+.rounded.lg { border-radius: var(--radius-lg); }
+.rounded.xl { border-radius: var(--radius-xl); }
+
+/* Sizes ────────────────────────────────────────────────────
+   space-* 스케일에 붙여 다른 컨트롤과 정렬 유지.
+   xs는 Chip 내부용, sm/md는 리스트/일반, lg는 프로필 헤더 등. */
+/* 이니셜 폰트는 컨테이너 폭의 40% — 사이즈가 바뀌어도 시각 비율 유지. */
+.xs {
+  width: var(--space-4);                /* 16 */
+  height: var(--space-4);
+  font-size: calc(var(--space-4) * 0.5);   /* xs만 최소 가독성 위해 살짝 크게 */
+}
+.sm {
+  width: var(--space-6);                /* 24 */
+  height: var(--space-6);
+  font-size: calc(var(--space-6) * 0.48);
+}
+.md {
+  width: var(--space-8);                /* 32 */
+  height: var(--space-8);
+  font-size: calc(var(--space-8) * 0.48);
+}
+.lg {
+  width: var(--space-12);               /* 48 */
+  height: var(--space-12);
+  font-size: calc(var(--space-12) * 0.48);
+}
+.xl {
+  width: var(--space-24);               /* 96 */
+  height: var(--space-24);
+  font-size: calc(var(--space-24) * 0.48);
+}
+
+/* Content slots ──────────────────────────────────────────── */
+.root {
+  position: relative;
+  overflow: visible;  /* status 뱃지가 밖으로 삐져나올 수 있게 */
+}
+/* 내부 이미지 모서리는 shape를 따라야 하므로 안쪽 clip은 image에만 적용 */
+.image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  opacity: 0;
+  border-radius: inherit;   /* root의 shape를 그대로 따라감 */
+}
+.image[data-loaded="true"] { opacity: 1; }
+.initials {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fg-muted);
+}
+.icon > svg {
+  display: block;
+}
+
+/* Status badge ───────────────────────────────────────────────
+   접속 상태 표시용 작은 동그라미. 우하단 고정.
+   - online: --success
+   - offline: --fg-muted (톤 다운)
+   테두리는 --bg 색 ring으로, 아바타와 시각적으로 분리.
+   크기·offset은 각 size별 공간 토큰으로 매핑. */
+.status {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: var(--_status-size, var(--space-2));
+  height: var(--_status-size, var(--space-2));
+  border-radius: var(--radius-full);
+  box-shadow: 0 0 0 var(--_status-ring, var(--space-0_5)) var(--bg);
+  pointer-events: none;
+}
+.status[data-status="online"]  { background: var(--success); }
+.status[data-status="offline"] { background: var(--fg-disabled); }
+
+/* size별 뱃지 지름 — 컨테이너의 ~25~30% 범위.
+   ring은 작은 사이즈에선 hairline, 큰 사이즈에선 공간 토큰. */
+.xs .status { --_status-size: var(--space-1_5); --_status-ring: var(--hairline); }  /* 6 */
+.sm .status { --_status-size: var(--space-2);   --_status-ring: var(--hairline); }  /* 8 */
+.md .status { --_status-size: var(--space-2_5); --_status-ring: var(--space-0_5); } /* 10 */
+.lg .status { --_status-size: var(--space-3);   --_status-ring: var(--space-0_5); } /* 12 */
+.xl .status { --_status-size: var(--space-6);   --_status-ring: var(--space-1); }   /* 24 */
+
+/* rounded shape는 모서리가 각지므로 뱃지가 모서리 바깥으로 살짝 나가도록 */
+.rounded .status {
+  right: calc(var(--_status-size) * -0.2);
+  bottom: calc(var(--_status-size) * -0.2);
+}
+
+/* ── AvatarGroup ────────────────────────────────────────────
+   가로 겹침. 왼쪽 아바타가 앞에 오도록 z-index 역순. bg 링으로 경계 분리.
+   겹침 offset은 각 아바타 폭의 ~30%. size별로 자동 스케일. */
+.group {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  isolation: isolate;
+  width: fit-content;
+}
+
+.groupItem {
+  position: relative;
+  z-index: var(--stack-order, 0);
+  box-shadow: 0 0 0 var(--space-0_5) var(--bg);
+}
+
+.groupItem + .groupItem {
+  margin-left: calc(var(--space-1) * -1);
+}
+
+/* size별 overlap 강도 조정 */
+.group.xs .groupItem + .groupItem { margin-left: calc(var(--space-1) * -1); }   /* -4 */
+.group.sm .groupItem + .groupItem { margin-left: calc(var(--space-1_5) * -1); } /* -6 */
+.group.md .groupItem + .groupItem { margin-left: calc(var(--space-2) * -1); }   /* -8 */
+.group.lg .groupItem + .groupItem { margin-left: calc(var(--space-3) * -1); }   /* -12 */
+.group.xl .groupItem + .groupItem { margin-left: calc(var(--space-6) * -1); }   /* -24 */
+
+.overflow {
+  background: var(--bg-muted);
+  color: var(--fg-subtle);
+  font-weight: var(--font-weight-medium);
+}
+.overflow.xs { font-size: calc(var(--space-4)  * 0.42); }
+.overflow.sm { font-size: calc(var(--space-6)  * 0.36); }
+.overflow.md { font-size: calc(var(--space-8)  * 0.36); }
+.overflow.lg { font-size: calc(var(--space-12) * 0.36); }
+.overflow.xl { font-size: calc(var(--space-24) * 0.36); }

package/assets/components/Avatar/Avatar.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useState,
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+
+import { Icon } from "../Icon";
+import styles from "./Avatar.module.css";
+
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type AvatarShape = "circle" | "rounded";
+export type AvatarStatus = "online" | "offline";
+
+export type AvatarProps = HTMLAttributes<HTMLSpanElement> & {
+  size?: AvatarSize;
+  /** circle(기본) — 사람·개인 계정. rounded — 팀·조직·봇·서비스 아이덴티티. */
+  shape?: AvatarShape;
+  /** 이미지 URL. 로드 실패 시 이니셜 또는 아이콘으로 폴백. */
+  src?: string;
+  /** 접근성 대체 텍스트. 이미지 alt이자 스크린리더 라벨. */
+  alt?: string;
+  /** 이름 문자열. src 없으면 여기서 이니셜 추출. */
+  name?: string;
+  /** 이니셜을 직접 지정. name보다 우선. */
+  initials?: string;
+  /** 이미지·이니셜 대신 아이콘. */
+  icon?: ReactNode;
+  /** 접속 상태 뱃지. online — 접속중, offline — 미접속. 미지정 시 뱃지 없음. */
+  status?: AvatarStatus;
+};
+
+const sizeClass: Record<AvatarSize, string> = {
+  xs: styles.xs,
+  sm: styles.sm,
+  md: styles.md,
+  lg: styles.lg,
+  xl: styles.xl,
+};
+
+const shapeClass: Record<AvatarShape, string> = {
+  circle: styles.circle,
+  rounded: styles.rounded,
+};
+
+const ICON_SIZE: Record<AvatarSize, number> = {
+  xs: 10,
+  sm: 14,
+  md: 18,
+  lg: 24,
+  xl: 40,
+};
+
+/* 이름에서 이니셜 뽑기.
+   - 한글은 첫 글자 1개 ("김희영" → "김")
+   - 영문은 첫 단어의 앞 2글자: 대문자 + 소문자 ("Kim Heeyoung" → "Ki", "AB" → "Ab")
+   - 실패 시 "?" */
+function extractInitials(name: string): string {
+  const trimmed = name.trim();
+  if (!trimmed) return "?";
+  if (/[ㄱ-힣]/.test(trimmed[0])) return trimmed[0];
+  const first = trimmed.split(/\s+/)[0] ?? "";
+  if (!first) return "?";
+  return (first[0].toUpperCase() + (first[1] ?? "").toLowerCase()) || "?";
+}
+
+/* seed 문자열 → 0~7 안정적 해시.
+   같은 이름이면 같은 색, 다른 이름은 되도록 다른 색. */
+const TINT_COUNT = 10;
+function tintIndex(seed: string): number {
+  let h = 0;
+  for (let i = 0; i < seed.length; i++) {
+    h = (h * 31 + seed.charCodeAt(i)) >>> 0;
+  }
+  return h % TINT_COUNT;
+}
+
+function sizedIcon(node: ReactNode, size: number): ReactNode {
+  if (!isValidElement(node)) return node;
+  const el = node as ReactElement<{ size?: number | string }>;
+  if (el.props.size !== undefined) return el;
+  return cloneElement(el, { size });
+}
+
+const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
+  (
+    { className, size = "md", shape = "circle", src, alt, name, initials, icon, status, style, ...rest },
+    ref,
+  ) => {
+    /* 이미지는 로드 완료 전까진 감추고 이니셜/아이콘을 아래에 깔아둔다.
+       onError로 실패 감지도 하지만, 드물게 발동 안 하는 케이스(DNS 실패 등)에 대비해
+       "성공했을 때만 이미지 표시" 전략으로 폴백 UI가 항상 안전. */
+    const [imgLoaded, setImgLoaded] = useState(false);
+    const [imgFailed, setImgFailed] = useState(false);
+
+    const cls = [styles.root, sizeClass[size], shapeClass[shape], className ?? ""]
+      .filter(Boolean)
+      .join(" ");
+
+    const hasUsableImage = src && !imgFailed;
+    const resolvedInitials = initials ?? (name ? extractInitials(name) : undefined);
+    const ariaLabel = alt ?? name;
+
+    const tintSeed = resolvedInitials
+      ? (name ?? initials ?? resolvedInitials)
+      : undefined;
+    const tintStyle: React.CSSProperties | undefined = tintSeed
+      ? {
+          ["--_avatar-bg" as string]: `var(--avatar-tint-${tintIndex(tintSeed)}-bg)`,
+          ["--_avatar-fg" as string]: `var(--avatar-tint-${tintIndex(tintSeed)}-fg)`,
+        }
+      : undefined;
+
+    return (
+      <span
+        ref={ref}
+        className={cls}
+        role="img"
+        aria-label={ariaLabel}
+        style={{ ...tintStyle, ...style }}
+        {...rest}
+      >
+        {resolvedInitials ? (
+          <span className={styles.initials} aria-hidden>
+            {resolvedInitials}
+          </span>
+        ) : icon ? (
+          <span className={styles.icon} aria-hidden>
+            {sizedIcon(icon, ICON_SIZE[size])}
+          </span>
+        ) : (
+          <span className={styles.icon} aria-hidden>
+            <Icon name="user" size={ICON_SIZE[size]} />
+          </span>
+        )}
+        {hasUsableImage && (
+          <img
+            className={styles.image}
+            src={src}
+            alt=""
+            data-loaded={imgLoaded ? "true" : "false"}
+            onLoad={() => setImgLoaded(true)}
+            onError={() => setImgFailed(true)}
+          />
+        )}
+        {status && (
+          <span
+            className={styles.status}
+            data-status={status}
+            aria-label={status === "online" ? "접속중" : "미접속"}
+          />
+        )}
+      </span>
+    );
+  },
+);
+
+Avatar.displayName = "Avatar";
+
+/* ── AvatarGroup ──────────────────────────────────────────
+   여러 Avatar를 겹쳐 표시. max로 잘라내고 나머지는 "+N" 카운터로. */
+export type AvatarGroupProps = HTMLAttributes<HTMLSpanElement> & {
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  /** 넘치면 카운터로 접힘. */
+  max?: number;
+  children: ReactNode;
+};
+
+const AvatarGroup = forwardRef<HTMLSpanElement, AvatarGroupProps>(
+  ({ className, size = "md", shape = "circle", max, children, ...rest }, ref) => {
+    const all = Children.toArray(children).filter(isValidElement) as ReactElement<AvatarProps>[];
+    const visible = max !== undefined ? all.slice(0, max) : all;
+    const overflow = max !== undefined ? all.length - visible.length : 0;
+
+    const cls = [styles.group, sizeClass[size], className ?? ""]
+      .filter(Boolean)
+      .join(" ");
+
+    const total = visible.length + (overflow > 0 ? 1 : 0);
+
+    return (
+      <span ref={ref} className={cls} {...rest}>
+        {visible.map((child, i) =>
+          cloneElement(child, {
+            key: child.key ?? i,
+            size,
+            shape,
+            className: [styles.groupItem, child.props.className ?? ""].filter(Boolean).join(" "),
+            style: {
+              ...(child.props.style ?? {}),
+              ["--stack-order" as string]: total - i,
+            },
+          }),
+        )}
+        {overflow > 0 && (
+          <span
+            className={[
+              styles.root,
+              sizeClass[size],
+              shapeClass[shape],
+              styles.groupItem,
+              styles.overflow,
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            role="img"
+            aria-label={`외 ${overflow}명`}
+          >
+            <span className={styles.initials} aria-hidden>
+              +{overflow}
+            </span>
+          </span>
+        )}
+      </span>
+    );
+  },
+);
+
+AvatarGroup.displayName = "AvatarGroup";
+
+export { Avatar, AvatarGroup };

package/assets/components/Avatar/index.ts

@@ -0,0 +1,2 @@
+export { Avatar, AvatarGroup } from "./Avatar";
+export type { AvatarProps, AvatarGroupProps, AvatarSize, AvatarShape, AvatarStatus } from "./Avatar";

package/assets/components/AvatarUpload/AvatarUpload.module.css

@@ -0,0 +1,130 @@
+/* AvatarUpload ────────────────────────────────────────────────
+   Avatar를 감싸는 폼 컨트롤. 표시 로직은 Avatar에 위임하고,
+   여기선 파일 선택·삭제 인터랙션과 오버레이 UI만 담당.
+
+   구조: <div>
+           <button.trigger>           ← 클릭 시 <input type=file>
+             <Avatar />
+             <span.overlay />         ← hover 시 하단에 카메라
+           </button>
+           <button.remove />          ← src 있을 때만, 우상단 X
+           <input type=file .input /> ← 시각 숨김
+         </div> */
+.root {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.trigger {
+  position: relative;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  overflow: hidden;
+  transition:
+    box-shadow var(--duration-fast) var(--ease-out);
+}
+/* trigger는 안쪽 Avatar와 border-radius를 맞춰야 focus ring이 정확한 모양으로 감쌈.
+   circle이면 full, rounded면 Avatar와 동일한 size별 radius. */
+.circle .trigger { border-radius: var(--radius-full); }
+.rounded.xs .trigger,
+.rounded.sm .trigger { border-radius: var(--radius-xs); }
+.rounded.md .trigger { border-radius: var(--radius-sm); }
+.rounded.lg .trigger { border-radius: var(--radius-md); }
+.rounded.xl .trigger { border-radius: var(--radius-lg); }
+.trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+}
+.trigger:disabled {
+  cursor: not-allowed;
+}
+
+/* Overlay ─────────────────────────────────────────────────
+   하단 반쪽에만 오버레이. 기본 숨김, hover/focus에서 등장.
+   translateY로 slide-up 애니 — 즉시 등장보다 프로필 사진을 덜 가리는 인상.
+   scrim/scrim-fg 토큰으로 mode 무관 다크 표면. */
+.overlay {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--scrim);
+  color: var(--scrim-fg);
+  opacity: 0;
+  transform: translateY(20%);
+  pointer-events: none;
+  transition:
+    opacity var(--duration-base) var(--ease-out),
+    transform var(--duration-base) var(--ease-out);
+}
+.trigger:hover .overlay,
+.trigger:focus-visible .overlay {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Remove button ───────────────────────────────────────────
+   우상단. X. Avatar 원 바깥으로 살짝 튀어나오게 배치해서
+   "부착된 액션"임을 명확히. z-docked로 오버레이보다 위. */
+.remove {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--fg);
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  transition:
+    border-color var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+  z-index: var(--z-docked);
+}
+.remove:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-sm);
+}
+.remove:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+}
+.remove:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Remove 크기 · offset은 Avatar size별로 스왑. 원 바깥으로 살짝 튀어나오도록. */
+.xs .remove { width: var(--space-3); height: var(--space-3); transform: translate(25%, -25%); }
+.sm .remove { width: var(--space-4); height: var(--space-4); transform: translate(25%, -25%); }
+.md .remove { width: var(--space-4); height: var(--space-4); transform: translate(25%, -25%); }
+.lg .remove { width: var(--space-5); height: var(--space-5); transform: translate(20%, -20%); }
+.xl .remove { width: var(--space-6); height: var(--space-6); transform: translate(15%, -15%); }
+
+/* Hidden native input — 표준 visually-hidden 유틸을 클래스로 인라인 */
+.input {
+  position: absolute;
+  width: var(--space-0_5);   /* 시각 완전 숨김 — 실제 크기는 무의미 */
+  height: var(--space-0_5);
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Disabled ─────────────────────────────────────────────── */
+.disabled .trigger { opacity: 0.5; }
+.disabled .overlay { display: none; }