jongsultest 0.1.0

package/src/blocks/Panel.tsx

@@ -0,0 +1,97 @@
+import { Group, Paper as MantinePaper, PaperProps, Text, Title } from "@mantine/core";
+import React, { ReactNode } from "react";
+
+/**
+ *
+ * @param title - 패널 제목
+ * @param totalCount - 내부 데이터 총 개수
+ * @param description - 패널 설명
+ * @param children - 패널 컨텐츠
+ * @param headerRightContent - 패널 헤더 오른쪽 컨텐츠
+ * @param contentBottomPadding - 패널 컨텐츠 하단 패딩 (기본값: 40px)
+ * @param footer - 패널 푸터
+ * @returns 패널 컴포넌트
+ */
+export const Panel = ({
+  title,
+  totalCount,
+  description,
+  children,
+  headerRightContent,
+  contentBottomPadding = 40,
+  footer,
+  ...props
+}: PaperProps & {
+  title?: string | React.ReactNode;
+  totalCount?: number;
+  description?: string;
+  children?: React.ReactNode;
+  headerRightContent?: React.ReactNode;
+  contentBottomPadding?: number;
+  footer?: React.ReactNode;
+}) => {
+  return (
+    <MantinePaper bg="white" radius="lg" shadow="xs" className="border-default border-1" {...props}>
+      {/* 헤더 영역 */}
+      {title && (
+        <div className="px-[30px]">
+          <Group justify="space-between" align="center" gap="xs" py="24">
+            {/* title */}
+            <Group align="baseline" gap="10">
+              <Title c="blue" order={2} fz={20} fw={700} lh="2">
+                {title}
+              </Title>
+              {totalCount && (
+                <Text c="blue" size="20" lh="1">
+                  {totalCount}
+                </Text>
+              )}
+            </Group>
+
+            {/* headerRightContent */}
+            {headerRightContent}
+          </Group>
+
+          {/* description */}
+          {description && (
+            <Text c="#666" fz={14} fw={400} lh="160%" mb="24">
+              {description}
+            </Text>
+          )}
+        </div>
+      )}
+
+      {/* 컨텐츠 영역 */}
+      <div className="px-[30px]" style={{ paddingBottom: `${contentBottomPadding}px` }}>
+        {children}
+      </div>
+
+      {/* 푸터 영역 */}
+      {footer && <div className="border-gray-2 border-t px-[30px] py-5">{footer}</div>}
+    </MantinePaper>
+  );
+};
+
+// ============================================
+// Sub Component
+// ============================================
+/**
+ *
+ * @param title - 섹션 제목 (스타일은 패널 제목과 동일)
+ * @param children - 섹션 컨텐츠
+ * @returns
+ */
+function Section({ title, children }: { title?: string; children: ReactNode }) {
+  return (
+    <div className="mb-6 last:mb-0">
+      {title && (
+        <Text c="blue" fz={20} fw={700} lh="2" py="24">
+          {title}
+        </Text>
+      )}
+      {children}
+    </div>
+  );
+}
+
+Panel.Section = Section;

package/src/blocks/SectionGroupWithTitle.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Stack, TextInput } from "@mantine/core";
+import SectionGroupWithTitle from "./SectionGroupWithTitle";
+
+const meta: Meta<typeof SectionGroupWithTitle> = {
+  title: "Blocks/SectionGroupWithTitle",
+  component: SectionGroupWithTitle,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof SectionGroupWithTitle>;
+
+export const Default: Story = {
+  args: {
+    title: "설정",
+    children: (
+      <Stack gap="sm">
+        <TextInput label="이름" placeholder="이름을 입력하세요" />
+        <TextInput label="전화번호" placeholder="전화번호를 입력하세요" />
+      </Stack>
+    ),
+  },
+};

package/src/blocks/SectionGroupWithTitle.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Box, Text } from "@mantine/core";
+import { Divider } from "@mantine/core";
+
+interface Props {
+  title: string;
+  children: React.ReactNode;
+}
+const SectionGroupWithTitle = ({ title, children }: Props) => {
+  return (
+    <Box>
+      <Text fw={600} mb="sm">
+        {title}
+      </Text>
+      <Divider mb="xs" />
+      {children}
+    </Box>
+  );
+};
+
+export default SectionGroupWithTitle;

