Merge pull request #107 from 2skydev/feat/log-viewer-style

개발자 설정 > 로그 뷰어 스타일 보기 편하게 수정
2skydev · Oct 9, 2023 · 84c51f9 · 84c51f9
2 parents 0bb780f + 9c23ab3
commit 84c51f9
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 10 deletions.
diff --git a/src/main/modules/migration/migration.module.ts b/src/main/modules/migration/migration.module.ts
@@ -61,7 +61,7 @@ export class MigrationModule {
             await this[version]()
             log.info(`[Migration Module] Migrated to ${currentVersion}`)
           } catch (error) {
-            log.error(`[Migration Module] ${currentVersion}`, error)
+            log.error(`[Migration Module] ${currentVersion}\n`, error)
           }
         }
 

diff --git a/src/renderer/src/components/LogViewer/LogViewer.styled.ts b/src/renderer/src/components/LogViewer/LogViewer.styled.ts
@@ -21,6 +21,6 @@ export const Root = styled.div`
   }
 
   > .ant-divider {
-    margin: 1rem 0;
+    margin: 0.8rem 0 1rem;
   }
 `
diff --git a/src/renderer/src/components/LogViewer/LogViewer.tsx b/src/renderer/src/components/LogViewer/LogViewer.tsx
@@ -1,7 +1,10 @@
+import { useTranslation } from 'react-i18next'
 import { List } from 'react-virtualized'
 
 import { Divider } from 'antd'
 import clsx from 'clsx'
+import dayjs from 'dayjs'
+import { useTheme } from 'styled-components'
 
 import * as Styled from './LogViewer.styled'
 
@@ -11,24 +14,94 @@ export interface LogViewerProps {
   lines: string[]
 }
 
-const LogViewer = ({ className, path, lines }: LogViewerProps) => {
+const DATE_VIEW_WIDTH_LOCALES = {
+  ko_KR: '5rem',
+  en_US: '8rem',
+}
+
+const LogViewer = ({ className, path, lines: _lines }: LogViewerProps) => {
+  const { i18n } = useTranslation()
+
+  const {
+    colors: { red, orange },
+  } = useTheme()
+
+  const lines = _lines.toReversed()
+
+  const statusColors = {
+    error: red,
+    warn: orange,
+  }
+
+  const dateViewWidth = DATE_VIEW_WIDTH_LOCALES[i18n.language]
+
   return (
     <Styled.Root className={clsx('LogViewer', className)}>
       <div className="path selectable">{path}</div>
 
       <Divider />
 
-      {/* @ts-ignore */}
+      {/* @ts-ignore 라이브러리 내부 타입 오류 무시 */}
       <List
         width={500}
         height={300}
         rowCount={lines.length}
-        rowHeight={20}
-        rowRenderer={({ index, key, style }) => (
-          <pre className="selectable" key={key} style={style}>
-            {lines[index]}
-          </pre>
-        )}
+        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)\] /, '')
+
+          return (
+            <div
+              key={key}
+              style={{
+                ...style,
+                color,
+              }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                }}
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    height: '20px',
+                  }}
+                >
+                  <div className="selectable" style={{ width: dateViewWidth }}>
+                    {dayjs(date).fromNow()}
+                  </div>
+                  <Divider type="vertical" style={{ borderColor: color, margin: '0 .6rem' }} />
+                  <div className="selectable" style={{ width: '2.5rem' }}>
+                    {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 }}>
+                      {text}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )
+        }}
       />
     </Styled.Root>
   )