From 542638f4d43bce6fb9cfa0cd39aa506ca3866ef9 Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Sun, 22 Mar 2026 23:20:08 +0900
Subject: [PATCH 01/23] =?UTF-8?q?fix:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20ui?=
 =?UTF-8?q?=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EB=B2=84=EA=B7=B8=20=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/popup/index.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/pages/popup/index.css b/src/pages/popup/index.css
index 07af1a2..738f9aa 100644
--- a/src/pages/popup/index.css
+++ b/src/pages/popup/index.css
@@ -68,6 +68,11 @@ button {
 .popup-container .funcList {
   padding: 0.5em;
   max-width: 240px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
 }
 
 /* 토글 스위치 스타일 */
@@ -121,10 +126,6 @@ button {
   margin-top: 3px;
 }
 
-.popup-container .funcList li {
-  margin: 0 auto;
-}
-
 .btnWrapper button {
   padding: 4px 20px;
   border-radius: 3px;

From 50b10e779bec9f29528d03fe15efc3f78423f48f Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Sun, 22 Mar 2026 23:28:00 +0900
Subject: [PATCH 02/23] =?UTF-8?q?refactor:=20=EA=B8=B0=EB=8A=A5=EC=97=90?=
 =?UTF-8?q?=20=EB=8C=80=ED=95=9C=20=ED=85=8D=EC=8A=A4=ED=8A=B8,=20?=
 =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=20=EB=8D=B0=EC=9D=B4=ED=84=B0?=
 =?UTF-8?q?=EB=A5=BC=20=EC=9D=BC=EC=9B=90=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/content/injected/statusIndicator.ts | 21 ++++++++-----
 src/pages/popup/components/FuncList.tsx       | 30 +++++++------------
 src/shared/config/features.ts                 | 13 ++++++++
 3 files changed, 38 insertions(+), 26 deletions(-)
 create mode 100644 src/shared/config/features.ts

diff --git a/src/pages/content/injected/statusIndicator.ts b/src/pages/content/injected/statusIndicator.ts
index 273595c..bf38a3f 100644
--- a/src/pages/content/injected/statusIndicator.ts
+++ b/src/pages/content/injected/statusIndicator.ts
@@ -1,5 +1,6 @@
 import { $, create$ } from '@root/utils/dom/utilDOM';
 import { AltTag, Command, ImageScale, SEO, TextCounter } from '@pages/content/injected/components/SVG';
+import { FEATURES } from '@src/shared/config/features';
 
 interface FunctionStatus {
   id: string;
@@ -8,15 +9,21 @@ interface FunctionStatus {
   enabled: boolean;
 }
 
+const FEATURE_ICONS: Record<string, string> = {
+  func_0: Command,
+  func_1: AltTag,
+  func_2: ImageScale,
+  func_3: TextCounter,
+  func_4: SEO,
+};
+
 const statusIndicator = async () => {
   // 기능 정의
-  const functions: Omit<FunctionStatus, 'enabled'>[] = [
-    { id: 'func_0', name: chrome.i18n.getMessage('feature_extra_shortcuts'), icon: Command },
-    { id: 'func_1', name: chrome.i18n.getMessage('feature_alt_tagger'), icon: AltTag },
-    { id: 'func_2', name: chrome.i18n.getMessage('feature_image_resizer'), icon: ImageScale },
-    { id: 'func_3', name: chrome.i18n.getMessage('feature_text_counter'), icon: TextCounter },
-    { id: 'func_4', name: chrome.i18n.getMessage('feature_seo_checker'), icon: SEO },
-  ];
+  const functions: Omit<FunctionStatus, 'enabled'>[] = FEATURES.map(f => ({
+    id: f.key,
+    name: chrome.i18n.getMessage(f.messageKey),
+    icon: FEATURE_ICONS[f.key],
+  }));
 
   // 컨테이너 스타일
   const containerStyle = {
diff --git a/src/pages/popup/components/FuncList.tsx b/src/pages/popup/components/FuncList.tsx
index 1b190c5..c8a276c 100644
--- a/src/pages/popup/components/FuncList.tsx
+++ b/src/pages/popup/components/FuncList.tsx
@@ -1,24 +1,17 @@
 import { useState, useEffect } from 'react';
 import { getMessage, getAriaLabel } from '@src/shared/utils/i18n';
 import NewBadge from './NewBadge';
-
-interface FunctionItem {
-  name: string;
-  isNew?: boolean;
-}
+import { FEATURES } from '@src/shared/config/features';
 
 const FuncList = () => {
-  const funcList: FunctionItem[] = [
-    { name: getMessage('feature_extra_shortcuts'), isNew: false },
-    { name: getMessage('feature_alt_tagger'), isNew: false },
-    { name: getMessage('feature_image_resizer'), isNew: false },
-    { name: getMessage('feature_text_counter'), isNew: false },
-    { name: getMessage('feature_seo_checker'), isNew: true },
-  ];
+  const funcList = FEATURES.map(f => ({
+    key: f.key,
+    name: getMessage(f.messageKey),
+    isNew: f.isNew,
+  }));
   const [checkedList, setCheckedList] = useState<Record<string, boolean>>({});
 
-  const onChangeCheckBox = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
-    const funcKey: string = `func_${index}`;
+  const onChangeCheckBox = (event: React.ChangeEvent<HTMLInputElement>, funcKey: string) => {
     const target = event.target as HTMLInputElement;
 
     setCheckedList(prev => {
@@ -29,7 +22,7 @@ const FuncList = () => {
   };
 
   const loadPreChecked = (): void => {
-    const arr = funcList.map((_, i) => `func_${i}`);
+    const arr = funcList.map(f => f.key);
     chrome.storage.local.get(arr, result => {
       setCheckedList(result);
     });
@@ -43,16 +36,15 @@ const FuncList = () => {
     <div>
       <ul className="funcList">
         {funcList.map((func, i) => {
-          const key = `func_${i}`;
           const checkboxId = `feature-checkbox-${i}`;
 
           return (
-            <li key={i}>
+            <li key={func.key}>
               <input
                 type="checkbox"
                 id={checkboxId}
-                checked={checkedList[key] || false}
-                onChange={event => onChangeCheckBox(event, i)}
+                checked={checkedList[func.key] || false}
+                onChange={event => onChangeCheckBox(event, func.key)}
                 aria-label={getMessage('aria_feature_toggle', [func.name])}
               />
               <label htmlFor={checkboxId}>
diff --git a/src/shared/config/features.ts b/src/shared/config/features.ts
new file mode 100644
index 0000000..7dfbc49
--- /dev/null
+++ b/src/shared/config/features.ts
@@ -0,0 +1,13 @@
+export interface FeatureConfig {
+  key: string;
+  messageKey: string;
+  isNew: boolean;
+}
+
+export const FEATURES: FeatureConfig[] = [
+  { key: 'func_0', messageKey: 'feature_extra_shortcuts', isNew: false },
+  { key: 'func_1', messageKey: 'feature_alt_tagger', isNew: false },
+  { key: 'func_2', messageKey: 'feature_image_resizer', isNew: false },
+  { key: 'func_3', messageKey: 'feature_text_counter', isNew: false },
+  { key: 'func_4', messageKey: 'feature_seo_checker', isNew: true },
+];

From 996e5b96fca2dc09949b8c3e8be3736132c1ffbb Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Sun, 22 Mar 2026 23:38:54 +0900
Subject: [PATCH 03/23] chore: version upgrade

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4820e51..43132ba 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chrome-extension-boilerplate-react-vite",
-  "version": "1.6.3",
+  "version": "1.7.3",
   "description": "티스토리 확장프로그램 StoryHelper",
   "license": "MIT",
   "repository": {

From e397b5149e37ed8643a3b08ec7a5aaeb0e31381b Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Sun, 22 Mar 2026 23:40:28 +0900
Subject: [PATCH 04/23] =?UTF-8?q?refactor:=20=EA=B8=B0=EC=A1=B4=20status?=
 =?UTF-8?q?=20Indicato=EB=A5=BC=20=EB=A6=AC=EC=95=A1=ED=8A=B8=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 manifest.js                              |   6 +-
 src/pages/content/injected/index.ts      |   2 -
 src/pages/content/ui/StatusIndicator.tsx | 123 +++++++++++++++++++
 src/pages/content/ui/app.tsx             |   8 +-
 src/pages/content/ui/injected.css        | 150 +++++++++++++++++++++++
 src/pages/popup/components/FuncList.tsx  |  17 ++-
 6 files changed, 283 insertions(+), 23 deletions(-)
 create mode 100644 src/pages/content/ui/StatusIndicator.tsx

diff --git a/manifest.js b/manifest.js
index 570f479..aa062c3 100755
--- a/manifest.js
+++ b/manifest.js
@@ -34,15 +34,11 @@ const manifest = {
   content_scripts: [
     {
       matches: ['https://*.tistory.com/manage/newpost/*', 'https://*.tistory.com/manage/page?returnURL=/manage/pages'],
-      js: ['src/pages/contentInjected/index.js'],
+      js: ['src/pages/contentInjected/index.js', 'src/pages/contentUI/index.js'],
       // KEY for cache invalidation
       css: ['assets/css/contentStyle<KEY>.chunk.css'],
       all_frames: true,
     },
-    // {
-    //   matches: ['http://*/*', 'https://*/*', '<all_urls>'],
-    //   js: ['src/pages/contentUI/index.js'],
-    // },
   ],
   web_accessible_resources: [
     {
diff --git a/src/pages/content/injected/index.ts b/src/pages/content/injected/index.ts
index 49b4904..52f92f7 100644
--- a/src/pages/content/injected/index.ts
+++ b/src/pages/content/injected/index.ts
@@ -3,7 +3,6 @@ import textCounter from '@pages/content/injected/textCounter';
 import altTager from '@pages/content/injected/altTager';
 import imageSize from '@pages/content/injected/imageSize';
 import checkSEO from '@pages/content/injected/checkSEO';
-import statusIndicator from '@pages/content/injected/statusIndicator';
 
 (async () => {
   await keyMapping();
@@ -11,7 +10,6 @@ import statusIndicator from '@pages/content/injected/statusIndicator';
   await altTager();
   await checkSEO();
   await textCounter();
-  await statusIndicator();
 })();
 
 console.log('StoryHelper Load Complete');
diff --git a/src/pages/content/ui/StatusIndicator.tsx b/src/pages/content/ui/StatusIndicator.tsx
new file mode 100644
index 0000000..c9c2aae
--- /dev/null
+++ b/src/pages/content/ui/StatusIndicator.tsx
@@ -0,0 +1,123 @@
+import { useState, useEffect, useCallback } from 'react';
+import { FEATURES } from '@src/shared/config/features';
+import { AltTag, Command, ImageScale, SEO, TextCounter } from '@pages/content/injected/components/SVG';
+
+const FEATURE_ICONS: Record<string, string> = {
+  func_0: Command,
+  func_1: AltTag,
+  func_2: ImageScale,
+  func_3: TextCounter,
+  func_4: SEO,
+};
+
+const features = FEATURES.map(f => ({
+  id: f.key,
+  name: chrome.i18n.getMessage(f.messageKey),
+  icon: FEATURE_ICONS[f.key],
+}));
+
+export default function StatusIndicator() {
+  const [enabledMap, setEnabledMap] = useState<Record<string, boolean>>({});
+  const [isMinimized, setIsMinimized] = useState(false);
+  const [tooltip, setTooltip] = useState<string | null>(null);
+
+  useEffect(() => {
+    const keys = features.map(f => f.id);
+    chrome.storage.local.get([...keys, 'statusIndicator_minimized'], result => {
+      const map: Record<string, boolean> = {};
+      keys.forEach(k => {
+        map[k] = result[k] === true;
+      });
+      setEnabledMap(map);
+      setIsMinimized(result.statusIndicator_minimized === true);
+    });
+
+    const listener = (changes: Record<string, chrome.storage.StorageChange>, namespace: string) => {
+      if (namespace !== 'local') return;
+      const updated: Record<string, boolean> = {};
+      Object.keys(changes).forEach(key => {
+        if (key.startsWith('func_')) {
+          updated[key] = changes[key].newValue === true;
+        }
+      });
+      if (Object.keys(updated).length > 0) {
+        setEnabledMap(prev => ({ ...prev, ...updated }));
+      }
+    };
+
+    chrome.storage.onChanged.addListener(listener);
+    return () => chrome.storage.onChanged.removeListener(listener);
+  }, []);
+
+  const toggleFeature = useCallback(
+    async (id: string) => {
+      const newValue = !enabledMap[id];
+      await chrome.storage.local.set({ [id]: newValue });
+      setEnabledMap(prev => ({ ...prev, [id]: newValue }));
+    },
+    [enabledMap],
+  );
+
+  const minimize = useCallback(async () => {
+    await chrome.storage.local.set({ statusIndicator_minimized: true });
+    setIsMinimized(true);
+  }, []);
+
+  const expand = useCallback(async () => {
+    await chrome.storage.local.set({ statusIndicator_minimized: false });
+    setIsMinimized(false);
+  }, []);
+
+  if (isMinimized) {
+    return (
+      <button
+        type="button"
+        className="si-minimized"
+        onClick={expand}
+        title={chrome.i18n.getMessage('tooltip_statusbar')}>
+        <img src={chrome.runtime.getURL('icon-128.png')} alt="StoryHelper Logo" className="si-logo" />
+      </button>
+    );
+  }
+
+  return (
+    <div className="si-container">
+      <div className="si-header">
+        <img src={chrome.runtime.getURL('icon-128.png')} alt="StoryHelper Logo" className="si-logo" />
+        <span title={chrome.i18n.getMessage('tooltip_more_options')}>StoryHelper</span>
+      </div>
+
+      {features.map(func => {
+        const enabled = enabledMap[func.id] ?? false;
+        const statusText = chrome.i18n.getMessage(enabled ? 'ui_status_enabled' : 'ui_status_disabled');
+
+        return (
+          <div
+            key={func.id}
+            className="si-icon-wrapper"
+            onMouseEnter={() => setTooltip(func.id)}
+            onMouseLeave={() => setTooltip(null)}>
+            <button
+              type="button"
+              className={`si-icon ${enabled ? 'si-icon--enabled' : 'si-icon--disabled'}`}
+              onClick={() => toggleFeature(func.id)}
+              dangerouslySetInnerHTML={{ __html: func.icon }}
+            />
+            {tooltip === func.id && (
+              <div className="si-tooltip">
+                <strong>{func.name}</strong>
+                <br />
+                <span style={{ color: enabled ? '#4CAF50' : '#f44336', fontSize: '11px' }}>● {statusText}</span>
+                <div className="si-tooltip-arrow" />
+              </div>
+            )}
+          </div>
+        );
+      })}
+
+      <button type="button" className="si-toggle-btn" onClick={minimize}>
+        ◀
+      </button>
+    </div>
+  );
+}
diff --git a/src/pages/content/ui/app.tsx b/src/pages/content/ui/app.tsx
index f732ea4..f81cf6d 100644
--- a/src/pages/content/ui/app.tsx
+++ b/src/pages/content/ui/app.tsx
@@ -1,9 +1,5 @@
-import { useEffect } from 'react';
+import StatusIndicator from './StatusIndicator';
 
 export default function App() {
-  useEffect(() => {
-    console.log('content view loaded');
-  }, []);
-
-  return <div className="">content view</div>;
+  return <StatusIndicator />;
 }
diff --git a/src/pages/content/ui/injected.css b/src/pages/content/ui/injected.css
index e69de29..1524f28 100644
--- a/src/pages/content/ui/injected.css
+++ b/src/pages/content/ui/injected.css
@@ -0,0 +1,150 @@
+.si-container {
+  position: fixed;
+  bottom: 80px;
+  left: 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  z-index: 9998;
+  background-color: rgba(255, 255, 255, 0.95);
+  padding: 8px 12px;
+  border-radius: 12px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+.si-minimized,
+.si-icon,
+.si-toggle-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  outline: inherit;
+}
+
+.si-minimized {
+  position: fixed;
+  bottom: 80px;
+  left: 20px;
+  z-index: 9998;
+  padding: 8px;
+  cursor: pointer;
+}
+
+.si-minimized .si-logo {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+  transition: transform 0.2s ease;
+}
+
+.si-minimized:hover .si-logo {
+  transform: scale(1.1);
+}
+
+.si-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: bold;
+  color: #666;
+  margin-right: 8px;
+  padding-right: 8px;
+  border-right: 1px solid #ddd;
+}
+
+.si-logo {
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+}
+
+.si-icon-wrapper {
+  position: relative;
+}
+
+.si-icon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  font-size: 18px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: #325e4b;
+}
+
+.si-icon--enabled {
+  background-color: #f0f7ff;
+  border: 1px solid #4a90e2;
+  opacity: 0.9;
+}
+
+.si-icon--enabled:hover {
+  background-color: #e8f2ff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(74, 144, 226, 0.2);
+}
+
+.si-icon--disabled {
+  background-color: #f5f5f5;
+  border: 1px solid #ddd;
+  opacity: 0.3;
+}
+
+.si-icon--disabled:hover {
+  background-color: #f0f0f0;
+}
+
+.si-tooltip {
+  position: absolute;
+  bottom: 110%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.9);
+  color: white;
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 10000;
+}
+
+.si-tooltip-arrow {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid rgba(0, 0, 0, 0.9);
+}
+
+.si-toggle-btn {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  font-size: 14px;
+  cursor: pointer;
+  margin-left: 8px;
+  transition: all 0.2s ease;
+}
+
+.si-toggle-btn:hover {
+  background-color: #f0f0f0;
+  transform: scale(1.1);
+}
diff --git a/src/pages/popup/components/FuncList.tsx b/src/pages/popup/components/FuncList.tsx
index c8a276c..b087126 100644
--- a/src/pages/popup/components/FuncList.tsx
+++ b/src/pages/popup/components/FuncList.tsx
@@ -3,12 +3,13 @@ import { getMessage, getAriaLabel } from '@src/shared/utils/i18n';
 import NewBadge from './NewBadge';
 import { FEATURES } from '@src/shared/config/features';
 
+const funcList = FEATURES.map(f => ({
+  key: f.key,
+  name: getMessage(f.messageKey),
+  isNew: f.isNew,
+}));
+
 const FuncList = () => {
-  const funcList = FEATURES.map(f => ({
-    key: f.key,
-    name: getMessage(f.messageKey),
-    isNew: f.isNew,
-  }));
   const [checkedList, setCheckedList] = useState<Record<string, boolean>>({});
 
   const onChangeCheckBox = (event: React.ChangeEvent<HTMLInputElement>, funcKey: string) => {
@@ -21,15 +22,11 @@ const FuncList = () => {
     chrome.storage.local.set({ [funcKey]: target.checked });
   };
 
-  const loadPreChecked = (): void => {
+  useEffect(() => {
     const arr = funcList.map(f => f.key);
     chrome.storage.local.get(arr, result => {
       setCheckedList(result);
     });
-  };
-
-  useEffect(() => {
-    loadPreChecked();
   }, []);
 
   return (

From fde2f1495bde60bf7035a65fb303a4866d5caee3 Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Sun, 22 Mar 2026 23:45:59 +0900
Subject: [PATCH 05/23] =?UTF-8?q?feat:=20=EA=B8=B0=EB=8A=A5=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=EC=97=90=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20?=
 =?UTF-8?q?=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/_locales/en/messages.json | 4 ++++
 public/_locales/ko/messages.json | 4 ++++
 src/shared/config/features.ts    | 3 ++-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 60898de..b202bc9 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -103,6 +103,10 @@
     "description": "SEO optimization checker feature",
     "message": "SEO Optimization Checker (v1.5)"
   },
+  "feature_preview_side_view": {
+    "description": "Preview side view feature",
+    "message": "Preview Side View (v1.7)"
+  },
   "shortcut_publish": {
     "description": "Publish post shortcut",
     "message": "Publish Post"
diff --git a/public/_locales/ko/messages.json b/public/_locales/ko/messages.json
index 72413f2..0ce3c78 100644
--- a/public/_locales/ko/messages.json
+++ b/public/_locales/ko/messages.json
@@ -103,6 +103,10 @@
     "description": "SEO 최적화 검증 기능",
     "message": "SEO 최적화 검증기능 (v1.5)"
   },
+  "feature_preview_side_view": {
+    "description": "미리보기 사이드뷰 기능",
+    "message": "미리보기 사이드뷰 (v1.7)"
+  },
   "shortcut_publish": {
     "description": "글 발행 단축키",
     "message": "글 발행"
diff --git a/src/shared/config/features.ts b/src/shared/config/features.ts
index 7dfbc49..3fdab90 100644
--- a/src/shared/config/features.ts
+++ b/src/shared/config/features.ts
@@ -9,5 +9,6 @@ export const FEATURES: FeatureConfig[] = [
   { key: 'func_1', messageKey: 'feature_alt_tagger', isNew: false },
   { key: 'func_2', messageKey: 'feature_image_resizer', isNew: false },
   { key: 'func_3', messageKey: 'feature_text_counter', isNew: false },
-  { key: 'func_4', messageKey: 'feature_seo_checker', isNew: true },
+  { key: 'func_4', messageKey: 'feature_seo_checker', isNew: false },
+  { key: 'func_5', messageKey: 'feature_preview_side_view', isNew: true },
 ];

From 0abbff6b95eb77e5bf6f65be7456b5fd71991358 Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Sun, 22 Mar 2026 23:47:59 +0900
Subject: [PATCH 06/23] chore: update gitignore

---
 .gitignore | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 2e1d691..99243e8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,4 +19,6 @@ public/manifest.json
 
 CLAUDE.md
 
-/DOCS
\ No newline at end of file
+/DOCS
+
+.claude/
\ No newline at end of file

From a944f5ecd7402987a46886042f4a6307d002ee78 Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Sun, 22 Mar 2026 23:53:09 +0900
Subject: [PATCH 07/23] =?UTF-8?q?chore:=20mcp=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .mcp.json | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .mcp.json

diff --git a/.mcp.json b/.mcp.json
new file mode 100644
index 0000000..259a959
--- /dev/null
+++ b/.mcp.json
@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": ["@playwright/mcp@latest"]
+    }
+  }
+}

From c3d2ff74fdf7c5486054999c2f18d1458066d401 Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Mon, 23 Mar 2026 23:40:07 +0900
Subject: [PATCH 08/23] =?UTF-8?q?chore:=20=EB=B2=84=EC=A0=84=20=EC=9E=98?=
 =?UTF-8?q?=EB=AA=BB=EC=98=AC=EB=A6=BC=20=E3=85=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 43132ba..ceef7c9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chrome-extension-boilerplate-react-vite",
-  "version": "1.7.3",
+  "version": "1.7.0",
   "description": "티스토리 확장프로그램 StoryHelper",
   "license": "MIT",
   "repository": {

From 42f9fa4b72ea213a6b6d589e389192e180c79333 Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Mon, 23 Mar 2026 23:49:06 +0900
Subject: [PATCH 09/23] =?UTF-8?q?feat:=20=EC=84=A4=EC=B9=98=20=EC=8B=9C=20?=
 =?UTF-8?q?=EC=86=8C=EA=B0=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=99=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/background/index.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/pages/background/index.ts b/src/pages/background/index.ts
index 7c8a462..cbea2f1 100644
--- a/src/pages/background/index.ts
+++ b/src/pages/background/index.ts
@@ -3,6 +3,12 @@ import 'webextension-polyfill';
 
 chrome.runtime.setUninstallURL('https://storyhelper.shipfriend.dev/feedback');
 
+chrome.runtime.onInstalled.addListener(details => {
+  if (details.reason === 'install') {
+    chrome.tabs.create({ url: 'https://storyhelper.shipfriend.dev/introduce' });
+  }
+});
+
 reloadOnUpdate('pages/background');
 
 /**

From d9175602e3fa7207652e2f597923b7a7c9dbab0b Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Fri, 27 Mar 2026 00:29:50 +0900
Subject: [PATCH 10/23] =?UTF-8?q?feat:=20demo=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/_locales/en/messages.json              |   8 +
 public/_locales/ko/messages.json              |   8 +
 src/pages/content/injected/index.ts           |   2 +
 src/pages/content/injected/previewSideView.ts | 348 ++++++++++++++++++
 4 files changed, 366 insertions(+)
 create mode 100644 src/pages/content/injected/previewSideView.ts

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index b202bc9..548a83c 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -227,6 +227,14 @@
     "description": "Image size bulk edit prompt",
     "message": "Resize all images in the content:"
   },
+  "menu_side_view_on": {
+    "description": "Side view activate menu text",
+    "message": "Preview Side View"
+  },
+  "menu_side_view_off": {
+    "description": "Side view deactivate menu text",
+    "message": "Close Side View"
+  },
   "tooltip_alt_tag_editor": {
     "description": "Alt tag editor tooltip",
     "message": "Edit Alt Tag"
diff --git a/public/_locales/ko/messages.json b/public/_locales/ko/messages.json
index 0ce3c78..c696976 100644
--- a/public/_locales/ko/messages.json
+++ b/public/_locales/ko/messages.json
@@ -227,6 +227,14 @@
     "description": "이미지 크기 일괄 수정 프롬프트",
     "message": "본문의 이미지의 크기를 모두 수정합니다:"
   },
+  "menu_side_view_on": {
+    "description": "사이드뷰 활성화 메뉴 텍스트",
+    "message": "미리보기 사이드뷰"
+  },
+  "menu_side_view_off": {
+    "description": "사이드뷰 비활성화 메뉴 텍스트",
+    "message": "사이드뷰 닫기"
+  },
   "tooltip_alt_tag_editor": {
     "description": "Alt 태그 수정 툴팁",
     "message": "Alt 태그 수정"
diff --git a/src/pages/content/injected/index.ts b/src/pages/content/injected/index.ts
index 52f92f7..7591aa7 100644
--- a/src/pages/content/injected/index.ts
+++ b/src/pages/content/injected/index.ts
@@ -3,6 +3,7 @@ import textCounter from '@pages/content/injected/textCounter';
 import altTager from '@pages/content/injected/altTager';
 import imageSize from '@pages/content/injected/imageSize';
 import checkSEO from '@pages/content/injected/checkSEO';
+import previewSideView from '@pages/content/injected/previewSideView';
 
 (async () => {
   await keyMapping();
@@ -10,6 +11,7 @@ import checkSEO from '@pages/content/injected/checkSEO';
   await altTager();
   await checkSEO();
   await textCounter();
+  await previewSideView();
 })();
 
 console.log('StoryHelper Load Complete');
diff --git a/src/pages/content/injected/previewSideView.ts b/src/pages/content/injected/previewSideView.ts
new file mode 100644
index 0000000..fe9ea3c
--- /dev/null
+++ b/src/pages/content/injected/previewSideView.ts
@@ -0,0 +1,348 @@
+import { $, create$ } from '@root/utils/dom/utilDOM';
+
+// const WRAPPER_ID = 'sh-side-view-wrapper'; // reserved for future use
+const PANEL_ID = 'sh-preview-panel';
+const PANEL_IFRAME_ID = 'sh-preview-iframe';
+const MENU_ITEM_ID = 'sh-side-view-menu-item';
+const TOOLBAR_BTN_ID = 'sh-side-view-toolbar-btn';
+
+let sideViewActive = false;
+let modalObserver: MutationObserver | null = null;
+let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+let editorInputHandler: (() => void) | null = null;
+
+// ── 에디터 입력 감지 ──────────────────────────────────────────────
+
+function attachEditorListener() {
+  const iframe = document.getElementById('editor-tistory_ifr') as HTMLIFrameElement | null;
+  if (!iframe) return;
+
+  const tryAttach = () => {
+    const editorBody = iframe.contentDocument?.body;
+    if (!editorBody) return;
+
+    editorInputHandler = () => {
+      if (debounceTimer) clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(loadPreview, 1500);
+    };
+    editorBody.addEventListener('input', editorInputHandler);
+  };
+
+  // iframe이 이미 로드된 경우
+  if (iframe.contentDocument?.readyState === 'complete') {
+    tryAttach();
+  } else {
+    // 아직 로드 중이면 load 이벤트 후 부착
+    iframe.addEventListener('load', tryAttach, { once: true });
+  }
+}
+
+function detachEditorListener() {
+  if (debounceTimer) {
+    clearTimeout(debounceTimer);
+    debounceTimer = null;
+  }
+
+  const iframe = document.getElementById('editor-tistory_ifr') as HTMLIFrameElement | null;
+  const editorBody = iframe?.contentDocument?.body;
+  if (editorBody && editorInputHandler) {
+    editorBody.removeEventListener('input', editorInputHandler);
+  }
+  editorInputHandler = null;
+}
+
+// ── 패널 내부 구조 ────────────────────────────────────────────────
+
+function buildPreviewPanel(): HTMLElement {
+  const panel = create$('div', {
+    id: PANEL_ID,
+    style: {
+      flex: '0 0 50%',
+      maxWidth: '50%',
+      minWidth: '0',
+      borderLeft: '2px solid #e8e8e8',
+      display: 'flex',
+      flexDirection: 'column',
+      boxSizing: 'border-box',
+      backgroundColor: '#f9f9f9',
+    },
+  });
+
+  // 헤더
+  const header = create$('div', {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: '8px 14px',
+      borderBottom: '1px solid #e0e0e0',
+      backgroundColor: '#fff',
+      flexShrink: '0',
+    },
+  });
+
+  const title = create$('span', {
+    textContent: '미리보기',
+    style: { fontSize: '13px', fontWeight: 'bold', color: '#333' },
+  });
+
+  const refreshBtn = create$('button', {
+    textContent: '새로고침',
+    style: {
+      fontSize: '12px',
+      padding: '4px 10px',
+      border: '1px solid #ccc',
+      borderRadius: '4px',
+      backgroundColor: '#fff',
+      cursor: 'pointer',
+      color: '#555',
+    },
+  });
+  refreshBtn.addEventListener('click', loadPreview);
+
+  header.appendChild(title);
+  header.appendChild(refreshBtn);
+
+  // iframe
+  const iframe = create$('iframe', {
+    id: PANEL_IFRAME_ID,
+    attributes: { sandbox: 'allow-scripts allow-same-origin' },
+    style: {
+      flex: '1',
+      width: '100%',
+      border: 'none',
+      minHeight: '600px',
+    },
+  });
+
+  panel.appendChild(header);
+  panel.appendChild(iframe);
+  return panel;
+}
+
+// ── 미리보기 로드 ────────────────────────────────────────────────
+
+const INTERCEPT_STYLE_ID = 'sh-preview-intercept-style';
+
+// 사이드뷰 활성 중 항상 유지 — visibility:hidden으로 React 내부 렌더링은 허용
+function injectInterceptStyle() {
+  if (document.getElementById(INTERCEPT_STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = INTERCEPT_STYLE_ID;
+  style.textContent = `.ReactModal__Overlay { visibility: hidden !important; pointer-events: none !important; }`;
+  document.head.appendChild(style);
+}
+
+function removeInterceptStyle() {
+  document.getElementById(INTERCEPT_STYLE_ID)?.remove();
+}
+
+function loadPreview() {
+  const previewBtn = document.getElementById('preview-btn');
+  if (!previewBtn) return;
+
+  modalObserver?.disconnect();
+
+  const isOpen = previewBtn.getAttribute('aria-expanded') === 'true';
+
+  if (isOpen) {
+    // 열려있으면 닫고 → 짧은 대기 → 다시 열기
+    previewBtn.click();
+    setTimeout(() => openAndCapture(previewBtn), 80);
+  } else {
+    openAndCapture(previewBtn);
+  }
+}
+
+function openAndCapture(previewBtn: HTMLElement) {
+  modalObserver?.disconnect();
+
+  modalObserver = new MutationObserver(mutations => {
+    for (const mutation of mutations) {
+      for (const node of mutation.addedNodes) {
+        if (!(node instanceof HTMLElement)) continue;
+        const overlay = node.classList.contains('ReactModal__Overlay')
+          ? node
+          : node.querySelector<HTMLElement>('.ReactModal__Overlay');
+        if (!overlay) continue;
+        modalObserver?.disconnect();
+        waitForPreviewIframe(overlay);
+        return;
+      }
+    }
+  });
+
+  modalObserver.observe(document.body, { childList: true, subtree: true });
+  previewBtn.click();
+}
+
+// iframe srcdoc이 채워질 때까지 대기
+function waitForPreviewIframe(overlay: HTMLElement) {
+  const tryInject = (): boolean => {
+    const iframe = overlay.querySelector<HTMLIFrameElement>('iframe[name="previewIframe"]');
+    if (!iframe?.srcdoc) return false;
+    injectSrcdocToPanel(overlay, iframe.srcdoc);
+    return true;
+  };
+
+  if (tryInject()) return;
+
+  const inner = new MutationObserver(() => {
+    if (tryInject()) inner.disconnect();
+  });
+  inner.observe(overlay, { childList: true, subtree: true, attributes: true });
+}
+
+function injectSrcdocToPanel(_overlay: HTMLElement, srcdoc: string) {
+  const panelIframe = document.getElementById(PANEL_IFRAME_ID) as HTMLIFrameElement | null;
+  if (!panelIframe) return;
+
+  panelIframe.srcdoc = srcdoc;
+
+  // srcdoc 주입 후 모달 닫기 (toggle)
+  const previewBtn = document.getElementById('preview-btn');
+  if (previewBtn?.getAttribute('aria-expanded') === 'true') {
+    previewBtn.click();
+  }
+}
+
+// ── 레이아웃 활성화/비활성화 ────────────────────────────────────
+
+function activateSideView() {
+  const headerHeight = document.getElementById('kakaoHead')?.getBoundingClientRect().height ?? 58;
+
+  // 기존 DOM 구조를 건드리지 않고, body 오른쪽에 공간만 확보
+  document.body.style.setProperty('margin-right', '50vw', 'important');
+
+  // 미리보기 패널을 오른쪽에 fixed로 고정
+  const previewPanel = buildPreviewPanel();
+  previewPanel.style.position = 'fixed';
+  previewPanel.style.top = `${headerHeight}px`;
+  previewPanel.style.right = '0';
+  previewPanel.style.width = '50vw';
+  previewPanel.style.height = `calc(100vh - ${headerHeight}px)`;
+  previewPanel.style.zIndex = '1000';
+  previewPanel.style.flex = '';
+  previewPanel.style.maxWidth = '';
+  previewPanel.style.minWidth = '';
+
+  document.body.appendChild(previewPanel);
+
+  injectInterceptStyle();
+  sideViewActive = true;
+  loadPreview();
+  attachEditorListener();
+}
+
+function deactivateSideView() {
+  modalObserver?.disconnect();
+  detachEditorListener();
+  removeInterceptStyle();
+  document.body.style.removeProperty('margin-right');
+  document.getElementById(PANEL_ID)?.remove();
+  sideViewActive = false;
+}
+
+function toggleSideView() {
+  if (sideViewActive) {
+    deactivateSideView();
+  } else {
+    activateSideView();
+  }
+
+  updateMenuItemLabel();
+}
+
+// ── 툴바 버튼 ────────────────────────────────────────────────────
+
+function injectToolbarButton(anchorEl: Element) {
+  if (document.getElementById(TOOLBAR_BTN_ID)) return;
+
+  const btn = create$('div', {
+    id: TOOLBAR_BTN_ID,
+    class: 'mce-widget mce-btn mce-menubtn mce-fixed-width',
+    innerHTML:
+      '<button><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="3" x2="12" y2="21"/></svg></button>',
+  });
+
+  btn.addEventListener('click', toggleSideView);
+  anchorEl.insertAdjacentElement('afterend', btn);
+}
+
+// ── 드롭다운 메뉴 아이템 ──────────────────────────────────────────
+
+function updateMenuItemLabel() {
+  const menuItem = document.getElementById(MENU_ITEM_ID);
+  if (!menuItem) return;
+  const span = menuItem.querySelector('span.mce-text');
+  if (span) {
+    span.textContent = sideViewActive
+      ? chrome.i18n.getMessage('menu_side_view_off')
+      : chrome.i18n.getMessage('menu_side_view_on');
+  }
+}
+
+function injectMenuItemTo(panel: Element) {
+  if (panel.querySelector(`#${MENU_ITEM_ID}`)) return;
+
+  const menuItem = create$('div', {
+    id: MENU_ITEM_ID,
+    class: 'mce-menu-item mce-menu-item-normal mce-stack-layout-item',
+    attributes: { role: 'menuitem' },
+  });
+
+  const text = create$('span', {
+    class: 'mce-text',
+    textContent: chrome.i18n.getMessage('menu_side_view_on'),
+  });
+
+  menuItem.appendChild(text);
+  panel.appendChild(menuItem);
+
+  menuItem.addEventListener('click', () => {
+    toggleSideView();
+    const modeBtn = document.getElementById('editor-mode-layer-btn-open');
+    if (modeBtn) (modeBtn as HTMLButtonElement).click();
+  });
+}
+
+// ── 진입점 ───────────────────────────────────────────────────────
+
+async function previewSideView() {
+  const result = await chrome.storage.local.get('func_5');
+  if (typeof result.func_5 === 'boolean' && !result.func_5) return;
+
+  const anchor = await waitForElement('#altTager');
+  injectToolbarButton(anchor);
+
+  const editorModeBtn = await waitForElement('#editor-mode-layer-btn');
+
+  const observer = new MutationObserver(() => {
+    const stackLayout = editorModeBtn.querySelector('.mce-floatpanel .mce-stack-layout');
+    if (stackLayout) injectMenuItemTo(stackLayout);
+  });
+
+  observer.observe(editorModeBtn, { childList: true, subtree: true });
+
+  const existingStack = editorModeBtn.querySelector('.mce-floatpanel .mce-stack-layout');
+  if (existingStack) injectMenuItemTo(existingStack);
+}
+
+function waitForElement(selector: string): Promise<Element> {
+  return new Promise(resolve => {
+    const el = $(selector, document.body);
+    if (el) return resolve(el);
+
+    const observer = new MutationObserver(() => {
+      const found = $(selector, document.body);
+      if (found) {
+        observer.disconnect();
+        resolve(found);
+      }
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+  });
+}
+
+export default previewSideView;

From 0c4a7932d9adf4f7ad45bbd833223bb6061a5f12 Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Fri, 27 Mar 2026 01:02:06 +0900
Subject: [PATCH 11/23] =?UTF-8?q?feat:=20=EA=B8=80=20=EC=9E=91=EC=84=B1=20?=
 =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EB=94=94=EB=B0=94=EC=9A=B4?=
 =?UTF-8?q?=EC=8B=B1=20=EC=9D=B4=ED=9B=84=20=EC=8B=A4=EC=8B=9C=EA=B0=84=20?=
 =?UTF-8?q?=EB=A6=AC=EB=A0=8C=EB=8D=94=EB=A7=81=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/content/injected/previewSideView.ts | 298 +++++++++---------
 1 file changed, 150 insertions(+), 148 deletions(-)

diff --git a/src/pages/content/injected/previewSideView.ts b/src/pages/content/injected/previewSideView.ts
index fe9ea3c..8a42393 100644
--- a/src/pages/content/injected/previewSideView.ts
+++ b/src/pages/content/injected/previewSideView.ts
@@ -1,40 +1,139 @@
 import { $, create$ } from '@root/utils/dom/utilDOM';
 
-// const WRAPPER_ID = 'sh-side-view-wrapper'; // reserved for future use
 const PANEL_ID = 'sh-preview-panel';
 const PANEL_IFRAME_ID = 'sh-preview-iframe';
 const MENU_ITEM_ID = 'sh-side-view-menu-item';
 const TOOLBAR_BTN_ID = 'sh-side-view-toolbar-btn';
+const INTERCEPT_STYLE_ID = 'sh-preview-intercept-style';
 
 let sideViewActive = false;
-let modalObserver: MutationObserver | null = null;
 let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 let editorInputHandler: (() => void) | null = null;
+let srcdocTemplate: string | null = null;
+
+// ── CSS 차단 ──────────────────────────────────────────────────────
+
+function injectInterceptStyle() {
+  if (document.getElementById(INTERCEPT_STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = INTERCEPT_STYLE_ID;
+  style.textContent = `.ReactModal__Overlay { visibility: hidden !important; pointer-events: none !important; }`;
+  document.head.appendChild(style);
+}
+
+function removeInterceptStyle() {
+  document.getElementById(INTERCEPT_STYLE_ID)?.remove();
+}
+
+// ── 미리보기 ──────────────────────────────────────────────────────
+
+/**
+ * 최초 1회: 미리보기 버튼 클릭 → srcdoc 캐싱
+ * 이후: 캐시된 템플릿에 TinyMCE 현재 내용 치환 (버튼 클릭 없음)
+ */
+function loadPreview() {
+  if (srcdocTemplate) {
+    updatePreviewFromTemplate();
+    return;
+  }
+  loadInitialPreview();
+}
+
+function loadInitialPreview(attempt = 0) {
+  if (!sideViewActive) return;
+  if (attempt > 30) return;
+
+  const previewBtn = document.getElementById('preview-btn');
+  if (!previewBtn) {
+    setTimeout(() => loadInitialPreview(attempt + 1), 100);
+    return;
+  }
+
+  // 이미 열려있으면 먼저 닫기
+  if (previewBtn.getAttribute('aria-expanded') === 'true') {
+    previewBtn.click();
+    setTimeout(() => loadInitialPreview(attempt + 1), 200);
+    return;
+  }
+
+  previewBtn.click();
+  pollForTemplate(previewBtn);
+}
+
+function pollForTemplate(previewBtn: HTMLElement, attempt = 0) {
+  if (!sideViewActive) return;
+  if (attempt > 30) return;
+
+  const overlay = document.querySelector('.ReactModal__Overlay');
+  const sourceIframe = overlay?.querySelector<HTMLIFrameElement>('iframe[name="previewIframe"]');
+
+  if (sourceIframe?.srcdoc) {
+    srcdocTemplate = sourceIframe.srcdoc;
+
+    // 패널에 첫 렌더
+    const panelIframe = document.getElementById(PANEL_IFRAME_ID) as HTMLIFrameElement | null;
+    if (panelIframe) panelIframe.srcdoc = srcdocTemplate;
+
+    // 모달 닫기
+    if (previewBtn.getAttribute('aria-expanded') === 'true') {
+      previewBtn.click();
+    }
+    return;
+  }
+
+  setTimeout(() => pollForTemplate(previewBtn, attempt + 1), 100);
+}
+
+/**
+ * 캐시된 템플릿에 현재 TinyMCE 내용을 치환해 패널 업데이트
+ */
+function updatePreviewFromTemplate() {
+  if (!srcdocTemplate) return;
+
+  const editorIframe = document.getElementById('editor-tistory_ifr') as HTMLIFrameElement | null;
+  const editorContent = editorIframe?.contentDocument?.body?.innerHTML ?? '';
+  const postTitle = (document.getElementById('post-title-inp') as HTMLTextAreaElement | null)?.value ?? '';
+
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(srcdocTemplate, 'text/html');
+
+  // 본문 교체
+  const contentArea = doc.querySelector('.tt_article_useless_p_margin');
+  if (contentArea) contentArea.innerHTML = editorContent;
+
+  // 제목 교체
+  const titleEl = doc.querySelector('.article-info .title');
+  if (titleEl) titleEl.textContent = postTitle;
+
+  const panelIframe = document.getElementById(PANEL_IFRAME_ID) as HTMLIFrameElement | null;
+  if (panelIframe) panelIframe.srcdoc = doc.documentElement.outerHTML;
+}
 
 // ── 에디터 입력 감지 ──────────────────────────────────────────────
 
 function attachEditorListener() {
-  const iframe = document.getElementById('editor-tistory_ifr') as HTMLIFrameElement | null;
-  if (!iframe) return;
+  const tryAttach = (attempt = 0) => {
+    if (!sideViewActive) return;
+    if (attempt > 25) return;
+
+    const iframe = document.getElementById('editor-tistory_ifr') as HTMLIFrameElement | null;
+    const iframeBody = iframe?.contentDocument?.body ?? null;
 
-  const tryAttach = () => {
-    const editorBody = iframe.contentDocument?.body;
-    if (!editorBody) return;
+    if (!iframeBody) {
+      setTimeout(() => tryAttach(attempt + 1), 200);
+      return;
+    }
 
-    editorInputHandler = () => {
+    const handler = () => {
       if (debounceTimer) clearTimeout(debounceTimer);
       debounceTimer = setTimeout(loadPreview, 1500);
     };
-    editorBody.addEventListener('input', editorInputHandler);
+
+    iframeBody.addEventListener('input', handler);
+    editorInputHandler = () => iframeBody.removeEventListener('input', handler);
   };
 
-  // iframe이 이미 로드된 경우
-  if (iframe.contentDocument?.readyState === 'complete') {
-    tryAttach();
-  } else {
-    // 아직 로드 중이면 load 이벤트 후 부착
-    iframe.addEventListener('load', tryAttach, { once: true });
-  }
+  tryAttach();
 }
 
 function detachEditorListener() {
@@ -42,33 +141,15 @@ function detachEditorListener() {
     clearTimeout(debounceTimer);
     debounceTimer = null;
   }
-
-  const iframe = document.getElementById('editor-tistory_ifr') as HTMLIFrameElement | null;
-  const editorBody = iframe?.contentDocument?.body;
-  if (editorBody && editorInputHandler) {
-    editorBody.removeEventListener('input', editorInputHandler);
-  }
+  editorInputHandler?.();
   editorInputHandler = null;
 }
 
-// ── 패널 내부 구조 ────────────────────────────────────────────────
+// ── 패널 UI ───────────────────────────────────────────────────────
 
 function buildPreviewPanel(): HTMLElement {
-  const panel = create$('div', {
-    id: PANEL_ID,
-    style: {
-      flex: '0 0 50%',
-      maxWidth: '50%',
-      minWidth: '0',
-      borderLeft: '2px solid #e8e8e8',
-      display: 'flex',
-      flexDirection: 'column',
-      boxSizing: 'border-box',
-      backgroundColor: '#f9f9f9',
-    },
-  });
+  const panel = create$('div', { id: PANEL_ID });
 
-  // 헤더
   const header = create$('div', {
     style: {
       display: 'flex',
@@ -98,21 +179,19 @@ function buildPreviewPanel(): HTMLElement {
       color: '#555',
     },
   });
-  refreshBtn.addEventListener('click', loadPreview);
+  refreshBtn.addEventListener('click', () => {
+    // 강제 전체 재로드 (템플릿 초기화)
+    srcdocTemplate = null;
+    loadPreview();
+  });
 
   header.appendChild(title);
   header.appendChild(refreshBtn);
 
-  // iframe
   const iframe = create$('iframe', {
     id: PANEL_IFRAME_ID,
     attributes: { sandbox: 'allow-scripts allow-same-origin' },
-    style: {
-      flex: '1',
-      width: '100%',
-      border: 'none',
-      minHeight: '600px',
-    },
+    style: { flex: '1', width: '100%', border: 'none', minHeight: '600px' },
   });
 
   panel.appendChild(header);
@@ -120,114 +199,27 @@ function buildPreviewPanel(): HTMLElement {
   return panel;
 }
 
-// ── 미리보기 로드 ────────────────────────────────────────────────
-
-const INTERCEPT_STYLE_ID = 'sh-preview-intercept-style';
-
-// 사이드뷰 활성 중 항상 유지 — visibility:hidden으로 React 내부 렌더링은 허용
-function injectInterceptStyle() {
-  if (document.getElementById(INTERCEPT_STYLE_ID)) return;
-  const style = document.createElement('style');
-  style.id = INTERCEPT_STYLE_ID;
-  style.textContent = `.ReactModal__Overlay { visibility: hidden !important; pointer-events: none !important; }`;
-  document.head.appendChild(style);
-}
-
-function removeInterceptStyle() {
-  document.getElementById(INTERCEPT_STYLE_ID)?.remove();
-}
-
-function loadPreview() {
-  const previewBtn = document.getElementById('preview-btn');
-  if (!previewBtn) return;
-
-  modalObserver?.disconnect();
-
-  const isOpen = previewBtn.getAttribute('aria-expanded') === 'true';
-
-  if (isOpen) {
-    // 열려있으면 닫고 → 짧은 대기 → 다시 열기
-    previewBtn.click();
-    setTimeout(() => openAndCapture(previewBtn), 80);
-  } else {
-    openAndCapture(previewBtn);
-  }
-}
-
-function openAndCapture(previewBtn: HTMLElement) {
-  modalObserver?.disconnect();
-
-  modalObserver = new MutationObserver(mutations => {
-    for (const mutation of mutations) {
-      for (const node of mutation.addedNodes) {
-        if (!(node instanceof HTMLElement)) continue;
-        const overlay = node.classList.contains('ReactModal__Overlay')
-          ? node
-          : node.querySelector<HTMLElement>('.ReactModal__Overlay');
-        if (!overlay) continue;
-        modalObserver?.disconnect();
-        waitForPreviewIframe(overlay);
-        return;
-      }
-    }
-  });
-
-  modalObserver.observe(document.body, { childList: true, subtree: true });
-  previewBtn.click();
-}
-
-// iframe srcdoc이 채워질 때까지 대기
-function waitForPreviewIframe(overlay: HTMLElement) {
-  const tryInject = (): boolean => {
-    const iframe = overlay.querySelector<HTMLIFrameElement>('iframe[name="previewIframe"]');
-    if (!iframe?.srcdoc) return false;
-    injectSrcdocToPanel(overlay, iframe.srcdoc);
-    return true;
-  };
-
-  if (tryInject()) return;
-
-  const inner = new MutationObserver(() => {
-    if (tryInject()) inner.disconnect();
-  });
-  inner.observe(overlay, { childList: true, subtree: true, attributes: true });
-}
-
-function injectSrcdocToPanel(_overlay: HTMLElement, srcdoc: string) {
-  const panelIframe = document.getElementById(PANEL_IFRAME_ID) as HTMLIFrameElement | null;
-  if (!panelIframe) return;
-
-  panelIframe.srcdoc = srcdoc;
-
-  // srcdoc 주입 후 모달 닫기 (toggle)
-  const previewBtn = document.getElementById('preview-btn');
-  if (previewBtn?.getAttribute('aria-expanded') === 'true') {
-    previewBtn.click();
-  }
-}
-
-// ── 레이아웃 활성화/비활성화 ────────────────────────────────────
+// ── 레이아웃 ─────────────────────────────────────────────────────
 
 function activateSideView() {
   const headerHeight = document.getElementById('kakaoHead')?.getBoundingClientRect().height ?? 58;
 
-  // 기존 DOM 구조를 건드리지 않고, body 오른쪽에 공간만 확보
   document.body.style.setProperty('margin-right', '50vw', 'important');
 
-  // 미리보기 패널을 오른쪽에 fixed로 고정
   const previewPanel = buildPreviewPanel();
-  previewPanel.style.position = 'fixed';
-  previewPanel.style.top = `${headerHeight}px`;
-  previewPanel.style.right = '0';
-  previewPanel.style.width = '50vw';
-  previewPanel.style.height = `calc(100vh - ${headerHeight}px)`;
-  previewPanel.style.zIndex = '1000';
-  previewPanel.style.flex = '';
-  previewPanel.style.maxWidth = '';
-  previewPanel.style.minWidth = '';
+  Object.assign(previewPanel.style, {
+    position: 'fixed',
+    top: `${headerHeight}px`,
+    right: '0',
+    width: '50vw',
+    height: `calc(100vh - ${headerHeight}px)`,
+    zIndex: '1000',
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: '#f9f9f9',
+  });
 
   document.body.appendChild(previewPanel);
-
   injectInterceptStyle();
   sideViewActive = true;
   loadPreview();
@@ -235,9 +227,20 @@ function activateSideView() {
 }
 
 function deactivateSideView() {
-  modalObserver?.disconnect();
   detachEditorListener();
-  removeInterceptStyle();
+  srcdocTemplate = null;
+
+  // 모달이 열려있으면 먼저 닫고 CSS 제거
+  const previewBtn = document.getElementById('preview-btn');
+  if (previewBtn?.getAttribute('aria-expanded') === 'true') {
+    previewBtn.click();
+  }
+
+  // 약간 대기 후 CSS 제거 (React가 모달 닫는 시간)
+  setTimeout(() => {
+    removeInterceptStyle();
+  }, 200);
+
   document.body.style.removeProperty('margin-right');
   document.getElementById(PANEL_ID)?.remove();
   sideViewActive = false;
@@ -249,7 +252,6 @@ function toggleSideView() {
   } else {
     activateSideView();
   }
-
   updateMenuItemLabel();
 }
 
@@ -269,7 +271,7 @@ function injectToolbarButton(anchorEl: Element) {
   anchorEl.insertAdjacentElement('afterend', btn);
 }
 
-// ── 드롭다운 메뉴 아이템 ──────────────────────────────────────────
+// ── 드롭다운 메뉴 ────────────────────────────────────────────────
 
 function updateMenuItemLabel() {
   const menuItem = document.getElementById(MENU_ITEM_ID);

From dc0fca06012ab05ac6c65759e6f55e262b8580bb Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Fri, 27 Mar 2026 22:53:48 +0900
Subject: [PATCH 12/23] =?UTF-8?q?fix:=20=EC=82=AC=EC=9D=B4=EB=93=9C?=
 =?UTF-8?q?=EB=B7=B0=20=EB=8B=AB=EA=B8=B0=20=EC=8B=9C=20=EB=AA=A8=EB=8B=AC?=
 =?UTF-8?q?=EC=B0=BD=EC=9D=B4=20=EC=97=B4=EB=A6=AC=EB=8D=98=20=EB=AC=B8?=
 =?UTF-8?q?=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/content/injected/previewSideView.ts | 52 +++++++++++++------
 1 file changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/pages/content/injected/previewSideView.ts b/src/pages/content/injected/previewSideView.ts
index 8a42393..a19f395 100644
--- a/src/pages/content/injected/previewSideView.ts
+++ b/src/pages/content/injected/previewSideView.ts
@@ -61,7 +61,11 @@ function loadInitialPreview(attempt = 0) {
 }
 
 function pollForTemplate(previewBtn: HTMLElement, attempt = 0) {
-  if (!sideViewActive) return;
+  // 사이드뷰가 닫혔으면 모달만 닫고 중단
+  if (!sideViewActive) {
+    if (previewBtn.getAttribute('aria-expanded') === 'true') previewBtn.click();
+    return;
+  }
   if (attempt > 30) return;
 
   const overlay = document.querySelector('.ReactModal__Overlay');
@@ -70,14 +74,10 @@ function pollForTemplate(previewBtn: HTMLElement, attempt = 0) {
   if (sourceIframe?.srcdoc) {
     srcdocTemplate = sourceIframe.srcdoc;
 
-    // 패널에 첫 렌더
     const panelIframe = document.getElementById(PANEL_IFRAME_ID) as HTMLIFrameElement | null;
     if (panelIframe) panelIframe.srcdoc = srcdocTemplate;
 
-    // 모달 닫기
-    if (previewBtn.getAttribute('aria-expanded') === 'true') {
-      previewBtn.click();
-    }
+    if (previewBtn.getAttribute('aria-expanded') === 'true') previewBtn.click();
     return;
   }
 
@@ -226,24 +226,42 @@ function activateSideView() {
   attachEditorListener();
 }
 
+function closePreviewModal() {
+  const overlay = document.querySelector<HTMLElement>('.ReactModal__Overlay');
+  if (!overlay) return;
+
+  // ReactModal은 overlay 클릭 또는 Escape로 닫힘
+  overlay.click();
+  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', keyCode: 27, bubbles: true, cancelable: true }));
+}
+
 function deactivateSideView() {
+  sideViewActive = false;
   detachEditorListener();
   srcdocTemplate = null;
 
-  // 모달이 열려있으면 먼저 닫고 CSS 제거
-  const previewBtn = document.getElementById('preview-btn');
-  if (previewBtn?.getAttribute('aria-expanded') === 'true') {
-    previewBtn.click();
-  }
-
-  // 약간 대기 후 CSS 제거 (React가 모달 닫는 시간)
-  setTimeout(() => {
-    removeInterceptStyle();
-  }, 200);
+  closePreviewModal();
 
   document.body.style.removeProperty('margin-right');
   document.getElementById(PANEL_ID)?.remove();
-  sideViewActive = false;
+
+  // overlay가 DOM에서 사라진 뒤 CSS 제거, 최대 2초 대기 후 강제 제거
+  waitForOverlayRemoved();
+}
+
+function waitForOverlayRemoved(attempt = 0) {
+  const overlay = document.querySelector('.ReactModal__Overlay');
+  if (!overlay) {
+    removeInterceptStyle();
+    return;
+  }
+  if (attempt > 20) {
+    // 강제 제거 후 CSS 해제
+    (overlay as HTMLElement).remove();
+    removeInterceptStyle();
+    return;
+  }
+  setTimeout(() => waitForOverlayRemoved(attempt + 1), 100);
 }
 
 function toggleSideView() {

From c69f357761b69036619924e17b959acd2640ca95 Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Sat, 28 Mar 2026 12:33:33 +0900
Subject: [PATCH 13/23] =?UTF-8?q?refactor:=20=EC=82=AC=EC=9D=B4=EB=93=9C?=
 =?UTF-8?q?=EB=B7=B0=20UI=20=EC=9E=90=EC=B2=B4=EB=A5=BC=20React=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/content/injected/previewSideView.ts | 227 ++++++------------
 src/pages/content/ui/SideViewPanel.tsx        |  88 +++++++
 src/pages/content/ui/app.tsx                  |  12 +-
 3 files changed, 173 insertions(+), 154 deletions(-)
 create mode 100644 src/pages/content/ui/SideViewPanel.tsx

diff --git a/src/pages/content/injected/previewSideView.ts b/src/pages/content/injected/previewSideView.ts
index a19f395..7249661 100644
--- a/src/pages/content/injected/previewSideView.ts
+++ b/src/pages/content/injected/previewSideView.ts
@@ -1,45 +1,49 @@
 import { $, create$ } from '@root/utils/dom/utilDOM';
 
-const PANEL_ID = 'sh-preview-panel';
-const PANEL_IFRAME_ID = 'sh-preview-iframe';
 const MENU_ITEM_ID = 'sh-side-view-menu-item';
 const TOOLBAR_BTN_ID = 'sh-side-view-toolbar-btn';
 const INTERCEPT_STYLE_ID = 'sh-preview-intercept-style';
+const PANEL_IFRAME_ID = 'sh-preview-iframe';
 
 let sideViewActive = false;
 let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 let editorInputHandler: (() => void) | null = null;
 let srcdocTemplate: string | null = null;
 
-// ── CSS 차단 ──────────────────────────────────────────────────────
+// ── React 컴포넌트와의 통신 ───────────────────────────────────────
+
+const dispatchSideViewOpen = () => window.dispatchEvent(new CustomEvent('sh:sideview-open'));
+
+const dispatchSideViewClose = () => window.dispatchEvent(new CustomEvent('sh:sideview-close'));
 
-function injectInterceptStyle() {
+const dispatchSrcdoc = (srcdoc: string) =>
+  window.dispatchEvent(new CustomEvent('sh:sideview-srcdoc', { detail: { srcdoc } }));
+
+// ── CSS 차단 (미리보기 모달 숨김) ────────────────────────────────
+
+const injectInterceptStyle = () => {
   if (document.getElementById(INTERCEPT_STYLE_ID)) return;
   const style = document.createElement('style');
   style.id = INTERCEPT_STYLE_ID;
   style.textContent = `.ReactModal__Overlay { visibility: hidden !important; pointer-events: none !important; }`;
   document.head.appendChild(style);
-}
+};
 
-function removeInterceptStyle() {
+const removeInterceptStyle = () => {
   document.getElementById(INTERCEPT_STYLE_ID)?.remove();
-}
+};
 
-// ── 미리보기 ──────────────────────────────────────────────────────
+// ── 미리보기 로드 ────────────────────────────────────────────────
 
-/**
- * 최초 1회: 미리보기 버튼 클릭 → srcdoc 캐싱
- * 이후: 캐시된 템플릿에 TinyMCE 현재 내용 치환 (버튼 클릭 없음)
- */
-function loadPreview() {
+const loadPreview = () => {
   if (srcdocTemplate) {
     updatePreviewFromTemplate();
     return;
   }
   loadInitialPreview();
-}
+};
 
-function loadInitialPreview(attempt = 0) {
+const loadInitialPreview = (attempt = 0) => {
   if (!sideViewActive) return;
   if (attempt > 30) return;
 
@@ -49,19 +53,18 @@ function loadInitialPreview(attempt = 0) {
     return;
   }
 
-  // 이미 열려있으면 먼저 닫기
   if (previewBtn.getAttribute('aria-expanded') === 'true') {
     previewBtn.click();
     setTimeout(() => loadInitialPreview(attempt + 1), 200);
     return;
   }
 
+  if (!sideViewActive) return;
   previewBtn.click();
   pollForTemplate(previewBtn);
-}
+};
 
-function pollForTemplate(previewBtn: HTMLElement, attempt = 0) {
-  // 사이드뷰가 닫혔으면 모달만 닫고 중단
+const pollForTemplate = (previewBtn: HTMLElement, attempt = 0) => {
   if (!sideViewActive) {
     if (previewBtn.getAttribute('aria-expanded') === 'true') previewBtn.click();
     return;
@@ -73,21 +76,15 @@ function pollForTemplate(previewBtn: HTMLElement, attempt = 0) {
 
   if (sourceIframe?.srcdoc) {
     srcdocTemplate = sourceIframe.srcdoc;
-
-    const panelIframe = document.getElementById(PANEL_IFRAME_ID) as HTMLIFrameElement | null;
-    if (panelIframe) panelIframe.srcdoc = srcdocTemplate;
-
+    dispatchSrcdoc(srcdocTemplate);
     if (previewBtn.getAttribute('aria-expanded') === 'true') previewBtn.click();
     return;
   }
 
   setTimeout(() => pollForTemplate(previewBtn, attempt + 1), 100);
-}
+};
 
-/**
- * 캐시된 템플릿에 현재 TinyMCE 내용을 치환해 패널 업데이트
- */
-function updatePreviewFromTemplate() {
+const updatePreviewFromTemplate = () => {
   if (!srcdocTemplate) return;
 
   const editorIframe = document.getElementById('editor-tistory_ifr') as HTMLIFrameElement | null;
@@ -97,21 +94,18 @@ function updatePreviewFromTemplate() {
   const parser = new DOMParser();
   const doc = parser.parseFromString(srcdocTemplate, 'text/html');
 
-  // 본문 교체
   const contentArea = doc.querySelector('.tt_article_useless_p_margin');
   if (contentArea) contentArea.innerHTML = editorContent;
 
-  // 제목 교체
   const titleEl = doc.querySelector('.article-info .title');
   if (titleEl) titleEl.textContent = postTitle;
 
-  const panelIframe = document.getElementById(PANEL_IFRAME_ID) as HTMLIFrameElement | null;
-  if (panelIframe) panelIframe.srcdoc = doc.documentElement.outerHTML;
-}
+  dispatchSrcdoc(doc.documentElement.outerHTML);
+};
 
 // ── 에디터 입력 감지 ──────────────────────────────────────────────
 
-function attachEditorListener() {
+const attachEditorListener = () => {
   const tryAttach = (attempt = 0) => {
     if (!sideViewActive) return;
     if (attempt > 25) return;
@@ -134,148 +128,71 @@ function attachEditorListener() {
   };
 
   tryAttach();
-}
+};
 
-function detachEditorListener() {
+const detachEditorListener = () => {
   if (debounceTimer) {
     clearTimeout(debounceTimer);
     debounceTimer = null;
   }
   editorInputHandler?.();
   editorInputHandler = null;
-}
-
-// ── 패널 UI ───────────────────────────────────────────────────────
-
-function buildPreviewPanel(): HTMLElement {
-  const panel = create$('div', { id: PANEL_ID });
-
-  const header = create$('div', {
-    style: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      padding: '8px 14px',
-      borderBottom: '1px solid #e0e0e0',
-      backgroundColor: '#fff',
-      flexShrink: '0',
-    },
-  });
+};
 
-  const title = create$('span', {
-    textContent: '미리보기',
-    style: { fontSize: '13px', fontWeight: 'bold', color: '#333' },
-  });
+// ── 모달 닫기 ────────────────────────────────────────────────────
 
-  const refreshBtn = create$('button', {
-    textContent: '새로고침',
-    style: {
-      fontSize: '12px',
-      padding: '4px 10px',
-      border: '1px solid #ccc',
-      borderRadius: '4px',
-      backgroundColor: '#fff',
-      cursor: 'pointer',
-      color: '#555',
-    },
-  });
-  refreshBtn.addEventListener('click', () => {
-    // 강제 전체 재로드 (템플릿 초기화)
-    srcdocTemplate = null;
-    loadPreview();
-  });
-
-  header.appendChild(title);
-  header.appendChild(refreshBtn);
-
-  const iframe = create$('iframe', {
-    id: PANEL_IFRAME_ID,
-    attributes: { sandbox: 'allow-scripts allow-same-origin' },
-    style: { flex: '1', width: '100%', border: 'none', minHeight: '600px' },
-  });
-
-  panel.appendChild(header);
-  panel.appendChild(iframe);
-  return panel;
-}
-
-// ── 레이아웃 ─────────────────────────────────────────────────────
-
-function activateSideView() {
-  const headerHeight = document.getElementById('kakaoHead')?.getBoundingClientRect().height ?? 58;
-
-  document.body.style.setProperty('margin-right', '50vw', 'important');
-
-  const previewPanel = buildPreviewPanel();
-  Object.assign(previewPanel.style, {
-    position: 'fixed',
-    top: `${headerHeight}px`,
-    right: '0',
-    width: '50vw',
-    height: `calc(100vh - ${headerHeight}px)`,
-    zIndex: '1000',
-    display: 'flex',
-    flexDirection: 'column',
-    backgroundColor: '#f9f9f9',
-  });
-
-  document.body.appendChild(previewPanel);
-  injectInterceptStyle();
-  sideViewActive = true;
-  loadPreview();
-  attachEditorListener();
-}
-
-function closePreviewModal() {
+const closePreviewModal = () => {
   const overlay = document.querySelector<HTMLElement>('.ReactModal__Overlay');
   if (!overlay) return;
-
-  // ReactModal은 overlay 클릭 또는 Escape로 닫힘
   overlay.click();
   document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', keyCode: 27, bubbles: true, cancelable: true }));
-}
+};
 
-function deactivateSideView() {
-  sideViewActive = false;
-  detachEditorListener();
-  srcdocTemplate = null;
-
-  closePreviewModal();
-
-  document.body.style.removeProperty('margin-right');
-  document.getElementById(PANEL_ID)?.remove();
-
-  // overlay가 DOM에서 사라진 뒤 CSS 제거, 최대 2초 대기 후 강제 제거
-  waitForOverlayRemoved();
-}
-
-function waitForOverlayRemoved(attempt = 0) {
+const waitForOverlayRemoved = (attempt = 0) => {
   const overlay = document.querySelector('.ReactModal__Overlay');
   if (!overlay) {
     removeInterceptStyle();
     return;
   }
   if (attempt > 20) {
-    // 강제 제거 후 CSS 해제
     (overlay as HTMLElement).remove();
     removeInterceptStyle();
     return;
   }
   setTimeout(() => waitForOverlayRemoved(attempt + 1), 100);
-}
+};
+
+// ── 사이드뷰 토글 ────────────────────────────────────────────────
+
+const activateSideView = () => {
+  sideViewActive = true;
+  injectInterceptStyle();
+  dispatchSideViewOpen();
+  loadPreview();
+  attachEditorListener();
+};
 
-function toggleSideView() {
+const deactivateSideView = () => {
+  sideViewActive = false;
+  detachEditorListener();
+  srcdocTemplate = null;
+  closePreviewModal();
+  dispatchSideViewClose();
+  waitForOverlayRemoved();
+};
+
+const toggleSideView = () => {
   if (sideViewActive) {
     deactivateSideView();
   } else {
     activateSideView();
   }
   updateMenuItemLabel();
-}
+};
 
 // ── 툴바 버튼 ────────────────────────────────────────────────────
 
-function injectToolbarButton(anchorEl: Element) {
+const injectToolbarButton = (anchorEl: Element) => {
   if (document.getElementById(TOOLBAR_BTN_ID)) return;
 
   const btn = create$('div', {
@@ -287,11 +204,11 @@ function injectToolbarButton(anchorEl: Element) {
 
   btn.addEventListener('click', toggleSideView);
   anchorEl.insertAdjacentElement('afterend', btn);
-}
+};
 
 // ── 드롭다운 메뉴 ────────────────────────────────────────────────
 
-function updateMenuItemLabel() {
+const updateMenuItemLabel = () => {
   const menuItem = document.getElementById(MENU_ITEM_ID);
   if (!menuItem) return;
   const span = menuItem.querySelector('span.mce-text');
@@ -300,9 +217,9 @@ function updateMenuItemLabel() {
       ? chrome.i18n.getMessage('menu_side_view_off')
       : chrome.i18n.getMessage('menu_side_view_on');
   }
-}
+};
 
-function injectMenuItemTo(panel: Element) {
+const injectMenuItemTo = (panel: Element) => {
   if (panel.querySelector(`#${MENU_ITEM_ID}`)) return;
 
   const menuItem = create$('div', {
@@ -324,14 +241,23 @@ function injectMenuItemTo(panel: Element) {
     const modeBtn = document.getElementById('editor-mode-layer-btn-open');
     if (modeBtn) (modeBtn as HTMLButtonElement).click();
   });
-}
+};
 
 // ── 진입점 ───────────────────────────────────────────────────────
 
-async function previewSideView() {
+const previewSideView = async () => {
   const result = await chrome.storage.local.get('func_5');
   if (typeof result.func_5 === 'boolean' && !result.func_5) return;
 
+  // React 컴포넌트에서 새로고침 요청 수신
+  window.addEventListener('sh:sideview-refresh', () => {
+    srcdocTemplate = null;
+    loadPreview();
+  });
+
+  // React 컴포넌트에서 panel iframe ID 요청 시 응답 (필요 시 확장)
+  window.dispatchEvent(new CustomEvent('sh:sideview-ready', { detail: { iframeId: PANEL_IFRAME_ID } }));
+
   const anchor = await waitForElement('#altTager');
   injectToolbarButton(anchor);
 
@@ -346,10 +272,10 @@ async function previewSideView() {
 
   const existingStack = editorModeBtn.querySelector('.mce-floatpanel .mce-stack-layout');
   if (existingStack) injectMenuItemTo(existingStack);
-}
+};
 
-function waitForElement(selector: string): Promise<Element> {
-  return new Promise(resolve => {
+const waitForElement = (selector: string): Promise<Element> =>
+  new Promise(resolve => {
     const el = $(selector, document.body);
     if (el) return resolve(el);
 
@@ -363,6 +289,5 @@ function waitForElement(selector: string): Promise<Element> {
 
     observer.observe(document.body, { childList: true, subtree: true });
   });
-}
 
 export default previewSideView;
diff --git a/src/pages/content/ui/SideViewPanel.tsx b/src/pages/content/ui/SideViewPanel.tsx
new file mode 100644
index 0000000..6974754
--- /dev/null
+++ b/src/pages/content/ui/SideViewPanel.tsx
@@ -0,0 +1,88 @@
+import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+const PANEL_IFRAME_ID = 'sh-preview-iframe';
+
+const containerStyle = (top: number, height: string): React.CSSProperties => ({
+  position: 'fixed',
+  top,
+  right: 0,
+  width: '50vw',
+  height,
+  zIndex: 1000,
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: '#fff',
+  borderLeft: '1px solid #e0e0e0',
+  boxShadow: '-2px 0 8px rgba(0,0,0,0.06)',
+});
+
+const headerStyle: React.CSSProperties = {
+  padding: '12px 16px',
+  borderBottom: '1px solid #e0e0e0',
+  fontSize: '14px',
+  color: '#666',
+  flexShrink: 0,
+};
+
+const iframeStyle: React.CSSProperties = {
+  flex: 1,
+  border: 'none',
+  width: '100%',
+};
+
+const SideViewPanel = () => {
+  const [active, setActive] = useState(false);
+  const [srcdoc, setSrcdoc] = useState('');
+  const [headerHeight, setHeaderHeight] = useState(58);
+
+  useEffect(() => {
+    const onOpen = () => {
+      const h = document.getElementById('kakaoHead')?.getBoundingClientRect().height ?? 58;
+      setHeaderHeight(h);
+      setActive(true);
+    };
+
+    const onClose = () => setActive(false);
+
+    const onSrcdoc = (e: Event) => {
+      setSrcdoc((e as CustomEvent<{ srcdoc: string }>).detail.srcdoc);
+    };
+
+    window.addEventListener('sh:sideview-open', onOpen);
+    window.addEventListener('sh:sideview-close', onClose);
+    window.addEventListener('sh:sideview-srcdoc', onSrcdoc);
+
+    return () => {
+      window.removeEventListener('sh:sideview-open', onOpen);
+      window.removeEventListener('sh:sideview-close', onClose);
+      window.removeEventListener('sh:sideview-srcdoc', onSrcdoc);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (active) {
+      document.body.style.setProperty('margin-right', '50vw', 'important');
+    } else {
+      document.body.style.removeProperty('margin-right');
+    }
+  }, [active]);
+
+  if (!active) return null;
+
+  return createPortal(
+    <div style={containerStyle(headerHeight, `calc(100vh - ${headerHeight}px)`)}>
+      <div style={headerStyle}>사이드뷰로 미리보는 중...</div>
+      <iframe
+        id={PANEL_IFRAME_ID}
+        title="미리보기"
+        srcDoc={srcdoc || undefined}
+        sandbox="allow-scripts allow-same-origin"
+        style={iframeStyle}
+      />
+    </div>,
+    document.body,
+  );
+};
+
+export default SideViewPanel;
diff --git a/src/pages/content/ui/app.tsx b/src/pages/content/ui/app.tsx
index f81cf6d..b520dfc 100644
--- a/src/pages/content/ui/app.tsx
+++ b/src/pages/content/ui/app.tsx
@@ -1,5 +1,11 @@
 import StatusIndicator from './StatusIndicator';
+import SideViewPanel from './SideViewPanel';
 
-export default function App() {
-  return <StatusIndicator />;
-}
+const App = () => (
+  <>
+    <StatusIndicator />
+    <SideViewPanel />
+  </>
+);
+
+export default App;

From 86d8b414c6f99276ce7e512d3e9fd6adb0ed0a2e Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Sat, 28 Mar 2026 12:43:54 +0900
Subject: [PATCH 14/23] =?UTF-8?q?feat:=20=EB=A6=AC=EB=A0=8C=EB=8D=94?=
 =?UTF-8?q?=EB=A7=81=20=EB=A1=9C=EB=94=A9=20UI=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/content/injected/previewSideView.ts |  8 ++-
 src/pages/content/ui/SideViewPanel.tsx        | 56 +++++++++++++++++--
 2 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/src/pages/content/injected/previewSideView.ts b/src/pages/content/injected/previewSideView.ts
index 7249661..fee632f 100644
--- a/src/pages/content/injected/previewSideView.ts
+++ b/src/pages/content/injected/previewSideView.ts
@@ -16,8 +16,13 @@ const dispatchSideViewOpen = () => window.dispatchEvent(new CustomEvent('sh:side
 
 const dispatchSideViewClose = () => window.dispatchEvent(new CustomEvent('sh:sideview-close'));
 
-const dispatchSrcdoc = (srcdoc: string) =>
+const dispatchSrcdoc = (srcdoc: string) => {
   window.dispatchEvent(new CustomEvent('sh:sideview-srcdoc', { detail: { srcdoc } }));
+  dispatchLoading(false);
+};
+
+const dispatchLoading = (loading: boolean) =>
+  window.dispatchEvent(new CustomEvent('sh:sideview-loading', { detail: { loading } }));
 
 // ── CSS 차단 (미리보기 모달 숨김) ────────────────────────────────
 
@@ -120,6 +125,7 @@ const attachEditorListener = () => {
 
     const handler = () => {
       if (debounceTimer) clearTimeout(debounceTimer);
+      dispatchLoading(true);
       debounceTimer = setTimeout(loadPreview, 1500);
     };
 
diff --git a/src/pages/content/ui/SideViewPanel.tsx b/src/pages/content/ui/SideViewPanel.tsx
index 6974754..87c2826 100644
--- a/src/pages/content/ui/SideViewPanel.tsx
+++ b/src/pages/content/ui/SideViewPanel.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
 const PANEL_IFRAME_ID = 'sh-preview-iframe';
+const PULSE_STYLE_ID = 'sh-pulse-style';
 
 const containerStyle = (top: number, height: string): React.CSSProperties => ({
   position: 'fixed',
@@ -18,11 +19,14 @@ const containerStyle = (top: number, height: string): React.CSSProperties => ({
 });
 
 const headerStyle: React.CSSProperties = {
-  padding: '12px 16px',
+  padding: '10px 16px',
   borderBottom: '1px solid #e0e0e0',
-  fontSize: '14px',
+  fontSize: '13px',
   color: '#666',
   flexShrink: 0,
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
 };
 
 const iframeStyle: React.CSSProperties = {
@@ -31,10 +35,42 @@ const iframeStyle: React.CSSProperties = {
   width: '100%',
 };
 
+const dotStyle: React.CSSProperties = {
+  width: '8px',
+  height: '8px',
+  borderRadius: '50%',
+  backgroundColor: '#4a90e2',
+  animation: 'sh-pulse 1.2s ease-in-out infinite',
+  flexShrink: 0,
+};
+
+const injectPulseStyle = () => {
+  if (document.getElementById(PULSE_STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = PULSE_STYLE_ID;
+  style.textContent = `
+    @keyframes sh-pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50%       { opacity: 0.3; transform: scale(0.6); }
+    }
+  `;
+  document.head.appendChild(style);
+};
+
+const removePulseStyle = () => {
+  document.getElementById(PULSE_STYLE_ID)?.remove();
+};
+
 const SideViewPanel = () => {
   const [active, setActive] = useState(false);
   const [srcdoc, setSrcdoc] = useState('');
   const [headerHeight, setHeaderHeight] = useState(58);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    injectPulseStyle();
+    return () => removePulseStyle();
+  }, []);
 
   useEffect(() => {
     const onOpen = () => {
@@ -43,20 +79,29 @@ const SideViewPanel = () => {
       setActive(true);
     };
 
-    const onClose = () => setActive(false);
+    const onClose = () => {
+      setActive(false);
+      setLoading(false);
+    };
 
     const onSrcdoc = (e: Event) => {
       setSrcdoc((e as CustomEvent<{ srcdoc: string }>).detail.srcdoc);
     };
 
+    const onLoading = (e: Event) => {
+      setLoading((e as CustomEvent<{ loading: boolean }>).detail.loading);
+    };
+
     window.addEventListener('sh:sideview-open', onOpen);
     window.addEventListener('sh:sideview-close', onClose);
     window.addEventListener('sh:sideview-srcdoc', onSrcdoc);
+    window.addEventListener('sh:sideview-loading', onLoading);
 
     return () => {
       window.removeEventListener('sh:sideview-open', onOpen);
       window.removeEventListener('sh:sideview-close', onClose);
       window.removeEventListener('sh:sideview-srcdoc', onSrcdoc);
+      window.removeEventListener('sh:sideview-loading', onLoading);
     };
   }, []);
 
@@ -72,7 +117,10 @@ const SideViewPanel = () => {
 
   return createPortal(
     <div style={containerStyle(headerHeight, `calc(100vh - ${headerHeight}px)`)}>
-      <div style={headerStyle}>사이드뷰로 미리보는 중...</div>
+      <div style={headerStyle}>
+        <span>{loading ? '리렌더링 중...' : '미리보기'}</span>
+        {loading && <span style={dotStyle} />}
+      </div>
       <iframe
         id={PANEL_IFRAME_ID}
         title="미리보기"

From 0ebf96ded5ec161fde63c35f30cc7656916b7544 Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Sat, 28 Mar 2026 13:14:27 +0900
Subject: [PATCH 15/23] =?UTF-8?q?feat:=20status=20indicator=EC=97=90=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9=EB=90=98=EB=8A=94=20svg=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/content/injected/components/SVG.ts | 2 ++
 src/pages/content/ui/StatusIndicator.tsx     | 3 ++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/content/injected/components/SVG.ts b/src/pages/content/injected/components/SVG.ts
index d71e637..7a37be8 100644
--- a/src/pages/content/injected/components/SVG.ts
+++ b/src/pages/content/injected/components/SVG.ts
@@ -19,3 +19,5 @@ export const ImageScale = `<svg xmlns="http://www.w3.org/2000/svg" width="24" he
 export const TextCounter = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-text-icon lucide-text"><path d="M15 18H3"/><path d="M17 6H3"/><path d="M21 12H3"/></svg>`;
 
 export const SEO = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list-check-icon lucide-list-check"><path d="M11 18H3"/><path d="m15 18 2 2 4-4"/><path d="M16 12H3"/><path d="M16 6H3"/></svg>`;
+
+export const SidebarView = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-columns2-icon lucide-columns-2"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M12 3v18"/></svg>`;
diff --git a/src/pages/content/ui/StatusIndicator.tsx b/src/pages/content/ui/StatusIndicator.tsx
index c9c2aae..15d6b03 100644
--- a/src/pages/content/ui/StatusIndicator.tsx
+++ b/src/pages/content/ui/StatusIndicator.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from 'react';
 import { FEATURES } from '@src/shared/config/features';
-import { AltTag, Command, ImageScale, SEO, TextCounter } from '@pages/content/injected/components/SVG';
+import { AltTag, Command, ImageScale, SEO, SidebarView, TextCounter } from '@pages/content/injected/components/SVG';
 
 const FEATURE_ICONS: Record<string, string> = {
   func_0: Command,
@@ -8,6 +8,7 @@ const FEATURE_ICONS: Record<string, string> = {
   func_2: ImageScale,
   func_3: TextCounter,
   func_4: SEO,
+  func_5: SidebarView,
 };
 
 const features = FEATURES.map(f => ({

From 64227cd5a1714c3fadbacf6d347fbe32a89978ce Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Sat, 28 Mar 2026 13:14:39 +0900
Subject: [PATCH 16/23] =?UTF-8?q?feat:=20=EB=AF=B8=EB=A6=AC=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=EC=97=90=20=ED=88=B4=ED=8C=81?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/content/injected/previewSideView.ts | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/pages/content/injected/previewSideView.ts b/src/pages/content/injected/previewSideView.ts
index fee632f..7fd13e2 100644
--- a/src/pages/content/injected/previewSideView.ts
+++ b/src/pages/content/injected/previewSideView.ts
@@ -1,4 +1,5 @@
 import { $, create$ } from '@root/utils/dom/utilDOM';
+import { createTooltip, showTooltip, hideTooltip } from '@pages/content/util/tooltip';
 
 const MENU_ITEM_ID = 'sh-side-view-menu-item';
 const TOOLBAR_BTN_ID = 'sh-side-view-toolbar-btn';
@@ -194,20 +195,45 @@ const toggleSideView = () => {
     activateSideView();
   }
   updateMenuItemLabel();
+  updateToolbarButtonIcon();
 };
 
 // ── 툴바 버튼 ────────────────────────────────────────────────────
 
+// altTager와 동일한 fill 아웃라인 방식 — 외곽 CW + 내부 CCW = 테두리만 채움
+const SVG_OPEN =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17" height="17">' +
+  '<path d="M21,2H3C2.449,2,2,2.449,2,3V21c0,.551,.449,1,1,1H21c.551,0,1-.449,1-1V3C22,2.449,21.551,2,21,2Z' +
+  'M3,22c-.551,0-1-.449-1-1V3c0-.551,.449-1,1-1H11V22H3Z' +
+  'M12,22V2h9c.551,0,1,.449,1,1V21c0,.551-.449,1-1,1H12Z"/>' +
+  '</svg>';
+
+const SVG_CLOSE =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17" height="17">' +
+  '<path d="M13.414,12l4.293-4.293c.391-.391,.391-1.023,0-1.414s-1.023-.391-1.414,0L12,10.586,7.707,6.293c-.391-.391-1.023-.391-1.414,0s-.391,1.023,0,1.414L10.586,12l-4.293,4.293c-.391,.391-.391,1.023,0,1.414,.195,.195,.451,.293,.707,.293s.512-.098,.707-.293L12,13.414l4.293,4.293c.195,.195,.451,.293,.707,.293s.512-.098,.707-.293c.391-.391,.391-1.023,0-1.414L13.414,12Z"/>' +
+  '</svg>';
+
+const updateToolbarButtonIcon = () => {
+  const btn = document.getElementById(TOOLBAR_BTN_ID);
+  if (!btn) return;
+  const inner = btn.querySelector('button');
+  if (inner) inner.innerHTML = sideViewActive ? SVG_CLOSE : SVG_OPEN;
+};
+
 const injectToolbarButton = (anchorEl: Element) => {
   if (document.getElementById(TOOLBAR_BTN_ID)) return;
 
   const btn = create$('div', {
     id: TOOLBAR_BTN_ID,
     class: 'mce-widget mce-btn mce-menubtn mce-fixed-width',
-    innerHTML:
-      '<button><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="3" x2="12" y2="21"/></svg></button>',
+    innerHTML: `<button>${SVG_OPEN}</button>`,
   });
 
+  const tooltip = createTooltip(chrome.i18n.getMessage('menu_side_view_on'));
+  document.body.appendChild(tooltip);
+
+  btn.addEventListener('mouseover', () => showTooltip(tooltip, btn));
+  btn.addEventListener('mouseout', () => hideTooltip(tooltip));
   btn.addEventListener('click', toggleSideView);
   anchorEl.insertAdjacentElement('afterend', btn);
 };

From 3d5e79bfc572a469579cacff6db5c3e51b89b351 Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Sat, 28 Mar 2026 13:29:00 +0900
Subject: [PATCH 17/23] =?UTF-8?q?feat:=20=EC=B6=94=EA=B0=80=EB=90=98?=
 =?UTF-8?q?=EB=8A=94=20=EB=8F=84=EA=B5=AC=20=EC=88=9C=EC=84=9C=EB=B3=B4?=
 =?UTF-8?q?=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/content/injected/imageSize.ts       |  5 +++--
 src/pages/content/injected/index.ts           |  6 +++---
 src/pages/content/injected/previewSideView.ts | 18 +++++++++++++++++-
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/pages/content/injected/imageSize.ts b/src/pages/content/injected/imageSize.ts
index 7d3eed8..d3795f8 100644
--- a/src/pages/content/injected/imageSize.ts
+++ b/src/pages/content/injected/imageSize.ts
@@ -10,8 +10,9 @@ async function imageSize() {
       return;
     }
   }
-  const menu = document.body.querySelector('#mceu_18');
+  const anchor = document.body.querySelector('#altTager') ?? document.body.querySelector('#mceu_18');
   const imageSizer = document.createElement('div');
+  imageSizer.id = 'sh-image-sizer-btn';
   imageSizer.classList.add('mce-widget', 'mce-btn', 'mce-menubtn', 'mce-fixed-width');
 
   const button = document.createElement('button');
@@ -19,7 +20,7 @@ async function imageSize() {
 
   button.innerHTML =
     '<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="17" height="17"><path d="M9.854,14.854L1.707,23h6.293v1H1.5c-.827,0-1.5-.673-1.5-1.5v-6.5H1v6.293L9.146,14.146l.707,.707ZM22.5,0h-6.5V1h6.293L14.146,9.146l.707,.707L23,1.707v6.293h1V1.5c0-.827-.673-1.5-1.5-1.5Z"/></svg>';
-  menu.insertAdjacentElement('afterend', imageSizer);
+  anchor.insertAdjacentElement('afterend', imageSizer);
 
   // Tooltip 생성
   const tooltip = createTooltip(chrome.i18n.getMessage('tooltip_image_resizer'));
diff --git a/src/pages/content/injected/index.ts b/src/pages/content/injected/index.ts
index 7591aa7..497efc0 100644
--- a/src/pages/content/injected/index.ts
+++ b/src/pages/content/injected/index.ts
@@ -7,11 +7,11 @@ import previewSideView from '@pages/content/injected/previewSideView';
 
 (async () => {
   await keyMapping();
-  await imageSize();
-  await altTager();
+  await altTager(); // 1. #mceu_18 뒤에 삽입
+  await imageSize(); // 2. #altTager 뒤에 삽입
   await checkSEO();
   await textCounter();
-  await previewSideView();
+  await previewSideView(); // 3. #sh-image-sizer-btn 뒤에 삽입
 })();
 
 console.log('StoryHelper Load Complete');
diff --git a/src/pages/content/injected/previewSideView.ts b/src/pages/content/injected/previewSideView.ts
index 7fd13e2..8742289 100644
--- a/src/pages/content/injected/previewSideView.ts
+++ b/src/pages/content/injected/previewSideView.ts
@@ -290,7 +290,7 @@ const previewSideView = async () => {
   // React 컴포넌트에서 panel iframe ID 요청 시 응답 (필요 시 확장)
   window.dispatchEvent(new CustomEvent('sh:sideview-ready', { detail: { iframeId: PANEL_IFRAME_ID } }));
 
-  const anchor = await waitForElement('#altTager');
+  const anchor = await waitForFirstElement(['#sh-image-sizer-btn', '#altTager', '#mceu_18']);
   injectToolbarButton(anchor);
 
   const editorModeBtn = await waitForElement('#editor-mode-layer-btn');
@@ -306,6 +306,22 @@ const previewSideView = async () => {
   if (existingStack) injectMenuItemTo(existingStack);
 };
 
+// 여러 셀렉터 중 먼저 발견되는 요소 반환 (우선순위 폴백)
+const waitForFirstElement = (selectors: string[]): Promise<Element> =>
+  new Promise(resolve => {
+    const found = selectors.map(s => $(s, document.body)).find(Boolean);
+    if (found) return resolve(found);
+
+    const observer = new MutationObserver(() => {
+      const el = selectors.map(s => $(s, document.body)).find(Boolean);
+      if (el) {
+        observer.disconnect();
+        resolve(el);
+      }
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+  });
+
 const waitForElement = (selector: string): Promise<Element> =>
   new Promise(resolve => {
     const el = $(selector, document.body);

From 9d4e379b3c76ecbcaea37591bda0e57d8d7e213f Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Sat, 28 Mar 2026 13:43:10 +0900
Subject: [PATCH 18/23] =?UTF-8?q?feat:=20=EC=83=88=EB=A1=9C=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=EB=90=98=EB=8A=94=20=EB=8F=84=EA=B5=AC=EB=93=A4?=
 =?UTF-8?q?=EC=97=90=20=EB=8C=80=ED=95=B4=EC=84=9C=20=EC=B4=88=EA=B8=B0=20?=
 =?UTF-8?q?=EC=98=A8=EB=B3=B4=EB=94=A9=EC=8B=9C=20=ED=8E=84=EC=8A=A4?=
 =?UTF-8?q?=ED=9A=A8=EA=B3=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/content/injected/previewSideView.ts | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)

diff --git a/src/pages/content/injected/previewSideView.ts b/src/pages/content/injected/previewSideView.ts
index 8742289..f403bfb 100644
--- a/src/pages/content/injected/previewSideView.ts
+++ b/src/pages/content/injected/previewSideView.ts
@@ -304,8 +304,73 @@ const previewSideView = async () => {
 
   const existingStack = editorModeBtn.querySelector('.mce-floatpanel .mce-stack-layout');
   if (existingStack) injectMenuItemTo(existingStack);
+
+  // 첫 방문 온보딩 강조 효과
+  const { sh_onboarded } = await chrome.storage.local.get('sh_onboarded');
+  if (!sh_onboarded) {
+    await showOnboardingHighlight();
+    await chrome.storage.local.set({ sh_onboarded: true });
+  }
 };
 
+const ONBOARDING_STYLE_ID = 'sh-onboarding-style';
+const ONBOARDING_OVERLAY_ID = 'sh-onboarding-overlay';
+
+const showOnboardingHighlight = (): Promise<void> =>
+  new Promise(resolve => {
+    const selectors = ['#altTager', '#sh-image-sizer-btn', `#${TOOLBAR_BTN_ID}`];
+    const els = selectors
+      .map(s => document.querySelector<HTMLElement>(s))
+      .filter((el): el is HTMLElement => el !== null);
+
+    if (els.length === 0) {
+      resolve();
+      return;
+    }
+
+    // 세 버튼을 감싸는 단일 바운딩 박스 계산
+    const rects = els.map(el => el.getBoundingClientRect());
+    const top = Math.min(...rects.map(r => r.top));
+    const left = Math.min(...rects.map(r => r.left));
+    const right = Math.max(...rects.map(r => r.right));
+    const bottom = Math.max(...rects.map(r => r.bottom));
+    const pad = 4;
+
+    // keyframe 주입
+    const style = document.createElement('style');
+    style.id = ONBOARDING_STYLE_ID;
+    style.textContent = `
+      @keyframes sh-onboarding-pulse {
+        0%, 100% { box-shadow: 0 0 0 0 rgba(50,94,75,0.8); }
+        50%       { box-shadow: 0 0 0 6px rgba(50,94,75,0); }
+      }
+    `;
+    document.head.appendChild(style);
+
+    // 단일 오버레이 생성
+    const overlay = document.createElement('div');
+    overlay.id = ONBOARDING_OVERLAY_ID;
+    Object.assign(overlay.style, {
+      position: 'fixed',
+      top: `${top - pad}px`,
+      left: `${left - pad}px`,
+      width: `${right - left + pad * 2}px`,
+      height: `${bottom - top + pad * 2}px`,
+      border: '2px solid #325e4b',
+      borderRadius: '4px',
+      pointerEvents: 'none',
+      zIndex: '9999',
+      animation: 'sh-onboarding-pulse 1.2s ease-in-out 3',
+    });
+    document.body.appendChild(overlay);
+
+    setTimeout(() => {
+      overlay.remove();
+      document.getElementById(ONBOARDING_STYLE_ID)?.remove();
+      resolve();
+    }, 3800);
+  });
+
 // 여러 셀렉터 중 먼저 발견되는 요소 반환 (우선순위 폴백)
 const waitForFirstElement = (selectors: string[]): Promise<Element> =>
   new Promise(resolve => {

From 6e31302ee368d8305c129b96bb4c786b79f29e21 Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Sat, 28 Mar 2026 15:01:45 +0900
Subject: [PATCH 19/23] =?UTF-8?q?feat:=20=EC=B2=AB=20=EC=84=A4=EC=B9=98?=
 =?UTF-8?q?=EC=8B=9C=20=EA=B8=B0=EB=B3=B8=20=EA=B0=92=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=AA=A8=EB=91=90=20true=EB=A1=9C=20=EB=90=98=EC=96=B4?=
 =?UTF-8?q?=EC=9E=88=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/content/injected/altTager.ts        | 6 +-----
 src/pages/content/injected/checkSEO.ts        | 6 +-----
 src/pages/content/injected/imageSize.ts       | 6 +-----
 src/pages/content/injected/keymap.ts          | 6 +-----
 src/pages/content/injected/previewSideView.ts | 2 +-
 src/pages/content/injected/textCounter.ts     | 6 +-----
 src/pages/content/ui/StatusIndicator.tsx      | 2 +-
 7 files changed, 7 insertions(+), 27 deletions(-)

diff --git a/src/pages/content/injected/altTager.ts b/src/pages/content/injected/altTager.ts
index d413f97..515c9fd 100644
--- a/src/pages/content/injected/altTager.ts
+++ b/src/pages/content/injected/altTager.ts
@@ -3,11 +3,7 @@ import { createTooltip, showTooltip, hideTooltip } from '@pages/content/util/too
 
 async function altTager() {
   const result = await chrome.storage.local.get('func_1');
-  if (typeof result.func_1 === 'boolean') {
-    if (!result.func_1) {
-      return;
-    }
-  }
+  if (result.func_1 === false) return;
   let altTag = '';
 
   const menu = $('#mceu_18', document.body);
diff --git a/src/pages/content/injected/checkSEO.ts b/src/pages/content/injected/checkSEO.ts
index 62f0681..8edc2e0 100644
--- a/src/pages/content/injected/checkSEO.ts
+++ b/src/pages/content/injected/checkSEO.ts
@@ -7,11 +7,7 @@ const checkSEO = async () => {
   let hasShownReviewPromptThisSession = false;
   const result = await chrome.storage.local.get('func_4');
 
-  if (typeof result.func_4 === 'boolean') {
-    if (!result.func_4) {
-      return;
-    }
-  }
+  if (result.func_4 === false) return;
 
   const post: Document = getEditorDocument();
   const OPTIMIZED_SVG =
diff --git a/src/pages/content/injected/imageSize.ts b/src/pages/content/injected/imageSize.ts
index d3795f8..426a22e 100644
--- a/src/pages/content/injected/imageSize.ts
+++ b/src/pages/content/injected/imageSize.ts
@@ -5,11 +5,7 @@ import { getEditorDocument } from '@root/utils/dom/utilDOM';
 
 async function imageSize() {
   const result = await chrome.storage.local.get('func_2');
-  if (typeof result.func_2 === 'boolean') {
-    if (!result.func_2) {
-      return;
-    }
-  }
+  if (result.func_2 === false) return;
   const anchor = document.body.querySelector('#altTager') ?? document.body.querySelector('#mceu_18');
   const imageSizer = document.createElement('div');
   imageSizer.id = 'sh-image-sizer-btn';
diff --git a/src/pages/content/injected/keymap.ts b/src/pages/content/injected/keymap.ts
index 9074aeb..28dc91b 100644
--- a/src/pages/content/injected/keymap.ts
+++ b/src/pages/content/injected/keymap.ts
@@ -10,11 +10,7 @@ interface Shortcut {
 
 async function keyMapping() {
   const result = await chrome.storage.local.get('func_0');
-  if (typeof result.func_0 === 'boolean') {
-    if (!result.func_0) {
-      return;
-    }
-  }
+  if (result.func_0 === false) return;
 
   const editor = $('#tinymce', getEditorDocument());
 
diff --git a/src/pages/content/injected/previewSideView.ts b/src/pages/content/injected/previewSideView.ts
index f403bfb..ab06134 100644
--- a/src/pages/content/injected/previewSideView.ts
+++ b/src/pages/content/injected/previewSideView.ts
@@ -279,7 +279,7 @@ const injectMenuItemTo = (panel: Element) => {
 
 const previewSideView = async () => {
   const result = await chrome.storage.local.get('func_5');
-  if (typeof result.func_5 === 'boolean' && !result.func_5) return;
+  if (result.func_5 === false) return;
 
   // React 컴포넌트에서 새로고침 요청 수신
   window.addEventListener('sh:sideview-refresh', () => {
diff --git a/src/pages/content/injected/textCounter.ts b/src/pages/content/injected/textCounter.ts
index ec91e3b..ad6a592 100644
--- a/src/pages/content/injected/textCounter.ts
+++ b/src/pages/content/injected/textCounter.ts
@@ -3,11 +3,7 @@ import { getEditorElement } from '@root/utils/dom/utilDOM';
 
 async function textCounter() {
   const result = await chrome.storage.local.get('func_3');
-  if (typeof result.func_3 === 'boolean') {
-    if (!result.func_3) {
-      return;
-    }
-  }
+  if (result.func_3 === false) return;
 
   const post = getEditorElement();
 
diff --git a/src/pages/content/ui/StatusIndicator.tsx b/src/pages/content/ui/StatusIndicator.tsx
index 15d6b03..6d5d078 100644
--- a/src/pages/content/ui/StatusIndicator.tsx
+++ b/src/pages/content/ui/StatusIndicator.tsx
@@ -27,7 +27,7 @@ export default function StatusIndicator() {
     chrome.storage.local.get([...keys, 'statusIndicator_minimized'], result => {
       const map: Record<string, boolean> = {};
       keys.forEach(k => {
-        map[k] = result[k] === true;
+        map[k] = result[k] !== false;
       });
       setEnabledMap(map);
       setIsMinimized(result.statusIndicator_minimized === true);

From a129db0486ce22221e228f198c83c6e1fe9e06a5 Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Sat, 28 Mar 2026 15:09:50 +0900
Subject: [PATCH 20/23] =?UTF-8?q?fix:=20test=20=EB=B6=88=EC=9D=BC=EC=B9=98?=
 =?UTF-8?q?=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/content/ui/app.test.tsx | 10 ++--------
 test-utils/vitest.setup.js        | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/pages/content/ui/app.test.tsx b/src/pages/content/ui/app.test.tsx
index 2a6c5ab..f45f8db 100644
--- a/src/pages/content/ui/app.test.tsx
+++ b/src/pages/content/ui/app.test.tsx
@@ -3,14 +3,8 @@ import { render, screen } from '@testing-library/react';
 import App from '@pages/content/ui/app';
 
 describe('appTest', () => {
-  test('render text', () => {
-    // given
-    const text = 'content view';
-
-    // when
+  test('renders without crashing', () => {
     render(<App />);
-
-    // then
-    screen.getByText(text);
+    screen.getByText('StoryHelper');
   });
 });
diff --git a/test-utils/vitest.setup.js b/test-utils/vitest.setup.js
index 43c1d85..0a9f6f5 100644
--- a/test-utils/vitest.setup.js
+++ b/test-utils/vitest.setup.js
@@ -1,2 +1,22 @@
 // Do what you need to set up your test
 console.log('setup test: vitest.setup.js');
+
+// Chrome extension API mock
+global.chrome = {
+  i18n: {
+    getMessage: key => key,
+  },
+  storage: {
+    local: {
+      get: () => Promise.resolve({}),
+      set: () => Promise.resolve(),
+    },
+    onChanged: {
+      addListener: () => {},
+      removeListener: () => {},
+    },
+  },
+  runtime: {
+    getURL: path => path,
+  },
+};

From 0d7f589e8ddff7278e48c6feb3d2666c25821f13 Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Sat, 28 Mar 2026 17:05:29 +0900
Subject: [PATCH 21/23] =?UTF-8?q?fix:=20=EA=B8=B0=EB=8A=A5=20=ED=88=B4?=
 =?UTF-8?q?=ED=8C=81=EB=A9=94=EC=8B=9C=EC=A7=80=EA=B0=80=20=EC=82=AC?=
 =?UTF-8?q?=EC=9D=B4=EB=93=9C=EB=B7=B0=EC=97=90=20=EA=B0=80=EB=A0=A4?=
 =?UTF-8?q?=EC=A7=80=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/content/util/tooltip.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/content/util/tooltip.ts b/src/pages/content/util/tooltip.ts
index 70ce9d6..760e65b 100644
--- a/src/pages/content/util/tooltip.ts
+++ b/src/pages/content/util/tooltip.ts
@@ -19,7 +19,7 @@ export const createTooltip = (text: string): HTMLDivElement => {
   tooltip.style.borderRadius = '2px';
   tooltip.style.fontSize = '11px';
   tooltip.style.visibility = 'hidden';
-  tooltip.style.zIndex = '1000';
+  tooltip.style.zIndex = '10000';
   tooltip.style.display = 'flex';
   tooltip.style.alignItems = 'center';
   tooltip.style.gap = '4px';

From 554b60290b72c5f0e977b202fdb2b1d74a8a223b Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Sat, 28 Mar 2026 17:08:35 +0900
Subject: [PATCH 22/23] =?UTF-8?q?feat:=20=EB=AF=B8=EB=A6=AC=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0=20=EC=83=81=EB=8B=A8=20=ED=97=A4=EB=8D=94=EC=97=90=20?=
 =?UTF-8?q?=EB=8B=AB=EA=B8=B0=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/content/injected/previewSideView.ts |  3 +++
 src/pages/content/ui/SideViewPanel.tsx        | 17 +++++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/src/pages/content/injected/previewSideView.ts b/src/pages/content/injected/previewSideView.ts
index ab06134..828f975 100644
--- a/src/pages/content/injected/previewSideView.ts
+++ b/src/pages/content/injected/previewSideView.ts
@@ -287,6 +287,9 @@ const previewSideView = async () => {
     loadPreview();
   });
 
+  // React 컴포넌트 닫기 버튼에서 요청 수신
+  window.addEventListener('sh:sideview-close-request', toggleSideView);
+
   // React 컴포넌트에서 panel iframe ID 요청 시 응답 (필요 시 확장)
   window.dispatchEvent(new CustomEvent('sh:sideview-ready', { detail: { iframeId: PANEL_IFRAME_ID } }));
 
diff --git a/src/pages/content/ui/SideViewPanel.tsx b/src/pages/content/ui/SideViewPanel.tsx
index 87c2826..6b160be 100644
--- a/src/pages/content/ui/SideViewPanel.tsx
+++ b/src/pages/content/ui/SideViewPanel.tsx
@@ -120,6 +120,23 @@ const SideViewPanel = () => {
       <div style={headerStyle}>
         <span>{loading ? '리렌더링 중...' : '미리보기'}</span>
         {loading && <span style={dotStyle} />}
+        <button
+          onClick={() => window.dispatchEvent(new CustomEvent('sh:sideview-close-request'))}
+          style={{
+            marginLeft: 'auto',
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            padding: '2px 4px',
+            color: '#999',
+            fontSize: '16px',
+            lineHeight: 1,
+            display: 'flex',
+            alignItems: 'center',
+          }}
+          title="닫기">
+          ✕
+        </button>
       </div>
       <iframe
         id={PANEL_IFRAME_ID}

From f37f48d58b72e6c00aab77dd4a52c9ec32d69d47 Mon Sep 17 00:00:00 2001
From: JeongwooSeo <shipfriend4371@naver.com>
Date: Sat, 28 Mar 2026 17:32:22 +0900
Subject: [PATCH 23/23] =?UTF-8?q?fix:=20=EB=AF=B8=EB=A6=AC=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=EC=9C=BC=EB=A1=9C=EC=9D=B8?=
 =?UTF-8?q?=ED=95=B4=20=EC=97=90=EB=94=94=ED=84=B0=20=EB=B3=80=EA=B2=BD?=
 =?UTF-8?q?=EC=9D=B4=20=EB=8F=99=EC=9E=91=ED=95=98=EC=A7=80=20=EC=95=8A?=
 =?UTF-8?q?=EB=8D=98=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/content/injected/previewSideView.ts | 79 +++----------------
 1 file changed, 11 insertions(+), 68 deletions(-)

diff --git a/src/pages/content/injected/previewSideView.ts b/src/pages/content/injected/previewSideView.ts
index 828f975..2f6d91a 100644
--- a/src/pages/content/injected/previewSideView.ts
+++ b/src/pages/content/injected/previewSideView.ts
@@ -1,7 +1,6 @@
 import { $, create$ } from '@root/utils/dom/utilDOM';
 import { createTooltip, showTooltip, hideTooltip } from '@pages/content/util/tooltip';
 
-const MENU_ITEM_ID = 'sh-side-view-menu-item';
 const TOOLBAR_BTN_ID = 'sh-side-view-toolbar-btn';
 const INTERCEPT_STYLE_ID = 'sh-preview-intercept-style';
 const PANEL_IFRAME_ID = 'sh-preview-iframe';
@@ -194,7 +193,6 @@ const toggleSideView = () => {
   } else {
     activateSideView();
   }
-  updateMenuItemLabel();
   updateToolbarButtonIcon();
 };
 
@@ -238,43 +236,6 @@ const injectToolbarButton = (anchorEl: Element) => {
   anchorEl.insertAdjacentElement('afterend', btn);
 };
 
-// ── 드롭다운 메뉴 ────────────────────────────────────────────────
-
-const updateMenuItemLabel = () => {
-  const menuItem = document.getElementById(MENU_ITEM_ID);
-  if (!menuItem) return;
-  const span = menuItem.querySelector('span.mce-text');
-  if (span) {
-    span.textContent = sideViewActive
-      ? chrome.i18n.getMessage('menu_side_view_off')
-      : chrome.i18n.getMessage('menu_side_view_on');
-  }
-};
-
-const injectMenuItemTo = (panel: Element) => {
-  if (panel.querySelector(`#${MENU_ITEM_ID}`)) return;
-
-  const menuItem = create$('div', {
-    id: MENU_ITEM_ID,
-    class: 'mce-menu-item mce-menu-item-normal mce-stack-layout-item',
-    attributes: { role: 'menuitem' },
-  });
-
-  const text = create$('span', {
-    class: 'mce-text',
-    textContent: chrome.i18n.getMessage('menu_side_view_on'),
-  });
-
-  menuItem.appendChild(text);
-  panel.appendChild(menuItem);
-
-  menuItem.addEventListener('click', () => {
-    toggleSideView();
-    const modeBtn = document.getElementById('editor-mode-layer-btn-open');
-    if (modeBtn) (modeBtn as HTMLButtonElement).click();
-  });
-};
-
 // ── 진입점 ───────────────────────────────────────────────────────
 
 const previewSideView = async () => {
@@ -294,20 +255,9 @@ const previewSideView = async () => {
   window.dispatchEvent(new CustomEvent('sh:sideview-ready', { detail: { iframeId: PANEL_IFRAME_ID } }));
 
   const anchor = await waitForFirstElement(['#sh-image-sizer-btn', '#altTager', '#mceu_18']);
+  if (!anchor) return;
   injectToolbarButton(anchor);
 
-  const editorModeBtn = await waitForElement('#editor-mode-layer-btn');
-
-  const observer = new MutationObserver(() => {
-    const stackLayout = editorModeBtn.querySelector('.mce-floatpanel .mce-stack-layout');
-    if (stackLayout) injectMenuItemTo(stackLayout);
-  });
-
-  observer.observe(editorModeBtn, { childList: true, subtree: true });
-
-  const existingStack = editorModeBtn.querySelector('.mce-floatpanel .mce-stack-layout');
-  if (existingStack) injectMenuItemTo(existingStack);
-
   // 첫 방문 온보딩 강조 효과
   const { sh_onboarded } = await chrome.storage.local.get('sh_onboarded');
   if (!sh_onboarded) {
@@ -374,36 +324,29 @@ const showOnboardingHighlight = (): Promise<void> =>
     }, 3800);
   });
 
-// 여러 셀렉터 중 먼저 발견되는 요소 반환 (우선순위 폴백)
-const waitForFirstElement = (selectors: string[]): Promise<Element> =>
+// 여러 셀렉터 중 먼저 발견되는 요소 반환 (우선순위 폴백, 최대 10초)
+const waitForFirstElement = (selectors: string[], timeoutMs = 10000): Promise<Element | null> =>
   new Promise(resolve => {
     const found = selectors.map(s => $(s, document.body)).find(Boolean);
     if (found) return resolve(found);
 
+    let timer: ReturnType<typeof setTimeout> | null = null;
+
     const observer = new MutationObserver(() => {
       const el = selectors.map(s => $(s, document.body)).find(Boolean);
       if (el) {
+        if (timer) clearTimeout(timer);
         observer.disconnect();
         resolve(el);
       }
     });
-    observer.observe(document.body, { childList: true, subtree: true });
-  });
-
-const waitForElement = (selector: string): Promise<Element> =>
-  new Promise(resolve => {
-    const el = $(selector, document.body);
-    if (el) return resolve(el);
-
-    const observer = new MutationObserver(() => {
-      const found = $(selector, document.body);
-      if (found) {
-        observer.disconnect();
-        resolve(found);
-      }
-    });
 
     observer.observe(document.body, { childList: true, subtree: true });
+
+    timer = setTimeout(() => {
+      observer.disconnect();
+      resolve(null);
+    }, timeoutMs);
   });
 
 export default previewSideView;