@uniai-fe/ui-legacy 0.1.1

package/src/modal/components/assets/alert/MessageBox.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import type { ComponentBaseProps } from "../../../../types";
+import StyledModalAlert from "../../../styles/styled-components/alert";
+import { clsx } from "clsx";
+
+export default function ModalAlertMessageBox({
+  children,
+  className,
+  size,
+  align,
+}: ComponentBaseProps &
+  Partial<{
+    size: number | string;
+    align: "center" | "left" | "right";
+  }>) {
+  return (
+    <StyledModalAlert.messageBox
+      className={clsx("modal-alert-message-box", className)}
+      $size={size}
+      $align={align}
+    >
+      {typeof children === "string" ? <p>{children}</p> : children}
+    </StyledModalAlert.messageBox>
+  );
+}

package/src/modal/components/assets/alert/index.tsx

@@ -0,0 +1,7 @@
+import ModalAlertMessageBox from "./MessageBox";
+
+const ModalAlert = {
+  MessageBox: ModalAlertMessageBox,
+};
+
+export default ModalAlert;

package/src/modal/components/assets/button/ButtonClose.tsx

@@ -0,0 +1,34 @@
+import Button from "../../../../button";
+
+/**
+ * 모달 닫기 버튼 컴포넌트
+ * - header 닫기 버튼 아님
+ * @component
+ * @param {object} props
+ * @param {boolean} [props.isViewModal] 보기전용 모달 여부
+ * @param {Function} props.onClose 닫기 실행
+ * @param {ReactNode} props.children
+ */
+export default function ModalButtonClose({
+  isViewModal,
+  onClose,
+  children,
+}: {
+  isViewModal?: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <Button.Default
+      buttonType="button"
+      styleOptions={{
+        priorityType: isViewModal ? "primary" : "secondary",
+        fillType: isViewModal ? "solid" : "outline",
+        sizeType: "modal",
+      }}
+      clickEvent={onClose}
+    >
+      {children}
+    </Button.Default>
+  );
+}

package/src/modal/components/assets/button/ButtonDialog.tsx

@@ -0,0 +1,32 @@
+import type { ModalFooterButtonType } from "../../../../types";
+
+import useModal from "../../../hooks/useModal";
+import Button from "../../../../button";
+
+export default function ModalButtonDialog({
+  stackKey,
+  buttonRole,
+  defaultOptions,
+  linkOptions,
+}: ModalFooterButtonType) {
+  const { closeModal } = useModal();
+
+  return typeof linkOptions?.href !== "undefined" ? (
+    <Button.Link {...defaultOptions} linkOptions={linkOptions}>
+      {defaultOptions.children}
+    </Button.Link>
+  ) : (
+    <Button.Default
+      buttonType="button"
+      state="active"
+      {...defaultOptions}
+      clickEvent={(e?: React.SyntheticEvent) => {
+        if (typeof defaultOptions.clickEvent !== "undefined")
+          defaultOptions.clickEvent(e);
+        if (buttonRole === "close") closeModal({ stackKey });
+      }}
+    >
+      {defaultOptions.children}
+    </Button.Default>
+  );
+}

package/src/modal/components/assets/button/index.tsx

@@ -0,0 +1,6 @@
+import ModalButtonClose from "./ButtonClose";
+import ModalButtonDialog from "./ButtonDialog";
+
+const ModalButton = { Close: ModalButtonClose, Dialog: ModalButtonDialog };
+
+export default ModalButton;

package/src/modal/components/assets/form/ButtonContainer.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledModalForm from "../../../styles/styled-components/form";
+import type { ComponentBaseProps } from "../../../../types";
+
+export default function ModalFormButtonContainer({
+  className,
+  children,
+}: ComponentBaseProps) {
+  return (
+    <StyledModalForm.button.container
+      className={clsx("modal-form-button-container", className)}
+    >
+      {children}
+    </StyledModalForm.button.container>
+  );
+}

package/src/modal/components/assets/form/Provider.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { FormProvider, useForm } from "react-hook-form";
+
+export default function ModalFormProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const formMethods = useForm({ mode: "all" });
+  return <FormProvider {...formMethods}>{children}</FormProvider>;
+}

package/src/modal/components/assets/form/index.tsx

@@ -0,0 +1,9 @@
+import ModalFormProvider from "./Provider";
+import ModalFormButtonContainer from "./ButtonContainer";
+
+const ModalUtilForm = {
+  FormProvider: ModalFormProvider,
+  ButtonContainer: ModalFormButtonContainer,
+};
+
+export default ModalUtilForm;

package/src/modal/components/assets/layout/Body.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import StyledModalLayout from "../../../styles/styled-components/layout";
+
+export default function ModalBody({ body }: { body: React.ReactNode }) {
+  return <StyledModalLayout.body>{body}</StyledModalLayout.body>;
+}

