Merge branch 'main' into feat/161-Artwork-e2e

cypress/e2e/Integration/MainPage.cy.ts

@@ -79,7 +79,7 @@ describe('Mainpage - Top 섹션을 확인한다.', () => {
     cy.visit('/promotion-admin/artwork');
     cy.contains('Loading...').should('be.visible');
     cy.wait(5000);
-    cy.contains('Error').should('be.visible');
+    cy.contains('500').should('be.visible');
   });
 
   it('프로모션 페이지의 메인의 Top 섹션에서 Top 아트워크가 있는 것을 확인한다.', () => {
@@ -135,20 +135,21 @@ describe('Mainpage - Top 섹션을 확인한다.', () => {
     });
     cy.visit('/');
     cy.wait(5000);
-    cy.contains('Artwork Error:').should('be.visible');
+    cy.contains('문제').should('be.visible');
   });
 });
 
 describe('MainPage - Intro 섹션을 확인한다.', () => {
   beforeEach(() => {
+    cy.viewport(1920, 1080);
     login();
   });
 
   it('관리 페이지에서 mainOverview, commitment가 있는 것을 확인한다.', () => {
     cy.visit('/promotion-admin/dataEdit');
     cy.get('[data-cy="nav-btn-company"]').click();
     cy.wait(3000);
-    cy.intercept('GET', '**/api/company/information', {
+    cy.intercept('GET', '**/company/information', {
       statusCode: 200,
       body: [
         {
@@ -161,29 +162,24 @@ describe('MainPage - Intro 섹션을 확인한다.', () => {
             commitment: '<p>최고의 경험을 선사하는 스튜디오 아이의 작업과 함께하세요.</p>',
             address: '서울시 성동구 광나루로 162 BS성수타워 5층',
             addressEnglish: '5F 162, Gwangnaru-ro, Seongdong-gu, Seoul, Republic of Korea',
-            lightLogoImageFileName: 'LightLogo.png',
+            lightLogoImageFileName: '',
             lightLogoImageUrl: '',
-            darkLogoImageFileName: 'DarkLogo.png',
+            darkLogoImageFileName: '',
             darkLogoImageUrl: '',
             phone: '02-2038-2663',
             fax: '02-2038-2663',
             introduction:
               '<p>2010년에 설립된 <span style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);">스튜디오 아이는 다양한 장르를 소화할 수 있는 PD들이 모여</span></p><p><span style="background-color: rgb(0, 0, 0); color: rgb(255, 169, 0);">클라이언트 맞춤형 콘텐츠 제작</span><span style="background-color: rgb(0, 0, 0); color: rgb(251, 251, 251);">과</span><span style="background-color: rgb(0, 0, 0); color: rgb(255, 169, 0);">&nbsp;운영 대책 서비스</span><span style="background-color: rgb(0, 0, 0); color: rgb(251, 251, 251);">를 제공하고 있으며,</span></p><p><span style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);"><span class="ql-cursor"></span>드라마 애니메이션 등을 전문으로 하는 여러 계열사들과도 협력하고 있습니다.</span></p>',
-            sloganImageFileName: 'Slogan.png',
+            sloganImageFileName: '',
             sloganImageUrl: '',
             detailInformation: [],
           },
         },
       ],
     });
-
-    cy.scrollTo(1000, 0);
-    const child = ['MainOverview', 'commitment'];
-    cy.get('[data-cy="introduction_list"]').within(() => {
-      child.forEach((child) => {
-        cy.scrollTo('right', { duration: 1000 }); // 수평으로 스크롤
-        cy.get(`[data-cy="intro_${child}"]`).should('exist');
-      });
+    const child = ['mainOverview', 'commitment'];
+    child.forEach((child) => {
+      cy.get(`[data-cy="intro_${child}"]`).should('exist');
     });
   });
 
@@ -246,7 +242,7 @@ describe('MainPage - Intro 섹션을 확인한다.', () => {
     });
     cy.visit('/');
     cy.wait(5000);
-    cy.contains('Intro Error:').should('be.visible');
+    cy.contains('500').should('be.visible');
   });
 });
 
@@ -327,7 +323,7 @@ describe('MainPage - ArtworkList 섹션을 확인한다.', () => {
     cy.visit('/promotion-admin/artwork');
     cy.contains('Loading...').should('be.visible');
     cy.wait(5000);
-    cy.contains('Error').should('be.visible');
+    cy.contains('500').should('be.visible');
   });
 
   it('프로모션 페이지의 메인의 ArtworkList 섹션에서 Main 아트워크가 있는 것을 확인한다.', () => {
@@ -381,7 +377,9 @@ describe('MainPage - ArtworkList 섹션을 확인한다.', () => {
       data: null,
     });
     cy.visit('/');
-    cy.contains('표시할 아트워크가 없습니다.').should('be.visible');
+    cy.get('[data-cy="artwork_client"]').should('exist');
+    cy.get('[data-cy="artwork_name"]').should('exist');
+    cy.get('[data-cy="artwork_overview"]').should('exist');
   });
 
   it('필수 예외) 요청을 했으나 Status Code가 500일 경우.', () => {
@@ -391,7 +389,7 @@ describe('MainPage - ArtworkList 섹션을 확인한다.', () => {
     });
     cy.visit('/');
     cy.wait(5000);
-    cy.contains('Artwork Error:').should('be.visible');
+    cy.contains('문제').should('be.visible');
   });
 });
 
@@ -503,7 +501,7 @@ describe('MainPage - Outro 섹션을 확인한다.', () => {
     cy.visit('/promotion-admin/dataEdit');
     cy.get('[data-cy="nav-btn-client"]').click();
     cy.wait(5000);
-    cy.contains('Error').should('be.visible');
+    cy.contains('500').should('be.visible');
   });
 
   it('프로모션 페이지의 메인의 Outro 섹션에서 클라이언트가 있는 것을 확인한다.', () => {
@@ -552,6 +550,6 @@ describe('MainPage - Outro 섹션을 확인한다.', () => {
     });
     cy.visit('/');
     cy.wait(5000);
-    cy.contains('Outro Error:').should('be.visible');
+    cy.contains('Error').should('be.visible');
   });
 });

