[LIB-318] Preview License (#320)

* init Preview License * [ISSUE-319/콜라보레이션] PR 생성 시 본인에게 지정 (#321) * Create pr-auto-assign.yml * Create pr-auto-assign_configs.yml * init Preview License * add: Preview License Btn * ing * css: previewLicense Img --------- Co-authored-by: ImKunYoung <[email protected]>
Liberty52 · Dec 1, 2023 · 22ccfde · 22ccfde
1 parent f303262
commit 22ccfde
Show file tree

Hide file tree

Showing 3 changed files with 158 additions and 16 deletions.
diff --git a/src/component/order/OrderOptions.js b/src/component/order/OrderOptions.js
@@ -6,12 +6,14 @@ import Swal from 'sweetalert2';
 import Button from '../../component/common/Button';
 import ImageInput from '../../component/common/ImageInput';
 import Radio from '../../component/common/Radio';
+import ModalBtn from '@mui/material/Button';
 
 import post from '../../axios/cart/Cart';
 import { getLicenseImg } from '../../axios/order/Order';
 
 import { ORDER_MODE } from '../../constants/mode';
 import { EDITOR, PAYMENT } from '../../constants/path';
+import PreviewLicense from './previewLicense/PreviewLicense';
 
 export default function OrderOptions({ productId, productInfo, price, setPrice }) {
   let imageFile = '';
@@ -143,7 +145,7 @@ export default function OrderOptions({ productId, productInfo, price, setPrice }
           <Options options={productInfo.options} onHandleChange={onHandleChange} />
           <AddImage
             custom={productInfo.custom}
-            optionItems={license.optionItems}
+            optionItems={license?.optionItems}
             moveToEditor={moveToEditor}
             onHandleImg={onHandleImg}
           />
@@ -235,6 +237,16 @@ const Options = ({ options, onHandleChange }) => {
 };
 
 const AddImage = ({ custom, optionItems, moveToEditor, onHandleImg }) => {
+  const [open, setOpen] = useState(false);
+  const [selectedImg, setSelectedImg] = useState(null);
+
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+  const handleImageSelection = (id, src) => {
+    setSelectedImg({ id, src });
+    onHandleImg(id, src);
+  };
+
   return (
     <>
       {custom ? (
@@ -250,24 +262,27 @@ const AddImage = ({ custom, optionItems, moveToEditor, onHandleImg }) => {
           </div>
         </div>
       ) : (
-        optionItems &&
-        optionItems.map((optionItem) => {
-          return (
-            <div key={optionItem.id} style={{ width: '300px', height: '150px' }}>
+        <>
+          {selectedImg && (
+            <div className='selected-image' style={{ marginTop: '20px' }}>
               <img
-                src={optionItem.artUrl}
-                alt={optionItem.artName}
-                onContextMenu={(e) => {
-                  e.preventDefault();
-                }}
-                onClick={(e) => {
-                  onHandleImg(optionItem.id, e.target.src);
-                }}
-                style={{ width: '100%', height: '100%' }}
+                src={selectedImg.src}
+                alt='Selected'
+                onLoad={() => console.log('이미지 로드 성공')}
+                onError={() => console.log('이미지 로드 실패')}
               />
             </div>
-          );
-        })
+          )}
+          <ModalBtn onClick={handleOpen}>라이센스 이미지 보기</ModalBtn>
+          {open && (
+            <PreviewLicense
+              optionItems={optionItems}
+              onHandleImg={handleImageSelection}
+              open={open}
+              handleClose={handleClose}
+            />
+          )}
+        </>
       )}
     </>
   );

diff --git a/src/component/order/previewLicense/PreviewLicense.js b/src/component/order/previewLicense/PreviewLicense.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Modal, Typography, Button } from '@mui/material';
+import CheckIcon from '@mui/icons-material/Check';
+import { StyledModalBox, StyledLabel, ImagesContainer, ButtonContainer } from './StyledComponents';
+
+const PreviewLicense = ({ optionItems, onHandleImg, open, handleClose }) => {
+  const [selectedOption, setSelectedOption] = React.useState(null);
+
+  return (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby='modal-modal-title'
+      aria-describedby='modal-modal-description'
+    >
+      <StyledModalBox>
+        <Typography variant='h6' component='h2'>
+          라이센스 이미지
+        </Typography>
+        <ImagesContainer>
+          {optionItems?.map((optionItem) => {
+            const isSelected = selectedOption === optionItem.id;
+
+            return (
+              <StyledLabel key={optionItem.id} isSelected={isSelected}>
+                <input
+                  type='radio'
+                  name='test'
+                  checked={isSelected}
+                  onChange={() => setSelectedOption(optionItem.id)}
+                />
+                <img
+                  src={optionItem.artUrl}
+                  alt={optionItem.artName}
+                  onContextMenu={(e) => {
+                    e.preventDefault();
+                  }}
+                  onClick={(e) => {
+                    setSelectedOption(optionItem.id);
+                    onHandleImg(optionItem.id, e.target.src);
+                  }}
+                />
+                <CheckIcon className='check-icon' />
+              </StyledLabel>
+            );
+          })}
+        </ImagesContainer>
+        <ButtonContainer>
+          <Button onClick={handleClose}>취소</Button>
+          <Button onClick={handleClose}>확인</Button>
+        </ButtonContainer>
+      </StyledModalBox>
+    </Modal>
+  );
+};
+
+export default PreviewLicense;
diff --git a/src/component/order/previewLicense/StyledComponents.js b/src/component/order/previewLicense/StyledComponents.js
@@ -0,0 +1,70 @@
+import styled from 'styled-components';
+import { Box } from '@mui/system';
+
+export const StyledModalBox = styled(Box)`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #ffffff;
+  border: 2px solid #000;
+  box-shadow: 24px;
+  padding: 16px;
+`;
+
+export const StyledLabel = styled.label`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  transition: box-shadow 0.3s;
+
+  input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    transition: transform 0.3s;
+    transform-origin: center center;
+  }
+
+  .check-icon {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    display: ${({ isSelected }) => (isSelected ? 'block' : 'none')};
+    color: blue;
+    background-color: white;
+    border-radius: 50%;
+    padding: 4px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+  }
+
+  &:hover {
+    img {
+      transform: scale(1.05);
+    }
+  }
+`;
+
+export const ImagesContainer = styled.div`
+  display: flex;
+  gap: 16px;
+  overflow-x: auto;
+  padding: 16px;
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 16px;
+`;