- 
-
- ) : (
-
- 
-
- )}
+
+ 
+
COPYRIGHTⓒSTUDIOEYE,LTD. ALL RIGHTS RESERVED
데이터 없음
' }} + dangerouslySetInnerHTML={{ __html: companyMainOverview || '스튜디오 아이는
' }} >데이터 없음
' }} + dangerouslySetInnerHTML={{ __html: companyCommitment || '채워넣기
' }} >
+ 제목
+
+
+ 완료
+ 취소
+
+
+ 출처/작성자
+
+
+
+ 원문 날짜
+
+
+
+ 공개 여부
+
+ handleChangeVisibility(true)} className='public' selected={visibility}>
+ 공개
+
+ handleChangeVisibility(false)} className='private' selected={!visibility}>
+ 비공개
+
+
+
+
+ 내용
+
+
+
+ {news?.title}
+
+ {more?:null}
+
+ 제목
- +
-
-
+
+
+
-
+
- {
- setEditorHtml(html);
- setIsEditing(true);
- }}
- modules={{
- toolbar: [
- ["bold", "italic", "underline", "strike"],
- ['image', 'video'],
- [{color:[]},{background:[]}],
- [{align:[]}, { list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
- [{ size: ["small", false, "large", "huge"] }],
- ],
- ImageResize: {
- parchment: Quill.import('parchment')
- }
- }}
- />
);
@@ -177,7 +161,7 @@ export default NewsWritePage;
const Container = styled.div`
display: flex;
flex-direction: column;
- width: 600px;
+ width: 100%;
`;
const HeaderWrapper = styled.div`
@@ -232,12 +216,19 @@ const InputWrapper = styled.div`
const InputTitle = styled.div`
display: flex;
align-items: center;
+ justify-content: space-between;
height: 40px;
width: 100%;
+ white-space:nowrap;
+ padding: 10px;
svg {
cursor: pointer;
margin-right: 10px;
}
+
+ p{
+ margin-right:10px;
+ }
`;
const VisibilityWrapper = styled.div`
@@ -262,54 +253,4 @@ const ErrorMessage = styled.div`
margin-top: 10px;
margin-left: 10px;
font-size: 13px;
-`;
-
-const CustomQuillEditor = styled(ReactQuill)`
- resize: none;
- background-color:white;
- box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
- border-radius: 10px;
-
- .ql-container {
- border: 1px solid #E4E4E7;
- border-radius: 0 0 10px 10px;
- }
-
- .ql-editor {
- height: 80vh;
- overflow: auto;
- }
- .ql-editor img {
- max-width: 100%; /* 이미지가 컨테이너를 넘지 않도록 설정 */
- cursor: nwse-resize; /* 크기 조정 시 커서 변경 */
- resize: both; /* 양 방향 리사이징 허용 */
- }
-
- .ql-toolbar {
- background-color: rgba(0, 0, 0, 0.03);
- border: 1px solid #E4E4E7;
- border-radius: 10px 10px 0 0;
- }
-
- .ql-editor .ql-size-huge {
- font-size: 1.5em;
- }
- .ql-editor .ql-size-large {
- font-size: 1.2em;
- }
- .ql-editor .ql-size-small {
- font-size: 0.7em;
- }
- .ql-bold {
- font-weight: 800;
- }
- .ql-italic {
- font-style: italic;
- }
- .ql-underline {
- text-decoration: underline;
- }
- .ql-strike {
- text-decoration: overline;
-}
`;
\ No newline at end of file
diff --git a/src/pages/PromotionAdmin/NewsPage/index.tsx b/src/pages/PromotionAdmin/NewsPage/index.tsx
index df7c3258..003cc12c 100644
--- a/src/pages/PromotionAdmin/NewsPage/index.tsx
+++ b/src/pages/PromotionAdmin/NewsPage/index.tsx
@@ -1,6 +1,4 @@
import NewsList from '@/components/PromotionAdmin/News/NewsList';
-import { PA_ROUTES } from '@/constants/routerConstants';
-import { INEWS } from '@/types/PromotionAdmin/news';
import React, { useEffect, useState } from 'react';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import styled from 'styled-components';
diff --git a/src/pages/PromotionPage/AboutPage/AboutPage.tsx b/src/pages/PromotionPage/AboutPage/AboutPage.tsx
index 459d4e8e..2924b86d 100644
--- a/src/pages/PromotionPage/AboutPage/AboutPage.tsx
+++ b/src/pages/PromotionPage/AboutPage/AboutPage.tsx
@@ -1,6 +1,10 @@
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { getCEOData, getPartnersData } from '../../../apis/PromotionAdmin/dataEdit';
+import NetflixLogo from '@/assets/images/PP/Netflix-Logo.jpg';
+import CJLogo from '@/assets/images/PP/CJ_ENM_Logo.png';
+import defaultCEOLogo from '@/assets/images/PP/studioeye_ceo.png';
+import { CEO_DATA } from '@/constants/introdutionConstants';
import IntroPage from './IntroPage';
import WhatWeDoPage from './WhatWeDoPage';
@@ -29,43 +33,68 @@ interface ICorpInfoData {
}
const AboutPage = () => {
- const [CEOData, setCEOData] = useState({
- id: -1,
- name: '',
- introduction: '',
- imageFileName: '',
- imageUrl: '',
- });
- const [corpInfoData, setCorpInfoData] = useState([]);
+ const defaultCEOData: ICEOInfoData = {
+ id: 1,
+ name: CEO_DATA.CEO_Name,
+ introduction: CEO_DATA.CEO_Instruction,
+ imageFileName: defaultCEOLogo,
+ imageUrl: defaultCEOLogo,
+ };
+
+ const defaultCorpData: ICorpInfoData[] = [
+ {
+ partnerInfo: {
+ id: 1,
+ is_main: true,
+ link: 'https://www.netflix.com/browse',
+ },
+ logoImg: NetflixLogo,
+ },
+ {
+ partnerInfo: {
+ id: 2,
+ is_main: true,
+ link: 'https://www.netflix.com/browse',
+ },
+ logoImg: CJLogo,
+ },
+ ];
+
+ const [CEOData, setCEOData] = useState(defaultCEOData);
+ const [corpInfoData, setCorpInfoData] = useState(defaultCorpData);
useEffect(() => {
const fetchData = async () => {
try {
const [CEODataResponse, corpDataResponse] = await Promise.all([getCEOData(), getPartnersData()]);
+
+ // CEO 데이터 처리
if (CEODataResponse) {
const ceoInfo = CEODataResponse;
const object1 = {
- id: ceoInfo.id,
- name: ceoInfo.name,
- introduction: ceoInfo.introduction,
- imageFileName: ceoInfo.imageFileName,
- imageUrl: ceoInfo.imageUrl,
+ id: ceoInfo.id || defaultCEOData.id,
+ name: ceoInfo.name || defaultCEOData.name,
+ introduction: ceoInfo.introduction || defaultCEOData.introduction,
+ imageFileName: ceoInfo.imageFileName || defaultCEOData.imageFileName,
+ imageUrl: ceoInfo.imageUrl || defaultCEOData.imageUrl,
};
setCEOData(object1);
}
+ // 기업 정보 데이터 처리
if (corpDataResponse) {
const objects2 = corpDataResponse
.filter((item: any) => item.partnerInfo.is_main === true)
.map((item: any) => ({
partnerInfo: item.partnerInfo,
- logoImg: item.logoImg,
+ logoImg: item.logoImg || defaultCorpData[0].logoImg,
}));
- setCorpInfoData(objects2);
- console.log('objects2 : ', objects2);
+ setCorpInfoData(objects2.length > 0 ? objects2 : defaultCorpData); // 데이터 없으면 디폴트 데이터 사용
}
} catch (error) {
console.error('데이터 가져오기 오류:', error);
+ setCEOData(defaultCEOData);
+ setCorpInfoData(defaultCorpData); // 에러 시 디폴트 데이터
}
};
fetchData();
@@ -93,7 +122,7 @@ const AboutPage = () => {
) : (
- <>
+
@@ -123,7 +152,7 @@ const AboutPage = () => {
) : (
- <>
+
@@ -132,6 +161,7 @@ const AboutPage = () => {
export default AboutPage;
+
const ScrollContainer = styled.div`
display: flex;
flex-direction: column;
diff --git a/src/pages/PromotionPage/AboutPage/IntroPage.tsx b/src/pages/PromotionPage/AboutPage/IntroPage.tsx
index 1d3befd9..80f1d927 100644
--- a/src/pages/PromotionPage/AboutPage/IntroPage.tsx
+++ b/src/pages/PromotionPage/AboutPage/IntroPage.tsx
@@ -75,7 +75,7 @@ function IntroPage() {
transition={{ duration: 1, delay: 0.2 }}
>
ABOUT
-
diff --git a/src/pages/PromotionPage/Main/MainPage.tsx b/src/pages/PromotionPage/Main/MainPage.tsx
index b3d7864a..8b20799d 100644
--- a/src/pages/PromotionPage/Main/MainPage.tsx
+++ b/src/pages/PromotionPage/Main/MainPage.tsx
@@ -109,9 +109,9 @@ const MainPage = () => {
key={'default'}
data={{
backgroundImg: defaultMainImg,
- title: '',
- client: '',
- overview: '😊 데이터가 존재하지 않습니다.',
+ title: '절대 떠들면 안 되는 호텔',
+ client: '넷플릭스 코리아',
+ overview: '설명이 뭐였지',
}}
count={filteredMainData.length}
scrollToSection={scrollToSection}
diff --git a/src/pages/PromotionPage/NewsPage/NewsBoardPage.tsx b/src/pages/PromotionPage/NewsPage/NewsBoardPage.tsx
index 07ffcf41..2be4d1cd 100644
--- a/src/pages/PromotionPage/NewsPage/NewsBoardPage.tsx
+++ b/src/pages/PromotionPage/NewsPage/NewsBoardPage.tsx
@@ -2,16 +2,15 @@ import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { useNavigate } from 'react-router-dom';
import { getAllNewsData } from '@/apis/PromotionPage/news';
+import BackgroundYellowCircle from '@/components/BackgroundYellowCircle/BackgroundYellowCircle';
+import { GoArrowRight } from "react-icons/go";
interface INewsCardProps {
id: number;
title: string;
source: string;
- mainImg?: string;
- content: string;
+ url: string;
pubDate: string;
- createdAt: Date;
- updatedAt: Date;
onClick?: () => void;
}
@@ -31,13 +30,9 @@ const NewsBoardPage: React.FC = () => {
id: news.id,
title: news.title,
source: news.source,
- mainImg: news.newsFiles.length > 0 ? news.newsFiles[0].filePath : undefined, // 이미지 경로 설정
- content: news.content,
pubDate: news.pubDate,
- createdAt: news.createdAt,
- updatedAt: news.updatedAt
+ url: news.url,
}));
-
setNewsData(formattedData);
} catch (error) {
console.error('news' + error);
@@ -50,153 +45,244 @@ const NewsBoardPage: React.FC = () => {
fetchData();
}, []);
- const handleCardClick = (news: INewsCardProps) => {
- navigate(`/news/${news.id}`, { state: { news } });
- };
-
if (loading) return
-
- 최근 소식 어쩌구
-
- {newsData.map((news) => (
- handleCardClick(news)} {...news} />
- ))}
-
-
-
- );
-};
+
+
+
+ REA
+
+ D
+ D
+ D
+
+ THE NEWS
+
-const NewsCard: React.FC = ({ title, source, mainImg, content, pubDate, onClick }) => {
- return (
-
-
- {title}
- {source}
- {content.slice(0, 100)}...
-
- {mainImg ? (
-
- 
-
- ) : (
- {content.slice(0, 40)}...
- )}
-
+
+ AB
+
+ O
+ O
+ O
+
+ UT STUDIOEYE!
+
+
+
+
+
+
+
+
+ 스튜디오아이 관련 뉴스 보기
+ {newsData.map((news) => (
+ { window.open(news.url) }}>
+
+ {news.title}
+ {news.source} {new Date(news.pubDate).toLocaleDateString()}
+
+
+
+ ))}
+
+
);
};
-const Container = styled.div`
- font-family: 'Pretendard';
- min-height: 100vh;
+const IntroSection = styled.div`
+ height: 100vh;
background-color: black;
- color: white;
- padding: 20px;
display: flex;
- flex-direction: column;
- justify-content: flex-start;
+ justify-content: center;
+ align-items: center;
`;
-const Content = styled.div`
- max-width: 1200px;
- width: 100%;
- margin: 0 auto;
- padding-top: 5rem;
- flex: 1;
+const IntroTitleWrapper = styled.div`
display: flex;
flex-direction: column;
- justify-content: flex-start;
+ align-items: center;
+ justify-content: center;
+ line-height: 1.1;
+ margin-bottom: 50px;
`;
-const Title = styled.h1`
- font-size: 24px;
- margin-bottom: 20px;
+const IntroLine = styled.div`
+ display: flex;
+ justify-content: center;
+`;
+
+const IntroNewsWhite = styled.span`
+ font-family: Pretendard;
font-weight: 700;
+ font-size: 96px;
+ color: white;
`;
-const CardContainer = styled.div`
- display: flex;
- flex-direction: column;
- gap: 20px;
+const IntroNewsYellow = styled.span`
+ margin-left: 30px;
+ font-family: Pretendard;
+ font-weight: 700;
+ font-size: 96px;
+ color: #ffa900;
`;
-const Card = styled.div`
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 20px;
- background-color: #fff;
- border-radius: 8px;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- transition: background-color 0.3s ease;
+const IntroNewsYellowNoMargin = styled.span`
+ font-family: Pretendard;
+ font-weight: 700;
+ font-size: 96px;
+ color: #ffa900;
+`;
- &:hover {
- background-color: #f1f1f1;
- cursor: pointer;
+const IntroNewsMovingContainer = styled.span`
+ position: relative;
+ display: inline-block;
+ margin-right: 70px;
+`;
+
+interface IntroNewsMovingProps {
+ delay: string;
+}
+
+const IntroNewsMovingDAnimated = styled.span`
+ font-family: Pretendard;
+ font-weight: 50;
+ font-size: 96px;
+ color: #ffa900;
+ position: absolute;
+ margin-left: -5px;
+ animation: move-diagonal 0.7s ease-in-out infinite alternate;
+ animation-delay: ${(props) => props.delay};
+
+ @keyframes move-diagonal {
+ 0% {
+ transform: translate(-5px, -5px);
+ }
+ 100% {
+ transform: translate(5px, 5px);
+ }
}
`;
-const TextContent = styled.div`
- flex: 1;
- padding-right: 20px;
+const IntroNewsMovingOAnimated = styled.span`
+ font-family: Pretendard;
+ font-weight: 50;
+ font-size: 96px;
+ color: #ffffff;
+ position: absolute;
+ animation: move-horizontal 0.7s ease-in-out infinite alternate;
+ animation-delay: ${(props) => props.delay};
+
+ @keyframes move-horizontal {
+ 0% {
+ transform: translateX(-5px);
+ }
+ 100% {
+ transform: translateX(5px);
+ }
+ }
`;
-const TitleWrapper = styled.h2`
- font-size: 1.5rem;
- font-family: 'Pretendard-bold';
- color: black;
- margin-bottom: 10px;
+
+const IntroSubtitle = styled.div`
+ font-family: 'Pretendard';
+ font-weight: 700;
+ font-size: 36px;
+ margin-bottom: 20px;
+ color: white;
`;
-const Client = styled.p`
- font-size: 14px;
+const Container = styled.div`
font-family: 'Pretendard';
+ min-height: 100vh;
+ background-color: black;
+ color: white;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+`;
+
+const NewsSection = styled.div`
+ height: 100vh;
+ scroll-snap-align: start;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: black;
+`;
+const NewsSectionIntro = styled.h3`
+ font-size: 19px;
+ color: white;
+ margin-bottom: 20px;
+ max-width: 1200px;
+ width: 100%;
+`;
+const TextWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+`;
+const Title = styled.h3`
+ font-size: 24px;
font-weight: 600;
- color: #777;
- margin-bottom: 10px;
+ color: white;
+ transition: color 0.3s ease-in-out;
`;
-const ContentPreview = styled.p`
- font-size: 16px;
- font-family: 'Pretendard';
- font-weight: 500;
- color: #555;
+const Source = styled.p`
+ font-size: 19px;
+ margin: 8px 0 0 0;
+ display: none;
`;
-// 이미지가 있을 때
-const ImageWrapper = styled.div`
- width: 150px;
- height: 150px;
- flex-shrink: 0;
+const PubDate = styled.p`
+ font-size: 19px;
+ color: white;
+ margin: 0;
+ display: none;
+`;
- img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- border-radius: 8px;
- }
+const ArrowIcon = styled.div`
+ font-size: 100px;
+ color: #ffa900;
+ display: none;
+ margin: 8px 0 0 auto;
+ align-self: center;
`;
-// 메인이미지가 없을 때 텍스트로 대체
-const TextImage = styled.div`
- width: 150px;
- height: 150px;
- flex-shrink: 0;
- background-color: #e0e0e0;
- color: #555;
+const NewsCard = styled.div`
+ width: 100%;
+ max-width: 1200px;
+ padding: 20px 0;
+ margin-bottom: 10px;
+ background-color: black;
+ border-top: 1px solid white;
+ border-bottom: 1px solid white;
+ cursor: pointer;
display: flex;
+ flex-direction: row;
align-items: center;
- justify-content: center;
- text-align: left;
- border-radius: 8px;
- font-size: 14px;
- font-family: 'Pretendard';
- font-weight: 500;
- line-height: 1.2;
+ justify-content: space-between;
+ transition: all 0.3s ease-in-out;
+ overflow: hidden;
+ height: 60px;
+
+ &:hover {
+ height: 90px;
+
+ ${Title} {
+ color: #ffa900;
+ }
+
+ ${Source}, ${PubDate}, ${ArrowIcon} {
+ display: block;
+ }
+ }
`;
export default NewsBoardPage;
diff --git a/src/pages/PromotionPage/RecruitmentPage/RecruitmentPage.tsx b/src/pages/PromotionPage/RecruitmentPage/RecruitmentPage.tsx
index 67ee2320..8af85970 100644
--- a/src/pages/PromotionPage/RecruitmentPage/RecruitmentPage.tsx
+++ b/src/pages/PromotionPage/RecruitmentPage/RecruitmentPage.tsx
@@ -1,8 +1,8 @@
import React, { useState, useEffect } from 'react';
-import styled from 'styled-components';
import axios from 'axios';
-import { useNavigate } from 'react-router-dom';
import { PROMOTION_BASIC_PATH } from '@/constants/basicPathConstants';
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
interface PostData {
id: number;
diff --git a/src/types/PromotionAdmin/news.ts b/src/types/PromotionAdmin/news.ts
index 6dfec925..898c016e 100644
--- a/src/types/PromotionAdmin/news.ts
+++ b/src/types/PromotionAdmin/news.ts
@@ -3,13 +3,6 @@ export interface INEWS {
title: string;
source: string;
pubDate: string;
- content: string;
+ url: string;
visibility: boolean;
- createdAt: string;
- updatedAt: string;
- newsFiles:[
- id:number,
- fileName:string,
- filePath:string
- ]
}
\ No newline at end of file
출처/작성자
+출처/작성자
{ placeholder='출처 혹은 작성자 입력' style={{borderRadius:"5px",fontFamily:"pretendard-semiBold",marginTop:"auto",marginBottom:"auto",}} /> -원문 날짜
+
+
+
handleChangeVisibility(true)} className='public' selected={visibility}>
공개
@@ -140,33 +138,19 @@ const NewsWritePage = () => {
-
-
- 원문 날짜
{ placeholder='기사 원문 날짜 입력' style={{borderRadius:"5px",fontFamily:"pretendard-semiBold",marginTop:"auto",marginBottom:"auto",}} /> -공개 여부
+공개 여부
내용
- + +링크
+CEO 정보가 없습니다.
)}
기업 정보가 없습니다.
)}
Loading...
;
if (error) return {error}
;
return (