+
+ ),
+};
diff --git a/src/shared/ui/avatars/avatars.tsx b/src/shared/ui/avatars/avatars.tsx
new file mode 100644
index 0000000..e726703
--- /dev/null
+++ b/src/shared/ui/avatars/avatars.tsx
@@ -0,0 +1,191 @@
+import React from "react";
+// 1. 공통 아이콘 Import 추가
+import { UserSolidIcon } from "../icons";
+
+// ----------------------------------------------------------------------
+// 타입 정의
+// ----------------------------------------------------------------------
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+export type AvatarStatus = "online" | "away" | "busy" | "offline";
+
+export type AvatarProps = {
+ src?: string; // 이미지 URL
+ name?: string; // 이름 (이미지 없을 시 이니셜 추출용)
+ size?: AvatarSize;
+ status?: AvatarStatus;
+ badge?: React.ReactNode; // 코너 뱃지 (숫자, 닷 등)
+ hasBorder?: boolean; // 하얀색 테두리 여부
+ isGrouped?: boolean; // 그룹 내 배치 여부 (테두리 두께 3px 및 z-index 조정을 위함)
+ className?: string;
+ onClick?: () => void;
+};
+
+export type AvatarGroupProps = {
+ avatars: AvatarProps[];
+ maxVisible?: number; // 최대 표시 개수
+ size?: AvatarSize; // 그룹 전체 일괄 사이즈
+ className?: string;
+};
+
+// ----------------------------------------------------------------------
+// 스타일 토큰 (상수)
+// ----------------------------------------------------------------------
+const avatarBaseClasses =
+ "relative inline-flex items-center justify-center rounded-full bg-[color:var(--color-primary-800,#004A9C)] text-white font-bold shadow-[0_2px_8px_rgba(0,0,0,0.08)] flex-shrink-0 select-none";
+
+const avatarSizeClasses: Record
+ {/* 1. 이미지 우선 렌더링 */}
+ {src ? (
+ 
+ ) : /* 2. 이미지가 없으면 이름 이니셜 */
+ name ? (
+ {getInitial(name)}
+ ) : (
+ /* 3. 이름도 없으면 기본 아이콘 */
+
+ );
+};
+
+// Avatar Group Component
+export const AvatarGroup = ({
+ avatars,
+ maxVisible = 4,
+ size = "md",
+ className = "",
+}: AvatarGroupProps): React.ReactElement => {
+ const safeMaxVisible = Math.max(0, maxVisible);
+ const visibleAvatars = avatars.slice(0, safeMaxVisible);
+ const hiddenCount = Math.max(0, avatars.length - safeMaxVisible);
+
+ return (
+ // Gap: -8px (Tailwind -space-x-2)
+
+
+ )}
+
+ {/* 상태 표시기 (우측 하단) */}
+ {status && (
+
+ )}
+
+ {/* 뱃지 (우측 상단 등, badge prop으로 통째로 받음) */}
+ {badge && (
+ {badge}
+ )}
+
+ {visibleAvatars.map((avatarProps, index) => (
+
+ );
+};
diff --git a/src/shared/ui/empty_states/empty-states.stories.tsx b/src/shared/ui/empty_states/empty-states.stories.tsx
new file mode 100644
index 0000000..44e6209
--- /dev/null
+++ b/src/shared/ui/empty_states/empty-states.stories.tsx
@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EmptyState } from "./empty-states";
+
+const meta = {
+ title: "Shared/UI/Empty States",
+ component: EmptyState,
+ parameters: {
+ layout: "padded",
+ componentSubtitle: "데이터가 없거나 에러가 발생했을 때 보여주는 화면",
+ },
+ tags: ["autodocs"],
+ argTypes: {
+ variant: {
+ control: "select",
+ options: [
+ "no-content",
+ "no-results",
+ "no-notifications",
+ "error",
+ "access-denied",
+ "coming-soon",
+ ],
+ description: "사전 정의된 빈 화면 상태 타입",
+ },
+ title: { control: "text", description: "기본 타이틀을 덮어쓸 커스텀 타이틀" },
+ description: { control: "text", description: "기본 설명을 덮어쓸 커스텀 설명" },
+ hasBackground: { control: "boolean", description: "회색 배경 적용 여부" },
+ },
+} satisfies Meta
+
+ ))}
+
+ {/* +N 표시기 */}
+ {hiddenCount > 0 && (
+
+ +{hiddenCount}
+
+ )}
+
+ {/* 1. Illustration */}
+
+ );
+};
diff --git a/src/shared/ui/icons/index.tsx b/src/shared/ui/icons/index.tsx
index 648bd56..40930ba 100644
--- a/src/shared/ui/icons/index.tsx
+++ b/src/shared/ui/icons/index.tsx
@@ -374,3 +374,185 @@ export const LockIcon: React.FC
+ {displayIcon}
+
+
+ {/* 2. 텍스트 영역 (Title & Description) */}
+
+
+
+ {/* 3. Action 버튼 영역 (공용 Button 컴포넌트 사용) */}
+ {(primaryAction || secondaryAction) && (
+ {displayTitle}
+ {displayDescription &&{displayDescription}
} +
+ {primaryAction && (
+
+ )}
+ {secondaryAction && (
+
+ )}
+
+ )}
+
+ {items.map((item) => (
+
+ );
+};
+
+export const ListStates: StoryObj = {
+ render: () =>
+ {/* 체크박스 */}
+ {hasCheckbox && (
+
+ {
+ if (onCheck) {
+ onCheck(id, !isChecked);
+ }
+ }}
+ onClick={(e) => {
+ // 부모 나 
+ )}
+
+ {/* 콘텐츠 영역 */}
+
+ );
+};
+
+// Table Component
+export const Table = ({
+ columns,
+ data,
+ isEmpty = false,
+ hasCheckbox = false,
+ isAllChecked = false,
+ onRowClick,
+ onRowCheck,
+ onCheckAll,
+}: TableProps): React.ReactElement => {
+ return (
+ 에 걸려있는 onClick 이벤트로 버블링되는 것 방지=
+ e.stopPropagation();
+ }}
+ disabled={isDisabled}
+ className="w-4 h-4 cursor-pointer accent-[color:var(--color-primary-800,#004A9C)]"
+ />
+
+ )}
+
+ {/* 썸네일 이미지 */}
+ {imageUrl && (
+
+
+ {title}
+
+ {description && (
+
+ {description}
+
+ )}
+
+
+ {/* 메타 정보 */}
+ {(metaPrimary || metaSecondary) && (
+
+ {metaPrimary && (
+
+ {metaPrimary}
+
+ )}
+ {metaSecondary && (
+
+ {metaSecondary}
+
+ )}
+
+ )}
+
+ {/* 화살표 아이콘 */}
+ {hasArrow && (
+
+
+ )}
+
+ {/* Table Header */}
+
+ );
+};
+ {hasCheckbox && (
+
+
+ {/* Table Body (Empty State) */}
+ {isEmpty || data.length === 0 ? (
+
+ onCheckAll && onCheckAll(e.target.checked)}
+ className="w-4 h-4 cursor-pointer accent-[color:var(--color-primary-800,#004A9C)]"
+ />
+
+ )}
+ {columns.map((col) => (
+
+
+ {col.label}
+
+
+ ))}
+
+
+ ) : (
+ /* Table Body (Rows) */
+
+ {data.map((row) => {
+ const isSelected = !!row.isSelected;
+ const isDisabled = !!row.isDisabled;
+
+ const handleRowClick = () => {
+ if (!isDisabled && onRowClick) onRowClick(row.id);
+ };
+
+ const handleCheckClick = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ if (!isDisabled && onRowCheck) onRowCheck(row.id, !isSelected);
+ };
+
+ return (
+
+ )}
+
+ {hasCheckbox && (
+
+ );
+ })}
+
+ {
+ if (onRowCheck) {
+ onRowCheck(row.id, !isSelected);
+ }
+ }}
+ onClick={(e) => {
+ // 부모 영역의 클릭 이벤트와 중복(버블링)되어 두 번 토글되는 현상 방지
+ e.stopPropagation();
+ }}
+ className="w-4 h-4 cursor-pointer accent-[color:var(--color-primary-800,#004A9C)]"
+ />
+
+ )}
+ {columns.map((col) => (
+
+
+ {row[col.id]}
+
+
+ ))}
+