🐛 Fix react effect deps optimization

backend/islands/apps/remotes/src/components/ErrorBoundary.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { logger } from '~/utils/logger';
 
 class ErrorBoundary extends React.Component<{
     fallback: React.ReactNode;
@@ -13,7 +14,7 @@ class ErrorBoundary extends React.Component<{
     }
 
     static getDerivedStateFromError(error: Error) {
-        console.error('Error in component:', error);
+        logger.error('Error in component:', error);
         return { hasError: true };
     }
 

backend/islands/apps/remotes/src/components/remotes/Comments/Comments.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { useConfirm } from '~/contexts/ConfirmContext';
+import { useConfirm } from '~/hooks/useConfirm';
 import { isLoggedIn as checkIsLoggedIn, showLoginPrompt } from '~/utils/loginPrompt';
 import { toast } from '~/utils/toast';
+import { logger } from '~/utils/logger';
 import {
     getComments,
     createComment,
@@ -125,7 +126,7 @@ const Comments = (props: CommentsProps) => {
                 toast.error('댓글 정보를 불러오는데 실패했습니다.');
             }
         } catch (err) {
-            console.error('댓글 수정 오류:', err);
+            logger.error('댓글 수정 오류:', err);
             toast.error('댓글 정보를 불러오는 중 오류가 발생했습니다.');
         }
     };

backend/islands/apps/remotes/src/components/remotes/Login/components/LoginForm.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import SocialLogin from '~/components/remotes/SocialLogin';
+import { logger } from '~/utils/logger';
 
 interface LoginFormProps {
     username: string;
@@ -71,7 +72,7 @@ const LoginForm = ({
                     }
                 });
             } catch (e) {
-                console.error('Failed to render hCaptcha:', e);
+                logger.error('Failed to render hCaptcha:', e);
             }
         }
 

backend/islands/apps/remotes/src/components/remotes/PostEditor/EditPostEditor.tsx

@@ -1,13 +1,14 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { toast } from '~/utils/toast';
-import { useConfirm } from '~/contexts/ConfirmContext';
+import { useConfirm } from '~/hooks/useConfirm';
 import PostEditorWrapper from './PostEditorWrapper';
 import PostActions from './components/PostActions';
 import PostForm from './components/PostForm';
 import SettingsDrawer from './components/SettingsDrawer';
 import { getSeries } from '~/lib/api/settings';
 import { getPostForEdit } from '~/lib/api/posts';
 import { api } from '~/components/shared';
+import { logger } from '~/utils/logger';
 
 interface Series {
     id: string;
@@ -127,7 +128,7 @@ const EditPostEditor = ({ username, postUrl }: EditPostEditorProps) => {
                 return data.body.url;
             }
         } catch (error) {
-            console.error('Image upload failed', error);
+            logger.error('Image upload failed', error);
         }
         return undefined;
     };

backend/islands/apps/remotes/src/components/remotes/PostEditor/NewPostEditor.tsx

@@ -5,7 +5,7 @@ import {
     useRef
 } from 'react';
 import { toast } from '~/utils/toast';
-import { useConfirm } from '~/contexts/ConfirmContext';
+import { useConfirm } from '~/hooks/useConfirm';
 import PostEditorWrapper from './PostEditorWrapper';
 import PostActions from './components/PostActions';
 import PostForm from './components/PostForm';

backend/islands/apps/remotes/src/components/remotes/PostEditor/components/TempPostsPanel.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { logger } from '~/utils/logger';
 import { Dialog } from '@blex/ui';
 import { getTempPosts, type TempPost } from '~/lib/api/settings';
 import { cx } from '~/lib/classnames';