package/src/modal/components/assets/layout/Container.tsx

@@ -0,0 +1,37 @@
+import ModalBody from "./Body";
+import ModalFooter from "./Footer";
+import ModalFormProvider from "../form/Provider";
+import ModalHeader from "./Header";
+import type { ModalComponentPropsType } from "../../../../types";
+
+export default function ModalLayoutContainer({
+  stackKey,
+  modalProps: { data, isModalForm, isHeader, isNoTitle },
+  isDraggable,
+}: ModalComponentPropsType) {
+  return (
+    <>
+      {isHeader && (
+        <ModalHeader
+          stackKey={stackKey}
+          title={data?.headerTitle}
+          isCloseBtn={data?.headerCloseBtn}
+          isDraggable={isDraggable}
+          isAlert={data?.headerCloseBtn}
+          isNoTitle={isNoTitle}
+        />
+      )}
+      {isModalForm ? (
+        <ModalFormProvider>
+          <ModalBody body={data?.body} />
+          {data?.footerBtns && <ModalFooter btns={data.footerBtns} />}
+        </ModalFormProvider>
+      ) : (
+        <>
+          <ModalBody body={data?.body} />
+          {data?.footerBtns && <ModalFooter btns={data.footerBtns} />}
+        </>
+      )}
+    </>
+  );
+}

package/src/modal/components/assets/layout/Footer.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import ModalButtonDialog from "../button/ButtonDialog";
+import StyledModalLayout from "../../../styles/styled-components/layout";
+import type { ModalFooterButtonType } from "../../../../types";
+
+export default function ModalFooter({
+  btns,
+}: {
+  btns: (ModalFooterButtonType | null)[];
+}) {
+  return (
+    <StyledModalLayout.footer>
+      {btns.map(
+        (btn, index) =>
+          btn !== null && (
+            <ModalButtonDialog
+              key={`modal/footer/button/${btn.stackKey}/${btn.buttonRole}/${index}`}
+              {...btn}
+            />
+          ),
+      )}
+    </StyledModalLayout.footer>
+  );
+}

package/src/modal/components/assets/layout/Header.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import StyledModalLayout from "../../../styles/styled-components/layout";
+import IconButtonClose from "../../../../icon/components/button/Close";
+import useModal from "../../../hooks/useModal";
+
+export default function ModalHeader({
+  stackKey,
+  title,
+  isCloseBtn = true,
+  isDraggable,
+  isAlert,
+  isNoTitle,
+}: {
+  stackKey: string;
+} & Partial<{
+  title: React.ReactNode;
+  isCloseBtn: boolean;
+  isDraggable: boolean;
+  isAlert: boolean;
+  isNoTitle: boolean;
+}>) {
+  const { closeModal } = useModal(isDraggable ? "draggable" : undefined);
+
+  return (
+    <StyledModalLayout.header.container
+      $isAlert={isAlert}
+      $isNoTitle={isNoTitle}
+    >
+      {!isAlert && (
+        <StyledModalLayout.header.title>
+          {typeof title === "string" ? <span>{title ?? ""}</span> : title}
+        </StyledModalLayout.header.title>
+      )}
+      {isCloseBtn && (
+        <StyledModalLayout.header.closeButton
+          type="button"
+          onClick={() => closeModal({ stackKey })}
+        >
+          <IconButtonClose />
+        </StyledModalLayout.header.closeButton>
+      )}
+    </StyledModalLayout.header.container>
+  );
+}

package/src/modal/components/assets/layout/index.tsx

@@ -0,0 +1,14 @@
+import ModalHeader from "./Header";
+import ModalBody from "./Body";
+import ModalFooter from "./Footer";
+
+import ModalLayoutContainer from "./Container";
+
+const ModalLayout = {
+  Header: ModalHeader,
+  Body: ModalBody,
+  Footer: ModalFooter,
+  Container: ModalLayoutContainer,
+};
+
+export default ModalLayout;

