@uniai-fe/ui-legacy 0.1.1

package/src/modal/hooks/useModal.ts

@@ -0,0 +1,295 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { useAtom } from "jotai";
+
+import { modalDraggableState, modalState } from "../jotai/modal";
+
+import type { CloseFlagType, ModalStateType } from "../../types";
+
+/**
+ * 모달 Hook
+ * - 모달 스택 추가 -> 스택 추가 시, 자동 open 처리
+ */
+export default function useModal(isDraggable?: "draggable") {
+  // 활성화된 모든 모달 스택 상태관리
+  const [modalStacks, updateModalStack] = useAtom<ModalStateType[]>(modalState);
+  // 드래거블 모달 스택관리
+  const [modalDraggableStacks, updateModalDraggableStack] =
+    useAtom<ModalStateType[]>(modalDraggableState);
+
+  // 모달 닫기 시, 지연시간 적용을 위한 플래그
+  const [closeFlag, setCloseFlag] = useState<CloseFlagType>({
+    stackKey: "",
+    showDelay: 400,
+    callback: undefined,
+  });
+
+  // 스택 중복 확인
+  const isExistStack = useCallback(
+    (stackState: ModalStateType[], stackKey: string): boolean => {
+      const matched = stackState.filter(
+        stack => stack.stackKey === stackKey,
+      )[0];
+      return matched?.stackKey ? true : false;
+    },
+    [],
+  );
+
+  /**
+   * 모달 스택 추가
+   * @param {ModalStateType} newStack 새로 추가할 모달스택 상태객체
+   */
+  const newModal = useCallback(
+    (newStack: ModalStateType) => {
+      if (isDraggable) {
+        // 드래거블 모달 열기
+        if (isExistStack(modalDraggableStacks, newStack.stackKey)) {
+          console.log(`이미 열려있는 모달입니다.`, newStack.stackKey);
+          return;
+        }
+        updateModalDraggableStack((stacks: ModalStateType[]) => [
+          ...stacks,
+          {
+            ...newStack,
+            modalProps: { ...newStack.modalProps, show: "init" },
+          },
+        ]);
+        return;
+      }
+
+      // 일반 모달 열기
+      if (isExistStack(modalStacks, newStack.stackKey)) {
+        console.log(`이미 열려있는 모달입니다.`, newStack.stackKey);
+        return;
+      }
+      updateModalStack((stacks: ModalStateType[]) => [
+        ...stacks,
+        { ...newStack, modalProps: { ...newStack.modalProps, show: "init" } },
+      ]);
+
+      // console.log(`[useModal :: newModal] newStack: `, newStack);
+      // console.log(`[useModal :: newModal] modalStacks: `, modalStacks);
+    },
+    [
+      isDraggable,
+      isExistStack,
+      modalDraggableStacks,
+      modalStacks,
+      updateModalDraggableStack,
+      updateModalStack,
+    ],
+  );
+
+  /**
+   * 모달 스택 상태 업데이트
+   * @param {ModalStateType} updateStack 업데이트할 모달스택 상태객체
+   */
+  const updateModal = useCallback(
+    (updateStack: ModalStateType) => {
+      // console.log(`[useModal :: updateModal] updateStack: `, updateStack);
+      // console.log(`[useModal :: updateModal] modalStacks: `, modalStacks);
+
+      // 드래거블 모달 상태 업데이트
+      if (isDraggable) {
+        updateModalDraggableStack((stacks: ModalStateType[]) => {
+          const { stackKey } = updateStack;
+          const updatedStacks = stacks.map((stack: ModalStateType) => {
+            if (stack.stackKey === stackKey)
+              return {
+                ...stack,
+                ...updateStack,
+                modalProps: { ...stack.modalProps, ...updateStack.modalProps },
+              };
+            return stack;
+          });
+          return updatedStacks;
+        });
+        return;
+      }
+
+      // 일반 모달 상태 업데이트
+      updateModalStack((stacks: ModalStateType[]) => {
+        const { stackKey } = updateStack;
+        const updatedStacks = stacks.map((stack: ModalStateType) => {
+          if (stack.stackKey === stackKey)
+            return {
+              ...stack,
+              ...updateStack,
+              modalProps: { ...stack.modalProps, ...updateStack.modalProps },
+            };
+          return stack;
+        });
+        return updatedStacks;
+      });
+    },
+    [isDraggable, updateModalDraggableStack, updateModalStack],
+    // [modalStacks, updateModalStack],
+  );
+
+  /**
+   * 모달 스택 닫기
+   * @param {string} stackKey 모달창을 닫을 스택의 stackKey
+   */
+  const closeModal = useCallback(
+    ({
+      stackKey: closeStackKey,
+      callback,
+    }: {
+      stackKey: string;
+      callback?: () => void;
+    }) => {
+      // console.log(`[useModal :: closeModal] stackKey:`, closeStackKey);
+      // console.log(`[useModal :: closeModal] modalStacks:`, modalStacks);
+
+      // 모달스택 존재여부 체크
+      if (
+        (isDraggable && modalDraggableStacks.length === 0) ||
+        (!isDraggable && modalStacks.length === 0)
+      ) {
+        console.log(`[useModal :: closeModal] modalStacks 없음`);
+        return;
+      }
+
+      // console.log(
+      //   `modalStacks`,
+      //   modalStacks.map(stack => stack.stackKey),
+      // );
+      // 지정 키와 일치하는 스택 체크
+      const filteredStacks = isDraggable
+        ? modalDraggableStacks.filter(stack => {
+            // console.log(
+            //   `stack.stackKey(${stack.stackKey}) === closeStackKey${closeStackKey}`,
+            // );
+            return stack.stackKey === closeStackKey;
+          })
+        : modalStacks.filter(stack => {
+            // console.log(
+            //   `stack.stackKey(${stack.stackKey}) === closeStackKey${closeStackKey}`,
+            // );
+            return stack.stackKey === closeStackKey;
+          });
+      // console.log(`[useModal :: closeModal] filteredStacks: `, filteredStacks);
+
+      if (filteredStacks.length === 0) {
+        console.log(
+          `[useModal :: closeModal] 지정된 모달 스택키와 일치하는 스택 없음. `,
+        );
+        return;
+      }
+
+      const closeStack = filteredStacks[0] as ModalStateType;
+      // console.log(`[useModal :: closeModal] closeStack: `, closeStack);
+
+      const {
+        modalProps: { showDelay },
+      } = closeStack;
+
+      // 효과 먼저 적용
+      if (isDraggable)
+        updateModalDraggableStack((stacks: ModalStateType[]) => {
+          return stacks.map((stack: ModalStateType) => {
+            if (stack.stackKey === closeStackKey) {
+              return {
+                ...stack,
+                modalProps: { ...stack.modalProps, show: false },
+              };
+            }
+            return stack;
+          });
+        });
+      else
+        updateModalStack((stacks: ModalStateType[]) => {
+          return stacks.map((stack: ModalStateType) => {
+            if (stack.stackKey === closeStackKey) {
+              return {
+                ...stack,
+                modalProps: { ...stack.modalProps, show: false },
+              };
+            }
+            return stack;
+          });
+        });
+
+      // 닫기 상태 업데이트
+      const updateCloseFlag = {
+        stackKey: closeStackKey,
+        showDelay: typeof showDelay === "number" ? showDelay : 400,
+        callback,
+      };
+      setCloseFlag(updateCloseFlag);
+    },
+    [
+      isDraggable,
+      modalDraggableStacks,
+      modalStacks,
+      updateModalDraggableStack,
+      updateModalStack,
+    ],
+  );
+
+  // 닫기 동작 시, 닫기 모션 후 스택 제거
+  useEffect(() => {
+    if (!closeFlag.stackKey) return;
+    // console.log(`[useModal :: closeModal - useEffect] closeFlag:`, closeFlag);
+
+    // 효과 지연시간 이후 모달스택 제거
+    let closeTimer: NodeJS.Timeout | undefined = undefined;
+
+    // 지연 시간 뒤 동작
+    closeTimer = setTimeout(() => {
+      // 모달 스택 업데이트
+      if (isDraggable)
+        updateModalDraggableStack((stacks: ModalStateType[]) => {
+          // 스택이 없는 경우, 그대로 반환
+          if (stacks.length === 0) return stacks;
+
+          // 닫아야하는 모달 스택키와 불일치하는 배열로만 반환
+          const filteredStacks = stacks.filter(
+            stack => stack.stackKey !== closeFlag.stackKey,
+          );
+
+          // console.log(
+          //   `[useModal :: closeModal - useEffect] update filteredStacks:`,
+          //   filteredStacks,
+          // );
+          return filteredStacks;
+        });
+      else
+        updateModalStack((stacks: ModalStateType[]) => {
+          // 스택이 없는 경우, 그대로 반환
+          if (stacks.length === 0) return stacks;
+
+          // 닫아야하는 모달 스택키와 불일치하는 배열로만 반환
+          const filteredStacks = stacks.filter(
+            stack => stack.stackKey !== closeFlag.stackKey,
+          );
+
+          // console.log(
+          //   `[useModal :: closeModal - useEffect] update filteredStacks:`,
+          //   filteredStacks,
+          // );
+          return filteredStacks;
+        });
+
+      if (closeFlag.callback) closeFlag.callback();
+
+      // 닫기 상태 초기화
+      setCloseFlag({ stackKey: "", showDelay: 400 });
+    }, closeFlag.showDelay);
+
+    // 언마운트 시 타이머 초기화
+    return () => {
+      if (closeTimer !== undefined) clearTimeout(closeTimer);
+      closeTimer = undefined;
+    };
+  }, [closeFlag, isDraggable, updateModalDraggableStack, updateModalStack]);
+
+  return {
+    modalStacks,
+    modalDraggableStacks,
+    newModal,
+    updateModal,
+    closeModal,
+  };
+}

