Merge pull request #115 from 2skydev/dev

v0.0.23

Author: 2skydev

src/renderer/src/components/LogViewer/LogViewer.styled.ts

@@ -11,7 +11,7 @@ export const Root = styled.div`
     width: auto !important;
 
     .ReactVirtualized__Grid__innerScrollContainer {
-      overflow-x: auto !important;
+      overflow: initial !important;
       max-width: initial !important;
     }
   }

src/renderer/src/components/LogViewer/LogViewer.tsx

@@ -44,22 +44,23 @@ const LogViewer = ({ className, path, lines: _lines }: LogViewerProps) => {
       {/* @ts-ignore 라이브러리 내부 타입 오류 무시 */}
       <List
         width={500}
-        height={300}
+        height={280}
         rowCount={lines.length}
         rowHeight={({ index }) => {
           return 20 * lines[index].split('\n').length + 10
         }}
         rowRenderer={({ index, key, style }) => {
           let line = lines[index]
+
           const date = line.match(/^\[([0-9\-._:\s]+)\]/)?.[1]
           const status = line.match(
             /^\[[0-9\-._:\s]+\] \[(info|debug|log|warn|error|verbose)\]/,
           )?.[1]
 
           const color = statusColors[status!]
 
-          line = line.replace(/^\[[0-9\-._:\s]+\] /, '')
-          line = line.replace(/^\[(info|debug|log|warn|error|verbose)\] /, '')
+          line = line.replace(/^\[[0-9\-._:\s]+\]\s+/, '')
+          line = line.replace(/^\[(info|debug|log|warn|error|verbose)\]\s+/, '')
 
           return (
             <div
@@ -85,17 +86,17 @@ const LogViewer = ({ className, path, lines: _lines }: LogViewerProps) => {
                     {dayjs(date).fromNow()}
                   </div>
                   <Divider type="vertical" style={{ borderColor: color, margin: '0 .6rem' }} />
-                  <div className="selectable" style={{ width: '2.5rem' }}>
+                  <div className="selectable" style={{ width: '3.3rem' }}>
                     {status}
                   </div>
                   <Divider type="vertical" style={{ borderColor: color, margin: '0 .6rem' }} />
                 </div>
 
                 <div>
                   {line.split('\n').map((text, i) => (
-                    <div key={i} className="selectable" style={{ height: 20 }}>
+                    <pre key={i} className="selectable" style={{ height: 20 }}>
                       {text}
-                    </div>
+                    </pre>
                   ))}
                 </div>
               </div>

src/renderer/src/styles/init.ts

@@ -28,6 +28,11 @@ export const Init = memo(createGlobalStyle`
     border: 1px solid transparent;
   }
 
+  *::-webkit-scrollbar-corner,
+  *::-webkit-scrollbar-button {
+    display: none;
+  }
+
   *::selection {
     background: ${props => props.theme.colors.primary};
   }