jongsultest 0.1.0

package/src/atoms/index.ts

@@ -0,0 +1,20 @@
+export { Button } from "./Button";
+export { InputText } from "./InputText";
+export { InputPassword } from "./InputPassword";
+export { InputNumber } from "./InputNumber";
+export { InputColor } from "./InputColor";
+export { InputFile } from "./InputFile";
+export { InputDatePicker } from "./InputDatePicker";
+export { InputTextarea } from "./InputTextarea";
+export { InputRadio } from "./InputRadio";
+export { InputSwitch } from "./InputSwitch";
+export { InputSwitchInTable } from "./InputSwitchInTable";
+export { InputSegmentedControl } from "./InputSegmentedControl";
+export { ComboboxSelect } from "./ComboboxSelect";
+export { ComboboxAutocomplete } from "./ComboboxAutocomplete";
+export { DateTimePicker } from "./DateTimePicker";
+export { Badge } from "./Badge";
+export { IconButton } from "./IconButton";
+export { PlusIcon, TrashIcon, GripVerticalIcon, ChevronDownIcon } from "./Icon";
+export type { IconSvgProps } from "./Icon";
+export { inputClassNames } from "./inputClassNames";

package/src/atoms/inputClassNames.ts

@@ -0,0 +1,20 @@
+export const inputClassNames = {
+  input: `!rounded-[8px] !border-input
+    !text-sm !h-12
+
+    data-[error=true]:!border-error-line
+    data-[error=true]:!border-2
+    data-[error=true]:!bg-error-fill
+    data-[error=true]:!text-body
+
+    data-[disabled=true]:!text-body
+    data-[disabled=true]:!bg-disabled-input
+    data-[disabled=true]:!opacity-100
+    data-[disabled=true]:!border-default
+    `,
+  label: "!text-sm !text-[#999] !font-bold !tracking-tight !mb-2",
+  placeholder: "!text-sm !tracking-normal",
+  error: "!mt-2 !ml-2",
+  description: "!-mt-[.5px] !mb-2",
+  root: "!leading-0",
+};

package/src/blocks/Accordion.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Accordion } from "./Accordion";
+import { Badge, Text } from "@mantine/core";
+
+const meta: Meta<typeof Accordion> = {
+  title: "Blocks/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+const sampleItems = [
+  {
+    id: "1",
+    title: "시술 안내",
+    content: <Text size="sm">시술에 대한 상세 안내 내용입니다.</Text>,
+  },
+  {
+    id: "2",
+    title: "주의 사항",
+    content: <Text size="sm">시술 전후 주의 사항을 확인해주세요.</Text>,
+  },
+  {
+    id: "3",
+    title: "자주 묻는 질문",
+    content: <Text size="sm">FAQ 내용이 들어갑니다.</Text>,
+  },
+];
+
+export const Default: Story = {
+  args: {
+    items: sampleItems,
+  },
+};
+
+export const SingleOpen: Story = {
+  args: {
+    items: sampleItems,
+    multiple: false,
+  },
+};
+
+export const WithDefaultOpen: Story = {
+  args: {
+    items: sampleItems,
+    defaultOpen: ["1", "3"],
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    items: sampleItems.map((item, index) => ({
+      ...item,
+      icon: <Badge size="sm">{index + 1}</Badge>,
+    })),
+  },
+};
+
+export const WithRightSection: Story = {
+  args: {
+    items: sampleItems.map((item) => ({
+      ...item,
+      rightSection: (
+        <Badge variant="light" color="blue" size="sm">
+          NEW
+        </Badge>
+      ),
+    })),
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    items: sampleItems.map((item) => ({
+      ...item,
+      description: "항목에 대한 부가 설명입니다.",
+    })),
+  },
+};
+
+export const WithDisabled: Story = {
+  args: {
+    items: [
+      ...sampleItems,
+      {
+        id: "4",
+        title: "비활성화된 항목",
+        content: <Text size="sm">이 항목은 열 수 없습니다.</Text>,
+        disabled: true,
+      },
+    ],
+  },
+};
+
+export const Contained: Story = {
+  args: {
+    items: sampleItems,
+    variant: "contained",
+  },
+};

