hotfix: aboutloader 및 whatwedo page data null 처리 수정

STUDIO-EYE · Dec 9, 2024 · 7385a06 · 7385a06
1 parent 447e1bf
commit 7385a06
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 26 deletions.
diff --git a/src/loaders/aboutPageLoader.ts b/src/loaders/aboutPageLoader.ts
@@ -28,18 +28,30 @@ export const aboutPageLoader = async () => {
   const errors: AxiosError[] = [];
   try {
     const [ceoData, partnersData, companyData, companyDetailData] = await Promise.all([
-      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 }; }), // 회사 세부 데이터 실패 시 빈 배열 반환
+      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.data.introduction || '',
-      sloganImageUrl: companyData.data.sloganImageUrl || '',
+      companyIntroData: companyData.introduction || '',
+      sloganImageUrl: companyData.sloganImageUrl || '',
       companyDetailData: companyDetailData || [],
       errors: errors,
     };

diff --git a/src/pages/PromotionPage/AboutPage/AboutPage.tsx b/src/pages/PromotionPage/AboutPage/AboutPage.tsx
@@ -18,24 +18,24 @@ const AboutPage = () => {
   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 [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}/>}
+      {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
@@ -50,7 +50,6 @@ const IntroPage = ({ companyIntroData, sloganImageUrl }: IntroPageProps) => {
     return cleanedString === '' ? INTRO_DATA.COMPANY_INTRO : cleanedString;
   };
 
-
   return (
     <Container data-cy='intro-container'>
       <InitContainer data-cy='init-container'>
@@ -94,7 +93,7 @@ const IntroPage = ({ companyIntroData, sloganImageUrl }: IntroPageProps) => {
           >
             <BackgroundText data-cy='about-title'>ABOUT</BackgroundText>
             <AboutText
-              data-cy="about-content"
+              data-cy='about-content'
               dangerouslySetInnerHTML={{
                 __html: removeParagraphTags(companyIntroData || INTRO_DATA.COMPANY_INTRO),
               }}
@@ -169,7 +168,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/AboutPage/WhatWeDoPage.tsx b/src/pages/PromotionPage/AboutPage/WhatWeDoPage.tsx
@@ -33,12 +33,11 @@ const WhatWeDoPage = ({ companyDetailData }: WhatWeDoPageProps) => {
         closestSection = index;
       }
     });
-
     setHighlighted(closestSection);
   });
 
-  if (companyDetailData.length === 0) {
-    return null; // 데이터 로딩 중이면 아무것도 렌더링하지 않음
+  if (!Array.isArray(companyDetailData) || companyDetailData.length === 0) {
+    return null;
   }
 
   return (

diff --git a/src/types/PromotionPage/about.ts b/src/types/PromotionPage/about.ts
@@ -1,4 +1,4 @@
-import { AxiosError } from "axios";
+import { AxiosError } from 'axios';
 
 export interface IPartnerInfo {
   id: number;
@@ -20,14 +20,14 @@ export interface ICEOInfoData {
 }
 
 export interface WhatWeDoPageProps {
-  companyDetailData: { key: string; value: string }[]; // 데이터 타입 정의
+  companyDetailData: { id: number; key: string; value: string }[]; // 데이터 타입 정의
 }
 
 export interface AboutPageLoaderData {
   ceoData: ICEOInfoData; // CEO 데이터
   partnersData: ICorpInfoData[]; // 파트너 데이터
   companyIntroData: string; // 회사 소개 데이터
   sloganImageUrl: string; // 슬로건 이미지 URL
-  companyDetailData: { key: string; value: string }[]; // 회사 세부 데이터
+  companyDetailData: { id: number; key: string; value: string }[]; // 회사 세부 데이터
   errors: AxiosError[];
 }