fix: linting problem

components/DrawingCanvas.tsx

@@ -66,7 +66,23 @@ export default function DrawingCanvas({ initialDrawing, onSave, onClear }: Drawi
   }, [initialDrawing])
 
   useEffect(() => {
-    redrawCanvas()
+    const canvas = canvasRef.current
+    if (!canvas || !contextRef.current) return
+
+    const context = contextRef.current
+    context.clearRect(0, 0, canvas.width, canvas.height)
+
+    drawingHistory.forEach(stroke => {
+      if (stroke.points.length === 0) return
+      context.beginPath()
+      context.strokeStyle = stroke.color
+      context.lineWidth = stroke.thickness
+      context.moveTo(stroke.points[0].x, stroke.points[0].y)
+      stroke.points.forEach(point => {
+        context.lineTo(point.x, point.y)
+      })
+      context.stroke()
+    })
   }, [drawingHistory])
 
   const getMousePos = (event: React.MouseEvent) => {
@@ -125,26 +141,6 @@ export default function DrawingCanvas({ initialDrawing, onSave, onClear }: Drawi
     contextRef.current?.closePath()
   }
 
-  const redrawCanvas = () => {
-    const canvas = canvasRef.current
-    if (!canvas || !contextRef.current) return
-
-    const context = contextRef.current
-    context.clearRect(0, 0, canvas.width, canvas.height)
-
-    drawingHistory.forEach(stroke => {
-      if (stroke.points.length === 0) return
-      context.beginPath()
-      context.strokeStyle = stroke.color
-      context.lineWidth = stroke.thickness
-      context.moveTo(stroke.points[0].x, stroke.points[0].y)
-      stroke.points.forEach(point => {
-        context.lineTo(point.x, point.y)
-      })
-      context.stroke()
-    })
-  }
-
   const handleUndo = () => {
     setDrawingHistory(prevHistory => {
       const newHistory = [...prevHistory]

components/NavDisplay.tsx

@@ -3,14 +3,14 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { NavItemType } from './Navigation';
 
-export default function NavDisplay({ navItems, isMobile }: { navItems: NavItemType[], isMobile: boolean }) {
+export default function NavDisplay({ navItems, displayType }: { navItems: NavItemType[], displayType: 'main' | 'mobile' }) {
   const pathname = usePathname();
   const { isIOS } = useHelpers()
 
-  if (isMobile) {
+  if (displayType === 'mobile') {
     return (
         <>
-        {isMobile && (<div className={isIOS ? "pb-20" : "pb-16"} />)}
+        <div className={isIOS ? "pb-20" : "pb-16"} />
         <nav className={`lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg ${isIOS ? "pb-4" : ""}`}>
             <div className="grid grid-cols-6 w-full">
             {navItems.map((item) => (

components/Navigation.tsx

@@ -3,7 +3,7 @@
 import { HabitIcon, TaskIcon } from '@/lib/constants'
 import { Calendar, Coins, Gift, Home } from 'lucide-react'
 import { useTranslations } from 'next-intl'
-import { ElementType, useEffect, useState } from 'react'
+import { ElementType } from 'react'
 import NavDisplay from './NavDisplay'
 
 export interface NavItemType {
@@ -14,13 +14,6 @@ export interface NavItemType {
 
 export default function Navigation({ position }: { position: 'main' | 'mobile' }) {
   const t = useTranslations('Navigation');
-  const [isMobile, setIsMobile] = useState(window.innerWidth < 1024);
-
-  useEffect(() => {
-    const handleResize = () => {setIsMobile(window.innerWidth < 1024); };
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [setIsMobile]);
 
   const currentNavItems: NavItemType[] = [
     { icon: Home, label: t('dashboard'), href: '/' },
@@ -31,10 +24,5 @@ export default function Navigation({ position }: { position: 'main' | 'mobile' }
     { icon: Coins, label: t('coins'), href: '/coins' },
   ]
 
-  if ((position === 'mobile' && isMobile) || (position === 'main' && !isMobile)) {
-    return <NavDisplay navItems={currentNavItems} isMobile={isMobile} />
-  }
-  else {
-    return <></>
-  }
+  return <NavDisplay navItems={currentNavItems} displayType={position} />
 }