@@ -35,7 +36,7 @@ const TempPostsPanel = ({
                 setTempPosts([]);
             }
         } catch (error) {
-            console.error('Failed to fetch temp posts:', error);
+            logger.error('Failed to fetch temp posts:', error);
             setTempPosts([]);
         } finally {
             setIsLoading(false);

backend/islands/apps/remotes/src/components/remotes/PostEditor/hooks/useAutoSave.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { createTempPost, updateTempPost } from '~/lib/api/posts';
 
 interface AutoSaveData {
@@ -48,7 +48,7 @@ export const useAutoSave = (data: AutoSaveData, options: UseAutoSaveOptions) =>
     });
 
     // Manual save
-    const manualSave = async () => {
+    const manualSave = useCallback(async () => {
         const currentData = dataRef.current;
         const currentOptions = optionsRef.current;
 
@@ -98,7 +98,7 @@ export const useAutoSave = (data: AutoSaveData, options: UseAutoSaveOptions) =>
         } finally {
             setIsSaving(false);
         }
-    };
+    }, [isSaving]);
 
     // Auto-save effect
     useEffect(() => {

backend/islands/apps/remotes/src/components/remotes/RelatedPosts/RelatedPosts.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { logger } from '~/utils/logger';
 import { getRelatedPosts, type RelatedPost } from '~/lib/api/posts';
 
 interface RelatedPostsProps {
@@ -18,7 +19,7 @@ const RelatedPosts = ({ postUrl, username }: RelatedPostsProps) => {
                     setRelatedPosts(data.body.posts || []);
                 }
             } catch (error) {
-                console.error('Failed to fetch related posts:', error);
+                logger.error('Failed to fetch related posts:', error);
             } finally {
                 setIsLoading(false);
             }

backend/islands/apps/remotes/src/components/remotes/SearchModal/SearchModal.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { getMediaPath } from '~/modules/static.module';
 import { Modal } from '~/components/shared';
 import { searchPosts, type SearchResult } from '~/lib/api';
+import { logger } from '~/utils/logger';
 
 interface SearchModalProps {
     isOpen?: boolean;
@@ -65,7 +66,7 @@ const SearchModal = ({ isOpen: initialIsOpen = false }: SearchModalProps) => {
                 setPage(pageNum);
             }
         } catch (error) {
-            console.error('Search error:', error);
+            logger.error('Search error:', error);
         } finally {
             setIsLoading(false);
         }

backend/islands/apps/remotes/src/components/remotes/SettingsApp/pages/AccountSetting/AccountSetting.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { toast } from '~/utils/toast';
 import { useSuspenseQuery } from '@tanstack/react-query';
-import { useConfirm } from '~/contexts/ConfirmContext';
+import { useConfirm } from '~/hooks/useConfirm';
 import { SettingsHeader } from '../../components';
 import { getAccountSettings, updateAccountSettings, deleteAccount } from '~/lib/api/settings';
 import { enable2FA, disable2FA, verify2FASetup } from '~/lib/api/auth';

backend/islands/apps/remotes/src/components/remotes/SettingsApp/pages/BannerSetting/BannerSetting.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { toast } from '~/utils/toast';
 import { useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
-import { useConfirm } from '~/contexts/ConfirmContext';
+import { useConfirm } from '~/hooks/useConfirm';
 import { SettingsHeader } from '../../components';
 import { Button, Modal } from '~/components/shared';
 import {

backend/islands/apps/remotes/src/components/remotes/SettingsApp/pages/FormsSetting/FormsSetting.tsx

@@ -14,7 +14,7 @@ import {
  TITLE,
  ACTIONS_CONTAINER
 } from '~/components/shared';
-import { useConfirm } from '~/contexts/ConfirmContext';
+import { useConfirm } from '~/hooks/useConfirm';
 import {
     getForms,
     getForm,

backend/islands/apps/remotes/src/components/remotes/SettingsApp/pages/IntegrationSetting/IntegrationSetting.tsx

@@ -3,7 +3,7 @@ import { toast } from '~/utils/toast';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { SettingsHeader } from '../../components';
 import { Button } from '~/components/shared';
-import { useConfirm } from '~/contexts/ConfirmContext';
+import { useConfirm } from '~/hooks/useConfirm';
 import { getTelegramStatus, generateTelegramToken, disconnectTelegram as disconnectTelegramAPI } from '~/lib/api/telegram';
 
 const IntegrationSettings = () => {

backend/islands/apps/remotes/src/components/remotes/SettingsApp/pages/PostsSetting/hooks/usePostsActions.ts

@@ -1,5 +1,5 @@
 import { toast } from '~/utils/toast';
-import { useConfirm } from '~/contexts/ConfirmContext';
+import { useConfirm } from '~/hooks/useConfirm';
 import {
     togglePostVisibility,
     togglePostNotice,

backend/islands/apps/remotes/src/components/remotes/SettingsApp/pages/ProfileSetting/ProfileSetting.tsx

@@ -4,7 +4,7 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useSuspenseQuery } from '@tanstack/react-query';
-import { useConfirm } from '~/contexts/ConfirmContext';
+import { useConfirm } from '~/hooks/useConfirm';
 import { SettingsHeader } from '../../components';
 import { Button, Input, Card } from '~/components/shared';
 import { getProfileSettings, updateProfileSettings, uploadAvatar, uploadCover } from '~/lib/api/settings';

backend/islands/apps/remotes/src/components/remotes/SettingsApp/pages/SeriesSetting/SeriesSetting.tsx

@@ -32,7 +32,7 @@ import {
  ACTIONS_CONTAINER,
  DRAG_HANDLE
 } from '~/components/shared';
-import { useConfirm } from '~/contexts/ConfirmContext';
+import { useConfirm } from '~/hooks/useConfirm';
 import {
     getSeriesWithUsername,
     updateSeriesOrder,

backend/islands/apps/remotes/src/components/remotes/SettingsApp/pages/TempPostsSetting/TempPostsSetting.tsx

@@ -12,7 +12,7 @@ import {
     SUBTITLE,
     ACTIONS_CONTAINER
 } from '~/components/shared';
-import { useConfirm } from '~/contexts/ConfirmContext';
+import { useConfirm } from '~/hooks/useConfirm';
 import { getTempPosts, deleteTempPost } from '~/lib/api/settings';
 
 const TempPostsSetting = () => {

backend/islands/apps/remotes/src/components/remotes/Signup/Signup.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import SocialLogin from '~/components/remotes/SocialLogin';
 
 declare global {
@@ -38,7 +38,7 @@ const Signup = () => {
     const captchaRef = useRef<HTMLDivElement>(null);
     const widgetIdRef = useRef<string | null>(null);
 
-    const renderCaptcha = () => {
+    const renderCaptcha = useCallback(() => {
         if (!captchaRendered && captchaRef.current && window.hcaptcha && window.HCAPTCHA_SITE_KEY) {
             try {
                 widgetIdRef.current = window.hcaptcha.render(captchaRef.current, {
@@ -54,7 +54,7 @@ const Signup = () => {
                 // Ignore error
             }
         }
-    };
+    }, [captchaRendered]);
 
     useEffect(() => {
         setIsVisible(true);

backend/islands/apps/remotes/src/components/remotes/SocialLogin/hooks/useSocialProviders.ts

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { logger } from '~/utils/logger';
 import { getSocialProviders, type SocialProvider } from '~/lib/api';
 
 export const useSocialProviders = () => {
@@ -14,7 +15,7 @@ export const useSocialProviders = () => {
           setProviders(data.body);
         }
       } catch (error) {
-        console.error('Failed to load social providers:', error);
+        logger.error('Failed to load social providers:', error);
       }
       setLoading(false);
     };
@@ -26,4 +27,4 @@ export const useSocialProviders = () => {
     providers,
     loading
   };
-};
+};

backend/islands/apps/remotes/src/contexts/ConfirmContext.tsx

@@ -1,32 +1,9 @@
 import {
-    createContext,
-    useContext,
     useState,
     type ReactNode
 } from 'react';
 import { Modal } from '@blex/ui';
-
-interface ConfirmOptions {
-    title: string;
-    message: string;
-    confirmText?: string;
-    cancelText?: string;
-    variant?: 'default' | 'danger';
-}
-
-interface ConfirmContextType {
-    confirm: (options: ConfirmOptions) => Promise<boolean>;
-}
-
-const ConfirmContext = createContext<ConfirmContextType | null>(null);
-
-export const useConfirm = () => {
-    const context = useContext(ConfirmContext);
-    if (!context) {
-        throw new Error('useConfirm must be used within ConfirmProvider');
-    }
-    return context;
-};
+import { ConfirmContext, type ConfirmOptions } from './internal/ConfirmContextDef';
 
 interface ConfirmDialogState extends ConfirmOptions {
     isOpen: boolean;

backend/islands/apps/remotes/src/contexts/LoginPromptContext.tsx

@@ -1,25 +1,11 @@
 import {
-    createContext,
-    useContext,
     useState,
     useEffect,
+    useCallback,
     type ReactNode
 } from 'react';
 import { Modal } from '~/components/shared';
-
-interface LoginPromptContextType {
-    showLoginPrompt: (action: string) => void;
-}
-
-const LoginPromptContext = createContext<LoginPromptContextType | null>(null);
-
-export const useLoginPrompt = () => {
-    const context = useContext(LoginPromptContext);
-    if (!context) {
-        throw new Error('useLoginPrompt must be used within LoginPromptProvider');
-    }
-    return context;
-};
+import { LoginPromptContext } from './internal/LoginPromptContextDef';
 
 interface LoginPromptDialogState {
     isOpen: boolean;
@@ -34,7 +20,7 @@ export const LoginPromptProvider = ({ children }: { children: ReactNode }) => {
 
     const isLoggedIn = !!window.configuration?.user?.username;
 
-    const showLoginPrompt = (action: string) => {
+    const showLoginPrompt = useCallback((action: string) => {
         if (isLoggedIn) {
             return;
         }
@@ -43,7 +29,7 @@ export const LoginPromptProvider = ({ children }: { children: ReactNode }) => {
             isOpen: true,
             action
         });
-    };
+    }, [isLoggedIn]);
 
     // 전역 커스텀 이벤트로 모달 열기 (Alpine.js에서도 사용 가능)
     // 중복 방지: 같은 페이지에 여러 island가 있어도 한 번만 모달 표시
@@ -132,8 +118,3 @@ export const LoginPromptProvider = ({ children }: { children: ReactNode }) => {
         </LoginPromptContext.Provider>
     );
 };
-
-// Export a helper to check login status
-export const isUserLoggedIn = (): boolean => {
-    return !!window.configuration?.user?.username;
-};

backend/islands/apps/remotes/src/contexts/internal/ConfirmContextDef.ts

@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+
+export interface ConfirmOptions {
+    title: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: 'default' | 'danger';
+}
+
+export interface ConfirmContextType {
+    confirm: (options: ConfirmOptions) => Promise<boolean>;
+}
+
+export const ConfirmContext = createContext<ConfirmContextType | null>(null);

backend/islands/apps/remotes/src/contexts/internal/LoginPromptContextDef.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+export interface LoginPromptContextType {
+    showLoginPrompt: (action: string) => void;
+}
+
+export const LoginPromptContext = createContext<LoginPromptContextType | null>(null);

backend/islands/apps/remotes/src/hooks/useConfirm.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { ConfirmContext } from '../contexts/internal/ConfirmContextDef';
+
+export const useConfirm = () => {
+    const context = useContext(ConfirmContext);
+    if (!context) {
+        throw new Error('useConfirm must be used within ConfirmProvider');
+    }
+    return context;
+};