modify app layout

src/pages/launcher/LauncherSourcePage.tsx

@@ -226,10 +226,34 @@ function DiffViewer({ diff }: { diff: string }) {
   const files = parseDiffFiles(diff);
 
   return (
-    <div className="max-h-[56vh] overflow-auto rounded-md border border-border bg-[#080b10] p-3 font-mono text-xs leading-5">
-      <div className="space-y-4">
+    <div className="grid max-h-[56vh] overflow-hidden rounded-md border border-border bg-[#080b10] text-xs leading-5 lg:grid-cols-[280px_minmax(0,1fr)]">
+      <aside className="border-b border-slate-700/80 bg-[#0b0f14] lg:border-b-0 lg:border-r">
+        <div className="border-b border-slate-700/80 bg-[#111827] px-3 py-2">
+          <p className="text-[12px] font-semibold text-slate-100">변경 파일</p>
+          <p className="mt-0.5 text-[11px] text-slate-400">총 {files.length}개</p>
+        </div>
+        <div className="max-h-44 overflow-y-auto p-2 lg:max-h-[calc(56vh-50px)]">
+          {files.map((file) => (
+            <button
+              key={`tree-${file.id}`}
+              type="button"
+              className="flex w-full items-start justify-between gap-2 rounded px-2 py-1.5 text-left text-slate-300 transition-colors hover:bg-slate-800/80 hover:text-slate-50"
+              onClick={() => document.getElementById(`diff-file-${file.id}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' })}
+              title={file.path}
+            >
+              <span className="min-w-0 flex-1 truncate font-mono text-[12px]">{file.path}</span>
+              <span className="flex shrink-0 items-center gap-1 font-mono text-[11px]">
+                <span className="text-emerald-300">+{file.added}</span>
+                <span className="text-rose-300">-{file.removed}</span>
+              </span>
+            </button>
+          ))}
+        </div>
+      </aside>
+      <div className="min-w-0 overflow-auto p-3 font-mono">
+        <div className="space-y-4">
         {files.map((file) => (
-          <section key={file.id} className="min-w-max overflow-hidden rounded-md border border-slate-700/80 bg-[#0b0f14]">
+          <section id={`diff-file-${file.id}`} key={file.id} className="min-w-max scroll-mt-3 overflow-hidden rounded-md border border-slate-700/80 bg-[#0b0f14]">
             <div className="sticky top-0 z-10 flex items-center justify-between gap-4 border-b border-slate-700/80 bg-[#111827] px-4 py-2">
               <div className="min-w-0">
                 <p className="truncate text-[13px] font-semibold text-slate-100">{file.path}</p>
@@ -249,6 +273,7 @@ function DiffViewer({ diff }: { diff: string }) {
             ))}
           </section>
         ))}
+        </div>
       </div>
     </div>
   );