-
{session.url}
+
+
+ {session.method}
+
+
+ {session.url}
+
+
{session.isActive ? 'Active' : 'Inactive'}
-
- {session.method}
-
-
-
- {/* Request Section */}
-
-
Request
-
- {session.request?.headers && (
-
-
Headers:
-
- {JSON.stringify(session.request.headers, null, 2)}
-
-
- )}
- {session.request?.data && (
-
-
Data:
-
- {JSON.stringify(session.request.data, null, 2)}
-
-
- )}
- {session.request?.params && (
-
-
Params:
-
- {JSON.stringify(session.request.params, null, 2)}
-
-
- )}
-
-
-
- {/* Response Section */}
-
-
Response
-
- {session.response?.status && (
-
- Status:
-
- {session.response.status}
-
-
- )}
- {session.response?.headers && (
-
-
Headers:
-
- {JSON.stringify(session.response.headers, null, 2)}
-
-
- )}
- {session.response?.data && (
-
-
Data:
-
- {JSON.stringify(session.response.data, null, 2)}
-
-
- )}
-
-
-
))}
diff --git a/tauri-ui/src/pages/sessions/utils/index.ts b/tauri-ui/src/pages/sessions/utils/index.ts
new file mode 100644
index 00000000..ddb6a86b
--- /dev/null
+++ b/tauri-ui/src/pages/sessions/utils/index.ts
@@ -0,0 +1 @@
+export { formatValueToJsonString, handleEditorChange } from './json-editor-utils';
diff --git a/tauri-ui/src/pages/sessions/utils/json-editor-utils.ts b/tauri-ui/src/pages/sessions/utils/json-editor-utils.ts
new file mode 100644
index 00000000..7a637060
--- /dev/null
+++ b/tauri-ui/src/pages/sessions/utils/json-editor-utils.ts
@@ -0,0 +1,58 @@
+/**
+ * JSON 에디터를 위한 유틸리티 함수들
+ */
+
+/**
+ * 값을 JSON 문자열로 포맷팅합니다
+ * @param value - 포맷팅할 값
+ * @returns 포맷팅된 JSON 문자열
+ */
+export const formatValueToJsonString = (value: unknown): string => {
+ if (!value) return '';
+
+ // 이미 문자열인 경우 파싱 시도
+ if (typeof value === 'string') {
+ try {
+ const parsed = JSON.parse(value);
+ return JSON.stringify(parsed, null, 2);
+ } catch {
+ return value;
+ }
+ }
+
+ // 객체인 경우 그대로 문자열화
+ return JSON.stringify(value, null, 2);
+};
+
+/**
+ * 에디터 값 변경을 처리합니다
+ * @param value - 에디터에서 입력된 값
+ * @param isEditing - 편집 모드 여부
+ * @param handleChange - 값 변경 핸들러
+ */
+export const handleEditorChange =
(
+ value: string | undefined,
+ isEditing: boolean,
+ handleChange: (value: T) => void,
+): void => {
+ if (!isEditing || value === undefined) return;
+
+ // 빈 텍스트인 경우 undefined로 저장
+ if (value.trim() === '') {
+ handleChange(undefined as T);
+ return;
+ }
+
+ try {
+ const parsed = JSON.parse(value);
+ // 빈 객체인 경우 undefined로 저장
+ if (parsed && typeof parsed === 'object' && Object.keys(parsed).length === 0) {
+ handleChange(undefined as T);
+ } else {
+ handleChange(parsed as T);
+ }
+ } catch {
+ // Invalid JSON, save as string
+ handleChange(value as T);
+ }
+};
diff --git a/tauri-ui/src/shared/stores/index.ts b/tauri-ui/src/shared/stores/index.ts
index 42c965b9..33b41e2d 100644
--- a/tauri-ui/src/shared/stores/index.ts
+++ b/tauri-ui/src/shared/stores/index.ts
@@ -1,2 +1,3 @@
export * from './session-store';
export * from './proxy-store';
+export * from './transaction-store';
diff --git a/tauri-ui/src/shared/stores/transaction-store.ts b/tauri-ui/src/shared/stores/transaction-store.ts
new file mode 100644
index 00000000..83367f87
--- /dev/null
+++ b/tauri-ui/src/shared/stores/transaction-store.ts
@@ -0,0 +1,78 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+import type { HttpTransaction } from '@/entities/proxy';
+
+interface TransactionState {
+ transactions: HttpTransaction[];
+ selectedTransaction: HttpTransaction | null;
+ isPaused: boolean;
+ addTransaction: (transaction: HttpTransaction) => void;
+ setSelectedTransaction: (transaction: HttpTransaction | null) => void;
+ clearTransactions: () => void;
+ deleteTransaction: (id: string) => void;
+ setPaused: (paused: boolean) => void;
+ togglePause: () => void;
+}
+
+export const useTransactionStore = create()(
+ persist(
+ (set, get) => ({
+ transactions: [],
+ selectedTransaction: null,
+ isPaused: false,
+
+ addTransaction: (transaction: HttpTransaction) => {
+ const { isPaused, transactions } = get();
+ if (isPaused) return;
+
+ // 중복 transaction 체크 (id 기준)
+ const existingTransaction = transactions.find((t) => t.request?.id === transaction.request?.id);
+ if (existingTransaction) return;
+
+ set((state) => ({
+ transactions: [transaction, ...state.transactions],
+ }));
+ },
+
+ setSelectedTransaction: (transaction: HttpTransaction | null) => {
+ set({ selectedTransaction: transaction });
+ },
+
+ clearTransactions: () => {
+ set({ transactions: [], selectedTransaction: null });
+ },
+
+ deleteTransaction: (id: string) => {
+ set((state) => {
+ const filteredTransactions = state.transactions.filter((transaction) => transaction?.request?.id !== id);
+
+ // 삭제된 transaction이 현재 선택된 transaction이면 선택 해제
+ const newSelectedTransaction =
+ state.selectedTransaction?.request?.id === id ? null : state.selectedTransaction;
+
+ return {
+ transactions: filteredTransactions,
+ selectedTransaction: newSelectedTransaction,
+ };
+ });
+ },
+
+ setPaused: (paused: boolean) => {
+ set({ isPaused: paused });
+ },
+
+ togglePause: () => {
+ set((state) => ({ isPaused: !state.isPaused }));
+ },
+ }),
+ {
+ name: 'cheolsu-transaction-store',
+ // transactions는 persist하지 않음 (앱 재시작 시 초기화되어야 함)
+ // currentTransaction만 persist
+ partialize: (state) => ({
+ isPaused: state.isPaused,
+ }),
+ },
+ ),
+);
diff --git a/tauri-ui/src/shared/ui/index.ts b/tauri-ui/src/shared/ui/index.ts
index 2aba708b..78c29240 100644
--- a/tauri-ui/src/shared/ui/index.ts
+++ b/tauri-ui/src/shared/ui/index.ts
@@ -13,3 +13,4 @@ export * from './resizable';
export * from './scroll-area';
export * from './sonner';
export * from './virtualized-scroll-area';
+export * from './dialog';
diff --git a/tauri-ui/src/widgets/network-table/ui/network-table.tsx b/tauri-ui/src/widgets/network-table/ui/network-table.tsx
index f3dceffe..51768674 100644
--- a/tauri-ui/src/widgets/network-table/ui/network-table.tsx
+++ b/tauri-ui/src/widgets/network-table/ui/network-table.tsx
@@ -8,7 +8,7 @@ interface NetworkTableProps {
transactions: HttpTransaction[];
selectedTransaction: HttpTransaction | null;
createTransactionSelectHandler: (transaction: HttpTransaction) => () => void;
- createTransactionDeleteHandler: (id: number) => () => void;
+ createTransactionDeleteHandler: (id: string) => () => void;
}
export const NetworkTable = ({
diff --git a/tauri-ui/src/widgets/network-table/ui/table-body.tsx b/tauri-ui/src/widgets/network-table/ui/table-body.tsx
index f5e49666..9f1d1c84 100644
--- a/tauri-ui/src/widgets/network-table/ui/table-body.tsx
+++ b/tauri-ui/src/widgets/network-table/ui/table-body.tsx
@@ -10,13 +10,13 @@ import { TableRow } from './table-row';
interface TableBodyProps {
data: TableRowData[];
createTransactionSelectHandler: (request: HttpTransaction) => () => void;
- createTransactionDeleteHandler: (id: number) => () => void;
+ createTransactionDeleteHandler: (id: string) => () => void;
}
export const TableBody = ({ data, createTransactionSelectHandler, createTransactionDeleteHandler }: TableBodyProps) => {
const rowHandlers = useMemo(() => {
return data.map((rowData, index) => {
- const id = rowData.transaction.request?.time ?? index;
+ const id = rowData.transaction.request?.id ?? index.toString();
return {
onSelect: createTransactionSelectHandler(rowData.transaction),
onDelete: createTransactionDeleteHandler(id),