hotfix: 채팅 색상 테마 인식 범위 변경

kyechan99 · Dec 21, 2023 · 3e32883 · 3e32883
1 parent aeffa5a
commit 3e32883
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 22 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,17 +1,18 @@
 import "./App.css";
 
 import Logo from "../public/icon128.png";
-import URLButton from "./components/button/URLButton/URLButton";
+import { Select } from "./components/input/Select/Select";
 import Checkbox from "./components/input/Checkbox/Checkbox";
+import URLButton from "./components/button/URLButton/URLButton";
 import ColorPicker from "./components/input/ColorPicker/ColorPicker";
 
 import {
   BARRICADE,
   CHAT_COLOR_OPTIONS,
   CHAT_COLOR_THEME,
+  CHAT_NAME_COLOR,
+  CHAT_TEXT_COLOR,
 } from "./constants/storage";
-import { CHAT_NAME_COLOR, CHAT_TEXT_COLOR } from "./constants/data";
-import { Select } from "./components/input/Select/Select";
 
 function App() {
   return (

diff --git a/src/constants/color.ts b/src/constants/color.ts
@@ -1,4 +1,6 @@
 // 채팅 색상
+export const CHAT_NAME_COLOR_DEFAULT = "#697183";
+export const CHAT_TEXT_COLOR_DEFAULT = "#dfe2ea";
 export const themeColors = [
   "#D2691E",
   "#bfa86d",

diff --git a/src/constants/data.ts b/src/constants/data.ts
diff --git a/src/constants/storage.ts b/src/constants/storage.ts
@@ -8,3 +8,7 @@ export const CHAT_COLOR_OPTIONS: CHAT_COLOR_OPTION_TYPE[] = [
   "커스텀",
 ];
 export type CHAT_COLOR_OPTION_TYPE = "기본" | "테마" | "커스텀";
+export const CHAT_NAME_COLOR = "czp-chat-name";
+export const CHAT_TEXT_COLOR = "czp-chat-text";
+
+export const COLOR_PROPERTIES = [CHAT_NAME_COLOR, CHAT_TEXT_COLOR];
diff --git a/src/page/global.ts b/src/page/global.ts
@@ -1,15 +1,18 @@
+import Global from "../components/Global";
 import Preview from "../components/video/Preview/Preview";
 
 import { log } from "../utils/log";
 import { createReactElement } from "../utils/dom";
+
 import {
   CHAT_NAME_COLOR,
-  COLOR_PROPERTIES,
   CHAT_TEXT_COLOR,
+  COLOR_PROPERTIES,
+} from "../constants/storage";
+import {
   CHAT_NAME_COLOR_DEFAULT,
   CHAT_TEXT_COLOR_DEFAULT,
-} from "../constants/data";
-import Global from "../components/Global";
+} from "../constants/color";
 
 export const editGlobalPage = () => {
   // Feat: Preview 썸네일 =====================================================================

diff --git a/src/page/live.ts b/src/page/live.ts
@@ -1,20 +1,24 @@
 import Barricade from "../components/video/Barricade/Barricade";
 import PipButton from "../components/button/PipButton/PipButton";
 
+import { isLivePage } from "../utils/page";
+import { log, logError } from "../utils/log";
+import { getNameColor } from "../utils/color";
+import { createReactElement } from "../utils/dom";
+
 import {
   CHAT_CONTAINER,
   CHAT_CONTENT,
   CHAT_NAME,
   PLAYER_LAYOUT_ID,
   PLAYER_UI,
 } from "../constants/class";
-import { BARRICADE, CHAT_COLOR_THEME } from "../constants/storage";
-
-import { createReactElement } from "../utils/dom";
-import { isLivePage } from "../utils/page";
-import { log, logError } from "../utils/log";
-import { getNameColor } from "../utils/color";
-import { CHAT_NAME_COLOR, CHAT_TEXT_COLOR } from "../constants/data";
+import {
+  BARRICADE,
+  CHAT_COLOR_THEME,
+  CHAT_NAME_COLOR,
+  CHAT_TEXT_COLOR,
+} from "../constants/storage";
 
 export const editLivePage = () => {
   if (!isLivePage()) return;
@@ -43,7 +47,7 @@ export const editLivePage = () => {
   chrome.storage.local.get(BARRICADE, (res) => {
     if (res[BARRICADE] && !document.getElementById("chzzk-plus-barricade")) {
       // Pause 이벤트 막는 바리게이트 생성
-      const $playerUI = $playerLayout?.getElementsByClassName(PLAYER_UI)[0];
+      const $playerUI = $playerLayout.getElementsByClassName(PLAYER_UI)[0];
       if ($playerUI && $playerUI.parentNode) {
         const $barricade = document.createElement("div");
         $barricade.id = "chzzk-plus-barricade";
@@ -92,7 +96,7 @@ export const editLivePage = () => {
             }
           });
 
-          observer.observe(document.body, { childList: true, subtree: true });
+          observer.observe(chatContainer, { childList: true, subtree: true });
         } catch (err) {
           logError(err);
         }