From d371fa10a9fba80885e215bc5828d910b2586bbb Mon Sep 17 00:00:00 2001
From: 1nayu <nayu0386@gmail.com>
Date: Wed, 30 Oct 2024 10:19:10 +0900
Subject: [PATCH] fix: improved image selector align in sportCreator,
 sportEditor

---
 components/sports/sportCreator.tsx | 6 ++++--
 components/sports/sportEditor.tsx  | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/sports/sportCreator.tsx b/components/sports/sportCreator.tsx
index 58af034..85246c5 100644
--- a/components/sports/sportCreator.tsx
+++ b/components/sports/sportCreator.tsx
@@ -92,8 +92,10 @@ export default function SportCreator() {
                             >
                                 {images.map((image) => (
                                     <MenuItem key={image.id} value={image.id}>
-                                        <Avatar src={`${process.env.NEXT_PUBLIC_API_URL}/images/${image.id}/file`}/>
-                                        {image.id}
+                                        <Stack direction={"row"} alignItems={"center"}>
+                                            <Avatar src={`${process.env.NEXT_PUBLIC_API_URL}/images/${image.id}/file`}/>
+                                            <Typography ml={2}>{image.id}</Typography>
+                                        </Stack>
                                     </MenuItem>
                                 ))}
                             </Select>
diff --git a/components/sports/sportEditor.tsx b/components/sports/sportEditor.tsx
index 79477f1..450c39b 100644
--- a/components/sports/sportEditor.tsx
+++ b/components/sports/sportEditor.tsx
@@ -105,8 +105,10 @@ export default function SportEditor(props: SportEditorProps) {
                             >
                                 {images.map((image) => (
                                     <MenuItem key={image.id} value={image.id}>
-                                        <Avatar src={`${process.env.NEXT_PUBLIC_API_URL}/images/${image.id}/file`}/>
-                                        {image.id}
+                                        <Stack direction={"row"} alignItems={"center"}>
+                                            <Avatar src={`${process.env.NEXT_PUBLIC_API_URL}/images/${image.id}/file`}/>
+                                            <Typography ml={2}>{image.id}</Typography>
+                                        </Stack>
                                     </MenuItem>
                                 ))}
                             </Select>