refactor: Update middleware and enhance component interactions

- Improved the middleware to handle authentication checks more effectively, ensuring that users are redirected appropriately based on their authentication status.
- Updated the InteractiveScreenViewerDynamic and RealtimePreviewDynamic components to utilize a new subscription method for DOM manipulation during drag events, enhancing performance and user experience.
- Refactored the SplitLineComponent to optimize drag handling and state management, ensuring smoother interactions during component adjustments.
- Integrated API client for menu data loading, streamlining token management and error handling.

frontend/middleware.ts

@@ -4,36 +4,41 @@ import type { NextRequest } from "next/server";
 /**
  * Next.js 미들웨어
  * 페이지 렌더링 전에 실행되어 인증 상태를 확인하고 리다이렉트 처리
+ *
+ * 주의: 미들웨어는 쿠키만 접근 가능 (localStorage 접근 불가)
+ * 따라서 토큰이 localStorage에만 있고 쿠키에 없는 경우는
+ * 클라이언트 사이드의 AuthGuard에서 처리
  */
 export function middleware(request: NextRequest) {
   const { pathname } = request.nextUrl;
 
-  // 인증 토큰 확인
-  const token = request.cookies.get("authToken")?.value || request.headers.get("authorization")?.replace("Bearer ", "");
+  const token = request.cookies.get("authToken")?.value;
 
-  // /login 페이지 접근 시
+  // /login 페이지 접근 시 - 토큰이 있으면 메인으로
   if (pathname === "/login") {
-    // 토큰이 있으면 메인 페이지로 리다이렉트
     if (token) {
       const url = request.nextUrl.clone();
       url.pathname = "/main";
       return NextResponse.redirect(url);
     }
-    // 토큰이 없으면 로그인 페이지 표시
     return NextResponse.next();
   }
 
-  // 인증이 필요한 페이지들
-  const protectedPaths = ["/main", "/admin", "/dashboard", "/settings"];
-  const isProtectedPath = protectedPaths.some((path) => pathname.startsWith(path));
+  // 보호 경로 목록 - 쿠키에 토큰이 없으면 로그인으로
+  // 단, 쿠키 없이 localStorage에만 토큰이 있을 수 있으므로
+  // 클라이언트에서 한 번 더 확인 후 리다이렉트 (AuthGuard)
+  const strictProtectedPaths = ["/admin"];
 
-  if (isProtectedPath && !token) {
-    // 인증되지 않은 사용자는 로그인 페이지로 리다이렉트
+  const isStrictProtected = strictProtectedPaths.some((path) => pathname.startsWith(path));
+
+  if (isStrictProtected && !token) {
     const url = request.nextUrl.clone();
     url.pathname = "/login";
     return NextResponse.redirect(url);
   }
 
+  // /main, /screens, /dashboard 등은 쿠키 없어도 통과 허용
+  // (localStorage 토큰이 있을 수 있으므로 클라이언트 AuthGuard에 위임)
   return NextResponse.next();
 }
 
@@ -42,14 +47,6 @@ export function middleware(request: NextRequest) {
  */
 export const config = {
   matcher: [
-    /*
-     * 다음 경로를 제외한 모든 요청에 대해 실행:
-     * - api (API routes)
-     * - _next/static (static files)
-     * - _next/image (image optimization files)
-     * - favicon.ico (favicon file)
-     * - public 폴더의 파일들
-     */
     "/((?!api|_next/static|_next/image|favicon.ico|.*\\.png$|.*\\.jpg$|.*\\.jpeg$|.*\\.svg$).*)",
   ],
 };