From 225aa22afc2f848b14b57fb0d9c8393cee2e4f66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=B0=EC=83=81=EB=B9=88?= <saokm5@gmail.com>
Date: Sat, 15 Aug 2026 20:10:04 +0900
Subject: [PATCH 1/3] fix(giscus): stop giscus widget from being hoisted into a
 hidden <head>
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

React 19 auto-hoists plain JSX <script src> tags into <head> for
dedup, and giscus's client.js appends its comment widget next to
wherever its own script tag landed — so the whole .giscus container
ended up inside <head> (display:none), collapsing the iframe to 0x0.
Never caught before because giscus had no real config until now.

Switch to next/script (renders at its JSX position instead of being
hoisted) and add the width/border rule giscus's own docs recommend
for .giscus-frame. Verified live: reactions, comment box, and
"GitHub으로 로그인" all render after this.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/app/globals.css                |  5 +++++
 src/components/giscus-comments.tsx | 24 ++++++++++++++----------
 2 files changed, 19 insertions(+), 10 deletions(-)
diff --git a/src/app/globals.css b/src/app/globals.css
index 62ecba2..c96b72e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -239,3 +239,8 @@
   color: inherit;
   text-decoration-line: none;
 }
+
+.giscus-frame {
+  width: 100%;
+  border: none;
+}
diff --git a/src/components/giscus-comments.tsx b/src/components/giscus-comments.tsx
index 60384c0..ce99444 100644
--- a/src/components/giscus-comments.tsx
+++ b/src/components/giscus-comments.tsx
@@ -1,3 +1,4 @@
+import Script from "next/script"
 import type { GiscusConfig } from "@/config/integrations"
 
 type GiscusCommentsProps = Readonly<{
@@ -11,21 +12,24 @@ export function GiscusComments({ config }: GiscusCommentsProps) {
 
   return (
     <section className="border-t border-border pt-8" aria-label="댓글">
-      <script
-        src="https://giscus.app/client.js"
-        data-repo={config.repo}
-        data-repo-id={config.repoId}
+      {/* 일반 JSX <script src>는 React 19가 중복 제거를 위해 <head>(display:none)로 끌어올려
+          giscus가 그 옆에 붙이는 댓글 DOM까지 숨겨버린다. next/script는 이 호이스팅을 피하고
+          렌더된 위치에 그대로 삽입한다. */}
+      <Script
+        crossOrigin="anonymous"
         data-category={config.category}
         data-category-id={config.categoryId}
-        data-mapping={config.mapping}
-        data-strict="0"
-        data-reactions-enabled="1"
         data-emit-metadata="0"
         data-input-position="bottom"
-        data-theme="preferred_color_scheme"
         data-lang="ko"
-        crossOrigin="anonymous"
-        async
+        data-mapping={config.mapping}
+        data-reactions-enabled="1"
+        data-repo={config.repo}
+        data-repo-id={config.repoId}
+        data-strict="0"
+        data-theme="preferred_color_scheme"
+        src="https://giscus.app/client.js"
+        strategy="lazyOnload"
       />
     </section>
   )

From 6dd7b784078f78a0e39a62d4d947ec0f8d13339a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=B0=EC=83=81=EB=B9=88?= <saokm5@gmail.com>
Date: Sat, 15 Aug 2026 20:15:21 +0900
Subject: [PATCH 2/3] fix(giscus): mount the widget into a ref'd container
 instead of body
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

next/script's afterInteractive/lazyOnload strategies append the
<script> element to document.body regardless of its JSX position, so
giscus's widget (which it inserts next to its own script tag) landed
as a direct child of <body> — outside the post card, with no left/
right padding to match the rest of the content.

Switch to a client component that creates the script element itself
and appends it into a ref'd <section>, so the widget is guaranteed to
render inside our layout. Verified: the comment box and login button
now line up with the surrounding prose instead of running edge-to-edge.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/giscus-comments.tsx | 64 +++++++++++++++++++-----------
 1 file changed, 40 insertions(+), 24 deletions(-)

diff --git a/src/components/giscus-comments.tsx b/src/components/giscus-comments.tsx
index ce99444..ffa0250 100644
--- a/src/components/giscus-comments.tsx
+++ b/src/components/giscus-comments.tsx
@@ -1,4 +1,6 @@
-import Script from "next/script"
+"use client"
+
+import { useEffect, useRef } from "react"
 import type { GiscusConfig } from "@/config/integrations"
 
 type GiscusCommentsProps = Readonly<{
@@ -6,31 +8,45 @@ type GiscusCommentsProps = Readonly<{
 }>
 
 export function GiscusComments({ config }: GiscusCommentsProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const container = containerRef.current
+
+    if (container === null || !config.enabled) {
+      return
+    }
+
+    const script = document.createElement("script")
+
+    script.src = "https://giscus.app/client.js"
+    script.async = true
+    script.crossOrigin = "anonymous"
+    script.setAttribute("data-repo", config.repo)
+    script.setAttribute("data-repo-id", config.repoId)
+    script.setAttribute("data-category", config.category)
+    script.setAttribute("data-category-id", config.categoryId)
+    script.setAttribute("data-mapping", config.mapping)
+    script.setAttribute("data-strict", "0")
+    script.setAttribute("data-reactions-enabled", "1")
+    script.setAttribute("data-emit-metadata", "0")
+    script.setAttribute("data-input-position", "bottom")
+    script.setAttribute("data-theme", "preferred_color_scheme")
+    script.setAttribute("data-lang", "ko")
+    container.appendChild(script)
+
+    return () => {
+      container.replaceChildren()
+    }
+  }, [config])
+
   if (!config.enabled) {
     return null
   }
 
-  return (
-    <section className="border-t border-border pt-8" aria-label="댓글">
-      {/* 일반 JSX <script src>는 React 19가 중복 제거를 위해 <head>(display:none)로 끌어올려
-          giscus가 그 옆에 붙이는 댓글 DOM까지 숨겨버린다. next/script는 이 호이스팅을 피하고
-          렌더된 위치에 그대로 삽입한다. */}
-      <Script
-        crossOrigin="anonymous"
-        data-category={config.category}
-        data-category-id={config.categoryId}
-        data-emit-metadata="0"
-        data-input-position="bottom"
-        data-lang="ko"
-        data-mapping={config.mapping}
-        data-reactions-enabled="1"
-        data-repo={config.repo}
-        data-repo-id={config.repoId}
-        data-strict="0"
-        data-theme="preferred_color_scheme"
-        src="https://giscus.app/client.js"
-        strategy="lazyOnload"
-      />
-    </section>
-  )
+  // next/script와 일반 <script> JSX 태그는 모두 렌더된 위치를 무시하고
+  // 각각 body 끝, 호이스팅된 head로 스크립트를 옮긴다. giscus는 자기 스크립트
+  // 옆에 위젯 DOM을 꽂으므로, 위치가 옮겨지면 위젯도 우리 레이아웃 밖으로 나간다.
+  // ref가 가리키는 이 컨테이너에 직접 스크립트를 넣어 위치를 고정한다.
+  return <section aria-label="댓글" className="border-t border-border pt-8" ref={containerRef} />
 }

From 0f4e1086f7a513bd99359b6b7a28b5a5c81c88d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=B0=EC=83=81=EB=B9=88?= <saokm5@gmail.com>
Date: Sat, 15 Aug 2026 20:24:16 +0900
Subject: [PATCH 3/3] fix(giscus): follow the site's own theme instead of OS
 preference
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

data-theme="preferred_color_scheme" only reads prefers-color-scheme,
but this site's theme switcher is a custom implementation (no
next-themes) that toggles a "dark" class on <html> and can be set
independently of the OS. giscus never saw that class, so it stayed
on whatever the OS reported regardless of the in-app toggle.

