🐛 Jotai DevTools 상태 안나오는 문제 해결

[romantech]

User description

closes #72

---

PR Type

Bug fix, Enhancement

---

Description

• Simplify JotaiDevTools implementation by removing lazy loading and Suspense wrapper

• Fix DevTools state visibility issue by directly importing and rendering component

• Set default dark theme in component props for consistency

• Remove unnecessary store and theme props from component usage

---

Diagram Walkthrough

flowchart LR
  A["Lazy loading with Suspense"] -->|Remove| B["Direct DevTools import"]
  C["Manual theme prop passing"] -->|Simplify| D["Default dark theme"]
  E["Complex Promise.all import"] -->|Refactor| F["Simple CSS import"]
  B --> G["Fixed state visibility"]
  D --> G

Loading

File Walkthrough

	Relevant files
Bug fix	jotai-devtools.tsx Simplify DevTools implementation and fix state visibility src/base/components/dev/jotai-devtools.tsx Removed lazy loading wrapper and Suspense component that was causing state visibility issues Changed to direct import of DevTools component from jotai-devtools Added default 'dark' theme prop to component signature Simplified CSS import to conditional statement based on DEV environment Reduced component from 19 lines to 8 lines +4/-15
Enhancement	syntax-editor-root.tsx Remove explicit props from DevTools usage                                src/features/syntax-editor/pages/syntax-editor-root.tsx Removed explicit store and theme props from JotaiDevTools component usage Simplified component invocation to use default configuration +1/-1

---

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
syntax-analyzer	Ready	Preview, Comment	Mar 1, 2026 0:19am

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
🟡	🎫 #72 🟢 Fix the issue where Jotai DevTools cannot track/show state (state visibility/inspection not working). Ensure the DevTools integration works correctly in development mode (and does not affect production behavior). ⚪ Confirm in a running dev build that the Jotai DevTools UI now displays and updates atom state correctly during typical editor interactions.
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
Update

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Automatically pass current store Use the useStore hook to get the correct store from the context and pass it to the DevTools component, ensuring it inspects the correct provider-scoped store. src/base/components/dev/jotai-devtools.tsx [5-8] +import { useStore } from 'jotai' + export function JotaiDevTools({ theme = 'dark', ...props }: DevToolsProps) { - if (!import.meta.env.DEV) return null; - return <DevTools theme={theme} {...props} />; + const store = useStore() + if (!import.meta.env.DEV) return null + return <DevTools store={store} theme={theme} {...props} /> } Apply / Chat Suggestion importance[1-10]: 9 __ Why: This fixes a critical bug where the devtools would inspect the default Jotai store instead of the one provided by the <Provider>, rendering the tool ineffective in this context.	High
General	Isolate development code for better tree-shaking Isolate development-only code into a separate file (jotai-devtools.dev.tsx) and export a dummy component for production builds to improve tree-shaking. src/base/components/dev/jotai-devtools.tsx [1-8] +// In a new file: src/base/components/dev/jotai-devtools.dev.tsx import { DevTools, DevToolsProps } from 'jotai-devtools'; - -if (import.meta.env.DEV) import('jotai-devtools/styles.css'); +import 'jotai-devtools/styles.css'; export function JotaiDevTools({ theme = 'dark', ...props }: DevToolsProps) { - if (!import.meta.env.DEV) return null; return <DevTools theme={theme} {...props} />; } +// In the modified file: src/base/components/dev/jotai-devtools.tsx +import { DevToolsProps } from 'jotai-devtools'; + +// This component will be used in production builds and will be tree-shaken. +// eslint-disable-next-line @typescript-eslint/no-unused-vars +export function JotaiDevTools(props: DevToolsProps) { + return null; +} + Apply / Chat Suggestion importance[1-10]: 6 __ Why: The suggestion proposes a more robust architectural pattern for tree-shaking development-only tools, which can improve build optimization and maintainability over the current implementation.	Low
	Handle CSS import errors Add a .catch() handler to the dynamic import of jotai-devtools/styles.css to prevent unhandled promise rejections on loading failure. src/base/components/dev/jotai-devtools.tsx [3] -if (import.meta.env.DEV) import('jotai-devtools/styles.css'); +if (import.meta.env.DEV) { + import('jotai-devtools/styles.css').catch(() => {}) +} Apply / Chat Suggestion importance[1-10]: 4 __ Why: The suggestion improves robustness by handling potential network errors during the dynamic import of CSS, which is good practice for development-time tooling.	Low
Update