Refactor : tasklist 생성 모달을 parallel & intercepting routing 방식으로 변경

src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/index.tsx

@@ -4,7 +4,6 @@ import TasklistItem from '@/app/(content-layout)/[groupId]/(groupId)/_[groupId]/
 import TasklistCreateModal from '@/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistCreateModal';
 import TasklistUpdateModal from '@/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistUpdateModal';
 import TasklistDeleteModal from '@/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistDeleteModal';
-import { ModalTrigger } from '@/components/common/modal';
 import { Group } from '@/types/group';
 import { Tasklist } from '@/types/tasklist';
 import Link from 'next/link';
@@ -41,10 +40,7 @@ export default function Tasklists({ groupId, tasklists }: TasklistsProps) {
           <h2 className="text-lg-md">
             할 일 목록 <span className="text-lg-rg text-gray500">({totalTasklistCount}개)</span>
           </h2>
-          {/* <ModalTrigger className="text-primary w-fit" modalId={tasklistCreateModalId}>
-            + 새로운 목록 추가하기
-          </ModalTrigger> */}
-          <Link href={`${pathname}/create`} className="text-primary w-fit">
+          <Link href={`${pathname}/create-tasklist`} className="text-primary w-fit">
             + 새로운 목록 추가하기
           </Link>
         </div>

src/app/(content-layout)/[groupId]/(groupId)/create-tasklist/page.tsx

@@ -0,0 +1,56 @@
+'use client';
+import { useState } from 'react';
+import { useParams } from 'next/navigation';
+import Button from '@/components/common/Button';
+import FormField from '@/components/common/formField';
+import Modal from '@/components/common/modal/newModal';
+import BouncingDots from '@/components/common/loading/BouncingDots';
+import { validateEmptyValue } from '@/utils/validators';
+import { createTasklistAction } from '@/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/actions';
+
+export default function Page() {
+  const { groupId } = useParams<{ groupId: string }>();
+  const [name, setName] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setName(e.target.value);
+  };
+
+  const handleClickAddButton = async () => {
+    setIsLoading(true);
+    if (validateEmptyValue(name)) {
+      setIsLoading(false);
+      return;
+    }
+    createTasklistAction(Number(groupId), name).then(() => {
+      setIsLoading(false);
+    });
+  };
+
+  return (
+    <main className="flex h-[calc(100vh-92px)] flex-col items-center justify-center">
+      <div className="w-fit">
+        <Modal.CloseButton />
+        <div className="mb-6 w-70">
+          <Modal.Heading className="mb-2">할 일 목록 추가</Modal.Heading>
+          <FormField
+            field="input"
+            placeholder="목록 이름을 입력해주세요."
+            isSuccess={!validateEmptyValue(name)}
+            isFailure={validateEmptyValue(name)}
+            errorMessage="이름을 입력해 주세요."
+            value={name}
+            onChange={handleChangeName}
+            disabled={isLoading}
+          />
+        </div>
+        <Modal.Footer className="w-70">
+          <Button onClick={handleClickAddButton} fontSize="16" size="fullWidth">
+            {isLoading ? <BouncingDots /> : '만들기'}
+          </Button>
+        </Modal.Footer>
+      </div>
+    </main>
+  );
+}

src/app/@modal/(.)[groupId]/create-tasklist/page.tsx

@@ -0,0 +1,58 @@
+'use client';
+import { useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Button from '@/components/common/Button';
+import FormField from '@/components/common/formField';
+import Modal from '@/components/common/modal/newModal';
+import BouncingDots from '@/components/common/loading/BouncingDots';
+import { validateEmptyValue } from '@/utils/validators';
+import { createTasklistAction } from '@/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/actions';
+
+export default function TasklistCreateModal() {
+  const { groupId } = useParams<{ groupId: string }>();
+  const router = useRouter();
+  const [name, setName] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setName(e.target.value);
+  };
+
+  const handleClickAddButton = async () => {
+    setIsLoading(true);
+    if (validateEmptyValue(name)) {
+      setIsLoading(false);
+      return;
+    }
+    createTasklistAction(Number(groupId), name).then(() => {
+      setIsLoading(false);
+      router.back();
+    });
+  };
+
+  return (
+    <Modal.Overlay>
+      <Modal.Container className="px-13 pt-12 pb-8 md:px-13 md:pt-12 md:pb-8">
+        <Modal.CloseButton />
+        <div className="mb-6 w-70">
+          <Modal.Heading className="mb-2">할 일 목록 추가</Modal.Heading>
+          <FormField
+            field="input"
+            placeholder="목록 이름을 입력해주세요."
+            isSuccess={!validateEmptyValue(name)}
+            isFailure={validateEmptyValue(name)}
+            errorMessage="이름을 입력해 주세요."
+            value={name}
+            onChange={handleChangeName}
+            disabled={isLoading}
+          />
+        </div>
+        <Modal.Footer className="w-70">
+          <Button onClick={handleClickAddButton} fontSize="16" size="fullWidth">
+            {isLoading ? <BouncingDots /> : '만들기'}
+          </Button>
+        </Modal.Footer>
+      </Modal.Container>
+    </Modal.Overlay>
+  );
+}

