612 lines
19 KiB
JavaScript
612 lines
19 KiB
JavaScript
import React, { useState, useEffect, Fragment } from 'react';
|
|
import styled, { css, keyframes } from 'styled-components';
|
|
|
|
import {
|
|
Title,
|
|
SelectInput,
|
|
BtnWrapper,
|
|
TextInput,
|
|
Label,
|
|
InputLabel,
|
|
Textarea,
|
|
SearchBarAlert,
|
|
ButtonGroupWrapper,
|
|
} from '../../styles/Components';
|
|
import Button from '../common/button/Button';
|
|
import Modal from '../common/modal/Modal';
|
|
import { EventIsItem, EventModify, MenuBannerModify } from '../../apis';
|
|
|
|
import { authList } from '../../store/authList';
|
|
import { useRecoilValue } from 'recoil';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { authType, benItems, commonStatus, currencyItemCode } from '../../assets/data';
|
|
import {
|
|
DetailInputItem, DetailInputRow,
|
|
DetailModalWrapper, RegistGroup, DetailRegistInfo, DetailState, FormRowGroup, FormLabel, FormInput,
|
|
} from '../../styles/ModuleComponents';
|
|
import { convertKTC, combineDateTime, timeDiffMinute, convertKTCDate } from '../../utils';
|
|
import DateTimeInput from '../common/input/DateTimeInput';
|
|
import { useLoading } from '../../context/LoadingProvider';
|
|
import { useAlert } from '../../context/AlertProvider';
|
|
import { alertTypes, battleEventStatusType, languageNames } from '../../assets/data/types';
|
|
import { Tabs, Image as AntImage, Spin } from 'antd';
|
|
import { TYPE_MODIFY, TYPE_REGISTRY } from '../../assets/data/adminConstants';
|
|
import { AntButton, DateTimeRangePicker, DetailLayout, SingleTimePicker } from '../common';
|
|
import AnimatedTabs from '../common/control/AnimatedTabs';
|
|
|
|
function renderImageContent(imageData) {
|
|
if (!imageData) {
|
|
return <NoImagePlaceholder>이미지가 없습니다</NoImagePlaceholder>;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<ImageWrapper>
|
|
<AntImage
|
|
src={imageData.title}
|
|
alt={`${imageData.language} 배너 이미지`}
|
|
style={{ width: '100%', maxHeight: '300px', objectFit: 'contain' }}
|
|
placeholder={
|
|
<AntImage
|
|
preview={false}
|
|
src={imageData.title}
|
|
width={300}
|
|
/>
|
|
}
|
|
// preview={{
|
|
// mask: '미리보기',
|
|
// maskClassName: 'custom-mask',
|
|
// }}
|
|
fallback="data:image/png;base64,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"
|
|
/>
|
|
</ImageWrapper>
|
|
{imageData.content &&
|
|
<ImageUrlInfo>
|
|
<UrlLink
|
|
href={imageData.content}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{imageData.content}
|
|
</UrlLink>
|
|
</ImageUrlInfo>
|
|
}
|
|
</>
|
|
);
|
|
}
|
|
|
|
const MenuBannerDetailModal = ({ detailView, handleDetailView, content, setDetailData }) => {
|
|
const userInfo = useRecoilValue(authList);
|
|
const { t } = useTranslation();
|
|
const token = sessionStorage.getItem('token');
|
|
const {withLoading} = useLoading();
|
|
const {showModal, showToast} = useAlert();
|
|
|
|
const id = content && content.id;
|
|
const updateAuth = userInfo.auth_list && userInfo.auth_list.some(auth => auth.id === authType.menuBannerUpdate);
|
|
|
|
const [time, setTime] = useState({
|
|
start_hour: '00',
|
|
start_min: '00',
|
|
end_hour: '00',
|
|
end_min: '00',
|
|
}); //시간 정보
|
|
|
|
const [resultData, setResultData] = useState(initData);
|
|
const [activeLanguage, setActiveLanguage] = useState('KO');
|
|
// 이미지 프리로드를 위한 상태
|
|
const [allImagesLoaded, setAllImagesLoaded] = useState(false);
|
|
const [showTabContent, setShowTabContent] = useState(false);
|
|
const [loadedImages, setLoadedImages] = useState([]);
|
|
const [totalImageCount, setTotalImageCount] = useState(0);
|
|
|
|
const [tabItems, setTabItems] = useState([]);
|
|
|
|
useEffect(() => {
|
|
if(content){
|
|
console.log(content);
|
|
const start_dt_KTC = convertKTCDate(content.start_dt);
|
|
const end_dt_KTC = convertKTCDate(content.end_dt);
|
|
|
|
setResultData({
|
|
id: content.id,
|
|
title: content.title,
|
|
start_dt: start_dt_KTC,
|
|
end_dt: end_dt_KTC,
|
|
status: content.status,
|
|
order_id: content.order_id,
|
|
is_link: content.is_link,
|
|
image_list: content.image_list,
|
|
});
|
|
|
|
setTime({ ...time,
|
|
start_hour: String(start_dt_KTC.getHours()).padStart(2, '0'),
|
|
start_min: String(start_dt_KTC.getMinutes()).padStart(2, '0'),
|
|
end_hour: String(end_dt_KTC.getHours()).padStart(2, '0'),
|
|
end_min: String(end_dt_KTC.getMinutes()).padStart(2, '0')
|
|
});
|
|
}
|
|
|
|
}, [content]);
|
|
|
|
useEffect(() => {
|
|
if (content && content.image_list) {
|
|
// 초기화
|
|
setAllImagesLoaded(false);
|
|
setShowTabContent(false);
|
|
setLoadedImages([]);
|
|
|
|
// 이미지 개수 설정
|
|
setTotalImageCount(content.image_list ? content.image_list.length : 0);
|
|
|
|
// 첫 번째 언어를 활성 언어로 설정
|
|
if (content.image_list && content.image_list.length > 0) {
|
|
setActiveLanguage(content.image_list[0].language);
|
|
}
|
|
|
|
// 동적으로 탭 아이템 생성
|
|
const newTabItems = content.image_list ? content.image_list.map(imageData => ({
|
|
key: imageData.language,
|
|
label: languageNames[imageData.language] || imageData.language,
|
|
children: (
|
|
<ImageContainer>
|
|
{renderImageContent(imageData)}
|
|
</ImageContainer>
|
|
)
|
|
})) : [];
|
|
|
|
setTabItems(newTabItems);
|
|
|
|
// 모든 이미지 프리로딩 시작
|
|
setTimeout(() => {
|
|
preloadAllImages();
|
|
}, 100);
|
|
}
|
|
}, [content]);
|
|
|
|
const preloadAllImages = () => {
|
|
if (!content || !content.image_list || content.image_list.length === 0) {
|
|
// 이미지가 없는 경우 바로 로딩 완료 처리
|
|
// console.log('이미지가 없습니다. 로딩 완료 처리합니다.');
|
|
setAllImagesLoaded(true);
|
|
setShowTabContent(true);
|
|
return;
|
|
}
|
|
|
|
// console.log(`총 ${content.image_list.length}개의 이미지 로딩을 시작합니다.`);
|
|
|
|
// 이미지 개수가 0이면 로딩 완료 처리
|
|
if (content.image_list.length === 0) {
|
|
setAllImagesLoaded(true);
|
|
setShowTabContent(true);
|
|
return;
|
|
}
|
|
|
|
let loadedCount = 0;
|
|
|
|
// 이미지 로드 완료 이벤트 핸들러
|
|
const handleImageLoad = (url) => {
|
|
loadedCount++;
|
|
// console.log(`이미지 로드 완료 (${loadedCount}/${content.image_list.length}): ${url}`);
|
|
|
|
// 모든 이미지가 로드되었는지 확인
|
|
if (loadedCount >= content.image_list.length) {
|
|
// console.log('모든 이미지 로딩 완료!');
|
|
setAllImagesLoaded(true);
|
|
setShowTabContent(true);
|
|
}
|
|
};
|
|
|
|
// 각 이미지에 대해 프리로드 객체 생성
|
|
content.image_list.forEach(img => {
|
|
if (img.title) {
|
|
// console.log(`이미지 로딩 시작: ${img.title}`);
|
|
const image = new Image();
|
|
image.onload = () => handleImageLoad(img.title);
|
|
image.onerror = () => {
|
|
console.log(`이미지 로드 실패: ${img.title}`);
|
|
handleImageLoad(img.title); // 오류 시에도 카운트
|
|
};
|
|
image.src = img.title; // src 속성은 onload/onerror 핸들러 설정 후에 설정
|
|
} else {
|
|
// console.log('이미지 URL이 없습니다.');
|
|
handleImageLoad('empty'); // URL이 없는 경우에도 카운트
|
|
}
|
|
});
|
|
|
|
// 안전장치: 5초 후에도 로딩이 완료되지 않으면 강제로 완료 처리
|
|
setTimeout(() => {
|
|
if (!allImagesLoaded) {
|
|
// console.log('시간 초과로 로딩 강제 완료');
|
|
setAllImagesLoaded(true);
|
|
setShowTabContent(true);
|
|
}
|
|
}, 5000);
|
|
};
|
|
|
|
// 날짜 처리
|
|
// const handleDateChange = (data, type) => {
|
|
// const date = new Date(data);
|
|
// setResultData({
|
|
// ...resultData,
|
|
// [`${type}_dt`]: combineDateTime(date, time[`${type}_hour`], time[`${type}_min`]),
|
|
// });
|
|
// };
|
|
|
|
// 시간 처리
|
|
const handleTimeChange = (e, type) => {
|
|
const { id, value } = e.target;
|
|
const newTime = { ...time, [`${type}_${id}`]: value };
|
|
setTime(newTime);
|
|
|
|
const date = resultData[`${type}_dt`] ? new Date(resultData[`${type}_dt`]) : new Date();
|
|
|
|
setResultData({
|
|
...resultData,
|
|
[`${type}_dt`]: combineDateTime(date, newTime[`${type}_hour`], newTime[`${type}_min`]),
|
|
});
|
|
};
|
|
|
|
const handleDateChange = {
|
|
start: (date) => {
|
|
setResultData(prev => ({ ...prev, start_dt: date }));
|
|
},
|
|
end: (date) => {
|
|
setResultData(prev => ({ ...prev, end_dt: date }));
|
|
}
|
|
};
|
|
|
|
// 확인 버튼 후 다 초기화
|
|
const handleReset = () => {
|
|
};
|
|
|
|
const checkCondition = () => {
|
|
return (
|
|
(resultData.start_dt.length !== 0) &&
|
|
(resultData.end_dt.length !== 0) &&
|
|
resultData.title !== '' &&
|
|
resultData.order_id !== ''
|
|
);
|
|
};
|
|
|
|
// 탭 변경 핸들러
|
|
const handleTabChange = (key) => {
|
|
setActiveLanguage(key);
|
|
};
|
|
|
|
const handleSubmit = async (type, param = null) => {
|
|
switch (type) {
|
|
case "submit":
|
|
if (!checkCondition()) return;
|
|
|
|
showModal('MENU_BANNER_UPDATE_SAVE', {
|
|
type: alertTypes.confirm,
|
|
onConfirm: () => handleSubmit('updateConfirm')
|
|
});
|
|
break;
|
|
case "updateConfirm":
|
|
withLoading( async () => {
|
|
return await MenuBannerModify(token, id, resultData);
|
|
}).catch(error => {
|
|
showToast('API_FAIL', {type: alertTypes.error});
|
|
}).finally(() => {
|
|
showToast('UPDATE_COMPLETED', {type: alertTypes.success});
|
|
handleDetailView();
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
|
|
const detailState = (status) => {
|
|
switch (status) {
|
|
case commonStatus.wait:
|
|
return <DetailState>대기</DetailState>;
|
|
case commonStatus.running:
|
|
return <DetailState>진행중</DetailState>;
|
|
case commonStatus.finish:
|
|
return <DetailState result={commonStatus.finish}>만료</DetailState>;
|
|
case commonStatus.fail:
|
|
return <DetailState result={commonStatus.fail}>실패</DetailState>;
|
|
case commonStatus.delete:
|
|
return <DetailState result={commonStatus.delete}>삭제</DetailState>;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
//true 수정불가, false 수정가능
|
|
const isView = (fieldName) => {
|
|
if (!updateAuth) return false;
|
|
|
|
if (fieldName === 'editButton') {
|
|
// updateAuth가 없거나 FINISH 상태면 수정 버튼 숨김 (false 반환)
|
|
return !updateAuth || content?.status === commonStatus.finish;
|
|
}
|
|
|
|
switch (content?.status) {
|
|
case commonStatus.running:
|
|
// RUNNING 상태일 때는 end_dt와 order_id만 수정 가능
|
|
return fieldName !== 'date' && fieldName !== 'order_id';
|
|
case commonStatus.wait:
|
|
return true;
|
|
default:
|
|
return false;
|
|
}
|
|
}
|
|
|
|
const itemGroups = [
|
|
{
|
|
items: [
|
|
{
|
|
row: 0,
|
|
col: 0,
|
|
colSpan: 2,
|
|
type: 'text',
|
|
key: 'title',
|
|
label: '제목',
|
|
disabled: !isView('title'),
|
|
width: '250px',
|
|
},
|
|
{
|
|
row: 0,
|
|
col: 2,
|
|
colSpan: 2,
|
|
type: 'number',
|
|
key: 'order_id',
|
|
label: '순서',
|
|
disabled: !isView('order_id'),
|
|
width: '100px',
|
|
min: 0,
|
|
},
|
|
{
|
|
row: 1,
|
|
col: 0,
|
|
colSpan: 2,
|
|
type: 'status',
|
|
key: 'status',
|
|
label: '상태',
|
|
value: resultData.status,
|
|
},
|
|
{
|
|
row: 2,
|
|
col: 0,
|
|
colSpan: 2,
|
|
type: 'dateRange',
|
|
key: 'dateRange',
|
|
keys: {start: 'start_dt', end: 'end_dt'},
|
|
label: '기간',
|
|
disabled: !isView('date'),
|
|
format: 'YYYY-MM-DD HH:mm'
|
|
},
|
|
]
|
|
}
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<Modal min="960px" $view={detailView}>
|
|
<Title $align="center">배너 상세 정보</Title>
|
|
<DetailLayout
|
|
itemGroups={itemGroups}
|
|
formData={resultData}
|
|
onChange={setResultData}
|
|
disabled={!updateAuth}
|
|
columnCount={4}
|
|
/>
|
|
{/*<DetailModalWrapper>*/}
|
|
{/* {content &&*/}
|
|
{/* <RegistGroup>*/}
|
|
{/* <FormRowGroup>*/}
|
|
{/* <DetailInputItem>*/}
|
|
{/* <FormLabel>제목</FormLabel>*/}
|
|
{/* <FormInput*/}
|
|
{/* type="text"*/}
|
|
{/* value={content.title}*/}
|
|
{/* disabled={isView('title')}*/}
|
|
{/* onChange={e => setResultData({ ...resultData, title: e.target.value })}*/}
|
|
{/* width="300px"*/}
|
|
{/* />*/}
|
|
{/* </DetailInputItem>*/}
|
|
{/* <DetailInputItem>*/}
|
|
{/* <FormLabel>순서</FormLabel>*/}
|
|
{/* <FormInput*/}
|
|
{/* placeholder="순서번호"*/}
|
|
{/* type="number"*/}
|
|
{/* value={content.order_id}*/}
|
|
{/* disabled={isView('order_id')}*/}
|
|
{/* onChange={e => setResultData({ ...resultData, order_id: e.target.value })}*/}
|
|
{/* width="200px"*/}
|
|
{/* />*/}
|
|
{/* </DetailInputItem>*/}
|
|
{/* </FormRowGroup>*/}
|
|
{/* <FormRowGroup>*/}
|
|
{/* <DateTimeRangePicker*/}
|
|
{/* label="예약기간"*/}
|
|
{/* startDate={resultData.start_dt}*/}
|
|
{/* endDate={resultData.end_dt}*/}
|
|
{/* onStartDateChange={handleDateChange.start}*/}
|
|
{/* onEndDateChange={handleDateChange.end}*/}
|
|
{/* pastDate={new Date()}*/}
|
|
{/* disabled={isView('date')}*/}
|
|
{/* startLabel="시작 일자"*/}
|
|
{/* endLabel="종료 일자"*/}
|
|
{/* // reset={resetDateTime}*/}
|
|
{/* />*/}
|
|
{/* </FormRowGroup>*/}
|
|
{/* <FormRowGroup>*/}
|
|
{/* <DetailInputItem>*/}
|
|
{/* <FormLabel>상태</FormLabel>*/}
|
|
{/* <div>{detailState(content.status)}</div>*/}
|
|
{/* </DetailInputItem>*/}
|
|
{/* </FormRowGroup>*/}
|
|
{/* {content.image_list && content.image_list.length > 0 && (*/}
|
|
{/* <FormRowGroup style={{display: 'flex', justifyContent: 'center', width: '100%'}}>*/}
|
|
{/* <DetailInputItem style={{width: '100%'}}>*/}
|
|
{/* {!showTabContent ? (*/}
|
|
{/* <LoadingContainer>*/}
|
|
{/* <Spin size="large" tip="이미지 로딩 중..." />*/}
|
|
{/* </LoadingContainer>*/}
|
|
{/* ) : (*/}
|
|
{/* <ContentWrapper $isLoaded={showTabContent}>*/}
|
|
{/* <AnimatedTabs*/}
|
|
{/* items={tabItems}*/}
|
|
{/* activeKey={activeLanguage}*/}
|
|
{/* onChange={handleTabChange}*/}
|
|
{/* />*/}
|
|
{/* </ContentWrapper>*/}
|
|
{/* )}*/}
|
|
|
|
{/* </DetailInputItem>*/}
|
|
{/* </FormRowGroup>*/}
|
|
{/* )}*/}
|
|
|
|
{/* </RegistGroup>*/}
|
|
{/* }*/}
|
|
{/*</DetailModalWrapper>*/}
|
|
<ButtonGroupWrapper $justify="flex-end" $gap="10px" $paddingTop="20px">
|
|
<AntButton
|
|
text="확인"
|
|
theme="line"
|
|
name="확인버튼"
|
|
onClick={() => {
|
|
handleDetailView();
|
|
handleReset();
|
|
setDetailData('');
|
|
}}
|
|
/>
|
|
{!isView('editButton') && (
|
|
<AntButton
|
|
type="submit"
|
|
text="수정"
|
|
id="수정버튼"
|
|
theme={checkCondition() ? 'primary' : 'disable'}
|
|
onClick={() => handleSubmit('submit')}
|
|
/>
|
|
)}
|
|
</ButtonGroupWrapper>
|
|
</Modal>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MenuBannerDetailModal;
|
|
|
|
const initData = {
|
|
title: '',
|
|
is_link: false,
|
|
start_dt: '',
|
|
end_dt: '',
|
|
image_list: [
|
|
{ language: 'KO', content: '', title: '' },
|
|
{ language: 'EN', content: '', title: '' },
|
|
{ language: 'JA', content: '', title: '' },
|
|
]
|
|
}
|
|
|
|
const StyledTabs = styled(Tabs)`
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.ant-tabs-nav {
|
|
margin-bottom: 16px;
|
|
width: 80%;
|
|
}
|
|
|
|
.ant-tabs-nav-wrap {
|
|
justify-content: center;
|
|
}
|
|
|
|
.ant-tabs-tab {
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
|
|
color: #1890ff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ant-tabs-ink-bar {
|
|
background-color: #1890ff;
|
|
}
|
|
|
|
.ant-tabs-content-holder {
|
|
width: 100%;
|
|
}
|
|
`;
|
|
|
|
const ImageContainer = styled.div`
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 16px;
|
|
width: 100%;
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
`;
|
|
|
|
const ImageWrapper = styled.div`
|
|
position: relative;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: 1px solid #f0f0f0;
|
|
width: 100%;
|
|
text-align: center;
|
|
`;
|
|
|
|
const ImageUrlInfo = styled.div`
|
|
margin-top: 16px;
|
|
padding: 12px;
|
|
background-color: #f5f5f5;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
word-break: break-all;
|
|
width: 100%;
|
|
`;
|
|
|
|
const UrlLink = styled.a`
|
|
color: #1890ff;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
&:hover {
|
|
opacity: 0.8;
|
|
}
|
|
`;
|
|
|
|
const NoImagePlaceholder = styled.div`
|
|
width: 100%;
|
|
height: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f0f2f5;
|
|
color: #8c8c8c;
|
|
border-radius: 8px;
|
|
`;
|
|
|
|
// 로딩 인디케이터를 위한 컨테이너
|
|
const LoadingContainer = styled.div`
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 300px;
|
|
width: 100%;
|
|
`;
|
|
|
|
// 컨텐츠 래퍼 - 로딩 상태에 따라 가시성 설정
|
|
const ContentWrapper = styled.div`
|
|
width: 100%;
|
|
opacity: ${props => props.$isLoaded ? 1 : 0};
|
|
transition: opacity 0.3s ease-in-out;
|
|
height: ${props => props.$isLoaded ? 'auto' : '0'};
|
|
overflow: hidden;
|
|
`;
|
|
|
|
|