Read the "dark" class for the initial data-theme, and watch it with a
MutationObserver to push live updates into the iframe via giscus's
setConfig postMessage API — no remount needed. Verified live: toggling
the site's theme switches the widget instantly without a reload.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/giscus-comments.tsx | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/giscus-comments.tsx b/src/components/giscus-comments.tsx
index ffa0250..a2b2d31 100644
--- a/src/components/giscus-comments.tsx
+++ b/src/components/giscus-comments.tsx
@@ -7,6 +7,14 @@ type GiscusCommentsProps = Readonly<{
   config: GiscusConfig
 }>
 
+const GISCUS_ORIGIN = "https://giscus.app"
+
+// 사이트 테마는 next-themes가 아니라 <html class="dark"> 토글로 직접 관리된다(features/theme).
+// giscus의 data-theme="preferred_color_scheme"는 OS 설정만 보고, 이 클래스를 모른다.
+function resolveGiscusTheme(): "light" | "dark" {
+  return document.documentElement.classList.contains("dark") ? "dark" : "light"
+}
+
 export function GiscusComments({ config }: GiscusCommentsProps) {
   const containerRef = useRef<HTMLDivElement>(null)
 
@@ -31,11 +39,25 @@ export function GiscusComments({ config }: GiscusCommentsProps) {
     script.setAttribute("data-reactions-enabled", "1")
     script.setAttribute("data-emit-metadata", "0")
     script.setAttribute("data-input-position", "bottom")
-    script.setAttribute("data-theme", "preferred_color_scheme")
+    script.setAttribute("data-theme", resolveGiscusTheme())
     script.setAttribute("data-lang", "ko")
     container.appendChild(script)
 
+    // 테마가 바뀌어도 iframe은 다시 만들지 않고, giscus 자체 프로토콜로 실시간 전환한다.
+    // https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md#isetconfigmessage
+    const observer = new MutationObserver(() => {
+      const iframe = container.querySelector<HTMLIFrameElement>("iframe.giscus-frame")
+
+      iframe?.contentWindow?.postMessage(
+        { giscus: { setConfig: { theme: resolveGiscusTheme() } } },
+        GISCUS_ORIGIN,
+      )
+    })
+
+    observer.observe(document.documentElement, { attributeFilter: ["class"], attributes: true })
+
     return () => {
+      observer.disconnect()
       container.replaceChildren()
     }
   }, [config])
