Error
+{message}
+
- {errorMessage && ⚠ {errorMessage} }
-
-
- :
-
- {errorMessage && item.name === 'artworkType' && ⚠ {errorMessage} }
- {linkRegexMessage && item.name === 'link' && ⚠ {linkRegexMessage} }
-
- ))}
+ {defaultValue.map((item: DefaultValueItem, index: number) =>
+ item.name === 'responsiveMainImage' ? null : item.name === 'mainImage' &&
+ defaultValue[index + 1]?.name === 'responsiveMainImage' ? (
+
+ {/* {errorMessage && ⚠ {errorMessage} } */}
+
+ ) : (
+
+ {/* {errorMessage && item.name === 'artworkType' && ⚠ {errorMessage} } */}
+ {linkRegexMessage && item.name === 'link' && ⚠ {linkRegexMessage} }
+
+ ),
+ )}
!isGetMode && projectType !== 'top' && setProjectType('top')}>Top
- !isGetMode && projectType !== 'main' && setProjectType('main')}>Main
- !isGetMode && projectType !== 'others' && setProjectType('others')}>Others
+ !isGetMode && projectType !== 'top' && setProjectType('top')}>대표
+ !isGetMode && projectType !== 'main' && setProjectType('main')}>메인
+ !isGetMode && projectType !== 'others' && setProjectType('others')}>기본
!isGetMode && !isprojectopened && handleTogglePosted()}>공개
- !isGetMode && isprojectopened && handleTogglePosted()}>비공개
+ !isGetMode && !isprojectopened && handleTogglePosted()}
+ >
+ 공개
+
+ !isGetMode && isprojectopened && handleTogglePosted()}
+ >
+ 비공개
+
!isGetMode && !isprojectopened && handleTogglePosted()}>공개
- !isGetMode && isprojectopened && handleTogglePosted()}>비공개
+ !isGetMode && !isprojectopened && handleTogglePosted()}
+ >
+ 공개
+
+ !isGetMode && isprojectopened && handleTogglePosted()}
+ >
+ 비공개
+
setSelectedProjectType('all')}>전체
- setSelectedProjectType('top')}>Top
- setSelectedProjectType('main')}>Main
+ setSelectedProjectType('top')}>대표
+ setSelectedProjectType('main')}>메인
+
{currentArtworks.map((artwork) => (
prop !== 'projectType',
})<{ projectType: projectType | 'all' }>`
display: flex;
+ font-size: 0.8rem;
align-items: center;
cursor: pointer;
font-family: 'pretendard-semibold';
background-color: #a3a3a360;
- height: 40px;
- border-radius: 20px;
+ height: 2rem;
+ border-radius: 10px;
position: relative;
- width: 225px;
+ width: 12rem;
&::before {
content: '';
position: absolute;
- width: 75px;
+ width: 4rem;
height: 100%;
background-color: #fcfcfce2;
- border-radius: 20px;
+ border-radius: 10px;
transition: transform 0.3s ease-in-out;
transform: ${(props) => {
switch (props.projectType) {
case 'all':
return 'translateX(0)';
case 'top':
- return 'translateX(75px)';
+ return 'translateX(4rem)';
case 'main':
- return 'translateX(150px)';
+ return 'translateX(8rem)';
default:
return 'translateX(0)';
}
diff --git a/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkBox.tsx b/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkBox.tsx
index 2f156ab7..888d8235 100644
--- a/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkBox.tsx
+++ b/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkBox.tsx
@@ -19,12 +19,12 @@ const ArtworkBox = ({
projectImages,
sequence,
}: ArtworkData) => {
- const slicedName = name.length > 25 ? `${name.slice(0, 25)}...` : name;
- const slicedOverview = overView.length > 120 ? `${overView.slice(0, 120)}...` : overView;
- const slicedClient = client.length > 30 ? `${client.slice(0, 30)}...` : client;
+ const slicedName = name.length > 15 ? `${name.slice(0, 15)}...` : name;
+ const slicedOverview = overView.length > 80 ? `${overView.slice(0, 80)}...` : overView;
+ const slicedClient = client.length > 20 ? `${client.slice(0, 20)}...` : client;
return (
- {mainImg ? 
: No Image }
+
- {isPosted ?
- {projectType}
+
+
+
+
+ {projectType === 'others' ? '기본 아트워크' : projectType === 'top' ? '대표 아트워크' : '메인 아트워크'}
+
);
@@ -48,38 +54,38 @@ const Container = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
- width: 100%;
+ width: 35rem;
border-radius: 10px;
- background-color: #afafaf13;
- padding: 20px;
+ background-color: #00000009;
+ padding: 1rem;
box-sizing: border-box;
margin-bottom: 10px;
&:hover {
cursor: pointer;
- opacity: 0.8;
+ opacity: 0.7;
transition: all ease-in-out 300ms;
}
img {
- width: 130px;
- height: 130px;
+ width: 9.4rem;
+ height: 9.4rem;
object-fit: cover;
border-radius: 5px;
}
h1 {
font-family: 'pretendard-semibold';
- font-size: 18px;
+ font-size: 1.1rem;
color: black;
margin-top: 3px;
}
h2 {
font-family: 'pretendard-medium';
- font-size: 15px;
+ font-size: 0.8rem;
color: #707070;
}
h3 {
font-family: 'pretendard-medium';
- font-size: 15px;
+ font-size: 0.9rem;
color: #4b4b4b;
line-height: 18px;
}
@@ -89,22 +95,15 @@ const Wrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
- margin-bottom: 23px;
-`;
-
-const NoMainImageWrapper = styled.div`
- width: 180px;
- height: 180px;
- font-family: 'pretendard-medium';
- font-size: 15px;
- color: #ffffff;
+ margin-bottom: 0.8rem;
`;
const DescriptionWrapper = styled.div`
display: flex;
flex-direction: column;
- justify-content: flex-start;
- width: 500px;
+ justify-content: space-between;
+ width: 100%;
+ height: 100%;
margin-left: 23px;
`;
const RightAlignWrapper = styled.div`
@@ -114,6 +113,10 @@ const RightAlignWrapper = styled.div`
}
`;
+const OverviewWrapper = styled.div`
+ height: 5rem;
+`;
+
const TypeWrapper = styled.div.withConfig({
shouldForwardProp: (prop) => prop !== 'projectType',
})<{ projectType: 'others' | 'top' | 'main' }>`
@@ -123,10 +126,10 @@ const TypeWrapper = styled.div.withConfig({
border-radius: 10px;
background-color: ${({ projectType }) =>
projectType === 'main' ? '#ffaa007d' : projectType === 'top' ? '#d3002384' : '#33333321'};
- margin-bottom: 5px;
+
margin-left: auto;
- margin-top: 15px;
+
font-family: 'pretendard-medium';
- font-size: 15px;
+ font-size: 0.8rem;
color: ${({ projectType }) => (projectType === 'main' || projectType === 'top' ? 'white' : 'black')};
`;
diff --git a/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkDetail.tsx b/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkDetail.tsx
index 7a0d2761..dca865c0 100644
--- a/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkDetail.tsx
+++ b/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkDetail.tsx
@@ -10,8 +10,13 @@ import { PA_ROUTES } from '@/constants/routerConstants';
import { linkCheck } from '@/components/ValidationRegEx/ValidationRegEx';
import { useUnsavedChangesWarning } from '@/hooks/useUnsavedChangesWarning';
import { MSG } from '@/constants/messages';
+import BackDrop from '@/components/Backdrop/Backdrop';
+import ArtworkImgView from './ArtworkImgView';
+import { urlToFile } from '@/utils/urlToFile';
const ArtworkDetail = () => {
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [modalImgSrc, setModalImgSrc] = useState('');
const [getModeMainImg, setGetModeMainImg] = useState('');
const [getModeResponsiveMainImg, setGetModeResponsiveMainImg] = useState('');
const [getModeDetailImgs, setGetModeDetailImgs] = useState([]);
@@ -20,14 +25,13 @@ const ArtworkDetail = () => {
const [isProjectOpened, setIsProjectOpened] = useState(false);
const [projectType, setProjectType] = useState('others');
const [link, setLink] = useState('');
- const [mainImage, setMainImage] = useState(null);
- const [responsiveMainImage, setResponsiveMainImage]=useState(null);
+ const [mainImage, setMainImage] = useState(null);
+ const [responsiveMainImage, setResponsiveMainImage] = useState(null);
const [detailImages, setDetailImages] = useState([]);
const [title, setTitle] = useState('');
const [customer, setCustomer] = useState('');
const [overview, setOverview] = useState('');
const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
- const [errorMessage, setErrorMessage] = useState('');
const { artworkId } = useParams();
const [artworkData, setArtworkData] = useState();
const [isGetMode, setIsGetMode] = useState(true);
@@ -35,36 +39,20 @@ const ArtworkDetail = () => {
const [linkRegexMessage, setLinkRegexMessage] = useState('');
const [isTopMainArtwork, setIsTopMainArtwork] = useState(false);
useUnsavedChangesWarning(MSG.CONFIRM_MSG.EXIT, !isGetMode);
- const [putData, setPutData] = useState({
- request: {
- projectId: 0,
- department: '',
- category: '',
- name: '',
- client: '',
- date: '',
- link: '',
- overView: '',
- deletedImageId: [],
- },
- file: '',
- responsiveFile: '',
- files: [],
- });
useEffect(() => {
setSubmitButtonDisabled(
!selectedDate ||
- selectedCategory === '' ||
- projectType === null ||
- link === '' ||
- !mainImage ||
- !responsiveMainImage ||
- !detailImages ||
- detailImages.length === 0 ||
- title === '' ||
- customer === '' ||
- overview === '',
+ selectedCategory === '' ||
+ projectType === null ||
+ link === '' ||
+ !mainImage ||
+ !responsiveMainImage ||
+ !detailImages ||
+ detailImages.length === 0 ||
+ title === '' ||
+ customer === '' ||
+ overview === '',
);
}, [
selectedDate,
@@ -79,28 +67,19 @@ const ArtworkDetail = () => {
customer,
overview,
]);
+
useEffect(() => {
fetchArtworkDetails();
setIsGetMode(true);
}, [artworkId]);
+
useEffect(() => {
- setErrorMessage('');
if (projectType === 'top' || projectType === 'main') {
setIsTopMainArtwork(true);
} else {
setIsTopMainArtwork(false);
}
}, [projectType]);
- async function urlToFile(url: string, fileName: string): Promise {
- try {
- const response = await fetch(url);
- const blob = await response.blob();
- return new File([blob], fileName);
- } catch (error) {
- console.error('Error URL to file:', error);
- throw error;
- }
- }
// fetchArtworkDetails 함수 내에서 ArtworkData를 받아와서 state에 설정하는 부분
const fetchArtworkDetails = async () => {
@@ -113,76 +92,54 @@ const ArtworkDetail = () => {
setIsProjectOpened(data.isPosted);
setProjectType(data.projectType);
setLink(data.link);
- setPutData({
- request: {
- projectId: data.id,
- department: '',
- category: data.category,
- name: data.name,
- client: data.client,
- date: data.date,
- link: data.link,
- overView: data.overView,
- deletedImageId: [],
- },
- file: data.mainImg,
- responsiveFile: data.responsiveMainImg,
- files: [],
- });
+ setCustomer(data.client);
+ setOverview(data.overView);
+
if (data.projectType === 'top' || data.projectType === 'main') {
setIsTopMainArtwork(true);
} else {
setIsTopMainArtwork(false);
}
+
if (data.mainImg) {
- setGetModeMainImg(data.mainImg);
try {
- const mainImgFile = await urlToFile(data.mainImg + '?t=' + Date.now(), `${data.mainimg}.png`);
+ const mainImgFile = await urlToFile(data.mainImg);
setMainImage(mainImgFile);
+ setGetModeMainImg(data.mainImg);
} catch (error) {
- console.error('Error fetching artwork details:', error);
+ console.error('[ArtworkDetail Failed to load main image]', error);
+ setMainImage(null);
+ setGetModeMainImg('');
}
- }else{
- setGetModeMainImg('');
- setMainImage(null);
}
- if(data.responsiveMainImg){
- setGetModeResponsiveMainImg(data.responsiveMainImg);
+
+ if (data.responsiveMainImg) {
try {
- const responsiveMainImgFile = await urlToFile(data.responsiveMainImg + '?t=' + Date.now(), `${data.responsiveMainImg}.png`);
- setResponsiveMainImage(responsiveMainImgFile);
+ const responsiveImgFile = await urlToFile(data.responsiveMainImg);
+ setResponsiveMainImage(responsiveImgFile);
+ setGetModeResponsiveMainImg(data.responsiveMainImg);
} catch (error) {
- console.error('Error fetching artwork details:', error);
+ console.error('[ArtworkDetail Failed to load responsive main image]', error);
+ setResponsiveMainImage(null);
+ setGetModeResponsiveMainImg('');
}
- }else{
- setGetModeResponsiveMainImg('');
- setResponsiveMainImage(null);
}
+
if (data.projectImages && data.projectImages.length > 0) {
try {
const detailImageFiles = await Promise.all(
- data.projectImages.map(async (image: { imageUrlList: string }) => {
- const detailImgFile = await urlToFile(image.imageUrlList, `${image.imageUrlList}.png`);
- return detailImgFile;
- }),
+ data.projectImages.map(async (image: { imageUrlList: string }) => urlToFile(image.imageUrlList)),
);
setDetailImages(detailImageFiles);
- setPutData((prevState) => ({
- ...prevState,
- files: detailImageFiles,
- }));
+ setGetModeDetailImgs(data.projectImages.map((image: { imageUrlList: string }) => image.imageUrlList));
} catch (error) {
- console.error('Error fetching artwork details:', error);
+ console.error('[ArtworkDetail Failed to load detail images]', error);
+ setDetailImages([]);
+ setGetModeDetailImgs([]);
}
- setGetModeDetailImgs(data.projectImages.map((image: { imageUrlList: string }) => image.imageUrlList));
- }else{
- setGetModeDetailImgs([]);
- setDetailImages([]);
}
- setCustomer(data.client);
- setOverview(data.overView);
} catch (error) {
- console.error('Error fetching artwork details', error);
+ console.error('[Error fetching artwork details]', error);
}
};
@@ -213,16 +170,23 @@ const ArtworkDetail = () => {
}
};
+ // 메인 이미지 상태 변경
const handleMainImageChange = (newImage: File | File[]) => {
- setMainImage(Array.isArray(newImage) ? newImage[0] : newImage);
+ const updatedImage = Array.isArray(newImage) ? newImage[0] : newImage;
+ setMainImage(updatedImage); // 새 이미지로 상태 교체
};
- const handleResponsiveMainImageChange=(newImage:File|File[])=>{
- setResponsiveMainImage(Array.isArray(newImage) ? newImage[0] : newImage);
+ // 반응형 메인 이미지 상태 변경
+ const handleResponsiveMainImageChange = (newImage: File | File[]) => {
+ const updatedImage = Array.isArray(newImage) ? newImage[0] : newImage;
+ setResponsiveMainImage(updatedImage); // 새 이미지로 상태 교체
};
+ // 상세 이미지 상태 변경
const handleDetailImageChange = (newImages: File | File[]) => {
- setDetailImages(Array.isArray(newImages) ? newImages : [newImages]);
+ const updatedImages = Array.isArray(newImages) ? newImages : [newImages];
+ const truncatedImages = updatedImages.slice(0, 3); // 최대 3개 제한
+ setDetailImages(truncatedImages); // 새 이미지로 상태 교체
};
const handleTitleChange = (newTitle: string) => {
@@ -252,29 +216,31 @@ const ArtworkDetail = () => {
if (mainImage) {
formData.append('file', mainImage);
}
- if (responsiveMainImage){
- formData.append('responsiveFile',responsiveMainImage);
+ if (responsiveMainImage) {
+ formData.append('responsiveFile', responsiveMainImage);
}
if (detailImages) {
detailImages.forEach((file, index) => {
formData.append('files', file);
});
}
+ const formDataEntries = Array.from(formData.entries());
+ formDataEntries.forEach(([key, value]) => {
+ console.log(`${key}:`, value);
+ });
try {
const response = await putArtwork(formData);
if (response.code === 400 && response.data === null && response.message) {
- setErrorMessage(response.message);
return;
}
alert(MSG.ALERT_MSG.SAVE);
await fetchArtworkDetails();
setIsGetMode(true);
- setErrorMessage('');
window.scrollTo({ top: 0, behavior: 'smooth' });
} catch (error: any) {
- console.log('Error creating artwork:', error);
+ console.log('[artwork updating error]', error);
}
};
@@ -288,11 +254,21 @@ const ArtworkDetail = () => {
navigate(`${PA_ROUTES.ARTWORK}`);
} catch (error) {
alert(MSG.CONFIRM_MSG.FAILED);
- console.error('Error deleting artwork:', error);
- // 삭제 실패 시 처리
+ console.error('Error deleting requestData:', detailImages);
}
}
};
+
+ const handleImageClick = (src: string) => {
+ setModalImgSrc(src);
+ setIsModalOpen(true);
+ };
+
+ const closeModal = () => {
+ setIsModalOpen(false);
+ setModalImgSrc('');
+ };
+
const defaultValue = getArtworkDefaultValue(
selectedDate,
handleDateChange,
@@ -317,6 +293,7 @@ const ArtworkDetail = () => {
overview,
handleOverviewChange,
isTopMainArtwork,
+ handleImageClick,
getModeMainImg,
getModeResponsiveMainImg,
getModeDetailImgs,
@@ -324,41 +301,52 @@ const ArtworkDetail = () => {
);
return (
-
-
- {defaultValue.map((item: DefaultValueItem, index: number) => (
- item.name==='responsiveMainImage'?null:
- item.name === 'mainImage' && defaultValue[index + 1]?.name === 'responsiveMainImage'?
+ <>
+ {isModalOpen && (
+
+
+ {defaultValue.map((item: DefaultValueItem, index: number) =>
+ item.name === 'responsiveMainImage' ? null : item.name === 'mainImage' &&
+ defaultValue[index + 1]?.name === 'responsiveMainImage' ? (
+
+
{!isGetMode && (
handleSubmit()}
>
저장하기
)}
- {isGetMode && 수정하기 }
- {' '}
- 삭제하기
-
+ {isGetMode && (
+
+ 수정하기
+
+ )}{' '}
+ 삭제하기
+ {' '}
+
);
};
@@ -367,27 +355,27 @@ export default ArtworkDetail;
const Container = styled.div`
display: flex;
flex-direction: column;
- width: 100%;
+ width: 44rem;
position: relative;
`;
const ValueWrapper = styled.div`
- background-color: rgba(255, 255, 255, 0.336);
+ background-color: #00000009;
border-radius: 10px;
backdrop-filter: blur(7px);
box-sizing: border-box;
width: 100%;
- padding: 55px 55px;
+ padding: 2rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
- gap: 30px;
+ gap: 0.5rem; /* 박스 간 간격 */
`;
const SubmitBtn = styled.button`
border: none;
outline-style: none;
font-family: 'pretendard-semibold';
- font-size: 17px;
+ font-size: 1rem;
background-color: #6c757d;
width: 150px;
text-align: center;
@@ -395,7 +383,7 @@ const SubmitBtn = styled.button`
border-radius: 5px;
transition: all 0.3s ease-in-out;
cursor: pointer;
- padding: 10px 20px;
+ padding: 0.7rem;
margin-left: auto;
margin-top: 20px;
&:disabled {
@@ -407,6 +395,8 @@ const SubmitBtn = styled.button`
}
&:hover {
background-color: #5a6268;
+ cursor: pointer;
+ transition: all 300ms ease-in-out;
}
`;
@@ -421,23 +411,36 @@ const ErrorMessage = styled.div`
margin-bottom: 15px;
`;
-const DeleteWrapper = styled.div`
+const DeleteWrapper = styled.button`
+ border: none;
+ outline-style: none;
font-family: 'pretendard-semibold';
- font-size: 17px;
- background-color: #c0c0c0;
- text-align: center;
+ font-size: 1rem;
+ background-color: #6c757d;
width: 150px;
text-align: center;
color: white;
border-radius: 5px;
transition: all 0.3s ease-in-out;
cursor: pointer;
- padding: 10px 20px;
+ padding: 0.7rem;
margin-left: auto;
- margin-right: 20px;
margin-top: 20px;
+ &:disabled {
+ opacity: 0.5;
+ cursor: default;
+ &:hover {
+ background-color: #6c757d;
+ }
+ }
&:hover {
+ cursor: pointer;
+ transition: all 300ms ease-in-out;
background-color: #ca0505c5;
}
`;
+
+const ButtonContainer = styled.div`
+ text-align: right;
+`;
diff --git a/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkImgView.tsx b/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkImgView.tsx
new file mode 100644
index 00000000..c59374a3
--- /dev/null
+++ b/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkImgView.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Modal = ({ src, closeModal }: { src: string; closeModal: () => void }) => {
+ return (
+
+
+ 
+
+ 닫기
+
+ );
+};
+
+export default Modal;
+
+const Container = styled.div`
+ padding: 1rem;
+ height: auto;
+ width: 30rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+`;
+const ModalContent = styled.div`
+ max-width: 100%;
+ max-height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 1rem;
+ img {
+ object-fit: contain;
+ max-width: 100%;
+ max-height: 100%;
+ border-radius: 10px;
+ }
+`;
+
+const CloseButton = styled.div`
+ font-size: 0.8rem;
+ cursor: pointer;
+ width: fit-content;
+ font-family: 'pretendard-semibold';
+ padding: 10px 20px;
+ background-color: #6c757d;
+ color: white;
+ border-radius: 5px;
+ margin-left: auto;
+ &:hover {
+ background-color: #5a6268;
+ }
+`;
diff --git a/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkInput.tsx b/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkInput.tsx
deleted file mode 100644
index 89856e5f..00000000
--- a/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkInput.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import React, { ChangeEvent, useState } from 'react';
-import styled from 'styled-components';
-
-type Props = {
- label: string;
- name?: string;
- value?: string;
- onChange?: (e: React.ChangeEvent) => void;
- onTextAreaChange?: (e: ChangeEvent) => void;
- isEditMode: boolean;
- isFile: boolean;
- mainFile?: string;
-};
-
-const ArtworkInput = ({ label, name, value, onChange, onTextAreaChange, isEditMode, isFile, mainFile }: Props) => {
- const [previewUrl, setPreviewUrl] = useState(mainFile || value);
-
- const handleFileChange = (e: ChangeEvent) => {
- const file = e.target.files && e.target.files[0];
- if (file) {
- const reader = new FileReader();
- reader.onload = () => {
- setPreviewUrl(reader.result as string);
- };
- reader.readAsDataURL(file);
- }
- if (onChange) {
- onChange(e);
- }
- };
- return (
-
- {isFile ? (
- <>
- {label}
- Main Images는 최대 한 개만 지정이 가능합니다.
- {isEditMode ? (
- <>
-
- 이미지 업로드
-
-
- ) : (
- mainFile &&
- {label}
- {isEditMode ? (
-
- ) : (
- {value}
- )}
-
- )}
-
- );
-};
-export default ArtworkInput;
-
-const Container = styled.div`
- input[type='file'] {
- display: none;
- }
-`;
-
-const FileLabel = styled.label`
- background: inherit;
- border-style: none;
- border-radius: 5px;
- height: 30px;
- padding: 5px 10px;
-
- cursor: pointer;
- font-family: 'pretendard-regular';
- font-size: 15px;
- background-image: none;
- color: #fff;
- background-color: #2b2b2b;
-
- &:hover {
- background-color: #2b2b2b71;
- transition: all 300ms ease-in-out;
- }
-`;
-const FileWrapper = styled.div`
- margin-bottom: 15px;
-`;
-const FileInput = styled.input`
- display: none;
-`;
-const LabelWrapper = styled.div`
- font-family: 'pretendard-bold';
- font-size: 20px;
- margin-bottom: 15px;
-`;
-
-const MainImg = styled.img`
- width: 100%;
- height: 280px;
- object-fit: contain;
- margin-top: 20px;
- margin-bottom: 20px;
-`;
-
-const FileDes = styled.div`
- font-family: 'pretendard-light';
- font-size: 15px;
- opacity: 0.8;
- margin-bottom: 15px;
-`;
-
-const TextInputWrapper = styled.div`
- display: flex;
- margin-bottom: 20px;
- height: fit-content;
- align-items: center;
-
- textarea {
- font-family: 'pretendard-regular';
- font-size: 18px;
- height: fit-content;
- background: inherit;
- border-radius: 5px;
- border-style: none;
- background-color: #f7f7f7f2;
- resize: none; /* 크기 조절 비활성화 */
- display: flex;
- align-items: center;
- width: 90%;
- padding: 10px;
- overflow-y: hidden;
- &:hover {
- background-color: #7e7e7e2c;
- transition: all 300ms ease-in-out;
- }
- &:focus {
- outline: none;
- }
- }
-`;
-const TextInputLabelWrapper = styled.div`
- font-family: 'pretendard-bold';
- font-size: 20px;
- width: 100px;
-`;
-
-const DetailWrapper = styled.div`
- font-family: 'pretendard-regular';
- height: fit-content;
-`;
diff --git a/src/components/PromotionAdmin/Artwork/ArtworkHeader.tsx b/src/components/PromotionAdmin/Artwork/ArtworkHeader.tsx
index e686c744..189ae90d 100644
--- a/src/components/PromotionAdmin/Artwork/ArtworkHeader.tsx
+++ b/src/components/PromotionAdmin/Artwork/ArtworkHeader.tsx
@@ -4,11 +4,10 @@ import { useEffect, useState } from 'react';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import styled from 'styled-components';
-const ArtworkHeader = ({ initialCheck, control }
- : { initialCheck: number; control: (isEditing: number) => void }) => {
+const ArtworkHeader = ({ initialCheck, control }: { initialCheck: number; control: (isEditing: number) => void }) => {
const [isChecked, setIsChecked] = useState(initialCheck);
- const [moveChecked, setMoveChecked]=useState(false);
- const isUpdate=useRecoilValue(dataUpdateState);//sequence 변경 있는지 확인
+ const [moveChecked, setMoveChecked] = useState(false);
+ const isUpdate = useRecoilValue(dataUpdateState); //sequence 변경 있는지 확인
const setupdate = useSetRecoilState(dataUpdateState);
useEffect(() => {
//초기값 변경될 때 상태 업데이트
@@ -16,29 +15,56 @@ const ArtworkHeader = ({ initialCheck, control }
}, [initialCheck]);
return (
- {
- if(isUpdate){
- if(window.confirm("현재 페이지를 나가면 변경 사항이 저장되지 않습니다.\n나가시겠습니까?")){
- setMoveChecked(false)
- setupdate(false)
- }else{
- setMoveChecked(true)
- setupdate(true)
+ {
+ if (isUpdate) {
+ if (window.confirm('현재 페이지를 나가면 변경 사항이 저장되지 않습니다.\n나가시겠습니까?')) {
+ setMoveChecked(false);
+ setupdate(false);
+ } else {
+ setMoveChecked(true);
+ setupdate(true);
+ }
}
- }}}>
+ }}
+ >
@@ -32,11 +32,17 @@ const ArtworkBox = ({
{slicedName}
{category}
{slicedOverview}
{slicedOverview}
+
- {errorMessage && ⚠ {errorMessage} }
-
-
- :
-
- {errorMessage && !isGetMode && item.name === 'artworkType' && (
- ⚠ {errorMessage}
- )}{' '}
- {linkRegexMessage && item.name === 'link' && ⚠ {linkRegexMessage} }
-
- ))}
-
+ ) : (
+
+ {linkRegexMessage && item.name === 'link' && ⚠ {linkRegexMessage} }
+
+ ),
+ )}
+
- {control(0)}} defaultChecked={isChecked === 0}
- disabled={moveChecked}/>
+ {
+ control(0);
+ }}
+ defaultChecked={isChecked === 0}
+ disabled={moveChecked}
+ />
- {control(1)}} defaultChecked={isChecked === 1}
- disabled={moveChecked}/>
+ {
+ control(1);
+ }}
+ defaultChecked={isChecked === 1}
+ disabled={moveChecked}
+ />
- {control(2)}} defaultChecked={isChecked === 2}
- disabled={moveChecked}/>
+ {
+ control(2);
+ }}
+ defaultChecked={isChecked === 2}
+ disabled={moveChecked}
+ />
@@ -57,7 +83,7 @@ const HeaderWrapper = styled.div`
margin-bottom: 21px;
.tabs {
- width: 450px;
+ width: 24rem;
display: flex;
flex-direction: row;
// position: relative;
@@ -77,8 +103,8 @@ const HeaderWrapper = styled.div`
align-items: center;
justify-content: center;
height: 50px;
- width: 150px;
- font-size: 1.2rem;
+ width: 8rem;
+ font-size: 1rem;
border-radius: 99px; // just a high number to create pill effect
cursor: pointer;
transition: color 0.15s ease-in;
@@ -118,7 +144,7 @@ const HeaderWrapper = styled.div`
position: absolute;
display: flex;
height: 50px;
- width: 150px;
+ width: 8rem;
background-color: ${theme.color.yellow.light};
z-index: 1;
border-radius: 99px;
diff --git a/src/components/PromotionAdmin/Artwork/CategoryDropDown.tsx b/src/components/PromotionAdmin/Artwork/CategoryDropDown.tsx
index b66db1ce..9203d499 100644
--- a/src/components/PromotionAdmin/Artwork/CategoryDropDown.tsx
+++ b/src/components/PromotionAdmin/Artwork/CategoryDropDown.tsx
@@ -39,13 +39,14 @@ export default CategoryDropDown;
const Wrapper = styled.div`
position: relative;
- height: 30px;
- width: 90%;
+ box-sizing: border-box;
+ width: 100%;
+ padding: 0.7rem;
text-align: center;
border-radius: 5px;
z-index: 15;
background-color: #dadada9f;
- padding: 8px;
+
&:hover {
cursor: pointer;
background-color: #ffffff73;
@@ -83,7 +84,7 @@ const Dropdown = styled.div`
width: 100%;
border-top: none;
border-radius: 0 0 5px 5px;
- background-color: #ffffffa6;
+ background-color: #ffffff75;
backdrop-filter: blur(5px);
`;
diff --git a/src/components/PromotionAdmin/Header/index.tsx b/src/components/PromotionAdmin/Header/index.tsx
index 39d4bd99..791bb07d 100644
--- a/src/components/PromotionAdmin/Header/index.tsx
+++ b/src/components/PromotionAdmin/Header/index.tsx
@@ -40,7 +40,6 @@ const Index = () => {
},
{
enabled: !!auth.userId,
- refetchInterval: 60000, // 1분마다 새로고침
onSuccess: (data) => {
if (data.length === 0) {
setIconStatus(false);
@@ -51,7 +50,6 @@ const Index = () => {
const unreadNotificationsExist = data.some((notification) => !notification.isRead);
setIconStatus(unreadNotificationsExist);
- // 알림 정렬
const sorted = data.sort((a, b) => Number(b.isRead) - Number(a.isRead));
setSortedNotifications(sorted);
@@ -255,7 +253,7 @@ const NotiContainer = styled.div`
h1 {
color: #595959;
font-family: 'pretendard-semibold';
- font-size: 1.6rem;
+ font-size: 1.4rem;
margin-bottom: 15px;
}
`;
@@ -267,5 +265,6 @@ const TextContainer = styled.div`
font-family: 'pretendard-regular';
font-size: 1rem;
color: #aaa;
+ margin-bottom: 1rem;
text-align: left;
`;
diff --git a/src/components/PromotionAdmin/Home/Graph/Graph.tsx b/src/components/PromotionAdmin/Home/Graph/Graph.tsx
index 11b7faac..8412d1fb 100644
--- a/src/components/PromotionAdmin/Home/Graph/Graph.tsx
+++ b/src/components/PromotionAdmin/Home/Graph/Graph.tsx
@@ -11,8 +11,8 @@ type Props = {
title: string;
processedData: { x: string; y: number }[];
data: ViewData[] | RequestData[];
- handleCategoryChange: (category:string)=>void;
- handleStateChange: (state:string)=>void;
+ handleCategoryChange: (category: string) => void;
+ handleStateChange: (state: string) => void;
handleStartDateChange: (newStartDate: dayjs.Dayjs | null) => void;
handleEndDateChange: (newEndDate: dayjs.Dayjs | null) => void;
category: string;
@@ -24,10 +24,10 @@ type Props = {
filter2: Option[];
};
-type Option={
- value:string;
- label:string;
-}
+type Option = {
+ value: string;
+ label: string;
+};
const Graph = ({
title,
@@ -45,14 +45,14 @@ const Graph = ({
filter,
filter2,
}: Props) => {
- const [showFilter2, setShowFilter2] = useState(false);
- useEffect(()=>{
- if(division==='request'||category===MenuType.ARTWORK){
+ const [showFilter2, setShowFilter2] = useState(false);
+ useEffect(() => {
+ if (division === 'request' || category === MenuType.ARTWORK) {
setShowFilter2(true);
- }else{
+ } else {
setShowFilter2(false);
}
- },[category])
+ }, [category]);
return (
@@ -70,17 +70,40 @@ const Graph = ({
/>
-
- handleCategoryChange(e.target.value)}>
- {filter&&filter.map((option)=>{
- return {option.label}
- })}
+
@@ -159,7 +182,7 @@ const ErrorWrapper = styled.div`
}
`;
-const FilterSelect=styled.select`
+const FilterSelect = styled.select`
min-width: fit-content;
height: fit-content;
backdrop-filter: blur(4px);
@@ -168,8 +191,8 @@ const FilterSelect=styled.select`
padding: 4px;
font-size: 0.9rem;
font-family: 'pretendard';
-`
-const FilterOption=styled.option`
-font-size: 0.9rem;
-font-family: pretendard;
-`
\ No newline at end of file
+`;
+const FilterOption = styled.option`
+ font-size: 0.9rem;
+ font-family: pretendard;
+`;
diff --git a/src/components/PromotionAdmin/Home/Graph/LineGraph.tsx b/src/components/PromotionAdmin/Home/Graph/LineGraph.tsx
index 7846db52..646a7a2c 100644
--- a/src/components/PromotionAdmin/Home/Graph/LineGraph.tsx
+++ b/src/components/PromotionAdmin/Home/Graph/LineGraph.tsx
@@ -9,10 +9,10 @@ type LineGraphProps = {
const LineGraph = ({ data, division }: LineGraphProps) => {
const colors = division === 'request' ? ['#0064FF'] : ['#E16262'];
- const yValues = data.map(d => d.y);
+ const yValues = data.map((d) => d.y);
const maxY = Math.max(...yValues); // 최대값 계산
const numberOfTicks = 5; // 원하는 tick 개수
- let tickValues:number[]=[];
+ let tickValues: number[] = [];
// yValues가 비어 있지 않은 경우에만 tickValues를 계산
if (maxY > 0) {
const interval = maxY / (numberOfTicks - 1); // 간격 계산
@@ -47,14 +47,6 @@ const LineGraph = ({ data, division }: LineGraphProps) => {
legend: '',
legendOffset: 36,
legendPosition: 'middle',
- truncateTickAt: 0,
- format: (value) => {
- const parts = value.split(' ');
- if (parts.length === 2) {
- return parts[1];
- }
- return value;
- },
}}
axisLeft={{
tickSize: 5,
@@ -63,40 +55,71 @@ const LineGraph = ({ data, division }: LineGraphProps) => {
legend: '',
legendOffset: -40,
legendPosition: 'middle',
- truncateTickAt: 0,
tickValues: tickValues,
- format: (value) => Math.round(value).toString(),
}}
+ enableGridX={true}
+ enableGridY={true}
+ animate={true}
enablePoints={true}
pointSize={10}
pointColor={{ theme: 'background' }}
pointBorderWidth={2}
pointBorderColor={{ from: 'serieColor' }}
+ pointLabel={(d) => `${d.y}`}
pointLabelYOffset={-12}
+ enablePointLabel={false} // 포인트 레이블 비활성화
enableArea={true}
- enableTouchCrosshair={true}
+ areaOpacity={0.3}
+ areaBaselineValue={0}
+ areaBlendMode='normal'
+ lineWidth={2}
+ legends={[]} // 범례 비활성화
+ isInteractive={true}
+ debugMesh={false}
+ enableSlices='x' // 슬라이스 활성화
+ debugSlices={false}
+ enableCrosshair={true}
+ crosshairType='bottom-left'
+ role='application'
+ defs={[]} // 그래프 패턴 정의
+ fill={[]} // 채우기 스타일 정의
useMesh={true}
- tooltip={(tooltip) => {
- return (
-
+ handleCategoryChange(e.target.value)}
+ >
+ {filter &&
+ filter.map((option, index) => {
+ return (
+
+ {option.label}
+
+ );
+ })}
- handleStateChange(e.target.value)} disabled={showFilter2?false:true}>
- {filter2&&filter2.map((option,index)=>{
- return {option.label}
- })}
+ handleStateChange(e.target.value)}
+ disabled={showFilter2 ? false : true}
+ >
+ {filter2 &&
+ filter2.map((option, index) => {
+ return (
+
+ {option.label}
+
+ );
+ })}
-
@@ -34,7 +34,7 @@ const WatingRequests = () => {
승인 대기 의뢰 총 {data && data.length > 0 ? data.length : 0}건
-
+
{sortByRecent ? '최신순' : '오래된 순'}
@@ -131,7 +131,9 @@ const LoadingWrapper = styled.div`
font-size: 17px;
`;
-const SortWrapper = styled.button<{ rotate: boolean }>`
+const SortWrapper = styled.button.withConfig({
+ shouldForwardProp: (prop) => prop !== 'rotate',
+})<{ rotate: boolean }>`
border-style: none;
background: inherit;
display: flex;
diff --git a/src/components/PromotionAdmin/Home/RequestSummary/WaitingRequestsList.tsx b/src/components/PromotionAdmin/Home/RequestSummary/WaitingRequestsList.tsx
index 8c32f403..2391753b 100644
--- a/src/components/PromotionAdmin/Home/RequestSummary/WaitingRequestsList.tsx
+++ b/src/components/PromotionAdmin/Home/RequestSummary/WaitingRequestsList.tsx
@@ -14,7 +14,16 @@ type Props = {
hoverBackgroundColor: string;
};
-const WaitingRequestsList = ({ requestId, organization, clientName, description, category, date, email, hoverBackgroundColor }: Props) => {
+const WaitingRequestsList = ({
+ requestId,
+ organization,
+ clientName,
+ description,
+ category,
+ date,
+ email,
+ hoverBackgroundColor,
+}: Props) => {
const limitedOrganization = organization.length > 10 ? organization.slice(0, 10) + '...' : organization;
const limitedDescription = description.length > 28 ? description.slice(0, 28) + '...' : description;
const limitedName = clientName.length > 7 ? clientName.slice(0, 7) + '...' : clientName;
@@ -36,7 +45,9 @@ const WaitingRequestsList = ({ requestId, organization, clientName, description,
export default WaitingRequestsList;
-const Container = styled(Link)<{ hoverBackgroundColor: string }>`
+const Container = styled(Link).withConfig({
+ shouldForwardProp: (prop) => prop !== 'hoverBackgroundColor',
+})<{ hoverBackgroundColor: string }>`
display: flex;
align-items: center;
justify-content: space-between;
@@ -67,6 +78,7 @@ const Container = styled(Link)<{ hoverBackgroundColor: string }>`
width: 150px;
}
`;
+
const OrganizationWrapper = styled.div`
width: 150px;
white-space: nowrap;
@@ -91,4 +103,4 @@ const DetailWrapper = styled.div`
font-family: 'pretendard-regular';
font-size: 13px;
}
-`;
\ No newline at end of file
+`;
diff --git a/src/components/PromotionAdmin/Recruitment/index.tsx b/src/components/PromotionAdmin/Recruitment/index.tsx
index 77c295f5..45cbcf49 100644
--- a/src/components/PromotionAdmin/Recruitment/index.tsx
+++ b/src/components/PromotionAdmin/Recruitment/index.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useEffect } from 'react';
import { PA_ROUTES } from '@/constants/routerConstants';
import styled from 'styled-components';
import NavBtn from './NavBtn';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
const linksData = [
{
@@ -19,13 +19,21 @@ const linksData = [
function DetailNavigator() {
const location = useLocation();
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ // 페이지가 리로드되었을 때, location.pathname에 따라 조건을 설정
+ if (location.pathname === `${PA_ROUTES.RECRUITMENT}/benefit/manage`) {
+ navigate(`${PA_ROUTES.RECRUITMENT}/benefit/manage`);
+ }
+ }, [location.pathname, navigate]);
return (
{linksData.map((link, index) => {
const isActive =
- location.pathname === link.path || location.pathname === link.relatedPaths;
+ location.pathname === link.path || location.pathname === link.relatedPaths;
return (
- {isError?{isError} :아직 프로젝트가 없습니다. }
+ 아직 프로젝트가 없습니다.
<path
@@ -53,8 +52,6 @@ export default NullException;
const Msg = styled.div`
color: ${(props) => props.theme.color.white.bold};
font-size: 20px;
-
-
@media ${theme.media.mobile} {
width: 85vw;
display: flex;
diff --git a/src/components/PromotionPage/ArtworkDetail/ScrollAnimatedComponent.tsx b/src/components/PromotionPage/ArtworkDetail/ScrollAnimatedComponent.tsx
index 0da6e458..7f098454 100644
--- a/src/components/PromotionPage/ArtworkDetail/ScrollAnimatedComponent.tsx
+++ b/src/components/PromotionPage/ArtworkDetail/ScrollAnimatedComponent.tsx
@@ -22,5 +22,11 @@ function ScrollAnimatedComponent({ article }: string | any) {
export default ScrollAnimatedComponent;
const Article = styled.div`
+ justify-content: center;
+ text-align: left;
+ width: 90%;
+ margin: 0 auto;
font-family: ${(props) => props.theme.font.semiBold};
+ // text-align: center;
+ word-break: keep-all;
`;
diff --git a/src/components/PromotionPage/Header/HeaderDetail.tsx b/src/components/PromotionPage/Header/HeaderDetail.tsx
index 3d409058..e3eafb28 100644
--- a/src/components/PromotionPage/Header/HeaderDetail.tsx
+++ b/src/components/PromotionPage/Header/HeaderDetail.tsx
@@ -60,7 +60,7 @@ export default HeaderDetail;
const NavWrapper = styled.div`
span {
position: relative;
- z-index: 1;
+ z-index: 2;
}
li {
list-style: none;
@@ -82,6 +82,7 @@ const NavWrapper = styled.div`
&:hover::after {
width: 100%;
+ z-index:1;
}
}
`;
diff --git a/src/components/PromotionPage/Main/ArtworkList.tsx b/src/components/PromotionPage/Main/ArtworkList.tsx
index 7ffa3996..1a6bda00 100644
--- a/src/components/PromotionPage/Main/ArtworkList.tsx
+++ b/src/components/PromotionPage/Main/ArtworkList.tsx
@@ -34,7 +34,7 @@ const ArtworkList = React.forwardRef<HTMLElement, SectionProps>(({ index, data,
};
return (
- <MotionBox data-cy="artwork-section"
+ <MotionBox data-cy="artworklist-section"
w="100%"
h="100vh"
scrollSnapType='y mandatory'
diff --git a/src/components/PromotionPage/Main/ArtworkSlider.tsx b/src/components/PromotionPage/Main/ArtworkSlider.tsx
index 7dd98bda..37c733c5 100644
--- a/src/components/PromotionPage/Main/ArtworkSlider.tsx
+++ b/src/components/PromotionPage/Main/ArtworkSlider.tsx
@@ -12,14 +12,14 @@ const ArtworkSlider: React.FC<IArtworkSliderProps> = ({ artworks }) => {
const activeIndexRef = useRef(0);
useEffect(() => {
- if (!artworks || artworks.length === 0) return;
+ if (!artworks || artworks.length <= 1) return;
const interval = setInterval(() => {
setTransitioning(true);
activeIndexRef.current = (activeIndexRef.current + 1) % artworks.length;
- // 0.1초 후 activeIndex 교체 -> 바꿀 준비 완
+ // 0.2초 후 activeIndex 교체 -> 바꿀 준비 완
setTimeout(() => {
setActiveIndex(activeIndexRef.current);
setTransitioning(false);
@@ -31,10 +31,32 @@ const ArtworkSlider: React.FC<IArtworkSliderProps> = ({ artworks }) => {
if (!artworks || artworks.length === 0) {
return <>표시할 아트워크가 없습니다.</>;
+ } // 수정하기
+
+ if (artworks.length === 1) {
+ return (
+ <div data-cy="artworkslider-section" style={{ height: '100vh' }}>
+ <ArtworkList
+ key={0}
+ data={{
+ backgroundImg: artworks[0].mainImg || '',
+ title: artworks[0].name || '',
+ client: artworks[0].client || '',
+ overview: artworks[0].overView,
+ link: artworks[0].link,
+ }}
+ count={1}
+ scrollToSection={() => {}}
+ elementHeight={window.innerHeight}
+ index={0}
+ />
+ </div>
+ );
}
return (
<div
+ data-cy="artworkslider-section"
style={{
position: 'relative',
overflow: 'hidden',
@@ -99,3 +121,4 @@ const ArtworkSlider: React.FC<IArtworkSliderProps> = ({ artworks }) => {
};
export default ArtworkSlider;
+
diff --git a/src/components/PromotionPage/Main/Intro.tsx b/src/components/PromotionPage/Main/Intro.tsx
index 142c6930..611b833b 100644
--- a/src/components/PromotionPage/Main/Intro.tsx
+++ b/src/components/PromotionPage/Main/Intro.tsx
@@ -1,5 +1,5 @@
import { motion, useInView } from 'framer-motion';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
import styled from 'styled-components';
import Circle from '../Circle/Circle';
import { getCompanyData } from '../../../apis/PromotionAdmin/dataEdit';
@@ -7,11 +7,7 @@ import { Link } from 'react-router-dom';
import { theme } from '@/styles/theme';
import { INTRO_DATA } from '@/constants/introdutionConstants';
import { useQuery } from 'react-query';
-
-interface ICompanyData {
- mainOverview: string;
- commitment: string;
-}
+import { ICompanyData } from '@/types/PromotionAdmin/dataEdit';
const Intro = () => {
const introRef = useRef(null);
@@ -22,13 +18,24 @@ const Intro = () => {
const desInView = useInView(desRef);
const circleInView = useInView(circleRef);
- const { data, isLoading, error } = useQuery<ICompanyData, Error>(['company', 'id'], getCompanyData);
+ const [companyMainOverview, setCompanyMainOverview] = useState<string>('');
+ const [companyCommitment, setCompanyCommitment] = useState<string>('');
+
+ const { data, isLoading, error } = useQuery<ICompanyData, Error>(
+ ['company', 'id'],
+ getCompanyData
+ );
- const companyMainOverview = data?.mainOverview || INTRO_DATA.MAIN_OVERVIEW;
- const companyCommitment = data?.commitment || INTRO_DATA.COMMITMENT;
+ useEffect(() => {
+ if (data) {
+ setCompanyMainOverview(data.mainOverview);
+ setCompanyCommitment(data.commitment);
+ }
+ }, [data]);
if (isLoading) return <>is Loading...</>;
if (error) return <>Intro Error: {error.message}</>;
+
return (
<Container data-cy="intro-section">
<IntroWrapper data-cy="intro_mainOverview" ref={introRef}>
@@ -37,7 +44,7 @@ const Intro = () => {
animate={{ opacity: introInView ? 1 : 0, y: introInView ? 0 : 100 }}
transition={{ duration: 1, delay: 0.2 }}
dangerouslySetInnerHTML={{
- __html: companyMainOverview,
+ __html: companyMainOverview || INTRO_DATA.MAIN_OVERVIEW,
}}
></motion.div>
</IntroWrapper>
@@ -47,7 +54,7 @@ const Intro = () => {
animate={{ opacity: desInView ? 1 : 0, y: desInView ? 0 : 100 }}
transition={{ duration: 2, delay: 0.6 }}
dangerouslySetInnerHTML={{
- __html: companyCommitment,
+ __html: companyCommitment || INTRO_DATA.COMMITMENT,
}}
></motion.div>
</DesWrapper>
@@ -68,6 +75,7 @@ const Intro = () => {
export default Intro;
+
const Container = styled.div`
width: 100%;
height: 100vh;
@@ -85,7 +93,7 @@ const Container = styled.div`
}
@supports (-webkit-touch-callout: none) {
- .modal { /* 넘어가지 않는 요소에 사용 */
+ .modal {
height: -webkit-fill-available;
}
}
diff --git a/src/constants/messages.ts b/src/constants/messages.ts
index 2115e4e6..7fbd2eb1 100644
--- a/src/constants/messages.ts
+++ b/src/constants/messages.ts
@@ -16,6 +16,7 @@ const BUTTON_MSG = {
const CONFIRM_MSG = {
SAVE: '저장하시겠습니까?',
+ EDIT: '수정하시겠습니까?',
DELETE: '삭제하시겠습니까?',
POST: '등록하시겠습니까?',
CANCLE: '취소하시겠습니까?',
@@ -31,8 +32,10 @@ const CONFIRM_MSG = {
const ALERT_MSG = {
SAVE: '저장되었습니다.',
+ EDIT: '수정되었습니다.',
DELETE: '삭제되었습니다.',
POST: '등록되었습니다.',
+ COMPLETE: '완료되었습니다.',
};
const PLACEHOLDER_MSG = {
@@ -75,8 +78,6 @@ const ERROR_MSG = {
'현재 서버 또는 인터넷 연결 문제로 인해 문의 등록이 완료되지 않았습니다. 불편을 드려 죄송합니다. 문제가 지속될 경우, 문의해 주시면 신속히 도와드리겠습니다.',
};
-const INFO_MSG = {};
-
export const MSG = {
BUTTON_MSG,
ALERT_MSG,
diff --git a/src/constants/ppErrorMessage.ts b/src/constants/ppErrorMessage.ts
new file mode 100644
index 00000000..e7140724
--- /dev/null
+++ b/src/constants/ppErrorMessage.ts
@@ -0,0 +1,10 @@
+// HTTP 상태 코드 관련 에러 메시지
+export const ERROR_MESSAGES = {
+ NETWORK_ERROR: "네트워크 에러가 발생했어요! 네트워크 환경을 확인해주세요.",
+ BAD_REQUEST: "잘못된 요청입니다! 요청을 다시 확인해주세요.",
+ UNAUTHORIZED: "인증에 실패했습니다! 다시 로그인 해주세요.",
+ FORBIDDEN: "접근 권한이 없습니다!",
+ NOT_FOUND: "요청하신 리소스를 찾을 수 없습니다!",
+ SERVER_ERROR: "서버에서 문제가 발생했습니다! 잠시 후 다시 시도해주세요.",
+ DEFAULT_ERROR: "알 수 없는 에러가 발생했습니다! 다시 시도해주세요.",
+};
\ No newline at end of file
diff --git a/src/hooks/useGraphData.tsx b/src/hooks/useGraphData.tsx
index ff53ea4c..fbc75e71 100644
--- a/src/hooks/useGraphData.tsx
+++ b/src/hooks/useGraphData.tsx
@@ -3,15 +3,21 @@ import { useState, useEffect, useCallback } from 'react';
import dayjs from 'dayjs';
// 해당 기간의 데이터를 가져오는 함수
-const fetchDataByRange = async (category: string, state: string, startDate: dayjs.Dayjs, endDate: dayjs.Dayjs, fetchFunction: Function) => {
+const fetchDataByRange = async (
+ category: string,
+ state: string,
+ startDate: dayjs.Dayjs,
+ endDate: dayjs.Dayjs,
+ fetchFunction: Function,
+) => {
if (!startDate || !endDate) return [];
const startYear = startDate.year();
const startMonth = startDate.month() + 1;
const endYear = endDate.year();
const endMonth = endDate.month() + 1;
- console.log(category+" "+state)
+
try {
- return await fetchFunction(startYear,startMonth,endYear,endMonth,category,state);
+ return await fetchFunction(startYear, startMonth, endYear, endMonth, category, state);
} catch (error) {
console.error(`[❌Error ${fetchFunction.name}]`, error);
return [];
@@ -35,10 +41,14 @@ const processChartData = (startDate: dayjs.Dayjs, endDate: dayjs.Dayjs, data: an
const foundData = data.find(
(item: { year: number; month: number }) => item.year === month.year && item.month === month.month,
);
- const count = foundData ? (division === 'statistics' ? foundData.views
- : (Object.values(foundData.RequestCount)as number[])
- .reduce((acc: number, value: number)=>{return acc+value},0)) : 0;
- console.log(count)
+ const count = foundData
+ ? division === 'statistics'
+ ? foundData.views
+ : (Object.values(foundData.RequestCount) as number[]).reduce((acc: number, value: number) => {
+ return acc + value;
+ }, 0)
+ : 0;
+
return {
x: `${month.year}년 ${month.month}월`,
y: count,
@@ -53,8 +63,8 @@ const useGraphData = (
defaultEndDate: dayjs.Dayjs,
division: 'statistics' | 'request',
) => {
- const [category, setCategory] = useState(division==='request'?'all':'ALL'); // 카테고리 상태 추가
- const [state, setState] = useState(division==='request'?'all':'ALL'); // 카테고리 상태 추가
+ const [category, setCategory] = useState(division === 'request' ? 'all' : 'ALL'); // 카테고리 상태 추가
+ const [state, setState] = useState(division === 'request' ? 'all' : 'ALL'); // 카테고리 상태 추가
const [startDate, setStartDate] = useState<dayjs.Dayjs | null>(defaultStartDate);
const [endDate, setEndDate] = useState<dayjs.Dayjs | null>(defaultEndDate);
const [data, setData] = useState<any[]>([]);
@@ -63,7 +73,13 @@ const useGraphData = (
const fetchData = useCallback(async () => {
setLoading(true);
- const fetchedData = await fetchDataByRange(category, state, startDate || dayjs(), endDate || dayjs(), fetchFunction);
+ const fetchedData = await fetchDataByRange(
+ category,
+ state,
+ startDate || dayjs(),
+ endDate || dayjs(),
+ fetchFunction,
+ );
setData(fetchedData);
setProcessedData(processChartData(startDate || dayjs(), endDate || dayjs(), fetchedData, division));
setLoading(false);
@@ -74,14 +90,14 @@ const useGraphData = (
}, [category, state, startDate, endDate, division, fetchData]);
//카테고리 변경 핸들러
- const handleCategoryChange=(category:string)=>{
+ const handleCategoryChange = (category: string) => {
setCategory(category);
- setState(division==='request'?'all':'ALL');
- }
+ setState(division === 'request' ? 'all' : 'ALL');
+ };
//상태 변경 핸들러
- const handleStateChange=(state:string)=>{
+ const handleStateChange = (state: string) => {
setState(state);
- }
+ };
// 시작일 변경 핸들러
const handleStartDateChange = (newStartDate: dayjs.Dayjs | null) => {
@@ -94,8 +110,20 @@ const useGraphData = (
};
// 상태와 핸들러를 반환
- return { category, state, startDate, endDate, data, processedData, loading,
- handleCategoryChange,handleStateChange,handleStartDateChange, handleEndDateChange, division };
+ return {
+ category,
+ state,
+ startDate,
+ endDate,
+ data,
+ processedData,
+ loading,
+ handleCategoryChange,
+ handleStateChange,
+ handleStartDateChange,
+ handleEndDateChange,
+ division,
+ };
};
export default useGraphData;
diff --git a/src/loaders/aboutPageLoader.ts b/src/loaders/aboutPageLoader.ts
index ff6ba632..2ca6ed7c 100644
--- a/src/loaders/aboutPageLoader.ts
+++ b/src/loaders/aboutPageLoader.ts
@@ -3,6 +3,7 @@ import { CEO_DATA } from '@/constants/introdutionConstants';
import { ICEOInfoData, ICorpInfoData } from '@/types/PromotionPage/about';
import LocomoLogo from '@/assets/images/Locomo.png';
import defaultCEOLogo from '@/assets/images/PP/studioeye_ceo.png';
+import { AxiosError } from 'axios';
const defaultCEOData: ICEOInfoData = {
id: 1,
@@ -24,21 +25,23 @@ const defaultCorpData: ICorpInfoData[] = [
];
export const aboutPageLoader = async () => {
+ const errors: AxiosError[] = [];
try {
const [ceoData, partnersData, companyData, companyDetailData] = await Promise.all([
- getCEOData().catch(() => defaultCEOData), // CEO 데이터 실패 시 기본값 반환
- getPartnersData().catch(() => defaultCorpData), // Partners 데이터 실패 시 기본값 반환
- getCompanyData().catch(() => ({ introduction: '', sloganImageUrl: '' })), // 회사 데이터 실패 시 기본값 반환
- getCompanyDetailData().catch(() => []), // 회사 세부 데이터 실패 시 빈 배열 반환
+ getCEOData().catch((error) => { errors.push(error); return { data: defaultCEOData, error }; }), // CEO 데이터 실패 시 기본값 반환
+ getPartnersData().catch((error) => { errors.push(error); return { data: defaultCorpData, error }; }), // Partners 데이터 실패 시 기본값 반환
+ getCompanyData().catch((error) => { errors.push(error); return { data: { introduction: '', sloganImageUrl: '' }, error };}), // 회사 데이터 실패 시 기본값 반환
+ getCompanyDetailData().catch((error) => { errors.push(error); return { data: [], error }; }), // 회사 세부 데이터 실패 시 빈 배열 반환
]);
// 강제 새로고침 효과를 위해 데이터 복사
return {
ceoData: JSON.parse(JSON.stringify(ceoData || defaultCEOData)),
partnersData: JSON.parse(JSON.stringify(partnersData || defaultCorpData)),
- companyIntroData: companyData.introduction || '',
- sloganImageUrl: companyData.sloganImageUrl || '',
+ companyIntroData: companyData.data.introduction || '',
+ sloganImageUrl: companyData.data.sloganImageUrl || '',
companyDetailData: companyDetailData || [],
+ errors: errors,
};
} catch (error) {
console.error('[🌡AboutPageLoader Error]', error);
@@ -50,6 +53,7 @@ export const aboutPageLoader = async () => {
companyIntroData: '',
sloganImageUrl: '',
companyDetailData: [],
+ errors,
};
}
};
diff --git a/src/pages/PromotionAdmin/DataEditPage/MenuPage/MenuPage.tsx b/src/pages/PromotionAdmin/DataEditPage/MenuPage/MenuPage.tsx
index 24320b63..afca1276 100644
--- a/src/pages/PromotionAdmin/DataEditPage/MenuPage/MenuPage.tsx
+++ b/src/pages/PromotionAdmin/DataEditPage/MenuPage/MenuPage.tsx
@@ -20,11 +20,11 @@ interface IMenuData {
function MenuPage() {
const [menuList, setMenuList] = useState<IMenuData[]>([]);
- const [isLoading, setIsLoading] = useState<boolean>(true); // 로딩 상태 관리
+ const [isLoading, setIsLoading] = useState<boolean>(true);
const fetchMenuData = async () => {
try {
- setIsLoading(true); // 데이터를 가져오는 동안 로딩 시작
+ setIsLoading(true);
const data = await getAllMenuData();
if (data && Array.isArray(data.data) && data.data.length > 0) {
diff --git a/src/pages/PromotionAdmin/FaqPage/FAQCheckPage.tsx b/src/pages/PromotionAdmin/FaqPage/FAQCheckPage.tsx
index 27bf4183..f5a0ce13 100644
--- a/src/pages/PromotionAdmin/FaqPage/FAQCheckPage.tsx
+++ b/src/pages/PromotionAdmin/FaqPage/FAQCheckPage.tsx
@@ -51,7 +51,6 @@ export default function FAQCheckPage() {
);
}
-// Styled components
const Wrapper = styled.div``;
const TitleWrapper = styled.div`
display: flex;
diff --git a/src/pages/PromotionAdmin/FaqPage/FAQManagePage.tsx b/src/pages/PromotionAdmin/FaqPage/FAQManagePage.tsx
index ce9aa4d6..6c97a2c1 100644
--- a/src/pages/PromotionAdmin/FaqPage/FAQManagePage.tsx
+++ b/src/pages/PromotionAdmin/FaqPage/FAQManagePage.tsx
@@ -4,7 +4,7 @@ import { useQuery } from 'react-query';
import { IFAQ, getFAQData } from '../../../apis/PromotionAdmin/faq';
import { useState, useEffect } from 'react';
import { theme } from '@/styles/theme';
-import { updateFAQData, deleteFAQData } from '../../../apis/PromotionAdmin/faq';
+import { deleteFAQData } from '../../../apis/PromotionAdmin/faq';
import { useForm } from 'react-hook-form';
import { PA_ROUTES } from '@/constants/routerConstants';
import Pagination from '@/components/Pagination/Pagination';
@@ -45,9 +45,6 @@ function FAQManagePage() {
const sliced = data.slice(indexOfFirst, indexOfLast);
setSlicedFAQ(sliced);
- const queryParams = new URLSearchParams(location.search);
- const page = queryParams.get('page');
-
if (sliced.length === 0 && currentPage > 1) {
setCurrentPage((prevPage) => prevPage - 1);
navigator(`?page=${currentPage - 1}`);
@@ -90,13 +87,12 @@ function FAQManagePage() {
}, [currentFAQ, setValue]);
const handleDelete = async (id: number) => {
- if (window.confirm('삭제하시겠습니까?')) {
+ if (window.confirm(MSG.CONFIRM_MSG.DELETE)) {
try {
await deleteFAQData(id);
- alert('FAQ가 삭제되었습니다.');
+ alert(MSG.ALERT_MSG.DELETE);
refetch();
} catch (error) {
- console.log(error);
alert('FAQ 삭제 중 오류가 발생했습니다.');
}
}
@@ -108,21 +104,11 @@ function FAQManagePage() {
return;
}
- const formData = {
- id: currentFAQ.id,
- question: data.question,
- answer: data.answer,
- visibility: currentFAQ.visibility,
- };
-
- if (!(data.question === '' || data.answer === '') && window.confirm('수정하시겠습니까?')) {
+ if (!(data.question === '' || data.answer === '') && window.confirm(MSG.CONFIRM_MSG.EDIT)) {
try {
- const response = await updateFAQData(formData);
- alert('FAQ가 수정되었습니다.');
- console.log(response);
+ alert(MSG.ALERT_MSG.EDIT);
setIsEditing(false);
} catch (error) {
- console.log(error);
alert('FAQ 수정 중 오류가 발생했습니다.');
}
}
@@ -171,7 +157,7 @@ function FAQManagePage() {
};
const handleConfirmNavigation = (faq: IFAQ) => {
- if (window.confirm('현재 페이지를 나가면 변경 사항이 저장되지 않습니다.\n나가시겠습니까?')) {
+ if (window.confirm(MSG.CONFIRM_MSG.EXIT)) {
setIsEditing(false);
setCurrentFAQ(faq);
setIsSelected(true);
@@ -184,9 +170,9 @@ function FAQManagePage() {
const handleAddNewFAQ = () => {
if (isEditing) {
- if (window.confirm('현재 페이지를 나가면 변경 사항이 저장되지 않습니다.\n나가시겠습니까?')) {
+ if (window.confirm(MSG.CONFIRM_MSG.EXIT)) {
setIsEditing(false);
- navigator(`${PA_ROUTES.FAQ}/write`);
+ navigator(`${PA_ROUTES.FAQ}/manage`);
}
} else {
navigator(`${PA_ROUTES.FAQ}/write`);
diff --git a/src/pages/PromotionAdmin/RecruitmentPage/BenefitManagePage.tsx b/src/pages/PromotionAdmin/RecruitmentPage/BenefitManagePage.tsx
index 861d727c..6075ba7f 100644
--- a/src/pages/PromotionAdmin/RecruitmentPage/BenefitManagePage.tsx
+++ b/src/pages/PromotionAdmin/RecruitmentPage/BenefitManagePage.tsx
@@ -83,18 +83,15 @@ function BenefitManagePage() {
try {
const response = await deleteBenefitData(id);
alert('사내 복지가 삭제되었습니다.');
- console.log(response);
await refetch();
setCurrentBenefit(null);
} catch (error) {
- console.log(error);
alert('사내 복지 삭제 중 오류가 발생했습니다.');
}
}
};
const onValid = async (data: IBenefit) => {
- console.log(currentBenefit);
const formData = new FormData();
formData.append(
'request',
@@ -123,12 +120,10 @@ function BenefitManagePage() {
try {
const response = await updateBenefit(formData);
alert('사내 복지가 수정되었습니다.');
- console.log(response);
await refetch();
setIsEditing(false);
setImgChange(false);
} catch (error) {
- console.log(error);
alert('사내 복지 수정 중 오류가 발생했습니다.');
}
}
@@ -137,12 +132,10 @@ function BenefitManagePage() {
try {
const response = await updateBenefitText(formData);
alert('사내 복지가 수정되었습니다.');
- console.log(response);
await refetch();
setIsEditing(false);
setImgChange(false);
} catch (error) {
- console.log(error);
alert('사내 복지 수정 중 오류가 발생했습니다.');
}
}
@@ -262,16 +255,23 @@ function BenefitManagePage() {
if (isEditing) {
if (window.confirm('현재 페이지를 나가면 변경 사항이 저장되지 않습니다.\n나가시겠습니까?')) {
setIsEditing(false);
- navigator(`${PA_ROUTES.RECRUITMENT}/benefit/write`);
+ } else {
+ return;
}
- } else {
- navigator(`${PA_ROUTES.RECRUITMENT}/benefit/write`);
}
+ if ((data?.length || 0) >= 20) {
+ alert('최대 등록 가능한 사내 복지는 20개입니다.');
+ return;
+ }
+
+ navigator(`${PA_ROUTES.RECRUITMENT}/benefit/write`);
};
+
if (isLoading) return <>Loading...</>;
if (error) return <>{error.message}</>;
+
return (
<Wrapper>
<LeftContentWrapper>
diff --git a/src/pages/PromotionAdmin/RecruitmentPage/BenefitWritePage.tsx b/src/pages/PromotionAdmin/RecruitmentPage/BenefitWritePage.tsx
index 13fcaa83..7e5b599e 100644
--- a/src/pages/PromotionAdmin/RecruitmentPage/BenefitWritePage.tsx
+++ b/src/pages/PromotionAdmin/RecruitmentPage/BenefitWritePage.tsx
@@ -112,11 +112,9 @@ function BenefitWritePage() {
try {
const response = await postBenefit(formData);
alert('사내 복지가 등록되었습니다.');
- console.log(response);
setIsEditing(false);
navigator(`${PA_ROUTES.RECRUITMENT}/benefit/manage`, { replace: true });
} catch (error) {
- console.log(error);
alert('사내 복지 등록 중 오류가 발생했습니다.');
}
}
diff --git a/src/pages/PromotionAdmin/RecruitmentPage/RecruitmentManagePage.tsx b/src/pages/PromotionAdmin/RecruitmentPage/RecruitmentManagePage.tsx
index c3bc748b..aeb47178 100644
--- a/src/pages/PromotionAdmin/RecruitmentPage/RecruitmentManagePage.tsx
+++ b/src/pages/PromotionAdmin/RecruitmentPage/RecruitmentManagePage.tsx
@@ -45,7 +45,7 @@ function RecruitmentManagePage() {
useEffect(() => {
if (!isFetching && !isRefetching && data && data.content.length === 0) {
- navigator(`${PA_ROUTES.RECRUITMENT}/write`);
+ navigator(`${PA_ROUTES.RECRUITMENT}/manage`);
}
}, [data, navigator, isFetching, isRefetching]);
@@ -89,7 +89,6 @@ function RecruitmentManagePage() {
try {
const response = await deleteRecruitmentData(id);
alert('채용공고가 삭제되었습니다.');
- console.log(response);
await refetch();
const updatedTotalPosts = totalPosts - 1;
@@ -100,7 +99,6 @@ function RecruitmentManagePage() {
setCurrentRecruitment(null);
} catch (error) {
- console.log(error);
alert('채용공고 삭제 중 오류가 발생했습니다.');
}
}
@@ -147,11 +145,9 @@ function RecruitmentManagePage() {
try {
const response = await updateRecruitmentData(formData);
alert('채용공고가 수정되었습니다.');
- console.log(response);
setIsEditing(false);
refetch();
} catch (error) {
- console.log(error);
alert('채용공고 수정 중 오류가 발생했습니다.');
}
}
@@ -202,7 +198,7 @@ function RecruitmentManagePage() {
if (isEditing) {
if (window.confirm('현재 페이지를 나가면 변경 사항이 저장되지 않습니다.\n나가시겠습니까?')) {
setIsEditing(false);
- navigator(`${PA_ROUTES.RECRUITMENT}/write`);
+ navigator(`${PA_ROUTES.RECRUITMENT}/manage`);
}
} else {
navigator(`${PA_ROUTES.RECRUITMENT}/write`);
@@ -229,31 +225,43 @@ function RecruitmentManagePage() {
</Button>
</TitleWrapper>
<ListWrapper>
- {data?.content.map((recruitment) => (
- <RecruimentList key={recruitment.id} data-cy='recruitment-list-item'>
- <DeleteIcon
- data-cy='delete-button'
- width={15}
- height={15}
- onClick={() => handleDelete(recruitment.id, data.totalElements)}
- />
- <RecruimentItem
- isSelected={currentRecruitment?.id === recruitment.id && isSelected}
- onClick={() => {
- fetchRecruitmentData(recruitment.id);
- }}
- >
- <RecruimentTitle data-cy='posted-recruitment-title'>{recruitment.title}</RecruimentTitle>
- </RecruimentItem>
- <RecruimentStatus
- isDeadline={recruitment.status === 'CLOSE'}
- isPreparing={recruitment.status === 'PREPARING'}
- >
- {recruitment.status === 'CLOSE' ? '마감' : recruitment.status === 'OPEN' ? '진행' : '예정'}
- </RecruimentStatus>
- </RecruimentList>
- ))}
- </ListWrapper>
+ {data?.content && data.content.length > 0 ? (
+ data.content.map((recruitment) => (
+ <RecruimentList key={recruitment.id} data-cy="recruitment-list-item">
+ <DeleteIcon
+ data-cy="delete-button"
+ width={15}
+ height={15}
+ onClick={() => handleDelete(recruitment.id, data.totalElements)}
+ />
+ <RecruimentItem
+ isSelected={currentRecruitment?.id === recruitment.id && isSelected}
+ onClick={() => {
+ fetchRecruitmentData(recruitment.id);
+ }}
+ >
+ <RecruimentTitle data-cy="posted-recruitment-title">
+ {recruitment.title}
+ </RecruimentTitle>
+ </RecruimentItem>
+ <RecruimentStatus
+ isDeadline={recruitment.status === "CLOSE"}
+ isPreparing={recruitment.status === "PREPARING"}
+ >
+ {recruitment.status === "CLOSE"
+ ? "마감"
+ : recruitment.status === "OPEN"
+ ? "진행"
+ : "예정"}
+ </RecruimentStatus>
+ </RecruimentList>
+ ))
+ ) : (
+ <NoDataMessage>😊 채용공고 데이터가 존재하지 않습니다.</NoDataMessage>
+ )}
+</ListWrapper>
+
+
{data && (
<PaginationWrapper>
<Pagination postsPerPage={RecruitmentsPerPage} totalPosts={data.totalElements} paginate={paginate} />
@@ -628,3 +636,10 @@ const ErrorMessage = styled.div`
font-size: 13px;
height: 16px;
`;
+
+const NoDataMessage = styled.div`
+ padding: 20px;
+ font-size: 1rem;
+ color: ${({ theme }) => theme.color.gray};
+`;
+
diff --git a/src/pages/PromotionAdmin/RecruitmentPage/RecruitmentWritePage.tsx b/src/pages/PromotionAdmin/RecruitmentPage/RecruitmentWritePage.tsx
index dfca3eee..a3f0ff9f 100644
--- a/src/pages/PromotionAdmin/RecruitmentPage/RecruitmentWritePage.tsx
+++ b/src/pages/PromotionAdmin/RecruitmentPage/RecruitmentWritePage.tsx
@@ -89,11 +89,9 @@ function RecruitmentWritePage() {
try {
const response = await postRecruitment(formData);
alert('채용공고가 등록되었습니다.');
- console.log(response);
setIsEditing(false);
navigator(`${PA_ROUTES.RECRUITMENT}/manage`, { replace: true });
} catch (error) {
- console.log(error);
alert('채용공고 등록 중 오류가 발생했습니다.');
}
}
diff --git a/src/pages/PromotionAdmin/RequestPage/RequestCheckPage.tsx b/src/pages/PromotionAdmin/RequestPage/RequestCheckPage.tsx
index 0898e442..b03e2998 100644
--- a/src/pages/PromotionAdmin/RequestPage/RequestCheckPage.tsx
+++ b/src/pages/PromotionAdmin/RequestPage/RequestCheckPage.tsx
@@ -13,11 +13,11 @@ import Pagination from '@/components/Pagination/Pagination';
import UserInfo from '@/components/PromotionAdmin/Request/UserInfo';
import EmailListComponent from '@/components/PromotionAdmin/Request/EmailListComponent';
import Button from '@/components/PromotionAdmin/DataEdit/StyleComponents/Button';
+import { MSG } from '@/constants/messages';
const MAX_TEXT_LENGTH = 255;
const RequestDetailPage = () => {
- // pagination 구현에 사용되는 변수
const { data, isLoading } = useQuery<IRequestData>(['request', 'id'], getRequestsData);
const [currentPage, setCurrentPage] = useState<number>(1);
@@ -33,9 +33,8 @@ const RequestDetailPage = () => {
const fetchData = async () => {
try {
const newData = await getRequestsData();
- setData(newData); // 데이터 상태 업데이트
+ setData(newData);
} catch (error) {
- console.error('Error fetching data:', error);
}
};
@@ -43,8 +42,6 @@ const RequestDetailPage = () => {
fetchData();
}, [currentPage, postsPerPage]);
- //
-
const navigator = useNavigate();
const requestDetailMatch = useMatch(`${PA_ROUTES.REQUEST}/:requestId`);
@@ -154,7 +151,7 @@ const RequestDetailPage = () => {
},
]);
- alert('메일 발송이 완료되었습니다.');
+ alert('메일 발송이 ' + MSG.ALERT_MSG.COMPLETE);
setReplyState(state);
setTextValue('');
setEditorState(EditorState.createEmpty());
diff --git a/src/pages/PromotionAdmin/RequestPage/RequestManagePage.tsx b/src/pages/PromotionAdmin/RequestPage/RequestManagePage.tsx
index 8d43b753..1e87a086 100644
--- a/src/pages/PromotionAdmin/RequestPage/RequestManagePage.tsx
+++ b/src/pages/PromotionAdmin/RequestPage/RequestManagePage.tsx
@@ -9,6 +9,7 @@ import WaitingRequestsList from '@/components/PromotionAdmin/Home/RequestSummary
import { ContentBox } from '@/components/PromotionAdmin/Request/Components';
import Pagination from '@/components/Pagination/Pagination';
import { ReactComponent as DeleteIcon } from '@/assets/images/PA/minusIcon.svg';
+import { MSG } from '@/constants/messages';
function RequestList() {
const { data, isLoading, refetch } = useQuery<IRequest[]>('requests', getRequestsData, { refetchOnWindowFocus: false });
@@ -47,11 +48,11 @@ function RequestList() {
const slicedRequests = filteredRequests?.slice(indexOfFirst, indexOfLast) || [];
const handleDeleteRequest = async (id: number) => {
- if (window.confirm('정말로 삭제하시겠습니까?')) {
+ if (window.confirm(MSG.CONFIRM_MSG.DELETE)) {
try {
await deleteRequest(id);
- alert('삭제되었습니다.');
- refetch(); // 삭제 후 데이터 새로 불러오기
+ alert(MSG.ALERT_MSG.DELETE);
+ refetch();
} catch (error) {
alert('삭제에 실패했습니다. 다시 시도해주세요.');
}
diff --git a/src/pages/PromotionPage/AboutPage/AboutPage.tsx b/src/pages/PromotionPage/AboutPage/AboutPage.tsx
index 3009857f..df7fd338 100644
--- a/src/pages/PromotionPage/AboutPage/AboutPage.tsx
+++ b/src/pages/PromotionPage/AboutPage/AboutPage.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import IntroPage from './IntroPage';
import WhatWeDoPage from './WhatWeDoPage';
@@ -6,6 +6,7 @@ import { theme } from '@/styles/theme';
import { useMediaQuery } from 'react-responsive';
import { useLoaderData } from 'react-router-dom';
import { AboutPageLoaderData } from '@/types/PromotionPage/about';
+import ErrorComponent from '@/components/Error/ErrorComponent';
interface IContainerStyleProps {
backgroundColor?: string;
@@ -14,15 +15,27 @@ interface IContainerStyleProps {
const AboutPage = () => {
const isMobile = useMediaQuery({ query: `(max-width: ${theme.mediaSize.mobile}px)` });
- const { ceoData, partnersData, companyIntroData, sloganImageUrl, companyDetailData } =
+ const { ceoData, partnersData, companyIntroData, sloganImageUrl, companyDetailData, errors } =
useLoaderData() as AboutPageLoaderData;
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ useEffect(() => {
+ if (errors.length>0) {
+ setIsModalOpen(true);
+ }
+ }, [errors]);
+ const closeModal = () => {
+ setIsModalOpen(false);
+ window.location.reload();
+ };
+
const mainPartnersData = partnersData.filter((info) => {
return info.partnerInfo.is_main;
});
return (
<ScrollContainer>
+ {isModalOpen &&<ErrorComponent error={errors[0]} onClose={closeModal}/>}
<IntroPage companyIntroData={companyIntroData} sloganImageUrl={sloganImageUrl} />
<WhatWeDoPage companyDetailData={companyDetailData} />
<Section data-cy='about-section'>
diff --git a/src/pages/PromotionPage/AboutPage/IntroPage.tsx b/src/pages/PromotionPage/AboutPage/IntroPage.tsx
index a1b01538..704a0c78 100644
--- a/src/pages/PromotionPage/AboutPage/IntroPage.tsx
+++ b/src/pages/PromotionPage/AboutPage/IntroPage.tsx
@@ -38,11 +38,19 @@ const IntroPage = ({ companyIntroData, sloganImageUrl }: IntroPageProps) => {
const missionInView = useInView(missionRef);
const removeParagraphTags = (htmlString: string) => {
- return htmlString
- .replace(/<\/?p\s*\/?>/gi, '') // <p> 태그를 제거
- .replace(/<\/?br\s*\/?>/gi, ' '); // <br> 태그를 공백으로 대체
+ if (!htmlString || htmlString.trim() === '') {
+ return INTRO_DATA.COMPANY_INTRO;
+ }
+
+ const cleanedString = htmlString
+ .replace(/<\/?p\s*\/?>/gi, '')
+ .replace(/<\/?br\s*\/?>/gi, ' ')
+ .trim();
+
+ return cleanedString === '' ? INTRO_DATA.COMPANY_INTRO : cleanedString;
};
+
return (
<Container data-cy='intro-container'>
<InitContainer data-cy='init-container'>
@@ -86,11 +94,9 @@ const IntroPage = ({ companyIntroData, sloganImageUrl }: IntroPageProps) => {
>
<BackgroundText data-cy='about-title'>ABOUT</BackgroundText>
<AboutText
- data-cy='about-content'
+ data-cy="about-content"
dangerouslySetInnerHTML={{
- __html: isMobile
- ? removeParagraphTags(companyIntroData || INTRO_DATA.COMPANY_INTRO)
- : companyIntroData || INTRO_DATA.COMPANY_INTRO,
+ __html: removeParagraphTags(companyIntroData || INTRO_DATA.COMPANY_INTRO),
}}
/>
</motion.div>
@@ -163,7 +169,7 @@ const InitTitleWrapper = styled.div`
gap: 0.5rem;
}
`;
-const InitTitle = styled(motion.div)<IFontStyleProps>`
+const InitTitle = styled(motion.div) <IFontStyleProps>`
font-family: ${theme.font.bold};
font-size: clamp(2.75rem, 8vw, 7.5rem);
color: ${(props) => props.color || theme.color.white.light};
diff --git a/src/pages/PromotionPage/ArtworkPage/ArtworkPage.tsx b/src/pages/PromotionPage/ArtworkPage/ArtworkPage.tsx
index 73a15c7d..773b3c16 100644
--- a/src/pages/PromotionPage/ArtworkPage/ArtworkPage.tsx
+++ b/src/pages/PromotionPage/ArtworkPage/ArtworkPage.tsx
@@ -8,6 +8,7 @@ import { artwork_categories } from '@/components/PromotionPage/Artwork/Navigatio
import { theme } from '@/styles/theme';
import React from 'react';
import { AxiosError } from 'axios';
+import ErrorComponent from '@/components/Error/ErrorComponent';
const NullException=React.lazy(()=>import('@/components/PromotionPage/Artwork/NullException'))
const SkeletonComponent=React.lazy(()=>import('@/components/PromotionPage/SkeletonComponent/SkeletonComponent'))
const ArtworkCard=React.lazy(()=>import('@/components/PromotionPage/Artwork/ArtworkCard'))
@@ -25,23 +26,30 @@ function ArtworkPage() {
const { data, isLoading, error } = useQuery<IArtworksData, AxiosError>(['artwork', 'id'], getArtworkData);
const category = artwork_categories.find((category) => category.key + '' === categoryId);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ useEffect(() => {
+ if (error) {
+ setIsModalOpen(true);
+ }
+ }, [error]);
+ const closeModal = () => {
+ setIsModalOpen(false);
+ window.location.reload();
+ };
+
//useMemo를 사용해 별도로 메모리화, 리렌더링 방지 => 동일한 데이터 연산을 반복하지 않을 수 있음
- // const postedData = data?.data?.filter((artwork) => artwork.isPosted === true) ?? [];
- // const filteredData = category
- // ? postedData.filter((artwork) => artwork.category.toLowerCase() === category.label.toLocaleLowerCase())
- // : postedData;
- const postedData = useMemo(() =>
- data?.data?.filter((artwork) => artwork.isPosted) ?? [],
- [data]
- );
- const filteredData = useMemo(() =>
- category
- ? postedData.filter((artwork) =>
- artwork.category.toLowerCase() === category.label.toLowerCase()
- )
- : postedData,
- [category, postedData]
- );
+ const postedData = useMemo(() =>
+ data?.data?.filter((artwork) => artwork.isPosted) ?? [],
+ [data]
+ );
+ const filteredData = useMemo(() =>
+ category
+ ? postedData.filter((artwork) =>
+ artwork.category.toLowerCase() === category.label.toLowerCase()
+ )
+ : postedData,
+ [category, postedData]
+ );
function ScrollToTop() {
useEffect(() => {
@@ -50,19 +58,7 @@ function ArtworkPage() {
return null;
}
- const errorData=error?.response?.data as ErrorResponse|undefined
- const errorMessage=()=> {
- if(errorData){
- return errorData.status?errorData.status+": "+errorData.error:"네트워크 에러가 발생했어요! 네트워크 환경을 확인해주세요."
- } else{
- // if(!error && data===undefined){
- // return "Network Error"
- // }else{
- return null
- // }
- }}
-
- if(isLoading) return <>Loading...</>
+ if(isLoading) return <div style={{minHeight: '52.6vh'}}>Loading...</div>
return (
<>
@@ -72,7 +68,10 @@ function ArtworkPage() {
<ArtworkWrapper data-cy='PP_artwork_list'>
{postedData?.length === 0 || data === null ? (
<Suspense fallback={<div>Loading...</div>}>
- <NullException isError={errorMessage()}/>
+ <div>
+ {isModalOpen &&<ErrorComponent error={error} onClose={closeModal}/>}
+ <NullException/>
+ </div>
</Suspense>
) : (
<>
@@ -102,7 +101,10 @@ function ArtworkPage() {
) : (
<ArtworkWrapper>
{filteredData?.length === 0 || data === null ? (
- <NullException isError={errorMessage()}/>
+ <div>
+ {isModalOpen &&<ErrorComponent error={error} onClose={closeModal}/>}
+ <NullException/>
+ </div>
) : (
<>
<ScrollToTop />
diff --git a/src/pages/PromotionPage/ContactPage/ContactUsPage.tsx b/src/pages/PromotionPage/ContactPage/ContactUsPage.tsx
index b0b9b82f..319c9497 100644
--- a/src/pages/PromotionPage/ContactPage/ContactUsPage.tsx
+++ b/src/pages/PromotionPage/ContactPage/ContactUsPage.tsx
@@ -1,6 +1,6 @@
import styled from 'styled-components';
import React, { useState, useEffect, useRef, Suspense } from 'react';
-import axios from 'axios';
+import axios, { AxiosError } from 'axios';
import { PROMOTION_BASIC_PATH } from '@/constants/basicPathConstants';
import logo from '../../../assets/logo/Logo.png';
import BackgroundYellowCircle from '@/components/BackgroundYellowCircle/BackgroundYellowCircle';
@@ -9,6 +9,7 @@ import { useNavigate } from 'react-router-dom';
import { getCompanyBasicData } from '../../../apis/PromotionAdmin/dataEdit';
import { emailCheck, phoneFaxCheck } from '@/components/ValidationRegEx/ValidationRegEx';
import { theme } from '@/styles/theme';
+import ErrorComponent from '@/components/Error/ErrorComponent';
import { MSG } from '@/constants/messages';
interface ICircleProps {
@@ -37,6 +38,7 @@ type ICompanyBasic = {
const ContactUsPage = () => {
const navigator = useNavigate();
+ const [error, setError] = useState<AxiosError | null>(null);
const [requestStep, setRequestStep] = useState(0);
const [formData, setFormData] = useState<IFormData>({
category: '',
@@ -71,11 +73,23 @@ const ContactUsPage = () => {
}
} catch (error) {
console.error('Error fetching company data: ', error);
+ setError(error as AxiosError);
}
};
fetchData();
}, []);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ useEffect(() => {
+ if (error !== null) {
+ setIsModalOpen(true);
+ }
+ }, [error]);
+ const closeModal = () => {
+ setIsModalOpen(false);
+ window.location.reload();
+ };
+
// wheel event 관리
const containerRef = useRef<HTMLDivElement | null>(null);
const handleWheel = () => (e: WheelEvent) => {
@@ -372,6 +386,7 @@ const ContactUsPage = () => {
return (
<Container ref={containerRef} data-cy='contact-page'>
+ {isModalOpen && <ErrorComponent error={error} onClose={closeModal} />}
<IntroSection data-cy='intro-section'>
<IntroWrapper>
<IntroTitleWrapper>
diff --git a/src/pages/PromotionPage/FaqPage/FaqPage.tsx b/src/pages/PromotionPage/FaqPage/FaqPage.tsx
index 968ca44c..4ee23d9f 100644
--- a/src/pages/PromotionPage/FaqPage/FaqPage.tsx
+++ b/src/pages/PromotionPage/FaqPage/FaqPage.tsx
@@ -4,6 +4,8 @@ import { motion } from 'framer-motion';
import BackgroundYellowCircle from '@/components/PromotionPage/BackgroundYellowCircle/BackgroundYellowCircle';
import { theme } from '@/styles/theme';
import { getFaqData } from '@/apis/PromotionPage/faq';
+import { AxiosError } from 'axios';
+import ErrorComponent from '@/components/Error/ErrorComponent';
interface FaqData {
id: number;
@@ -23,6 +25,7 @@ const FaqPage = () => {
const [searchData, setSearchData] = useState<FaqData[]>([]); // 검색된 FAQ 데이터
const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set()); // 펼쳐진 FAQ 항목
const [errorMessage, setErrorMessage] = useState(''); // 에러 메시지 상태 추가
+ const [error, setError] = useState<AxiosError|null>(null);
useEffect(() => {
const fetchData = async () => {
@@ -36,6 +39,7 @@ const FaqPage = () => {
}
} catch (error) {
console.error(error);
+ setError(error as AxiosError)
setErrorMessage('전송이 실패했습니다.'); // 실패 시 에러 메시지 설정
setSearchResult('none'); // 검색 결과가 없을 때 상태 설정
}
@@ -43,6 +47,17 @@ const FaqPage = () => {
fetchData();
}, []);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ useEffect(() => {
+ if (error!==null) {
+ setIsModalOpen(true);
+ }
+ }, [error]);
+ const closeModal = () => {
+ setIsModalOpen(false);
+ window.location.reload();
+ };
+
const initiate = (data: FaqData[]) => {
if (data.length === 0) {
setSearchData([]);
@@ -86,6 +101,7 @@ const FaqPage = () => {
return (
<BackgroundYellowCircle>
<Container>
+ {isModalOpen &&<ErrorComponent error={error} onClose={closeModal}/>}
<Header>
<Title>
<LineWrapper>
@@ -114,7 +130,7 @@ const FaqPage = () => {
{searchResult === 'fail' ? (
<NoResults data-cy="no-results-message">검색 결과가 없습니다.</NoResults>
) : searchResult === 'none' ? (
- <NoResults data-cy="no-results-message">FAQ 데이터가 없습니다.</NoResults>
+ <NoResults data-cy="no-results-message">데이터가 없습니다.</NoResults>
) : (
searchData.map((item, i) => (
<FaqDetailButton
@@ -282,31 +298,20 @@ const Content = styled.div`
}
`;
-// const EmptyState = styled.div`
-// display: flex;
-// justify-content: center;
-// align-items: center;
-// min-height: 100vh;
-// font-family: 'pretendard-bold';
-// font-size: 2rem;
-// color: gray;
-// text-align: center;
-// padding: 0.75rem;
-// word-break: keep-all;
-// `;
-
const NoResults = styled.p`
color: gray;
font-family: 'pretendard-bold';
font-size: 2rem;
text-align: center;
- @media (max-width: 1366px) and (min-width: 768px) {
- font-size: 1.1rem;
+ @media ${theme.media.large_tablet} {
+ font-size: 1.4rem;
}
-
- @media (max-width: 540px) and (min-width: 375px) {
- font-size: 1rem;
+ @media ${theme.media.tablet} {
+ font-size: 1.2rem;
+ }
+ @media ${theme.media.mobile} {
+ font-size: 1.1rem;
}
`;
diff --git a/src/pages/PromotionPage/Main/MainPage.tsx b/src/pages/PromotionPage/Main/MainPage.tsx
index 1e995f45..d5e106b3 100644
--- a/src/pages/PromotionPage/Main/MainPage.tsx
+++ b/src/pages/PromotionPage/Main/MainPage.tsx
@@ -9,6 +9,8 @@ import defaultMainImg from '@/assets/images/PP/defaultMainImg.jpg';
import styled from 'styled-components';
import { ARTWORKLIST_DATA } from '@/constants/introdutionConstants'
import { theme } from '@/styles/theme';
+import ErrorComponent from '@/components/Error/ErrorComponent';
+import { AxiosError } from 'axios';
const Top = lazy(() => import('@/components/PromotionPage/Main/Top'));
const Intro = lazy(() => import('@/components/PromotionPage/Main/Intro'));
@@ -20,7 +22,7 @@ const ArtworkSlider = lazy(() => import('@/components/PromotionPage/Main/Artwork
const MainPage = () => {
const [elementHeight, setElementHeight] = useState(window.innerHeight);
const [activeIndex, setActiveIndex] = useState(0);
- const { data, isLoading, error } = useQuery<MIArtworksData, Error>(['artwork', 'id'], getArtworkMainData, {
+ const { data, isLoading, error } = useQuery<MIArtworksData, AxiosError>(['artwork', 'id'], getArtworkMainData, {
staleTime: 1000 * 60 * 10, // 10분
});
@@ -58,9 +60,20 @@ const MainPage = () => {
}
}, [height]);
- if (error) return <>Artwork Error: {error.message}</>;
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ useEffect(() => {
+ if (error) {
+ setIsModalOpen(true);
+ }
+ }, [error]);
+ const closeModal = () => {
+ setIsModalOpen(false);
+ window.location.reload();
+ };
+
return (
<>
+ {isModalOpen &&<ErrorComponent error={error} onClose={closeModal}/>}
<style>{`
body, html {
overflow: hidden;
@@ -116,7 +129,7 @@ const MainPage = () => {
>
{isLoading ? (
<div>데이터 로딩 중...</div>
- ) : height <= 780 ? (
+ ) : height <= 915 ? (
<ArtworkSlider
artworks={filteredMainData.map((item) => ({
id: item.id,
diff --git a/src/pages/PromotionPage/NewsPage/NewsBoardPage.tsx b/src/pages/PromotionPage/NewsPage/NewsBoardPage.tsx
index ffd2f3f1..dfac6339 100644
--- a/src/pages/PromotionPage/NewsPage/NewsBoardPage.tsx
+++ b/src/pages/PromotionPage/NewsPage/NewsBoardPage.tsx
@@ -1,10 +1,12 @@
import { getAllNewsData } from "@/apis/PromotionPage/news";
-import { useState } from "react";
+import { useEffect, useState } from "react";
import styled from "styled-components";
import IntroSection from "./IntroSection";
import NewsSection from "./NewsSection";
import NewsPagination from "@/components/Pagination/NewsPagination";
import { theme } from "@/styles/theme";
+import { AxiosError } from "axios";
+import ErrorComponent from "@/components/Error/ErrorComponent";
import { useQuery } from "react-query";
interface INewsCardProps {
@@ -16,16 +18,15 @@ interface INewsCardProps {
}
const NewsBoardPage: React.FC = () => {
-
const [currentPage, setCurrentPage] = useState<number>(1);
const [postsPerPage] = useState<number>(6);
- const { data: newsData, isLoading, error } = useQuery<INewsCardProps[], Error>(
+ const { data: newsData, isLoading, error } = useQuery<INewsCardProps[], AxiosError>(
'newsData',
async () => {
const response = await getAllNewsData();
if (!response || !response.data) {
- throw new Error('데이터가 없습니다.');
+ throw error;
}
return response.data.map((news: any) => ({
id: news.id,
@@ -37,6 +38,17 @@ const NewsBoardPage: React.FC = () => {
}
);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ useEffect(() => {
+ if (error!==null) {
+ setIsModalOpen(true);
+ }
+ }, [error]);
+ const closeModal = () => {
+ setIsModalOpen(false);
+ window.location.reload();
+ };
+
const indexOfLastPost = currentPage * postsPerPage;
const indexOfFirstPost = indexOfLastPost - postsPerPage;
const currentNewsData = newsData?.slice(indexOfFirstPost, indexOfLastPost) || [];
@@ -52,8 +64,10 @@ const NewsBoardPage: React.FC = () => {
<><LoadingModal>
<LoadingIcon />
</LoadingModal><EmptyState>로딩 중...</EmptyState></>
- ) : error ? (
- <EmptyState>{error.message}</EmptyState>
+ ):error ? (
+ isModalOpen &&<ErrorComponent error={error} onClose={closeModal}/>
+ ) : !newsData? (
+ <EmptyState>데이터가 없습니다.</EmptyState>
) : (
<>
<NewsSection
diff --git a/src/pages/PromotionPage/RecruitmentPage/RecruitmentPage.tsx b/src/pages/PromotionPage/RecruitmentPage/RecruitmentPage.tsx
index f003643d..4227da43 100644
--- a/src/pages/PromotionPage/RecruitmentPage/RecruitmentPage.tsx
+++ b/src/pages/PromotionPage/RecruitmentPage/RecruitmentPage.tsx
@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { useQuery } from 'react-query';
import { IRecruitmentList, IBenefit } from '@/types/PromotionAdmin/recruitment';
import { getAllRecruitmentData, getRecruitmentData, getBenefitData } from '../../../apis/PromotionAdmin/recruitment';
import groupImage from '@/assets/images/PP/group.png';
import { theme } from '@/styles/theme';
+import { AxiosError } from 'axios';
+import ErrorComponent from '@/components/Error/ErrorComponent';
const RecruitmentPage = () => {
const currentPage = 1;
@@ -14,7 +16,7 @@ const RecruitmentPage = () => {
data: recruitmentData,
isLoading: isRecruitmentLoading,
error: recruitmentError,
- } = useQuery<IRecruitmentList, Error>(
+ } = useQuery<IRecruitmentList, AxiosError>(
['recruitmentList'],
() => getAllRecruitmentData(currentPage, RecruitmentsPerPage),
{ keepPreviousData: true },
@@ -24,7 +26,7 @@ const RecruitmentPage = () => {
data: benefitData,
isLoading: isBenefitLoading,
error: benefitError,
- } = useQuery<IBenefit[], Error>(['benefit'], getBenefitData, { keepPreviousData: false, staleTime: 0 });
+ } = useQuery<IBenefit[], AxiosError>(['benefit'], getBenefitData, { keepPreviousData: false, staleTime: 0 });
const handleClickPost = async (id: number, status: string) => {
if (status === 'OPEN') {
@@ -42,16 +44,27 @@ const RecruitmentPage = () => {
);
};
- if (isRecruitmentLoading || isBenefitLoading) {
- return <div>Loading...</div>;
- }
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ useEffect(() => {
+ if (recruitmentError !== null || benefitError !== null) {
+ setIsModalOpen(true);
+ }
+ }, [recruitmentError, benefitError]);
+ const closeModal = () => {
+ setIsModalOpen(false);
+ window.location.reload();
+ };
- if (recruitmentError || benefitError) {
- return <div>Error occurred!</div>;
- }
+ // if (isRecruitmentLoading || isBenefitLoading) {
+ // return <div style={{height:'100%'}}>Loading...</div>;
+ // }
+ // if (recruitmentError || benefitError) {
+ // return <div>Error occurred!</div>;
+ // }
return (
<Container>
+ {isModalOpen && <ErrorComponent error={recruitmentError || benefitError} onClose={closeModal} />}
{/* 첫 번째 섹션: 채용 페이지 인트로 */}
<IntroSection data-cy='intro-section'>
<IntroTitleWrapper>
@@ -516,17 +529,29 @@ const BenefitContent = styled.p`
const NoRecruitmentMessage = styled.div`
font-family: ${(props) => props.theme.font.medium};
color: ${(props) => props.theme.color.black.light};
- font-size: clamp(1.5rem, 2vw, 2rem);
+ font-size: clamp(1.5rem, 3vw, 2.2rem);
text-align: center;
margin: 3rem 0;
line-height: 1.8;
padding: 1.5rem 2rem;
- @media ${(props) => props.theme.media.mobile} {
- font-size: clamp(1.2rem, 1.8vw, 1.6rem);
+ @media ${(props) => props.theme.media.large_tablet} {
+ font-size: clamp(1.1rem, 2.5vw, 1.5rem);
+ margin: 2.5rem 0;
+ padding: 1.2rem 1.8rem;
+ }
+
+ @media ${(props) => props.theme.media.tablet} {
+ font-size: clamp(1rem, 2vw, 1.4rem);
margin: 2rem 0;
padding: 1rem 1.5rem;
}
+
+ @media ${(props) => props.theme.media.mobile} {
+ font-size: clamp(0.9rem, 2vw, 1.3rem);
+ margin: 1.5rem 0;
+ padding: 0.8rem 1.2rem;
+ }
`;
export default RecruitmentPage;
diff --git a/src/types/PromotionAdmin/artwork.ts b/src/types/PromotionAdmin/artwork.ts
index 13a92f0e..a462c5bc 100644
--- a/src/types/PromotionAdmin/artwork.ts
+++ b/src/types/PromotionAdmin/artwork.ts
@@ -24,11 +24,13 @@ export type ArtworkData = {
export type PostArtworkData = {
request: PostArtworkDataRequestType;
- file: string;
- files: string[];
+ file: string | File;
+ responsiveFile: string | File;
+ files: (string | File)[]; // UpdateArtwork와 동일한 타입
};
export type PostArtworkDataRequestType = {
+ projectId?: number; // 선택적 속성으로 추가
department: string;
category: string;
name: string;
@@ -38,13 +40,14 @@ export type PostArtworkDataRequestType = {
overView: string;
projectType: projectType;
isPosted: boolean;
+ deletedImageId?: number[]; // 선택적 속성으로 추가
};
export type projectType = 'top' | 'main' | 'others';
export type UpdateArtwork = {
request: {
- projectId: number;
+ projectId?: number; // 선택적 속성
department: string;
category: string;
name: string;
@@ -52,11 +55,13 @@ export type UpdateArtwork = {
date: string;
link: string;
overView: string;
- deletedImageId: number[];
+ projectType: projectType;
+ isPosted: boolean;
+ deletedImageId: number[]; // 필수 속성 유지
};
- file: string;
- responsiveFile: string;
- files: string[];
+ file: string | File;
+ responsiveFile: string | File;
+ files: (string | File)[]; // 일관된 타입
};
type filesType = {
diff --git a/src/types/PromotionPage/about.ts b/src/types/PromotionPage/about.ts
index f4254d33..bce2bbcd 100644
--- a/src/types/PromotionPage/about.ts
+++ b/src/types/PromotionPage/about.ts
@@ -1,3 +1,5 @@
+import { AxiosError } from "axios";
+
export interface IPartnerInfo {
id: number;
is_main: boolean;
@@ -27,4 +29,5 @@ export interface AboutPageLoaderData {
companyIntroData: string; // 회사 소개 데이터
sloganImageUrl: string; // 슬로건 이미지 URL
companyDetailData: { key: string; value: string }[]; // 회사 세부 데이터
+ errors: AxiosError[];
}
diff --git a/src/utils/urlToFile.ts b/src/utils/urlToFile.ts
new file mode 100644
index 00000000..b0a88fb9
--- /dev/null
+++ b/src/utils/urlToFile.ts
@@ -0,0 +1,74 @@
+export function extractFileNameFromUrl(url: string): string {
+ try {
+ if (!url || url.includes('undefined')) {
+ console.error('Invalid URL detected:', url);
+ const uniqueSuffix = Math.random().toString(36).slice(-6);
+ return `default_${uniqueSuffix}.jpg`;
+ }
+
+ const urlObject = new URL(url);
+ const fileName = decodeURIComponent(urlObject.pathname.split('/').pop() || '');
+ const validFileName = fileName.match(/^[\w,\s-]+\.[A-Za-z]{3,4}$/) ? fileName : null;
+
+ if (!validFileName) {
+ const uniqueSuffix = Math.random().toString(36).slice(-6);
+ return `default_${uniqueSuffix}.jpg`;
+ }
+
+ return validFileName;
+ } catch (error) {
+ console.error('[Error extracting file name from URL]', error);
+ const uniqueSuffix = Math.random().toString(36).slice(-6);
+ return `default_${uniqueSuffix}.jpg`;
+ }
+}
+
+// URL 유효성 검사
+export const isValidUrl = (url: string): boolean => {
+ try {
+ new URL(url);
+ return true; // URL 유효
+ } catch {
+ return false; // URL 비유효
+ }
+};
+
+export async function urlToFile(url: string | null, fileName?: string): Promise<File> {
+ try {
+ if (!url || !isValidUrl(url)) {
+ console.error('[Invalid URL detected]', url);
+ const uniqueSuffix = Math.random().toString(36).slice(-6);
+ return new File([], fileName || `default_${uniqueSuffix}.png`, { type: 'image/png' });
+ }
+
+ // 캐시 무효화를 위해 URL에 타임스탬프 추가
+ const cacheBusterUrl = `${url}?t=${Date.now()}`;
+
+ const response = await fetch(cacheBusterUrl, {
+ method: 'GET',
+ mode: 'cors', // CORS 모드 활성화
+ headers: {
+ 'Content-Type': 'application/octet-stream', // 적절한 헤더 추가
+ },
+ });
+
+ if (!response.ok) {
+ console.error(`[Fetch failed] Status: ${response.status}, URL: ${cacheBusterUrl}`);
+ throw new Error(`[Failed to fetch resource] ${response.status} ${response.statusText}`);
+ }
+
+ const blob = await response.blob();
+ const finalFileName = fileName ? extractFileNameFromUrl(fileName) : extractFileNameFromUrl(url);
+
+ // 확장자 중복 방지
+ const sanitizedFileName = finalFileName.replace(/(\.[a-zA-Z0-9]+)+$/, (match) =>
+ match.split('.').slice(0, 2).join('.'),
+ );
+
+ return new File([blob], sanitizedFileName, { type: blob.type });
+ } catch (error) {
+ console.error('[Error converting URL to file]', { url, fileName, error });
+ const uniqueSuffix = Math.random().toString(36).slice(-6);
+ return new File([], fileName || `default_${uniqueSuffix}.png`, { type: 'image/png' });
+ }
+}
- {tooltip.point.data.xFormatted}
-
-
- {division === 'request' ? '문의 수' : '조회 수'} {Math.round(Number(tooltip.point.data.y))}
+ layers={['grid', 'markers', 'axes', 'areas', 'lines', 'points', 'slices', 'mesh', 'legends']} // 필수 추가
+ sliceTooltip={({ slice }) => (
+
);
diff --git a/src/components/PromotionAdmin/Home/RequestSummary/RequestSummary.tsx b/src/components/PromotionAdmin/Home/RequestSummary/RequestSummary.tsx
index 4bf519c8..3dc38dff 100644
--- a/src/components/PromotionAdmin/Home/RequestSummary/RequestSummary.tsx
+++ b/src/components/PromotionAdmin/Home/RequestSummary/RequestSummary.tsx
@@ -22,7 +22,7 @@ const WatingRequests = () => {
const handleSort = () => {
setSortByRecent((prev) => !prev);
};
- console.log(data);
+
return (
+ {slice.points.map((point) => (
+
+ )}
+ tooltip={(tooltip) => (
+
+ {point.data.xFormatted}: {point.data.yFormatted}
+ ))}
+
+
+ )}
/>
+ {tooltip.point.data.xFormatted}
- );
- }}
+
+ {division === 'request' ? '문의 수' : '조회 수'} {Math.round(Number(tooltip.point.data.y))}
+
+