1) home content
먼저 home의 content에 출력될 데이터들을 js 파일로 만들고 export 했다.
export default [
{
id: 1,
type : 'trip',
thumbnail: './img/main/1.jpg',
images: [
{ img: "https://www.tamraev.com/upload/card/20210506100948_23669410.jpg" },
{ img: "https://www.tamraev.com/upload/card/20210506100954_67067367.jpg" },
{ img: "https://www.tamraev.com/upload/card/20210506100957_08711424.jpg" },
{ img: "https://www.tamraev.com/upload/card/20210506101000_69584220.jpg" },
{ img: "https://www.tamraev.com/upload/card/20210506101003_38357467.jpg" },
{ img: "https://www.tamraev.com/upload/card/20210506101006_67372886.jpg" },
],
inner: `
<div class="content_area">
<p class="tit1">슬기로운 전기차 여행</p>
<p class="tit2">제주도 여행 시<br>전기차 렌트를 더 많이<br>이용하는 이유!</p>
<div class="sns_share">
<div class="tag">
<span>#제주도</span><span>#탐라는전기차</span><span>#전기차</span><span>#아이오닉5</span><span>#제주도여행</span><span>#전기차렌트</span><span>#전기차렌트혜택</span><span>#렌터카</span><span>#공영주차장혜택</span><span>#주차비할인</span><span>#전기차충전혜택</span>
</div>
<div class="btn_area">
<p class="tit"><img src="./img/main/icon_share.png" alt="">공유하기</p>
<a href="javascript:;" class="card_share blog" data-id="N" title="네이버블로그 하기"
onclick="click_tag('PC, MO 공통', '공유하기_블로그', '카드뉴스_#1')"><img src="./img/main/icon_blog.png"
alt="네이버블로그"></a>
<a href="javascript:;" class="card_share kakao" data-id="K" title="카카오톡 공유하기"
onclick="click_tag('PC, MO 공통', '공유하기_카카오톡', '카드뉴스_#1')"><img src="./img/main/icon_kakao.png"
alt="카카오톡"></a>
<a href="javascript:;" class="card_share facebook" data-id="F" title="페이스북 공유하기"
onclick="click_tag('PC, MO 공통', '공유하기_페이스북', '카드뉴스_#1')"><img
src="./img/main/icon_facebook.png" alt="페이스북"></a>
</div>
</div>
</div>
`
},
.
.
. <ul id="card_list" style={{ overflow: 'hidden', fontSize: 0, marginLeft: '-24px', height: `${cardListHeight}px` }}>
{
showData.map(item => <li key={item.id} onClick={() => onPop(item.id)}><img src={item.thumbnail} alt="" /></li>)
}
</ul>
그 뒤에 썸네일 사진들만 출력이 되도록 map을 사용했다.
2) home content 더 보기
더 보기 버튼의 기능을 구현하기 위해 content를 담고있는 ul의 높이를 변경해 주기로 했다.
<button className="btn_more" onClick={onMore}>더보기</button>
더보기 버튼을 누르면 onMore 함수가 실행이 되고,
const [cardListHeight, setCardListHeight] = useState(400);
const onMore = () => {
if (cardListHeight !== 1600) {
setCardListHeight((prevHeight) => prevHeight + 400);
}
};
if문으로 조건을 1600이 아니라면 기존의 높이값에서 400을 더한 숫자가 cardListHeight가 되도록 했다.
조건을 1600으로 하고 400씩 증가하게 한 이유는 한 줄의 content의 높이가 400이기 때문이고 총 3번 클릭을 하면 모든 content가 출력되기 때문에 더 이상 증가하지 않게 하기 위해 조건을 작성했다.
3) home content 팝업
content를 클릭하면 해당 내용이 팝업으로 표시된다.
{
isPop ? <Popup currentData={currentData} offPop={offPop} /> : null
}
먼저 isPop이라는 변수를 만들어 content를 클릭했을 때 true가 되어 Popup 컴포넌트가 출력되도록 했다.
그리고 클릭한 content가 무엇인지 구별하기 위해 id를 넘겨받고 find를 사용해 해당 id와 동일한 객체를 넘겨주도록 했다.
const [isPop, setIsPop] = useState(false)
const [currentData, setCurrentData] = useState('')
const onPop = id => {
setIsPop(true)
setCurrentData(mainData.find(item => item.id === id))
}const Popup = ({ currentData, offPop }) => {
const { images, inner } = currentData
console.log(inner);
return (
<>
<ContainerPopup>
<div id='layer_news'>
<div className="swiperBox">
<Swiper
modules={[Navigation, Scrollbar, A11y, Autoplay]}
spaceBetween={0}
slidesPerView={1}
loop={true}
pagination={{ clickable: true }}
autoplay={true}
>
{
images.map((item, idx) =>
<SwiperSlide><img key={idx} src={item.img} className='swiperimg' alt="" /></SwiperSlide>
)
}
</Swiper>
</div>
<div dangerouslySetInnerHTML={{ __html: inner }} />
<a className="btn_close" onClick={offPop}></a>
</div>
</ContainerPopup>
<ContainerPopupBg />
</>
);
};
이미지의 경우 객체 안에 객체의 형태로 담겨있으므로 map을 사용했다.
{
id: 1,
type : 'trip',
thumbnail: './img/main/1.jpg',
images: [
{ img: "https://www.tamraev.com/upload/card/20210506100948_23669410.jpg" },
{ img: "https://www.tamraev.com/upload/card/20210506100954_67067367.jpg" },
{ img: "https://www.tamraev.com/upload/card/20210506100957_08711424.jpg" },
{ img: "https://www.tamraev.com/upload/card/20210506101000_69584220.jpg" },
{ img: "https://www.tamraev.com/upload/card/20210506101003_38357467.jpg" },
{ img: "https://www.tamraev.com/upload/card/20210506101006_67372886.jpg" },
],
4) home content 검색
content 검색 기능을 추가하기 위해 form과 input을 사용했다.
<form onSubmit={onSubmit}>
<input type="text" id="searchTxt" value={text} onChange={changeInput} placeholder="검색어를 입력해주세요." />
</form> const [text, setText] = useState('')
const onSubmit = (e) => {
e.preventDefault();
if (!text) return
const filteredData = mainData.filter(item => item.inner.includes(text));
setShowData(filteredData);
setText('');
}
const changeInput = (e) => {
setText(e.target.value)
}
input에 검색 내용을 작성하면 value값을 출력해 주고, form을 submit 하게 되면 그 value값을 받아 data에서 해당 내용이 있는 객체들만 filter를 통해 배열로 만들도록 했다.
그 후 해당 배열(filteredData)을 setShowData에 넣어 화면에 출력되도록 한다.
{
showData.map(item => <li key={item.id} onClick={() => onPop(item.id)}><img src={item.thumbnail} alt="" /></li>)
}
5) home content 타입
인기 콘텐츠, 전기차 소개 등 메뉴를 누르게 되면 해당 메뉴에 맞는 content들이 출력되도록 했다.
우선 content data에 type를 추가해 주었다.
id: 1,
type : 'trip',
thumbnail: './img/main/1.jpg', <div className="category_menu">
<ul>
<li><Link className="menu_select" data-id="ALL" onClick={() => onTpye('all')}>인기 콘텐츠</Link></li>
<li><Link className="menu_select" data-id="A" onClick={() => onTpye('info')}>전기차 소개</Link></li>
<li><Link className="menu_select" data-id="B" onClick={() => onTpye('trip')}>슬기로운 전기차 여행</Link></li>
<li><Link className="menu_select" data-id="C" onClick={() => onTpye('service')}>충전 및 문제 대처법</Link></li>
<li><Link className="menu_select" data-id="D" onClick={() => onTpye('qna')}>FAQ</Link></li>
<li><Link className="menu_select" data-id="E" to={"https://yeonhub.github.io/TP-EZtour_vanillaJS/"} target="_blank">이젠제주투어 </Link></li>
<li><Link className="menu_select" data-id="F" to={'/noticeList'}>제주 전기차 뉴스</Link></li>
</ul>
그리고 카테고리 메뉴를 클릭하게 되면 onType 함수에 어떤 타입인지 값을 넘겨주고 함수를 실행시켜 주도록 했다.
const [showData, setShowData] = useState(mainData)
const onTpye = (type) => {
type === 'all' ? setShowData(mainData) : setShowData(mainData.filter(item => item.type === type))
}
만약 넘겨받은 type이 all인 경우 전체 data를 출력해 주고 아닌 경우 filter를 통해 data.type이 일치하는 content들만 화면에 출력된다.