♻️ Refactor error handling and code readability across modules

Author: romantech

src/base/hooks/use-is-mounted.ts

@@ -9,9 +9,13 @@ export const useIsMounted = () => {
   const [isMounted, setMounted] = useState(false);
 
   useEffect(() => {
-    setMounted(true);
+    // 마운트 직후(다음 tick)에만 true로 바꿔서 "렌더 중 state 변경" ESLint 경고 대응
+    const timer = setTimeout(() => {
+      setMounted(true);
+    }, 0);
 
     return () => {
+      clearTimeout(timer);
       setMounted(false);
     };
   }, []);

src/base/hooks/use-local-storage.ts

@@ -17,7 +17,7 @@ const safeSetItem = <T>(key: string, value: T) => {
 
   try {
     window.localStorage.setItem(key, JSON.stringify(value));
-  } catch (error) {
+  } catch {
     logError('setting', key);
   }
 };
@@ -28,7 +28,7 @@ const safeGetItem = <T>(key: string, defaultValue: T) => {
   try {
     const storedValue = window.localStorage.getItem(key);
     if (storedValue) return JSON.parse(storedValue) as T;
-  } catch (error) {
+  } catch {
     logError('getting', key);
   }
 

src/base/utils/selection.ts

@@ -16,9 +16,6 @@ interface SelectionIndicesResult {
 export const getSelectionIndices = (
   qualifiedName: string,
 ): SelectionIndicesResult => {
-  let begin = 0;
-  let end = 0;
-
   const sel = window.getSelection();
   if (!sel?.rangeCount) {
     return { begin: 0, end: 0, startNode: null, endNode: null };
@@ -36,8 +33,8 @@ export const getSelectionIndices = (
   const startIndex = startElement.getAttribute(qualifiedName);
   const endIndex = endElement.getAttribute(qualifiedName);
 
-  begin = startIndex ? Number(startIndex) : 0;
-  end = endIndex ? Number(endIndex) + 1 : 0;
+  const begin = startIndex ? Number(startIndex) : 0;
+  const end = endIndex ? Number(endIndex) + 1 : 0;
 
   return { begin, end, startNode: startElement, endNode: endElement };
 };

src/features/misc/pages/error-component.tsx

@@ -1,5 +1,3 @@
-import { useRef } from 'react';
-
 import {
   Button,
   Heading,
@@ -34,12 +32,12 @@ export default function ErrorComponent({
   const [shouldRedirect, setShouldRedirect] = useBoolean(false);
 
   const isMounted = useIsMounted();
-  const errorMessage = useRef(error?.message ?? '문제가 발생했어요');
+  let errorMessage = error?.message ?? '문제가 발생했어요';
 
   const isRouteError = isRouteErrorResponse(routerError);
   if (isRouteError) {
     const { status, statusText } = routerError;
-    errorMessage.current = `${status} | ${statusText}`;
+    errorMessage = `${status} | ${statusText}`;
   }
 
   const onActionButtonClick = isRouteError
@@ -69,10 +67,10 @@ export default function ErrorComponent({
         <VStack>
           <Text fontSize="xl" textTransform="capitalize" maxW={500}>
             <Highlight
-              query={errorMessage.current.match(DIGITS_PATTERN) ?? []}
+              query={errorMessage.match(DIGITS_PATTERN) ?? []}
               styles={highlightStyles}
             >
-              {errorMessage.current}
+              {errorMessage}
             </Highlight>
           </Text>
           <Button mt={2} w="full" maxW={232} onClick={onActionButtonClick}>

src/features/syntax-analyzer/components/analysis-form/analysis-form.tsx

@@ -84,11 +84,11 @@ const AnalysisFormBox = ({
   );
 };
 
-const AnalysisFormSkeleton = (stackProps: StackProps) => {
-  const ESkeleton = (props: SkeletonProps) => (
-    <Skeleton w="full" borderRadius="md" h={10} {...props} />
-  );
+const ESkeleton = (props: SkeletonProps) => (
+  <Skeleton w="full" borderRadius="md" h={10} {...props} />
+);
 
+const AnalysisFormSkeleton = (stackProps: StackProps) => {
   return (
     <AnalysisFormBox {...stackProps}>
       <Stack gap={5} mb={2}>

src/lib/axios.ts

@@ -1,4 +1,4 @@
-import Axios from 'axios';
+import axiosLib from 'axios';
 import { stringify } from 'qs';
 
 const baseURL = import.meta.env.DEV
@@ -9,4 +9,4 @@ export const paramsSerializer = <T>(params: T) => {
   return stringify(params, { arrayFormat: 'repeat' });
 };
 
-export const axios = Axios.create({ baseURL });
+export const axios = axiosLib.create({ baseURL });