From 8dcb81f5af142e14a46a60aab4e37ac7c79d3b24 Mon Sep 17 00:00:00 2001
From: spde3289 <spde3289@naver.com>
Date: Tue, 3 Mar 2026 16:57:50 +0900
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=ED=85=8C=EB=A7=88=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EC=8A=A4=ED=81=AC=EB=A6=BD=ED=8A=B8=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/_components/ThemeScript.tsx | 23 +++++++++++++++++++++++
 src/app/layout.tsx                  |  7 ++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 src/app/_components/ThemeScript.tsx
diff --git a/src/app/_components/ThemeScript.tsx b/src/app/_components/ThemeScript.tsx
new file mode 100644
index 0000000..8530c45
--- /dev/null
+++ b/src/app/_components/ThemeScript.tsx
@@ -0,0 +1,23 @@
+export const ThemeScript = () => {
+  const codeToRunOnClient = `(() => {
+    try {
+      const storedTheme = localStorage.getItem('theme');
+      const theme = storedTheme === 'light' || storedTheme === 'dark' ? storedTheme : 'system';
+
+      const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const resolvedTheme = theme === 'system' ? (systemPrefersDark ? 'dark' : 'light') : theme;
+
+      if (resolvedTheme === 'dark') {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+    } catch (e) {
+      console.error(e)
+    }
+  })();`;
+
+  return <script dangerouslySetInnerHTML={{ __html: codeToRunOnClient }} />;
+};
+
+export default ThemeScript;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3f1e9c2..b21360a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,9 +1,11 @@
+// app/layout.tsx
 import Header from "@/app/_components/common/Header";
 import ScrollToTopButton from "@/components/ScrolltoTopButton";
 import { ThemeProvider } from "@/contexts/ThemeContext";
 import { GoogleAnalytics } from "@next/third-parties/google";
 import type { Metadata } from "next";
 import Footer from "./_components/common/Footer";
+import ThemeScript from "./_components/ThemeScript";
 import "./globals.css";
 
 const GA_ID = process.env.NEXT_PUBLIC_GA_ID;
