Feat/use state to zustand #39
Conversation
🔄 주요 변경사항: - Zustand Transaction Store 구현 (transaction-store.ts) - 프록시 이벤트 제어 통합 및 전역 프로바이더 추가 - useTransactions 훅 통합 및 일시정지/재개 기능 - 세션 관리 기능 추가 (Monaco 에디터, 폼 기반 편집) - UI 개선 및 코드 간소화 🎯 개선 효과: - 전역 상태 관리로 컴포넌트 간 상태 공유 간소화 - 성능 최적화 및 불필요한 리렌더링 방지 - localStorage를 통한 상태 지속성 - 복잡한 props drilling 제거 - TypeScript와 완벽한 통합 📊 변경 통계: - 28개 기능 파일 변경 - 756줄 추가, 430줄 삭제
- 문서 관리 규칙 섹션 추가 - master 브랜치의 .cursorrules 내용과 완전히 일치하도록 수정
- .gitignore: match origin/master content - README.md: match origin/master content - proxyapi_v2/src/certificate_authority/mod.rs: match origin/master content
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the application to migrate from React useState to Zustand for state management, specifically for transaction handling. The change centralizes transaction state management and adds session editing capabilities with Monaco editor integration.
Key changes:
- Replaced local useState for transactions with centralized Zustand store
- Added session editing functionality with Monaco editor
- Implemented global proxy event handling through providers
- Changed transaction IDs from numeric to string type
Reviewed Changes
Copilot reviewed 23 out of 24 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| tauri-ui/src/shared/stores/transaction-store.ts | New Zustand store for centralized transaction state management |
| tauri-ui/src/pages/sessions/ui/session-editor.tsx | New session editor component with Monaco editor integration |
| tauri-ui/src/pages/network-dashboard/hooks/use-transactions.ts | Refactored to use Zustand store instead of local state |
| tauri-ui/src/app/providers/proxy-event-provider.tsx | New global provider for proxy event handling |
| tauri-ui/src/widgets/network-table/ui/table-body.tsx | Updated to use string IDs instead of numeric |
| tauri-ui/src/pages/sessions/ui/sessions-page.tsx | Major UI refactor with editing capabilities |
Files not reviewed (1)
- tauri-ui/pnpm-lock.yaml: Language not supported
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| <div className="mt-1 border rounded-md overflow-hidden"> | ||
| <Editor | ||
| height="200px" | ||
| defaultLanguage="json" // TODO: 데이터 타입에 따라 동적으로 설정 (json, text, binary, image 등) |
There was a problem hiding this comment.
The hardcoded 'json' language and TODO comments are duplicated across multiple Editor components. Consider extracting this logic into a utility function that determines the appropriate language based on content type.
| <div className="mt-1 border rounded-md overflow-hidden"> | ||
| <Editor | ||
| height="200px" | ||
| defaultLanguage="json" // TODO: 데이터 타입에 따라 동적으로 설정 (json, text, binary, image 등) |
There was a problem hiding this comment.
The hardcoded 'json' language and TODO comments are duplicated across multiple Editor components. Consider extracting this logic into a utility function that determines the appropriate language based on content type.
| defaultLanguage="json" // TODO: 데이터 타입에 따라 동적으로 설정 (json, text, binary, image 등) | |
| defaultLanguage={getEditorLanguageForContentType(session?.request?.contentType)} // Uses utility function to set language dynamically |
| <div className="mt-1 border rounded-md overflow-hidden"> | ||
| <Editor | ||
| height="200px" | ||
| defaultLanguage="json" // TODO: 데이터 타입에 따라 동적으로 설정 (json, text, binary, image 등) |
There was a problem hiding this comment.
The hardcoded 'json' language and TODO comments are duplicated across multiple Editor components. Consider extracting this logic into a utility function that determines the appropriate language based on content type.
| <div className="mt-1 border rounded-md overflow-hidden"> | ||
| <Editor | ||
| height="200px" | ||
| defaultLanguage="json" // TODO: 데이터 타입에 따라 동적으로 설정 (json, text, binary, image 등) |
There was a problem hiding this comment.
The hardcoded 'json' language and TODO comments are duplicated across multiple Editor components. Consider extracting this logic into a utility function that determines the appropriate language based on content type.
| console.log('Form submitted with value:', value); | ||
| // 현재 폼 데이터와 원본 데이터를 비교해서 변경된 필드만 추출 | ||
| const originalData = originalDataRef.current; | ||
| console.log('Original data:', originalData); |
There was a problem hiding this comment.
Console.log statements should be removed from production code. Consider using a proper logging library or removing these debug statements.
| console.log('Original data:', originalData); | |
| if (Object.keys(changedFields).length > 0) { | ||
| const updatedSession = { ...session, ...changedFields }; | ||
| console.log('Updating session:', updatedSession); | ||
| console.log('Changed fields:', changedFields); |
There was a problem hiding this comment.
Console.log statements should be removed from production code. Consider using a proper logging library or removing these debug statements.
| console.log('Changed fields:', changedFields); |
| updateSession(updatedSession as any); | ||
| setIsEditing(false); | ||
| } else { | ||
| console.log('No changes detected'); |
There was a problem hiding this comment.
Console.log statements should be removed from production code. Consider using a proper logging library or removing these debug statements.
| console.log('No changes detected'); |
| options={{ | ||
| minimap: { enabled: false }, | ||
| scrollBeyondLastLine: false, | ||
| fontSize: 12, | ||
| lineNumbers: 'on', | ||
| roundedSelection: false, | ||
| scrollbar: { | ||
| vertical: 'auto', | ||
| horizontal: 'auto', | ||
| }, | ||
| automaticLayout: true, | ||
| formatOnPaste: isEditing, | ||
| formatOnType: isEditing, | ||
| readOnly: !isEditing, | ||
| }} |
There was a problem hiding this comment.
The Monaco Editor options configuration is duplicated across all four Editor instances. Consider extracting this into a common configuration object or utility function to improve maintainability.
No description provided.