♻️ #289 CreatedLgtmImage をCSSModules に置換え、それに加えて以下の変更を実施

ESlintの以下のErrorを回避する為にaltテキストを追加

32:9  error  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

src/components/Upload/UploadModal/CreatedLgtmImage.module.css

@@ -0,0 +1,19 @@
+.wrapper {
+  flex: none;
+  flex-grow: 0;
+  order: 0;
+}
+
+.image {
+  flex: none;
+  flex-grow: 0;
+  order: 0;
+  width: auto;
+  height: 270px;
+}
+
+@media (max-width: 767px) {
+  .image {
+    max-width: 355px;
+  }
+}

src/components/Upload/UploadModal/CreatedLgtmImage.module.css.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly wrapper: string;
+  readonly image: string;
+};
+export = styles;

src/components/Upload/UploadModal/CreatedLgtmImage.tsx

@@ -1,27 +1,9 @@
 import type { FC } from 'react';
-import styled from 'styled-components';
 import { defaultAppUrl, type AppUrl } from '../../../constants';
 import { useClipboardMarkdown, useCopySuccess } from '../../../hooks';
-import { mixins } from '../../../styles';
 import { type LgtmImageUrl } from '../../../types';
 import { CopiedGithubMarkdownMessage } from '../../LgtmImages/CopiedGithubMarkdownMessage';
-
-const _Wrapper = styled.div`
-  flex: none;
-  flex-grow: 0;
-  order: 0;
-`;
-
-const _Image = styled.img`
-  @media (max-width: ${mixins.mediaQuerySize.default}) {
-    max-width: 355px;
-  }
-  flex: none;
-  flex-grow: 0;
-  order: 0;
-  width: auto;
-  height: 270px;
-`;
+import styles from './CreatedLgtmImage.module.css';
 
 type Props = {
   imagePreviewUrl: string;
@@ -46,9 +28,13 @@ export const CreatedLgtmImage: FC<Props> = ({
 
   return (
     <>
-      <_Wrapper ref={imageContextRef}>
-        <_Image src={imagePreviewUrl} />
-      </_Wrapper>
+      <div ref={imageContextRef} className={styles.wrapper}>
+        <img
+          src={imagePreviewUrl}
+          className={styles.image}
+          alt="Uploaded cat"
+        />
+      </div>
       {copied ? <CopiedGithubMarkdownMessage /> : ''}
     </>
   );