@@ -20,7 +22,10 @@ const RootLayout = ({
   children: React.ReactNode;
 }>) => {
   return (
-    <html lang="ko">
+    <html lang="ko" suppressHydrationWarning>
+      <head>
+        <ThemeScript />
+      </head>
       <body className={` bg-white dark:bg-neutral-900 dark:text-white/90`}>
         {/* Google Analytics Script */}
         {GA_ID && <GoogleAnalytics gaId={GA_ID} />}

From 5e4d845ab8a63473c73f7261003588cface74b60 Mon Sep 17 00:00:00 2001
From: spde3289 <spde3289@naver.com>
Date: Tue, 3 Mar 2026 16:58:41 +0900
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=ED=85=8C=EB=A7=88=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=EC=8B=9C=20=EC=83=89=EC=83=81=20=EC=95=A0=EB=8B=88?=
 =?UTF-8?q?=EB=A9=94=EC=9D=B4=EC=85=98=20=20=ED=9A=A8=EA=B3=BC=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/contexts/ThemeContext.tsx | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx
index 75f17af..d9c1e2a 100644
--- a/src/contexts/ThemeContext.tsx
+++ b/src/contexts/ThemeContext.tsx
@@ -27,12 +27,31 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
   const applyTheme = useCallback((t: Theme) => {
     const isSystem = t === "system";
     const systemPrefersDark = window.matchMedia(
-      "(prefers-color-scheme: dark)"
+      "(prefers-color-scheme: dark)",
     ).matches;
     const finalTheme = isSystem ? (systemPrefersDark ? "dark" : "light") : t;
 
     setResolvedTheme(finalTheme);
+
+    const css = document.createElement("style");
+    css.appendChild(
+      document.createTextNode(
+        `* {
+        -webkit-transition: none !important;
+        -moz-transition: none !important;
+        -o-transition: none !important;
+        -ms-transition: none !important;
+        transition: none !important;
+      }`,
+      ),
+    );
+    document.head.appendChild(css);
+
     document.documentElement.classList.toggle("dark", finalTheme === "dark");
+
+    window.getComputedStyle(css).opacity;
+
+    document.head.removeChild(css);
   }, []);
 
   const setTheme = useCallback(
@@ -41,7 +60,7 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
       localStorage.setItem("theme", newTheme);
       applyTheme(newTheme);
     },
-    [applyTheme]
+    [applyTheme],
   );
 
   // 초기 테마 설정 + 시스템 테마 변경 감지
@@ -60,7 +79,7 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
 
   const value = useMemo(
     () => ({ theme, resolvedTheme, setTheme }),
-    [theme, resolvedTheme, setTheme]
+    [theme, resolvedTheme, setTheme],
   );
 
   return (

From 22037a046aebc3891cc5a154e593deb8b1cba951 Mon Sep 17 00:00:00 2001
From: spde3289 <spde3289@naver.com>
Date: Tue, 3 Mar 2026 17:05:59 +0900
Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?=
 =?UTF-8?q?=EB=82=B4=EC=9A=A9=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...3-useactionstate-server-action-fetching.md | 81 +++++++------------
 1 file changed, 31 insertions(+), 50 deletions(-)

diff --git a/src/content/posts/next/2025-11-23-useactionstate-server-action-fetching.md b/src/content/posts/next/2025-11-23-useactionstate-server-action-fetching.md
index 4716960..b98fc3f 100644
--- a/src/content/posts/next/2025-11-23-useactionstate-server-action-fetching.md
+++ b/src/content/posts/next/2025-11-23-useactionstate-server-action-fetching.md
@@ -1,25 +1,17 @@
 ---
 title: 정적 게시글을 Server Action으로 읽으려다 삽질한 기록
 series: 블로그
-tags: ["Next.js", "React", "Server Actions", "useActionState", "캐싱"]
+tags: ["nextjs", "react", "server-actions", "useactionstate", "caching"]
 date: "2025.11.23"
 ---
 
-이번에 Next.js 블로그를 리팩토링하다가 궁금증이 생겼다.
+Next.js 기반 블로그를 리팩토링하던 중 문득 궁금증이 생겼다. 
+정적 빌드된 게시글의 HTML을 필요할 때만 비동기로 불러오면서 로딩 UI도 자연스럽게 띄우고 싶었다. 
+이때 폼 제출에 주로 쓰이는 `useActionState`와 서버 액션(Server Action) 조합을 일반적인 '데이터 패칭(Data Fetching)'에도 사용할 수 있을지 테스트해 보았다.
 
-**`useActionState`는 진짜 폼 액션을 위한 훅인가?**
-아니면 일반 서버 액션(Server Action)에도 써도 되는 걸까?
+## 서버 액션으로 데이터 패칭 시도
 
-정적 빌드된 게시글 HTML을 “필요할 때만” 가져오면서 로딩 UI도 띄우고 싶어서,
-서버 액션 + `useActionState` 조합을 먼저 시도했다.
-
-## 서버 액션으로 게시글 HTML을 읽어오려 했던 시도
-
-```tsx
-const [state, dispatchAction, isPending] = useActionState(action, initialState, permalink?)
-```
-
-그래서 서버 액션을 하나 만들었다.
+먼저 게시글 경로를 받아 HTML 문자열을 반환하는 서버 액션을 작성했다.
 
 ```tsx
 'use server'
@@ -29,52 +21,44 @@ import { getPostContent } from '@/lib/server/getBlogData'
 export async function getPostAction(pathroot: string): Promise<string> {
   return getPostContent(pathroot)
 }
+
 ```
 
-그리고 클라이언트 컴포넌트에서 이렇게 붙였다.
+그리고 클라이언트 컴포넌트에서 `useActionState`에 이 액션을 연결했다.
 
 ```tsx
 const [html, action, isPending] = useActionState(getPostAction, '')
-```
 
-## 문제: 두 번째 실행부터 파라미터가 꼬였다
-
-첫 실행은 문제없이 동작했지만 두 번째 실행부터는 서버 액션이 받아야 할 `pathroot` 대신 **이미 변환된 HTML 전체가 다음 호출의 인자로 들어갔다.**
-
-결과적으로 게시글을 못 가져오는 문제가 생겼다.
+```
 
-## 원인: useActionState 액션의 첫 번째 인자는 “이전 state”다
+## 문제: 두 번째 호출부터 파라미터가 오염되는 현상
 
-`useActionState`는 액션 함수에 인자를 이렇게 넘긴다. ([React][1])
+첫 번째 실행은 의도한 대로 HTML을 잘 불러왔다. 하지만 다른 게시글을 클릭해 액션을 두 번째로 호출하는 순간 에러가 발생했다. 서버 액션이 받아야 할 `pathroot` 인자 자리에, 이전 호출의 결과물인 **'게시글 HTML 전체 문자열'**이 들어가 버린 것이다.
 
-* 첫 번째 인자: `previousState` (처음엔 `initialState`, 이후엔 직전 반환값)
-* 두 번째 인자: 내가 `dispatchAction(payload)`로 넘긴 payload
+## 원인 분석: useActionState의 시그니처 설계
 
-즉 `useActionState`에 넘기는 함수는 기본적으로 이런 형태를 기대한다.
+공식 문서를 확인해 보니 원인은 `useActionState`가 액션 함수에 인자를 넘기는 방식에 있었다. 이 훅은 기본적으로 아래와 같은 형태의 함수 시그니처를 기대한다.
 
 ```ts
 async function action(previousState, payload) {
   // ...
 }
-```
 
-내 코드처럼 `getPostAction(pathroot)`처럼 만들면,
-React 입장에서는 `previousState`를 `pathroot` 자리에 꽂아버리게 된다.
-그래서 “두 번째부터 HTML이 인자로 들어오는” 현상이 생긴다.
+```
 
-> 억지로 맞추려면 시그니처를 `(prevHtml, pathroot)`로 만들면 된다.
-> 근데 이건 “읽기 전용 데이터 로딩”을 액션/상태 머신으로 우회하는 느낌이 강했다.
+* **첫 번째 인자:** `previousState` (초기엔 `initialState`, 이후엔 직전 액션의 반환값)
+* **두 번째 인자:** `dispatchAction(payload)` 호출 시 넘겨준 실제 데이터
 
-## 서버 액션은 ‘읽기’보다 ‘변경’ 쪽 문맥에 더 잘 맞는다
+내가 작성한 `getPostAction(pathroot)`은 단일 인자를 받는 함수였다. 
+React 입장에서는 첫 번째 인자인 `pathroot` 자리에 가차 없이 `previousState`(이전 HTML 반환값)를 꽂아버린 것이다.
 
-Next.js 문서에서도 Server Action을 “폼 제출 + mutation(변경)” 문맥으로 설명한다. ([nextjs.org][2])
-그래서 게시글 HTML처럼 **읽기 전용** 데이터를 “가져오기” 위해 Server Action을 쓰는 건 의도가 좀 어긋난다.
+이 문제를 억지로 우회하려면 시그니처를 `(prevHtml, pathroot)` 형태로 수정하면 되지만 단순히 '읽기 전용 데이터'를 가져오기 위해 상태 머신을 억지로 끼워 맞추는 느낌이 강하게 들었다.
 
-읽기 목적이라면 Next.js는 서버 컴포넌트에서 `fetch`나 DB/파일 시스템 같은 I/O로 가져오는 흐름을 기본으로 안내한다. ([nextjs.org][3])
+## 판단 및 트레이드오프: API Route(Route Handler)로 선회
 
-## API Route로 전환
+근본적으로 Next.js 공식 문서에서도 Server Action은 데이터를 읽어오는 용도(Fetching)가 아니라 **폼 제출 및 데이터 변경(Mutation)** 문맥에서 사용할 것을 권장하고 있다.
 
-그래서 `/api/posts` 라우트를 만들었다.
+따라서 읽기 전용 데이터를 가져오는 데 Server Action을 오용하는 것은 프레임워크의 설계 의도와 어긋난다고 판단했다. 결국 상태를 변형하는 액션 대신 전통적이고 목적에 맞는 API Route(Route Handler)를 구현하는 것으로 방향을 틀었다.
 
 ```tsx
 import { getPostContent } from '@/lib/server/getBlogData'
@@ -96,13 +80,15 @@ export async function GET(request: NextRequest) {
     })
   }
 }
+
 ```
 
-클라이언트에서는 이렇게 호출했다.
+클라이언트에서는 일반적인 `fetch`를 사용해 데이터를 호출하도록 수정했다.
 
 ```tsx
 const handleGetPostContent = async (pathroot: string) => {
   const encoded = encodeURIComponent(pathroot)
+  // Route Handler는 기본적으로 캐싱되지 않으므로 필요에 따라 force-cache 설정
   const res = await fetch(`/api/posts?pathroot=${encoded}`, { cache: 'force-cache' })
 
   if (!res.ok) throw new Error(`Failed to fetch: ${res.status}`)
@@ -110,18 +96,13 @@ const handleGetPostContent = async (pathroot: string) => {
   const html = await res.text()
   setPostContent(html)
 }
+
 ```
 
-## 정리
+## 마무리 및 배운 점
 
-* `useActionState`는 **액션 함수에 `previousState`를 첫 인자로 넣는 훅**이라서,
-  “단일 인자(예: pathroot)로 서버 액션 호출” 같은 방식으로 쓰면 인자가 꼬일 수 있다. ([React][1])
-* Next.js에서 Server Action은 보통 **폼 제출/변경(mutation)** 문맥에 맞춰 설명된다. ([nextjs.org][2])
-* `fetch`의 `cache`는 **브라우저 fetch와 서버 fetch에서 의미가 다르다.** ([nextjs.org][4])
-* Route Handler는 기본 캐시가 아니고, **GET 캐싱은 설정으로 opt-in** 해야 한다. ([nextjs.org][5])
+단순한 호기심으로 시작한 삽질이었지만, 프레임워크가 제공하는 도구의 정확한 목적을 짚고 넘어갈 수 있었다.
 
-[1]: https://react.dev/reference/react/useActionState "useActionState – React"
-[2]: https://nextjs.org/docs/app/getting-started/updating-data "Getting Started: Updating Data | Next.js"
-[3]: https://nextjs.org/docs/app/getting-started/fetching-data "Getting Started: Fetching Data | Next.js"
-[4]: https://nextjs.org/docs/app/api-reference/functions/fetch "Functions: fetch | Next.js"
-[5]: https://nextjs.org/docs/app/getting-started/route-handlers "Getting Started: Route Handlers | Next.js"
+1. `useActionState`는 액션 함수의 첫 번째 인자로 무조건 `previousState`를 주입하므로, 단일 인자 함수와 결합하면 예기치 않은 파라미터 오염이 발생한다.
+2. Server Action은 데이터 조회가 아닌 **데이터 변경(Mutation)**에 특화된 도구다.
+3. 데이터를 읽기만 할 때는 목적에 맞게 Route Handler나 서버 컴포넌트에서의 직접 fetch를 사용하는 것이 아키텍처 의도에 부합한다. 또한 Route Handler의 GET 메서드는 기본적으로 캐싱되지 않으므로(`opt-in`), 필요하다면 캐시 설정을 직접 챙겨야 한다.
\ No newline at end of file

From 858a0a53564099e6bb84a50da2e00bed506a2f29 Mon Sep 17 00:00:00 2001
From: spde3289 <spde3289@naver.com>
Date: Tue, 3 Mar 2026 17:22:44 +0900
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=ED=85=8C=EB=A7=88=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=EC=8B=9C=20=EB=B0=98=EC=A7=9D=20=EA=B1=B0=EB=A6=AC?=
 =?UTF-8?q?=EB=8A=94=20=ED=9A=A8=EA=B3=BC=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../blog/_components/SeriesAside/index.tsx    |   2 +-
 src/components/ModalTriggerButton.tsx         | 222 +++++------
 src/components/ThemeToggleButton.tsx          | 374 +++++++++---------
 src/contexts/ThemeContext.tsx                 |  18 -
 4 files changed, 299 insertions(+), 317 deletions(-)

diff --git a/src/app/blog/_components/SeriesAside/index.tsx b/src/app/blog/_components/SeriesAside/index.tsx
index 5f8f9dd..61b8cd0 100644
--- a/src/app/blog/_components/SeriesAside/index.tsx
+++ b/src/app/blog/_components/SeriesAside/index.tsx
@@ -17,7 +17,7 @@ const SeriesCard = ({ series }: SeriesCardProps) => {
   return (
     <li
       onClick={toggleDropdown}
-      className={`group relative flex flex-col items-center justify-between px-2 py-1.5 sm:px-3 lg:px-4 sm:py-2 lg:py-3 border border-neutral-200 dark:border-neutral-800 rounded-lg transition-colors bg-neutral-50 dark:bg-neutral-800/40  ${
+      className={`group relative flex flex-col items-center justify-between px-2 py-1.5 sm:px-3 lg:px-4 sm:py-2 lg:py-3 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-neutral-50 dark:bg-neutral-800/40  ${
         isOpen ? "" : "hover:bg-neutral-100 dark:hover:bg-neutral-800/70"
       }
         `}
diff --git a/src/components/ModalTriggerButton.tsx b/src/components/ModalTriggerButton.tsx
index 0ca6f37..18861d9 100644
--- a/src/components/ModalTriggerButton.tsx
+++ b/src/components/ModalTriggerButton.tsx
@@ -1,111 +1,111 @@
-"use client";
-
-import { JSX, ReactNode, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-
-interface ModalTriggerButtonProps {
-  modalRootId: string; // 포털 타깃(이미 DOM에 존재)
-  children: ReactNode;
-  title: string;
-  closeOnSelfClick?: boolean;
-  icon: JSX.Element;
-
-  // 포털 컨텐츠 루트에 그대로 전달할 이벤트/속성들
-  containerProps?: React.HTMLAttributes<HTMLDivElement>;
-}
-
-const ModalTriggerButton = ({
-  modalRootId,
-  title,
-  icon,
-  closeOnSelfClick = false,
-  children,
-  containerProps, // onChange/onClick/onInput/onKeyDown 등을 여기로
-}: ModalTriggerButtonProps) => {
-  const [modalRoot, setModalRoot] = useState<HTMLElement | null>(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    setModalRoot(document.getElementById(modalRootId));
-  }, [modalRootId]);
-
-  // 바깥 클릭 닫기
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      const target = e.target as Node;
-      if (
-        contentRef.current &&
-        !contentRef.current.contains(target) &&
-        !buttonRef.current?.contains(target)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    if (isOpen) document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [isOpen]);
-
-  // “자기 자신 클릭 시 닫기” 옵션
-  const handleSelfClick: React.MouseEventHandler<HTMLDivElement> = (e) => {
-    if (closeOnSelfClick) setIsOpen(false);
-    // 사용자가 containerProps?.onClick을 넘겼다면 같이 호출
-    containerProps?.onClick?.(e);
-  };
-
-  return (
-    <div className="relative">
-      <button
-        ref={buttonRef}
-        onClick={() => setIsOpen((v) => !v)}
-        className="inline-flex items-center justify-center h-8 px-3 py-2 gap-x-1 text-xs sm:text-sm whitespace-nowrap border rounded-full transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 border-neutral-300 dark:border-neutral-700 text-neutral-900 dark:text-neutral-100 bg-white dark:bg-neutral-900 hover:bg-neutral-100 dark:hover:bg-neutral-800/70 active:bg-neutral-200 dark:active:bg-neutral-700 focus-visible:outline-neutral-700 dark:focus-visible:outline-brand"
-      >
-        {title}
-        {icon}
-      </button>
-      <div ref={contentRef} id={modalRootId} />
-      {isOpen &&
-        modalRoot &&
-        createPortal(
-          <div
-            ref={contentRef}
-            // 위임: 여기에 모든 이벤트를 붙임
-            onClick={handleSelfClick} // 자체 클릭 닫기 + 사용자 onClick 병행
-            onChange={containerProps?.onChange} // 체크박스/라디오/셀렉트 변경
-            onInput={containerProps?.onInput} // 텍스트 입력 등
-            onKeyDown={containerProps?.onKeyDown} // 키보드 처리
-            onFocus={containerProps?.onFocus}
-            onBlur={containerProps?.onBlur}
-            // 기타 HTMLAttributes도 spread 가능 (data-*, role 등)
-            {...Object.fromEntries(
-              Object.entries(containerProps ?? {}).filter(
-                ([k]) =>
-                  ![
-                    "onClick",
-                    "onChange",
-                    "onInput",
-                    "onKeyDown",
-                    "onFocus",
-                    "onBlur",
-                    "ref", // ref는 내부에서 관리
-                    "className", // className은 아래에서 병합
-                    "style", // style은 병합 가능하지만 여기선 단순화
-                  ].includes(k)
-              )
-            )}
-            className={
-              "absolute flex gap-1 flex-col right-0 top-10 p-2 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 shadow-lg rounded-lg z-[1000] " +
-              (containerProps?.className ?? "")
-            }
-          >
-            {children}
-          </div>,
-          modalRoot
-        )}
-    </div>
-  );
-};
-
-export default ModalTriggerButton;
+"use client";
+
+import { JSX, ReactNode, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+interface ModalTriggerButtonProps {
+  modalRootId: string; // 포털 타깃(이미 DOM에 존재)
+  children: ReactNode;
+  title: string;
+  closeOnSelfClick?: boolean;
+  icon: JSX.Element;
+
+  // 포털 컨텐츠 루트에 그대로 전달할 이벤트/속성들
+  containerProps?: React.HTMLAttributes<HTMLDivElement>;
+}
+
+const ModalTriggerButton = ({
+  modalRootId,
+  title,
+  icon,
+  closeOnSelfClick = false,
+  children,
+  containerProps, // onChange/onClick/onInput/onKeyDown 등을 여기로
+}: ModalTriggerButtonProps) => {
+  const [modalRoot, setModalRoot] = useState<HTMLElement | null>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setModalRoot(document.getElementById(modalRootId));
+  }, [modalRootId]);
+
+  // 바깥 클릭 닫기
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (
+        contentRef.current &&
+        !contentRef.current.contains(target) &&
+        !buttonRef.current?.contains(target)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+
+  // “자기 자신 클릭 시 닫기” 옵션
+  const handleSelfClick: React.MouseEventHandler<HTMLDivElement> = (e) => {
+    if (closeOnSelfClick) setIsOpen(false);
+    // 사용자가 containerProps?.onClick을 넘겼다면 같이 호출
+    containerProps?.onClick?.(e);
+  };
+
+  return (
+    <div className="relative">
+      <button
+        ref={buttonRef}
+        onClick={() => setIsOpen((v) => !v)}
+        className="inline-flex items-center justify-center h-8 px-3 py-2 gap-x-1 text-xs sm:text-sm whitespace-nowrap border rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 border-neutral-300 dark:border-neutral-700 text-neutral-900 dark:text-neutral-100 bg-white dark:bg-neutral-900 hover:bg-neutral-100 dark:hover:bg-neutral-800/70 active:bg-neutral-200 dark:active:bg-neutral-700 focus-visible:outline-neutral-700 dark:focus-visible:outline-brand"
+      >
+        {title}
+        {icon}
+      </button>
+      <div ref={contentRef} id={modalRootId} />
+      {isOpen &&
+        modalRoot &&
+        createPortal(
+          <div
+            ref={contentRef}
+            // 위임: 여기에 모든 이벤트를 붙임
+            onClick={handleSelfClick} // 자체 클릭 닫기 + 사용자 onClick 병행
+            onChange={containerProps?.onChange} // 체크박스/라디오/셀렉트 변경
+            onInput={containerProps?.onInput} // 텍스트 입력 등
+            onKeyDown={containerProps?.onKeyDown} // 키보드 처리
+            onFocus={containerProps?.onFocus}
+            onBlur={containerProps?.onBlur}
+            // 기타 HTMLAttributes도 spread 가능 (data-*, role 등)
+            {...Object.fromEntries(
+              Object.entries(containerProps ?? {}).filter(
+                ([k]) =>
+                  ![
+                    "onClick",
+                    "onChange",
+                    "onInput",
+                    "onKeyDown",
+                    "onFocus",
+                    "onBlur",
+                    "ref", // ref는 내부에서 관리
+                    "className", // className은 아래에서 병합
+                    "style", // style은 병합 가능하지만 여기선 단순화
+                  ].includes(k),
+              ),
+            )}
+            className={
+              "absolute flex gap-1 flex-col right-0 top-10 p-2 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 shadow-lg rounded-lg z-[1000] " +
+              (containerProps?.className ?? "")
+            }
+          >
+            {children}
+          </div>,
+          modalRoot,
+        )}
+    </div>
+  );
+};
+
+export default ModalTriggerButton;
diff --git a/src/components/ThemeToggleButton.tsx b/src/components/ThemeToggleButton.tsx
index 248fe99..0b3e486 100644
--- a/src/components/ThemeToggleButton.tsx
+++ b/src/components/ThemeToggleButton.tsx
@@ -1,187 +1,187 @@
-"use client";
-
-import { Theme, useTheme } from "@/contexts/ThemeContext";
-
-import { ReactNode, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-
-interface ThemeItemProps {
-  onClickEvent: (theme: Theme) => void;
-  currentTarget: boolean;
-  children: ReactNode;
-  theme: Theme;
-}
-
-const ThemeItem = ({
-  onClickEvent,
-  currentTarget,
-  children,
-  theme,
-}: ThemeItemProps) => {
-  return (
-    <button
-      data-state={currentTarget}
-      onClick={() => onClickEvent(theme)}
-      className="flex grow items-center px-2 py-1.5 w-full text-left rounded select-none outline-none hover:bg-neutral-100 dark:hover:bg-neutral-800/70 focus:bg-neutral-100 dark:focus:bg-neutral-800/70"
-    >
-      <span
-        data-state={currentTarget}
-        className="text-neutral-600 data-[state=true]:text-[#171717] data-[state=true]:font-bold dark:data-[state=true]:text-[#EAFE7C] dark:text-neutral-400 text-sm font-normal flex grow items-center gap-x-2 "
-      >
-        {children}
-      </span>
-    </button>
-  );
-};
-
-const ThemeToggleButton = () => {
-  const { theme, setTheme, resolvedTheme } = useTheme();
-  const [isOpen, setIsOpen] = useState(false);
-  const [modalRoot, setModalRoot] = useState<HTMLElement | null>(null);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    setModalRoot(document.getElementById("theme-modal-root"));
-  }, []);
-
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (
-        modalRef.current &&
-        !modalRef.current.contains(e.target as Node) &&
-        !buttonRef.current?.contains(e.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    if (isOpen) document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [isOpen]);
-
-  const onClickEventHendler = (theme: Theme) => {
-    setTheme(theme);
-    setIsOpen(false);
-  };
-
-  const icon =
-    resolvedTheme === "dark" ? (
-      <svg
-        className=""
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M17.4547 11.97L18.1799 12.1611C18.265 11.8383 18.1265 11.4982 17.8401 11.3266C17.5538 11.1551 17.1885 11.1934 16.944 11.4207L17.4547 11.97ZM8.0306 2.5459L8.57989 3.05657C8.80718 2.81209 8.84554 2.44682 8.67398 2.16046C8.50243 1.8741 8.16227 1.73559 7.83948 1.82066L8.0306 2.5459ZM12.9154 13.0035C9.64678 13.0035 6.99707 10.3538 6.99707 7.08524H5.49707C5.49707 11.1823 8.81835 14.5035 12.9154 14.5035V13.0035ZM16.944 11.4207C15.8869 12.4035 14.4721 13.0035 12.9154 13.0035V14.5035C14.8657 14.5035 16.6418 13.7499 17.9654 12.5193L16.944 11.4207ZM16.7295 11.7789C15.9437 14.7607 13.2277 16.9586 10.0003 16.9586V18.4586C13.9257 18.4586 17.2249 15.7853 18.1799 12.1611L16.7295 11.7789ZM10.0003 16.9586C6.15734 16.9586 3.04199 13.8433 3.04199 10.0003H1.54199C1.54199 14.6717 5.32892 18.4586 10.0003 18.4586V16.9586ZM3.04199 10.0003C3.04199 6.77289 5.23988 4.05695 8.22173 3.27114L7.83948 1.82066C4.21532 2.77574 1.54199 6.07486 1.54199 10.0003H3.04199ZM6.99707 7.08524C6.99707 5.52854 7.5971 4.11366 8.57989 3.05657L7.48132 2.03522C6.25073 3.35885 5.49707 5.13487 5.49707 7.08524H6.99707Z"
-          fill="currentColor"
-        />
-      </svg>
-    ) : (
-      <svg
-        className=""
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M9.99998 1.5415C10.4142 1.5415 10.75 1.87729 10.75 2.2915V3.5415C10.75 3.95572 10.4142 4.2915 9.99998 4.2915C9.58577 4.2915 9.24998 3.95572 9.24998 3.5415V2.2915C9.24998 1.87729 9.58577 1.5415 9.99998 1.5415ZM10.0009 6.79327C8.22978 6.79327 6.79402 8.22904 6.79402 10.0001C6.79402 11.7712 8.22978 13.207 10.0009 13.207C11.772 13.207 13.2078 11.7712 13.2078 10.0001C13.2078 8.22904 11.772 6.79327 10.0009 6.79327ZM5.29402 10.0001C5.29402 7.40061 7.40135 5.29327 10.0009 5.29327C12.6004 5.29327 14.7078 7.40061 14.7078 10.0001C14.7078 12.5997 12.6004 14.707 10.0009 14.707C7.40135 14.707 5.29402 12.5997 5.29402 10.0001ZM15.9813 5.08035C16.2742 4.78746 16.2742 4.31258 15.9813 4.01969C15.6884 3.7268 15.2135 3.7268 14.9207 4.01969L14.0368 4.90357C13.7439 5.19647 13.7439 5.67134 14.0368 5.96423C14.3297 6.25713 14.8045 6.25713 15.0974 5.96423L15.9813 5.08035ZM18.4577 10.0001C18.4577 10.4143 18.1219 10.7501 17.7077 10.7501H16.4577C16.0435 10.7501 15.7077 10.4143 15.7077 10.0001C15.7077 9.58592 16.0435 9.25013 16.4577 9.25013H17.7077C18.1219 9.25013 18.4577 9.58592 18.4577 10.0001ZM14.9207 15.9806C15.2135 16.2735 15.6884 16.2735 15.9813 15.9806C16.2742 15.6877 16.2742 15.2128 15.9813 14.9199L15.0974 14.036C14.8045 13.7431 14.3297 13.7431 14.0368 14.036C13.7439 14.3289 13.7439 14.8038 14.0368 15.0967L14.9207 15.9806ZM9.99998 15.7088C10.4142 15.7088 10.75 16.0445 10.75 16.4588V17.7088C10.75 18.123 10.4142 18.4588 9.99998 18.4588C9.58577 18.4588 9.24998 18.123 9.24998 17.7088V16.4588C9.24998 16.0445 9.58577 15.7088 9.99998 15.7088ZM5.96356 15.0972C6.25646 14.8043 6.25646 14.3295 5.96356 14.0366C5.67067 13.7437 5.1958 13.7437 4.9029 14.0366L4.01902 14.9204C3.72613 15.2133 3.72613 15.6882 4.01902 15.9811C4.31191 16.274 4.78679 16.274 5.07968 15.9811L5.96356 15.0972ZM4.29224 10.0001C4.29224 10.4143 3.95645 10.7501 3.54224 10.7501H2.29224C1.87802 10.7501 1.54224 10.4143 1.54224 10.0001C1.54224 9.58592 1.87802 9.25013 2.29224 9.25013H3.54224C3.95645 9.25013 4.29224 9.58592 4.29224 10.0001ZM4.9029 5.9637C5.1958 6.25659 5.67067 6.25659 5.96356 5.9637C6.25646 5.6708 6.25646 5.19593 5.96356 4.90303L5.07968 4.01915C4.78679 3.72626 4.31191 3.72626 4.01902 4.01915C3.72613 4.31204 3.72613 4.78692 4.01902 5.07981L4.9029 5.9637Z"
-          fill="currentColor"
-        />
-      </svg>
-    );
-
-  return (
-    <>
-      <button
-        ref={buttonRef}
-        onClick={() => setIsOpen((prev) => !prev)}
-        className="inline-flex items-center justify-center h-7 w-7 p-1.5 gap-x-1 text-xs whitespace-nowrap font-medium border rounded-full transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 border-neutral-300 dark:border-neutral-700 text-neutral-900 dark:text-neutral-100 bg-white dark:bg-neutral-900 hover:bg-neutral-100 dark:hover:bg-neutral-800/70 active:bg-neutral-200 dark:active:bg-neutral-700 focus-visible:outline-neutral-700 dark:focus-visible:outline-brand"
-        aria-label="Toggle theme options"
-      >
-        {icon}
-      </button>{" "}
-      <div id="theme-modal-root" />
-      {isOpen &&
-        modalRoot &&
-        createPortal(
-          <div
-            ref={modalRef}
-            className="absolute flex gap-1 flex-col right-5 top-14 w-40 p-2 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 shadow-lg rounded-lg z-[1000] "
-          >
-            <ThemeItem
-              theme="light"
-              onClickEvent={onClickEventHendler}
-              currentTarget={theme === "light"}
-            >
-              <svg
-                className="size-4 shrink-0 mt-0.5"
-                width="20"
-                height="20"
-                viewBox="0 0 20 20"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d="M9.99998 1.5415C10.4142 1.5415 10.75 1.87729 10.75 2.2915V3.5415C10.75 3.95572 10.4142 4.2915 9.99998 4.2915C9.58577 4.2915 9.24998 3.95572 9.24998 3.5415V2.2915C9.24998 1.87729 9.58577 1.5415 9.99998 1.5415ZM10.0009 6.79327C8.22978 6.79327 6.79402 8.22904 6.79402 10.0001C6.79402 11.7712 8.22978 13.207 10.0009 13.207C11.772 13.207 13.2078 11.7712 13.2078 10.0001C13.2078 8.22904 11.772 6.79327 10.0009 6.79327ZM5.29402 10.0001C5.29402 7.40061 7.40135 5.29327 10.0009 5.29327C12.6004 5.29327 14.7078 7.40061 14.7078 10.0001C14.7078 12.5997 12.6004 14.707 10.0009 14.707C7.40135 14.707 5.29402 12.5997 5.29402 10.0001ZM15.9813 5.08035C16.2742 4.78746 16.2742 4.31258 15.9813 4.01969C15.6884 3.7268 15.2135 3.7268 14.9207 4.01969L14.0368 4.90357C13.7439 5.19647 13.7439 5.67134 14.0368 5.96423C14.3297 6.25713 14.8045 6.25713 15.0974 5.96423L15.9813 5.08035ZM18.4577 10.0001C18.4577 10.4143 18.1219 10.7501 17.7077 10.7501H16.4577C16.0435 10.7501 15.7077 10.4143 15.7077 10.0001C15.7077 9.58592 16.0435 9.25013 16.4577 9.25013H17.7077C18.1219 9.25013 18.4577 9.58592 18.4577 10.0001ZM14.9207 15.9806C15.2135 16.2735 15.6884 16.2735 15.9813 15.9806C16.2742 15.6877 16.2742 15.2128 15.9813 14.9199L15.0974 14.036C14.8045 13.7431 14.3297 13.7431 14.0368 14.036C13.7439 14.3289 13.7439 14.8038 14.0368 15.0967L14.9207 15.9806ZM9.99998 15.7088C10.4142 15.7088 10.75 16.0445 10.75 16.4588V17.7088C10.75 18.123 10.4142 18.4588 9.99998 18.4588C9.58577 18.4588 9.24998 18.123 9.24998 17.7088V16.4588C9.24998 16.0445 9.58577 15.7088 9.99998 15.7088ZM5.96356 15.0972C6.25646 14.8043 6.25646 14.3295 5.96356 14.0366C5.67067 13.7437 5.1958 13.7437 4.9029 14.0366L4.01902 14.9204C3.72613 15.2133 3.72613 15.6882 4.01902 15.9811C4.31191 16.274 4.78679 16.274 5.07968 15.9811L5.96356 15.0972ZM4.29224 10.0001C4.29224 10.4143 3.95645 10.7501 3.54224 10.7501H2.29224C1.87802 10.7501 1.54224 10.4143 1.54224 10.0001C1.54224 9.58592 1.87802 9.25013 2.29224 9.25013H3.54224C3.95645 9.25013 4.29224 9.58592 4.29224 10.0001ZM4.9029 5.9637C5.1958 6.25659 5.67067 6.25659 5.96356 5.9637C6.25646 5.6708 6.25646 5.19593 5.96356 4.90303L5.07968 4.01915C4.78679 3.72626 4.31191 3.72626 4.01902 4.01915C3.72613 4.31204 3.72613 4.78692 4.01902 5.07981L4.9029 5.9637Z"
-                  fill="currentColor"
-                />
-              </svg>
-              Light
-            </ThemeItem>
-            <ThemeItem
-              theme="dark"
-              onClickEvent={onClickEventHendler}
-              currentTarget={theme === "dark"}
-            >
-              <svg
-                className="size-4 shrink-0 mt-1"
-                width="20"
-                height="20"
-                viewBox="0 0 20 20"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M17.4547 11.97L18.1799 12.1611C18.265 11.8383 18.1265 11.4982 17.8401 11.3266C17.5538 11.1551 17.1885 11.1934 16.944 11.4207L17.4547 11.97ZM8.0306 2.5459L8.57989 3.05657C8.80718 2.81209 8.84554 2.44682 8.67398 2.16046C8.50243 1.8741 8.16227 1.73559 7.83948 1.82066L8.0306 2.5459ZM12.9154 13.0035C9.64678 13.0035 6.99707 10.3538 6.99707 7.08524H5.49707C5.49707 11.1823 8.81835 14.5035 12.9154 14.5035V13.0035ZM16.944 11.4207C15.8869 12.4035 14.4721 13.0035 12.9154 13.0035V14.5035C14.8657 14.5035 16.6418 13.7499 17.9654 12.5193L16.944 11.4207ZM16.7295 11.7789C15.9437 14.7607 13.2277 16.9586 10.0003 16.9586V18.4586C13.9257 18.4586 17.2249 15.7853 18.1799 12.1611L16.7295 11.7789ZM10.0003 16.9586C6.15734 16.9586 3.04199 13.8433 3.04199 10.0003H1.54199C1.54199 14.6717 5.32892 18.4586 10.0003 18.4586V16.9586ZM3.04199 10.0003C3.04199 6.77289 5.23988 4.05695 8.22173 3.27114L7.83948 1.82066C4.21532 2.77574 1.54199 6.07486 1.54199 10.0003H3.04199ZM6.99707 7.08524C6.99707 5.52854 7.5971 4.11366 8.57989 3.05657L7.48132 2.03522C6.25073 3.35885 5.49707 5.13487 5.49707 7.08524H6.99707Z"
-                  fill="currentColor"
-                />
-              </svg>{" "}
-              Dark
-            </ThemeItem>
-            <ThemeItem
-              theme="system"
-              onClickEvent={onClickEventHendler}
-              currentTarget={theme === "system"}
-            >
-              <svg
-                stroke="currentColor"
-                fill="currentColor"
-                strokeWidth="0"
-                viewBox="0 0 24 24"
-                className="size-4 shrink-0 mt-0.5"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path d="M4 16H20V5H4V16ZM13 18V20H17V22H7V20H11V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H13Z"></path>
-              </svg>{" "}
-              System
-            </ThemeItem>
-          </div>,
-          modalRoot
-        )}
-    </>
-  );
-};
-
-export default ThemeToggleButton;
+"use client";
+
+import { Theme, useTheme } from "@/contexts/ThemeContext";
+
+import { ReactNode, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+interface ThemeItemProps {
+  onClickEvent: (theme: Theme) => void;
+  currentTarget: boolean;
+  children: ReactNode;
+  theme: Theme;
+}
+
+const ThemeItem = ({
+  onClickEvent,
+  currentTarget,
+  children,
+  theme,
+}: ThemeItemProps) => {
+  return (
+    <button
+      data-state={currentTarget}
+      onClick={() => onClickEvent(theme)}
+      className="flex grow items-center px-2 py-1.5 w-full text-left rounded select-none outline-none hover:bg-neutral-100 dark:hover:bg-neutral-800/70 focus:bg-neutral-100 dark:focus:bg-neutral-800/70"
+    >
+      <span
+        data-state={currentTarget}
+        className="text-neutral-600 data-[state=true]:text-[#171717] data-[state=true]:font-bold dark:data-[state=true]:text-[#EAFE7C] dark:text-neutral-400 text-sm font-normal flex grow items-center gap-x-2 "
+      >
+        {children}
+      </span>
+    </button>
+  );
+};
+
+const ThemeToggleButton = () => {
+  const { theme, setTheme, resolvedTheme } = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+  const [modalRoot, setModalRoot] = useState<HTMLElement | null>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setModalRoot(document.getElementById("theme-modal-root"));
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        modalRef.current &&
+        !modalRef.current.contains(e.target as Node) &&
+        !buttonRef.current?.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+
+  const onClickEventHendler = (theme: Theme) => {
+    setTheme(theme);
+    setIsOpen(false);
+  };
+
+  const icon =
+    resolvedTheme === "dark" ? (
+      <svg
+        className=""
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M17.4547 11.97L18.1799 12.1611C18.265 11.8383 18.1265 11.4982 17.8401 11.3266C17.5538 11.1551 17.1885 11.1934 16.944 11.4207L17.4547 11.97ZM8.0306 2.5459L8.57989 3.05657C8.80718 2.81209 8.84554 2.44682 8.67398 2.16046C8.50243 1.8741 8.16227 1.73559 7.83948 1.82066L8.0306 2.5459ZM12.9154 13.0035C9.64678 13.0035 6.99707 10.3538 6.99707 7.08524H5.49707C5.49707 11.1823 8.81835 14.5035 12.9154 14.5035V13.0035ZM16.944 11.4207C15.8869 12.4035 14.4721 13.0035 12.9154 13.0035V14.5035C14.8657 14.5035 16.6418 13.7499 17.9654 12.5193L16.944 11.4207ZM16.7295 11.7789C15.9437 14.7607 13.2277 16.9586 10.0003 16.9586V18.4586C13.9257 18.4586 17.2249 15.7853 18.1799 12.1611L16.7295 11.7789ZM10.0003 16.9586C6.15734 16.9586 3.04199 13.8433 3.04199 10.0003H1.54199C1.54199 14.6717 5.32892 18.4586 10.0003 18.4586V16.9586ZM3.04199 10.0003C3.04199 6.77289 5.23988 4.05695 8.22173 3.27114L7.83948 1.82066C4.21532 2.77574 1.54199 6.07486 1.54199 10.0003H3.04199ZM6.99707 7.08524C6.99707 5.52854 7.5971 4.11366 8.57989 3.05657L7.48132 2.03522C6.25073 3.35885 5.49707 5.13487 5.49707 7.08524H6.99707Z"
+          fill="currentColor"
+        />
+      </svg>
+    ) : (
+      <svg
+        className=""
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.99998 1.5415C10.4142 1.5415 10.75 1.87729 10.75 2.2915V3.5415C10.75 3.95572 10.4142 4.2915 9.99998 4.2915C9.58577 4.2915 9.24998 3.95572 9.24998 3.5415V2.2915C9.24998 1.87729 9.58577 1.5415 9.99998 1.5415ZM10.0009 6.79327C8.22978 6.79327 6.79402 8.22904 6.79402 10.0001C6.79402 11.7712 8.22978 13.207 10.0009 13.207C11.772 13.207 13.2078 11.7712 13.2078 10.0001C13.2078 8.22904 11.772 6.79327 10.0009 6.79327ZM5.29402 10.0001C5.29402 7.40061 7.40135 5.29327 10.0009 5.29327C12.6004 5.29327 14.7078 7.40061 14.7078 10.0001C14.7078 12.5997 12.6004 14.707 10.0009 14.707C7.40135 14.707 5.29402 12.5997 5.29402 10.0001ZM15.9813 5.08035C16.2742 4.78746 16.2742 4.31258 15.9813 4.01969C15.6884 3.7268 15.2135 3.7268 14.9207 4.01969L14.0368 4.90357C13.7439 5.19647 13.7439 5.67134 14.0368 5.96423C14.3297 6.25713 14.8045 6.25713 15.0974 5.96423L15.9813 5.08035ZM18.4577 10.0001C18.4577 10.4143 18.1219 10.7501 17.7077 10.7501H16.4577C16.0435 10.7501 15.7077 10.4143 15.7077 10.0001C15.7077 9.58592 16.0435 9.25013 16.4577 9.25013H17.7077C18.1219 9.25013 18.4577 9.58592 18.4577 10.0001ZM14.9207 15.9806C15.2135 16.2735 15.6884 16.2735 15.9813 15.9806C16.2742 15.6877 16.2742 15.2128 15.9813 14.9199L15.0974 14.036C14.8045 13.7431 14.3297 13.7431 14.0368 14.036C13.7439 14.3289 13.7439 14.8038 14.0368 15.0967L14.9207 15.9806ZM9.99998 15.7088C10.4142 15.7088 10.75 16.0445 10.75 16.4588V17.7088C10.75 18.123 10.4142 18.4588 9.99998 18.4588C9.58577 18.4588 9.24998 18.123 9.24998 17.7088V16.4588C9.24998 16.0445 9.58577 15.7088 9.99998 15.7088ZM5.96356 15.0972C6.25646 14.8043 6.25646 14.3295 5.96356 14.0366C5.67067 13.7437 5.1958 13.7437 4.9029 14.0366L4.01902 14.9204C3.72613 15.2133 3.72613 15.6882 4.01902 15.9811C4.31191 16.274 4.78679 16.274 5.07968 15.9811L5.96356 15.0972ZM4.29224 10.0001C4.29224 10.4143 3.95645 10.7501 3.54224 10.7501H2.29224C1.87802 10.7501 1.54224 10.4143 1.54224 10.0001C1.54224 9.58592 1.87802 9.25013 2.29224 9.25013H3.54224C3.95645 9.25013 4.29224 9.58592 4.29224 10.0001ZM4.9029 5.9637C5.1958 6.25659 5.67067 6.25659 5.96356 5.9637C6.25646 5.6708 6.25646 5.19593 5.96356 4.90303L5.07968 4.01915C4.78679 3.72626 4.31191 3.72626 4.01902 4.01915C3.72613 4.31204 3.72613 4.78692 4.01902 5.07981L4.9029 5.9637Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        onClick={() => setIsOpen((prev) => !prev)}
+        className="inline-flex items-center justify-center h-7 w-7 p-1.5 gap-x-1 text-xs whitespace-nowrap font-medium border rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 border-neutral-300 dark:border-neutral-700 text-neutral-900 dark:text-neutral-100 bg-white dark:bg-neutral-900 hover:bg-neutral-100 dark:hover:bg-neutral-800/70 active:bg-neutral-200 dark:active:bg-neutral-700 focus-visible:outline-neutral-700 dark:focus-visible:outline-brand"
+        aria-label="Toggle theme options"
+      >
+        {icon}
+      </button>{" "}
+      <div id="theme-modal-root" />
+      {isOpen &&
+        modalRoot &&
+        createPortal(
+          <div
+            ref={modalRef}
+            className="absolute flex gap-1 flex-col right-5 top-14 w-40 p-2 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 shadow-lg rounded-lg z-[1000] "
+          >
+            <ThemeItem
+              theme="light"
+              onClickEvent={onClickEventHendler}
+              currentTarget={theme === "light"}
+            >
+              <svg
+                className="size-4 shrink-0 mt-0.5"
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M9.99998 1.5415C10.4142 1.5415 10.75 1.87729 10.75 2.2915V3.5415C10.75 3.95572 10.4142 4.2915 9.99998 4.2915C9.58577 4.2915 9.24998 3.95572 9.24998 3.5415V2.2915C9.24998 1.87729 9.58577 1.5415 9.99998 1.5415ZM10.0009 6.79327C8.22978 6.79327 6.79402 8.22904 6.79402 10.0001C6.79402 11.7712 8.22978 13.207 10.0009 13.207C11.772 13.207 13.2078 11.7712 13.2078 10.0001C13.2078 8.22904 11.772 6.79327 10.0009 6.79327ZM5.29402 10.0001C5.29402 7.40061 7.40135 5.29327 10.0009 5.29327C12.6004 5.29327 14.7078 7.40061 14.7078 10.0001C14.7078 12.5997 12.6004 14.707 10.0009 14.707C7.40135 14.707 5.29402 12.5997 5.29402 10.0001ZM15.9813 5.08035C16.2742 4.78746 16.2742 4.31258 15.9813 4.01969C15.6884 3.7268 15.2135 3.7268 14.9207 4.01969L14.0368 4.90357C13.7439 5.19647 13.7439 5.67134 14.0368 5.96423C14.3297 6.25713 14.8045 6.25713 15.0974 5.96423L15.9813 5.08035ZM18.4577 10.0001C18.4577 10.4143 18.1219 10.7501 17.7077 10.7501H16.4577C16.0435 10.7501 15.7077 10.4143 15.7077 10.0001C15.7077 9.58592 16.0435 9.25013 16.4577 9.25013H17.7077C18.1219 9.25013 18.4577 9.58592 18.4577 10.0001ZM14.9207 15.9806C15.2135 16.2735 15.6884 16.2735 15.9813 15.9806C16.2742 15.6877 16.2742 15.2128 15.9813 14.9199L15.0974 14.036C14.8045 13.7431 14.3297 13.7431 14.0368 14.036C13.7439 14.3289 13.7439 14.8038 14.0368 15.0967L14.9207 15.9806ZM9.99998 15.7088C10.4142 15.7088 10.75 16.0445 10.75 16.4588V17.7088C10.75 18.123 10.4142 18.4588 9.99998 18.4588C9.58577 18.4588 9.24998 18.123 9.24998 17.7088V16.4588C9.24998 16.0445 9.58577 15.7088 9.99998 15.7088ZM5.96356 15.0972C6.25646 14.8043 6.25646 14.3295 5.96356 14.0366C5.67067 13.7437 5.1958 13.7437 4.9029 14.0366L4.01902 14.9204C3.72613 15.2133 3.72613 15.6882 4.01902 15.9811C4.31191 16.274 4.78679 16.274 5.07968 15.9811L5.96356 15.0972ZM4.29224 10.0001C4.29224 10.4143 3.95645 10.7501 3.54224 10.7501H2.29224C1.87802 10.7501 1.54224 10.4143 1.54224 10.0001C1.54224 9.58592 1.87802 9.25013 2.29224 9.25013H3.54224C3.95645 9.25013 4.29224 9.58592 4.29224 10.0001ZM4.9029 5.9637C5.1958 6.25659 5.67067 6.25659 5.96356 5.9637C6.25646 5.6708 6.25646 5.19593 5.96356 4.90303L5.07968 4.01915C4.78679 3.72626 4.31191 3.72626 4.01902 4.01915C3.72613 4.31204 3.72613 4.78692 4.01902 5.07981L4.9029 5.9637Z"
+                  fill="currentColor"
+                />
+              </svg>
+              Light
+            </ThemeItem>
+            <ThemeItem
+              theme="dark"
+              onClickEvent={onClickEventHendler}
+              currentTarget={theme === "dark"}
+            >
+              <svg
+                className="size-4 shrink-0 mt-1"
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M17.4547 11.97L18.1799 12.1611C18.265 11.8383 18.1265 11.4982 17.8401 11.3266C17.5538 11.1551 17.1885 11.1934 16.944 11.4207L17.4547 11.97ZM8.0306 2.5459L8.57989 3.05657C8.80718 2.81209 8.84554 2.44682 8.67398 2.16046C8.50243 1.8741 8.16227 1.73559 7.83948 1.82066L8.0306 2.5459ZM12.9154 13.0035C9.64678 13.0035 6.99707 10.3538 6.99707 7.08524H5.49707C5.49707 11.1823 8.81835 14.5035 12.9154 14.5035V13.0035ZM16.944 11.4207C15.8869 12.4035 14.4721 13.0035 12.9154 13.0035V14.5035C14.8657 14.5035 16.6418 13.7499 17.9654 12.5193L16.944 11.4207ZM16.7295 11.7789C15.9437 14.7607 13.2277 16.9586 10.0003 16.9586V18.4586C13.9257 18.4586 17.2249 15.7853 18.1799 12.1611L16.7295 11.7789ZM10.0003 16.9586C6.15734 16.9586 3.04199 13.8433 3.04199 10.0003H1.54199C1.54199 14.6717 5.32892 18.4586 10.0003 18.4586V16.9586ZM3.04199 10.0003C3.04199 6.77289 5.23988 4.05695 8.22173 3.27114L7.83948 1.82066C4.21532 2.77574 1.54199 6.07486 1.54199 10.0003H3.04199ZM6.99707 7.08524C6.99707 5.52854 7.5971 4.11366 8.57989 3.05657L7.48132 2.03522C6.25073 3.35885 5.49707 5.13487 5.49707 7.08524H6.99707Z"
+                  fill="currentColor"
+                />
+              </svg>{" "}
+              Dark
+            </ThemeItem>
+            <ThemeItem
+              theme="system"
+              onClickEvent={onClickEventHendler}
+              currentTarget={theme === "system"}
+            >
+              <svg
+                stroke="currentColor"
+                fill="currentColor"
+                strokeWidth="0"
+                viewBox="0 0 24 24"
+                className="size-4 shrink-0 mt-0.5"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M4 16H20V5H4V16ZM13 18V20H17V22H7V20H11V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H13Z"></path>
+              </svg>{" "}
+              System
+            </ThemeItem>
+          </div>,
+          modalRoot,
+        )}
+    </>
+  );
+};
+
+export default ThemeToggleButton;
diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx
index d9c1e2a..004f868 100644
--- a/src/contexts/ThemeContext.tsx
+++ b/src/contexts/ThemeContext.tsx
@@ -33,25 +33,7 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
 
     setResolvedTheme(finalTheme);
 
-    const css = document.createElement("style");
-    css.appendChild(
-      document.createTextNode(
-        `* {
-        -webkit-transition: none !important;
-        -moz-transition: none !important;
-        -o-transition: none !important;
-        -ms-transition: none !important;
-        transition: none !important;
-      }`,
-      ),
-    );
-    document.head.appendChild(css);
-
     document.documentElement.classList.toggle("dark", finalTheme === "dark");
-
-    window.getComputedStyle(css).opacity;
-
-    document.head.removeChild(css);
   }, []);
 
   const setTheme = useCallback(