package/src/blocks/Accordion.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { ReactNode } from "react";
+import {
+  Accordion as MantineAccordion,
+  AccordionProps as MantineAccordionProps,
+  Text,
+  Group,
+  Stack,
+} from "@mantine/core";
+import { ChevronDownIcon } from "../atoms";
+
+// ============================================
+// Types
+// ============================================
+
+export interface AccordionItemData {
+  id: string;
+  title: string;
+  description?: string;
+  icon?: ReactNode;
+  rightSection?: ReactNode;
+  content: ReactNode;
+  disabled?: boolean;
+}
+
+export interface AccordionProps {
+  items: AccordionItemData[];
+  defaultOpen?: string[];
+  multiple?: boolean;
+  variant?: MantineAccordionProps["variant"];
+  onChange?: (value: string | string[] | null) => void;
+}
+
+// ============================================
+// Component
+// ============================================
+
+export function Accordion({
+  items,
+  defaultOpen = [],
+  multiple = true,
+  variant = "separated",
+  onChange,
+}: AccordionProps) {
+  if (multiple) {
+    return (
+      <MantineAccordion
+        variant={variant}
+        multiple
+        defaultValue={defaultOpen}
+        chevron={<ChevronDownIcon />}
+        styles={accordionStyles}
+        onChange={onChange as (value: string[]) => void}
+        classNames={{ label: "!py-4" }}
+      >
+        {items.map((item) => (
+          <AccordionItem key={item.id} item={item} />
+        ))}
+      </MantineAccordion>
+    );
+  }
+
+  return (
+    <MantineAccordion
+      variant={variant}
+      defaultValue={defaultOpen[0]}
+      chevron={<ChevronDownIcon />}
+      styles={accordionStyles}
+      onChange={onChange as (value: string | null) => void}
+    >
+      {items.map((item) => (
+        <AccordionItem key={item.id} item={item} />
+      ))}
+    </MantineAccordion>
+  );
+}
+
+// ============================================
+// Sub Components
+// ============================================
+
+function AccordionItem({ item }: { item: AccordionItemData }) {
+  return (
+    <MantineAccordion.Item value={item.id}>
+      <MantineAccordion.Control disabled={item.disabled} icon={item.icon}>
+        <Group justify="space-between" wrap="nowrap" style={{ flex: 1 }}>
+          <Text fw={500}>{item.title}</Text>
+          {item.rightSection && <div onClick={(e) => e.stopPropagation()}>{item.rightSection}</div>}
+        </Group>
+      </MantineAccordion.Control>
+      <MantineAccordion.Panel>
+        <Stack gap="md">
+          {item.description && (
+            <Text size="sm" c="dimmed">
+              {item.description}
+            </Text>
+          )}
+          {item.content}
+        </Stack>
+      </MantineAccordion.Panel>
+    </MantineAccordion.Item>
+  );
+}
+
+// ============================================
+// Shared Styles
+// ============================================
+
+const accordionStyles = {
+  control: { padding: "17px 24px" },
+  item: { "--item-filled-color": "#F3F9FF" },
+};
+
+// ============================================
+// Compound Component (유연한 사용을 위한 대안)
+// ============================================
+
+Accordion.Root = ((props: MantineAccordionProps) => (
+  <MantineAccordion chevron={<ChevronDownIcon />} styles={accordionStyles} {...props} />
+)) as typeof MantineAccordion;
+Accordion.Item = MantineAccordion.Item;
+Accordion.Control = MantineAccordion.Control;
+Accordion.Panel = MantineAccordion.Panel;

package/src/blocks/AccordionDraggable.stories.tsx

