jongsultest 0.1.0

package/src/blocks/MediDrawer.stories.tsx

@@ -0,0 +1,58 @@
+import { useState } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { MediDrawer } from "./MediDrawer";
+import { Text } from "@mantine/core";
+import { Button } from "../atoms/Button";
+import DescriptionRow from "./DescriptionRow";
+
+const meta: Meta<typeof MediDrawer> = {
+  title: "Blocks/MediDrawer",
+  component: MediDrawer,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof MediDrawer>;
+
+export const Default: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isOpened, setIsOpened] = useState(false);
+
+    const handleClose = () => {
+      setIsOpened(false);
+    };
+
+    return (
+      <>
+        <Button onClick={() => setIsOpened(true)}>Open MediDrawer</Button>
+        <MediDrawer title="시술 상세" opened={isOpened} onClose={handleClose}>
+          <DescriptionRow label="시작일" value={<Text>2020.12.12 12:22</Text>} />
+          <DescriptionRow label="종료일" value={<Text>2026.12.12 10:22</Text>} />
+        </MediDrawer>
+      </>
+    );
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `const [isOpened, setIsOpened] = useState(false);
+
+const handleClose = () => {
+  setIsOpened(false); 
+};
+
+return (
+  <>
+     <Button onClick={() => setIsOpened(true)}>Open MediDrawer</Button>
+      <MediDrawer title="시술 상세" opened={isOpened} onClose={handleClose}>
+        <DescriptionRow label="시작일" value={<Text>2020.12.12 12:22</Text>} />
+        <DescriptionRow label="종료일" value={<Text>2026.12.12 10:22</Text>} />
+      </MediDrawer>
+  </>
+);`,
+      },
+    },
+  },
+};

package/src/blocks/MediDrawer.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { ReactNode } from "react";
+import { Box, Drawer, DrawerProps, Text } from "@mantine/core";
+
+interface Props {
+  title: string;
+  children: ReactNode; //body
+  footer?: ReactNode;
+}
+
+export function MediDrawer({ title, children, footer, ...drawerProps }: Props & DrawerProps) {
+  return (
+    <Drawer
+      title={
+        <Text fw={700} size="lg">
+          {title}
+        </Text>
+      }
+      {...drawerProps}
+      position="right"
+      size="md"
+      styles={{
+        body: { display: "flex", flexDirection: "column", height: "calc(100% - 64px)", padding: 0 },
+        header: { borderBottom: "1px solid var(--color-gray-2)", padding: "16px 24px" },
+      }}
+    >
+      <Box style={{ flex: 1, overflowY: "auto", padding: "24px" }}>{children}</Box>
+
+      {/* 버튼 */}
+      {footer && <Box style={{ borderTop: "1px solid var(--color-gray-2)", padding: "16px 24px" }}>{footer}</Box>}
+    </Drawer>
+  );
+}