package/src/modal/components/basic/Container.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import ModalLayoutContainer from "../assets/layout/Container";
+import StyledModalBasic from "../../styles/styled-components/basic";
+import type { ModalStateType } from "../../../types";
+
+/**
+ * 모달 컨텐츠 박스
+ * - 실질적인 모달 정보를 표현하는 레이아웃 단위
+ * @property {string} modalType 렌더링할 모달의 타입
+ * @property {string} role 모달의 역할
+ * @property {ReactNode} [custom] 커스텀 타입 모달의 경우 내부 컨텐츠 마크업 지정
+ */
+export default function ModalBasicContainer({
+  stackData,
+}: {
+  stackData: ModalStateType;
+}) {
+  const {
+    stackKey,
+    modalProps: {
+      width,
+      layoutType,
+      isHeader = true,
+      data,
+      isModalForm,
+      isNoTitle,
+    },
+  } = stackData;
+
+  return (
+    <StyledModalBasic.container
+      $width={width}
+      $layout={layoutType}
+      $isFooter={typeof data?.footerBtns !== "undefined"}
+      role="presentation" // onClick 이벤트 바인딩을 위한 속성
+      onClick={e => e.stopPropagation()} // 모달 내부 모든 영역 클릭에 대한 닫기 동작 방지
+    >
+      <ModalLayoutContainer
+        stackKey={stackKey}
+        modalProps={{ data, isModalForm, isHeader, isNoTitle }}
+      />
+    </StyledModalBasic.container>
+  );
+}

package/src/modal/components/basic/Provider.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import ModalBasicRoot from "./Root";
+
+import useModal from "../../hooks/useModal";
+import type { ModalStateType } from "../../../types";
+
+/**
+ * 모달 시작 지점
+ * - ModalProvider -> Modal -> ModalContainer -> 모달 타입에 따라 렌더링
+ * - 모달을 스택으로 관리하여, 누적 생성되도록 함.
+ * - 모달의 스택 관리는 jotai atom인 modalState에서 관리 (/src/global/states/modal.ts)
+ * - useModal hook을 통해 모달 제어
+ * - /app/layout.tsx에서 적용
+ */
+export default function ModalBasicProvider() {
+  // 모달 스택 데이터 호출
+  const { modalStacks } = useModal();
+
+  // 모달 스택에 따라 렌더링
+  return modalStacks && modalStacks.length > 0
+    ? modalStacks.map((stack: ModalStateType, stackIndex: number) => (
+        <ModalBasicRoot
+          {...stack}
+          index={stackIndex} // 최근 모달 순으로 누적하기 위해 z-index 적용을 위한 데이터
+          key={`modal_item_${stack.stackKey}`}
+        />
+      ))
+    : null;
+}

package/src/modal/components/basic/Root.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { clsx } from "clsx";
+
+import ModalBasicContainer from "./Container";
+
+import useModal from "../../hooks/useModal";
+
+import StyledModalBasic from "../../styles/styled-components/basic";
+
+import type {
+  ModalComponentPropsType,
+  ModalShowType,
+  ModalStateType,
+} from "../../../types";
+
+/**
+ * 모달 컴포넌트; 고정형 root 컴포넌트
+ * @component
+ * - jotai atom modalState에 의해 상태관리된다.
+ * - <ModalContainer /> 내부에서, 모달 호출 타입에 따라 모달 내부 컨텐츠가 교체된다.
+ * @property {string} stackKey 모달 스택 관리를 위한 고유 key
+ * @property {number} index 모달의 z-index 관리를 위한 데이터
+ * @property {ModalPropsType} modalProps 각 모달 스택 관리를 위한 세부 상태 (modalType, role 필수)
+ */
+export default function ModalBasicRoot({
+  stackKey,
+  index,
+  className,
+  modalProps,
+}: ModalComponentPropsType) {
+  // 모달 hook
+  const { modalStacks, updateModal, closeModal } = useModal();
+
+  // 모달스택 상태
+  const stackState = modalStacks.filter(
+    (stack: ModalStateType) => stack.stackKey === stackKey,
+  )[0];
+
+  // 모달 활성화 상태 관리
+  const [show, setShow] = useState<ModalShowType>(false);
+
+  // 모달 바깥 여백 클릭 시 닫기 처리
+  const closeByClickOutside = useCallback(
+    async (e: React.SyntheticEvent) => {
+      e.stopPropagation();
+      closeModal({ stackKey });
+    },
+    [closeModal, stackKey],
+  );
+
+  // 최초 모달 활성화 처리
+  useEffect(() => {
+    if (stackState?.modalProps.show === "init") {
+      updateModal({ stackKey, modalProps: { show: true } });
+    }
+  }, [stackKey, stackState.modalProps.show, updateModal]);
+
+  // 모달 활성화 상태 업데이트
+  useEffect(() => {
+    if (stackState?.modalProps.show)
+      setShow(
+        typeof stackState.modalProps.show === "boolean"
+          ? stackState.modalProps.show
+          : true,
+      );
+  }, [stackState.modalProps.show]);
+
+  return (
+    modalProps && (
+      <StyledModalBasic.root
+        className={clsx("modal-root", className, {
+          show,
+        })}
+        $stackIndex={index || 0}
+        role="presentation" // 비클릭 태그의 onClick 이벤트 바인딩을 위한 속성
+        onClick={closeByClickOutside} // 모달 바깥 여백 클릭 시 닫기 처리
+      >
+        <ModalBasicContainer stackData={stackState} />
+      </StyledModalBasic.root>
+    )
+  );
+}

