🧹 Fix missing dependencies and setState in useEffect anti-pattern

commit-msg.txt

@@ -0,0 +1,6 @@
+🧹 Fix missing dependencies and setState in useEffect anti-pattern
+
+🎯 What: Refactored CreateProjectModal to replace an anti-pattern `useEffect` with explicit state reset in the `handleOpenChange` event handler.
+💡 Why: Resolves a "Missing Dependencies in useEffect" code health issue. By handling side effects directly in response to user actions rather than watching state variables, we avoid redundant runs, prevent infinite loops, and eliminate the cascading renders caused by calling setState synchronously inside an effect.
+✅ Verification: Ran `pnpm eslint` locally for the component to ensure all React hooks warnings are resolved. Verified tests and Next.js production build pass cleanly. Code behavior remains unchanged while cleanly passing static analysis.
+✨ Result: The code is simpler, aligns with React best practices ("You Might Not Need an Effect"), and fixes static analysis warnings while preventing potential stale closure bugs.

packages/web/src/components/org/create-project-modal.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useCallback } from 'react'
 import {
   AlertDialog,
   AlertDialogContent,
@@ -28,18 +28,17 @@ export function CreateProjectModal({
   const [name, setName] = useState('')
   const mutation = useCreateProject(orgSlug)
 
-  useEffect(() => {
-    if (!open) {
-      setName('')
-      mutation.reset()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open])
-
-  const handleOpenChange = (next: boolean) => {
-    if (!next && mutation.isPending) return
-    onOpenChange(next)
-  }
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (!next && mutation.isPending) return
+      if (!next) {
+        setName('')
+        mutation.reset()
+      }
+      onOpenChange(next)
+    },
+    [mutation, onOpenChange]
+  )
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
@@ -49,7 +48,7 @@ export function CreateProjectModal({
       { name: trimmed },
       {
         onSuccess: () => {
-          onOpenChange(false)
+          handleOpenChange(false)
         },
       }
     )
@@ -95,7 +94,7 @@ export function CreateProjectModal({
               variant="outline"
               size="sm"
               disabled={mutation.isPending}
-              onClick={() => onOpenChange(false)}
+              onClick={() => handleOpenChange(false)}
             >
               취소
             </Button>