diff --git a/fundamentals/code-quality/code/examples/submit-button.md b/fundamentals/code-quality/code/examples/submit-button.md
index 9860d559..56e11067 100644
--- a/fundamentals/code-quality/code/examples/submit-button.md
+++ b/fundamentals/code-quality/code/examples/submit-button.md
@@ -40,11 +40,26 @@ function SubmitButton() {
`` 컴포넌트에서는 사용자가 가질 수 있는 2가지의 권한 상태를 하나의 컴포넌트 안에서 한 번에 처리하고 있어요.
그래서 코드를 읽는 사람이 한 번에 고려해야 하는 맥락이 많아요.
-예를 들어, 다음 코드에서 파란색은 사용자가 보기 전용 권한(`'viewer'`)을 가지고 있을 때, 빨간색은 일반 사용자일 때 실행되는 코드예요.
-동시에 실행되지 않는 코드가 교차되어서 나타나서 코드를 이해할 때 부담을 줘요.
+예를 들어, 다음 코드는 일반 사용자일 때만 실행되는 코드예요. 동시에 실행되지 않는 코드가 교차되어 나타나서 코드를 이해할 때 부담을 줘요.
-{.light-only}
-{.dark-only}
+```typescript 8,14
+function SubmitButton() {
+ const isViewer = useRole() === "viewer";
+
+ useEffect(() => {
+ if (isViewer) {
+ return;
+ }
+ showButtonAnimation();
+ }, [isViewer]);
+
+ return isViewer ? (
+ Submit
+ ) : (
+
+ );
+}
+```
## ✏️ 개선해보기
diff --git a/fundamentals/code-quality/en/code/examples/submit-button.md b/fundamentals/code-quality/en/code/examples/submit-button.md
index 35289043..c4feb81d 100644
--- a/fundamentals/code-quality/en/code/examples/submit-button.md
+++ b/fundamentals/code-quality/en/code/examples/submit-button.md
@@ -43,8 +43,24 @@ As a result, there are too many contexts for the reader to consider at once.
For example, in the following code, the blue parts are executed when the user has read-only permissions (`'viewer'`), while the red parts are executed for regular users.
Intermixed code that doesn't execute simultaneously creates confusion and makes it harder to understand the logic.
-{.light-only}
-{.dark-only}
+```typescript 8,14
+function SubmitButton() {
+ const isViewer = useRole() === "viewer";
+
+ useEffect(() => {
+ if (isViewer) {
+ return;
+ }
+ showButtonAnimation();
+ }, [isViewer]);
+
+ return isViewer ? (
+ Submit
+ ) : (
+
+ );
+}
+```
## ✏️ Work on Improving
diff --git a/fundamentals/code-quality/images/examples/submit-button-dark.png b/fundamentals/code-quality/images/examples/submit-button-dark.png
deleted file mode 100644
index 621c9529..00000000
Binary files a/fundamentals/code-quality/images/examples/submit-button-dark.png and /dev/null differ
diff --git a/fundamentals/code-quality/images/examples/submit-button.png b/fundamentals/code-quality/images/examples/submit-button.png
deleted file mode 100644
index 9d024155..00000000
Binary files a/fundamentals/code-quality/images/examples/submit-button.png and /dev/null differ
diff --git a/fundamentals/code-quality/ja/code/examples/submit-button.md b/fundamentals/code-quality/ja/code/examples/submit-button.md
index 9eb02fb9..360c56ab 100644
--- a/fundamentals/code-quality/ja/code/examples/submit-button.md
+++ b/fundamentals/code-quality/ja/code/examples/submit-button.md
@@ -41,8 +41,24 @@ function SubmitButton() {
例えば、次のコードで青色の部分はユーザーが閲覧専用権限（`'viewer'`）を持っているときに実行されるコードで、赤色の部分は一般ユーザーの場合に実行されるコードです。同時に実行されないコードが交差して現れるため、コードを理解するのが難しくなってしまっています。
-{.light-only}
-{.dark-only}
+```typescript 8,14
+function SubmitButton() {
+ const isViewer = useRole() === "viewer";
+
+ useEffect(() => {
+ if (isViewer) {
+ return;
+ }
+ showButtonAnimation();
+ }, [isViewer]);
+
+ return isViewer ? (
+ Submit
+ ) : (
+
+ );
+}
+```
## ✏️ リファクタリングしてみる
diff --git a/fundamentals/code-quality/zh-hans/code/examples/submit-button.md b/fundamentals/code-quality/zh-hans/code/examples/submit-button.md
index 02ad2c20..f25e4e15 100644
--- a/fundamentals/code-quality/zh-hans/code/examples/submit-button.md
+++ b/fundamentals/code-quality/zh-hans/code/examples/submit-button.md
@@ -43,8 +43,24 @@ function SubmitButton() {
例如，在下面的代码中，蓝色部分表示当用户具有仅查看权限（`'viewer'`）时运行的代码，红色部分表示当用户是普通用户时运行的代码。
由于不同时运行的代码交织在一起，理解代码时产生负担。
-{.light-only}
-{.dark-only}
+```typescript 8,14
+function SubmitButton() {
+ const isViewer = useRole() === "viewer";
+
+ useEffect(() => {
+ if (isViewer) {
+ return;
+ }
+ showButtonAnimation();
+ }, [isViewer]);
+
+ return isViewer ? (
+ Submit
+ ) : (
+
+ );
+}
+```
## ✏️ 尝试改善