추가 : 다크모드 지원 및 profile class 찾기

package.json

@@ -1,6 +1,6 @@
 {
   "name": "velog-extension",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.4",

src/assets/navButton.scss

@@ -7,11 +7,20 @@
     outline: none;
     border-radius: 50%;
     cursor: pointer;
-    margin-right: 0.75rem;
+    margin-right: 0.25rem;
 
     &:hover {
         background-color: #f4f4f4;
     }
+    &.dark-mode {
+        &:hover {
+            background-color: #353535;
+        }
+        .v-top-svg,
+        .v-notice-svg {
+            fill: #ECECEC;
+        }
+    }
 }
 
 .v-top-svg,

src/components/Button/Follow/FollowButton.scss

@@ -24,7 +24,7 @@
   /* 아직 팔로우 중이 아닌 상태 */
   &.follow {
     color: $primary; 
-    background-color: $white;
+    background-color: transparent;
     &:hover {
       color: $primary-hover; 
       background-color: #fcfffe;

src/components/Button/Notice/NoticeButton.tsx

@@ -4,7 +4,7 @@ import "@assets/navButton.scss";
 
 import { NoticeDisplay } from "@components/Display/Notice/NoticeDisplay";
 
-export const NoticeButton = () => {
+export const NoticeButton = ({ darkMode } : { darkMode : boolean }) => {
   const [showNoticeDisplay, setShow] = React.useState(false);
 
   const onClick = () => {
@@ -13,7 +13,7 @@ export const NoticeButton = () => {
 
   return (
     <>
-    <button className='v-notice-button' onClick={onClick}>
+    <button className={`v-notice-button ${darkMode ? 'dark-mode' : ''}`}  onClick={onClick}>
       <svg className='v-notice-svg' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17">
         <path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"></path>
         <path fill-rule="evenodd" d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z"></path>

src/components/Button/TopButton/TopButton.tsx

@@ -1,19 +1,17 @@
 import "@assets/navButton.scss";
 
-export const TopButton = () => {
+export const TopButton = ({ darkMode } : { darkMode : boolean }) => {
 
   const onClick = () => {
     // window.scrollTo(0, 0);
     window.scroll({top: 0, left: 0, behavior: 'smooth' });
   };
 
   return (
-    <>
-    <button className='v-top-button' onClick={onClick}>
-      <svg className='v-top-svg' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17">
+    <button className={`v-top-button ${darkMode ? 'dark-mode' : ''}`} onClick={onClick}>
+      <svg className='v-top-svg' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
         <path fill-rule="evenodd" d="M18.655 10.405a.75.75 0 000-1.06l-6.25-6.25a.75.75 0 00-1.06 0l-6.25 6.25a.75.75 0 101.06 1.06l4.97-4.97v14.44a.75.75 0 001.5 0V5.435l4.97 4.97a.75.75 0 001.06 0z"></path>
       </svg>
     </button>
-    </>
   );
 };

src/content.tsx

@@ -33,19 +33,19 @@ const createFollowApp = async () => {
   const followApp = document.createElement("div");
   followApp.id = "v-follow-app"
 
-
-  // 프로필 설명 (이름, 소개말) 공간
-  let profileHeader = document.getElementsByClassName("sc-hZSUBg dBpWKY");
-  if (profileHeader.length == 0)
-    profileHeader = document.getElementsByClassName("sc-kgAjT jTAWUQ");
-  profileHeader[0]?.append(followApp);
+
+  // 이름 Div 찾기, 부모가 소개말이며 그 부모가 전체 프로필이 됨
+  const nameDiv = document.getElementsByClassName('name')[0];
 
 
   // 이름, 소개말 공간
-  let profileDesc = document.getElementsByClassName("sc-cMhqgX eGVHys");
-  if (profileDesc.length == 0)
-    profileDesc = document.getElementsByClassName("sc-cJSrbW bYKohe");
-  profileDesc[0]?.setAttribute("style", "width: 100%;")
+  let profileDesc = nameDiv?.parentElement;
+  profileDesc?.setAttribute("style", "width: 100%;")
+
+
+  // 프로필 설명 (이름, 소개말) 공간
+  let profileHeader = profileDesc?.parentElement;
+  profileHeader?.append(followApp);
 
 
   // 팔로우 버튼 그려줌
@@ -83,15 +83,20 @@ const createNoticeApp = async () => {
 
   // Navbar 우측 사이드 (프로필 및 아이콘 기능)
   //  - Velog 는 navbar 를 두개 사용함. (고정용 | 스크롤용)
-  const navbarRightSide = document.getElementsByClassName("sc-jKJlTe hoxhZc");
+  let navbarRightSide = document.getElementsByClassName("sc-iwjdpV ajzPu");
+  if (navbarRightSide.length == 0)
+    navbarRightSide = document.getElementsByClassName('sc-iwjdpV gQLlod');
   if (!navbarRightSide) return;
   navbarRightSide[0]?.prepend(noticeApp);   // 고정 navbar
   navbarRightSide[1]?.prepend(navApp);   // 스크롤 했을때 뜨는 navbar
 
-
+  let isDark = false;
+  if (localStorage.getItem('theme') == '\"dark\"')
+    isDark = true;
+
   // 알림 버튼 그려줌
-  ReactDOM.render(<NoticeButton/>, noticeApp);
-  ReactDOM.render(<TopButton/>, navApp);
+  ReactDOM.render(<NoticeButton darkMode={isDark}/>, noticeApp);
+  ReactDOM.render(<TopButton darkMode={isDark}/>, navApp);
 
 
   // 3초후에 재확인함.