package/src/modal/index.tsx

@@ -0,0 +1,3 @@
+import Modal from "./components";
+
+export default Modal;

package/src/modal/jotai/modal.ts

@@ -0,0 +1,18 @@
+import { atom } from "jotai";
+import type { ModalStateType } from "../../types";
+
+/**
+ * 모달 상태관리
+ * @state
+ * @desc
+ * - 스택을 배열로 관리
+ */
+export const modalState = atom<ModalStateType[]>([]);
+
+/**
+ * 드래거블 모달 상태관리
+ * @state
+ * @desc
+ * - 스택을 배열로 관리
+ */
+export const modalDraggableState = atom<ModalStateType[]>([]);

package/src/modal/modal.scss

@@ -0,0 +1,2 @@
+@use "./styles/scss/variables.scss";
+@use "./styles/scss/legacy.scss";

package/src/modal/styled.tsx

@@ -0,0 +1,15 @@
+import StyledModalAlert from "./styles/styled-components/alert";
+import StyledModalBasic from "./styles/styled-components/basic";
+import StyledModalDraggable from "./styles/styled-components/draggable";
+import StyledModalForm from "./styles/styled-components/form";
+import StyledModalLayout from "./styles/styled-components/layout";
+
+const StyledModal = {
+  layout: StyledModalLayout,
+  basic: StyledModalBasic,
+  draggable: StyledModalDraggable,
+  form: StyledModalForm,
+  alert: StyledModalAlert,
+};
+
+export default StyledModal;

