모바일 디자인 업데이트 및 quick test 에서 start 와 length 를 직접 입력할 수 있게 함

App.tsx

@@ -46,7 +46,15 @@ const App: React.FC = () => {
   // Quick Action Config (Persisted in localStorage)
   const [quickTestConfig, setQuickTestConfig] = useState<QuickTestConfig>(() => {
     const saved = localStorage.getItem('quickTestConfig');
-    return saved ? JSON.parse(saved) : { length: 3, format: 'ascii' };
+    if (saved) {
+      const parsed = JSON.parse(saved);
+      return {
+        length: parsed.length || 3,
+        format: parsed.format || 'ascii',
+        startAddress: parsed.startAddress !== undefined ? parsed.startAddress : 2
+      };
+    }
+    return { length: 3, format: 'ascii', startAddress: 2 };
   });
 
   // Quick Action State
@@ -136,14 +144,14 @@ const App: React.FC = () => {
       setTimeout(() => {
         if (action === 'read') {
           addLog('INFO', `Quick Read detected tag: ${targetTag.epc}`);
-          handleMemoryRead(MemoryBank.EPC, 2, quickTestConfig.length, "00000000", targetTag.epc);
+          handleMemoryRead(MemoryBank.EPC, quickTestConfig.startAddress, quickTestConfig.length, "00000000", targetTag.epc);
         } else if (action === 'write') {
           // Set Flag to trigger verification read on success
           performingQuickWriteRef.current = true;
           verificationRetriesRef.current = 0; // Reset retries
 
           addLog('INFO', `Quick Write detected tag: ${targetTag.epc}`);
-          handleMemoryWrite(MemoryBank.EPC, 2, dataToWrite, "00000000", targetTag.epc);
+          handleMemoryWrite(MemoryBank.EPC, quickTestConfig.startAddress, dataToWrite, "00000000", targetTag.epc);
         }
       }, 200);
     }

components/QuickTestPanel.tsx

@@ -29,12 +29,12 @@ export const QuickTestPanel: React.FC<Props> = ({
 
   return (
     <div className="h-full flex flex-col items-center justify-center p-2 md:p-6 max-w-4xl mx-auto">
-      <div className="text-center mb-10">
+      <div className="hidden md:block text-center mb-10">
         <div className="inline-flex items-center justify-center p-3 bg-indigo-100 rounded-full mb-4">
           <Zap className="w-8 h-8 text-indigo-600" />
         </div>
         <h1 className="text-3xl font-bold text-slate-800 mb-2">Quick Test Mode</h1>
-        <p className="text-slate-500">
+        <p className="text-slate-500 hidden md:block">
           필드 내의 첫 번째 태그를 자동으로 감지하여 읽기 또는 쓰기 작업을 수행합니다.
         </p>
       </div>
@@ -114,7 +114,7 @@ export const QuickTestPanel: React.FC<Props> = ({
         </div>
 
         {/* Info / Config Card */}
-        <div className="flex flex-col justify-center space-y-6">
+        <div className="hidden md: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" />
@@ -127,7 +127,7 @@ export const QuickTestPanel: React.FC<Props> = ({
               </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>
+                <span className="font-bold text-slate-700">{config.startAddress} (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>
@@ -146,7 +146,7 @@ export const QuickTestPanel: React.FC<Props> = ({
               Note
             </h4>
             <p>
-              설정(길이, 포맷)을 변경하려면 <strong>Settings</strong> 탭으로 이동하세요.
+              설정(시작주소, 길이, 포맷)을 변경하려면 <strong>Settings</strong> 탭으로 이동하세요.
             </p>
           </div>
         </div>

components/SettingsPanel.tsx

@@ -38,7 +38,8 @@ export const SettingsPanel: React.FC<Props> = ({
   const [band, setBand] = useState<FrequencyBand>(FrequencyBand.US);
 
   // Quick Test Local State
-  const [qtLength, setQtLength] = useState<3 | 4>(4);
+  const [qtLength, setQtLength] = useState<number>(3);
+  const [qtStartAddress, setQtStartAddress] = useState<number>(2);
   const [qtFormat, setQtFormat] = useState<'hex' | 'ascii'>('hex');
 
   // Initialize form with reader info when available
@@ -58,6 +59,7 @@ export const SettingsPanel: React.FC<Props> = ({
   useEffect(() => {
     setQtLength(quickTestConfig.length);
     setQtFormat(quickTestConfig.format);
+    setQtStartAddress(quickTestConfig.startAddress);
   }, [quickTestConfig]);
 
   const handleApplyReaderSettings = () => {
@@ -74,7 +76,8 @@ export const SettingsPanel: React.FC<Props> = ({
   const handleSaveLocalSettings = () => {
     onSaveQuickTestConfig({
       length: qtLength,
-      format: qtFormat
+      format: qtFormat,
+      startAddress: qtStartAddress
     });
   };
 
@@ -310,27 +313,25 @@ export const SettingsPanel: React.FC<Props> = ({
           </p>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-6">
             <div className="space-y-3">
-              <label className="text-sm font-medium text-slate-600">Read/Write Length (Words)</label>
+              <label className="text-sm font-medium text-slate-600">Start Address (Word Offset)</label>
-              <div className="flex items-center gap-4">
-                <label className="flex items-center gap-2 cursor-pointer bg-white px-4 py-2 rounded-lg border border-indigo-100 shadow-sm">
               <input
-                    type="radio"
+                type="number"
-                    checked={qtLength === 3}
+                min={0}
-                    onChange={() => setQtLength(3)}
+                value={qtStartAddress}
-                    className="w-4 h-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
+                onChange={(e) => setQtStartAddress(parseInt(e.target.value) || 0)}
+                className="w-full bg-white border border-slate-300 rounded-lg px-3 py-2 text-slate-900 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"
               />
-                  <span className="text-sm text-slate-700">3 Words</span>
-                </label>
-                <label className="flex items-center gap-2 cursor-pointer bg-white px-4 py-2 rounded-lg border border-indigo-100 shadow-sm">
-                  <input
-                    type="radio"
-                    checked={qtLength === 4}
-                    onChange={() => setQtLength(4)}
-                    className="w-4 h-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
-                  />
-                  <span className="text-sm text-slate-700">4 Words</span>
-                </label>
             </div>
+
+            <div className="space-y-3">
+              <label className="text-sm font-medium text-slate-600">Read/Write Length (Words)</label>
+              <input
+                type="number"
+                min={1}
+                value={qtLength}
+                onChange={(e) => setQtLength(parseInt(e.target.value) || 1)}
+                className="w-full bg-white border border-slate-300 rounded-lg px-3 py-2 text-slate-900 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"
+              />
             </div>
 
             <div className="space-y-3">

types.ts

@@ -46,7 +46,8 @@ export interface LogEntry {
 }
 
 export interface QuickTestConfig {
-  length: 3 | 4;
+  startAddress: number;
+  length: number;
   format: 'hex' | 'ascii';
 }