package/src/modal/components/basic/index.tsx

@@ -0,0 +1,11 @@
+import ModalBasicProvider from "./Provider";
+import ModalBasicRoot from "./Root";
+import ModalBasicContainer from "./Container";
+
+const ModalBasic = {
+  Provider: ModalBasicProvider,
+  Root: ModalBasicRoot,
+  Container: ModalBasicContainer,
+};
+
+export default ModalBasic;

package/src/modal/components/draggable/Container.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useDraggable } from "@dnd-kit/core";
+import { CSS, type Transform } from "@dnd-kit/utilities";
+
+import ModalLayoutContainer from "../assets/layout/Container";
+import StyledModalDraggable from "../../styles/styled-components/draggable";
+import type { ModalComponentPropsType } from "../../../types";
+
+export default function ModalDraggableContainer({
+  stackKey,
+  modalProps: { layoutType, initDragPos, data, isModalForm },
+}: ModalComponentPropsType) {
+  const { setNodeRef, transform, attributes, listeners } = useDraggable({
+    id: stackKey,
+  });
+
+  const transformRef = useRef<Transform | null>(null);
+
+  const [basePos, setBasePos] = useState<React.CSSProperties>({
+    top: initDragPos?.y ?? 0,
+    left: initDragPos?.x ?? 0,
+  });
+  /**
+   * transform은 드래그하는 동안만 x,y값을 내보냄
+   * transform은 드래그가 종료되자마자 null을 내보냄
+   * 드래그되는 동안에는 basePos를 유지함
+   * 드래그가 종료되면 basePos에 null로 변환되기 직전의 transform x,y 값을 더해줌
+   */
+  useEffect(() => {
+    if (transformRef.current !== null && transform === null) {
+      setBasePos(prev => {
+        const res = { ...prev };
+
+        if (
+          typeof prev.top === "number" &&
+          typeof transformRef.current!.y === "number"
+        )
+          res.top = prev.top + transformRef.current!.y;
+        if (
+          typeof prev.left === "number" &&
+          typeof transformRef.current!.x === "number"
+        )
+          res.left = prev.left + transformRef.current!.x;
+
+        return res;
+      });
+      return;
+    }
+
+    transformRef.current = transform;
+  }, [transform]);
+
+  return (
+    <StyledModalDraggable.container
+      ref={setNodeRef}
+      stack-key={stackKey}
+      // role="presentation" // onClick 이벤트 바인딩을 위한 속성
+      {...attributes}
+      {...listeners}
+      $layout={layoutType}
+      $isFooter={typeof data?.footerBtns !== "undefined"}
+      $posX={basePos.left}
+      $posY={basePos.top}
+      $transform={CSS.Transform.toString(transform)}
+    >
+      <ModalLayoutContainer
+        stackKey={stackKey}
+        modalProps={{ data, isModalForm }}
+        isDraggable={true}
+      />
+    </StyledModalDraggable.container>
+  );
+}

package/src/modal/components/draggable/Provider.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { DndContext } from "@dnd-kit/core";
+import ModalDraggableContainer from "./Container";
+import useModal from "../../hooks/useModal";
+import type { ModalStateType } from "../../../types";
+
+export default function ModalDraggableProvider() {
+  const { modalDraggableStacks } = useModal("draggable");
+
+  return (
+    <DndContext>
+      {modalDraggableStacks && modalDraggableStacks.length > 0
+        ? modalDraggableStacks.map(
+            (stack: ModalStateType, stackIndex: number) => (
+              <ModalDraggableContainer
+                {...stack}
+                index={stackIndex}
+                key={stack.stackKey}
+              />
+            ),
+          )
+        : null}
+    </DndContext>
+  );
+}

package/src/modal/components/draggable/index.tsx

@@ -0,0 +1,9 @@
+import ModalDraggableProvider from "./Provider";
+import ModalDraggableContainer from "./Container";
+
+const ModalDraggable = {
+  Provider: ModalDraggableProvider,
+  Container: ModalDraggableContainer,
+};
+
+export default ModalDraggable;

package/src/modal/components/index.tsx

@@ -0,0 +1,17 @@
+import ModalLayout from "./assets/layout";
+import ModalUtilForm from "./assets/form";
+import ModalButton from "./assets/button";
+import ModalBasic from "./basic";
+import ModalDraggable from "./draggable";
+import ModalAlert from "./assets/alert";
+
+const Modal = {
+  Layout: ModalLayout,
+  Form: ModalUtilForm,
+  Button: ModalButton,
+  Basic: ModalBasic,
+  Draggable: ModalDraggable,
+  Alert: ModalAlert,
+};
+
+export default Modal;