자잘한 통신 오류 수정 및 모바일용 디자인 변경, connect 메뉴 별도 추가

components/QuickTestPanel.tsx

@@ -26,7 +26,7 @@ export const QuickTestPanel: React.FC<Props> = ({
   isScanning,
   config
 }) => {
-  
+
   return (
     <div className="h-full flex flex-col items-center justify-center p-6 max-w-4xl mx-auto">
       <div className="text-center mb-10">
@@ -35,61 +35,55 @@ export const QuickTestPanel: React.FC<Props> = ({
         </div>
         <h1 className="text-3xl font-bold text-slate-800 mb-2">Quick Test Mode</h1>
         <p className="text-slate-500">
-          Automatically detects the first tag in the field and performs a Read or Write operation.<br/>
-          Target: <strong>EPC Bank</strong>, Start Address: <strong>2</strong><br/>
-          Length: <strong>{config.length} Words</strong>, Format: <strong>{config.format.toUpperCase()}</strong>
+          필드 내의 첫 번째 태그를 자동으로 감지하여 읽기 또는 쓰기 작업을 수행합니다.
         </p>
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
-        
-        {/* Read Card */}
+
+        {/* Read/Write Card */}
         <div className="bg-white p-8 rounded-2xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow flex flex-col items-center text-center">
           <div className="mb-6 p-4 bg-blue-50 text-blue-600 rounded-full">
             <HardDriveDownload className="w-8 h-8" />
           </div>
-          <h2 className="text-xl font-bold text-slate-800 mb-2">Auto Read</h2>
 
+          {/* 1. Read Button */}
+          <div className="w-full mb-6">
+            {isPending ? (
+              <button
+                onClick={onCancel}
+                className="w-full py-4 bg-red-500 hover:bg-red-600 text-white rounded-xl font-bold text-lg shadow-lg shadow-red-500/30 transition-all flex items-center justify-center gap-2"
+              >
+                <XCircle className="w-5 h-5" /> Cancel
+              </button>
+            ) : (
+              <button
+                onClick={onQuickRead}
+                disabled={isScanning && !isPending}
+                className="w-full py-4 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-300 disabled:cursor-not-allowed text-white rounded-xl font-bold text-lg shadow-lg shadow-blue-500/30 transition-all flex items-center justify-center gap-2"
+              >
+                Start Read Test
+              </button>
+            )}
+          </div>
+
+          {/* 2. Read Result Display */}
           <div className="w-full bg-slate-50 border border-slate-200 rounded-xl p-4 mb-6 min-h-[80px] flex items-center justify-center font-mono text-lg text-slate-700 break-all">
-             {isPending ? (
-                <div className="flex items-center gap-2 text-amber-500 animate-pulse">
-                   <Activity className="w-5 h-5" /> Scanning & Reading...
-                </div>
-             ) : (
-                result ? (
-                   <span className="text-emerald-600 font-bold">{result}</span>
-                ) : (
-                   <span className="text-slate-300">No Data Read</span>
-                )
-             )}
+            {isPending ? (
+              <div className="flex items-center gap-2 text-amber-500 animate-pulse">
+                <Activity className="w-5 h-5" /> Scanning & Reading...
+              </div>
+            ) : (
+              result ? (
+                <span className="text-emerald-600 font-bold">{result}</span>
+              ) : (
+                <span className="text-slate-300">No Data Read</span>
+              )
+            )}
           </div>
 
-          {isPending ? (
-             <button
-               onClick={onCancel}
-               className="w-full py-4 bg-red-500 hover:bg-red-600 text-white rounded-xl font-bold text-lg shadow-lg shadow-red-500/30 transition-all flex items-center justify-center gap-2"
-             >
-               <XCircle className="w-5 h-5" /> Cancel
-             </button>
-          ) : (
-             <button
-               onClick={onQuickRead}
-               disabled={isScanning && !isPending}
-               className="w-full py-4 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-300 disabled:cursor-not-allowed text-white rounded-xl font-bold text-lg shadow-lg shadow-blue-500/30 transition-all flex items-center justify-center gap-2"
-             >
-               Start Read Test
-             </button>
-          )}
-        </div>
-
-        {/* Write Card */}
-        <div className="bg-white p-8 rounded-2xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow flex flex-col items-center text-center">
-          <div className="mb-6 p-4 bg-purple-50 text-purple-600 rounded-full">
-            <HardDriveUpload className="w-8 h-8" />
-          </div>
-          <h2 className="text-xl font-bold text-slate-800 mb-2">Auto Write</h2>
-
-          <input 
+          {/* 3. Write Input */}
+          <input
             type="text"
             value={writeInput}
             onChange={(e) => onWriteInputChange(e.target.value)}
@@ -97,30 +91,72 @@ export const QuickTestPanel: React.FC<Props> = ({
             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 ? (
-             <button
-               onClick={onCancel}
-               className="w-full py-4 bg-red-500 hover:bg-red-600 text-white rounded-xl font-bold text-lg shadow-lg shadow-red-500/30 transition-all flex items-center justify-center gap-2"
-             >
-               <XCircle className="w-5 h-5" /> Cancel
-             </button>
-          ) : (
-             <button
-               onClick={() => onQuickWrite(writeInput)}
-               disabled={(isScanning && !isPending) || !writeInput}
-               className="w-full py-4 bg-slate-800 hover:bg-slate-900 disabled:bg-slate-300 disabled:cursor-not-allowed text-white rounded-xl font-bold text-lg shadow-lg shadow-slate-500/30 transition-all flex items-center justify-center gap-2"
-             >
-               Start Write Test
-             </button>
-          )}
+          {/* 4. Write Button */}
+          <div className="w-full">
+            {isPending ? (
+              <button
+                onClick={onCancel}
+                className="w-full py-4 bg-red-500 hover:bg-red-600 text-white rounded-xl font-bold text-lg shadow-lg shadow-red-500/30 transition-all flex items-center justify-center gap-2"
+              >
+                <XCircle className="w-5 h-5" /> Cancel
+              </button>
+            ) : (
+              <button
+                onClick={() => onQuickWrite(writeInput)}
+                disabled={(isScanning && !isPending) || !writeInput}
+                className="w-full py-4 bg-slate-800 hover:bg-slate-900 disabled:bg-slate-300 disabled:cursor-not-allowed text-white rounded-xl font-bold text-lg shadow-lg shadow-slate-500/30 transition-all flex items-center justify-center gap-2"
+              >
+                Start Write Test
+              </button>
+            )}
+          </div>
+
+        </div>
+
+        {/* Info / Config Card */}
+        <div className="flex flex-col justify-center space-y-6">
+          <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow">
+            <h3 className="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2">
+              <Zap className="w-5 h-5 text-indigo-500" />
+              Test Configuration
+            </h3>
+            <div className="space-y-4">
+              <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
+                <span className="text-slate-500 text-sm">Target Bank</span>
+                <span className="font-bold text-slate-700">EPC (01)</span>
+              </div>
+              <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
+                <span className="text-slate-500 text-sm">Start Address</span>
+                <span className="font-bold text-slate-700">2 (User Data)</span>
+              </div>
+              <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
+                <span className="text-slate-500 text-sm">Data Length</span>
+                <span className="font-bold text-slate-700">{config.length} Words</span>
+              </div>
+              <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
+                <span className="text-slate-500 text-sm">Format</span>
+                <span className="font-bold text-slate-700">{config.format.toUpperCase()}</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-indigo-50 p-6 rounded-2xl border border-indigo-100 text-sm text-indigo-800">
+            <h4 className="font-bold mb-2 flex items-center gap-2">
+              <AlertCircle className="w-4 h-4" />
+              Note
+            </h4>
+            <p>
+              설정(길이, 포맷)을 변경하려면 <strong>Settings</strong> 탭으로 이동하세요.
+            </p>
+          </div>
         </div>
 
       </div>
 
       {isScanning && !isPending && (
-         <div className="mt-8 flex items-center gap-2 px-4 py-2 bg-amber-50 text-amber-700 border border-amber-200 rounded-full text-sm animate-pulse">
-            <Activity className="w-4 h-4" /> Background scanning is active in Inventory...
-         </div>
+        <div className="mt-8 flex items-center gap-2 px-4 py-2 bg-amber-50 text-amber-700 border border-amber-200 rounded-full text-sm animate-pulse">
+          <Activity className="w-4 h-4" /> Background scanning is active in Inventory...
+        </div>
       )}
     </div>
   );