From c97fa83f1acc14aa61adfb8d1613a803b30dfcbf Mon Sep 17 00:00:00 2001 From: "Seok-jun.Kang" Date: Mon, 2 Jun 2025 16:17:08 +0900 Subject: [PATCH 1/5] =?UTF-8?q?Feat=20:=20intercepting=20routes=20?= =?UTF-8?q?=EB=B0=A9=EC=8B=9D=20=EB=AA=A8=EB=8B=AC=EC=97=90=20=EB=A7=9E?= =?UTF-8?q?=EB=8A=94=20=EB=AA=A8=EB=8B=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/modal/newModal/CloseButton.tsx | 23 +++++++++ .../common/modal/newModal/Container.tsx | 15 ++++++ .../common/modal/newModal/Description.tsx | 15 ++++++ .../common/modal/newModal/Footer.tsx | 9 ++++ .../common/modal/newModal/Heading.tsx | 12 +++++ .../common/modal/newModal/Overlay.tsx | 47 +++++++++++++++++++ src/components/common/modal/newModal/index.ts | 17 +++++++ 7 files changed, 138 insertions(+) create mode 100644 src/components/common/modal/newModal/CloseButton.tsx create mode 100644 src/components/common/modal/newModal/Container.tsx create mode 100644 src/components/common/modal/newModal/Description.tsx create mode 100644 src/components/common/modal/newModal/Footer.tsx create mode 100644 src/components/common/modal/newModal/Heading.tsx create mode 100644 src/components/common/modal/newModal/Overlay.tsx create mode 100644 src/components/common/modal/newModal/index.ts diff --git a/src/components/common/modal/newModal/CloseButton.tsx b/src/components/common/modal/newModal/CloseButton.tsx new file mode 100644 index 00000000..634aa37a --- /dev/null +++ b/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) => { + onClick?.(e); + router.back(); + }; + + return ( + + ); +} diff --git a/src/components/common/modal/newModal/Container.tsx b/src/components/common/modal/newModal/Container.tsx new file mode 100644 index 00000000..e95b4a6b --- /dev/null +++ b/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 ( +
+ {children} +
+ ); +} diff --git a/src/components/common/modal/newModal/Description.tsx b/src/components/common/modal/newModal/Description.tsx new file mode 100644 index 00000000..75ffbb04 --- /dev/null +++ b/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 ( +

+ {children} +

+ ); +} diff --git a/src/components/common/modal/newModal/Footer.tsx b/src/components/common/modal/newModal/Footer.tsx new file mode 100644 index 00000000..1ff370c8 --- /dev/null +++ b/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 ( +
+ {children} +
+ ); +} diff --git a/src/components/common/modal/newModal/Heading.tsx b/src/components/common/modal/newModal/Heading.tsx new file mode 100644 index 00000000..59aa69a0 --- /dev/null +++ b/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 ( +

+ {children} +

+ ); +} diff --git a/src/components/common/modal/newModal/Overlay.tsx b/src/components/common/modal/newModal/Overlay.tsx new file mode 100644 index 00000000..4b823283 --- /dev/null +++ b/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) => { + 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 ( +
+ {children} +
+ ); +} diff --git a/src/components/common/modal/newModal/index.ts b/src/components/common/modal/newModal/index.ts new file mode 100644 index 00000000..d0138340 --- /dev/null +++ b/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; From e77ac26939757356a073c32a1b1d370a3f5edf36 Mon Sep 17 00:00:00 2001 From: "Seok-jun.Kang" Date: Mon, 2 Jun 2025 17:11:59 +0900 Subject: [PATCH 2/5] =?UTF-8?q?Feat=20:=20intercepting=20routing=20?= =?UTF-8?q?=EB=B0=A9=EC=8B=9D=20=EB=AA=A8=EB=8B=AC=EC=9D=98=20=EB=9D=BC?= =?UTF-8?q?=EC=9A=B0=ED=8C=85=20=EC=A3=BC=EC=86=8C=EB=A5=BC=20=EB=B0=94?= =?UTF-8?q?=EA=BE=B8=EA=B3=A0,=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=EB=A5=BC=20=EB=A3=A8=ED=8A=B8=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=EC=9C=BC=EB=A1=9C=20=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(groupId)/@modal/(.)create/page.tsx | 30 ---------- .../(groupId)/_[groupId]/Tasklists/index.tsx | 6 +- .../(groupId)/create-tasklist/page.tsx | 5 ++ .../[groupId]/(groupId)/create/page.tsx | 3 - .../[groupId]/(groupId)/layout.tsx | 14 ----- .../(.)[groupId]/create-tasklist/page.tsx | 58 +++++++++++++++++++ .../(groupId) => }/@modal/default.tsx | 0 src/app/layout.tsx | 3 + 8 files changed, 67 insertions(+), 52 deletions(-) delete mode 100644 src/app/(content-layout)/[groupId]/(groupId)/@modal/(.)create/page.tsx create mode 100644 src/app/(content-layout)/[groupId]/(groupId)/create-tasklist/page.tsx delete mode 100644 src/app/(content-layout)/[groupId]/(groupId)/create/page.tsx delete mode 100644 src/app/(content-layout)/[groupId]/(groupId)/layout.tsx create mode 100644 src/app/@modal/(.)[groupId]/create-tasklist/page.tsx rename src/app/{(content-layout)/[groupId]/(groupId) => }/@modal/default.tsx (100%) diff --git a/src/app/(content-layout)/[groupId]/(groupId)/@modal/(.)create/page.tsx b/src/app/(content-layout)/[groupId]/(groupId)/@modal/(.)create/page.tsx deleted file mode 100644 index d26ae3f0..00000000 --- a/src/app/(content-layout)/[groupId]/(groupId)/@modal/(.)create/page.tsx +++ /dev/null @@ -1,30 +0,0 @@ -'use client'; -import { useEffect } from 'react'; -import { - ModalCloseButton, - ModalContainer, - ModalFooter, - ModalHeading, - ModalOverlay, -} from '@/components/common/modal'; -import { useModal, ModalPortal } from '@/contexts/ModalContext'; -export default function Page() { - const { openModal } = useModal(); - useEffect(() => { - openModal('modalId'); - }, []); - - return ( - - - - -
- 할 일 목록 추가 -
- - - - - ); -} diff --git a/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/index.tsx b/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/index.tsx index 68755d88..51c99634 100644 --- a/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/index.tsx +++ b/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) {

할 일 목록 ({totalTasklistCount}개)

- {/* - + 새로운 목록 추가하기 - */} - + + 새로운 목록 추가하기 diff --git a/src/app/(content-layout)/[groupId]/(groupId)/create-tasklist/page.tsx b/src/app/(content-layout)/[groupId]/(groupId)/create-tasklist/page.tsx new file mode 100644 index 00000000..b302afcf --- /dev/null +++ b/src/app/(content-layout)/[groupId]/(groupId)/create-tasklist/page.tsx @@ -0,0 +1,5 @@ +import React from 'react'; + +export default function Page() { + return
Page
; +} diff --git a/src/app/(content-layout)/[groupId]/(groupId)/create/page.tsx b/src/app/(content-layout)/[groupId]/(groupId)/create/page.tsx deleted file mode 100644 index 55bc0258..00000000 --- a/src/app/(content-layout)/[groupId]/(groupId)/create/page.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function Page() { - return <>zz; -} diff --git a/src/app/(content-layout)/[groupId]/(groupId)/layout.tsx b/src/app/(content-layout)/[groupId]/(groupId)/layout.tsx deleted file mode 100644 index 73e93591..00000000 --- a/src/app/(content-layout)/[groupId]/(groupId)/layout.tsx +++ /dev/null @@ -1,14 +0,0 @@ -export default function Layout({ - children, - modal, -}: { - children: React.ReactNode; - modal: React.ReactNode; -}) { - return ( - <> -
{children}
-
{modal}
- - ); -} diff --git a/src/app/@modal/(.)[groupId]/create-tasklist/page.tsx b/src/app/@modal/(.)[groupId]/create-tasklist/page.tsx new file mode 100644 index 00000000..046265f8 --- /dev/null +++ b/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) => { + 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 ( + + + +
+ 할 일 목록 추가 + +
+ + + + + + ); +} diff --git a/src/app/(content-layout)/[groupId]/(groupId)/@modal/default.tsx b/src/app/@modal/default.tsx similarity index 100% rename from src/app/(content-layout)/[groupId]/(groupId)/@modal/default.tsx rename to src/app/@modal/default.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index de8e1aee..0871d184 100644 --- a/src/app/layout.tsx +++ b/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 ( @@ -24,6 +26,7 @@ export default function RootLayout({
{children}
+
{modal}
From 9ff07e651b4e552d3bc8707fe7f8e9cfc4802272 Mon Sep 17 00:00:00 2001 From: "Seok-jun.Kang" Date: Mon, 2 Jun 2025 17:29:56 +0900 Subject: [PATCH 3/5] =?UTF-8?q?Feat=20:=20=EB=AA=A8=EB=8B=AC=20=EC=95=88?= =?UTF-8?q?=20=EC=97=B4=EC=97=88=EC=9D=84=20=EB=95=8C=20=EA=B8=B0=EB=B3=B8?= =?UTF-8?q?=20=EB=9D=BC=EC=9A=B0=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(groupId)/create-tasklist/page.tsx | 55 ++++++++++++++++++- 1 file changed, 53 insertions(+), 2 deletions(-) diff --git a/src/app/(content-layout)/[groupId]/(groupId)/create-tasklist/page.tsx b/src/app/(content-layout)/[groupId]/(groupId)/create-tasklist/page.tsx index b302afcf..747f525c 100644 --- a/src/app/(content-layout)/[groupId]/(groupId)/create-tasklist/page.tsx +++ b/src/app/(content-layout)/[groupId]/(groupId)/create-tasklist/page.tsx @@ -1,5 +1,56 @@ -import React from 'react'; +'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() { - return
Page
; + const { groupId } = useParams<{ groupId: string }>(); + const [name, setName] = useState(''); + const [isLoading, setIsLoading] = useState(false); + + const handleChangeName = (e: React.ChangeEvent) => { + setName(e.target.value); + }; + + const handleClickAddButton = async () => { + setIsLoading(true); + if (validateEmptyValue(name)) { + setIsLoading(false); + return; + } + createTasklistAction(Number(groupId), name).then(() => { + setIsLoading(false); + }); + }; + + return ( +
+
+ +
+ 할 일 목록 추가 + +
+ + + +
+
+ ); } From 57a0885343bf3ae3913bd0b9c20e20854f413923 Mon Sep 17 00:00:00 2001 From: "Seok-jun.Kang" Date: Wed, 4 Jun 2025 15:28:33 +0900 Subject: [PATCH 4/5] =?UTF-8?q?Refactor=20:=20tasklist=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=EB=AA=A8=EB=8B=AC=20=EB=9D=BC=EC=9A=B0=ED=8A=B8=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Tasklists/TasklistCreateModal.tsx | 74 ------------------- .../(groupId)/_[groupId]/Tasklists/index.tsx | 10 --- .../create-tasklist/page.tsx | 2 +- src/app/[...modal]/page.tsx | 13 ++++ 4 files changed, 14 insertions(+), 85 deletions(-) delete mode 100644 src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistCreateModal.tsx rename src/app/@modal/{(.)[groupId] => (...)[...modal]}/create-tasklist/page.tsx (97%) create mode 100644 src/app/[...modal]/page.tsx diff --git a/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistCreateModal.tsx b/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistCreateModal.tsx deleted file mode 100644 index f2521707..00000000 --- a/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistCreateModal.tsx +++ /dev/null @@ -1,74 +0,0 @@ -'use client'; -import { useState } from 'react'; -import Button from '@/components/common/Button'; -import FormField from '@/components/common/formField'; -import { - ModalCloseButton, - ModalContainer, - ModalFooter, - ModalHeading, - ModalOverlay, -} from '@/components/common/modal'; -import { useModal, ModalPortal } from '@/contexts/ModalContext'; -import BouncingDots from '@/components/common/loading/BouncingDots'; -import { validateEmptyValue } from '@/utils/validators'; - -interface TasklistCreateModalProps { - modalId: string; - isLoading: boolean; - createTasklist: (name: string) => void; -} - -export default function TasklistCreateModal({ - modalId, - isLoading, - createTasklist, -}: TasklistCreateModalProps) { - const [name, setName] = useState(''); - const { closeModal } = useModal(); - - const handleChangeName = (e: React.ChangeEvent) => { - setName(e.target.value); - }; - - const clearName = () => { - setName(''); - }; - - const handleClickAddButton = async () => { - if (validateEmptyValue(name)) return; - createTasklist(name); - clearName(); - closeModal(modalId); - }; - - return ( - <> - - - - -
- 할 일 목록 추가 - -
- - - - - - - - ); -} diff --git a/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/index.tsx b/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/index.tsx index 51c99634..183ac8f4 100644 --- a/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/index.tsx +++ b/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/index.tsx @@ -1,7 +1,6 @@ 'use client'; import useTasklists from '@/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/useTasklists'; import TasklistItem from '@/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistItem'; -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 { Group } from '@/types/group'; @@ -19,15 +18,12 @@ export default function Tasklists({ groupId, tasklists }: TasklistsProps) { optimisticTasklists, selectedTasklist, setSelectedTasklist, - isCreateLoading, isUpdateLoading, isDeleteLoading, - createTasklist, updateTasklist, deleteTasklist, } = useTasklists(groupId, tasklists); - const tasklistCreateModalId = `tasklistCreate-${groupId}`; const tasklistUpdateModalId = selectedTasklist ? `tasklistUpdate-${selectedTasklist.id}` : ''; const tasklistDeleteModalId = selectedTasklist ? `tasklistDelete-${selectedTasklist.id}` : ''; const totalTasklistCount = optimisticTasklists.length; @@ -56,12 +52,6 @@ export default function Tasklists({ groupId, tasklists }: TasklistsProps) { - - {selectedTasklist && ( (); const router = useRouter(); const [name, setName] = useState(''); diff --git a/src/app/[...modal]/page.tsx b/src/app/[...modal]/page.tsx new file mode 100644 index 00000000..abb52786 --- /dev/null +++ b/src/app/[...modal]/page.tsx @@ -0,0 +1,13 @@ +'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 MymodalPage() { + return <>zz; +} From 93475d0d8a2e4bd0d58484390b663a811d170171 Mon Sep 17 00:00:00 2001 From: "Seok-jun.Kang" Date: Wed, 4 Jun 2025 15:33:59 +0900 Subject: [PATCH 5/5] =?UTF-8?q?Fix=20:=20tasklist=20=EC=83=9D=EC=84=B1=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EA=B2=BD=EB=A1=9C=20=EC=A7=81=EC=A0=91=20?= =?UTF-8?q?=EB=B0=A9=EB=AC=B8=20=EC=8B=9C=20not=20found=20=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(groupId)/create-tasklist/page.tsx | 56 ------------------- src/app/[...modal]/page.tsx | 14 +---- 2 files changed, 3 insertions(+), 67 deletions(-) delete mode 100644 src/app/(content-layout)/[groupId]/(groupId)/create-tasklist/page.tsx diff --git a/src/app/(content-layout)/[groupId]/(groupId)/create-tasklist/page.tsx b/src/app/(content-layout)/[groupId]/(groupId)/create-tasklist/page.tsx deleted file mode 100644 index 747f525c..00000000 --- a/src/app/(content-layout)/[groupId]/(groupId)/create-tasklist/page.tsx +++ /dev/null @@ -1,56 +0,0 @@ -'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) => { - setName(e.target.value); - }; - - const handleClickAddButton = async () => { - setIsLoading(true); - if (validateEmptyValue(name)) { - setIsLoading(false); - return; - } - createTasklistAction(Number(groupId), name).then(() => { - setIsLoading(false); - }); - }; - - return ( -
-
- -
- 할 일 목록 추가 - -
- - - -
-
- ); -} diff --git a/src/app/[...modal]/page.tsx b/src/app/[...modal]/page.tsx index abb52786..e7c23934 100644 --- a/src/app/[...modal]/page.tsx +++ b/src/app/[...modal]/page.tsx @@ -1,13 +1,5 @@ '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 MymodalPage() { - return <>zz; -} +import notFound from '@/app/not-found'; + +export default notFound;