Style: LicenseImg size (#342)

Liberty52 · Dec 5, 2023 · 2070df7 · 2070df7
1 parent 827119e
commit 2070df7
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/src/component/order/OrderOptions.js b/src/component/order/OrderOptions.js
@@ -264,13 +264,11 @@ const AddImage = ({ custom, optionItems, moveToEditor, onHandleImg }) => {
       ) : (
         <>
           {selectedImg && (
-            <div className='selected-image' style={{ marginTop: '20px' }}>
-              <img
-                src={selectedImg.src}
-                alt='Selected'
-                onLoad={() => console.log('이미지 로드 성공')}
-                onError={() => console.log('이미지 로드 실패')}
-              />
+            <div
+              className='selected-image'
+              style={{ marginTop: '20px', width: '300px', height: '200px' }}
+            >
+              <img src={selectedImg.src} alt='Selected' style={{ width: '100%', height: '100%' }} />
             </div>
           )}
           <ModalBtn onClick={handleOpen}>라이센스 이미지 보기</ModalBtn>

diff --git a/src/component/order/previewLicense/PreviewLicense.js b/src/component/order/previewLicense/PreviewLicense.js
@@ -25,7 +25,6 @@ const PreviewLicense = ({ optionItems, onHandleImg, open, handleClose }) => {
               <StyledLabel key={optionItem.id} isSelected={isSelected}>
                 <input
                   type='radio'
-                  name='test'
                   checked={isSelected}
                   onChange={() => setSelectedOption(optionItem.id)}
                 />

diff --git a/src/component/order/previewLicense/StyledComponents.js b/src/component/order/previewLicense/StyledComponents.js
@@ -32,8 +32,11 @@ export const StyledLabel = styled.label`
   img {
     width: 100%;
     height: 100%;
-    transition: transform 0.3s;
-    transform-origin: center center;
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: 8px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
   }
 
   .check-icon {
@@ -57,6 +60,8 @@ export const StyledLabel = styled.label`
 
 export const ImagesContainer = styled.div`
   display: flex;
+  width: 100%;
+  height: 100%;
   gap: 16px;
   overflow-x: auto;
   padding: 16px;