Merge pull request #5 from shimdokite/admin

[FE] ♻️ 관리자 모드 리팩토링

client/src/app/admin/page.tsx

@@ -1,6 +1,22 @@
-import CheckInquiry from '@/components/admin/CheckInquiry';
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import useUserStore from '@/stores/userStore';
+
+import { CheckInquiry } from '@/components/admin';
+
+import { ADMIN_USER_ID } from '@/constants/values';
 
 export default function Admin() {
+  const router = useRouter();
+
+  const { userId } = useUserStore();
+
+  if (userId !== ADMIN_USER_ID) {
+    router.replace('/');
+  }
+
   return (
     <div className="h-full flex justify-center items-center">
       <CheckInquiry />

client/src/app/middleware.ts

@@ -0,0 +1,16 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+import useUserStore from '@/stores/userStore';
+
+import { ADMIN_USER_ID } from '@/constants/values';
+
+export function middleware(request: NextRequest) {
+  const { userId } = useUserStore();
+
+  if (userId !== ADMIN_USER_ID && request.nextUrl.pathname.startsWith('/admin'))
+    return NextResponse.redirect(new URL('/', request.url));
+}
+
+export const cofig = {
+  matcher: '/admin',
+};

client/src/components/admin/ChatModal.tsx

@@ -1,5 +1,5 @@
 import { Chat } from '../inquiry';
-import { CommonButton, Modal, ModalPortal } from '../common';
+import { CommonButton, Modal } from '../common';
 
 interface ChatModalProps {
   close: () => void;
@@ -8,30 +8,28 @@ interface ChatModalProps {
 
 export default function ChatModal({ close, handleAnswered }: ChatModalProps) {
   return (
-    <ModalPortal>
-      <Modal>
-        <div className="px-2 py-2 mx-2 flex flex-col justify-center items-center border-2 rounded-lg border-brown-50 bg-brown-20">
-          <Chat role="admin" />
+    <Modal>
+      <div className="px-2 py-2 mx-2 flex flex-col justify-center items-center border-2 rounded-lg border-brown-50 bg-brown-20">
+        <Chat role="admin" />
 
-          <div className="flex justify-center items-center">
-            <CommonButton
-              type="button"
-              size="md"
-              className="mx-1 my-2 max-[580px]:text-[16px]"
-              onClose={() => close()}>
-              종료하기
-            </CommonButton>
+        <div className="flex justify-center items-center">
+          <CommonButton
+            type="button"
+            size="md"
+            className="mx-1 my-2 max-[580px]:text-[16px]"
+            onClose={() => close()}>
+            종료하기
+          </CommonButton>
 
-            <CommonButton
-              type="button"
-              size="md"
-              className="mx-1 my-2 max-[580px]:text-[16px]"
-              onClose={handleAnswered}>
-              메일 전송
-            </CommonButton>
-          </div>
+          <CommonButton
+            type="button"
+            size="md"
+            className="mx-1 my-2 max-[580px]:text-[16px]"
+            onClose={() => handleAnswered()}>
+            메일 전송
+          </CommonButton>
         </div>
-      </Modal>
-    </ModalPortal>
+      </div>
+    </Modal>
   );
 }

client/src/components/admin/CheckInquiry.tsx

@@ -1,14 +1,18 @@
 'use client';
 
+import { createPortal } from 'react-dom';
+
 import useModalStore, { ModalType } from '@/stores/modalStore';
 
 import useUpdateChatAnsweredMutation from '@/hooks/mutation/useUpdateChatAnsweredMutation';
+import useModal from '@/hooks/useModal';
 
 import { ChatModal, InquiryListForm } from '.';
 
 export default function CheckInquiry() {
   const { isOpen, type, close } = useModalStore();
 
+  const { portalElement } = useModal(isOpen);
   const { mutate: onAnswered } = useUpdateChatAnsweredMutation();
 
   const handleAnswered = () => {
@@ -27,7 +31,9 @@ export default function CheckInquiry() {
         <InquiryListForm />
       </div>
 
-      {isOpen && renderModal(type)}
+      {isOpen && portalElement
+        ? createPortal(renderModal(type), portalElement)
+        : null}
     </div>
   );
 }

client/src/components/admin/InquiryListForm.tsx

@@ -11,6 +11,7 @@ import { Pagination } from '.';
 import { ErrorMessage, LoadingMessage } from '../common';
 
 import { REPORT_TITLE, REPORT_TITLE_STYLE } from '@/constants/contents';
+import { ChatList } from '@/types/data';
 
 export default function InquiryListForm() {
   const { open, changeType } = useModalStore();
@@ -34,9 +35,9 @@ export default function InquiryListForm() {
     if (current.key === 'entry')
       return (
         setRoomId(`${chatRoomId}`),
+        setTitle(title),
         changeType('ChatModal'),
-        open(),
-        setTitle(title)
+        open()
       );
   };
 
@@ -70,7 +71,7 @@ export default function InquiryListForm() {
 
           <tbody className="bg-white-10">
             {isSuccess &&
-              chatList.map((list: any) => (
+              chatList.map((list: ChatList) => (
                 <tr
                   key={list.chatRoomId}
                   className="border-b-[1px] border-brown-90">
@@ -86,7 +87,7 @@ export default function InquiryListForm() {
                       }>
                       {current.key === 'entry'
                         ? '입장하기'
-                        : `${list[current.key]}`}
+                        : `${list[current.key as keyof ChatList]}`}
                     </td>
                   ))}
                 </tr>

client/src/components/admin/Pagination.tsx

@@ -2,6 +2,7 @@ import { MouseEventHandler } from 'react';
 
 interface PaginationProps {
   page: number;
+
   onFirstPage: MouseEventHandler<HTMLDivElement>;
   onLastPage: MouseEventHandler<HTMLDivElement>;
   onPreviousPage: MouseEventHandler<HTMLButtonElement>;

client/src/stores/chatStore.ts

@@ -30,6 +30,7 @@ const useChatStore = create<ChatState>((set) => ({
   title: '',
   roomId: '',
   questionerId: '',
+
   isOpen: false,
 
   setChatList: (chatList) => {