package/src/blocks/Table.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { ReactNode } from "react";
+import { Table as MantineTable, Text, Box } from "@mantine/core";
+
+// ============================================
+// Types
+// ============================================
+
+export interface TableColumn<T> {
+  id: string;
+  header: string;
+  accessor?: keyof T;
+  render?: (row: T, index: number) => ReactNode;
+  align?: "left" | "center" | "right";
+  width?: number | string;
+}
+
+export interface TableProps<T> {
+  columns: TableColumn<T>[];
+  data: T[];
+  rowKey?: keyof T | ((row: T, index: number) => string);
+  emptyMessage?: string;
+  striped?: boolean;
+  highlightOnHover?: boolean;
+  onRowClick?: (row: T, index: number) => void;
+}
+
+// ============================================
+// Component
+// ============================================
+
+export function Table<T>({
+  columns,
+  data,
+  rowKey,
+  emptyMessage = "데이터가 없습니다",
+  highlightOnHover = false,
+  onRowClick,
+}: TableProps<T>) {
+  const getRowKey = (row: T, index: number): string => {
+    if (!rowKey) return String(index);
+    if (typeof rowKey === "function") return rowKey(row, index);
+    return String(row[rowKey]);
+  };
+
+  const getCellValue = (row: T, column: TableColumn<T>, index: number): ReactNode => {
+    if (column.render) {
+      return column.render(row, index);
+    }
+    if (column.accessor) {
+      return row[column.accessor] as ReactNode;
+    }
+    return null;
+  };
+
+  if (data.length === 0) {
+    return (
+      <Box py="xl" style={{ textAlign: "center" }}>
+        <Text c="dimmed">{emptyMessage}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <MantineTable
+      highlightOnHover={highlightOnHover}
+      verticalSpacing="md"
+      classNames={{
+        table: "!border-default !overflow-hidden !border-separate",
+        thead: "!bg-gray-0",
+        th: "!text-center !border-b !border-default",
+        td: "!text-center !border-b !border-default",
+      }}
+    >
+      <MantineTable.Thead>
+        <MantineTable.Tr>
+          {columns.map((column) => (
+            <MantineTable.Th
+              key={column.id}
+              style={{
+                textAlign: column.align || "left",
+                width: column.width,
+              }}
+            >
+              {column.header}
+            </MantineTable.Th>
+          ))}
+        </MantineTable.Tr>
+      </MantineTable.Thead>
+      <MantineTable.Tbody>
+        {data.map((row, index) => (
+          <MantineTable.Tr
+            key={getRowKey(row, index)}
+            onClick={() => onRowClick?.(row, index)}
+            style={{ cursor: onRowClick ? "pointer" : undefined }}
+          >
+            {columns.map((column) => (
+              <MantineTable.Td
+                key={column.id}
+                style={{
+                  textAlign: column.align || "left",
+                  width: column.width,
+                }}
+              >
+                {getCellValue(row, column, index)}
+              </MantineTable.Td>
+            ))}
+          </MantineTable.Tr>
+        ))}
+      </MantineTable.Tbody>
+    </MantineTable>
+  );
+}

package/src/blocks/TagInput.stories.tsx

@@ -0,0 +1,74 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { TagInput, TagInputItem, TagInputProps } from "./TagInput";
+
+const meta: Meta<typeof TagInput> = {
+  title: "Blocks/TagInput",
+  component: TagInput,
+  tags: ["autodocs"],
+  args: {
+    placeholder: "옵션 입력 (쉼표로 구분)",
+    badgeVariant: "filled",
+    badgeColor: "blue",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TagInput>;
+
+function TagInputWithState({
+  initialItems = [],
+  dedup,
+  ...props
+}: TagInputProps & { initialItems?: TagInputItem[]; dedup?: boolean }) {
+  const [items, setItems] = useState<TagInputItem[]>(initialItems);
+
+  return (
+    <TagInput
+      {...props}
+      items={items}
+      onAdd={(values) => {
+        const newItems = values.map((v) => ({ id: dedup ? v : crypto.randomUUID(), label: v }));
+        setItems((prev) => {
+          if (!dedup) return [...prev, ...newItems];
+          const existing = new Set(prev.map((i) => i.id));
+          return [...prev, ...newItems.filter((i) => !existing.has(i.id))];
+        });
+      }}
+      onRemove={(id) => setItems((prev) => prev.filter((item) => item.id !== id))}
+    />
+  );
+}
+
+export const Default: Story = {
+  render: (args) => (
+    <TagInputWithState
+      {...args}
+      initialItems={[
+        { id: "1", label: "SNS" },
+        { id: "2", label: "친구추천" },
+        { id: "3", label: "기타" },
+      ]}
+    />
+  ),
+};
+
+export const Empty: Story = {
+  render: (args) => <TagInputWithState {...args} placeholder="시간 입력 (예: 10:00, 11:00, 14:00)" dedup />,
+};
+
+export const LightVariant: Story = {
+  render: (args) => (
+    <TagInputWithState
+      {...args}
+      placeholder="시간 입력 (예: 10:00, 11:00, 14:00)"
+      badgeVariant="light"
+      dedup
+      initialItems={[
+        { id: "10:00", label: "10:00" },
+        { id: "11:00", label: "11:00" },
+        { id: "14:00", label: "14:00" },
+      ]}
+    />
+  ),
+};

package/src/blocks/TagInput.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { Badge, Button, InputText } from "../atoms";
+import { ActionIcon, Box, Group } from "@mantine/core";
+import { IconPlus, IconX } from "@tabler/icons-react";
+import { useState } from "react";
+
+export interface TagInputItem {
+  id: string;
+  label: string;
+}
+
+export interface TagInputProps {
+  label?: string;
+  placeholder?: string;
+  items: TagInputItem[];
+  onAdd: (values: string[]) => void;
+  onRemove: (id: string) => void;
+  badgeVariant?: "filled" | "light";
+  badgeColor?: string;
+}
+
+export function TagInput({
+  label,
+  placeholder,
+  items,
+  onAdd,
+  onRemove,
+  badgeVariant = "filled",
+  badgeColor = "blue",
+}: TagInputProps) {
+  const [inputValue, setInputValue] = useState("");
+
+  const handleAdd = () => {
+    if (!inputValue.trim()) return;
+    const values = inputValue
+      .split(",")
+      .map((s) => s.trim())
+      .filter((s) => s.length > 0);
+    onAdd(values);
+    setInputValue("");
+  };
+
+  return (
+    <Box>
+      <InputText
+        size="xs"
+        label={label}
+        placeholder={placeholder}
+        value={inputValue}
+        onChange={(e) => setInputValue(e.currentTarget.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && !e.nativeEvent.isComposing) {
+            e.preventDefault();
+            handleAdd();
+          }
+        }}
+        rightSection={
+          <Button size="xs" variant="light" onClick={handleAdd}>
+            <IconPlus size={10} />
+          </Button>
+        }
+        rightSectionWidth={27}
+        mb="xs"
+      />
+      {items.length > 0 && (
+        <Group gap={4}>
+          {items.map((item) => (
+            <Badge
+              key={item.id}
+              size="sm"
+              variant={badgeVariant}
+              color={badgeColor}
+              h="24"
+              rightSection={
+                <ActionIcon
+                  size={14}
+                  variant="transparent"
+                  c={badgeVariant === "light" ? "gray" : "white"}
+                  onClick={() => onRemove(item.id)}
+                >
+                  <IconX size={10} />
+                </ActionIcon>
+              }
+            >
+              {item.label}
+            </Badge>
+          ))}
+        </Group>
+      )}
+    </Box>
+  );
+}

package/src/blocks/index.ts

@@ -0,0 +1,25 @@
+export { Table } from "./Table";
+export type { TableColumn, TableProps } from "./Table";
+export { Pagination } from "./Pagination";
+export type { PaginationProps } from "./Pagination";
+export { Accordion } from "./Accordion";
+export type { AccordionProps, AccordionItemData } from "./Accordion";
+export { AccordionDraggable } from "./AccordionDraggable";
+export type { AccordionDraggableProps, AccordionDraggableItem } from "./AccordionDraggable";
+export { NavigationBanner } from "./NavigationBanner";
+export type { NavigationBannerItem, NavigationBannerProps } from "./NavigationBanner";
+export { ImageUpload } from "./ImageUpload";
+export { PageTitle } from "./PageTitle";
+export { PageLoading } from "./PageLoading";
+export { Panel } from "./Panel";
+export { default as BoxContainer } from "./BoxContainer";
+export { EditorLayout } from "./EditorLayout";
+export { default as Modal } from "./Modal";
+export { default as ModalDeleteConfirm } from "./ModalDeleteConfirm";
+export { ModalTokenExpired } from "./ModalTokenExpired";
+export { default as DataTable } from "./DataTable";
+export type { Column } from "./DataTable";
+export { default as PageHeader } from "./PageHeader";
+export { default as SectionGroupWithTitle } from "./SectionGroupWithTitle";
+export { TagInput } from "./TagInput";
+export type { TagInputProps, TagInputItem } from "./TagInput";

package/src/index.ts

@@ -0,0 +1,51 @@
+// Atoms
+export { Button } from "./atoms/Button";
+export { InputText } from "./atoms/InputText";
+export { InputPassword } from "./atoms/InputPassword";
+export { InputNumber } from "./atoms/InputNumber";
+export { InputColor } from "./atoms/InputColor";
+export { InputFile } from "./atoms/InputFile";
+export { InputDatePicker } from "./atoms/InputDatePicker";
+export { InputTextarea } from "./atoms/InputTextarea";
+export { InputRadio } from "./atoms/InputRadio";
+export { InputSwitch } from "./atoms/InputSwitch";
+export { InputSwitchInTable } from "./atoms/InputSwitchInTable";
+export { InputSegmentedControl } from "./atoms/InputSegmentedControl";
+export { ComboboxSelect } from "./atoms/ComboboxSelect";
+export { ComboboxAutocomplete } from "./atoms/ComboboxAutocomplete";
+export { DateTimePicker } from "./atoms/DateTimePicker";
+export { Badge } from "./atoms/Badge";
+export { IconButton } from "./atoms/IconButton";
+export { PlusIcon, TrashIcon, GripVerticalIcon, ChevronDownIcon } from "./atoms/Icon";
+export type { IconSvgProps } from "./atoms/Icon";
+export { inputClassNames } from "./atoms/inputClassNames";
+
+// Blocks
+export { Table } from "./blocks/Table";
+export type { TableColumn, TableProps } from "./blocks/Table";
+export { Pagination } from "./blocks/Pagination";
+export type { PaginationProps } from "./blocks/Pagination";
+export { Accordion } from "./blocks/Accordion";
+export type { AccordionProps, AccordionItemData } from "./blocks/Accordion";
+export { AccordionDraggable } from "./blocks/AccordionDraggable";
+export type { AccordionDraggableProps, AccordionDraggableItem } from "./blocks/AccordionDraggable";
+export { NavigationBanner } from "./blocks/NavigationBanner";
+export type { NavigationBannerItem, NavigationBannerProps } from "./blocks/NavigationBanner";
+export { ImageUpload } from "./blocks/ImageUpload";
+export { PageTitle } from "./blocks/PageTitle";
+export { PageLoading } from "./blocks/PageLoading";
+export { Panel } from "./blocks/Panel";
+export { default as BoxContainer } from "./blocks/BoxContainer";
+export { EditorLayout } from "./blocks/EditorLayout";
+export { default as Modal } from "./blocks/Modal";
+export { default as ModalDeleteConfirm } from "./blocks/ModalDeleteConfirm";
+export { ModalTokenExpired } from "./blocks/ModalTokenExpired";
+export { default as DataTable } from "./blocks/DataTable";
+export type { Column } from "./blocks/DataTable";
+export { default as PageHeader } from "./blocks/PageHeader";
+export { default as SectionGroupWithTitle } from "./blocks/SectionGroupWithTitle";
+export { TagInput } from "./blocks/TagInput";
+export type { TagInputProps, TagInputItem } from "./blocks/TagInput";
+
+// Utils
+export { readFileAsDataURL } from "./utils/file";

package/src/utils/file.ts

@@ -0,0 +1,7 @@
+export function readFileAsDataURL(file: File): Promise<string> {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result as string);
+    reader.readAsDataURL(file);
+  });
+}