개발/React
21.08.23 오늘 개발 진행한 내용
세크레투스
2023. 5. 24. 19:08
반응형
SMALL
1.News 페이지 Component 분리
2.각 데이터 별 CSS 구분
3.데이터 있을 때와 없을 때의 화면 다르게 보이게 구분(swap)
4.카드의 제목이 길어질 경우 아래의 태그와 CSS 겹치는 문제 해결.
<오늘의 개발 일지>
1. Dummy Data를 주고, Dummy Data 배열에 값이 없을 때와 있을 때 서로 다른 화면이 보이게 구분하기.
src\pages\main\news\news.js
import React, {useState, useCallback} from 'react';
import Card from '../../../components/common/news/Card.js';
import ScrapCard from 'components/common/news/ScrapCard.js';
import ScrapButton from 'components/common/news/ScrapButton.js';
// import Header from '../../../components/common/Header';
import Header from '../../../components/Header';
import Footer from '../../../components/common/Footer';
import '../../../assets/styles/style.css'
import '../../../assets/styles/reset.css'
import '../../../assets/styles/news.css'
import '../../../assets/styles/common.css'
const Index = (props) => {
let newsData = [
{type:1, topic:'금융시장동향',
title:'일중 시장환율 속보 일중 시장환율 속보일중 시장환율 속보일중 시장환율 속보일중 시장환율 속보일중 시장환율 속보일중 시장환율 속보일중 시장환율 속보',
date:'2021.01.01',
tag1:'일중시황',tag2:'일중시황',tag3:'일중시황',tag4:'일중시황'
},
{type:2, topic:'금융시장동향2',
title:'일중 시장환율 속보 일중 시장환율 속보일중 시장환율 속보일중 시장환율 속보일중 시장환율 속보일중 시장환율 속보일중 시장환율 속보일중 시장환율 속보',
date:'2021.02.02',
tag1:'일중시황',tag2:'일중시황',tag3:'일중시황',tag4:'일중시황'
},
...
{type:7, topic:'금융시장동향7',
title:'일중 시장환율 속보 일중 시장환율 속보일중 시장환율 속보일중 시장환율 속보일중 시장환율 속보일중 시장환율 속보일중 시장환율 속보일중 시장환율 속보',
date:'2021.06.06',
tag1:'일중시황',tag2:'일중시황',tag3:'일중시황',tag4:'일중시황'
},
{type:8, topic:'금융시장동향8',
title:'일중 시장환율 속보 일중 시장환율 속보일중 시장환율 속보일중 시장환율 속보일중 시장환율 속보일중 시장환율 속보일중 시장환율 속보일중 시장환율 속보',
date:'2021.06.06',
tag1:'일중시황',tag2:'일중시황',tag3:'일중시황',tag4:'일중시황'
}
]
// 더미데이터 1번
let scrapData = [
{type:1, date: '2021.01.01', topic:'금융시장동향', title:'일중 시장환율 속보 일중...', subtitle:'뉴스스크랩 자료입니다.'},
{type:2, date: '2021.01.01', topic:'금융시장동향', title:'일중 시장환율 속보 일중...', subtitle:'뉴스스크랩 자료입니다.'},
...
{type:7, date: '2021.01.01', topic:'금융시장동향', title:'일중 시장환율 속보 일중...', subtitle:'뉴스스크랩 자료입니다.'},
{type:8, date: '2021.01.01', topic:'금융시장동향', title:'일중 시장환율 속보 일중...', subtitle:'뉴스스크랩 자료입니다.'}
]
// 더미데이터 2번
let isEmpty = function(value){
if(value == "" || value == null || value == undefined || (value != null && typeof value == "object" && !Object.keys(value).length)){
return true
} else {
return false
}
};
// 더미데이터 2번에 데이터 유무 구분
console.log(props);
return(
<div className="main__content">
{/* <Header /> */}
<div className="main__content__container">
<div className="sub__container">
<div className="sub__info">
<div className="sub__info__text">
<div className="sub__info__title">
뉴스
</div>
<div className="sub__info__location">
<img src={require("../../../assets/images/icon/sub_home_img.png").default} alt="home img" />
<img src={require("../../../assets/images/icon/sub_right_arrow.png").default} alt="right arrow" className="px10" />
<p>뉴스</p>
</div>
</div>
<div className="sub__info__order">
{/* <img src={require("/image/ordersetting.png").default} alt="화면 순서 설정 이미지" /> */}
화면순서설정
</div>
</div>
<div className='news__content__cover'>
<div className='news__content'>
<div className='news__info'>
<div className='news__info__title'>
ibk 뉴스레터
</div>
<div className='news__info__more'>
<img src={"/images/more_plus.png"} alt="more btn" />
더보기
</div>
</div>
<div className='news__card__cover'>
<div className='news__card__container'>
<div className='news__card__container'>
<div className='news__card'>
{newsData.map((data, index) => {
const {type, topic, title, date, tag1, tag2, tag3, tag4} = data;
return (
<Card
key={index}
type={type}
topic={topic}
title={title}
date={date}
tag1={tag1}
tag2={tag2}
tag3={tag3}
tag4={tag4}
/>
)
})}
//컴포넌트로 뺀 Card 부분 더미데이터 1번으로 map 돌림.
</div>
</div>
</div>
</div>
</div>
<div className='news__content news__content__mt'>
<div className='news__info'>
<div className='news__info__title'>
뉴스 스크랩
</div>
<div className='news__info__more'>
<img src="/images/more_plus.png" alt="more btn" />
더보기
</div>
</div>
<div className='news__card__cover'>
<div className='news__card__container'>
<div className='news__card'>
{
isEmpty(scrapData) === true
? <>
<ScrapButton/>
</>
: <>
{scrapData.map((data, index) => {
const {type,date,topic,title,subtitle} = data;
return(
<ScrapCard
key={index}
type={type}
date={date}
topic={topic}
title={title}
subtitle={subtitle}
/>
)
})}
</>
}
//더미데이터2번에 데이터 없을 시 컴포넌트 ScrapButton이 활성화, 데이터 있을 시에 ScrapCard 활성화.
//map 돌릴 시에 꼭 return 해줘야 하는데 return 하나 빼먹어서 몇 시간 헤맴. 다음부턴 꼭 잊지 말자!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<Footer />
</div>
)
}
export default Index;
2. 중복 부분 컴포넌트로 빼기, 각 데이터별 다른 CSS 구분
src\components\common\news\Card.js
import React from 'react';
const Card = (props) => {
const {type, topic, title, date, tag1, tag2, tag3, tag4} = props;
const style = type;
let color = 'yellow';
if(style==1){
color = 'yellow'
} else if(style==2) {
color = 'green'
} else if(style==3) {
color = 'sky'
} else if(style==4) {
color = 'gold'
} else if(style==5) {
color = 'emerald'
} else if(style==6) {
color = 'blue'
} else if(style==7) {
color = 'purple'
} else {
color = 'boldpurple'
}
// 데이터 타입 별 다른 CSS가 적용되도록 구분.
return(
<>
<div className={`news__card__inner newscard1 card-${color}`}>
<p className={`news__topic text-${color}`}>
{topic}
</p>
<p className='news__title'>
{title}
</p>
<p className='news__date'>
{date}
</p>
<ul className='news__related'>
<li>
{tag1}
</li>
<li>
{tag2}
</li>
<li>
{tag3}
</li>
<li>
{tag4}
</li>
</ul>
</div>
</>
)
}
export default Cardsrc\components\common\news\ScrapCard.js
import React from 'react';
const ScrapCard = (props) => {
const {type, date, topic, title, subtitle} = props;
const style = type;
let color = 'yellow';
if(style==1){
color = 'yellow'
} else if(style==2) {
color = 'green'
} else if(style==3) {
color = 'sky'
} else if(style==4) {
color = 'gold'
} else if(style==5) {
color = 'emerald'
} else if(style==6) {
color = 'blue'
} else if(style==7) {
color = 'purple'
} else {
color = 'boldpurple'
}
// 데이터 타입 별 다른 CSS가 적용되도록 구분.
return(
<div className={`news__card__inner card-${color} scrap`}>
<p className='news__date'>
{date}
</p>
<p className={`news__topic text-${color}`}>
{topic}
</p>
<p className='news__title'>
{title}
</p>
<p className="news__subtitle">
{subtitle}
</p>
</div>
)
}
export default ScrapCard;src\components\common\news\ScrapButton.js
import React from 'react';
import 'assets/styles/news.css'
import 'assets/styles/common.css'
const ScrapButton = () => {
return(
<div className="news__scrap">
<div className="explane">
<div className="text">
<img src="/images/ex_mark.png" alt="Exclamation mark" />
<p>
IBK BOX 이용약관 ㅣ 개인(신용)정보 수집ㆍ이용 동의 ㅣ 개인정보 제3자 제공 동의(상품서비스 안내 등) ㅣ 상품서비스 안내(선택) 등 에 모두 동의합니다.
</p>
</div>
<img src="/images/blue_close.png" alt="close btn" />
</div>
<div className='btn-scrap-cover'>
<button className="btn-scrap">
<img src={require("assets/images/news_scrap.png").default} alt="스크랩 이미지" />
스크랩 작성
</button>
</div>
</div>
)
}
export default ScrapButton;반응형
LIST