diff --git a/src/app/(user-page)/my-meeting/_features/CardRightSection.tsx b/src/app/(user-page)/my-meeting/_features/CardRightSection.tsx
index 4fbb1cf..3e1ca1d 100644
--- a/src/app/(user-page)/my-meeting/_features/CardRightSection.tsx
+++ b/src/app/(user-page)/my-meeting/_features/CardRightSection.tsx
@@ -2,21 +2,14 @@
 
 import { Button } from '@/components/ui/Button';
 import { Tag } from '@/components/ui/Tag';
-import Modal from '@/components/ui/modal/Modal';
-import {
-  useExpelMutation,
-  useMemberStatusMutation,
-} from '@/hooks/mutations/useMyMeetingMutation';
 import { myMeetingKeys } from '@/hooks/queries/useMyMeetingQueries';
 import { useBannerQueries } from '@/hooks/queries/useMyPageQueries';
 import { useQueryClient } from '@tanstack/react-query';
 import Image from 'next/image';
-import { useState } from 'react';
+import { useRouter } from 'next/navigation';
 import { getMyMeetingMemberProfile } from 'service/api/mymeeting';
 import type { Member } from 'types/myMeeting';
 
-import ModalProfile from './ModalProfile';
-import ModalUserList from './ModalUserList';
 import PublicSelect from './PublicDropdown';
 
 const CardRightSection = ({
@@ -32,50 +25,8 @@ const CardRightSection = ({
   meetingId: number;
   showPublicSelect?: boolean;
 }) => {
-  const [isUserListModalOpen, setIsUserListModalOpen] = useState(false);
-  const handleConfirm = () => {
-    setIsUserListModalOpen(false);
-  };
-
-  const [isUserProfileModalOpen, setIsUserProfileModalOpen] = useState(false);
-
-  // 가입 승인 / 거절
-  const { mutate: statusMutate } = useMemberStatusMutation(meetingId);
-
-  // 내보내기
-  const { mutate: expelMutate } = useExpelMutation(meetingId);
-
-  const handleSecondModalConfirm = () => {
-    // 가입 확인 api 연동
-    // 만약, status가 approved라면 -> 내보내기 활성화
-    // 만약, status가 pending이 아니라면 -> 닫기만 활성화
-
-    if (selectedUser && selectedUser.memberStatus === 'PENDING') {
-      statusMutate({
-        setMemberStatus: 'APPROVED',
-        userId: selectedUser?.userId,
-      });
-    }
-
-    setIsUserProfileModalOpen(false);
-  };
-
-  const handleSecondModalCancel = () => {
-    // 가입 거절 api 연동
-    if (selectedUser && selectedUser.memberStatus === 'PENDING') {
-      statusMutate({
-        setMemberStatus: 'REJECTED',
-        userId: selectedUser?.userId,
-      });
-    } else if (selectedUser && selectedUser.memberStatus === 'APPROVED') {
-      expelMutate({
-        setMemberStatus: 'EXPEL',
-        userId: selectedUser?.userId,
-      });
-    }
-
-    setIsUserProfileModalOpen(false);
-  };
+  const router = useRouter();
+  const queryClient = useQueryClient();
 
   // 데스크탑 뷰에서 유저 프로필 보기
   const handleOpenProfileModal = (
@@ -83,12 +34,11 @@ const CardRightSection = ({
     member: Member,
   ) => {
     e.stopPropagation();
-    setSelectedUser(member);
-    setIsUserProfileModalOpen(true);
+    router.push(
+      `/my-meeting/my/profile?meetingId=${meetingId}&userId=${member.userId}&memberStatus=${member.memberStatus}`,
+    );
   };
 
-  const queryClient = useQueryClient();
-
   const handlePrefetchProfile = async (member: Member) => {
     const queryKey = myMeetingKeys.memberProfile(meetingId, member.userId);
 
@@ -104,10 +54,7 @@ const CardRightSection = ({
     }
   };
 
-  // 프로필 보기 할 유저
-  const [selectedUser, setSelectedUser] = useState<Member | null>(null);
-
-  const { data: currentUser, isLoading, error } = useBannerQueries();
+  const { data: currentUser, isLoading } = useBannerQueries();
   if (isLoading || !currentUser) {
     return;
   }
@@ -142,7 +89,10 @@ const CardRightSection = ({
               {member.userId !== currentUser?.userId && (
                 <div className="flex h-[40px] gap-[6px]">
                   {showPublicSelect && (
-                    <Tag variant={member.memberStatus} className="w-[49px]" />
+                    <Tag
+                      variant={member.memberStatus}
+                      className="w-[49px] justify-center"
+                    />
                   )}
                   <Button
                     variant={'outline'}
@@ -159,61 +109,18 @@ const CardRightSection = ({
         </div>
       </div>
 
-      <div className="flex flex-1 gap-[16px]">
-        <Button
-          variant="outline"
-          className="flex h-[40px] flex-1 md:h-[46px] lg:hidden"
-          onClick={() => setIsUserListModalOpen(true)}
-        >
-          맴버 명단 보기
-        </Button>
-        {showPublicSelect && (
-          <PublicSelect isPublic={isPublic} meetingId={meetingId} />
-        )}
-      </div>
-
-      <Modal
-        isOpen={isUserProfileModalOpen}
-        onClose={handleSecondModalCancel}
-        onConfirm={handleSecondModalConfirm}
-        confirmText={
-          selectedUser?.memberStatus === 'PENDING' ? '가입승인' : '닫기'
+      <Button
+        variant="outline"
+        className="flex h-[40px] flex-1 md:h-[46px] lg:hidden"
+        onClick={() =>
+          router.push(`/my-meeting/my/user-list?meetingId=${meetingId}`)
         }
-        cancelText={
-          selectedUser?.memberStatus === 'PENDING'
-            ? '가입거절'
-            : selectedUser?.memberStatus === 'APPROVED'
-              ? '내보내기'
-              : '닫기'
-        }
-        closeOnly={
-          !(
-            selectedUser?.memberStatus === 'PENDING' ||
-            selectedUser?.memberStatus === 'APPROVED'
-          )
-        }
-        modalClassName="w-[450px] overflow-hidden bg-BG_2"
-        buttonClassName="w-full"
-      >
-        <ModalProfile userId={selectedUser?.userId} meetingId={meetingId} />
-      </Modal>
-      <Modal
-        isOpen={isUserListModalOpen}
-        onClose={() => setIsUserListModalOpen(false)}
-        onConfirm={handleConfirm}
-        showOnly
-        modalClassName="h-[590px] w-[520px] overflow-y-auto"
       >
-        <ModalUserList
-          memberList={memberList}
-          setSelectedUser={setSelectedUser}
-          setIsUserProfileModalOpen={setIsUserProfileModalOpen}
-          setIsUserListModalOpen={setIsUserListModalOpen}
-          currentUser={currentUser}
-          handlePrefetchProfile={handlePrefetchProfile}
-          showPublicSelect={showPublicSelect}
-        />
-      </Modal>
+        맴버 명단 보기
+      </Button>
+      {showPublicSelect && (
+        <PublicSelect isPublic={isPublic} meetingId={meetingId} />
+      )}
     </div>
   );
 };
diff --git a/src/app/(user-page)/my-meeting/_features/Created.tsx b/src/app/(user-page)/my-meeting/_features/Created.tsx
index 7a66a88..05dcb81 100644
--- a/src/app/(user-page)/my-meeting/_features/Created.tsx
+++ b/src/app/(user-page)/my-meeting/_features/Created.tsx
@@ -53,7 +53,6 @@ const Created = () => {
               >
                 <HorizonCard
                   onClick={handleMoveDetailPage}
-                  key={meeting.meetingId}
                   title={meeting.title}
                   thumbnailUrl={meeting.thumbnail}
                   location={meeting.location}
@@ -81,7 +80,6 @@ const Created = () => {
               >
                 <HorizonCard
                   onClick={handleMoveDetailPage}
-                  key={meeting.meetingId}
                   title={meeting.title}
                   thumbnailUrl={meeting.thumbnail}
                   location={meeting.location}
@@ -110,7 +108,6 @@ const Created = () => {
               >
                 <HorizonCard
                   onClick={handleMoveDetailPage}
-                  key={meeting.meetingId}
                   title={meeting.title}
                   thumbnailUrl={meeting.thumbnail}
                   location={meeting.location}
diff --git a/src/app/(user-page)/my-meeting/_features/ModalProfile.tsx b/src/app/(user-page)/my-meeting/_features/ModalProfile.tsx
index 56cde52..77fa69e 100644
--- a/src/app/(user-page)/my-meeting/_features/ModalProfile.tsx
+++ b/src/app/(user-page)/my-meeting/_features/ModalProfile.tsx
@@ -1,30 +1,11 @@
 import Description from '@/components/common/Description';
-import { useMyMeetingMemberProfileQuries } from '@/hooks/queries/useMyMeetingQueries';
+import TechButton from '@/components/ui/tech-stack/tech-stack-components/TechButton';
+import { getIconComponent } from '@/util/getIconDetail';
 import Image from 'next/image';
 import React from 'react';
+import { IMemberProfile } from 'types/myMeeting';
 
-import SkeletonProfile from './skeletons/SkeletonProfile';
-
-const ModalProfile = ({
-  userId,
-  meetingId,
-}: {
-  userId: number | undefined;
-  meetingId: number;
-}) => {
-  const {
-    data: user,
-    isLoading,
-    error,
-  } = useMyMeetingMemberProfileQuries({
-    meetingId,
-    userId: userId!,
-  });
-
-  if (isLoading || !user) {
-    return <SkeletonProfile />;
-  }
-
+const ModalProfile = ({ user }: { user: IMemberProfile }) => {
   return (
     <div className="p-4">
       <div className="mb-4 flex gap-4">
@@ -50,21 +31,22 @@ const ModalProfile = ({
         <div className="flex flex-col gap-2 pl-2">
           <Description label="포지션" value={user.position} />
           <Description label="기술스택">
-            <div className=" flex flex-wrap gap-[6px] text-Cgray500">
-              <div className="typo-caption1 rounded-[8px] bg-disable px-[8px] py-[4px]">
-                자바스크립트
-              </div>
-              <div className="typo-caption1 rounded-[8px] bg-disable px-[8px] py-[4px]">
-                자바스크립트
-              </div>
-              <div className="typo-caption1 rounded-[8px] bg-disable px-[8px] py-[4px]">
-                자바스크립트
-              </div>
-              <div className="typo-caption1 rounded-[8px] bg-disable px-[8px] py-[4px]">
-                자바스크립트
-              </div>
-              <div className="typo-caption1 rounded-[8px] bg-disable px-[8px] py-[4px]">
-                자바스크립트
+            <div className="ml-[8px] flex gap-[6px] text-Cgray500">
+              <div className="flex flex-wrap gap-2">
+                {user.skillArray &&
+                  user.skillArray?.length > 0 &&
+                  user.skillArray.map((skill) => (
+                    <TechButton
+                      className="h-6"
+                      key={skill}
+                      name={skill}
+                      icon={getIconComponent(skill)}
+                      color={'#333'}
+                      isClicked={true}
+                      isMaxReached={false}
+                      onClick={() => {}}
+                    />
+                  ))}
               </div>
             </div>
           </Description>
diff --git a/src/app/(user-page)/my-meeting/_features/ModalUserList.tsx b/src/app/(user-page)/my-meeting/_features/ModalUserList.tsx
index 64a6bf2..b44b09e 100644
--- a/src/app/(user-page)/my-meeting/_features/ModalUserList.tsx
+++ b/src/app/(user-page)/my-meeting/_features/ModalUserList.tsx
@@ -1,38 +1,46 @@
 import { Tag } from '@/components/ui/Tag';
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 import React from 'react';
-import { Dispatch, SetStateAction } from 'react';
 import type { IBanner, Member } from 'types/myMeeting';
 
 import { Button } from '../../../../components/ui/Button';
 
 const ModalUserList = ({
   memberList,
-  setIsUserProfileModalOpen,
-  setIsUserListModalOpen,
-  setSelectedUser,
-  currentUser,
   className,
+  meetingId,
+  currentUser,
   handlePrefetchProfile,
   showPublicSelect = false,
 }: {
   memberList: Member[];
-  setSelectedUser: Dispatch<React.SetStateAction<Member | null>>;
-  setIsUserProfileModalOpen: Dispatch<SetStateAction<boolean>>;
-  setIsUserListModalOpen: Dispatch<SetStateAction<boolean>>;
   currentUser: IBanner;
   className?: string;
   handlePrefetchProfile: (member: Member) => Promise<void>;
   showPublicSelect?: boolean;
+  meetingId: number;
 }) => {
+  const router = useRouter();
+
   const handleProfileClick = (user: Member) => {
-    setSelectedUser(user);
-    setIsUserProfileModalOpen(true);
-    setIsUserListModalOpen(false);
+    router.push(
+      `/my-meeting/my/profile?meetingId=${meetingId}&userId=${user.userId}&memberStatus=${user.memberStatus}`,
+    );
   };
 
   return (
-    <div className="flex flex-col">
+    <div
+      className="flex flex-col overflow-y-auto rounded-lg bg-BG_2 "
+      onClick={(e) => e.stopPropagation()}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.stopPropagation();
+        }
+      }}
+    >
       <h3 className={`typo-head3 mb-2 text-main`}>맴버 리스트</h3>
       <div className={className}>
         {memberList.map((user) => (
@@ -53,7 +61,10 @@ const ModalUserList = ({
             {user.userId !== currentUser?.userId && (
               <div className="flex gap-[6px]">
                 {showPublicSelect && (
-                  <Tag variant={user.memberStatus} className="w-[49px]" />
+                  <Tag
+                    variant={user.memberStatus}
+                    className="w-[49px] justify-center"
+                  />             
                 )}
                 <div>
                   <Button
diff --git a/src/app/(user-page)/my-meeting/layout.tsx b/src/app/(user-page)/my-meeting/layout.tsx
deleted file mode 100644
index c676fad..0000000
--- a/src/app/(user-page)/my-meeting/layout.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import MeetingTypeTab from './_features/MeetingTypeTab';
-
-export default function layout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <div>
-      <MeetingTypeTab />
-      {children}
-    </div>
-  );
-}
diff --git a/src/app/(user-page)/my-meeting/my/(modal)/profile/page.tsx b/src/app/(user-page)/my-meeting/my/(modal)/profile/page.tsx
new file mode 100644
index 0000000..4bcbe49
--- /dev/null
+++ b/src/app/(user-page)/my-meeting/my/(modal)/profile/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function DefaultModal() {
+  redirect('/my-meeting/my?type=created');
+}
diff --git a/src/app/(user-page)/my-meeting/my/(modal)/user-list/page.tsx b/src/app/(user-page)/my-meeting/my/(modal)/user-list/page.tsx
new file mode 100644
index 0000000..4bcbe49
--- /dev/null
+++ b/src/app/(user-page)/my-meeting/my/(modal)/user-list/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function DefaultModal() {
+  redirect('/my-meeting/my?type=created');
+}
diff --git a/src/app/(user-page)/my-meeting/my/@modal/(.)profile/page.tsx b/src/app/(user-page)/my-meeting/my/@modal/(.)profile/page.tsx
new file mode 100644
index 0000000..5c87c2e
--- /dev/null
+++ b/src/app/(user-page)/my-meeting/my/@modal/(.)profile/page.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import ModalPortal from '@/components/ui/modal/ModalPortal';
+import {
+  useExpelMutation,
+  useMemberStatusMutation,
+} from '@/hooks/mutations/useMyMeetingMutation';
+import { useMyMeetingMemberProfileQuries } from '@/hooks/queries/useMyMeetingQueries';
+import { useRouter } from 'next/navigation';
+
+import ModalProfile from '../../../_features/ModalProfile';
+import SkeletonProfile from '../../../_features/skeletons/SkeletonProfile';
+
+export default function UserListModal({
+  searchParams,
+}: {
+  searchParams: { userId: string; meetingId: string; memberStatus: string };
+}) {
+  const router = useRouter();
+  const userId = Number(searchParams.userId);
+  const meetingId = Number(searchParams.meetingId);
+  const memberStatus = searchParams.memberStatus;
+
+  // 유저 정보 파악
+  const { data: selectedUser } = useMyMeetingMemberProfileQuries({
+    meetingId,
+    userId,
+  });
+
+  // 가입 승인 / 거절
+  const { mutate: statusMutate } = useMemberStatusMutation(meetingId);
+
+  // 내보내기
+  const { mutate: expelMutate } = useExpelMutation(meetingId);
+
+  const handleSecondModalConfirm = () => {
+    if (!selectedUser) return;
+
+    if (memberStatus === 'PENDING') {
+      statusMutate({
+        setMemberStatus: 'APPROVED',
+        userId: selectedUser.userId,
+      });
+    }
+
+    router.replace(`/my-meeting/my/user-list?meetingId=${meetingId}`);
+  };
+
+  const handleSecondModalCancel = () => {
+    if (!selectedUser) return;
+
+    if (memberStatus === 'PENDING') {
+      statusMutate({
+        setMemberStatus: 'REJECTED',
+        userId: selectedUser.userId,
+      });
+    } else if (memberStatus === 'APPROVED') {
+      expelMutate({
+        setMemberStatus: 'EXPEL',
+        userId: selectedUser.userId,
+      });
+    }
+
+    router.replace(`/my-meeting/my/user-list?meetingId=${meetingId}`);
+  };
+
+  if (!selectedUser) return <SkeletonProfile />;
+
+  return (
+    <ModalPortal
+      isOpen={true}
+      onClose={handleSecondModalCancel}
+      onConfirm={handleSecondModalConfirm}
+      confirmText={memberStatus === 'PENDING' ? '가입승인' : '닫기'}
+      cancelText={
+        memberStatus === 'PENDING'
+          ? '가입거절'
+          : memberStatus === 'APPROVED'
+            ? '내보내기'
+            : '닫기'
+      }
+      closeOnly={!(memberStatus === 'PENDING' || memberStatus === 'APPROVED')}
+      modalClassName="w-[450px] overflow-hidden bg-BG_2"
+      buttonClassName="w-full"
+    >
+      <ModalProfile user={selectedUser} />
+    </ModalPortal>
+  );
+}
diff --git a/src/app/(user-page)/my-meeting/my/@modal/(.)user-list/page.tsx b/src/app/(user-page)/my-meeting/my/@modal/(.)user-list/page.tsx
new file mode 100644
index 0000000..230e330
--- /dev/null
+++ b/src/app/(user-page)/my-meeting/my/@modal/(.)user-list/page.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import ModalPortal from '@/components/ui/modal/ModalPortal';
+import { myMeetingKeys } from '@/hooks/queries/useMyMeetingQueries';
+import { useBannerQueries } from '@/hooks/queries/useMyPageQueries';
+import { useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
+import { getMyMeetingMemberProfile } from 'service/api/mymeeting';
+import { Paginated } from 'types/meeting';
+import { IMyMeetingManage, Member } from 'types/myMeeting';
+
+import ModalUserList from '../../../_features/ModalUserList';
+
+export default function UserListModal({
+  searchParams,
+}: {
+  searchParams: { meetingId: string };
+}) {
+  const router = useRouter();
+  const meetingId = Number(searchParams.meetingId);
+  const queryClient = useQueryClient();
+
+  // 캐싱된 데이터 먼저 가져오기
+  const cachedMeetings = queryClient.getQueryData<{
+    pages: Paginated<IMyMeetingManage>[];
+  }>(myMeetingKeys.manage());
+
+  // 캐시에서 특정 meetingId의 memberList 찾기
+  const memberList =
+    cachedMeetings?.pages
+      ?.flatMap((page) => page.content)
+      ?.find((meeting) => meeting.meetingId === meetingId)?.memberList || [];
+
+  // 유저 정보 파악
+  const { data: currentUser, isLoading, error } = useBannerQueries();
+
+  if (!currentUser || isLoading) return;
+
+  const handlePrefetchProfile = async (member: Member) => {
+    const queryKey = myMeetingKeys.memberProfile(meetingId, member.userId);
+
+    // 캐시에 데이터가 있는지 확인
+    const cachedData = queryClient.getQueryData(queryKey);
+
+    if (!cachedData) {
+      await queryClient.prefetchQuery({
+        queryKey,
+        queryFn: () =>
+          getMyMeetingMemberProfile({ meetingId, userId: member.userId }),
+      });
+    }
+  };
+
+  return (
+    <ModalPortal
+      isOpen={true}
+      onClose={() => router.back()}
+      showOnly
+      modalClassName="h-[590px] w-[520px] overflow-y-auto"
+    >
+      <ModalUserList
+        meetingId={meetingId}
+        memberList={memberList}
+        currentUser={currentUser}
+        handlePrefetchProfile={handlePrefetchProfile}
+      />
+    </ModalPortal>
+  );
+}
diff --git a/src/app/(user-page)/my-meeting/my/@modal/default.tsx b/src/app/(user-page)/my-meeting/my/@modal/default.tsx
new file mode 100644
index 0000000..22b9b6f
--- /dev/null
+++ b/src/app/(user-page)/my-meeting/my/@modal/default.tsx
@@ -0,0 +1,3 @@
+export default function DefaultModal() {
+  return null; // 기본적으로 모달 없음
+}
diff --git a/src/app/(user-page)/my-meeting/my/layout.tsx b/src/app/(user-page)/my-meeting/my/layout.tsx
new file mode 100644
index 0000000..89bb500
--- /dev/null
+++ b/src/app/(user-page)/my-meeting/my/layout.tsx
@@ -0,0 +1,14 @@
+export default function MyMeetingLayout({
+  children,
+  modal,
+}: {
+  children: React.ReactNode;
+  modal: React.ReactNode;
+}) {
+  return (
+    <div className="relative">
+      {children}
+      {modal}
+    </div>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 23acfcd..7750ab2 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -46,6 +46,7 @@ export default async function RootLayout({
             <div className="m-auto max-w-[1340px]">{children}</div>
           </ToastProvider>
         </ReactQueryProviders>
+        <div id="modal-root" />
       </body>
     </html>
   );
diff --git a/src/components/ui/modal/ModalPortal.tsx b/src/components/ui/modal/ModalPortal.tsx
new file mode 100644
index 0000000..3c13f9c
--- /dev/null
+++ b/src/components/ui/modal/ModalPortal.tsx
@@ -0,0 +1,145 @@
+import { Button } from '@/components/ui/Button';
+import { useRouter } from 'next/navigation';
+import React, { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+
+interface AlertModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm?: () => void;
+  confirmText?: string;
+  cancelText?: string;
+  children: React.ReactNode;
+  modalClassName?: string;
+  contentClassName?: string;
+  buttonClassName?: string;
+  closeOnly?: boolean;
+  showOnly?: boolean;
+  disableConfirm?: boolean;
+}
+
+/**
+ * Modal 컴포넌트는 사용자 인터페이스에 모달 다이얼로그를 표시하는 재사용 가능한 컴포넌트입니다.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // 기본 모달 (확인/취소 버튼)
+ * <Modal
+ *   isOpen={true}
+ *   onClose={() => setIsOpen(false)}
+ *   onConfirm={() => handleConfirm()}
+ *   confirmText="확인"
+ *   cancelText="취소"
+ *   modalClassName="w-96"
+ * >
+ *   <p>모달 내용</p>
+ * </Modal>
+ *
+ * // 닫기 버튼만 있는 모달
+ * <Modal
+ *   isOpen={true}
+ *   onClose={() => setIsOpen(false)}
+ *   closeOnly
+ *   cancelText="닫기"
+ *   modalClassName="w-96"
+ * >
+ *   <p>모달 내용</p>
+ * </Modal>
+ * ```
+ *
+ * @param props - 모달 컴포넌트 프로퍼티
+ * @param props.isOpen - 모달의 표시 여부를 제어
+ * @param props.onClose - 모달이 닫힐 때 호출되는 콜백 함수
+ * @param props.onConfirm - 확인 버튼 클릭 시 호출되는 콜백 함수 (closeOnly가 false일 때만 필요)
+ * @param props.closeOnly - true일 경우 닫기 버튼만 표시 (기본값: false)
+ * @param props.showOnly - true일 경우 버튼 표시 안함 (기본값: false)
+ * @param props.confirmText - 확인 버튼의 텍스트 (기본값: '확인', closeOnly가 false일 때만 사용)
+ * @param props.cancelText - 취소/닫기 버튼의 텍스트 (기본값: closeOnly가 true일 때 '닫기', false일 때 '취소')
+ * @param props.children - 모달 내부에 표시될 컨텐츠
+ * @param props.modalClassName - 모달 컨테이너에 적용할 추가 클래스명
+ * @param props.contentClassName - 모달 컨텐츠 영역에 적용할 추가 클래스명
+ * @param props.buttonClassName - 버튼 영역에 적용할 추가 클래스명
+ *
+ * @returns React 컴포넌트
+ */
+
+const ModalPortal: React.FC<AlertModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  confirmText = '확인',
+  cancelText = '취소',
+  children,
+  modalClassName = '',
+  contentClassName = '',
+  buttonClassName = '',
+  closeOnly = false,
+  showOnly = false,
+  disableConfirm = false,
+}) => {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!dialogRef.current?.open) {
+      dialogRef.current?.showModal();
+      dialogRef.current?.scrollTo({
+        top: 0,
+      });
+    }
+  }, []);
+
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-BG_2 bg-opacity-50"
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') router.back();
+      }}
+      onClick={() => router.back()}
+      role="presentation"
+    >
+      <dialog
+        className={`rounded-lg bg-BG_2 shadow-xl backdrop:bg-opacity-50 ${modalClassName}`}
+        aria-modal="true"
+        tabIndex={-1}
+        ref={dialogRef}
+        aria-labelledBy="modal-title"
+        aria-describedby="modal-description"
+      >
+        <div className={`p-6 ${contentClassName}`}>{children}</div>
+
+        {!showOnly && (
+          <div className={`flex justify-end gap-2 p-4 ${buttonClassName}`}>
+            {closeOnly ? (
+              <Button onClick={onClose} type="button" className="w-full">
+                {cancelText}
+              </Button>
+            ) : (
+              <>
+                <Button onClick={onClose} variant={'outline'} type="button">
+                  {cancelText}
+                </Button>
+                <Button
+                  onClick={onConfirm}
+                  type="button"
+                  disabled={disableConfirm}
+                  className={
+                    disableConfirm ? 'cursor-not-allowed opacity-50' : ''
+                  }
+                >
+                  {confirmText}
+                </Button>
+              </>
+            )}
+          </div>
+        )}
+      </dialog>
+    </div>,
+    document.getElementById('modal-root') as HTMLElement,
+  );
+};
+
+export default ModalPortal;