jongsultest 0.1.0

package/src/blocks/DataTable.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import React, { useState, useMemo, useEffect } from "react";
+import { Paper, Table, Pagination, Box, CSSProperties } from "@mantine/core";
+
+export interface Column<T> {
+  id: string;
+  label: string;
+  minWidth?: number;
+  align?: "left" | "right" | "center";
+  format?: (value: any, row: T) => React.ReactNode;
+  style?: CSSProperties;
+  headerStyle?: CSSProperties;
+}
+
+interface DataTableProps<T> {
+  columns: Column<T>[];
+  data: T[];
+  getRowId: (row: T) => string | number;
+  onRowClick?: (row: T) => void;
+  rowsPerPageOptions?: number[];
+  defaultRowsPerPage?: number;
+  style?: CSSProperties;
+  containerStyle?: CSSProperties;
+  rowStyle?: CSSProperties;
+  emptyMessage?: string;
+}
+
+export default function DataTable<T extends Record<string, any>>({
+  columns,
+  data,
+  getRowId,
+  onRowClick,
+  rowsPerPageOptions = [5, 10, 25, 50],
+  defaultRowsPerPage = 10,
+  style,
+  containerStyle,
+  rowStyle,
+  emptyMessage = "데이터가 없습니다.",
+}: DataTableProps<T>) {
+  const [page, setPage] = useState(1);
+  const [rowsPerPage, setRowsPerPage] = useState(defaultRowsPerPage);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // 페이지네이션된 데이터
+  const paginatedData = useMemo(() => {
+    const startIndex = (page - 1) * rowsPerPage;
+    const endIndex = startIndex + rowsPerPage;
+    return data.slice(startIndex, endIndex);
+  }, [data, page, rowsPerPage]);
+
+  const totalPages = Math.ceil(data.length / rowsPerPage);
+
+  const handleRowClick = (row: T) => {
+    if (onRowClick) {
+      onRowClick(row);
+    }
+  };
+
+  return (
+    <Paper shadow="xs" p="md" mt="md" style={containerStyle}>
+      <Table style={style} highlightOnHover={!!onRowClick}>
+        <Table.Thead>
+          <Table.Tr>
+            {columns.map((column) => (
+              <Table.Th
+                key={column.id}
+                style={{
+                  minWidth: column.minWidth,
+                  fontWeight: "bold",
+                  textAlign: column.align || "left",
+                  ...column.headerStyle,
+                }}
+              >
+                {column.label}
+              </Table.Th>
+            ))}
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {paginatedData.length === 0 ? (
+            <Table.Tr>
+              <Table.Td colSpan={columns.length} style={{ textAlign: "center", padding: "32px" }}>
+                {emptyMessage}
+              </Table.Td>
+            </Table.Tr>
+          ) : (
+            paginatedData.map((row, index) => (
+              <Table.Tr
+                key={getRowId(row)}
+                onClick={() => handleRowClick(row)}
+                style={{
+                  cursor: onRowClick ? "pointer" : "default",
+                  ...rowStyle,
+                }}
+              >
+                {columns.map((column) => {
+                  const value = row[column.id];
+                  return (
+                    <Table.Td
+                      suppressHydrationWarning
+                      key={column.id}
+                      style={{
+                        textAlign: column.align || "left",
+                        ...column.style,
+                      }}
+                    >
+                      {column.id === "no" ? (mounted ? (page - 1) * rowsPerPage + index + 1 : null) : null}
+                      {column.id !== "no" && (column.format ? column.format(value, row) : value)}
+                    </Table.Td>
+                  );
+                })}
+              </Table.Tr>
+            ))
+          )}
+        </Table.Tbody>
+      </Table>
+      <Box mt="md" className="flex justify-end">
+        <Pagination value={page} onChange={setPage} total={totalPages} />
+      </Box>
+    </Paper>
+  );
+}