@@ -0,0 +1,169 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AccordionDraggable, AccordionDraggableItem } from "./AccordionDraggable";
+import { InputText, InputTextarea } from "../atoms";
+import { Stack, Text } from "@mantine/core";
+import { DropResult } from "@hello-pangea/dnd";
+import { useState } from "react";
+
+const meta: Meta<typeof AccordionDraggable> = {
+  title: "Blocks/AccordionDraggable",
+  component: AccordionDraggable,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof AccordionDraggable>;
+
+const sampleItems: AccordionDraggableItem[] = [
+  {
+    id: "1",
+    title: "이름",
+    content: (
+      <Stack gap="sm">
+        <InputText label="라벨명" placeholder="라벨명을 입력하세요" />
+      </Stack>
+    ),
+    isRequired: true,
+    isUsed: true,
+  },
+  {
+    id: "2",
+    title: "전화번호",
+    content: (
+      <Stack gap="sm">
+        <InputText label="라벨명" placeholder="라벨명을 입력하세요" />
+      </Stack>
+    ),
+    isRequired: true,
+    isUsed: true,
+  },
+  {
+    id: "3",
+    title: "상담 내용",
+    content: (
+      <Stack gap="sm">
+        <InputTextarea label="설명" placeholder="설명을 입력하세요" />
+      </Stack>
+    ),
+    isRequired: false,
+    isUsed: false,
+  },
+];
+
+const handleReorder = (result: DropResult) => {
+  console.log("reorder", result);
+};
+
+function DefaultExample() {
+  const [items, setItems] = useState<AccordionDraggableItem[]>(sampleItems);
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  const handleInteractiveReorder = (result: DropResult) => {
+    if (!result.destination) return;
+    const reordered = [...items];
+    const [moved] = reordered.splice(result.source.index, 1);
+    reordered.splice(result.destination.index, 0, moved);
+    setItems(reordered);
+  };
+
+  return (
+    <AccordionDraggable
+      items={items}
+      activeId={activeId}
+      onActiveChange={setActiveId}
+      onReorder={handleInteractiveReorder}
+    />
+  );
+}
+
+export const Default: Story = {
+  render: () => <DefaultExample />,
+};
+
+export const WithDeleteButton: Story = {
+  args: {
+    items: sampleItems,
+    onReorder: handleReorder,
+    showDeleteButton: true,
+    onDelete: (id: string) => console.log("delete", id),
+  },
+};
+
+export const WithToggles: Story = {
+  args: {
+    items: sampleItems,
+    onReorder: handleReorder,
+    showDeleteButton: false,
+    showRequiredToggle: true,
+    showUsedToggle: true,
+    onRequiredChange: (id: string, value: boolean) => console.log("required", id, value),
+    onUsedChange: (id: string, value: boolean) => console.log("used", id, value),
+  },
+};
+
+export const WithRightSection: Story = {
+  args: {
+    items: sampleItems.map((item) => ({
+      ...item,
+      rightSection: (
+        <Text size="xs" c="dimmed">
+          커스텀 영역
+        </Text>
+      ),
+    })),
+    onReorder: handleReorder,
+    showDeleteButton: false,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    items: [],
+    onReorder: handleReorder,
+    emptyMessage: "등록된 항목이 없습니다",
+  },
+};
+
+function InteractiveExample() {
+  const [items, setItems] = useState<AccordionDraggableItem[]>(sampleItems);
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  const handleInteractiveReorder = (result: DropResult) => {
+    if (!result.destination) return;
+    const reordered = [...items];
+    const [moved] = reordered.splice(result.source.index, 1);
+    reordered.splice(result.destination.index, 0, moved);
+    setItems(reordered);
+  };
+
+  const handleDelete = (id: string) => {
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  };
+
+  const handleRequiredChange = (id: string, value: boolean) => {
+    setItems((prev) => prev.map((item) => (item.id === id ? { ...item, isRequired: value } : item)));
+  };
+
+  const handleUsedChange = (id: string, value: boolean) => {
+    setItems((prev) => prev.map((item) => (item.id === id ? { ...item, isUsed: value } : item)));
+  };
+
+  return (
+    <AccordionDraggable
+      items={items}
+      activeId={activeId}
+      onActiveChange={setActiveId}
+      onReorder={handleInteractiveReorder}
+      onDelete={handleDelete}
+      onRequiredChange={handleRequiredChange}
+      onUsedChange={handleUsedChange}
+      showDeleteButton={true}
+      showRequiredToggle={true}
+      showUsedToggle={true}
+    />
+  );
+}
+
+export const Interactive: Story = {
+  render: () => <InteractiveExample />,
+};

package/src/blocks/AccordionDraggable.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { GripVerticalIcon, TrashIcon } from "../atoms";
+import { Accordion } from ".";
+import { DragDropContext, Draggable, Droppable, DropResult } from "@hello-pangea/dnd";
+import { Box, Checkbox, Group, Stack, Text } from "@mantine/core";
+import React, { ReactNode, useEffect, useState } from "react";
+
+// ============================================
+// Types
+// ============================================
+
+export interface AccordionDraggableItem {
+  id: string;
+  title: string;
+  content: ReactNode;
+  icon?: ReactNode;
+  rightSection?: ReactNode;
+  isRequired?: boolean;
+  isUsed?: boolean;
+}
+
+export interface AccordionDraggableProps {
+  items: AccordionDraggableItem[];
+  droppableId?: string;
+  activeId?: string | null;
+  onActiveChange?: (id: string | null) => void;
+  onReorder: (result: DropResult) => void;
+  onDelete?: (id: string) => void;
+  onRequiredChange?: (id: string, value: boolean) => void;
+  onUsedChange?: (id: string, value: boolean) => void;
+  emptyMessage?: string;
+  showDeleteButton?: boolean;
+  showRequiredToggle?: boolean;
+  showUsedToggle?: boolean;
+  draggingBgColor?: string;
+}
+
+// ============================================
+// Droppable wrapper — 마운트 후 활성화하여 hydration 불일치 방지
+// ============================================
+
+function StrictModeDroppable({ children, ...props }: React.ComponentProps<typeof Droppable>) {
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  useEffect(() => {
+    const animation = requestAnimationFrame(() => setIsEnabled(true));
+    return () => {
+      cancelAnimationFrame(animation);
+      setIsEnabled(false);
+    };
+  }, []);
+
+  if (!isEnabled) return null;
+
+  return <Droppable {...props}>{children}</Droppable>;
+}
+
+// ============================================
+// Component
+// ============================================
+
+export function AccordionDraggable({
+  items,
+  droppableId = "draggable-accordion",
+  activeId = null,
+  onActiveChange,
+  onReorder,
+  onDelete,
+  onRequiredChange,
+  onUsedChange,
+  emptyMessage = "항목이 없습니다",
+  showDeleteButton = true,
+  showRequiredToggle = false,
+  showUsedToggle = false,
+  draggingBgColor = "var(--color-dragging)",
+}: AccordionDraggableProps) {
+  if (items.length === 0) {
+    return (
+      <Box style={{ padding: 40, textAlign: "center" }}>
+        <Text c="dimmed">{emptyMessage}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <DragDropContext onDragEnd={onReorder}>
+      <StrictModeDroppable droppableId={droppableId}>
+        {(provided) => (
+          <Box ref={provided.innerRef} {...provided.droppableProps}>
+            <Accordion.Root
+              variant="separated"
+              value={activeId}
+              onChange={onActiveChange}
+              classNames={{ label: "!py-0", content: "!p-6 !pb-10" }}
+            >
+              {items.map((item, index) => (
+                <Draggable key={item.id} draggableId={item.id} index={index}>
+                  {(provided) => (
+                    <Box
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      style={{
+                        ...provided.draggableProps.style,
+                        marginBottom: 8,
+                      }}
+                    >
+                      <Accordion.Item
+                        value={item.id}
+                        data-active={activeId === item.id || undefined}
+                        style={{ backgroundColor: draggingBgColor }}
+                        className="group data-[active]:!bg-[var(--color-active,transparent)]"
+                      >
+                        <Accordion.Control
+                          icon={item.icon}
+                          className="group-data-[active]:!border-b group-data-[active]:!border-gray-200"
+                        >
+                          <Group gap="xs" wrap="nowrap" style={{ width: "100%" }}>
+                            {/* 드래그 핸들 */}
+                            <span {...provided.dragHandleProps} onClick={(e) => e.stopPropagation()}>
+                              <GripVerticalIcon />
+                            </span>
+
+                            {/* 제목 */}
+                            <Text fw={500} className="flex-1 !text-[15px]">
+                              {item.title}
+                            </Text>
+
+                            {/* 오른쪽 섹션 */}
+                            {item.rightSection && (
+                              <Box
+                                onClick={(e) => e.stopPropagation()}
+                                style={{
+                                  marginRight: 16,
+                                  padding: "4px 8px",
+                                  borderRadius: 4,
+                                  backgroundColor: "var(--color-right-section)",
+                                }}
+                              >
+                                {item.rightSection}
+                              </Box>
+                            )}
+
+                            {/* 사용/필수 토글 */}
+                            {(showRequiredToggle || showUsedToggle) && !item.rightSection && (
+                              <Group
+                                gap="sm"
+                                wrap="nowrap"
+                                className="mr-6 h-5 border-r border-[#E1E4E8] pr-6"
+                                onClick={(e) => e.stopPropagation()}
+                              >
+                                {/* 사용 토글 */}
+                                {showUsedToggle && onUsedChange && (
+                                  <Checkbox
+                                    checked={item.isUsed ?? false}
+                                    onChange={(e) => onUsedChange(item.id, e.currentTarget.checked)}
+                                    label="사용"
+                                  />
+                                )}
+                                {/* 필수 토글 */}
+                                {showRequiredToggle && onRequiredChange && (
+                                  <Checkbox
+                                    checked={item.isRequired ?? false}
+                                    onChange={(e) => onRequiredChange(item.id, e.currentTarget.checked)}
+                                    label="필수"
+                                  />
+                                )}
+                              </Group>
+                            )}
+
+                            {/* 삭제 버튼 */}
+                            {showDeleteButton && onDelete && !item.rightSection && (
+                              <span
+                                className="mr-6 h-5 border-r border-[#E1E4E8] pr-6"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  onDelete(item.id);
+                                }}
+                              >
+                                <TrashIcon color="red" />
+                              </span>
+                            )}
+                          </Group>
+                        </Accordion.Control>
+                        <Accordion.Panel>
+                          <Stack gap="24">{item.content}</Stack>
+                        </Accordion.Panel>
+                      </Accordion.Item>
+                    </Box>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </Accordion.Root>
+          </Box>
+        )}
+      </StrictModeDroppable>
+    </DragDropContext>
+  );
+}

package/src/blocks/BoxContainer.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import BoxContainer from "./BoxContainer";
+import { Text } from "@mantine/core";
+
+const meta: Meta<typeof BoxContainer> = {
+  title: "Blocks/BoxContainer",
+  component: BoxContainer,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof BoxContainer>;
+
+export const Default: Story = {
+  args: {
+    children: <Text>기본 컨텐츠 영역입니다.</Text>,
+  },
+};
+
+export const WithMultipleChildren: Story = {
+  args: {
+    children: (
+      <>
+        <Text fw={700} size="xl" mb="md">
+          페이지 제목
+        </Text>
+        <Text c="dimmed">페이지 설명 텍스트가 들어갑니다.</Text>
+      </>
+    ),
+  },
+};

package/src/blocks/BoxContainer.tsx

@@ -0,0 +1,16 @@
+import { Box } from "@mantine/core";
+import { PropsWithChildren } from "react";
+
+export default function BoxContainer({ children }: PropsWithChildren) {
+  return (
+    <Box
+      component="main"
+      style={{
+        flexGrow: 1,
+        padding: 24,
+      }}
+    >
+      {children}
+    </Box>
+  );
+}