package/src/blocks/Modal.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Modal from "./Modal";
+import { Text, Stack } from "@mantine/core";
+import { Button } from "../atoms/Button";
+
+const meta: Meta<typeof Modal> = {
+  title: "Blocks/Modal",
+  component: Modal,
+  tags: ["autodocs"],
+  args: {
+    opened: true,
+    onClose: () => {},
+    title: "모달 제목",
+    children: <Text>모달 내용이 들어갑니다.</Text>,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {};
+
+export const WithForm: Story = {
+  args: {
+    title: "정보 수정",
+    size: "lg",
+    children: (
+      <Stack gap="md">
+        <Text>수정할 내용을 입력하세요.</Text>
+        <Button variant="filled">저장</Button>
+      </Stack>
+    ),
+  },
+};
+
+export const SmallSize: Story = {
+  args: {
+    title: "알림",
+    size: "sm",
+    children: <Text>처리가 완료되었습니다.</Text>,
+  },
+};

package/src/blocks/Modal.tsx

@@ -0,0 +1,31 @@
+import { Modal as MantineModal, ModalProps } from "@mantine/core";
+import React from "react";
+
+export default function Modal({
+  opened,
+  onClose,
+  title,
+  size,
+  styles,
+  children,
+  ...props
+}: ModalProps & { children: React.ReactNode }) {
+  return (
+    <MantineModal
+      opened={opened}
+      onClose={onClose}
+      title={title}
+      size={size}
+      styles={styles}
+      {...props}
+      classNames={{
+        ...props.classNames,
+        header: "!-mt-8 !p-6",
+        title: `text-center !font-bold ${props.classNames?.title ?? ""}`,
+        body: `!p-6 ${props.classNames?.body ?? ""}`,
+      }}
+    >
+      {children}
+    </MantineModal>
+  );
+}

package/src/blocks/ModalDeleteConfirm.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ModalDeleteConfirm from "./ModalDeleteConfirm";
+
+const meta: Meta<typeof ModalDeleteConfirm> = {
+  title: "Blocks/ModalDeleteConfirm",
+  component: ModalDeleteConfirm,
+  tags: ["autodocs"],
+  args: {
+    opened: true,
+    onClose: () => {},
+    onConfirm: () => {},
+    message: "삭제된 데이터는 복구할 수 없습니다.",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ModalDeleteConfirm>;
+
+export const Default: Story = {};
+
+export const CustomMessage: Story = {
+  args: {
+    message: "이 시술 정보를 삭제하시겠습니까? 관련된 모든 데이터가 함께 삭제됩니다.",
+  },
+};
+
+export const ShortMessage: Story = {
+  args: {
+    message: "선택한 항목을 삭제합니다.",
+  },
+};

package/src/blocks/ModalDeleteConfirm.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { Button } from "../atoms";
+import Modal from "./Modal";
+import { Box, Group } from "@mantine/core";
+
+interface ModalProps {
+  opened: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  message?: string | React.ReactNode;
+}
+
+export default function ModalDeleteConfirm({ opened, onClose, onConfirm, message }: ModalProps) {
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      size="md"
+      centered
+      withCloseButton={false}
+      classNames={{ body: "text-center" }}
+    >
+      <Box className="flex flex-col items-center gap-5">
+        <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-red-50">
+          <i className="text-error text-2xl" data-fa-i2svg="">
+            <svg
+              width="24"
+              height="24"
+              aria-hidden="true"
+              focusable="false"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 448 512"
+            >
+              <path
+                fill="currentColor"
+                d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z"
+              ></path>
+            </svg>
+          </i>
+        </div>
+        <h3 className="text-xl leading-tight font-bold text-gray-900">정말 삭제하시겠습니까?</h3>
+
+        {message && <p className="-mt-2 text-sm leading-relaxed text-gray-600">{message}</p>}
+
+        <Group justify="center" gap="xs">
+          <Button variant="outline" color="gray" size="md" onClick={onClose}>
+            취소
+          </Button>
+          <Button variant="filled" color="red" size="md" onClick={onConfirm}>
+            삭제
+          </Button>
+        </Group>
+      </Box>
+    </Modal>
+  );
+}

package/src/blocks/ModalTokenExpired.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Modal from "./Modal";
+import { Box, Text } from "@mantine/core";
+
+export function ModalTokenExpired() {
+  const [isOpened, setIsOpened] = useState(false);
+
+  useEffect(() => {
+    const handleTokenExpired = () => {
+      setIsOpened(true);
+
+      setTimeout(() => {
+        localStorage.removeItem("accessToken");
+        localStorage.removeItem("tokenExpiresAt");
+        localStorage.removeItem("featureVersion");
+        localStorage.removeItem("units");
+        window.location.href = "/login";
+      }, 3000);
+    };
+
+    window.addEventListener("token-expired", handleTokenExpired);
+    return () => window.removeEventListener("token-expired", handleTokenExpired);
+  }, []);
+
+  return (
+    <Modal opened={isOpened} onClose={() => {}} withCloseButton={false} centered size="sm" zIndex={1000}>
+      <Box className="flex flex-col items-center gap-5">
+        <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-red-50">
+          <i className="text-error text-2xl" data-fa-i2svg="">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="32"
+              height="32"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              className="icon icon-tabler icons-tabler-filled icon-tabler-exclamation-circle"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M17 3.34a10 10 0 1 1 -15 8.66l.005 -.324a10 10 0 0 1 14.995 -8.336m-5 11.66a1 1 0 0 0 -1 1v.01a1 1 0 0 0 2 0v-.01a1 1 0 0 0 -1 -1m0 -7a1 1 0 0 0 -1 1v4a1 1 0 0 0 2 0v-4a1 1 0 0 0 -1 -1" />
+            </svg>
+          </i>
+        </div>
+        <Text ta="center" fw={600} size="lg" mb="xs">
+          토큰이 만료되었습니다 <br />
+          잠시 후 로그인 페이지로 이동합니다.
+        </Text>
+      </Box>
+    </Modal>
+  );
+}

package/src/blocks/NavigationBanner.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Box, Text, ActionIcon, Group } from "@mantine/core";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+
+// ============================================
+// Types
+// ============================================
+
+export interface NavigationBannerItem {
+  id: string;
+  image: string;
+  title: string;
+}
+
+export interface NavigationBannerProps {
+  items: NavigationBannerItem[];
+  currentIndex?: number;
+  onIndexChange?: (index: number) => void;
+  imageSize?: number;
+  emptyText?: string;
+  showNavigation?: boolean;
+  className?: string;
+}
+
+// ============================================
+// Component
+// ============================================
+
+export function NavigationBanner({
+  items,
+  currentIndex: controlledIndex,
+  onIndexChange,
+  imageSize = 275,
+  emptyText = "이미지를 추가하세요",
+  showNavigation = true,
+  className,
+}: NavigationBannerProps) {
+  const [internalIndex, setInternalIndex] = useState(0);
+
+  // Controlled or uncontrolled mode
+  const currentIndex = controlledIndex ?? internalIndex;
+  const setCurrentIndex = onIndexChange ?? setInternalIndex;
+
+  // Reset index when items change
+  useEffect(() => {
+    if (currentIndex >= items.length && items.length > 0) {
+      setCurrentIndex(items.length - 1);
+    }
+  }, [items.length, currentIndex, setCurrentIndex]);
+
+  const isItems = items.length > 0;
+  const currentItem = items[currentIndex];
+  const isMultiple = items.length > 1;
+
+  const handlePrev = () => {
+    const newIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+    setCurrentIndex(newIndex);
+  };
+
+  const handleNext = () => {
+    const newIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+    setCurrentIndex(newIndex);
+  };
+
+  return (
+    <Box className={className}>
+      {/* 배너 이미지 영역 */}
+      <Box className="overflow-hidden rounded-sm bg-gray-100" style={{ width: imageSize, height: imageSize }}>
+        {isItems && currentItem ? (
+          <img src={currentItem.image} alt={currentItem.title} className="h-full w-full object-cover" />
+        ) : (
+          <Box className="flex h-full w-full items-center justify-center">
+            <Text size="xs" c="dimmed">
+              {emptyText}
+            </Text>
+          </Box>
+        )}
+      </Box>
+
+      {/* 네비게이션 영역 */}
+      {showNavigation && (
+        <Group justify="center" gap="md" mt="sm" style={{ width: imageSize }}>
+          <ActionIcon variant="subtle" color="gray" size="sm" onClick={handlePrev} disabled={!isMultiple}>
+            <IconChevronLeft size={18} />
+          </ActionIcon>
+
+          <Text size="xs" fw={600} className="flex-1 text-center tracking-wider uppercase" lineClamp={1}>
+            {currentItem?.title || "제목 없음"}
+          </Text>
+
+          <ActionIcon variant="subtle" color="gray" size="sm" onClick={handleNext} disabled={!isMultiple}>
+            <IconChevronRight size={18} />
+          </ActionIcon>
+        </Group>
+      )}
+    </Box>
+  );
+}

package/src/blocks/PageHeader.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { ActionIcon, Title, Box } from "@mantine/core";
+import { IconArrowLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export default function PageHeader({ headerText, back }: { headerText: string; back?: boolean }) {
+  const router = useRouter();
+
+  const handleBack = () => {
+    router.back();
+  };
+
+  return (
+    <Box style={{ display: "flex", alignItems: "center", gap: 8 }}>
+      {back && (
+        <ActionIcon variant="subtle" size="lg" onClick={handleBack}>
+          <IconArrowLeft size={20} />
+        </ActionIcon>
+      )}
+      <Title order={2}>{headerText}</Title>
+    </Box>
+  );
+}

package/src/blocks/PageLoading.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PageLoading } from "./PageLoading";
+
+const meta: Meta<typeof PageLoading> = {
+  title: "Blocks/PageLoading",
+  component: PageLoading,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PageLoading>;
+
+export const Default: Story = {};
+
+export const WithBackground: Story = {
+  args: {
+    bg: "white",
+  },
+};

package/src/blocks/PageLoading.tsx

@@ -0,0 +1,19 @@
+import { Box, LoadingOverlay } from "@mantine/core";
+
+interface PageLoadingProps {
+  bg?: string;
+}
+
+export function PageLoading({ bg = "transparent" }: PageLoadingProps) {
+  return (
+    <Box pos="fixed" top={0} left="var(--sidebar-width)" right={0} bottom={0} style={{ zIndex: 400 }}>
+      <LoadingOverlay
+        visible
+        overlayProps={{
+          backgroundOpacity: bg === "transparent" ? 0 : 1,
+          color: bg,
+        }}
+      />
+    </Box>
+  );
+}

package/src/blocks/PageTitle.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PageTitle } from "./PageTitle";
+import { Button } from "@mantine/core";
+
+const meta: Meta<typeof PageTitle> = {
+  title: "Blocks/PageTitle",
+  component: PageTitle,
+  tags: ["autodocs"],
+  args: {
+    title: "시술 관리",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PageTitle>;
+
+export const Default: Story = {};
+
+export const WithSubText: Story = {
+  args: {
+    title: "리뷰 관리",
+    subText: "고객 리뷰를 관리할 수 있습니다",
+  },
+};
+
+export const WithRightContent: Story = {
+  args: {
+    title: "상담 관리",
+    rightContent: <Button size="sm">추가</Button>,
+  },
+};
+
+export const WithSubTextAndRightContent: Story = {
+  args: {
+    title: "회원 관리",
+    subText: "등록된 회원 목록입니다",
+    rightContent: <Button size="sm">회원 추가</Button>,
+  },
+};

package/src/blocks/PageTitle.tsx

@@ -0,0 +1,25 @@
+import { Group, Text, Title, TitleProps } from "@mantine/core";
+import React from "react";
+
+export function PageTitle({
+  title,
+  subText,
+  rightContent,
+  leftContent,
+  ...props
+}: TitleProps & { subText?: string; rightContent?: React.ReactNode; leftContent?: React.ReactNode }) {
+  return (
+    <Group justify="space-between" align="end" mb="xl">
+      {leftContent}
+      <Title order={2} c="var(--color-brand-dark)" {...props}>
+        {title}
+        {subText && (
+          <Text size="md" c="var(--color-subtitle)" mt="5">
+            {subText}
+          </Text>
+        )}
+      </Title>
+      {rightContent}
+    </Group>
+  );
+}

package/src/blocks/Pagination.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Pagination as MantinePagination, Group } from "@mantine/core";
+
+// ============================================
+// Types
+// ============================================
+
+export interface PaginationProps {
+  total: number;
+  page: number;
+  onChange: (page: number) => void;
+  siblings?: number;
+  boundaries?: number;
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  withEdges?: boolean;
+  position?: "left" | "center" | "right";
+}
+
+// ============================================
+// Component
+// ============================================
+
+export function Pagination({
+  total,
+  page,
+  onChange,
+  siblings = 1,
+  boundaries = 1,
+  size = "sm",
+  withEdges = true,
+  position = "center",
+}: PaginationProps) {
+  if (total <= 0) return null;
+
+  return (
+    <Group justify={position} mt="xl">
+      <MantinePagination
+        total={total}
+        value={page}
+        onChange={onChange}
+        siblings={siblings}
+        boundaries={boundaries}
+        size={size}
+        withEdges={withEdges}
+      />
+    </Group>
+  );
+}

package/src/blocks/Panel.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Panel } from ".";
+import { Button, Group, Stack, Text, TextInput } from "@mantine/core";
+
+const meta: Meta<typeof Panel> = {
+  title: "Blocks/Panel",
+  component: Panel,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Panel>;
+
+export const Default: Story = {
+  args: {
+    title: "기본 정보",
+    children: <Text>컨텐츠가 들어갑니다.</Text>,
+  },
+};
+
+export const WithHeaderRightContent: Story = {
+  args: {
+    title: "사용자 목록",
+    headerRightContent: <Button size="xs">추가</Button>,
+    children: <Text c="dimmed">등록된 사용자가 없습니다.</Text>,
+  },
+};
+
+export const WithTwoSections: Story = {
+  args: {
+    children: (
+      <>
+        <Panel.Section title="기본 정보">
+          <Stack gap="sm">
+            <TextInput label="이름" placeholder="이름을 입력하세요" />
+            <TextInput label="전화번호" placeholder="전화번호를 입력하세요" />
+          </Stack>
+        </Panel.Section>
+        <Panel.Section title="추가 정보">
+          <Stack gap="sm">
+            <TextInput label="이메일" placeholder="이메일을 입력하세요" />
+            <TextInput label="주소" placeholder="주소를 입력하세요" />
+          </Stack>
+        </Panel.Section>
+      </>
+    ),
+  },
+};
+
+export const WithFooter: Story = {
+  args: {
+    title: "설정",
+    children: (
+      <Stack gap="sm">
+        <TextInput label="이름" placeholder="이름을 입력하세요" />
+        <TextInput label="전화번호" placeholder="전화번호를 입력하세요" />
+      </Stack>
+    ),
+    footer: (
+      <Group justify="flex-end">
+        <Button variant="outline">취소</Button>
+        <Button>저장</Button>
+      </Group>
+    ),
+  },
+};
+
+export const bigContentBottomPadding: Story = {
+  args: {
+    title: "콘텐츠 하단 패딩이 100px일 때",
+    contentBottomPadding: 100,
+    children: (
+      <Stack gap="sm">
+        <TextInput label="이름" placeholder="이름을 입력하세요" />
+        <TextInput label="전화번호" placeholder="전화번호를 입력하세요" />
+      </Stack>
+    ),
+    footer: (
+      <Group justify="flex-end">
+        <Button>저장</Button>
+      </Group>
+    ),
+  },
+};