docs: replace image with copyable code block in submit-button.md

fundamentals/code-quality/code/examples/submit-button.md

@@ -40,11 +40,26 @@ function SubmitButton() {
 `<SubmitButton />` 컴포넌트에서는 사용자가 가질 수 있는 2가지의 권한 상태를 하나의 컴포넌트 안에서 한 번에 처리하고 있어요.
 그래서 코드를 읽는 사람이 한 번에 고려해야 하는 맥락이 많아요.
 
-예를 들어, 다음 코드에서 파란색은 사용자가 보기 전용 권한(`'viewer'`)을 가지고 있을 때, 빨간색은 일반 사용자일 때 실행되는 코드예요.
-동시에 실행되지 않는 코드가 교차되어서 나타나서 코드를 이해할 때 부담을 줘요.
+예를 들어, 다음 코드는 일반 사용자일 때만 실행되는 코드예요. 동시에 실행되지 않는 코드가 교차되어 나타나서 코드를 이해할 때 부담을 줘요.
 
-![](../../images/examples/submit-button.png){.light-only}
-![](../../images/examples/submit-button-dark.png){.dark-only}
+```typescript 8,14
+function SubmitButton() {
+  const isViewer = useRole() === "viewer";
+
+  useEffect(() => {
+    if (isViewer) {
+      return;
+    }
+    showButtonAnimation();
+  }, [isViewer]);
+
+  return isViewer ? (
+    <TextButton disabled>Submit</TextButton>
+  ) : (
+    <Button type="submit">Submit</Button>
+  );
+}
+```
 
 ## ✏️ 개선해보기
 

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.
 
-![](../../../images/examples/submit-button.png){.light-only}
-![](../../../images/examples/submit-button-dark.png){.dark-only}
+```typescript 8,14
+function SubmitButton() {
+  const isViewer = useRole() === "viewer";
+
+  useEffect(() => {
+    if (isViewer) {
+      return;
+    }
+    showButtonAnimation();
+  }, [isViewer]);
+
+  return isViewer ? (
+    <TextButton disabled>Submit</TextButton>
+  ) : (
+    <Button type="submit">Submit</Button>
+  );
+}
+```
 
 ## ✏️ Work on Improving
 

fundamentals/code-quality/ja/code/examples/submit-button.md

@@ -41,8 +41,24 @@ function SubmitButton() {
 
 例えば、次のコードで青色の部分はユーザーが閲覧専用権限（`'viewer'`）を持っているときに実行されるコードで、赤色の部分は一般ユーザーの場合に実行されるコードです。同時に実行されないコードが交差して現れるため、コードを理解するのが難しくなってしまっています。
 
-![](../../../images/examples/submit-button.png){.light-only}
-![](../../../images/examples/submit-button-dark.png){.dark-only}
+```typescript 8,14
+function SubmitButton() {
+  const isViewer = useRole() === "viewer";
+
+  useEffect(() => {
+    if (isViewer) {
+      return;
+    }
+    showButtonAnimation();
+  }, [isViewer]);
+
+  return isViewer ? (
+    <TextButton disabled>Submit</TextButton>
+  ) : (
+    <Button type="submit">Submit</Button>
+  );
+}
+```
 
 ## ✏️ リファクタリングしてみる
 

fundamentals/code-quality/zh-hans/code/examples/submit-button.md

@@ -43,8 +43,24 @@ function SubmitButton() {
 例如，在下面的代码中，蓝色部分表示当用户具有仅查看权限（`'viewer'`）时运行的代码，红色部分表示当用户是普通用户时运行的代码。
 由于不同时运行的代码交织在一起，理解代码时产生负担。
 
-![](../../../images/examples/submit-button.png){.light-only}
-![](../../../images/examples/submit-button-dark.png){.dark-only}
+```typescript 8,14
+function SubmitButton() {
+  const isViewer = useRole() === "viewer";
+
+  useEffect(() => {
+    if (isViewer) {
+      return;
+    }
+    showButtonAnimation();
+  }, [isViewer]);
+
+  return isViewer ? (
+    <TextButton disabled>Submit</TextButton>
+  ) : (
+    <Button type="submit">Submit</Button>
+  );
+}
+```
 
 ## ✏️ 尝试改善