From abb32575f4396880a1c57baf580e18f3fe0e5d61 Mon Sep 17 00:00:00 2001 From: backuppc Date: Fri, 23 Jan 2026 13:23:11 +0900 Subject: [PATCH] =?UTF-8?q?=EC=9E=90=EC=9E=98=ED=95=9C=20=ED=86=B5?= =?UTF-8?q?=EC=8B=A0=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95=20=EB=B0=8F?= =?UTF-8?q?=20=EB=AA=A8=EB=B0=94=EC=9D=BC=EC=9A=A9=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EB=B3=80=EA=B2=BD,=20connect=20=EB=A9=94=EB=89=B4?= =?UTF-8?q?=20=EB=B3=84=EB=8F=84=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.tsx | 73 ++--- components/QuickTestPanel.tsx | 162 +++++++---- components/SettingsPanel.tsx | 532 +++++++++++++++++----------------- 3 files changed, 408 insertions(+), 359 deletions(-) diff --git a/App.tsx b/App.tsx index 05fea74..2f8e8e6 100644 --- a/App.tsx +++ b/App.tsx @@ -18,7 +18,7 @@ const App: React.FC = () => { const [address, setAddress] = useState(0xFF); // Broadcast address default // App State - Set Quick Test as Default - const [activeTab, setActiveTab] = useState<'inventory' | 'settings' | 'memory' | 'quicktest'>('quicktest'); + const [activeTab, setActiveTab] = useState<'connect' | 'inventory' | 'settings' | 'memory' | 'quicktest'>('quicktest'); const [logs, setLogs] = useState([]); const [tags, setTags] = useState([]); const [isScanning, setIsScanning] = useState(false); @@ -146,6 +146,7 @@ const App: React.FC = () => { setStatus(ConnectionStatus.CONNECTED); addLog('INFO', `Connected to serial port at ${baudRate}`); + setActiveTab('quicktest'); startReading(p); } catch (err: any) { console.error(err); @@ -318,7 +319,7 @@ const App: React.FC = () => { addLog('INFO', 'VERIFICATION SUCCESS: Data matches written value.'); performingQuickWriteRef.current = false; verificationRetriesRef.current = 0; - alert("Quick Test Successful: Write verified."); + //alert("Quick Test Successful: Write verified."); } else { if (verificationRetriesRef.current < 5) { verificationRetriesRef.current += 1; @@ -614,9 +615,8 @@ const App: React.FC = () => { }; const getLogHeightClass = () => { - if (isLogExpanded) return 'h-96'; - if (activeTab === 'quicktest' || activeTab === 'settings') return 'h-12'; - return 'h-48'; + if (isLogExpanded) return 'h-[30vh]'; + return 'h-12'; }; return ( @@ -632,6 +632,13 @@ const App: React.FC = () => {
+
-
- -
+ {/* Connection Panel removed from here and moved to main content */} {/* Main Content */}
{/* Mobile Top Navigation Bar */}
-
-
- - UHF -
- - {/* Connection Status Indicator */} - +
+ + UHF
+
+ {activeTab === 'connect' && ( +
+

Connection Manager

+
+ +
+
+ )} {activeTab === 'inventory' && ( = ({ isScanning, config }) => { - + return (
@@ -35,61 +35,55 @@ export const QuickTestPanel: React.FC = ({

Quick Test Mode

- Automatically detects the first tag in the field and performs a Read or Write operation.
- Target: EPC Bank, Start Address: 2
- Length: {config.length} Words, Format: {config.format.toUpperCase()} + 필드 내의 첫 번째 태그를 자동으로 감지하여 읽기 또는 쓰기 작업을 수행합니다.

- - {/* Read Card */} + + {/* Read/Write Card */}
-

Auto Read

+ {/* 1. Read Button */} +
+ {isPending ? ( + + ) : ( + + )} +
+ + {/* 2. Read Result Display */}
- {isPending ? ( -
- Scanning & Reading... -
- ) : ( - result ? ( - {result} - ) : ( - No Data Read - ) - )} + {isPending ? ( +
+ Scanning & Reading... +
+ ) : ( + result ? ( + {result} + ) : ( + No Data Read + ) + )}
- {isPending ? ( - - ) : ( - - )} -
- - {/* Write Card */} -
-
- -
-

Auto Write

- - onWriteInputChange(e.target.value)} @@ -97,30 +91,72 @@ export const QuickTestPanel: React.FC = ({ className="w-full bg-slate-50 border border-slate-300 text-center text-lg rounded-xl p-4 mb-6 font-mono focus:ring-2 focus:ring-purple-500 outline-none" /> - {isPending ? ( - - ) : ( - - )} + {/* 4. Write Button */} +
+ {isPending ? ( + + ) : ( + + )} +
+ +
+ + {/* Info / Config Card */} +
+
+

+ + Test Configuration +

+
+
+ Target Bank + EPC (01) +
+
+ Start Address + 2 (User Data) +
+
+ Data Length + {config.length} Words +
+
+ Format + {config.format.toUpperCase()} +
+
+
+ +
+

+ + Note +

+

+ 설정(길이, 포맷)을 변경하려면 Settings 탭으로 이동하세요. +

+
{isScanning && !isPending && ( -
- Background scanning is active in Inventory... -
+
+ Background scanning is active in Inventory... +
)}
); diff --git a/components/SettingsPanel.tsx b/components/SettingsPanel.tsx index 89b5fe2..3912b63 100644 --- a/components/SettingsPanel.tsx +++ b/components/SettingsPanel.tsx @@ -72,10 +72,10 @@ export const SettingsPanel: React.FC = ({ }; const handleSaveLocalSettings = () => { - onSaveQuickTestConfig({ - length: qtLength, - format: qtFormat - }); + onSaveQuickTestConfig({ + length: qtLength, + format: qtFormat + }); }; const baudRates = [9600, 19200, 38400, 57600, 115200]; @@ -85,287 +85,293 @@ export const SettingsPanel: React.FC = ({ return (
- + {/* Header */}
-

System Configuration

-

- Manage device parameters and local browser settings. -

+

System Configuration

+

+ 장치 매개변수 및 로컬 브라우저 설정을 관리합니다. +

- {/* 1. Quick Test Settings Card */} -
-
- -

Quick Test Settings (Local)

-
- -
-

- These settings are stored in your browser's local storage and control the behavior of the "Quick Test" tab. -

-
-
- -
- - -
-
-
- -
- - -
-
-
- - + + + + +
+
+ + {/* Status Info */} +
+
+
+
+
Model
+
{readerInfo?.model || '--'}
+
+
+
+
+
+
Firmware
+
{readerInfo?.version || '--'}
+
+
+
+
+
+
Protocol
+
{readerInfo?.protocol || 'EPCC1-G2'}
+
+
+
+
+
+
Power
+
{readerInfo ? `${readerInfo.power} dBm` : '--'}
+
+
+
+ + {/* Device Settings Form */} +
+ {/* 1. Communication Settings */} +
+

+ + Communication Parameters +

+
+
+ + { + const val = parseInt(e.target.value, 16); + if (!isNaN(val) && val >= 0 && val <= 0xFF) setAddress(val); + }} + className="w-full bg-white border border-slate-300 rounded-lg px-3 py-2 text-slate-900 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all" + maxLength={2} + /> +
+
+ + +
+
+ + +
+
+
+ + {/* 2. RF Settings */} +
+

+ + RF Configuration +

+
+
+ + +
+
+ + +
+
+
+ + +
+ +
+
+ +
+ +
+ {[ + { label: 'User Defined', value: FrequencyBand.USER }, + { label: 'Chinese Band', value: FrequencyBand.CHINESE }, + { label: 'US Band', value: FrequencyBand.US }, + { label: 'Korean Band', value: FrequencyBand.KOREAN }, + { label: 'EU Band', value: FrequencyBand.EU }, + ].map((item) => ( +
+
- {/* 2. Reader Configuration */} -
-
-
- -

Reader Configuration (Device)

-
- - {/* Device Actions */} -
- - + {/* 1. Quick Test Settings Card */} +
+
+ +

Quick Test Settings (Local)

+
- -
-
- - {/* Status Info */} -
-
-
-
-
Model
-
{readerInfo?.model || '--'}
+
+

+ 이 설정은 브라우저의 로컬 저장소에 저장되며 "Quick Test" 탭의 동작을 제어합니다. +

+
+
+ +
+ +
-
-
-
-
Firmware
-
{readerInfo?.version || '--'}
-
-
-
-
-
-
Protocol
-
{readerInfo?.protocol || 'EPCC1-G2'}
-
-
-
-
-
-
Power
-
{readerInfo ? `${readerInfo.power} dBm` : '--'}
+ +
+ +
+ +
- {/* Device Settings Form */} -
- {/* 1. Communication Settings */} -
-

- - Communication Parameters -

-
-
- - { - const val = parseInt(e.target.value, 16); - if (!isNaN(val) && val >= 0 && val <= 0xFF) setAddress(val); - }} - className="w-full bg-white border border-slate-300 rounded-lg px-3 py-2 text-slate-900 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all" - maxLength={2} - /> -
-
- - -
-
- - -
-
-
- - {/* 2. RF Settings */} -
-

- - RF Configuration -

-
-
- - -
-
- - -
-
-
- - -
- -
-
- -
- -
- {[ - { label: 'User Defined', value: FrequencyBand.USER }, - { label: 'Chinese Band', value: FrequencyBand.CHINESE }, - { label: 'US Band', value: FrequencyBand.US }, - { label: 'Korean Band', value: FrequencyBand.KOREAN }, - { label: 'EU Band', value: FrequencyBand.EU }, - ].map((item) => ( -
-
-
+ +
+ + + +
); };