diff --git a/README.md b/README.md
index e215bc4c..2f5ef8dd 100644
--- a/README.md
+++ b/README.md
@@ -1,36 +1,70 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Coworkers
 
-## Getting Started
+## **💡** 프로젝트 개요
 
-First, run the development server:
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+> ▫️ **Coworkers** 는 가족, 회사 등 다양한 커뮤니티에서 일정을 관리하고 공유할 수 있는 웹 애플리케이션입니다.
+▫️ 멤버 초대, 할 일 목록 CRUD, 댓글 작성 등 유기적인 커뮤니티 기능을 제공 합니다.
+> 
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+**🔹 유저 기능**
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+- 초대된 멤버들만 접근 할 수 있어, 종속된 공간에서 공유와 의견을 나눌 수 있습니다.
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+🔹  **그룹, 할일목록, 할일 생성**
 
-## Learn More
+- 할일의 반복 설정, 할일 목록 생성 수정등 마감일, 담당자 등 업무에 필요한 내용을 추가할수 있어, 전반적인 내용을 쉽게 공유할 수 있습니다.
+- 댓글 남길 수 있어 실시간으로 현황이나 의견을 공유할 수 있습니다.
+- drag & drop으로 쉽게 할일의 우선순위를 부여하여 사용자의 편의성을 높였습니다.
 
-To learn more about Next.js, take a look at the following resources:
+  
+<br>
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## **🛠**  개발환경
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+- **Front-End : Next.js(App Router) , Axios , tailwind, dnd-kit,…**
+- **Back-end :  Swagger**
+- **배포 환경 : Vercel , AWS**
+- **디자인 : Figma**
+- **버전 및 이슈 관리: Github , Git ,Github action**
+- **협업 툴: Discord, Notion**
 
-## Deploy on Vercel
+<br>
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## 📂 폴더 구조
+
+<img width="720" alt="스크린샷 2025-05-28 오후 4 51 02" src="https://github.com/user-attachments/assets/c456e189-9a4b-4351-aa84-ee78d19965d7" />
+
+
+<br>
+
+# **👥** 프로젝트 팀 구성 및 역할
+
+</aside>
+
+---
+
+## 🧑‍💻👩‍💻👩‍💻👩‍💻 팀원 소개와 역할
+
+| 이름 | 주요 역할 | GitHub |
+| --- | --- | --- |
+|강석준 | modal ,interceptor, 댓글, 랜딩페이지, 로그인 페이지, 그룹 페이지, 자유게시판 생성,수정, AWS 배포, docker 설정, ... | https://github.com/KSJ27  
+|김희진 | button , toast, input, 투두리스트 아이템, 팀생성페이지, 팀 수정페이지, 할일 생성,수정, 자유게시판 상세 페이지, ... | https://github.com/heewls  
+|유선향 | dropdown , svgr, OAuth, 비번 재설정 페이지, 리스트 페이지, 히스토리페이지, 할일 상세, Dnd ,... | https://github.com/grimza99  
+|황혜진 | header , global css, 회원가입, 팀참여하기 페이지, 계정 관리 페이지, 자유게시판 페이지, ... | https://github.com/hhjin1  
+
+
+<br>
+
+# 프로젝트 수행 절차 및 컨벤션
+
+### 프로젝트 기간 : 25.04.21 ~ 25.05.25
+### 리팩토링 기간 : 25.05.28 ~ 25.06.08
+### ⏰ 코어 타임: 월-금, 오후 2시~5시
+
+### 🛠 데일리 스크럼: 월- 토, 오후 2시
+
+### 📌 **오류 발생 시, 1~2시간 내로 해결이 안되면 공유하기!**
+
+### 📖 데일리 스크럼시,  팀 규칙에 따른 해당 팀원이 노션에 진행 내용과 진행 예정을 기록
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/package-lock.json b/package-lock.json
index 17295683..6ddd3290 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
+        "@hookform/resolvers": "^5.0.1",
+        "@tanstack/react-query": "^5.79.0",
         "axios": "^1.9.0",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
@@ -19,8 +21,10 @@
         "react-calendar": "^5.1.0",
         "react-dom": "^19.0.0",
         "react-error-boundary": "^6.0.0",
+        "react-hook-form": "^7.56.4",
         "react-intersection-observer": "^9.16.0",