package/src/modal/styles/scss/legacy.scss

@@ -0,0 +1,254 @@
+.modal-container {
+  &[modal-type="dialog-with-header"] {
+    width: var(--modal-width-type-dialog-with-header);
+  }
+  &[modal-type="dialog-without-header"] {
+    width: var(--modal-width-type-dialog-without-header);
+  }
+  &[modal-type="dialog-without-header-no-buttons"] {
+    width: var(--modal-width-type-dialog-without-header-no-buttons);
+  }
+  &[modal-type="info-without-header"] {
+    width: var(--modal-width-type-info-without-header);
+  }
+  &[modal-type="dialog-form-with-header"] {
+    width: var(--modal-width-type-dialog-with-header);
+  }
+  &[modal-type="dialog-form-without-header"] {
+    width: var(--modal-width-type-dialog-without-header);
+  }
+  &[modal-type="form-row"] {
+    width: var(--modal-width-type-form-row);
+  }
+  &[modal-type="form-row-wider"] {
+    width: var(--modal-width-type-form-row-wider);
+  }
+  &[modal-type="form-table-view"] {
+    width: var(--modal-width-type-form-table-view);
+  }
+  &[modal-type="form-table-view-larger"] {
+    width: var(--modal-width-type-form-table-view-larger);
+  }
+  &[modal-type="form-table-simple"] {
+    width: var(--modal-width-type-form-table-simple);
+  }
+  &[modal-type="form-table-massive"] {
+    width: var(--modal-width-type-form-table-massive);
+  }
+  &[modal-type="form-search"] {
+    width: var(--modal-width-type-form-search);
+  }
+
+  &[modal-type^="dialog"] {
+    display: block;
+    border-radius: 8px;
+    .modal-body {
+      flex: 0;
+      // padding: 20px;
+    }
+    .modal-dialog-message-container {
+      width: 100%;
+      &.only-message {
+        padding: 0;
+      }
+    }
+  }
+  &[modal-type^="dialog-without"] {
+    padding: 20px;
+    --button-name-size-modal: 14px;
+    .modal-header {
+      --modal-header-height: 24px;
+      --modal-header-bg: transparent;
+      --modal-header-border-color: transparent;
+      margin-top: 20px;
+      padding: 0;
+      margin: 0;
+    }
+    .modal-body {
+      padding-top: 20px;
+      padding-bottom: 20px;
+    }
+    .modal-footer {
+      padding: 0;
+      margin-top: 20px;
+    }
+  }
+  &[modal-type="dialog-info-without-header"] {
+    padding: 20px;
+    --button-name-size-modal: 14px;
+    .modal-header {
+      --modal-header-height: 24px;
+      --modal-header-bg: transparent;
+      --modal-header-border-color: transparent;
+      margin-top: 20px;
+      padding: 0;
+      margin: 0;
+    }
+    .modal-body {
+      padding: 0;
+    }
+    .modal-footer {
+      padding: 0;
+      margin-top: 20px;
+    }
+  }
+  &[modal-type="dialog-without-header-no-buttons"] {
+    .modal-header {
+      .modal-header-close-button {
+        width: 18px;
+        height: 18px;
+      }
+    }
+    p {
+      margin-bottom: 24px;
+      font-size: 16px;
+      line-height: 24px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  &[modal-type^="dialog-form"] {
+    .modal-form-button-container {
+      padding-top: 20px;
+    }
+  }
+  &[modal-type^="dialog-form-without"] {
+    padding: 20px;
+    .modal-header {
+      --modal-header-height: 24px;
+      --modal-header-bg: transparent;
+      --modal-header-border-color: transparent;
+      margin-top: 20px;
+      padding: 0;
+      margin: 0;
+    }
+    .modal-body {
+      padding: 20px 0 0;
+    }
+  }
+}
+
+.modal-dialog-message-container {
+  // width: 340px;
+  &.only-message {
+    padding: 30px 0;
+    text-align: center;
+  }
+  p {
+    font-size: 18px;
+    color: var(--color_90);
+    line-height: 27px;
+  }
+}
+
+.modal-radio-menu-container {
+  padding-top: 15px;
+  .input-item {
+    padding: 12px 0;
+  }
+
+  .input-container {
+    .input-label {
+      font-size: 16px;
+      color: var(--color_90);
+    }
+  }
+}
+
+.modal-table-header {
+  width: 100%;
+  padding: 8px 0;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  .input-item {
+    flex: 0;
+    width: 160px;
+    margin-left: auto;
+    font-size: 12px;
+  }
+}
+
+.modal-row-item {
+  width: 100%;
+  margin-top: 20px;
+  display: flex;
+  align-items: flex-start;
+  &:first-child {
+    margin-top: 0;
+  }
+  .modal-row-title {
+    width: var(--modal-row-title-width);
+    height: var(--modal-row-title-height);
+    margin-right: var(--modal-row-title-margin);
+    display: flex;
+    align-items: center;
+  }
+  .modal-row-contents {
+    width: calc(
+      100% - (var(--modal-row-title-width) + var(--modal-row-title-margin))
+    );
+  }
+
+  .input-label {
+    font-size: 16px;
+  }
+}
+
+.modal-scroll-container {
+  width: 100%;
+  max-height: calc(
+    100vh - var(--modal-root-padding) *
+      2 - var(--modal-header-height) - var(--modal-footer-height) - var(
+        --modal-padding
+      ) *
+      2
+  );
+  overflow: hidden auto;
+  position: relative;
+
+  .modal-scroll-wrapper {
+    width: 99%;
+    height: fit-content;
+  }
+
+  .modal-form-button-container {
+    position: sticky;
+    bottom: 0;
+    z-index: 100;
+  }
+}
+
+.modal-massive-table-container {
+  width: 100%;
+  .modal-massive-table-header {
+    width: 100%;
+    height: 36px;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+  }
+  .modal-massive-table-header-title {
+    width: fit-content;
+    font-size: 20px;
+    color: var(--color_90);
+    font-weight: 600;
+  }
+  .modal-massive-table-header-util-container {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.modal-dialog-input-box-container {
+  margin-top: 10px;
+  --input-height: 52px;
+  .modal-dialog-input-notice-container {
+    margin-top: 10px;
+    font-size: 14px;
+    color: var(--color_60);
+    line-height: 21px;
+  }
+}

package/src/modal/styles/scss/variables.scss

@@ -0,0 +1,32 @@
+:root {
+  --modal-padding-basic-root: 6rem;
+  --modal-padding: 3rem;
+  --modal-border-radius: 2rem;
+
+  --modal-header-height: 6rem;
+  --modal-header-border-color: var(--color_20);
+  --modal-header-bg: var(--color_5);
+  --modal-header-title-size: 2rem;
+
+  --modal-header-close-button-color: var(--color_90);
+
+  --modal-footer-height: calc(
+    var(--button-height-modal) + var(--modal-padding)
+  );
+  --modal-row-title-width: 5rem;
+  --modal-row-title-height: 3.6rem;
+  --modal-row-title-margin: 2rem;
+
+  // --modal-width-type-form-row: 530px;
+  // --modal-width-type-form-row-wider: 600px;
+  // --modal-width-type-form-table-view: 530px;
+  // --modal-width-type-form-table-view-larger: 560px;
+  // --modal-width-type-form-table-simple: 660px;
+  // --modal-width-type-form-table-massive: 1100px;
+  // --modal-width-type-form-search: 560px;
+  // --modal-width-type-dialog-with-header: 400px;
+  // --modal-width-type-dialog-without-header: 330px;
+  // --modal-width-type-dialog-without-header-no-buttons: 400px;
+  // --modal-width-type-info-without-header-: 400px;
+  // --modal-width-type-: 400px;
+}

package/src/modal/styles/styled-components/alert.ts

@@ -0,0 +1,24 @@
+"use client";
+
+import { styled } from "styled-components";
+import { styleBaseSize } from "@uniai-fe/util-functions";
+
+type StyledAlertProps = Partial<{
+  $align: "center" | "left" | "right";
+  $size: number | string;
+}>;
+const messageBox = styled.div<StyledAlertProps>`
+  width: 100%;
+  text-align: ${({ $align }) => $align || "center"};
+  p {
+    font-size: ${({ $size }) => styleBaseSize("rem", $size, 18)};
+    color: var(--color_90);
+    font-weight: 500;
+    line-height: 1.5em;
+  }
+`;
+const StyledModalAlert = {
+  messageBox,
+};
+
+export default StyledModalAlert;

package/src/modal/styles/styled-components/basic.ts

@@ -0,0 +1,41 @@
+"use client";
+
+import { styled } from "styled-components";
+import StyledModalLayout from "./layout";
+
+type StyledModalBasicRootProps = {
+  $stackIndex: number;
+};
+
+const root = styled.div<StyledModalBasicRootProps>`
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: ${({ $stackIndex }) =>
+    9999 +
+    $stackIndex *
+      100}; // modal 스택에 따라 javascript에서 동적으로 계산된다. 최소값 9999, 100단위로 증가
+
+  width: 100%;
+  height: 100vh;
+  padding: var(--modal-padding-basic-root);
+  background: rgba(0, 0, 0, 0.4);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  transition: opacity 0.3s;
+  opacity: 0;
+  &.show {
+    opacity: 1;
+  }
+`;
+const container = styled(StyledModalLayout.container)``;
+
+const StyledModalBasic = {
+  root,
+  container,
+};
+
+export default StyledModalBasic;