jongsultest 0.1.0

package/src/atoms/Button.stories.tsx

@@ -0,0 +1,142 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+
+const meta: Meta<typeof Button> = {
+  title: "Atoms/Button",
+  component: Button,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "md"],
+      description: "버튼 크기 (sm: 38px, md: 40px)",
+      table: { defaultValue: { summary: "md" } },
+    },
+    color: {
+      control: "select",
+      options: ["blue", "red", "gray", "green"],
+      description: "버튼 색상",
+      table: { defaultValue: { summary: "blue" } },
+    },
+    variant: {
+      control: "select",
+      options: ["default", "filled", "outline", "light"],
+      description: "버튼 스타일 변형",
+      table: { defaultValue: { summary: "default" } },
+    },
+    disabled: {
+      control: "boolean",
+      description: "비활성화 여부",
+    },
+    loading: {
+      control: "boolean",
+      description: "로딩 상태",
+    },
+    fullWidth: {
+      control: "boolean",
+      description: "전체 너비 사용 여부",
+    },
+  },
+  args: {
+    children: "버튼",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
+      <Button variant="default">Default</Button>
+      <Button variant="filled">Filled</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="light">Light</Button>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
+      <Button size="sm">Small (38px)</Button>
+      <Button size="md">Medium (40px)</Button>
+    </div>
+  ),
+};
+
+export const Colors: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
+      <Button variant="filled" color="blue">
+        Blue
+      </Button>
+      <Button variant="filled" color="red">
+        Red
+      </Button>
+      <Button variant="filled" color="gray">
+        Gray
+      </Button>
+      <Button variant="filled" color="green">
+        Green
+      </Button>
+    </div>
+  ),
+};
+
+export const OutlineColors: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
+      <Button variant="outline" color="blue">
+        Blue
+      </Button>
+      <Button variant="outline" color="red">
+        Red
+      </Button>
+      <Button variant="outline" color="gray">
+        Gray
+      </Button>
+      <Button variant="outline" color="green">
+        Green
+      </Button>
+    </div>
+  ),
+};
+
+export const LightColors: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
+      <Button variant="light" color="blue">
+        Blue
+      </Button>
+      <Button variant="light" color="red">
+        Red
+      </Button>
+      <Button variant="light" color="gray">
+        Gray
+      </Button>
+      <Button variant="light" color="green">
+        Green
+      </Button>
+    </div>
+  ),
+};
+
+export const States: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
+      <Button>기본</Button>
+      <Button disabled>비활성화</Button>
+      <Button loading>로딩</Button>
+    </div>
+  ),
+};
+
+export const FullWidth: Story = {
+  args: {
+    fullWidth: true,
+    children: "로그인",
+  },
+};

package/src/atoms/Button.tsx

@@ -0,0 +1,50 @@
+import { Button as MantineButton, ButtonProps } from "@mantine/core";
+import { ComponentPropsWithoutRef } from "react";
+
+type Props = ButtonProps & ComponentPropsWithoutRef<"button">;
+
+const COMMON_STYLES: Record<string, string> = {
+  "--button-fz": "14px",
+  "--button-radius": "6px",
+};
+
+const SIZE_STYLES: Record<string, Record<string, string>> = {
+  xs: {
+    "--button-height": "24px",
+    "--button-padding-x": "6px",
+  },
+  sm: {
+    "--button-height": "38px",
+    "--button-padding-x": "16px",
+  },
+  md: {
+    "--button-height": "40px",
+    "--button-padding-x": "24px",
+  },
+};
+
+const getVariantStyles = (variant?: string, color?: string) => {
+  if (variant === "outline" && color === "gray") {
+    return { color: "var(--color-body)", borderColor: "var(--color-gray-3)" };
+  }
+  if (variant === "default") {
+    return { backgroundColor: "var(--mantine-color-blue-6)", color: "#FFFFFF", border: "none" };
+  }
+  if (variant === "light" && !color) {
+    return { backgroundColor: "var(--color-button-light)", color: "var(--color-body)", border: "none" };
+  }
+  return {};
+};
+
+export const Button = ({ style, ...props }: Props) => {
+  const sizeVars = SIZE_STYLES[props.size as string] ?? SIZE_STYLES.md;
+  const variantStyles = getVariantStyles(props.variant, props.color);
+
+  return (
+    <MantineButton
+      {...props}
+      classNames={{ label: "!font-bold" }}
+      style={{ ...COMMON_STYLES, ...sizeVars, ...variantStyles, ...style }}
+    />
+  );
+};