src/app/layout.tsx

@@ -11,8 +11,10 @@ export const metadata: Metadata = {
 
 export default function RootLayout({
   children,
+  modal,
 }: Readonly<{
   children: React.ReactNode;
+  modal: React.ReactNode;
 }>) {
   return (
     <html lang="ko">
@@ -24,6 +26,7 @@ export default function RootLayout({
               <div id="scroll-container" className="flex-1 overflow-y-auto">
                 {children}
               </div>
+              <div>{modal}</div>
               <div id="modal-container"></div>
             </ToastProvider>
           </UserProvider>

src/components/common/modal/newModal/CloseButton.tsx

@@ -0,0 +1,23 @@
+'use client';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import clsx from 'clsx';
+
+export default function ModalCloseButton({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<'button'>) {
+  const router = useRouter();
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    onClick?.(e);
+    router.back();
+  };
+
+  return (
+    <button className={clsx('absolute top-4 right-4', className)} onClick={handleClick} {...props}>
+      <Image width={24} height={24} alt="x" src={'/icons/x-icon.svg'} />
+    </button>
+  );
+}

src/components/common/modal/newModal/Container.tsx

@@ -0,0 +1,15 @@
+import clsx from 'clsx';
+
+export default function Container({ className, children, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={clsx(
+        'bg-bg200 animate-slide-up md:animate-scale-in absolute bottom-0 flex h-fit w-full flex-col items-center rounded-t-xl px-5 py-8 shadow-2xl/30 md:relative md:w-fit md:rounded-b-xl md:px-6',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

src/components/common/modal/newModal/Description.tsx

@@ -0,0 +1,15 @@
+import clsx from 'clsx';
+
+export default function Description({ className, children, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      className={clsx(
+        'text-gray300 text-sm-md text-center break-keep whitespace-normal',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </p>
+  );
+}

src/components/common/modal/newModal/Footer.tsx

@@ -0,0 +1,9 @@
+import clsx from 'clsx';
+
+export default function Footer({ className, children, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div className={clsx('flex justify-center gap-2', className)} {...props}>
+      {children}
+    </div>
+  );
+}

src/components/common/modal/newModal/Heading.tsx

@@ -0,0 +1,12 @@
+import clsx from 'clsx';
+
+export default function Heading({ className, children, ...props }: React.ComponentProps<'h2'>) {
+  return (
+    <h2
+      className={clsx('text-lg-md text-center break-keep whitespace-normal', className)}
+      {...props}
+    >
+      {children}
+    </h2>
+  );
+}

src/components/common/modal/newModal/Overlay.tsx

@@ -0,0 +1,47 @@
+'use client';
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import clsx from 'clsx';
+
+interface OverlayProps extends React.ComponentProps<'div'> {
+  disableOverlayClose?: boolean;
+}
+
+export default function Overlay({
+  disableOverlayClose = false,
+  onClick,
+  className,
+  children,
+  ...props
+}: OverlayProps) {
+  const router = useRouter();
+
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget && !disableOverlayClose) {
+      onClick?.(e);
+      router.back();
+    }
+  };
+
+  useEffect(function lockBodyScroll() {
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = originalStyle;
+    };
+  }, []);
+
+  return (
+    <div
+      className={clsx(
+        'fixed inset-0 z-999 flex items-center justify-center bg-black/50 backdrop-blur-md transition',
+        className
+      )}
+      onClick={handleClick}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

src/components/common/modal/newModal/index.ts

@@ -0,0 +1,17 @@
+import CloseButton from './CloseButton';
+import Container from './Container';
+import Description from './Description';
+import Footer from './Footer';
+import Heading from './Heading';
+import Overlay from './Overlay';
+
+const Modal = {
+  CloseButton,
+  Container,
+  Description,
+  Footer,
+  Heading,
+  Overlay,
+};
+
+export default Modal;