cypress/e2e/System/MainPage.cy.ts

@@ -36,7 +36,7 @@ describe('Artwork 데이터 생성, 수정, 삭제 및 확인한다.', () => {
           name: '타입',
           selector: '[data-cy="create_artwork_artworkType"]',
           value: data[3].artworkType,
-          type: 'select',
+          type: 'select-type',
         },
       ];
     });
@@ -52,7 +52,7 @@ describe('Artwork 데이터 생성, 수정, 삭제 및 확인한다.', () => {
         if (field.type === 'dropdown') {
           cy.get(field.selector).click({ force: true });
           cy.get('[data-cy="create_artwork_category_dropdown"]').contains(field.value).click({ force: true });
-        } else if (field.type === 'select') {
+        } else if (field.type === 'select-type') {
           cy.get(field.selector).contains(field.value).click({ force: true });
         } else {
           cy.get(field.selector).type(field.value);
@@ -91,7 +91,7 @@ describe('Artwork 데이터 생성, 수정, 삭제 및 확인한다.', () => {
         if (field.type === 'dropdown') {
           cy.get(field.selector).click({ force: true });
           cy.get('[data-cy="create_artwork_category_dropdown"]').contains(field.value).click({ force: true });
-        } else if (field.type === 'select') {
+        } else if (field.type === 'select-type') {
           cy.get(field.selector).contains(field.value).click({ force: true });
         } else {
           if (field.name === '제목') {

src/apis/PromotionPage/client.ts

@@ -3,7 +3,7 @@ import axios from 'axios';
 
 export const getClientLogoImgList = async () => {
   try {
-    const response = await axios.get(`${PROMOTION_BASIC_PATH}/api/client/logoImgList`);
+    const response = await axios.get(`${PROMOTION_BASIC_PATH}/api/client`);
     return response.data.data;
   } catch (error) {
     console.log('[❌ Error getClientLogoImgList]', error);

src/components/PromotionAdmin/Artwork/ArtworkCreating/ArtworkCreating.tsx

@@ -149,7 +149,6 @@ const ArtworkCreating = () => {
       }
       alert(MSG.ALERT_MSG.SAVE);
       setProducingIsOpened(false);
-      console.log(response.data.id);
       navigate(`${PA_ROUTES.ARTWORK}/${response.data.id}?page=1`);
     } catch (error: any) {
       alert(MSG.CONFIRM_MSG.FAILED);

src/components/PromotionAdmin/DataEdit/Company/InfoCard/Introduction.tsx

@@ -30,7 +30,7 @@ const Introduction = ({ setEditIntroduction }: IIntrodutionProps) => {
           </TitleWrapper>
           <InputWrapper>
             <InputTitle>Main Overview</InputTitle>
-            <Content data-cy='intro_MainOverview'>
+            <Content data-cy='intro_mainOverview'>
               <InnerHTML description={data.mainOverview} />
             </Content>
             <InputTitle>Commitment</InputTitle>

src/components/PromotionAdmin/DataEdit/Partner/Partner.tsx

@@ -79,7 +79,7 @@ const Partner = () => {
                     logo={partner.logoImageUrl}
                     name={partner.name}
                     link={partner.link}
-                    is_posted={partner.is_main}
+                    is_posted={partner.isMain}
                     onClick={() => {
                       if (isEditing && !window.confirm(MSG.CONFIRM_MSG.DATA_EDIT.EXIT)) {
                         return;
@@ -90,7 +90,7 @@ const Partner = () => {
                         `${PA_ROUTES.DATA_EDIT}/${PA_ROUTES_CHILD.DATA_EDIT_PARTNER}/${partner.id}?page=${currentPage}`,
                       );
                     }}
-                    svgComponent={partner.is_main ? <PublicIcon /> : <PrivateIcon />}
+                    svgComponent={partner.isMain ? <PublicIcon /> : <PrivateIcon />}
                   />
                 </React.Fragment>
               ))}

src/components/PromotionAdmin/Home/Graph/Graph.tsx

@@ -113,8 +113,8 @@ const Graph = ({
           <ErrorWrapper>
             ⛔ 날짜 형식이 올바르지 않습니다. 날짜를 다시 선택해 주세요.
             <h1>* 올바르지 않은 경우는 다음과 같습니다. </h1>
-            <h2>1. 기간이 2달 이하인 경우</h2> <h2> 2. 시작일이 끝일보다 뒤에 있을 경우</h2>
-            <h2> 3. 기간이 12달 초과인 경우</h2>
+            <h2> 1. 시작일이 끝일보다 뒤에 있거나 같을 경우</h2>
+            <h2> 2. 기간이 12달 초과인 경우</h2>
           </ErrorWrapper>
         )}
       </BodyWrapper>

src/components/PromotionAdmin/Home/RequestSummary/RequestSummary.tsx

@@ -29,9 +29,9 @@ const WatingRequests = () => {
         <TitleWrapper>
           <div>
             <Icon width={20} height={20} stroke='#595959' />
-            <h1>의뢰 통계 요약</h1>
+            <h1>문의 통계 요약</h1>
           </div>
-          <span>승인 대기 의뢰 총 {data && data.length > 0 ? data.length : 0}건</span>
+          <span>승인 대기 문의 총 {data && data.length > 0 ? data.length : 0}건</span>
         </TitleWrapper>
         <BtnWrapper>
           <SortWrapper onClick={handleSort} rotate={sortByRecent ? false : true}>
@@ -58,7 +58,7 @@ const WatingRequests = () => {
             />
           ))
         ) : (
-          <NoDataWrapper>😊 대기 중인 의뢰가 없습니다.</NoDataWrapper>
+          <NoDataWrapper>😊 대기 중인 문의가 없습니다.</NoDataWrapper>
         )}
       </BodyWrapper>
     </Container>

src/components/PromotionPage/Main/ArtworkSlider.tsx

@@ -1,6 +1,9 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, lazy } from 'react';
 import ArtworkList from './ArtworkList';
 import { IArtwork } from '@/types/PromotionPage/artwork';
+import { ARTWORKLIST_DATA } from '@/constants/introdutionConstants';
+import defaultMainImg from '@/assets/images/PP/defaultMainImg.jpg'; // 디폴트 이미지 임포트
+
 
 interface IArtworkSliderProps {
   artworks: IArtwork[];
@@ -30,8 +33,25 @@ const ArtworkSlider: React.FC<IArtworkSliderProps> = ({ artworks }) => {
   }, [artworks]);
 
   if (!artworks || artworks.length === 0) {
-    return <>표시할 아트워크가 없습니다.</>;
-  } // 수정하기
+    return (
+      <div data-cy="artworkslider-section" style={{ height: '100vh' }}>
+        <ArtworkList
+          key={0}
+          data={{
+            backgroundImg: defaultMainImg,
+            title: ARTWORKLIST_DATA.TITLE,
+            client: ARTWORKLIST_DATA.CLIENT,
+            overview: ARTWORKLIST_DATA.OVERVIEW,
+            link: '',
+          }}
+          count={1}
+          scrollToSection={() => { }}
+          elementHeight={window.innerHeight}
+          index={0}
+        />
+      </div>
+    );
+  }
 
   if (artworks.length === 1) {
     return (
@@ -46,7 +66,7 @@ const ArtworkSlider: React.FC<IArtworkSliderProps> = ({ artworks }) => {
             link: artworks[0].link,
           }}
           count={1}
-          scrollToSection={() => {}}
+          scrollToSection={() => { }}
           elementHeight={window.innerHeight}
           index={0}
         />
@@ -78,13 +98,13 @@ const ArtworkSlider: React.FC<IArtworkSliderProps> = ({ artworks }) => {
           key={activeIndex}
           data={{
             backgroundImg: artworks[activeIndex].mainImg || '',
-            title: artworks[activeIndex].name || '',
+            title: artworks[activeIndex].name || ARTWORKLIST_DATA.TITLE,
             client: artworks[activeIndex].client || '',
             overview: artworks[activeIndex].overView,
             link: artworks[activeIndex].link,
           }}
           count={artworks.length}
-          scrollToSection={() => {}}
+          scrollToSection={() => { }}
           elementHeight={window.innerHeight}
           index={activeIndex}
         />
@@ -111,7 +131,7 @@ const ArtworkSlider: React.FC<IArtworkSliderProps> = ({ artworks }) => {
             link: artworks[(activeIndex + 1) % artworks.length].link,
           }}
           count={artworks.length}
-          scrollToSection={() => {}}
+          scrollToSection={() => { }}
           elementHeight={window.innerHeight}
           index={(activeIndex + 1) % artworks.length}
         />

src/components/PromotionPage/Main/Intro.tsx

@@ -21,13 +21,33 @@ const Intro = () => {
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   useEffect(() => {
+    const isContentEmpty = (htmlString: string) => {
+      const div = document.createElement('div');
+      div.innerHTML = htmlString;
+      return div.textContent?.trim() === '';
+    };
+
     const fetchData = async () => {
       try {
         const data = await getCompanyData();
-        setCompanyMainOverview(data.mainOverview);
-        setCompanyCommitment(data.commitment);
+
+        if (
+          !data ||
+          Object.keys(data).length === 0 ||
+          isContentEmpty(data.mainOverview) ||
+          isContentEmpty(data.commitment)
+        ) {
+          setCompanyMainOverview(INTRO_DATA.MAIN_OVERVIEW);
+          setCompanyCommitment(INTRO_DATA.COMMITMENT);
+        } else {
+          setCompanyMainOverview(data.mainOverview);
+          setCompanyCommitment(data.commitment);
+        }
       } catch (error) {
-        setErrorMessage('Intro Error: ' + (error instanceof Error ? error.message : '에러가 발생했습니다. 관리자에게 문의하세요.'));
+        setErrorMessage(
+          'Intro Error: ' +
+          (error instanceof Error ? error.message : '에러가 발생했습니다. 관리자에게 문의하세요.')
+        );
       }
     };
 

src/components/PromotionPage/Main/Outro.tsx

@@ -5,15 +5,19 @@ import { getClientLogoImgList } from '@/apis/PromotionPage/client';
 import ClientRowAnimation from '../Client/ClientRowAnimation';
 import WorkWithUs from '../WorkWithUs/WorkWithUs';
 import { theme } from '@/styles/theme';
+import { getClientType } from '@/types/PromotionPage/client';
 
 const Outro = () => {
-  const { data, isLoading, error } = useQuery<string[], Error>(['clientLogoImgList'], getClientLogoImgList, {});
+  const { data, isLoading, error } = useQuery<getClientType[], Error>(['clientLogoImgList'], getClientLogoImgList, {});
+
+  // visibility가 true인 데이터만 필터링 후 logoImg만 추출
+  const filteredLogoImgs = data ? data.filter((item) => item.clientInfo.visibility).map((item) => item.logoImg) : [];
 
   if (isLoading) return <>is Loading...</>;
   if (error) return <>Outro Error: {error.message}</>;
   return (
     <Container data-cy='outro-section'>
-      <ClientRowAnimation data={data} isLoading={isLoading} error={error} />
+      <ClientRowAnimation data={filteredLogoImgs} isLoading={isLoading} error={error} />
       <WorkWithUs />
     </Container>
   );