-        "react-toastify": "^11.0.5"
+        "react-toastify": "^11.0.5",
+        "zod": "^3.25.41"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -2048,6 +2052,18 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.0.1.tgz",
+      "integrity": "sha512-u/+Jp83luQNx9AdyW2fIPGY6Y7NG68eN2ZW8FOJYL+M0i4s49+refdJdOp/A9n9HFQtQs3HIDHQvX3ZET2o7YA==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/utils": "^0.3.0"
+      },
+      "peerDependencies": {
+        "react-hook-form": "^7.55.0"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -2774,6 +2790,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
@@ -3328,6 +3350,32 @@
         "tailwindcss": "4.1.4"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.79.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.79.0.tgz",
+      "integrity": "sha512-s+epTqqLM0/TbJzMAK7OEhZIzh63P9sWz5HEFc5XHL4FvKQXQkcjI8F3nee+H/xVVn7mrP610nVXwOytTSYd0w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.79.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.79.0.tgz",
+      "integrity": "sha512-DjC4JIYZnYzxaTzbg3osOU63VNLP67dOrWet2cZvXgmgwAXNxfS52AMq86M5++ILuzW+BqTUEVMTjhrZ7/XBuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.79.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -8181,6 +8229,22 @@
         "react": ">=16.13.1"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.56.4",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.56.4.tgz",
+      "integrity": "sha512-Rob7Ftz2vyZ/ZGsQZPaRdIefkgOSrQSPXfqBdvOPwJfoGnjwRJUs7EM7Kc1mcoDv3NOtqBzPGbcMB8CGn9CKgw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-intersection-observer": {
       "version": "9.16.0",
       "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.16.0.tgz",
@@ -9718,6 +9782,15 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.25.41",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.41.tgz",
+      "integrity": "sha512-8+sDJTGtCYIDBhdqDygp0ffj8kzziRKqAJPhpYObbElJ+3TRe/mnlnwH+/OMa3kKhueS4Drm5UMW00/u1p07zA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index fe185f42..553e1fae 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,8 @@
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
+    "@hookform/resolvers": "^5.0.1",
+    "@tanstack/react-query": "^5.79.0",
     "axios": "^1.9.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
@@ -20,8 +22,10 @@
     "react-calendar": "^5.1.0",
     "react-dom": "^19.0.0",
     "react-error-boundary": "^6.0.0",
+    "react-hook-form": "^7.56.4",
     "react-intersection-observer": "^9.16.0",
-    "react-toastify": "^11.0.5"
+    "react-toastify": "^11.0.5",
+    "zod": "^3.25.41"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
diff --git a/public/icons/expand-icon.svg b/public/icons/expand-icon.svg
new file mode 100644
index 00000000..75b29dd9
--- /dev/null
+++ b/public/icons/expand-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#64748b" d="M32 32C14.3 32 0 46.3 0 64l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-64 64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7 14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0 0-64zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0 0 64c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32l-96 0zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32l0-96z"/></svg>
\ No newline at end of file
diff --git a/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Members/MemberDeleteModal.tsx b/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Members/MemberDeleteModal.tsx
index d4d749d5..6a072034 100644
--- a/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Members/MemberDeleteModal.tsx
+++ b/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Members/MemberDeleteModal.tsx
@@ -8,9 +8,8 @@ import {
   ModalFooter,
   ModalHeading,
   ModalOverlay,
-  ModalPortal,
 } from '@/components/common/modal';
-import useModalContext from '@/components/common/modal/core/useModalContext';
+import { useModal, ModalPortal } from '@/contexts/ModalContext';
 import BouncingDots from '@/components/common/loading/BouncingDots';
 import { Member } from '@/types/user';
 
@@ -28,7 +27,7 @@ export default function MemberDeleteModal({
   deleteMember,
 }: MemberDeleteModalProps) {
   const { userName } = member;
-  const { closeModal } = useModalContext();
+  const { closeModal } = useModal();
 
   const handleClickDeleteButton = async () => {
     deleteMember();
diff --git a/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Members/MemberDetailModal.tsx b/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Members/MemberDetailModal.tsx
index 8b602c7e..2766889e 100644
--- a/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Members/MemberDetailModal.tsx
+++ b/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Members/MemberDetailModal.tsx
@@ -8,9 +8,8 @@ import {
   ModalFooter,
   ModalHeading,
   ModalOverlay,
-  ModalPortal,
 } from '@/components/common/modal';
-import useModalContext from '@/components/common/modal/core/useModalContext';
+import { useModal, ModalPortal } from '@/contexts/ModalContext';
 import { Member } from '@/types/user';
 
 type MemberDetailModalProps = {
@@ -20,7 +19,7 @@ type MemberDetailModalProps = {
 
 export default function MemberDetailModal({ modalId, member }: MemberDetailModalProps) {
   const { userName, userImage, userEmail } = member;
-  const { closeModal } = useModalContext();
+  const { closeModal } = useModal();
   const copyEmailToClipboard = () => {
     navigator.clipboard.writeText(userEmail);
   };
diff --git a/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Members/MemberInvitationModal.tsx b/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Members/MemberInvitationModal.tsx
index 68b660b7..6fbd6444 100644
--- a/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Members/MemberInvitationModal.tsx
+++ b/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Members/MemberInvitationModal.tsx
@@ -10,9 +10,8 @@ import {
   ModalFooter,
   ModalHeading,
   ModalOverlay,
-  ModalPortal,
 } from '@/components/common/modal';
-import useModalContext from '@/components/common/modal/core/useModalContext';
+import { useModal, ModalPortal } from '@/contexts/ModalContext';
 import { Toast } from '@/components/common/Toastify';
 import BouncingDots from '@/components/common/loading/BouncingDots';
 import { getInvitationToken } from '@/api/group';
@@ -32,7 +31,7 @@ export default function MemberInvitationModal({
   isLoading,
   addMember,
 }: MemberInvitationModalProps) {
-  const { closeModal } = useModalContext();
+  const { closeModal } = useModal();
   const [isTokenMethod, setIsTokenMethod] = useState(true);
   const [email, setEmail] = useState('');
 
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 07ad5f1b..00000000
--- a/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistCreateModal.tsx
+++ /dev/null
@@ -1,75 +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,
-  ModalPortal,
-} from '@/components/common/modal';
-import useModalContext from '@/components/common/modal/core/useModalContext';
-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 } = useModalContext();
-
-  const handleChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setName(e.target.value);
-  };
-
-  const clearName = () => {
-    setName('');
-  };
-
-  const handleClickAddButton = async () => {
-    if (validateEmptyValue(name)) return;
-    createTasklist(name);
-    clearName();
-    closeModal(modalId);
-  };
-
-  return (
-    <>
-      <ModalPortal modalId={modalId}>
-        <ModalOverlay modalId={modalId} onClick={clearName}>
-          <ModalContainer className="px-13 pt-12 pb-8 md:px-13 md:pt-12 md:pb-8">
-            <ModalCloseButton modalId={modalId} onClick={clearName} />
-            <div className="mb-6 w-70">
-              <ModalHeading className="mb-2">할 일 목록 추가</ModalHeading>
-              <FormField
-                field="input"
-                placeholder="목록 이름을 입력해주세요."
-                isSuccess={!validateEmptyValue(name)}
-                isFailure={validateEmptyValue(name)}
-                errorMessage="이름을 입력해 주세요."
-                value={name}
-                onChange={handleChangeName}
-                disabled={isLoading}
-              />
-            </div>
-            <ModalFooter className="w-70">
-              <Button onClick={handleClickAddButton} fontSize="16" size="fullWidth">
-                {isLoading ? <BouncingDots /> : '만들기'}
-              </Button>
-            </ModalFooter>
-          </ModalContainer>
-        </ModalOverlay>
-      </ModalPortal>
-    </>
-  );
-}
diff --git a/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistDeleteModal.tsx b/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistDeleteModal.tsx
index c685ce59..98a54c4c 100644
--- a/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistDeleteModal.tsx
+++ b/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistDeleteModal.tsx
@@ -7,9 +7,8 @@ import {
   ModalFooter,
   ModalHeading,
   ModalOverlay,
-  ModalPortal,
 } from '@/components/common/modal';
-import useModalContext from '@/components/common/modal/core/useModalContext';
+import { useModal, ModalPortal } from '@/contexts/ModalContext';
 import BouncingDots from '@/components/common/loading/BouncingDots';
 import { Tasklist } from '@/types/tasklist';
 
@@ -27,7 +26,7 @@ export default function TasklistDeleteModal({
   deleteTasklist,
 }: TasklistDeleteModalProps) {
   const { name } = tasklist;
-  const { closeModal } = useModalContext();
+  const { closeModal } = useModal();
 
   const handleClickDeleteButton = async () => {
     deleteTasklist(tasklist);
diff --git a/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistItemDropdown.tsx b/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistItemDropdown.tsx
index 8561bb51..8f56a670 100644
--- a/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistItemDropdown.tsx
+++ b/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistItemDropdown.tsx
@@ -3,8 +3,7 @@ import Image from 'next/image';
 import DropDown from '@/components/common/dropdown';
 import kebabIcon from '@/../public/icons/kebab-icon.svg';
 import { Tasklist } from '@/types/tasklist';
-import useModalContext from '@/components/common/modal/core/useModalContext';
-
+import { useModal } from '@/contexts/ModalContext';
 const ITEM_DROPDOWN_VALUE = ['수정하기', '삭제하기'];
 
 type TasklistItemDropdownProps = {
@@ -16,7 +15,7 @@ export default function TasklistItemDropdown({
   onTriggerClick,
   tasklist,
 }: TasklistItemDropdownProps) {
-  const { openModal } = useModalContext();
+  const { openModal } = useModal();
   return (
     <div>
       <DropDown
diff --git a/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistUpdateModal.tsx b/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistUpdateModal.tsx
index fbfd4308..e380bc1d 100644
--- a/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistUpdateModal.tsx
+++ b/src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/TasklistUpdateModal.tsx
@@ -8,9 +8,8 @@ import {
   ModalFooter,
   ModalHeading,
   ModalOverlay,
-  ModalPortal,
 } from '@/components/common/modal';
-import useModalContext from '@/components/common/modal/core/useModalContext';
+import { useModal, ModalPortal } from '@/contexts/ModalContext';
 import BouncingDots from '@/components/common/loading/BouncingDots';
 import { validateEmptyValue } from '@/utils/validators';
 import { Tasklist } from '@/types/tasklist';
@@ -29,7 +28,7 @@ export default function TasklistUpdateModal({
   updateTasklist,
 }: TasklistUpdateModalProps) {
   const [name, setName] = useState(tasklist.name);
-  const { closeModal } = useModalContext();
+  const { closeModal } = useModal();
 
   const handleChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
     setName(e.target.value);
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 be7c9450..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,12 +1,12 @@
 '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 { ModalTrigger } from '@/components/common/modal';
 import { Group } from '@/types/group';
 import { Tasklist } from '@/types/tasklist';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 
 type TasklistsProps = {
   groupId: Group['id'];
@@ -18,18 +18,16 @@ 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;
+  const pathname = usePathname();
 
   return (
     <>
@@ -38,9 +36,9 @@ 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}>
+          <Link href={`${pathname}/create-tasklist`} className="text-primary w-fit">
             + 새로운 목록 추가하기
-          </ModalTrigger>
+          </Link>
         </div>
         <ol className="flex flex-col gap-4">
           {tasklists.map((tasklist, index) => (
@@ -54,12 +52,6 @@ export default function Tasklists({ groupId, tasklists }: TasklistsProps) {
         </ol>
       </section>
 
-      <TasklistCreateModal
-        modalId={tasklistCreateModalId}
-        createTasklist={createTasklist}
-        isLoading={isCreateLoading}
-      />
-
       {selectedTasklist && (
         <TasklistUpdateModal
           tasklist={selectedTasklist}
diff --git a/src/app/(content-layout)/[groupId]/editgroup/_editgroup/DeleteGroupButton.tsx b/src/app/(content-layout)/[groupId]/editgroup/_editgroup/DeleteGroupButton.tsx
index 9878f298..516d1c6d 100644
--- a/src/app/(content-layout)/[groupId]/editgroup/_editgroup/DeleteGroupButton.tsx
+++ b/src/app/(content-layout)/[groupId]/editgroup/_editgroup/DeleteGroupButton.tsx
@@ -5,14 +5,14 @@ import { useState } from 'react';
 import { Toast } from '@/components/common/Toastify';
 import DangerModal from '@/components/danger-modal';
 import BouncingDots from '@/components/common/loading/BouncingDots';
-import useModalContext from '@/components/common/modal/core/useModalContext';
+import { useModal } from '@/contexts/ModalContext';
 import TrashCan from '@/assets/TrashCan';
 import { deleteGroup } from '../action';
 import { useUser } from '@/contexts/UserContext';
 
 export default function DeleteGroupButton({ groupId }: { groupId: number }) {
   const [isPending, setIsPending] = useState(false);
-  const { openModal } = useModalContext();
+  const { openModal } = useModal();
   const { fetchUser } = useUser();
   const router = useRouter();
 
diff --git a/src/app/(content-layout)/[groupId]/tasklist/@detailTask/(..)tasks/[taskId]/page.tsx b/src/app/(content-layout)/[groupId]/tasklist/@detailTask/(..)tasks/[taskId]/page.tsx
new file mode 100644
index 00000000..45dd0d58
--- /dev/null
+++ b/src/app/(content-layout)/[groupId]/tasklist/@detailTask/(..)tasks/[taskId]/page.tsx
@@ -0,0 +1,30 @@
+import Background from '../../_components/Background';
+import DetailTaskPage from '@/app/(content-layout)/[groupId]/tasks/[taskId]/page';
+import CloseButton from '../../_components/CloseButton';
+import ExpandButton from '../../_components/ExpandButton';
+
+interface Props {
+  params: Promise<{ taskId: string }>;
+}
+
+export default async function DetailTaskContainer({ params }: Props) {
+  const taskId = (await params).taskId;
+
+  return (
+    <>
+      {!!taskId && (
+        <Background isOpen={!!taskId}>
+          <div className="bg-bg200 animate-detail-task fixed top-15 right-0 z-500 flex h-[calc(100%-60px)] w-full flex-col gap-25 px-4 py-4 md:max-w-[700px] md:gap-45.5 md:px-6 md:py-6 lg:max-w-[779px] lg:px-10 lg:py-10">
+            <div className="relative flex h-full flex-col gap-4">
+              <div className="flex gap-2">
+                <CloseButton />
+                <ExpandButton />
+              </div>
+              <DetailTaskPage params={params} />
+            </div>
+          </div>
+        </Background>
+      )}
+    </>
+  );
+}
diff --git a/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/Background.tsx b/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/Background.tsx
new file mode 100644
index 00000000..d2d6f0df
--- /dev/null
+++ b/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/Background.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { ReactNode, useCallback, useEffect, useRef } from 'react';
+
+interface Props {
+  children: ReactNode;
+  isOpen: boolean;
+}
+export default function Background({ children, isOpen }: Props) {
+  const detailTaskRef = useRef<HTMLDivElement>(null);
+  const router = useRouter();
+
+  const closeDetailTaskOutsideClick = useCallback(
+    (e: MouseEvent) => {
+      if (!isOpen) return;
+
+      const target = e.target as Node;
+
+      const isInsideDetail = detailTaskRef.current?.contains(target);
+      const modalPortal = document.querySelector('#modal-container');
+      const isInsidePortal = modalPortal?.contains(target);
+
+      if (!isInsideDetail && !isInsidePortal) {
+        router.back();
+      }
+    },
+    [isOpen, router]
+  );
+
+  useEffect(() => {
+    document.addEventListener('mousedown', closeDetailTaskOutsideClick);
+    return () => {
+      document.removeEventListener('mousedown', closeDetailTaskOutsideClick);
+    };
+  }, [isOpen, closeDetailTaskOutsideClick]);
+
+  return (
+    <div>
+      <div ref={detailTaskRef}>{children}</div>
+    </div>
+  );
+}
diff --git a/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/CloseButton.tsx b/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/CloseButton.tsx
new file mode 100644
index 00000000..97df9fa8
--- /dev/null
+++ b/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/CloseButton.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+
+export default function CloseButton() {
+  const router = useRouter();
+
+  return (
+    <button
+      onClick={() => {
+        router.back();
+      }}
+    >
+      <Image src="/icons/close.svg" alt="x" width={24} height={24} />
+    </button>
+  );
+}
diff --git a/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/CommentField.tsx b/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/CommentField.tsx
index f2f215b6..5751ed75 100644
--- a/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/CommentField.tsx
+++ b/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/CommentField.tsx
@@ -4,7 +4,7 @@ import { Comment } from '@/components/comment/types';
 import { useState } from 'react';
 import EditCommentInput from './EditCommentInput';
 import axiosClient from '@/lib/axiosClient';
-import useModalContext from '@/components/common/modal/core/useModalContext';
+import { useModal } from '@/contexts/ModalContext';
 import RemoveCommentModal from '../../_tasklist/components/ModalContents/RemoveCommentModal';
 import { Toast } from '@/components/common/Toastify';
 import { revalidateTasks } from '../../_tasklist/actions/task-actions';
@@ -17,7 +17,7 @@ interface Props {
 export default function CommentField({ comment, taskId }: Props) {
   const [isEdit, setIsEdit] = useState(false);
   const [isDelete, setIsDelete] = useState(false);
-  const { openModal } = useModalContext();
+  const { openModal } = useModal();
   const [currentComment, setCurrentComment] = useState(comment);
   const [currentContent, setCurrentContent] = useState(comment.content);
 
diff --git a/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/DetailTask.tsx b/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/DetailTask.tsx
deleted file mode 100644
index df845d95..00000000
--- a/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/DetailTask.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-'use client';
-import axiosClient from '@/lib/axiosClient';
-import { useCallback, useEffect, useState } from 'react';
-import { useTaskActions } from '../../_tasklist/hooks/use-task-actions';
-import Content from './DetailTaskContentField';
-import DetailTaskCommentField from './DetailTaskCommentsField';
-import Button from '@/components/common/Button';
-import Check from '@/assets/Check';
-import clsx from 'clsx';
-import { DetailTaskType } from '../../_tasklist/types/task-type';
-
-interface Props {
-  groupId: string;
-  taskListId: number;
-  isDone: boolean;
-  setIsDone: () => void;
-  taskId: number;
-}
-
-export default function DetailTask({ taskId, groupId, taskListId, isDone, setIsDone }: Props) {
-  const [currentTask, setCurrentTask] = useState<DetailTaskType>();
-  const [error, setError] = useState<Error | null>(null);
-  const { toggleTaskDone } = useTaskActions(currentTask);
-  const buttonText = isDone ? '완료 취소하기' : '완료 하기';
-
-  const fetchTask = useCallback(async () => {
-    if (!taskId) return;
-    try {
-      const { data } = await axiosClient(
-        `/groups/${groupId}/task-lists/${taskListId}/tasks/${taskId}`
-      );
-
-      setCurrentTask(data);
-    } catch {
-      setError(new Error('Task를 불러오는데 오류가 발생했습니다.'));
-    }
-  }, [groupId, taskListId, taskId]);
-
-  useEffect(() => {
-    fetchTask();
-  }, [fetchTask]);
-
-  if (error) throw error;
-  if (!currentTask) return;
-
-  return (
-    <div className="flex h-full flex-col gap-25 overflow-scroll">
-      <Content isDone={isDone} task={currentTask} />
-      <DetailTaskCommentField taskId={currentTask?.id} />
-      <Button
-        onClick={() => toggleTaskDone(groupId, taskListId, isDone, setIsDone)}
-        className="absolute right-6 bottom-6 lg:right-10 lg:bottom-10"
-        variant={isDone ? 'outline-primary' : 'solid'}
-        size={isDone ? 'lg' : 'sm'}
-      >
-        <Check className={clsx(isDone ? 'text-primary' : 'text-gray100')} />
-        {buttonText}
-      </Button>
-    </div>
-  );
-}
diff --git a/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/DetailTaskContentField.tsx b/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/DetailTaskContentField.tsx
index 9f2ac83c..4aad5c89 100644
--- a/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/DetailTaskContentField.tsx
+++ b/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/DetailTaskContentField.tsx
@@ -1,11 +1,12 @@
+'use client';
 import DropDown from '@/components/common/dropdown';
 import Image from 'next/image';
 import ProfileBadge from '@/components/profile-badge';
 import Repeat from '@/assets/Repeat';
 import { format } from 'date-fns';
 import clsx from 'clsx';
-import { useTaskModals } from '../../_tasklist/hooks/use-task-modals';
 import { getRepeatDescription } from '../../_tasklist/utils/format-repeat-schedule';
+import { useTaskModals } from '../../_tasklist/hooks/use-task-modals';
 import { DetailTaskType } from '../../_tasklist/types/task-type';
 
 interface Props {
@@ -14,7 +15,7 @@ interface Props {
 }
 const DROPDOWN_OPTION_LIST = ['수정하기', '삭제하기'];
 
-export default function Content({ task, isDone }: Props) {
+export default function DetailTaskContentField({ task, isDone }: Props) {
   const { name, doneBy, updatedAt, date, description, frequency } = task;
   const { popUpDeleteTaskModal, popUpEditTaskModal } = useTaskModals();
 
diff --git a/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/ExpandButton.tsx b/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/ExpandButton.tsx
new file mode 100644
index 00000000..c341b27f
--- /dev/null
+++ b/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/ExpandButton.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import Image from 'next/image';
+
+export default function ExpandButton() {
+  return (
+    <button onClick={() => window.location.reload()}>
+      <Image src="/icons/expand-icon.svg" alt="확장아이콘" width={16} height={16} />
+    </button>
+  );
+}
diff --git a/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/ToggleDoneButton.tsx b/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/ToggleDoneButton.tsx
new file mode 100644
index 00000000..9abf15c5
--- /dev/null
+++ b/src/app/(content-layout)/[groupId]/tasklist/@detailTask/_components/ToggleDoneButton.tsx
@@ -0,0 +1,28 @@
+'use client';
+import Check from '@/assets/Check';
+import Button from '@/components/common/Button';
+import clsx from 'clsx';
+import { DetailTaskType } from '../../_tasklist/types/task-type';
+import { useTaskActions } from '../../_tasklist/hooks/use-task-actions';
+
+interface Props {
+  isDone: boolean;
+  task: DetailTaskType;
+}
+
+export default function ToggleDoneButton({ isDone, task }: Props) {
+  const { toggleTaskDone } = useTaskActions(task);
+
+  const buttonText = isDone ? '완료 취소하기' : '완료 하기';
+  return (
+    <Button
+      onClick={() => toggleTaskDone(isDone)}
+      className="absolute right-6 bottom-6 lg:right-10 lg:bottom-10"
+      variant={isDone ? 'outline-primary' : 'solid'}
+      size={isDone ? 'lg' : 'sm'}
+    >
+      <Check className={clsx(isDone ? 'text-primary' : 'text-gray100')} />
+      {buttonText}
+    </Button>
+  );
+}
diff --git a/src/app/(content-layout)/[groupId]/tasklist/@detailTask/default.tsx b/src/app/(content-layout)/[groupId]/tasklist/@detailTask/default.tsx
new file mode 100644
index 00000000..ce313c06
--- /dev/null
+++ b/src/app/(content-layout)/[groupId]/tasklist/@detailTask/default.tsx
@@ -0,0 +1,3 @@
+export default function DefaultRender() {
+  return null;
+}
diff --git a/src/app/(content-layout)/[groupId]/tasklist/@detailTask/page.tsx b/src/app/(content-layout)/[groupId]/tasklist/@detailTask/page.tsx
deleted file mode 100644
index 54f4634c..00000000
--- a/src/app/(content-layout)/[groupId]/tasklist/@detailTask/page.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-'use client';
-import Image from 'next/image';
-import { useCallback, useEffect, useRef } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
-import DetailTask from './_components/DetailTask';
-
-interface Props {
-  groupId: string;
-  taskListId: number;
-  isOpen: boolean;
-  isDone: boolean;
-  setIsDone: () => void;
-  taskId: number;
-  closeDetailTask: () => void;
-}
-
-export default function DetailTaskContainer({ taskId, isOpen, closeDetailTask, ...props }: Props) {
-  const detailTaskRef = useRef<HTMLDivElement>(null);
-
-  const closingDetailTaskOutsideClick = useCallback(
-    (e: MouseEvent) => {
-      if (!isOpen || !taskId) return;
-
-      const target = e.target as Node;
-
-      const isInsideDetail = detailTaskRef.current?.contains(target);
-      const modalPortal = document.querySelector('#modal-container');
-      const isInsidePortal = modalPortal?.contains(target);
-
-      if (!isInsideDetail && !isInsidePortal) {
-        closeDetailTask();
-      }
-    },
-    [isOpen, taskId, closeDetailTask]
-  );
-
-  useEffect(() => {
-    document.addEventListener('mousedown', closingDetailTaskOutsideClick);
-    return () => {
-      document.removeEventListener('mousedown', closingDetailTaskOutsideClick);
-    };
-  }, [isOpen, closingDetailTaskOutsideClick]);
-
-  return (
-    <>
-      {isOpen && (
-        <div
-          ref={detailTaskRef}
-          className="bg-bg200 animate-detail-task fixed top-15 right-0 z-500 flex h-[calc(100%-60px)] w-full flex-col gap-25 px-4 py-4 md:max-w-[700px] md:gap-45.5 md:px-6 md:py-6 lg:max-w-[779px] lg:px-10 lg:py-10"
-        >
-          <div className="relative flex h-full flex-col gap-4">
-            <button onClick={() => closeDetailTask()}>
-              <Image src="/icons/close.svg" alt="x" width={24} height={24} />
-            </button>
-            <ErrorBoundary fallback={<div>해당 태스크를 불러올 수 없습니다.</div>}>
-              <DetailTask taskId={taskId} {...props} />
-            </ErrorBoundary>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
diff --git a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/actions/task-actions.ts b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/actions/task-actions.ts
index d5ad847c..4af13840 100644
--- a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/actions/task-actions.ts
+++ b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/actions/task-actions.ts
@@ -12,6 +12,10 @@ export const revalidateTaskLists = async () => {
   revalidateTag(`getTaskList`);
 };
 
+export const revalidateDetailTask = async () => {
+  revalidateTag(`getDetailTask`);
+};
+
 export const getTaskLists = async (groupId: string) => {
   try {
     const { data: taskListsData } = await axiosServer(`/groups/${groupId}`, {
@@ -41,3 +45,13 @@ export const getTasks = async (groupId: string, taskListId: number, date: Date |
     }
   }
 };
+export const getDetailTask = async (taskId: string) => {
+  try {
+    const { data } = await axiosServer(`/groups/groupId/task-lists/taskListId/tasks/${taskId}`, {
+      fetchOptions: { next: { tags: ['getDetailTask'] } },
+    });
+    return data;
+  } catch (error: unknown) {
+    console.error(error);
+  }
+};
diff --git a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/ModalContents/CreateTaskListModal.tsx b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/ModalContents/CreateTaskListModal.tsx
index b4bb5465..5bad5bb8 100644
--- a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/ModalContents/CreateTaskListModal.tsx
+++ b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/ModalContents/CreateTaskListModal.tsx
@@ -9,10 +9,9 @@ import {
   ModalFooter,
   ModalHeading,
   ModalOverlay,
-  ModalPortal,
   ModalTrigger,
 } from '@/components/common/modal';
-import useModalContext from '@/components/common/modal/core/useModalContext';
+import { useModal, ModalPortal } from '@/contexts/ModalContext';
 import axiosClient from '@/lib/axiosClient';
 import { revalidateTaskLists } from '../../actions/task-actions';
 import { Toast } from '@/components/common/Toastify';
@@ -28,7 +27,7 @@ export default function CreateTaskListModal({ groupId }: Props) {
   const [errorMessage, setErrorMessage] = useState('');
   const [isForceShowError, setIsForceShowError] = useState(false);
 
-  const { closeModal } = useModalContext();
+  const { closeModal } = useModal();
 
   const clearState = () => {
     setCurrentValue('');
diff --git a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/ModalContents/RemoveCommentModal.tsx b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/ModalContents/RemoveCommentModal.tsx
index a3de62fc..85f04039 100644
--- a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/ModalContents/RemoveCommentModal.tsx
+++ b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/ModalContents/RemoveCommentModal.tsx
@@ -1,23 +1,16 @@
 'use client';
-import {
-  ModalContainer,
-  ModalDescription,
-  ModalFooter,
-  ModalHeading,
-  ModalOverlay,
-  ModalPortal,
-} from '@/components/common/modal';
+
+import { ModalContainer, ModalFooter, ModalHeading, ModalOverlay } from '@/components/common/modal';
+import { useModal, ModalPortal } from '@/contexts/ModalContext';
 import Image from 'next/image';
 import Button from '@/components/common/Button';
-import useModalContext from '@/components/common/modal/core/useModalContext';
-
 interface Props {
   modalId: string;
   onDelete: () => void;
 }
 
 export default function RemoveCommentModal({ modalId, onDelete }: Props) {
-  const { closeModal } = useModalContext();
+  const { closeModal } = useModal();
 
   return (
     <>
diff --git a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/ModalContents/RemoveTaskModal.tsx b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/ModalContents/RemoveTaskModal.tsx
index 7100bec1..f3d4f86d 100644
--- a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/ModalContents/RemoveTaskModal.tsx
+++ b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/ModalContents/RemoveTaskModal.tsx
@@ -5,12 +5,10 @@ import {
   ModalFooter,
   ModalHeading,
   ModalOverlay,
-  ModalPortal,
 } from '@/components/common/modal';
+import { useModal, ModalPortal } from '@/contexts/ModalContext';
 import Image from 'next/image';
 import Button from '@/components/common/Button';
-import useModalContext from '@/components/common/modal/core/useModalContext';
-
 interface Props {
   taskName: string;
   modalId: string;
@@ -18,7 +16,7 @@ interface Props {
 }
 
 export default function RemoveTaskModal({ taskName, modalId, deleteTask }: Props) {
-  const { closeModal } = useModalContext();
+  const { closeModal } = useModal();
 
   return (
     <>
diff --git a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/TaskLists.tsx b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/TaskLists.tsx
index 5a3d1251..946032cb 100644
--- a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/TaskLists.tsx
+++ b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/TaskLists.tsx
@@ -14,6 +14,9 @@ interface Props {
 export default function TaskLists({ taskLists, currentTaskListId }: Props) {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const sortedTaskLists = taskLists.sort(
+    (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+  );
 
   const handleClickChangeCurrentTaskList = async (taskList: TaskList) => {
     const params = new URLSearchParams(searchParams.toString());
@@ -27,7 +30,7 @@ export default function TaskLists({ taskLists, currentTaskListId }: Props) {
   return (
     <ErrorBoundary fallbackRender={({ error }) => <TaskListPageFallBack error={error} />}>
       <div className="scrollbar-hidden flex h-fit max-w-full gap-3 overflow-x-auto overflow-y-hidden">
-        {taskLists.map((taskList) => {
+        {sortedTaskLists.map((taskList) => {
           return (
             <p
               key={taskList.id}
diff --git a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/Tasks.tsx b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/Tasks.tsx
index 987533dc..25c15a0f 100644
--- a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/Tasks.tsx
+++ b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/Tasks.tsx
@@ -5,15 +5,15 @@ import { useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import useDndKit from '../hooks/use-dnd-kit';
 import TaskListPageFallBack from '../../error';
-import { Task, TaskList } from '../types/task-type';
+import { Task } from '../types/task-type';
 import TasksWiseTask from './TasksWiseTask';
 
 interface Props {
   groupId: string;
   tasks: Task[];
-  currentTaskList: TaskList;
+  taskListId: number;
 }
-export default function Tasks({ groupId, tasks, currentTaskList }: Props) {
+export default function Tasks({ groupId, tasks, taskListId }: Props) {
   const [currentTasks, setCurrentTasks] = useState<Task[]>(tasks);
   const [isClient, setIsClient] = useState(false);
 
@@ -26,7 +26,7 @@ export default function Tasks({ groupId, tasks, currentTaskList }: Props) {
     setIsClient(true);
   }, [tasks]);
 
-  const { sensors, handleDragEnd } = useDndKit(currentTasks, currentTaskList!, orderCurrentTasks);
+  const { sensors, handleDragEnd } = useDndKit(currentTasks, taskListId!, orderCurrentTasks);
 
   if (!isClient) return;
 
@@ -43,7 +43,7 @@ export default function Tasks({ groupId, tasks, currentTaskList }: Props) {
               {currentTasks.map((task) => {
                 return (
                   <TasksWiseTask
-                    taskListId={currentTaskList.id}
+                    taskListId={taskListId}
                     task={task}
                     key={task.id}
                     groupId={groupId}
diff --git a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/TasksWiseTask.tsx b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/TasksWiseTask.tsx
index 2deeb486..566de0d6 100644
--- a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/TasksWiseTask.tsx
+++ b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/TasksWiseTask.tsx
@@ -8,10 +8,10 @@ import { useTaskActions } from '../hooks/use-task-actions';
 import { useTaskModals } from '../hooks/use-task-modals';
 import ManageTaskItemModal from './manage-task-item-modal/MangeTaskItemModal';
 import getDetailTaskItem from '@/lib/api/detail-task-item';
-import DetailTaskContainer from '../../@detailTask/page';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { useDndMonitor } from '@dnd-kit/core';
+import { useRouter } from 'next/navigation';
 
 interface Props {
   task: Task;
@@ -22,7 +22,6 @@ interface Props {
 export default function TasksWiseTask({ task, groupId, taskListId }: Props) {
   const [isDone, setIsDone] = useState(!!task.doneAt);
   const [isDelete, setIsDelete] = useState(false);
-  const [isDetailTaskOpen, setIsDetailTaskOpen] = useState(false);
   const [detailTask, setDetailTask] = useState<DetailTaskType>();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
@@ -30,6 +29,8 @@ export default function TasksWiseTask({ task, groupId, taskListId }: Props) {
   });
   const [onDrag, setOnDrag] = useState(false);
 
+  const router = useRouter();
+
   useDndMonitor({
     onDragStart: () => setOnDrag(true),
     onDragEnd: () => setOnDrag(false),
@@ -77,11 +78,7 @@ export default function TasksWiseTask({ task, groupId, taskListId }: Props) {
   };
 
   const openDetailTask = () => {
-    setIsDetailTaskOpen(true);
-  };
-
-  const closeDetailTask = () => {
-    setIsDetailTaskOpen(false);
+    router.push(`/${groupId}/tasks/${task.id}`);
   };
 
   return (
@@ -101,27 +98,16 @@ export default function TasksWiseTask({ task, groupId, taskListId }: Props) {
             key={task.id}
             type="taskList"
             checkDropdownOpen={checkDropdownOpen}
-            onCheckStatusChange={() =>
-              toggleTaskDone(groupId, taskListId, isDone, toggleTaskStatus)
-            }
+            onCheckStatusChange={() => toggleTaskDone(isDone, toggleTaskStatus)}
             onEdit={() => popUpEditTaskModal(createOrEditModalId)}
             onDelete={() => popUpDeleteTaskModal(taskDeleteModalId)}
-            onClick={() => openDetailTask()}
             isDone={isDone}
+            onClick={() => openDetailTask()}
             name={task.name}
             commentCount={task.commentCount}
             date={safeFormatDate(task.date)}
             frequency={task.frequency}
           />
-          <DetailTaskContainer
-            isDone={isDone}
-            setIsDone={toggleTaskStatus}
-            taskId={task.id}
-            groupId={groupId}
-            taskListId={taskListId}
-            closeDetailTask={closeDetailTask}
-            isOpen={isDetailTaskOpen}
-          />
           <RemoveTaskModal
             taskName={task.name}
             modalId={taskDeleteModalId}
diff --git a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/manage-task-item-modal/MangeTaskItemModal.tsx b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/manage-task-item-modal/MangeTaskItemModal.tsx
index d7712f5c..d393d24f 100644
--- a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/manage-task-item-modal/MangeTaskItemModal.tsx
+++ b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/manage-task-item-modal/MangeTaskItemModal.tsx
@@ -1,4 +1,5 @@
-import { ModalContainer, ModalOverlay, ModalPortal, ModalTrigger } from '@/components/common/modal';
+import { ModalContainer, ModalOverlay, ModalTrigger } from '@/components/common/modal';
+import { ModalPortal } from '@/contexts/ModalContext';
 import ManageTaskItem from '@/components/manage-task-item/components/ManageTaskItem';
 import Plus from '@/assets/Plus';
 import { TaskItemProps } from '@/components/manage-task-item/type';
diff --git a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/hooks/use-dnd-kit.ts b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/hooks/use-dnd-kit.ts
index d170a0c1..d607e7bb 100644
--- a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/hooks/use-dnd-kit.ts
+++ b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/hooks/use-dnd-kit.ts
@@ -1,11 +1,11 @@
 import { DragEndEvent, MouseSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core';
 import { arrayMove } from '@dnd-kit/sortable';
-import { TaskList, Task } from '../types/task-type';
+import { Task } from '../types/task-type';
 import { useTaskActions } from './use-task-actions';
 
 export default function useDndKit(
   currentTasks: Task[],
-  currentTaskList: TaskList,
+  taskListId: number,
   sortCurrentTasks: (orderedCurrentTasks: Task[]) => void
 ) {
   const { saveNewTaskOrder } = useTaskActions();
@@ -31,7 +31,7 @@ export default function useDndKit(
       const newIndex = currentTasks.findIndex((task) => task.id === over?.id);
       if (oldIndex !== -1 && newIndex !== -1) {
         sortCurrentTasks(arrayMove(currentTasks, oldIndex, newIndex));
-        await saveNewTaskOrder(currentTaskList!.id, Number(active.id), newIndex);
+        await saveNewTaskOrder(taskListId, Number(active.id), newIndex);
       }
     }
   };
diff --git a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/hooks/use-task-actions.ts b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/hooks/use-task-actions.ts
index c7b89988..32831bdb 100644
--- a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/hooks/use-task-actions.ts
+++ b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/hooks/use-task-actions.ts
@@ -1,6 +1,7 @@
 import axiosClient from '@/lib/axiosClient';
 import { Task } from '../types/task-type';
 import { Toast } from '@/components/common/Toastify';
+import { revalidateDetailTask } from '../actions/task-actions';
 
 export function useTaskActions(task?: Task) {
   const deleteTask = async (
@@ -22,21 +23,16 @@ export function useTaskActions(task?: Task) {
     }
   };
 
-  const toggleTaskDone = async (
-    groupId: string,
-    taskListId: number,
-    doneState: boolean,
-    toggleDoneState: () => void
-  ) => {
+  const toggleTaskDone = async (doneState: boolean, toggleDoneState?: () => void) => {
     if (!task) return;
     try {
-      await axiosClient.patch(`/groups/${groupId}/task-lists/${taskListId}/tasks/${task.id}`, {
+      await axiosClient.patch(`/groups/groupId/task-lists/taskListId/tasks/${task.id}`, {
         name: task.name,
         description: task.description,
         done: !doneState,
       });
-      toggleDoneState();
-
+      toggleDoneState?.();
+      revalidateDetailTask();
       if (doneState) return Toast.success('할 일 완료 취소 성공');
       if (!doneState) return Toast.success('할 일 완료 성공');
     } catch {
diff --git a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/hooks/use-task-modals.ts b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/hooks/use-task-modals.ts
index b87d90e0..e5d97a9d 100644
--- a/src/app/(content-layout)/[groupId]/tasklist/_tasklist/hooks/use-task-modals.ts
+++ b/src/app/(content-layout)/[groupId]/tasklist/_tasklist/hooks/use-task-modals.ts
@@ -3,10 +3,9 @@ type TaskModals = {
   popUpEditTaskModal: (modalId: string) => void;
 };
 
-import useModalContext from '@/components/common/modal/core/useModalContext';
-
+import { useModal } from '@/contexts/ModalContext';
 export function useTaskModals(): TaskModals {
-  const { openModal } = useModalContext();
+  const { openModal } = useModal();
 
   const popUpEditTaskModal = (modalId: string) => {
     openModal(modalId);
diff --git a/src/app/(content-layout)/[groupId]/tasklist/(tasklist)/layout.tsx b/src/app/(content-layout)/[groupId]/tasklist/layout.tsx
similarity index 90%
rename from src/app/(content-layout)/[groupId]/tasklist/(tasklist)/layout.tsx
rename to src/app/(content-layout)/[groupId]/tasklist/layout.tsx
index 68a61a79..f527a404 100644
--- a/src/app/(content-layout)/[groupId]/tasklist/(tasklist)/layout.tsx
+++ b/src/app/(content-layout)/[groupId]/tasklist/layout.tsx
@@ -1,10 +1,10 @@
 export default function TaskListPageLayout({
   children,
   detailTask,
-}: Readonly<{
+}: {
   children: React.ReactNode;
   detailTask: React.ReactNode;
-}>) {
+}) {
   return (
     <>
       {children}
diff --git a/src/app/(content-layout)/[groupId]/tasklist/(tasklist)/loading.tsx b/src/app/(content-layout)/[groupId]/tasklist/loading.tsx
similarity index 90%
rename from src/app/(content-layout)/[groupId]/tasklist/(tasklist)/loading.tsx
rename to src/app/(content-layout)/[groupId]/tasklist/loading.tsx
index 15b1d56b..f45d0734 100644
--- a/src/app/(content-layout)/[groupId]/tasklist/(tasklist)/loading.tsx
+++ b/src/app/(content-layout)/[groupId]/tasklist/loading.tsx
@@ -1,4 +1,4 @@
-import { DateSkeleton, TaskListsSkeleton, TaskSkeleton } from '../_tasklist/components/Skeleton';
+import { DateSkeleton, TaskListsSkeleton, TaskSkeleton } from './_tasklist/components/Skeleton';
 
 export default function TaskListPageLoading() {
   return (
diff --git a/src/app/(content-layout)/[groupId]/tasklist/(tasklist)/page.tsx b/src/app/(content-layout)/[groupId]/tasklist/page.tsx
similarity index 84%
rename from src/app/(content-layout)/[groupId]/tasklist/(tasklist)/page.tsx
rename to src/app/(content-layout)/[groupId]/tasklist/page.tsx
index d87af77d..35ef56cc 100644
--- a/src/app/(content-layout)/[groupId]/tasklist/(tasklist)/page.tsx
+++ b/src/app/(content-layout)/[groupId]/tasklist/page.tsx
@@ -1,13 +1,13 @@
-import { getTaskLists, getTasks } from '../_tasklist/actions/task-actions';
-import ManageTaskItemModal from '../_tasklist/components/manage-task-item-modal/MangeTaskItemModal';
-import DateSwitcher from '../_tasklist/components/DateSwitcher';
-import TaskLists from '../_tasklist/components/TaskLists';
-import Tasks from '../_tasklist/components/Tasks';
 import { notFound } from 'next/navigation';
 import { Metadata } from 'next';
 import { cache } from 'react';
 import { getGroupApiResponse, Group } from '@/types/group';
 import axiosServer from '@/lib/axiosServer';
+import DateSwitcher from './_tasklist/components/DateSwitcher';
+import TaskLists from './_tasklist/components/TaskLists';
+import Tasks from './_tasklist/components/Tasks';
+import ManageTaskItemModal from './_tasklist/components/manage-task-item-modal/MangeTaskItemModal';
+import { getTaskLists, getTasks } from './_tasklist/actions/task-actions';
 
 interface Props {
   params: Promise<{ groupId: string }>;
@@ -66,7 +66,7 @@ export default async function Page({ params, searchParams }: Props) {
       <p className="text-lg-bold md:text-xl-bold">할 일</p>
       <DateSwitcher groupId={groupId} date={String(date)} />
       <TaskLists taskLists={taskLists} currentTaskListId={searchParamsTaskListId} />
-      <Tasks groupId={groupId} tasks={tasks} currentTaskList={taskLists[0]} />
+      <Tasks groupId={groupId} tasks={tasks} taskListId={taskListId} />
       <ManageTaskItemModal groupId={Number(groupId)} taskListId={taskListId} />
     </div>
   );
diff --git a/src/app/(content-layout)/[groupId]/tasks/[taskId]/page.tsx b/src/app/(content-layout)/[groupId]/tasks/[taskId]/page.tsx
new file mode 100644
index 00000000..d5c410df
--- /dev/null
+++ b/src/app/(content-layout)/[groupId]/tasks/[taskId]/page.tsx
@@ -0,0 +1,27 @@
+import { ErrorBoundary } from 'react-error-boundary';
+import DetailTaskCommentField from '../../tasklist/@detailTask/_components/DetailTaskCommentsField';
+import DetailTaskContentField from '../../tasklist/@detailTask/_components/DetailTaskContentField';
+import ToggleDoneButton from '../../tasklist/@detailTask/_components/ToggleDoneButton';
+import { getDetailTask } from '../../tasklist/_tasklist/actions/task-actions';
+import { DetailTaskType } from '../../tasklist/_tasklist/types/task-type';
+
+interface Props {
+  params: Promise<{ taskId: string }>;
+}
+export default async function DetailTaskPage({ params }: Props) {
+  const taskId = (await params).taskId;
+
+  const task: DetailTaskType = await getDetailTask(taskId);
+
+  const isDone = Boolean(task.doneAt);
+
+  return (
+    <ErrorBoundary fallback={<div>해당 태스크를 불러올 수 없습니다.</div>}>
+      <div className="flex h-full w-full flex-col gap-25 overflow-scroll">
+        <DetailTaskContentField isDone={isDone} task={task} />
+        <DetailTaskCommentField taskId={task.id} />
+        <ToggleDoneButton isDone={isDone} task={task} />
+      </div>
+    </ErrorBoundary>
+  );
+}
diff --git a/src/app/(content-layout)/articles/[articleId]/_articleId/components/CommentList.tsx b/src/app/(content-layout)/articles/[articleId]/_articleId/components/CommentList.tsx
index 64d69094..5f7850ff 100644
--- a/src/app/(content-layout)/articles/[articleId]/_articleId/components/CommentList.tsx
+++ b/src/app/(content-layout)/articles/[articleId]/_articleId/components/CommentList.tsx
@@ -8,7 +8,7 @@ import DangerModal from '@/components/danger-modal';
 import { Toast } from '@/components/common/Toastify';
 import CommentItem from '@/components/comment';
 import BouncingDots from '@/components/common/loading/BouncingDots';
-import useModalContext from '@/components/common/modal/core/useModalContext';
+import { useModal } from '@/contexts/ModalContext';
 import { ArticleComment, ArticleComments } from '@/components/comment/types';
 import { deleteArticleComment, getArticleComments, patchArticleComment } from '../action';
 import { validateEmptyValue } from '@/utils/validators';
@@ -25,7 +25,7 @@ export default function CommentList({
   const [commentIdToDelete, setCommentIdToDelete] = useState<number | null>(null);
   const [commentToEdit, setCommentToEdit] = useState<{ id: number; content: string } | null>(null);
   const [isPending, setIsPending] = useState(false);
-  const { openModal } = useModalContext();
+  const { openModal } = useModal();
 
   const [ref, inView] = useInView({ threshold: 1.0 });
   const [moreComments, setMoreComments] = useState<ArticleComment[]>([]);
diff --git a/src/app/(content-layout)/articles/[articleId]/_articleId/components/DetailArticleInfo.tsx b/src/app/(content-layout)/articles/[articleId]/_articleId/components/DetailArticleInfo.tsx
index 35ba9d41..f07f58cb 100644
--- a/src/app/(content-layout)/articles/[articleId]/_articleId/components/DetailArticleInfo.tsx
+++ b/src/app/(content-layout)/articles/[articleId]/_articleId/components/DetailArticleInfo.tsx
@@ -10,7 +10,7 @@ import { GetArticleDetailResponse } from '@/types/article';
 import { formatTimeDistance } from '@/utils/date';
 import LikeToggleButton from '../../../_articles/components/LikeToggleButton';
 import { useUser } from '@/contexts/UserContext';
-import useModalContext from '@/components/common/modal/core/useModalContext';
+import { useModal } from '@/contexts/ModalContext';
 import DetailArticleDropdown from './DetailArticleDropdown';
 import axiosClient from '@/lib/axiosClient';
 
@@ -19,7 +19,7 @@ const DEFAULT_IMAGE = process.env.NEXT_PUBLIC_DEFAULT_IMAGE;
 export default function DetailArticleInfo({ detail }: { detail: GetArticleDetailResponse }) {
   const router = useRouter();
   const { user } = useUser();
-  const { openModal } = useModalContext();
+  const { openModal } = useModal();
   const [isPending, setIsPending] = useState(false);
 
   const handleArticleDelete = async () => {
diff --git a/src/app/(form-layout)/login/_login/SendResetPassword.tsx b/src/app/(form-layout)/login/_login/SendResetPassword.tsx
index 1e111367..91e4e918 100644
--- a/src/app/(form-layout)/login/_login/SendResetPassword.tsx
+++ b/src/app/(form-layout)/login/_login/SendResetPassword.tsx
@@ -10,10 +10,9 @@ import {
   ModalFooter,
   ModalHeading,
   ModalOverlay,
-  ModalPortal,
   ModalTrigger,
 } from '@/components/common/modal';
-import useModalContext from '@/components/common/modal/core/useModalContext';
+import { useModal, ModalPortal } from '@/contexts/ModalContext';
 import axiosClient from '@/lib/axiosClient';
 import { validateEmail } from '@/utils/validators';
 import { AUTH_ERROR_MESSAGES } from '@/constants/messages/signup';
@@ -22,7 +21,7 @@ import BouncingDots from '@/components/common/loading/BouncingDots';
 const redirectUrl = process.env.NEXT_PUBLIC_RESET_PASSWORD;
 
 export default function SendResetPassword() {
-  const { closeModal } = useModalContext();
+  const { closeModal } = useModal();
   const modalId = `resetPassword`;
   const errorMessageConstant = AUTH_ERROR_MESSAGES.sendResetPassword;
 
diff --git a/src/app/(form-layout)/signup/_signup/SignupForm.tsx b/src/app/(form-layout)/signup/_signup/SignupForm.tsx
index 6700cb95..1924fa1c 100644
--- a/src/app/(form-layout)/signup/_signup/SignupForm.tsx
+++ b/src/app/(form-layout)/signup/_signup/SignupForm.tsx
@@ -2,13 +2,10 @@
 
 import { useState, ChangeEvent } from 'react';
 import { useRouter } from 'next/navigation';
-import axiosClient from '@/lib/axiosClient';
 import FormField from '@/components/common/formField';
 import Button from '@/components/common/Button';
 import PasswordToggleButton from './PasswordToggleButton';
 import usePasswordVisibility from '@/utils/use-password-visibility';
-import useModalContext from '@/components/common/modal/core/useModalContext';
-import SignupSuccessModal from '@/components/signup-alert-modal/SignupSuccessModal';
 import {
   validateEmail,
   validatePassword,
@@ -16,39 +13,36 @@ import {
   validateLengthLimit,
 } from '@/utils/validators';
 import { AUTH_ERROR_MESSAGES } from '@/constants/messages/signup';
-import { Toast } from '@/components/common/Toastify';
-import { setClientCookie } from '@/lib/cookie/client';
-
-interface ErrorResponse {
-  response?: {
-    data: {
-      message: string;
-    };
-  };
-}
+import SignupSuccessModal from './SignupSuccessModal';
+import BouncingDots from '@/components/common/loading/BouncingDots';
+import { useSignup } from '@/app/(form-layout)/signup/_signup/hooks/useSignup';
 
 export default function SignupForm() {
-  const { openModal } = useModalContext();
   const router = useRouter();
   const { isPasswordVisible, togglePasswordVisibility } = usePasswordVisibility();
+  const {
+    duplicateError,
+    isSuccess,
+    isLoading,
+    handleSignup,
+    handleAutoLogin,
+    cancelAutoLogin,
+    clearDuplicateError,
+  } = useSignup();
+
   const [formData, setFormData] = useState({
     nickname: '',
     email: '',
     password: '',
     passwordConfirmation: '',
   });
+
   const setFieldValue = (key: keyof typeof formData, value: string) => {
     setFormData((prev) => ({
       ...prev,
       [key]: value.trim(),
     }));
   };
-  const [duplicateError, setDuplicateError] = useState({
-    nickname: false,
-    email: false,
-  });
-  const [isSuccess, setIsSuccess] = useState(false);
-  const [loginTimeoutId, setLoginTimeoutId] = useState<NodeJS.Timeout | null>(null);
 
   function getNicknameErrorMessage() {
     if (formData.nickname.trim() === '') {
@@ -143,48 +137,10 @@ export default function SignupForm() {
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    try {
-      await axiosClient.post('/auth/signUp', {
-        email: formData.email,
-        password: formData.password,
-        passwordConfirmation: formData.passwordConfirmation,
-        nickname: formData.nickname,
-      });
-
-      const timeoutId = setTimeout(async () => {
-        try {
-          const loginRes = await axiosClient.post('/auth/signIn', {
-            email: formData.email,
-            password: formData.password,
-          });
 
-          const { accessToken, refreshToken } = loginRes.data;
+    handleSignup(formData);
 
-          setClientCookie('accessToken', accessToken);
-          setClientCookie('refreshToken', refreshToken);
-
-          router.push('/nogroup');
-        } catch {
-          Toast.error('자동 로그인 실패. 로그인 페이지로 이동합니다.');
-          router.push('/login');
-        }
-      }, 5000);
-
-      setLoginTimeoutId(timeoutId);
-
-      openModal('signup-success');
-      setIsSuccess(true);
-    } catch (error: unknown) {
-      const err = error as ErrorResponse;
-      const message = err.response?.data?.message || '';
-
-      setDuplicateError({
-        email: message.includes('이메일'),
-        nickname: message.includes('닉네임'),
-      });
-
-      Toast.error('회원가입 실패');
-    }
+    handleAutoLogin(formData.email, formData.password);
   };
 
   const isFormInvalid =
@@ -210,7 +166,7 @@ export default function SignupForm() {
               setFieldValue(key, e.target.value);
 
               if (key === 'email' || key === 'nickname') {
-                setDuplicateError((prev) => ({ ...prev, [key]: false }));
+                clearDuplicateError(key);
               }
             }}
             placeholder={field.placeholder}
@@ -218,14 +174,20 @@ export default function SignupForm() {
           />
         ))}
       </div>
-      <Button type="submit" variant="solid" size="fullWidth" fontSize="16" disabled={isFormInvalid}>
-        회원가입
+      <Button
+        type="submit"
+        variant="solid"
+        size="fullWidth"
+        fontSize="16"
+        disabled={isFormInvalid || isLoading}
+      >
+        {isLoading ? <BouncingDots /> : '회원가입'}
       </Button>
       {isSuccess && (
         <SignupSuccessModal
           nickname={formData.nickname}
           onGoToLoginPage={() => {
-            if (loginTimeoutId) clearTimeout(loginTimeoutId);
+            cancelAutoLogin();
             router.push('/login');
           }}
         />
diff --git a/src/components/signup-alert-modal/SignupSuccessModal.tsx b/src/app/(form-layout)/signup/_signup/SignupSuccessModal.tsx
similarity index 93%
rename from src/components/signup-alert-modal/SignupSuccessModal.tsx
rename to src/app/(form-layout)/signup/_signup/SignupSuccessModal.tsx
index 78377458..7fe5dddf 100644
--- a/src/components/signup-alert-modal/SignupSuccessModal.tsx
+++ b/src/app/(form-layout)/signup/_signup/SignupSuccessModal.tsx
@@ -7,9 +7,9 @@ import {
   ModalFooter,
   ModalHeading,
   ModalOverlay,
-  ModalPortal,
 } from '@/components/common/modal';
-import Button from '../common/Button';
+import { ModalPortal } from '@/contexts/ModalContext';
+import Button from '../../../../components/common/Button';
 
 interface Props {
   nickname: string;
diff --git a/src/app/(form-layout)/signup/_signup/hooks/useSignup.ts b/src/app/(form-layout)/signup/_signup/hooks/useSignup.ts
new file mode 100644
index 00000000..6078bfed
--- /dev/null
+++ b/src/app/(form-layout)/signup/_signup/hooks/useSignup.ts
@@ -0,0 +1,170 @@
+import { useState, useRef, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { useMutation } from '@tanstack/react-query';
+import axiosClient from '@/lib/axiosClient';
+import { useModal } from '@/contexts/ModalContext';
+import { Toast } from '@/components/common/Toastify';
+import { setClientCookie } from '@/lib/cookie/client';
+import { useUser } from '@/contexts/UserContext';
+
+export interface SignupRequest {
+  email: string;
+  password: string;
+  passwordConfirmation: string;
+  nickname: string;
+}
+
+export interface LoginRequest {
+  email: string;
+  password: string;
+}
+
+export interface LoginResponse {
+  accessToken: string;
+  refreshToken: string;
+}
+
+export interface ErrorResponse {
+  response?: {
+    data: {
+      message: string;
+    };
+  };
+}
+
+const signupUser = async (data: SignupRequest): Promise<void> => {
+  await axiosClient.post('/auth/signUp', data);
+};
+
+const loginUser = async (data: LoginRequest): Promise<LoginResponse> => {
+  const response = await axiosClient.post('/auth/signIn', data);
+  return response.data;
+};
+
+export const useSignup = () => {
+  const { openModal } = useModal();
+  const router = useRouter();
+  const { fetchUser } = useUser();
+
+  const [duplicateError, setDuplicateError] = useState({
+    nickname: false,
+    email: false,
+  });
+
+  const [isSuccess, setIsSuccess] = useState(false);
+  const [pendingLogin, setPendingLogin] = useState<LoginRequest | null>(null);
+
+  const loginTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const autoLoginCancelledRef = useRef(false);
+
+  const signupMutation = useMutation({
+    mutationFn: signupUser,
+    onSuccess: () => {
+      openModal('signup-success');
+      setIsSuccess(true);
+      autoLoginCancelledRef.current = false;
+
+      if (pendingLogin) {
+        loginTimeoutRef.current = setTimeout(() => {
+          if (!autoLoginCancelledRef.current) {
+            loginMutation.mutate(pendingLogin);
+          }
+        }, 5000);
+      }
+    },
+    onError: (error: unknown) => {
+      const err = error as ErrorResponse;
+      const message = err.response?.data?.message || '';
+
+      setDuplicateError({
+        email: message.includes('이메일'),
+        nickname: message.includes('닉네임'),
+      });
+
+      Toast.error('회원가입 실패');
+      setPendingLogin(null);
+      autoLoginCancelledRef.current = true;
+    },
+  });
+
+  const loginMutation = useMutation({
+    mutationFn: loginUser,
+    onSuccess: async (data: LoginResponse) => {
+      const { accessToken, refreshToken } = data;
+
+      setClientCookie('accessToken', accessToken);
+      setClientCookie('refreshToken', refreshToken);
+
+      await fetchUser();
+      router.push('/nogroup');
+    },
+    onError: () => {
+      Toast.error('자동 로그인 실패.');
+      router.push('/login');
+    },
+  });
+
+  const handleSignup = useCallback(
+    (formData: SignupRequest) => {
+      if (signupMutation.isPending || loginMutation.isPending) {
+        return;
+      }
+
+      if (loginTimeoutRef.current) {
+        clearTimeout(loginTimeoutRef.current);
+        loginTimeoutRef.current = null;
+      }
+
+      signupMutation.mutate(formData);
+    },
+    [signupMutation, loginMutation]
+  );
+
+  const handleAutoLogin = useCallback((email: string, password: string) => {
+    setPendingLogin({ email, password });
+  }, []);
+
+  const cancelAutoLogin = useCallback(() => {
+    if (loginTimeoutRef.current) {
+      clearTimeout(loginTimeoutRef.current);
+      loginTimeoutRef.current = null;
+    }
+
+    autoLoginCancelledRef.current = true;
+    setPendingLogin(null);
+  }, []);
+
+  const clearDuplicateError = useCallback((field: 'email' | 'nickname') => {
+    setDuplicateError((prev) => ({ ...prev, [field]: false }));
+  }, []);
+
+  const cleanup = useCallback(() => {
+    if (loginTimeoutRef.current) {
+      clearTimeout(loginTimeoutRef.current);
+      loginTimeoutRef.current = null;
+    }
+    autoLoginCancelledRef.current = true;
+  }, []);
+
+  const isFormDisabled = signupMutation.isPending || loginMutation.isPending;
+
+  const isLoading = signupMutation.isPending || loginMutation.isPending;
+
+  return {
+    duplicateError,
+    isSuccess,
+    isLoading,
+    isFormDisabled,
+
+    signupMutation,
+    loginMutation,
+
+    handleSignup,
+    handleAutoLogin,
+    cancelAutoLogin,
+    clearDuplicateError,
+    cleanup,
+
+    isPendingAutoLogin: !!pendingLogin && !autoLoginCancelledRef.current,
+  };
+};
diff --git a/src/app/@modal/(...)[...modal]/create-tasklist/page.tsx b/src/app/@modal/(...)[...modal]/create-tasklist/page.tsx
new file mode 100644
index 00000000..49be2bb1
--- /dev/null
+++ b/src/app/@modal/(...)[...modal]/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 Page() {
+  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>
+  );
+}
diff --git a/src/app/@modal/default.tsx b/src/app/@modal/default.tsx
new file mode 100644
index 00000000..6ddf1b76
--- /dev/null
+++ b/src/app/@modal/default.tsx
@@ -0,0 +1,3 @@
+export default function Default() {
+  return null;
+}
diff --git a/src/app/[...modal]/page.tsx b/src/app/[...modal]/page.tsx
new file mode 100644
index 00000000..e7c23934
--- /dev/null
+++ b/src/app/[...modal]/page.tsx
@@ -0,0 +1,5 @@
+'use client';
+
+import notFound from '@/app/not-found';
+
+export default notFound;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9670033b..879c4182 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,9 +1,10 @@
 import type { Metadata } from 'next';
 import './globals.css';
 import Header from '@/components/layout/gnb/Header';
-import { ModalProvider } from '@/components/common/modal';
 import ToastProvider from '@/components/common/Toastify/ToasProvider';
 import { UserProvider } from '@/contexts/UserContext';
+import { ModalProvider } from '@/contexts/ModalContext';
+import QueryProvider from '@/lib/query/queryProvider';
 
 export const metadata: Metadata = {
   title: 'Coworkers',
@@ -11,23 +12,28 @@ export const metadata: Metadata = {
 
 export default function RootLayout({
   children,
+  modal,
 }: Readonly<{
   children: React.ReactNode;
+  modal: React.ReactNode;
 }>) {
   return (
     <html lang="ko">
       <body className="flex h-screen flex-col overflow-hidden">
-        <ModalProvider>
-          <UserProvider>
-            <ToastProvider>
-              <Header />
-              <div id="scroll-container" className="flex-1 overflow-y-auto">
-                {children}
-              </div>
-              <div id="modal-container"></div>
-            </ToastProvider>
-          </UserProvider>
-        </ModalProvider>
+        <QueryProvider>
+          <ModalProvider>
+            <UserProvider>
+              <ToastProvider>
+                <Header />
+                <div id="scroll-container" className="flex-1 overflow-y-auto">
+                  {children}
+                </div>
+                <div>{modal}</div>
+                <div id="modal-container"></div>
+              </ToastProvider>
+            </UserProvider>
+          </ModalProvider>
+        </QueryProvider>
       </body>
     </html>
   );
diff --git a/src/app/mypage/MypageClient.tsx b/src/app/mypage/MypageClient.tsx
index 2ee7a466..d97fb150 100644
--- a/src/app/mypage/MypageClient.tsx
+++ b/src/app/mypage/MypageClient.tsx
@@ -2,6 +2,7 @@
 
 import Image from 'next/image';
 import { useState, useEffect } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { updateUserNickname, verifyPassword } from './_mypage/action';
 import ProfileImageUploader from './_mypage/ProfileImageUploader';
 import NicknameField from './_mypage/NicknameField';
@@ -10,7 +11,7 @@ import { Toast } from '@/components/common/Toastify';
 import ChangePasswordModal from './_mypage/mypage-modal/ChangePasswordModal';
 import DeleteAccountModal from './_mypage/mypage-modal/DeleteAccountModal';
 import ConfirmDeleteAccountModal from './_mypage/mypage-modal/ConfirmDeleteAccountModal';
-import useModalContext from '@/components/common/modal/core/useModalContext';
+import { useModal } from '@/contexts/ModalContext';
 import FormField from '@/components/common/formField';
 import { useUser } from '@/contexts/UserContext';
 
@@ -20,7 +21,39 @@ export default function MyPageClient() {
   const [nickname, setNickname] = useState(user?.nickname ?? '');
   const [nicknameError, setNicknameError] = useState('');
   const [password, setPassword] = useState('');
-  const { openModal, closeModal } = useModalContext();
+  const [passwordError, setPasswordError] = useState('');
+  const { openModal, closeModal } = useModal();
+  const queryClient = useQueryClient();
+
+  const updateNicknameMutation = useMutation({
+    mutationFn: (newNickname: string) => updateUserNickname(newNickname),
+    onSuccess: async () => {
+      await fetchUser();
+      queryClient.invalidateQueries({ queryKey: ['user'] });
+      Toast.success('닉네임 변경 성공');
+    },
+    onError: (error) => {
+      const errorObj = error as { response?: { data?: { message?: string } } };
+      const message = errorObj?.response?.data?.message || '닉네임을 변경할 수 없습니다.';
+      setNicknameError(message);
+      Toast.error('닉네임 변경 실패');
+    },
+  });
+
+  const verifyPasswordMutation = useMutation({
+    mutationFn: ({ email, password }: { email: string; password: string }) =>
+      verifyPassword(email, password),
+    onSuccess: (res) => {
+      if (res?.accessToken) {
+        setPasswordError('');
+        openModal('change-password');
+      }
+    },
+    onError: () => {
+      setPasswordError('올바른 비밀번호를 입력해 주세요.');
+      Toast.error('비밀번호 인증 실패');
+    },
+  });
 
   useEffect(() => {
     if (user?.image) {
@@ -42,6 +75,16 @@ export default function MyPageClient() {
     return false;
   };
 
+  const handleNicknameUpdate = async () => {
+    if (isSameNickname()) return;
+    updateNicknameMutation.mutate(nickname);
+  };
+
+  const handlePasswordVerification = async () => {
+    if (!email) return;
+    verifyPasswordMutation.mutate({ email, password });
+  };
+
   return (
     <div className="flex justify-center">
       <div className="mx-4 mt-6 w-full max-w-198 min-w-[343px] md:mx-6 lg:mt-7">
@@ -60,35 +103,17 @@ export default function MyPageClient() {
               nicknameError={nicknameError}
               setNickname={setNickname}
               setNicknameError={setNicknameError}
-              onClick={async () => {
-                if (isSameNickname()) return;
-                try {
-                  await updateUserNickname(nickname);
-                  await fetchUser();
-                  Toast.success('닉네임 변경 성공');
-                } catch (error: unknown) {
-                  const errorObj = error as { response?: { data?: { message?: string } } };
-                  const message =
-                    errorObj?.response?.data?.message || '닉네임을 변경할 수 없습니다.';
-                  setNicknameError(message);
-                  Toast.error('닉네임 변경에 실패했습니다.');
-                }
-              }}
+              onClick={handleNicknameUpdate}
+              isLoading={updateNicknameMutation.isPending}
             />
             <FormField field="input" label="이메일" value={email || ''} readOnly />
             <PasswordField
               password={password}
               setPassword={setPassword}
-              onClick={async () => {
-                try {
-                  const res = await verifyPassword(email!, password);
-                  if (res?.accessToken) {
-                    openModal('change-password');
-                  }
-                } catch (e) {
-                  Toast.error('비밀번호 인증 실패');
-                }
-              }}
+              onClick={handlePasswordVerification}
+              isLoading={verifyPasswordMutation.isPending}
+              passwordError={passwordError}
+              setPasswordError={setPasswordError}
             />
             <button
               type="button"
diff --git a/src/app/mypage/_mypage/NicknameField.tsx b/src/app/mypage/_mypage/NicknameField.tsx
index edc22b8c..ebdbc7ff 100644
--- a/src/app/mypage/_mypage/NicknameField.tsx
+++ b/src/app/mypage/_mypage/NicknameField.tsx
@@ -4,6 +4,7 @@ import Button from '@/components/common/Button';
 import FormField from '@/components/common/formField';
 import { validateLengthLimit } from '@/utils/validators';
 import { AUTH_ERROR_MESSAGES } from '@/constants/messages/signup';
+import BouncingDots from '@/components/common/loading/BouncingDots';
 
 interface NicknameFieldProps {
   nickname: string;
@@ -11,6 +12,7 @@ interface NicknameFieldProps {
   setNickname: (value: string) => void;
   setNicknameError: (value: string) => void;
   onClick: () => void;
+  isLoading?: boolean;
 }
 
 export default function NicknameField({
@@ -19,14 +21,16 @@ export default function NicknameField({
   setNickname,
   setNicknameError,
   onClick,
+  isLoading = false,
 }: NicknameFieldProps) {
   return (
     <FormField
       field="input"
-      label="이름"
+      label="닉네임"
+      placeholder="닉네임을 입력해 주세요"
       value={nickname}
-      isFailure={!!nicknameError}
       errorMessage={nicknameError}
+      isFailure={!!nicknameError}
       onChange={(e) => {
         const value = e.target.value;
         setNickname(value);
@@ -40,8 +44,14 @@ export default function NicknameField({
       }}
       rightSlot={
         <div className="flex items-center">
-          <Button size="xs" fontSize="14" disabled={!!nicknameError} onClick={onClick}>
-            변경하기
+          <Button
+            size="xs"
+            fontSize="14"
+            className="shrink-0"
+            onClick={onClick}
+            disabled={isLoading || !!nicknameError || !nickname.trim()}
+          >
+            {isLoading ? <BouncingDots /> : '변경하기'}
           </Button>
         </div>
       }
diff --git a/src/app/mypage/_mypage/PasswordField.tsx b/src/app/mypage/_mypage/PasswordField.tsx
index d280032f..f1b33dfa 100644
--- a/src/app/mypage/_mypage/PasswordField.tsx
+++ b/src/app/mypage/_mypage/PasswordField.tsx
@@ -2,14 +2,25 @@
 
 import Button from '@/components/common/Button';
 import FormField from '@/components/common/formField';
+import BouncingDots from '@/components/common/loading/BouncingDots';
 
 interface PasswordFieldProps {
   password: string;
   setPassword: (value: string) => void;
   onClick: () => void;
+  isLoading?: boolean;
+  passwordError?: string;
+  setPasswordError?: (value: string) => void;
 }
 
-export default function PasswordField({ password, setPassword, onClick }: PasswordFieldProps) {
+export default function PasswordField({
+  password,
+  setPassword,
+  onClick,
+  isLoading = false,
+  passwordError,
+  setPasswordError,
+}: PasswordFieldProps) {
   return (
     <FormField
       field="input"
@@ -17,17 +28,28 @@ export default function PasswordField({ password, setPassword, onClick }: Passwo
       label="비밀번호"
       placeholder="비밀번호를 입력해 주세요."
       value={password}
-      onChange={(e) => setPassword(e.target.value)}
+      onChange={(e) => {
+        setPassword(e.target.value);
+        setPasswordError?.('');
+      }}
       onKeyDown={(e) => {
         if (e.key === 'Enter') {
           e.preventDefault();
           onClick();
         }
       }}
+      isFailure={!!passwordError}
+      errorMessage={passwordError}
       rightSlot={
         <div className="flex items-center">
-          <Button size="xs" fontSize="14" className="shrink-0" onClick={onClick}>
-            변경하기
+          <Button
+            size="xs"
+            fontSize="14"
+            className="shrink-0"
+            onClick={onClick}
+            disabled={isLoading || !password.trim()}
+          >
+            {isLoading ? <BouncingDots /> : '변경하기'}
           </Button>
         </div>
       }
diff --git a/src/app/mypage/_mypage/mypage-modal/ChangePasswordModal.tsx b/src/app/mypage/_mypage/mypage-modal/ChangePasswordModal.tsx
index 984bb9b5..e4e5afac 100644
--- a/src/app/mypage/_mypage/mypage-modal/ChangePasswordModal.tsx
+++ b/src/app/mypage/_mypage/mypage-modal/ChangePasswordModal.tsx
@@ -2,14 +2,8 @@
 
 import { useState, useTransition } from 'react';
 import { useRouter } from 'next/navigation';
-import {
-  ModalContainer,
-  ModalFooter,
-  ModalHeading,
-  ModalOverlay,
-  ModalPortal,
-} from '@/components/common/modal';
-import useModalContext from '@/components/common/modal/core/useModalContext';
+import { ModalContainer, ModalFooter, ModalHeading, ModalOverlay } from '@/components/common/modal';
+import { useModal, ModalPortal } from '@/contexts/ModalContext';
 import { validatePassword, validateConfirmPassword } from '@/utils/validators';
 import FormField from '@/components/common/formField';
 import Button from '@/components/common/Button';
@@ -26,7 +20,7 @@ interface PasswordChangeSuccessModalProps {
 }
 
 export default function ChangePasswordModal({ onClose }: PasswordChangeSuccessModalProps) {
-  const { closeModal } = useModalContext();
+  const { closeModal } = useModal();
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
   const { logoutUser } = useUser();
diff --git a/src/app/mypage/_mypage/mypage-modal/ConfirmDeleteAccountModal.tsx b/src/app/mypage/_mypage/mypage-modal/ConfirmDeleteAccountModal.tsx
index 0629d6c7..2bb8f339 100644
--- a/src/app/mypage/_mypage/mypage-modal/ConfirmDeleteAccountModal.tsx
+++ b/src/app/mypage/_mypage/mypage-modal/ConfirmDeleteAccountModal.tsx
@@ -8,16 +8,15 @@ import {
   ModalFooter,
   ModalHeading,
   ModalOverlay,
-  ModalPortal,
 } from '@/components/common/modal';
-import useModalContext from '@/components/common/modal/core/useModalContext';
+import { useModal, ModalPortal } from '@/contexts/ModalContext';
 import axiosClient from '@/lib/axiosClient';
 import Button from '@/components/common/Button';
 import { Toast } from '@/components/common/Toastify';
 import { deleteClientCookie } from '@/lib/cookie/client';
 
 export default function ConfirmDeleteAccountModal() {
-  const { closeModal } = useModalContext();
+  const { closeModal } = useModal();
   const { logoutUser } = useUser();
 
   return (
diff --git a/src/app/mypage/_mypage/mypage-modal/DeleteAccountModal.tsx b/src/app/mypage/_mypage/mypage-modal/DeleteAccountModal.tsx
index b214bcfb..a257cb3e 100644
--- a/src/app/mypage/_mypage/mypage-modal/DeleteAccountModal.tsx
+++ b/src/app/mypage/_mypage/mypage-modal/DeleteAccountModal.tsx
@@ -7,13 +7,12 @@ import {
   ModalFooter,
   ModalHeading,
   ModalOverlay,
-  ModalPortal,
 } from '@/components/common/modal';
-import useModalContext from '@/components/common/modal/core/useModalContext';
+import { useModal, ModalPortal } from '@/contexts/ModalContext';
 import Button from '@/components/common/Button';
 
 export default function DeleteAccountModal() {
-  const { closeModal, openModal } = useModalContext();
+  const { closeModal, openModal } = useModal();
 
   return (
     <>
diff --git a/src/components/common/ErrorModal/index.tsx b/src/components/common/ErrorModal/index.tsx
index e43ea4c5..5484ee81 100644
--- a/src/components/common/ErrorModal/index.tsx
+++ b/src/components/common/ErrorModal/index.tsx
@@ -4,11 +4,10 @@ import {
   ModalDescription,
   ModalFooter,
   ModalOverlay,
-  ModalPortal,
 } from '@/components/common/modal';
+import { useModal, ModalPortal } from '@/contexts/ModalContext';
 import Image from 'next/image';
 import Button from '@/components/common/Button';
-import useModalContext from '@/components/common/modal/core/useModalContext';
 
 interface Props {
   modalId: string;
@@ -17,7 +16,7 @@ interface Props {
   buttonText?: string;
 }
 export default function ErrorModal({ modalId, description, onClick, buttonText }: Props) {
-  const { closeModal } = useModalContext();
+  const { closeModal } = useModal();
   const modalButtonText = buttonText ? buttonText : '닫기';
 
   return (
diff --git a/src/components/common/formField/Fields.tsx b/src/components/common/formField/Fields.tsx
new file mode 100644
index 00000000..94b82820
--- /dev/null
+++ b/src/components/common/formField/Fields.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import clsx from 'clsx';
+import { GAP_SIZE, LABEL_SIZE } from './style';
+import { FieldProps } from './type';
+
+export default function Fields({
+  label,
+  required,
+  errorMessage,
+  gapSize = '12',
+  labelSize = '16/16',
+  render,
+}: FieldProps) {
+  const showError = !!errorMessage;
+
+  return (
+    <div className="flex w-full flex-col gap-2">
+      <div className={clsx('flex flex-col', GAP_SIZE[gapSize])}>
+        {label && (
+          <label className={clsx('flex gap-1.5', LABEL_SIZE[labelSize])}>
+            {required && <span className="text-tertiary text-2lg-bold sm:text-xl-bold">*</span>}
+            {label}
+          </label>
+        )}
+        {render()}
+      </div>
+
+      {showError && <span className="text-danger text-md-md text-left">{errorMessage}</span>}
+    </div>
+  );
+}
diff --git a/src/components/common/formField/compound/ImageUploader.tsx b/src/components/common/formField/compound/ImageUploader.tsx
index 30691c3f..4fef0de7 100644
--- a/src/components/common/formField/compound/ImageUploader.tsx
+++ b/src/components/common/formField/compound/ImageUploader.tsx
@@ -41,12 +41,12 @@ export default function ImageUploader({ imageUploaderType, image, inputRef }: Im
       <button
         onClick={triggerUploadClick}
         className={clsx(
-          'border-border relative flex h-16 w-16 cursor-pointer items-center justify-center rounded-full border-2',
+          'border-border relative flex h-16 w-16 cursor-pointer items-center justify-center overflow-hidden rounded-full border-2',
           TEAM ? 'bg-bg200' : 'bg-bg100'
         )}
       >
         {image ? (
-          <Image src={image} fill alt="profile" className="rounded-full" />
+          <Image src={image} fill alt="profile" className="object-cover" />
         ) : (
           <Image
             src={defaultIcon}
diff --git a/src/components/common/formField/compound/Input.tsx b/src/components/common/formField/compound/Input.tsx
index 7803517a..631f6cee 100644
--- a/src/components/common/formField/compound/Input.tsx
+++ b/src/components/common/formField/compound/Input.tsx
@@ -7,6 +7,7 @@ import { InputProps } from '../type';
 export default function Input({
   leftSlot = null,
   rightSlot = null,
+  hasError,
   borderClassName = 'border-border',
   className,
   ref,
@@ -16,7 +17,7 @@ export default function Input({
     <div
       className={clsx(
         'bg-bg200 flex h-11 w-full gap-3 rounded-xl border px-4 py-2.5 sm:h-12',
-        borderClassName,
+        hasError ? 'border-danger' : borderClassName,
         className
       )}
     >
diff --git a/src/components/common/formField/style.ts b/src/components/common/formField/style.ts
index 5a285b87..4b5b3aa2 100644
--- a/src/components/common/formField/style.ts
+++ b/src/components/common/formField/style.ts
@@ -14,6 +14,7 @@ export const LABEL_SIZE = {
   '16/20': 'text-lg-md sm:text-xl-bold',
 } as const;
 
+// 삭제 예정
 export const getBorderClassName = ({
   isFocused,
   showSuccess,
diff --git a/src/components/common/formField/type.ts b/src/components/common/formField/type.ts
index 9118aadc..32d44d27 100644
--- a/src/components/common/formField/type.ts
+++ b/src/components/common/formField/type.ts
@@ -1,8 +1,10 @@
 import { InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { GAP_SIZE, LABEL_SIZE } from './style';
 
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   leftSlot?: React.ReactNode;
   rightSlot?: React.ReactNode;
+  hasError?: boolean;
   borderClassName?: string;
   className?: string;
   ref?: React.Ref<HTMLInputElement>;
@@ -15,14 +17,17 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
   className?: string;
 }
 
+// 삭제 예정
 export type ImageUploaderType = 'board' | 'team' | 'user';
 
 export interface FileInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  // imageUploaderType 삭제 예정
   imageUploaderType?: ImageUploaderType;
   image: string | null;
   onImageChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
+// 삭제 예정
 export interface FormFieldProps {
   field: 'input' | 'textarea' | 'file-input';
   imageUploaderType?: ImageUploaderType;
@@ -34,10 +39,20 @@ export interface FormFieldProps {
   errorMessage?: string;
   gapSize?: '12' | '16' | '24' | '32';
   labelSize?: '16/16' | '14/16' | '16/20';
-  onFieldFocus?: () => void;
-  onFieldBlur?: () => void;
+  onFieldFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  onFieldBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
 }
 
+export interface FieldProps {
+  label?: string;
+  required?: boolean;
+  errorMessage?: string;
+  gapSize?: keyof typeof GAP_SIZE;
+  labelSize?: keyof typeof LABEL_SIZE;
+  render: () => React.ReactNode;
+}
+
+// 삭제 에정
 export type FieldComponentProps =
   | (InputProps & FormFieldProps & { field?: 'input' })
   | (TextareaProps & FormFieldProps & { field?: 'textarea' })
diff --git a/src/components/common/modal/ui/ModalCloseButton.tsx b/src/components/common/modal/ModalCloseButton.tsx
similarity index 85%
rename from src/components/common/modal/ui/ModalCloseButton.tsx
rename to src/components/common/modal/ModalCloseButton.tsx
index c42f269c..0e88343a 100644
--- a/src/components/common/modal/ui/ModalCloseButton.tsx
+++ b/src/components/common/modal/ModalCloseButton.tsx
@@ -2,8 +2,7 @@
 import Image from 'next/image';
 import clsx from 'clsx';
 import xIcon from '@/../public/icons/x-icon.svg';
-import useModalContext from '@/components/common/modal/core/useModalContext';
-
+import { useModal } from '@/contexts/ModalContext';
 interface ModalCloseButtonProps extends React.ComponentProps<'button'> {
   modalId: string;
 }
@@ -14,7 +13,7 @@ export default function ModalCloseButton({
   onClick,
   ...props
 }: ModalCloseButtonProps) {
-  const { closeModal } = useModalContext();
+  const { closeModal } = useModal();
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (onClick) {
diff --git a/src/components/common/modal/ui/ModalContainer.tsx b/src/components/common/modal/ModalContainer.tsx
similarity index 100%
rename from src/components/common/modal/ui/ModalContainer.tsx
rename to src/components/common/modal/ModalContainer.tsx
diff --git a/src/components/common/modal/ui/ModalDescription.tsx b/src/components/common/modal/ModalDescription.tsx
similarity index 100%
rename from src/components/common/modal/ui/ModalDescription.tsx
rename to src/components/common/modal/ModalDescription.tsx
diff --git a/src/components/common/modal/ui/ModalFooter.tsx b/src/components/common/modal/ModalFooter.tsx
similarity index 100%
rename from src/components/common/modal/ui/ModalFooter.tsx
rename to src/components/common/modal/ModalFooter.tsx
diff --git a/src/components/common/modal/ui/ModalHeading.tsx b/src/components/common/modal/ModalHeading.tsx
similarity index 100%
rename from src/components/common/modal/ui/ModalHeading.tsx
rename to src/components/common/modal/ModalHeading.tsx
diff --git a/src/components/common/modal/ui/ModalOverlay.tsx b/src/components/common/modal/ModalOverlay.tsx
similarity index 90%
rename from src/components/common/modal/ui/ModalOverlay.tsx
rename to src/components/common/modal/ModalOverlay.tsx
index 5ea431da..58f201a2 100644
--- a/src/components/common/modal/ui/ModalOverlay.tsx
+++ b/src/components/common/modal/ModalOverlay.tsx
@@ -1,8 +1,7 @@
 'use client';
 import { useEffect } from 'react';
 import clsx from 'clsx';
-import useModalContext from '@/components/common/modal/core/useModalContext';
-
+import { useModal } from '@/contexts/ModalContext';
 interface ModalOverlayProps extends React.ComponentProps<'div'> {
   modalId: string;
   disableOverlayClose?: boolean;
@@ -17,7 +16,7 @@ export default function ModalOverlay({
   children,
   ...props
 }: ModalOverlayProps) {
-  const { closeModal } = useModalContext();
+  const { closeModal } = useModal();
 
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (e.target === e.currentTarget && !disableOverlayClose) {
diff --git a/src/components/common/modal/ui/ModalTrigger.tsx b/src/components/common/modal/ModalTrigger.tsx
similarity index 78%
rename from src/components/common/modal/ui/ModalTrigger.tsx
rename to src/components/common/modal/ModalTrigger.tsx
index 9743c6e1..129ef707 100644
--- a/src/components/common/modal/ui/ModalTrigger.tsx
+++ b/src/components/common/modal/ModalTrigger.tsx
@@ -1,12 +1,11 @@
 'use client';
-import useModalContext from '@/components/common/modal/core/useModalContext';
-
+import { useModal } from '@/contexts/ModalContext';
 interface ModalTriggerProps extends React.ComponentProps<'button'> {
   modalId: string;
 }
 
 export default function ModalTrigger({ modalId, onClick, children, ...props }: ModalTriggerProps) {
-  const { openModal } = useModalContext();
+  const { openModal } = useModal();
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     openModal(modalId);
     if (onClick) {
diff --git a/src/components/common/modal/core/ModalContext.tsx b/src/components/common/modal/core/ModalContext.tsx
deleted file mode 100644
index 4f1f2fbe..00000000
--- a/src/components/common/modal/core/ModalContext.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-'use client';
-import { createContext } from 'react';
-
-type ModalContextValue = {
-  toggleModal: (id: string) => void;
-  openModal: (id: string) => void;
-  closeModal: (id: string) => void;
-  checkIsModalOpen: (id: string) => boolean;
-};
-
-const ModalContext = createContext<ModalContextValue | null>(null);
-
-export default ModalContext;
diff --git a/src/components/common/modal/core/ModalPortal.tsx b/src/components/common/modal/core/ModalPortal.tsx
deleted file mode 100644
index 213ab4bf..00000000
--- a/src/components/common/modal/core/ModalPortal.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-'use client';
-import { useState, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import useModalContext from '@/components/common/modal/core/useModalContext';
-
-export default function ModalPortal({
-  children,
-  modalId,
-}: {
-  children: React.ReactNode;
-  modalId: string;
-}) {
-  const [modalPortal, setModalPortal] = useState<Element | null>(null);
-  const { checkIsModalOpen } = useModalContext();
-
-  useEffect(
-    function initializeModalPortal() {
-      const modalElement = document.querySelector('#modal-container');
-      setModalPortal(modalElement);
-    },
-    [setModalPortal]
-  );
-
-  if (!modalPortal) return null;
-
-  return <>{createPortal(checkIsModalOpen(modalId) ? children : null, modalPortal)}</>;
-}
diff --git a/src/components/common/modal/core/ModalProvider.tsx b/src/components/common/modal/core/ModalProvider.tsx
deleted file mode 100644
index 08e16299..00000000
--- a/src/components/common/modal/core/ModalProvider.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-'use client';
-import { useState } from 'react';
-import ModalContext from '@/components/common/modal/core/ModalContext';
-
-export interface ModalState {
-  [id: string]: { isOpen: boolean };
-}
-
-export default function ModalProvider({ children }: { children: React.ReactNode }) {
-  const [modals, setModals] = useState<ModalState>({});
-
-  const openModal = (id: string) => {
-    setModals((prev) => ({
-      ...prev,
-      [id]: { isOpen: true },
-    }));
-  };
-
-  const closeModal = (id: string) => {
-    setModals((prev) => ({
-      ...prev,
-      [id]: { isOpen: false },
-    }));
-  };
-
-  const toggleModal = (id: string) => {
-    setModals((prev) => ({
-      ...prev,
-      [id]: { isOpen: prev[id]?.isOpen !== true },
-    }));
-  };
-
-  const checkIsModalOpen = (id: string) => {
-    return !!modals[id]?.isOpen;
-  };
-
-  return (
-    <ModalContext.Provider
-      value={{
-        openModal,
-        closeModal,
-        toggleModal,
-        checkIsModalOpen,
-      }}
-    >
-      {children}
-    </ModalContext.Provider>
-  );
-}
diff --git a/src/components/common/modal/core/useModalContext.tsx b/src/components/common/modal/core/useModalContext.tsx
deleted file mode 100644
index 320d0321..00000000
--- a/src/components/common/modal/core/useModalContext.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-'use client';
-import { use } from 'react';
-import ModalContext from '@/components/common/modal/core/ModalContext';
-
-export default function useModalContext() {
-  const ctx = use(ModalContext);
-  if (!ctx) throw new Error('useModal must be used within ModalProvider');
-  return ctx;
-}
diff --git a/src/components/common/modal/index.ts b/src/components/common/modal/index.ts
index 4ae22a42..f5a6b0fe 100644
--- a/src/components/common/modal/index.ts
+++ b/src/components/common/modal/index.ts
@@ -1,9 +1,7 @@
-export { default as ModalProvider } from './core/ModalProvider';
-export { default as ModalPortal } from './core/ModalPortal';
-export { default as ModalCloseButton } from './ui/ModalCloseButton';
-export { default as ModalContainer } from './ui/ModalContainer';
-export { default as ModalDescription } from './ui/ModalDescription';
-export { default as ModalFooter } from './ui/ModalFooter';
-export { default as ModalHeading } from './ui/ModalHeading';
-export { default as ModalOverlay } from './ui/ModalOverlay';
-export { default as ModalTrigger } from './ui/ModalTrigger';
+export { default as ModalCloseButton } from './ModalCloseButton';
+export { default as ModalContainer } from './ModalContainer';
+export { default as ModalDescription } from './ModalDescription';
+export { default as ModalFooter } from './ModalFooter';
+export { default as ModalHeading } from './ModalHeading';
+export { default as ModalOverlay } from './ModalOverlay';
+export { default as ModalTrigger } from './ModalTrigger';
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<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>
+  );
+}
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 (
+    <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>
+  );
+}
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 (
+    <p
+      className={clsx(
+        'text-gray300 text-sm-md text-center break-keep whitespace-normal',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </p>
+  );
+}
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 (
+    <div className={clsx('flex justify-center gap-2', className)} {...props}>
+      {children}
+    </div>
+  );
+}
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 (
+    <h2
+      className={clsx('text-lg-md text-center break-keep whitespace-normal', className)}
+      {...props}
+    >
+      {children}
+    </h2>
+  );
+}
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<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>
+  );
+}
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;
diff --git a/src/components/danger-modal/index.tsx b/src/components/danger-modal/index.tsx
index 8c2d1599..61e5c0c5 100644
--- a/src/components/danger-modal/index.tsx
+++ b/src/components/danger-modal/index.tsx
@@ -5,11 +5,10 @@ import {
   ModalFooter,
   ModalHeading,
   ModalOverlay,
-  ModalPortal,
 } from '@/components/common/modal';
+import { useModal, ModalPortal } from '@/contexts/ModalContext';
 import Image from 'next/image';
 import Button from '@/components/common/Button';
-import useModalContext from '@/components/common/modal/core/useModalContext';
 
 interface DangerModalProps {
   modalId: string;
@@ -29,7 +28,7 @@ export default function DangerModal({
   onConfirm,
   disabled,
 }: DangerModalProps) {
-  const { closeModal } = useModalContext();
+  const { closeModal } = useModal();
 
   const closeButton = closeButtonText ? closeButtonText : '닫기';
 
diff --git a/src/components/layout/gnb/Header.tsx b/src/components/layout/gnb/Header.tsx
index a79ecd6a..7b69c7ca 100644
--- a/src/components/layout/gnb/Header.tsx
+++ b/src/components/layout/gnb/Header.tsx
@@ -111,7 +111,7 @@ export default function Header() {
         </div>
 
         <div className="ml-auto">
-          {user && (
+          {!isLoading && user && (
             <ProfileDropdownButton
               userData={{
                 ...user,
diff --git a/src/components/manage-group/ManageGroup.tsx b/src/components/manage-group/ManageGroup.tsx
index 02c4ed6b..d6410e13 100644
--- a/src/components/manage-group/ManageGroup.tsx
+++ b/src/components/manage-group/ManageGroup.tsx
@@ -1,66 +1,70 @@
 'use client';
 
 import Button from '@/components/common/Button';
-import FormField from '@/components/common/formField';
+import Fields from '../common/formField/Fields';
+import Input from '../common/formField/compound/Input';
+import FileInput from '../common/formField/compound/FileInput';
+import ImageUploader from '../common/formField/compound/ImageUploader';
 import BouncingDots from '@/components/common/loading/BouncingDots';
 import useManageGroup from './useManageGroup';
 import { Group } from '@/types/group';
 
 export type ManageGroup = Partial<Pick<Group, 'id'>> & Pick<Group, 'name' | 'image'>;
 
-interface MangeGroupProps {
+interface ManageGroupProps {
   groupData?: ManageGroup;
   groupNames: string[];
 }
 
-export default function ManageGroup({ groupData, groupNames }: MangeGroupProps) {
+export default function ManageGroup({ groupData, groupNames }: ManageGroupProps) {
   const isEdit = !!groupData;
+  const groupButtonText = isEdit ? '수정하기' : '생성하기';
 
   const {
-    group,
-    isNameFailure,
-    isImageEmpty,
-    isSubmit,
+    form: {
+      register,
+      handleSubmit,
+      formState: { errors },
+    },
+    image,
     isPending,
-    imageErrorMessage,
-    nameErrorMessage,
-    handleNameChange,
     handleImageChange,
-    handleManageGroupSubmit,
-  } = useManageGroup({
-    isEdit,
-    groupData,
-    groupNames,
-  });
-
-  const groupButtonText = isEdit ? '수정하기' : '생성하기';
+    handleSubmitGroup,
+  } = useManageGroup({ isEdit, groupData, groupNames });
 
   return (
-    <form onSubmit={handleManageGroupSubmit} className="flex w-full flex-col gap-10">
+    <form onSubmit={handleSubmit(handleSubmitGroup)} className="flex w-full flex-col gap-10">
       <div className="flex w-full flex-col gap-6">
-        <FormField
-          field="file-input"
-          name="image"
+        <Fields
           label="팀 프로필"
-          imageUploaderType="team"
-          isFailure={isImageEmpty}
-          isSubmit={isSubmit}
-          errorMessage={imageErrorMessage()}
-          image={group.image}
-          onImageChange={handleImageChange}
+          errorMessage={errors.image?.message}
+          render={() => (
+            <FileInput name="image" onImageChange={handleImageChange}>
+              {({ inputRef }) => (
+                <ImageUploader image={image} imageUploaderType="team" inputRef={inputRef} />
+              )}
+            </FileInput>
+          )}
         />
-        <FormField
-          field="input"
-          name="name"
+
+        <Fields
           label="팀 이름"
-          placeholder="팀 이름을 입력해 주세요."
-          isFailure={isNameFailure}
-          isSubmit={isSubmit}
-          errorMessage={nameErrorMessage()}
-          value={group.name}
-          onChange={handleNameChange}
+          errorMessage={errors.name?.message}
+          render={() => {
+            const { onBlur, ...inputProps } = register('name');
+            return (
+              <Input
+                {...inputProps}
+                name="name"
+                placeholder="팀 이름을 입력해 주세요."
+                onBlur={onBlur}
+                hasError={!!errors.name}
+              />
+            );
+          }}
         />
       </div>
+
       <div className="flex flex-col gap-6">
         <Button type="submit" variant="solid" size="fullWidth" disabled={isPending}>
           {isPending ? <BouncingDots /> : groupButtonText}
diff --git a/src/components/manage-group/useManageGroup.ts b/src/components/manage-group/useManageGroup.ts
index 8bfc2ba6..1f329284 100644
--- a/src/components/manage-group/useManageGroup.ts
+++ b/src/components/manage-group/useManageGroup.ts
@@ -1,137 +1,109 @@
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
+import { z } from 'zod';
 import postImageUrl from '@/lib/api/image/postImageUrl';
 import axiosClient from '@/lib/axiosClient';
-import { validateEmptyValue } from '@/utils/validators';
 import { Toast } from '../common/Toastify';
 import { ManageGroup } from './ManageGroup';
 import { useUser } from '@/contexts/UserContext';
+import useZodForm from '@/hooks/useZodForm';
+
+interface ManageGroupProps {
+  isEdit: boolean;
+  groupData?: ManageGroup;
+  groupNames: string[];
+}
+
+interface GroupValue {
+  name: string;
+  image: string;
+}
 
 const GROUP_MESSAGE = {
   EMPTY_GROUP_IMAGE: '프로필 이미지를 넣어주세요.',
   EMPTY_GROUP_NAME: '팀 이름을 작성해 주세요.',
   DUPLICATED_GROUP_NAME: '이미 존재하는 팀 이름입니다.',
   OVER_LENGTH_GROUP_NAME: '팀 이름은 10글자까지 가능합니다.',
+  INVALID_GROUP_IMAGE_URL: '올바른 이미지 주소가 아닙니다.',
 };
 
-const INITIAL_GROUP_VALUE: ManageGroup = {
-  image: '',
-  name: '',
-};
-
-export default function useManageGroup({
-  isEdit,
-  groupData,
-  groupNames,
-}: {
-  isEdit: boolean;
-  groupData?: ManageGroup;
-  groupNames: string[];
-}) {
-  const [group, setGroup] = useState<ManageGroup>(groupData ?? INITIAL_GROUP_VALUE);
-  const [isSubmit, setIsSubmit] = useState(false);
+export default function useManageGroup({ isEdit, groupData, groupNames }: ManageGroupProps) {
   const [isPending, setIsPending] = useState(false);
-  const { fetchUser } = useUser();
-
   const router = useRouter();
+  const { fetchUser } = useUser();
 
-  const isImageEmpty = group.image === '';
-  const isNameEmpty = validateEmptyValue(group.name);
-  const isNameOverLimit = group.name.length > 10;
-  const isNameDuplicate = isEdit
-    ? groupNames.filter((name) => name !== groupData?.name).includes(group.name)
-    : groupNames.includes(group.name);
-
-  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setGroup((prev) => ({
-      ...prev,
-      name: e.target.value,
-    }));
+  const isDuplicatedName = groupNames.filter((n) => n !== groupData?.name);
+
+  const groupSchema = z.object({
+    name: z
+      .string()
+      .min(1, { message: GROUP_MESSAGE.EMPTY_GROUP_NAME })
+      .max(10, { message: GROUP_MESSAGE.OVER_LENGTH_GROUP_NAME })
+      .refine((value) => !isDuplicatedName.includes(value), {
+        message: GROUP_MESSAGE.DUPLICATED_GROUP_NAME,
+      }),
+    image: z
+      .string()
+      .min(1, { message: GROUP_MESSAGE.EMPTY_GROUP_IMAGE })
+      .url({ message: GROUP_MESSAGE.INVALID_GROUP_IMAGE_URL }),
+  });
+
+  const defaultValues = {
+    name: groupData?.name ?? '',
+    image: groupData?.image ?? '',
   };
 
+  const form = useZodForm({
+    validationSchema: groupSchema,
+    defaultValues,
+  });
+
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
 
     postImageUrl(file)
-      .then((result) => {
-        setGroup((prev) => ({
-          ...prev,
-          image: result.url,
-        }));
-      })
-      .catch((err) => {
-        console.error(err);
+      .then((result) => form.setValue('image', result.url, { shouldValidate: true }))
+      .catch(() => {
+        Toast.error('이미지 불러오기 실패');
       });
   };
 
-  const imageErrorMessage = () => {
-    if (isImageEmpty) return GROUP_MESSAGE.EMPTY_GROUP_IMAGE;
-  };
-
-  const nameErrorMessage = () => {
-    if (isNameEmpty) return GROUP_MESSAGE.EMPTY_GROUP_NAME;
+  const image = form.watch('image');
 
-    if (isNameDuplicate) return GROUP_MESSAGE.DUPLICATED_GROUP_NAME;
-
-    if (isNameOverLimit) return GROUP_MESSAGE.OVER_LENGTH_GROUP_NAME;
-  };
+  const handleSubmitGroup = ({ name, image }: GroupValue) => {
+    const isUnchanged = name === groupData?.name && image === groupData?.image;
 
-  const isNameFailure = isNameEmpty || isNameDuplicate || isNameOverLimit;
-
-  const isManageTeamFormValid =
-    !isImageEmpty && !isNameEmpty && !isNameDuplicate && !isNameOverLimit;
-
-  const isGroupDataUnchanged = group.image === groupData?.image && group.name === groupData.name;
-
-  const handleManageGroupSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsSubmit(true);
-
-    if (!isManageTeamFormValid) return;
-
-    if (isGroupDataUnchanged) {
+    if (isUnchanged) {
       Toast.info('변경 사항이 없습니다.');
       return;
     }
+
     setIsPending(true);
 
     axiosClient
       .request({
         url: isEdit ? `/groups/${groupData?.id}` : '/groups',
         method: isEdit ? 'patch' : 'post',
-        data: {
-          name: group.name,
-          image: group.image,
-        },
+        data: { name, image },
       })
       .then((result) => {
         fetchUser();
-
-        setTimeout(() => {
-          router.push(`/${result.data.id}`);
-        }, 500);
+        setTimeout(() => router.push(`/${result.data.id}`), 500);
       })
       .catch(() => {
-        const action = isEdit ? '수정' : '생성';
-        Toast.error(`팀 ${action} 실패`);
+        Toast.error(`팀 ${isEdit ? '수정' : '생성'} 실패`);
       })
       .finally(() => {
-        setIsPending(true);
-        setIsSubmit(false);
+        setIsPending(false);
       });
   };
 
   return {
-    group,
-    isNameFailure,
-    isImageEmpty,
-    isSubmit,
+    form,
+    image,
     isPending,
-    imageErrorMessage,
-    nameErrorMessage,
-    handleNameChange,
+    handleSubmitGroup,
     handleImageChange,
-    handleManageGroupSubmit,
   };
 }
diff --git a/src/components/manage-task-item/components/Frequency.tsx b/src/components/manage-task-item/components/Frequency.tsx
index 7fd57921..68a444f9 100644
--- a/src/components/manage-task-item/components/Frequency.tsx
+++ b/src/components/manage-task-item/components/Frequency.tsx
@@ -1,6 +1,6 @@
 import Button from '@/components/common/Button';
 import { OptionSelector } from '@/components/common/dropdown/OptionSelector';
-import useModalContext from '@/components/common/modal/core/useModalContext';
+import { useModal } from '@/contexts/ModalContext';
 import DangerModal from '@/components/danger-modal';
 
 interface Frequency {
@@ -14,7 +14,7 @@ const DELETE_FREQUENCY_MODAL_ID = 'delete-frequency';
 const FREQUENCY_LIST = ['한 번', '매일', '주 반복', '월 반복'];
 
 export default function Frequency({ isEdit, isOnce, handleFrequencyChange }: Frequency) {
-  const { openModal } = useModalContext();
+  const { openModal } = useModal();
 
   return isEdit ? (
     <>
diff --git a/src/components/manage-task-item/useManageTaskItem.ts b/src/components/manage-task-item/useManageTaskItem.ts
index d48a0d60..60b0d797 100644
--- a/src/components/manage-task-item/useManageTaskItem.ts
+++ b/src/components/manage-task-item/useManageTaskItem.ts
@@ -4,7 +4,7 @@ import { Frequency } from '@/app/(content-layout)/[groupId]/tasklist/_tasklist/t
 import generateTime from './time-table';
 import { TaskItemProps, TaskItem, Time } from './type';
 import axiosClient from '@/lib/axiosClient';
-import useModalContext from '../common/modal/core/useModalContext';
+import { useModal } from '@/contexts/ModalContext';
 import { validateEmptyValue } from '@/utils/validators';
 import { Toast } from '../common/Toastify';
 import { revalidateTasks } from '@/app/(content-layout)/[groupId]/tasklist/_tasklist/actions/task-actions';
@@ -25,7 +25,7 @@ export default function useManageTaskItem({
   createOrEditModalId,
 }: TaskItemProps) {
   const { am, pm } = generateTime();
-  const { closeModal } = useModalContext();
+  const { closeModal } = useModal();
   const task = detailTask?.recurring;
   const router = useRouter();
 
diff --git a/src/components/signup-alert-modal/SignupFailModal.tsx b/src/components/signup-alert-modal/SignupFailModal.tsx
deleted file mode 100644
index 4c3a6168..00000000
--- a/src/components/signup-alert-modal/SignupFailModal.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-import {
-  ModalContainer,
-  ModalDescription,
-  ModalFooter,
-  ModalHeading,
-  ModalOverlay,
-  ModalPortal,
-} from '@/components/common/modal';
-import Button from '../common/Button';
-import useModalContext from '@/components/common/modal/core/useModalContext';
-
-export default function SignupFailModal() {
-  const { closeModal } = useModalContext();
-
-  return (
-    <ModalPortal modalId="signup-fail">
-      <ModalOverlay modalId="signup-fail">
-        <ModalContainer className="pr-4 pb-8 pl-4">
-          <Image src="/icons/danger.icon.svg" alt="!" width={24} height={24} className="pb-3" />
-          <ModalHeading className="text-md-bold mb-2 text-white">회원가입 실패</ModalHeading>
-          <ModalDescription className="text-gray500 text-md-md mb-6 w-60 px-3">
-            회원가입 도중 문제가 발생했습니다. <br />
-            다시 시도해주세요.
-          </ModalDescription>
-          <ModalFooter className="w-full">
-            <Button
-              variant="outline-gray"
-              className="w-full"
-              size="fullWidth"
-              onClick={() => closeModal('signup-fail')}
-            >
-              다시 시도하기
-            </Button>
-          </ModalFooter>
-        </ModalContainer>
-      </ModalOverlay>
-    </ModalPortal>
-  );
-}
diff --git a/src/contexts/ModalContext.tsx b/src/contexts/ModalContext.tsx
new file mode 100644
index 00000000..8d8a8d86
--- /dev/null
+++ b/src/contexts/ModalContext.tsx
@@ -0,0 +1,81 @@
+'use client';
+import { useContext, createContext, useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+type ModalContextValue = {
+  toggleModal: (id: string) => void;
+  openModal: (id: string) => void;
+  closeModal: (id: string) => void;
+  checkIsModalOpen: (id: string) => boolean;
+};
+
+const ModalContext = createContext<ModalContextValue | null>(null);
+
+type ModalState = {
+  [id: string]: { isOpen: boolean };
+};
+
+export const ModalProvider = ({ children }: { children: React.ReactNode }) => {
+  const [modals, setModals] = useState<ModalState>({});
+
+  const openModal = (id: string) => {
+    setModals((prev) => ({
+      ...prev,
+      [id]: { isOpen: true },
+    }));
+  };
+
+  const closeModal = (id: string) => {
+    setModals((prev) => ({
+      ...prev,
+      [id]: { isOpen: false },
+    }));
+  };
+
+  const toggleModal = (id: string) => {
+    setModals((prev) => ({
+      ...prev,
+      [id]: { isOpen: prev[id]?.isOpen !== true },
+    }));
+  };
+
+  const checkIsModalOpen = (id: string) => {
+    return !!modals[id]?.isOpen;
+  };
+
+  return (
+    <ModalContext.Provider
+      value={{
+        openModal,
+        closeModal,
+        toggleModal,
+        checkIsModalOpen,
+      }}
+    >
+      {children}
+    </ModalContext.Provider>
+  );
+};
+
+export const useModal = () => {
+  const ctx = useContext(ModalContext);
+  if (!ctx) throw new Error('useModal must be used within ModalProvider');
+  return ctx;
+};
+
+export function ModalPortal({ children, modalId }: { children: React.ReactNode; modalId: string }) {
+  const [modalPortal, setModalPortal] = useState<Element | null>(null);
+  const { checkIsModalOpen } = useModal();
+
+  useEffect(
+    function initializeModalPortal() {
+      const modalElement = document.querySelector('#modal-container');
+      setModalPortal(modalElement);
+    },
+    [setModalPortal]
+  );
+
+  if (!modalPortal) return null;
+
+  return <>{createPortal(checkIsModalOpen(modalId) ? children : null, modalPortal)}</>;
+}
diff --git a/src/hooks/useZodForm.ts b/src/hooks/useZodForm.ts
new file mode 100644
index 00000000..f9770ed1
--- /dev/null
+++ b/src/hooks/useZodForm.ts
@@ -0,0 +1,19 @@
+import { useForm, UseFormProps, UseFormReturn } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ZodSchema } from 'zod';
+
+export default function useZodForm<T extends Record<string, unknown>>({
+  validationSchema,
+  defaultValues,
+  ...rest
+}: {
+  validationSchema: ZodSchema<T>;
+  defaultValues: UseFormProps<T>['defaultValues'];
+} & Omit<UseFormProps<T>, 'resolver' | 'defaultValues'>): UseFormReturn<T> {
+  return useForm<T>({
+    resolver: zodResolver(validationSchema),
+    defaultValues,
+    mode: 'all',
+    ...rest,
+  });
+}
diff --git a/src/lib/query/queryProvider.tsx b/src/lib/query/queryProvider.tsx
new file mode 100644
index 00000000..a9630dbe
--- /dev/null
+++ b/src/lib/query/queryProvider.tsx
@@ -0,0 +1,10 @@
+'use client';
+
+import { useState } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+export default function QueryProvider({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient());
+
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}