diff --git a/fe/src/components/common/menuItemEditor/ImageBox.tsx b/fe/src/components/common/menuItemEditor/ImageBox.tsx index 0ab42074..cdf923bd 100644 --- a/fe/src/components/common/menuItemEditor/ImageBox.tsx +++ b/fe/src/components/common/menuItemEditor/ImageBox.tsx @@ -48,7 +48,7 @@ export const ImageBox: React.FC = ({ if (!ALLOWED_TYPES.includes(file.type) || file.size > MAX_FILE_SIZE_BYTES) { toast.noti( - '이미지는 2.6MB 이하의 png, jpg, jpeg 파일만 업로드 가능합니z다.' + '이미지는 2.6MB 이하의 png, jpg, jpeg 파일만 업로드 가능합니다.' ); return; } @@ -85,12 +85,10 @@ export const ImageBox: React.FC = ({ accept=".png, .jpg, .jpeg" onChange={handleUploadImage} /> - - menu item image - + menu item image {isLoading && ( @@ -109,7 +107,6 @@ const ImageWrapper = styled.div<{ $isImageUrl: boolean }>` justify-content: center; align-items: center; cursor: pointer; - overflow: hidden; &::after { content: ''; @@ -130,6 +127,12 @@ const ImageWrapper = styled.div<{ $isImageUrl: boolean }>` } } + img { + width: 95px; + height: 95px; + object-fit: cover; + } + svg { position: absolute; top: 50%; @@ -139,29 +142,13 @@ const ImageWrapper = styled.div<{ $isImageUrl: boolean }>` } `; -const ImageContainer = styled.div` +const SpinnerContainer = styled.div` + position: absolute; + display: flex; + justify-content: center; + align-items: center; width: 100%; height: 100%; - transition: transform 0.2s ease-in-out; - - &:hover { - transform: scale(1.1); - } - - img { - width: 100%; - height: 100%; - object-fit: cover; - } + top: 0; + left: 0; `; - -const SpinnerContainer = styled.div` - position: absolute; - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; - top: 0; - left: 0; -`; \ No newline at end of file