package/src/atoms/ComboboxAutocomplete.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ComboboxAutocomplete } from "./ComboboxAutocomplete";
+
+const meta: Meta<typeof ComboboxAutocomplete> = {
+  title: "Atoms/ComboboxAutocomplete",
+  component: ComboboxAutocomplete,
+  tags: ["autodocs"],
+  args: {
+    label: "검색",
+    placeholder: "검색어를 입력하세요",
+    data: ["서울", "부산", "대구", "인천", "광주"],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ComboboxAutocomplete>;
+
+export const Default: Story = {};
+
+export const WithDescription: Story = {
+  args: {
+    description: "도시를 검색하세요",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    error: "필수 입력 항목입니다",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    value: "서울",
+  },
+};
+
+export const Required: Story = {
+  args: {
+    withAsterisk: true,
+  },
+};

package/src/atoms/ComboboxAutocomplete.tsx

@@ -0,0 +1,6 @@
+import { Autocomplete as MantineAutocomplete, AutocompleteProps } from "@mantine/core";
+import { inputClassNames } from "./inputClassNames";
+
+export const ComboboxAutocomplete = (props: AutocompleteProps) => {
+  return <MantineAutocomplete classNames={inputClassNames} {...props} />;
+};

package/src/atoms/ComboboxSelect.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ComboboxSelect } from "./ComboboxSelect";
+
+const meta: Meta<typeof ComboboxSelect> = {
+  title: "Atoms/ComboboxSelect",
+  component: ComboboxSelect,
+  tags: ["autodocs"],
+  args: {
+    label: "도시",
+    placeholder: "선택하세요",
+    data: ["서울", "부산", "대구", "인천", "광주"],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ComboboxSelect>;
+
+export const Default: Story = {};
+
+export const WithDescription: Story = {
+  args: {
+    description: "거주 도시를 선택하세요",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    error: "필수 선택 항목입니다",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    value: "서울",
+  },
+};
+
+export const Required: Story = {
+  args: {
+    withAsterisk: true,
+  },
+};
+
+export const Clearable: Story = {
+  args: {
+    clearable: true,
+    value: "서울",
+  },
+};
+
+export const Searchable: Story = {
+  args: {
+    searchable: true,
+  },
+};

package/src/atoms/ComboboxSelect.tsx

@@ -0,0 +1,6 @@
+import { Select as MantineSelect, SelectProps } from "@mantine/core";
+import { inputClassNames } from "./inputClassNames";
+
+export const ComboboxSelect = (props: SelectProps) => {
+  return <MantineSelect classNames={inputClassNames} {...props} />;
+};

package/src/atoms/DateTimePicker.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DateTimePicker } from "./DateTimePicker";
+
+const meta: Meta<typeof DateTimePicker> = {
+  title: "Atoms/DateTimePicker",
+  component: DateTimePicker,
+  tags: ["autodocs"],
+  args: {
+    label: "예약 일시",
+    placeholder: "날짜와 시간을 선택하세요",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DateTimePicker>;
+
+export const Default: Story = {};
+
+export const WithDescription: Story = {
+  args: {
+    description: "예약 가능한 날짜와 시간을 선택해주세요",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    error: "필수 입력 항목입니다",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    value: new Date(),
+  },
+};
+
+export const Required: Story = {
+  args: {
+    withAsterisk: true,
+  },
+};

package/src/atoms/DateTimePicker.tsx

@@ -0,0 +1,6 @@
+import { DateTimePicker as MantineDateTimePicker, DateTimePickerProps } from "@mantine/dates";
+import { inputClassNames } from "./inputClassNames";
+
+export const DateTimePicker = (props: DateTimePickerProps) => {
+  return <MantineDateTimePicker classNames={inputClassNames} {...props} />;
+};

package/src/atoms/Icon.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PlusIcon, TrashIcon, GripVerticalIcon, ChevronDownIcon } from "./Icon";
+import { Group, Stack, Text } from "@mantine/core";
+
+type IconStoryArgs = {
+  size?: number;
+  color?: string;
+};
+
+const meta: Meta<IconStoryArgs> = {
+  title: "Atoms/Icon",
+  tags: ["autodocs"],
+  argTypes: {
+    size: { control: { type: "number", min: 12, max: 48 } },
+    color: { control: "text" },
+  },
+  args: {
+    size: 20,
+  },
+};
+
+export default meta;
+
+export const AllIcons: StoryObj<IconStoryArgs> = {
+  render: (args) => (
+    <Group gap="xl">
+      <Stack align="center" gap="xs">
+        <PlusIcon size={args.size} color={args.color} />
+        <Text size="xs">PlusIcon</Text>
+      </Stack>
+      <Stack align="center" gap="xs">
+        <TrashIcon size={args.size} color={args.color} />
+        <Text size="xs">TrashIcon</Text>
+      </Stack>
+      <Stack align="center" gap="xs">
+        <GripVerticalIcon size={args.size} color={args.color} />
+        <Text size="xs">GripVerticalIcon</Text>
+      </Stack>
+      <Stack align="center" gap="xs">
+        <ChevronDownIcon size={args.size} color={args.color} />
+        <Text size="xs">ChevronDownIcon</Text>
+      </Stack>
+    </Group>
+  ),
+};
+
+export const ColorPresets: StoryObj = {
+  render: () => (
+    <Group gap="xl">
+      {["gray", "red", "white", "disabled"].map((color) => (
+        <Stack key={color} align="center" gap="xs" p="sm" bg={color === "white" ? "dark" : undefined}>
+          <TrashIcon color={color} />
+          <Text size="xs">{color}</Text>
+        </Stack>
+      ))}
+    </Group>
+  ),
+};
+
+export const Sizes: StoryObj = {
+  render: () => (
+    <Group gap="xl" align="end">
+      {[12, 16, 20, 24, 32].map((size) => (
+        <Stack key={size} align="center" gap="xs">
+          <PlusIcon size={size} />
+          <Text size="xs">{size}px</Text>
+        </Stack>
+      ))}
+    </Group>
+  ),
+};
+
+export const PlusDisabled: StoryObj = {
+  render: () => (
+    <Group gap="xl">
+      <Stack align="center" gap="xs">
+        <PlusIcon />
+        <Text size="xs">활성</Text>
+      </Stack>
+      <Stack align="center" gap="xs">
+        <PlusIcon disabled />
+        <Text size="xs">비활성</Text>
+      </Stack>
+    </Group>
+  ),
+};

package/src/atoms/Icon.tsx

@@ -0,0 +1,81 @@
+const colorPreset: Record<string, string> = {
+  red: "#FF4242",
+  white: "#FFFFFF",
+  gray: "#666666",
+  disabled: "#DDDDDD",
+};
+
+const resolveColor = (color: string) => colorPreset[color] ?? color;
+
+export interface IconSvgProps {
+  size?: number;
+  /** 프리셋("red", "white", "gray", "disabled") 또는 hex 값 */
+  color?: string;
+  disabled?: boolean;
+}
+
+/** 원형 배경 + 십자 아이콘 (활성: #666666 / 비활성: #DDDDDD) */
+export const PlusIcon = ({ size = 20, color = "gray", disabled }: IconSvgProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 20 20" fill="none">
+    <circle cx="10" cy="10" r="10" fill={disabled ? resolveColor("disabled") : resolveColor(color)} />
+    <path d="M10 5.5V14.5M14.5 10L5.5 10" stroke="white" strokeWidth="1.2" strokeLinecap="round" />
+  </svg>
+);
+
+/** 휴지통 아이콘 (기본: "gray" / 삭제: "red" / 흰색: "white") */
+export const TrashIcon = ({ size = 20, color = "gray" }: IconSvgProps) => {
+  const c = resolveColor(color);
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <path
+        d="M14 4.5V2C14 1.72386 13.7761 1.5 13.5 1.5H6.5C6.22386 1.5 6 1.72386 6 2V4.5"
+        stroke={c}
+        strokeWidth="1.2"
+      />
+      <path d="M2 4H18" stroke={c} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+      <path
+        d="M4 7.00028V17C4 17.5523 4.44772 18 5 18H15C15.5523 18 16 17.5523 16 17V7"
+        stroke={c}
+        strokeWidth="1.2"
+        strokeLinecap="round"
+      />
+      <path d="M8 7V13" stroke={c} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M12 7V13" stroke={c} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+};
+
+/** 드래그 핸들 아이콘 (6점 그리드) */
+export const GripVerticalIcon = ({ size = 20, color = "gray" }: IconSvgProps) => {
+  const c = resolveColor(color);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      className="cursor-grab"
+    >
+      <rect x="6.5" y="3.5" width="1.2" height="1.2" rx="0.6" stroke={c} />
+      <rect x="6.5" y="9.39844" width="1.2" height="1.2" rx="0.6" stroke={c} />
+      <rect x="6.5" y="15.3008" width="1.2" height="1.2" rx="0.6" stroke={c} />
+      <rect x="12.3008" y="3.5" width="1.2" height="1.2" rx="0.6" stroke={c} />
+      <rect x="12.3008" y="9.39844" width="1.2" height="1.2" rx="0.6" stroke={c} />
+      <rect x="12.3008" y="15.3008" width="1.2" height="1.2" rx="0.6" stroke={c} />
+    </svg>
+  );
+};
+
+/** 하단 화살표 아이콘 */
+export const ChevronDownIcon = ({ size = 20, color = "#191919" }: IconSvgProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 20 20" fill="none">
+    <path
+      d="M16 7L10.0007 13L4 7"
+      stroke={resolveColor(color)}
+      strokeWidth="1.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/atoms/IconButton.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { IconButton } from "./IconButton";
+import { PlusIcon, TrashIcon, GripVerticalIcon } from "./Icon";
+import { Group } from "@mantine/core";
+
+const meta: Meta<typeof IconButton> = {
+  title: "Atoms/IconButton",
+  component: IconButton,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+
+export const WithPlusIcon: Story = {
+  args: {
+    icon: PlusIcon,
+  },
+};
+
+export const WithTrashIcon: Story = {
+  args: {
+    icon: TrashIcon,
+    iconColor: "red",
+  },
+};
+
+export const WithGripIcon: Story = {
+  args: {
+    icon: GripVerticalIcon,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    icon: PlusIcon,
+    disabled: true,
+  },
+};
+
+export const CustomSize: Story = {
+  args: {
+    icon: TrashIcon,
+    iconSize: 16,
+    iconColor: "gray",
+    size: "lg",
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <Group gap="md">
+      <IconButton icon={PlusIcon} />
+      <IconButton icon={TrashIcon} iconColor="red" />
+      <IconButton icon={GripVerticalIcon} />
+      <IconButton icon={PlusIcon} disabled />
+    </Group>
+  ),
+};

package/src/atoms/IconButton.tsx

@@ -0,0 +1,19 @@
+import { ActionIcon, ActionIconProps } from "@mantine/core";
+import { ComponentPropsWithoutRef, ComponentType, ReactNode } from "react";
+import { IconSvgProps } from "./Icon";
+
+type Props = ActionIconProps &
+  ComponentPropsWithoutRef<"button"> & {
+    icon?: ComponentType<IconSvgProps>;
+    iconSize?: number;
+    iconColor?: string;
+    children?: ReactNode;
+  };
+
+export const IconButton = ({ icon: Icon, iconSize, iconColor, disabled, children, ...props }: Props) => {
+  return (
+    <ActionIcon variant="subtle" color="gray" disabled={disabled} {...props}>
+      {Icon ? <Icon size={iconSize} color={iconColor} disabled={disabled} /> : children}
+    </ActionIcon>
+  );
+};

package/src/atoms/InputColor.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InputColor } from "./InputColor";
+
+const meta: Meta<typeof InputColor> = {
+  title: "Atoms/InputColor",
+  component: InputColor,
+  tags: ["autodocs"],
+  args: {
+    label: "브랜드 색상",
+    placeholder: "색상을 선택하세요",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InputColor>;
+
+export const Default: Story = {};
+
+export const WithValue: Story = {
+  args: {
+    defaultValue: "#3B82F6",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    error: "색상을 선택해주세요",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    value: "#10B981",
+  },
+};
+
+export const Required: Story = {
+  args: {
+    withAsterisk: true,
+  },
+};

package/src/atoms/InputColor.tsx

@@ -0,0 +1,6 @@
+import { ColorInput as MantineColorInput, ColorInputProps } from "@mantine/core";
+import { inputClassNames } from "./inputClassNames";
+
+export const InputColor = (props: ColorInputProps) => {
+  return <MantineColorInput classNames={inputClassNames} {...props} />;
+};