jongsultest 0.1.0

package/src/atoms/InputDatePicker.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InputDatePicker } from "./InputDatePicker";
+
+const meta: Meta<typeof InputDatePicker> = {
+  title: "Atoms/InputDatePicker",
+  component: InputDatePicker,
+  tags: ["autodocs"],
+  args: {
+    label: "날짜",
+    placeholder: "날짜를 선택하세요",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InputDatePicker>;
+
+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,
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    value: new Date(),
+  },
+};
+
+export const Clearable: Story = {
+  args: {
+    clearable: true,
+    value: new Date(),
+  },
+};

package/src/atoms/InputDatePicker.tsx

@@ -0,0 +1,6 @@
+import { DatePickerInput as MantineDatePicker, DatePickerInputProps } from "@mantine/dates";
+import { inputClassNames } from "./inputClassNames";
+
+export const InputDatePicker = (props: DatePickerInputProps) => {
+  return <MantineDatePicker classNames={inputClassNames} {...props} valueFormat="YYYY-MM-DD" />;
+};

package/src/atoms/InputFile.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InputFile } from ".";
+
+const meta: Meta<typeof InputFile> = {
+  title: "Atoms/InputFile",
+  component: InputFile,
+  tags: ["autodocs"],
+  args: {
+    label: "파일 업로드",
+    placeholder: "파일을 선택하세요",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InputFile>;
+
+export const Default: Story = {};
+
+export const WithDescription: Story = {
+  args: {
+    description: "PDF, JPG, PNG 파일만 업로드 가능합니다",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    error: "파일을 첨부해주세요",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const Required: Story = {
+  args: {
+    withAsterisk: true,
+  },
+};
+
+export const Multiple: Story = {
+  args: {
+    multiple: true,
+    label: "파일 업로드 (복수 선택)",
+    placeholder: "파일을 선택하세요",
+  },
+};
+
+export const WithAccept: Story = {
+  args: {
+    accept: "image/png,image/jpeg",
+    label: "이미지 업로드",
+    placeholder: "이미지를 선택하세요",
+  },
+};

package/src/atoms/InputFile.tsx

@@ -0,0 +1,15 @@
+import { FileInput as MantineFileInput, type FileInputProps } from "@mantine/core";
+import { inputClassNames } from "./inputClassNames";
+import React from "react";
+
+type FileInputComponentProps<Multiple extends boolean = false> = Omit<FileInputProps<Multiple>, "translate"> & {
+  translate?: string;
+};
+
+type FileInputComponent = (<Multiple extends boolean = false>(
+  props: FileInputComponentProps<Multiple>,
+) => React.JSX.Element) & { extend: typeof MantineFileInput.extend };
+
+export const InputFile = ((props: FileInputComponentProps) => {
+  return <MantineFileInput classNames={inputClassNames} {...(props as FileInputProps)} />;
+}) as FileInputComponent;

package/src/atoms/InputNumber.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InputNumber } from "./InputNumber";
+
+const meta: Meta<typeof InputNumber> = {
+  title: "Atoms/InputNumber",
+  component: InputNumber,
+  tags: ["autodocs"],
+  args: {
+    label: "수량",
+    placeholder: "숫자를 입력하세요",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InputNumber>;
+
+export const Default: Story = {};
+
+export const WithDescription: Story = {
+  args: {
+    description: "1 이상의 숫자를 입력하세요",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    error: "필수 입력 항목입니다",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    value: 10,
+  },
+};
+
+export const Required: Story = {
+  args: {
+    withAsterisk: true,
+  },
+};
+
+export const WithMinMax: Story = {
+  args: {
+    min: 0,
+    max: 100,
+    value: 50,
+  },
+};
+
+export const WithStep: Story = {
+  args: {
+    step: 5,
+    min: 0,
+    max: 100,
+  },
+};

package/src/atoms/InputNumber.tsx

@@ -0,0 +1,15 @@
+import { NumberInput as MantineNumberInput, NumberInputProps } from "@mantine/core";
+import { inputClassNames } from "./inputClassNames";
+
+export const InputNumber = (props: NumberInputProps) => {
+  return (
+    <MantineNumberInput
+      classNames={{
+        ...inputClassNames,
+        controls: "!h-8 !border-input",
+        control: "!border-input",
+      }}
+      {...props}
+    />
+  );
+};

package/src/atoms/InputPassword.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InputPassword } from "./InputPassword";
+
+const meta: Meta<typeof InputPassword> = {
+  title: "Atoms/InputPassword",
+  component: InputPassword,
+  tags: ["autodocs"],
+  args: {
+    label: "비밀번호",
+    placeholder: "비밀번호를 입력하세요",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InputPassword>;
+
+export const Default: Story = {};
+
+export const WithDescription: Story = {
+  args: {
+    description: "8자 이상 입력해주세요",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    error: "비밀번호가 올바르지 않습니다",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    value: "password123",
+  },
+};
+
+export const Required: Story = {
+  args: {
+    withAsterisk: true,
+  },
+};

package/src/atoms/InputPassword.tsx

@@ -0,0 +1,24 @@
+import { PasswordInput as MantinePasswordInput, PasswordInputProps } from "@mantine/core";
+import { IconAlertCircle } from "@tabler/icons-react";
+import { inputClassNames } from "./inputClassNames";
+
+export const InputPassword = (props: PasswordInputProps) => {
+  const { error } = props;
+
+  return (
+    <MantinePasswordInput
+      classNames={inputClassNames}
+      error={
+        typeof error === "string" ? (
+          <span className="flex items-start gap-2">
+            <IconAlertCircle size={16} className="mt-[2px] shrink-0" />
+            <span>{error}</span>
+          </span>
+        ) : (
+          error
+        )
+      }
+      {...props}
+    />
+  );
+};

package/src/atoms/InputRadio.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InputRadio } from "./InputRadio";
+
+const meta: Meta<typeof InputRadio.Group> = {
+  title: "Atoms/InputRadio",
+  component: InputRadio.Group,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof InputRadio.Group>;
+
+export const Default: Story = {
+  args: {
+    label: "성별",
+    defaultValue: "male",
+    children: (
+      <>
+        <InputRadio value="male" label="남성" />
+        <InputRadio value="female" label="여성" />
+      </>
+    ),
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    label: "알림 수단",
+    description: "알림을 받을 수단을 선택해주세요",
+    children: (
+      <>
+        <InputRadio value="sms" label="SMS" />
+        <InputRadio value="email" label="이메일" />
+        <InputRadio value="push" label="푸시 알림" />
+      </>
+    ),
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: "필수 선택",
+    error: "항목을 선택해주세요",
+    children: (
+      <>
+        <InputRadio value="a" label="옵션 A" />
+        <InputRadio value="b" label="옵션 B" />
+      </>
+    ),
+  },
+};
+
+export const Required: Story = {
+  args: {
+    label: "통화",
+    withAsterisk: true,
+    defaultValue: "KRW",
+    children: (
+      <>
+        <InputRadio value="KRW" label="원화 (KRW)" />
+        <InputRadio value="CNY" label="위안화 (CNY)" />
+      </>
+    ),
+  },
+};

package/src/atoms/InputRadio.tsx

@@ -0,0 +1,19 @@
+import {
+  Radio as MantineRadio,
+  RadioProps as MantineRadioProps,
+  RadioGroupProps as MantineRadioGroupProps,
+} from "@mantine/core";
+
+import { inputClassNames } from "./inputClassNames";
+
+const RadioBase = (props: MantineRadioProps) => {
+  return <MantineRadio {...props} />;
+};
+
+const RadioGroup = (props: MantineRadioGroupProps) => {
+  return <MantineRadio.Group classNames={{ label: inputClassNames.label }} {...props} />;
+};
+
+export const InputRadio = Object.assign(RadioBase, {
+  Group: RadioGroup,
+});

package/src/atoms/InputSegmentedControl.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InputSegmentedControl } from "./InputSegmentedControl";
+
+const meta: Meta<typeof InputSegmentedControl> = {
+  title: "Atoms/InputSegmentedControl",
+  component: InputSegmentedControl,
+  tags: ["autodocs"],
+  args: {
+    data: ["전체", "활성", "비활성"],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InputSegmentedControl>;
+
+export const Default: Story = {};
+
+export const WithDefaultValue: Story = {
+  args: {
+    defaultValue: "비활성",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    fullWidth: true,
+  },
+};
+
+export const WithObjectData: Story = {
+  args: {
+    data: [
+      { label: "일별", value: "daily" },
+      { label: "주별", value: "weekly" },
+      { label: "월별", value: "monthly" },
+    ],
+  },
+};

package/src/atoms/InputSegmentedControl.tsx

@@ -0,0 +1,15 @@
+import { SegmentedControl as MantineSegmentedControl, type SegmentedControlProps } from "@mantine/core";
+
+export const InputSegmentedControl = (props: SegmentedControlProps) => {
+  return (
+    <MantineSegmentedControl
+      classNames={{
+        root: "p-2! rounded-md!", // 루트
+        control: "", // 버튼
+        label: "h-10 px-4 text-sm", // 텍스트 패딩/타이포
+        innerLabel: "leading-9 color-white", // 선택 인디케이터 높이도 같이
+      }}
+      {...props}
+    />
+  );
+};

package/src/atoms/InputSwitch.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InputSwitch } from "./InputSwitch";
+
+const meta: Meta<typeof InputSwitch> = {
+  title: "Atoms/InputSwitch",
+  component: InputSwitch,
+  tags: ["autodocs"],
+  args: {
+    label: "활성화",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InputSwitch>;
+
+export const Default: Story = {};
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+    label: "활성",
+  },
+};
+
+export const Unchecked: Story = {
+  args: {
+    checked: false,
+    label: "비활성",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    checked: true,
+    label: "변경 불가",
+  },
+};
+
+export const WithoutLabel: Story = {
+  args: {
+    label: undefined,
+    checked: true,
+  },
+};

package/src/atoms/InputSwitch.tsx

@@ -0,0 +1,23 @@
+import { Switch as MantineSwitch, SwitchProps as MantineSwitchProps } from "@mantine/core";
+import { IconCheck } from "@tabler/icons-react";
+
+type SwitchProps = MantineSwitchProps;
+
+export const InputSwitch = ({ checked, style, classNames, ...props }: SwitchProps) => {
+  return (
+    <MantineSwitch
+      checked={checked}
+      thumbIcon={<IconCheck size={10} color="white" stroke={3} />}
+      {...props}
+      style={{
+        ...((typeof style === "object" && style) || {}),
+        ...(!checked && { "--switch-thumb-start": "6px" }),
+      }}
+      classNames={{
+        thumb: "!w-[10px] !h-[10px] text-white",
+        label: "!text-gray-6 !font-medium",
+        ...classNames,
+      }}
+    />
+  );
+};

package/src/atoms/InputSwitchInTable.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InputSwitchInTable } from "./InputSwitchInTable";
+
+const meta: Meta<typeof InputSwitchInTable> = {
+  title: "Atoms/InputSwitchInTable",
+  component: InputSwitchInTable,
+  tags: ["autodocs"],
+  args: {
+    id: 1,
+    onStatusChange: () => {},
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InputSwitchInTable>;
+
+export const Active: Story = {
+  args: {
+    status: "ACTIVE",
+  },
+};
+
+export const Hidden: Story = {
+  args: {
+    status: "HIDDEN",
+  },
+};
+
+export const CustomLabels: Story = {
+  args: {
+    status: "ACTIVE",
+    activeLabel: "공개",
+    inactiveLabel: "비공개",
+  },
+};
+
+export const CustomValues: Story = {
+  args: {
+    status: "ON",
+    activeValue: "ON",
+    inactiveValue: "OFF",
+  },
+};

package/src/atoms/InputSwitchInTable.tsx

@@ -0,0 +1,35 @@
+import { Box } from "@mantine/core";
+import { InputSwitch } from "./InputSwitch";
+
+interface SwitchInTableProps<T extends string> {
+  status: T;
+  onStatusChange: (id: number, status: T) => void;
+  id: number;
+  activeValue?: T;
+  inactiveValue?: T;
+  activeLabel?: string;
+  inactiveLabel?: string;
+}
+
+export const InputSwitchInTable = <T extends string>({
+  status,
+  onStatusChange,
+  id,
+  activeValue = "ACTIVE" as T,
+  inactiveValue = "HIDDEN" as T,
+  activeLabel = "활성",
+  inactiveLabel = "숨김",
+}: SwitchInTableProps<T>) => {
+  const isActive = status === activeValue;
+  return (
+    <Box onClick={(e) => e.stopPropagation()}>
+      <InputSwitch
+        checked={isActive}
+        // label={isActive ? activeLabel : inactiveLabel}
+        onChange={() => onStatusChange(id, isActive ? inactiveValue : activeValue)}
+        size="sm"
+        classNames={{ label: "!font-semibold" }}
+      />
+    </Box>
+  );
+};

package/src/atoms/InputText.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InputText } from "./InputText";
+
+const meta: Meta<typeof InputText> = {
+  title: "Atoms/InputText",
+  component: InputText,
+  tags: ["autodocs"],
+  args: {
+    label: "이름",
+    placeholder: "이름을 입력하세요",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InputText>;
+
+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/InputText.tsx

@@ -0,0 +1,7 @@
+import { TextInput as MantineTextInput, TextInputProps } from "@mantine/core";
+
+import { inputClassNames } from "./inputClassNames";
+
+export const InputText = (props: TextInputProps) => {
+  return <MantineTextInput classNames={inputClassNames} {...props} />;
+};

package/src/atoms/InputTextarea.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InputTextarea } from "./InputTextarea";
+
+const meta: Meta<typeof InputTextarea> = {
+  title: "Atoms/InputTextarea",
+  component: InputTextarea,
+  tags: ["autodocs"],
+  args: {
+    label: "내용",
+    placeholder: "내용을 입력하세요",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InputTextarea>;
+
+export const Default: Story = {};
+
+export const WithDescription: Story = {
+  args: {
+    description: "최대 500자까지 입력 가능합니다",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    error: "필수 입력 항목입니다",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    value: "비활성화된 텍스트",
+  },
+};
+
+export const Required: Story = {
+  args: {
+    withAsterisk: true,
+  },
+};
+
+export const Autosize: Story = {
+  args: {
+    autosize: true,
+    minRows: 3,
+    maxRows: 6,
+  },
+};

package/src/atoms/InputTextarea.tsx

@@ -0,0 +1,6 @@
+import { Textarea as MantineTextarea, TextareaProps } from "@mantine/core";
+import { inputClassNames } from "./inputClassNames";
+
+export const InputTextarea = (props: TextareaProps) => {
+  return <MantineTextarea classNames={{ ...inputClassNames, input: `${inputClassNames.input} !py-3` }} {...props} />;
+};