package/src/blocks/DescriptionRow.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import DescriptionRow from "./DescriptionRow";
+import { Text } from "@mantine/core";
+
+const meta: Meta<typeof DescriptionRow> = {
+  title: "Blocks/DescriptionRow",
+  component: DescriptionRow,
+  tags: ["autodocs"],
+  args: {
+    label: "신청일시",
+    value: <Text>2026-02-26 10:59</Text>,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DescriptionRow>;
+
+export const Default: Story = {
+  render: (args) => (
+    <div className="m-auto w-[300px]">
+      <DescriptionRow {...args} />
+    </div>
+  ),
+};
+
+export const ListWithDescription: Story = {
+  render: () => (
+    <div className="m-auto flex w-[300px] flex-col gap-1">
+      <DescriptionRow label="신청일시" value={<Text>2026-02-26 10:59</Text>} />
+      <DescriptionRow label="신청자" value={<Text>홍길동</Text>} />
+      <DescriptionRow label="연락처" value={<Text>010-1234-5678</Text>} />
+    </div>
+  ),
+};

package/src/blocks/DescriptionRow.tsx

@@ -0,0 +1,22 @@
+import { Box, Group, Text } from "@mantine/core";
+import { ReactNode } from "react";
+
+interface Props {
+  label: string;
+  value: ReactNode;
+}
+
+const DescriptionRow = ({ label, value }: Props) => {
+  return (
+    <Group justify="space-between" py="xs">
+      <Text size="sm" c="dimmed">
+        {label}
+      </Text>
+      <Box fz="sm" fw={500}>
+        {value}
+      </Box>
+    </Group>
+  );
+};
+
+export default DescriptionRow;

package/src/blocks/EditorLayout.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EditorLayout } from "./EditorLayout";
+import { Box, NavLink, Paper, Stack, Text, TextInput } from "@mantine/core";
+
+const meta: Meta<typeof EditorLayout> = {
+  title: "Blocks/EditorLayout",
+  component: EditorLayout,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EditorLayout>;
+
+const LeftPanel = (
+  <Paper p="md" withBorder>
+    <Text fw={700} mb="sm">
+      컴포넌트
+    </Text>
+    <Stack gap="xs">
+      <NavLink label="배너" active />
+      <NavLink label="텍스트" />
+      <NavLink label="이미지" />
+    </Stack>
+  </Paper>
+);
+
+const CenterPanel = (
+  <Paper p="md" withBorder h={400}>
+    <Text fw={700} mb="sm">
+      프리뷰
+    </Text>
+    <Box
+      style={{
+        border: "1px dashed #dee2e6",
+        borderRadius: 8,
+        height: 300,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <Text c="dimmed">미리보기 영역</Text>
+    </Box>
+  </Paper>
+);
+
+const RightPanel = (
+  <Paper p="md" withBorder>
+    <Text fw={700} mb="sm">
+      설정
+    </Text>
+    <Stack gap="sm">
+      <TextInput label="제목" placeholder="제목을 입력하세요" />
+      <TextInput label="설명" placeholder="설명을 입력하세요" />
+    </Stack>
+  </Paper>
+);
+
+export const Default: Story = {
+  args: {
+    leftPanel: LeftPanel,
+    centerPanel: CenterPanel,
+    rightPanel: RightPanel,
+  },
+};
+
+export const CustomSpan: Story = {
+  args: {
+    leftPanel: LeftPanel,
+    centerPanel: CenterPanel,
+    rightPanel: RightPanel,
+    leftSpan: 3,
+    centerSpan: 4,
+    rightSpan: 5,
+  },
+};

package/src/blocks/EditorLayout.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { ReactNode } from "react";
+import { Grid } from "@mantine/core";
+
+// ============================================
+// Types
+// ============================================
+
+interface EditorLayoutProps {
+  leftPanel: ReactNode;
+  centerPanel: ReactNode;
+  rightPanel: ReactNode;
+  leftSpan?: number;
+  centerSpan?: number;
+  rightSpan?: number;
+}
+
+// ============================================
+// Component
+// ============================================
+
+export function EditorLayout({
+  leftPanel,
+  centerPanel,
+  rightPanel,
+  leftSpan = 2,
+  centerSpan = 5,
+  rightSpan = 5,
+}: EditorLayoutProps) {
+  return (
+    <Grid gutter="md">
+      {/* 왼쪽: 컴포넌트 선택 영역 */}
+      <Grid.Col span={leftSpan}>{leftPanel}</Grid.Col>
+
+      {/* 중앙: 프리뷰 영역 */}
+      <Grid.Col span={centerSpan}>{centerPanel}</Grid.Col>
+
+      {/* 오른쪽: 설정/등록 영역 */}
+      <Grid.Col span={rightSpan}>{rightPanel}</Grid.Col>
+    </Grid>
+  );
+}

package/src/blocks/ImageUpload.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+import { useState } from "react";
+import { Box, Text, Image, FileButton, ActionIcon } from "@mantine/core";
+import { IconX, IconPlus, IconUpload } from "@tabler/icons-react";
+import { readFileAsDataURL } from "../utils/file";
+import { InputFile, Button } from "../atoms";
+import { notifications } from "@mantine/notifications";
+
+interface ImageUploadProps {
+  value: string[];
+  onChange: (images: string[]) => void;
+  maxCount?: number;
+  variant?: "gallery" | "area" | "input";
+  previewWidth?: number;
+  previewHeight?: number;
+  previewFit?: "cover" | "contain";
+  label?: string;
+  buttonText?: string;
+  placeholder?: string;
+  description?: string;
+  accept?: string;
+  showCount?: boolean;
+  /** 업로드 허용 최대 가로 크기(px) */
+  maxWidth?: number;
+  /** 업로드 허용 최대 세로 크기(px) */
+  maxHeight?: number;
+}
+
+function DeleteIndicator({ onClick }: { onClick: () => void }) {
+  return (
+    <ActionIcon
+      size={18}
+      radius="xl"
+      color="red"
+      variant="filled"
+      style={{ position: "absolute", top: -6, right: -6, zIndex: 10 }}
+      className="shadow-sm"
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick();
+      }}
+    >
+      <IconX size={10} stroke={3} />
+    </ActionIcon>
+  );
+}
+
+function validateImageDimensions(file: File, maxW?: number, maxH?: number): Promise<boolean> {
+  if (!maxW && !maxH) return Promise.resolve(true);
+  return new Promise((resolve) => {
+    const img = new window.Image();
+    img.onload = () => {
+      URL.revokeObjectURL(img.src);
+      const isWidthOk = !maxW || img.naturalWidth <= maxW;
+      const isHeightOk = !maxH || img.naturalHeight <= maxH;
+      resolve(isWidthOk && isHeightOk);
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(img.src);
+      resolve(false);
+    };
+    img.src = URL.createObjectURL(file);
+  });
+}
+
+export function ImageUpload({
+  value,
+  onChange,
+  maxCount,
+  variant = "gallery",
+  previewWidth = 80,
+  previewHeight,
+  previewFit = "cover",
+  label,
+  buttonText = "이미지 업로드",
+  placeholder = "No Image",
+  description,
+  accept = "image/png,image/jpeg,image/gif",
+  showCount = false,
+  maxWidth,
+  maxHeight,
+}: ImageUploadProps) {
+  const effectiveHeight = previewHeight ?? previewWidth;
+  const [dimensionError, setDimensionError] = useState<string | null>(null);
+
+  const buildDimensionErrorMessage = () => {
+    if (maxWidth && maxHeight) return `이미지 크기는 최대 ${maxWidth}x${maxHeight}px 이하여야 합니다.`;
+    if (maxWidth) return `이미지 가로 크기는 최대 ${maxWidth}px 이하여야 합니다.`;
+    return `이미지 세로 크기는 최대 ${maxHeight}px 이하여야 합니다.`;
+  };
+
+  const MAX_FILE_SIZE = 20 * 1024 * 1024; // 20MB
+
+  const handleFileSelect = async (file: File | null) => {
+    if (!file) return;
+    if (file.size > MAX_FILE_SIZE) {
+      notifications.show({ title: "업로드 실패", message: "파일 크기는 20MB 이하여야 합니다.", color: "red" });
+      return;
+    }
+    setDimensionError(null);
+    const isValid = await validateImageDimensions(file, maxWidth, maxHeight);
+    if (!isValid) {
+      const msg = buildDimensionErrorMessage();
+      setDimensionError(msg);
+      notifications.show({ title: "업로드 실패", message: msg, color: "red" });
+      return;
+    }
+    const src = await readFileAsDataURL(file);
+    if (maxCount === 1) {
+      onChange([src]);
+    } else {
+      onChange([...value, src]);
+    }
+  };
+
+  const handleMultipleFileSelect = async (files: File[]) => {
+    if (!files || files.length === 0) return;
+    setDimensionError(null);
+    const sizeOverCount = files.filter((f) => f.size > MAX_FILE_SIZE).length;
+    const sizeValidFiles = files.filter((f) => f.size <= MAX_FILE_SIZE);
+    if (sizeOverCount > 0) {
+      notifications.show({
+        title: "업로드 실패",
+        message: `${sizeOverCount}개의 파일이 20MB를 초과하여 제외되었습니다.`,
+        color: "red",
+      });
+    }
+    if (sizeValidFiles.length === 0) return;
+    const validFiles: File[] = [];
+    for (const file of sizeValidFiles) {
+      const isValid = await validateImageDimensions(file, maxWidth, maxHeight);
+      if (isValid) {
+        validFiles.push(file);
+      }
+    }
+    if (validFiles.length < sizeValidFiles.length) {
+      const msg = buildDimensionErrorMessage();
+      setDimensionError(msg);
+      notifications.show({
+        title: "업로드 실패",
+        message: `${sizeValidFiles.length - validFiles.length}개의 이미지가 크기 제한을 초과하여 제외되었습니다. ${msg}`,
+        color: "red",
+      });
+    }
+    if (validFiles.length === 0) return;
+    const results = await Promise.all(validFiles.map(readFileAsDataURL));
+    onChange([...value, ...results]);
+  };
+
+  const handleRemove = (index: number) => {
+    onChange(value.filter((_, i) => i !== index));
+  };
+
+  const isAdd = maxCount === undefined || value.length < maxCount;
+
+  if (variant === "gallery") {
+    return (
+      <Box>
+        <Box style={{ display: "flex", flexWrap: "wrap", gap: 12, paddingTop: 6, paddingRight: 6 }}>
+          {value.map((src, index) => (
+            <Box key={index} style={{ position: "relative", width: previewWidth, height: effectiveHeight }}>
+              <Image src={src} alt="" w={previewWidth} h={effectiveHeight} fit={previewFit} radius="sm" />
+              <DeleteIndicator onClick={() => handleRemove(index)} />
+            </Box>
+          ))}
+          {isAdd && (
+            <FileButton onChange={handleFileSelect} accept={accept}>
+              {(props) => (
+                <Box
+                  {...props}
+                  className="flex cursor-pointer items-center justify-center rounded border-2 border-dashed border-gray-300 hover:border-blue-400"
+                  style={{ width: previewWidth, height: effectiveHeight }}
+                >
+                  <IconPlus size={24} className="text-gray-400" />
+                </Box>
+              )}
+            </FileButton>
+          )}
+        </Box>
+        {showCount && (
+          <Text size="xs" c="dimmed" mt="xs">
+            등록된 사진: {value.length}장
+          </Text>
+        )}
+        {description && (
+          <Text size="xs" c="dimmed" mt="xs">
+            {description}
+          </Text>
+        )}
+        {dimensionError && (
+          <Text size="xs" c="red" mt="xs">
+            {dimensionError}
+          </Text>
+        )}
+      </Box>
+    );
+  }
+
+  if (variant === "area") {
+    return (
+      <Box className="flex flex-col items-center">
+        <FileButton onChange={handleFileSelect} accept={accept}>
+          {(props) => (
+            <Box
+              style={{ position: "relative", width: previewWidth, height: effectiveHeight }}
+              {...props}
+            >
+              <Box
+                className="flex h-full w-full cursor-pointer items-center justify-center overflow-hidden rounded-md border border-gray-200 bg-gray-50 transition-colors hover:border-blue-400 hover:bg-gray-100"
+              >
+                {value[0] ? (
+                  <Image src={value[0]} alt="" fit={previewFit} className="p-4" />
+                ) : (
+                  <Box className="flex flex-col items-center gap-1">
+                    <IconUpload size={20} className="text-gray-400" />
+                    <Text size="xs" c="dimmed" className="font-medium">
+                      {placeholder}
+                    </Text>
+                  </Box>
+                )}
+              </Box>
+              {value[0] && <DeleteIndicator onClick={() => onChange([])} />}
+            </Box>
+          )}
+        </FileButton>
+        {description && (
+          <Text size="xs" c="dimmed" mt="xs">
+            {description}
+          </Text>
+        )}
+        {dimensionError && (
+          <Text size="xs" c="red" mt="xs">
+            {dimensionError}
+          </Text>
+        )}
+      </Box>
+    );
+  }
+
+  // variant === "input"
+  const isMultiple = maxCount === undefined || maxCount > 1;
+
+  return (
+    <Box>
+      {isMultiple ? (
+        <InputFile
+          label={label}
+          placeholder="이미지를 선택하세요"
+          accept={accept}
+          leftSection={<IconUpload size={16} />}
+          onChange={handleMultipleFileSelect}
+          multiple
+          value={[]}
+        />
+      ) : (
+        <InputFile
+          label={label}
+          placeholder="이미지를 선택하세요"
+          accept={accept}
+          leftSection={<IconUpload size={16} />}
+          onChange={handleFileSelect}
+        />
+      )}
+      {value.length > 0 && (
+        <Box style={{ display: "flex", flexWrap: "wrap", gap: 12, paddingTop: 6, paddingRight: 6, marginTop: 8 }}>
+          {value.map((src, index) => (
+            <Box key={index} style={{ position: "relative", width: previewWidth, height: effectiveHeight }}>
+              <Image src={src} alt="" w={previewWidth} h={effectiveHeight} fit={previewFit} radius="sm" />
+              <DeleteIndicator onClick={() => handleRemove(index)} />
+            </Box>
+          ))}
+        </Box>
+      )}
+      {showCount && (
+        <Text size="xs" c="dimmed" mt="xs">
+          {value.length}개의 이미지가 등록되었습니다.
+        </Text>
+      )}
+      {description && (
+        <Text size="xs" c="dimmed" mt="xs">
+          {description}
+        </Text>
+      )}
+      {dimensionError && (
+        <Text size="xs" c="red" mt="xs">
+          {dimensionError}
+        </Text>
+      )}
+    </Box>
+  );
+}

package/src/blocks/LabeledField.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import LabeledField from "./LabeledField";
+import { InputText } from "../atoms/InputText";
+
+const meta: Meta<typeof LabeledField> = {
+  title: "Blocks/LabeledField",
+  component: LabeledField,
+  tags: ["autodocs"],
+  args: {
+    label: "플로팅 제목",
+    children: <InputText value="" onChange={() => {}} placeholder="플로팅 제목을 입력하세요" style={{ width: 300 }} />,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof LabeledField>;
+
+export const Default: Story = {};
+
+export const Description: Story = {
+  args: {
+    label: "플로팅 제목",
+    children: <InputText value="" onChange={() => {}} placeholder="플로팅 제목을 입력하세요" style={{ width: 300 }} />,
+    description: "이제 플로팅 제목을 입력할 수 있습니다.",
+  },
+};
+
+export const BottomDescription: Story = {
+  args: {
+    label: "플로팅 제목",
+    children: <InputText value="" onChange={() => {}} placeholder="플로팅 제목을 입력하세요" style={{ width: 300 }} />,
+    bottomDescription: "이제 플로팅 제목을 입력할 수 있습니다.",
+  },
+};

package/src/blocks/LabeledField.tsx

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+import { Box, Text } from "@mantine/core";
+
+interface Props {
+  label: string;
+  description?: string;
+  bottomDescription?: string;
+  children: ReactNode;
+}
+const LabeledField = ({ label, description, bottomDescription, children }: Props) => {
+  return (
+    <Box>
+      <Text size="sm" fw={500} mb="xs">
+        {label}
+      </Text>
+      {description && (
+        <Text size="xs" c="dimmed" mt="xs" mb="xs">
+          {description}
+        </Text>
+      )}
+      {children}
+      {bottomDescription && (
+        <Text size="xs" c="dimmed" mt="xs">
+          {bottomDescription}
+        </Text>
+      )}
+    </Box>
+  );
+};
+
+export default LabeledField;