0. 사용할 임시 데이터 생성
@track faqMenuList = [
{label : '전체', value : 'all'},
{label : '사이트', value : 'sites'},
{label : '제품', value : 'products'},
];
@track faqList = [
{category : `sites`, cateTxt : `사이트`,
question: `What is the logic behind lorem ipsum?`,
answer : `It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. `},
{category : `products`, cateTxt : `제품`,
question: `Is lorem ipsum fake Latin?`,
answer : `Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.`},
{category : `products`, cateTxt : `제품`,
question: `What is the full lorem ipsum quote?`,
answer : `A common form of Lorem ipsum reads: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`},
{category : `sites`, cateTxt : `사이트`,
question: `What is Lorem Ipsum?`,
answer : `Lorem Ipsum is simply dummy text of the printing and typesetting industry.`},
{category : `products`, cateTxt : `제품`,
question: `What does lorem ipsum mean?`,
answer : `Lorem ipsum, placeholder or dummy text used in typesetting and graphic design for previewing layouts. It features scrambled Latin text, which emphasizes the design over content of the layout. It is the standard placeholder text of the printing and publishing industries. Related Topics: graphic design typesetting.`},
{category : `sites`, cateTxt : `사이트`,
question: `Why do we use it?`,
answer : `It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. `},
{category : `sites`, cateTxt : `사이트`,
question: `Where does it come from?`,
answer : `Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.`},
{category : `products`, cateTxt : `제품`,
question: `What is the legal meaning of lorem ipsum?`,
answer : `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`},
{category : `sites`, cateTxt : `사이트`,
question: `Where can I get some?`,
answer : `There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. `},
{category : `sites`, cateTxt : `사이트`,
question: `What is the English version of lorem ipsum?`,
answer : `No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.`},
{category : `sites`, cateTxt : `사이트`,
question: `Is lorem ipsum real text?`,
answer : `Lorem Ipsum is basically just dummy text that is latin`},
{category : `sites`, cateTxt : `사이트`,
question: `Why is lorem ipsum everywhere?`,
answer : `When you see 'Lorem Ipsum' anywhere but here, it's filler text. Most common example: say you're putting together a webpage, and you want to put text on it, but you don't know what you want it to say yet. `}
];
1. 탭에 따라 리스트 나누기
1-1. html 작성
<template>
<div class="cpFaq">
<div class="title">FAQ</div>
<!-- menu -->
<ul class="faq-menu">
<template for:each={faqMenuList} for:item="item" for:index="index">
<li key={item.value} data-val={item.value} data-idx={index}
onclick={clickTabmenu} class="m-menu">
{item.label}
</li>
</template>
</ul>
<!-- -->
<div class="faq-wrap">
<p class="faq-qty">Total {currFaqlist.length}</p>
<ul>
<template for:each={currFaqlist} for:item="item" for:index="index">
<li key={item.id} data-idx={index} class="faq-con">
<div class="question">
<p class="q-title">[{item.cateTxt}] {item.question} </p>
<span class="down">▼</span>
</div>
<div class="answer">{item.answer}</div>
</li>
</template>
</ul>
</div>
</div>
</template>1-2. js 작성
import { LightningElement, track } from 'lwc';
export default class CpFaq extends LightningElement {
@track activeMenu = 'all';
@track currFaqlist = [];
@track pagingList = [];
@track pagingData = {
showNum : 5, // 한번에 보여지는 개수
totalShowNum : 5, // 현재 보여지고 있는 개수
clickNum : 0 // 몇 번 클릭되었는지
}
get showSeemoreBtn(){
let x = !(this.currFaqlist.length == this.pagingData.totalShowNum);
return x;
}
@track isFirstLoaded = true;
renderedCallback(){
if(this.isFirstLoaded){
let menuList = this.template.querySelectorAll('.m-menu');
console.log('menuList : ', menuList);
if(menuList[0]) {
menuList[0].classList.add('is-active');
this.isFirstLoaded = false;
}
}
}
connectedCallback() {
this.setCurrFaqlist();
}
setCurrFaqlist(){
if(this.activeMenu == 'all'){
this.currFaqlist = this.faqList;
}else{
let newList = [];
this.faqList.forEach((el, index) => {
if(el.category == this.activeMenu){
newList.push(el);
}
});
this.currFaqlist = newList;
}
console.log('this.currFaqlist : ', JSON.parse(JSON.stringify(this.currFaqlist)));
let showNum = this.currFaqlist.length < this.pagingData.showNum ? this.currFaqlist.length : this.pagingData.showNum;
this.pagingData.totalShowNum = showNum;
this.pagingData.clickNum = 0 ;
}
clickTabmenu(e){
let idx = e.currentTarget.dataset.idx;
let faqList = this.template.querySelectorAll('.m-menu');
faqList.forEach((el, index) => {
if(index == idx){
el.classList.toggle('is-active');
}else{
el.classList.remove('is-active');
}
});
let tabName = e.currentTarget.dataset.val;
this.pagingData.clickNum = 0;
this.activeMenu = tabName;
console.log('clickTabmenu > this.activeMenu : ', this.activeMenu);
this.setCurrFaqlist();
}
}1-3. CSS 작성
.cpFaq {
max-width: 1080px;
width: 100%;
margin: 0 auto;
}
.title {
font-size: 24px;
font-weight: bold;
padding: 20px 0;
}
ul.faq-menu {
display: flex;
/* gap: 10px; */
}
ul.faq-menu li.m-menu {
position: relative;
font-size: 16px;
cursor: pointer;
}
ul.faq-menu li.m-menu + .m-menu:before {content: '';position: absolute;height: 8px;width: 1px;background-color: #767676;top: 50%;transform: translateY(-50%);left: 0;}
ul.faq-menu li.m-menu + .m-menu {
margin-left: 10px;
padding-left: 10px;
}
ul.faq-menu li.m-menu.is-active {
font-weight: bold;
}
.faq-wrap {
padding-top: 40px;
}
.question {
display: flex;
justify-content: space-between;
height: 50px;
font-size: 18px;
align-items: center;
background-color: #f4f4f4;
padding: 0 20px;
cursor: pointer;
}
li.faq-con + .faq-con{
border-top: 1px solid #c0c0c0;
}
li.faq-con .answer {
background-color: #fafafa;
border-top: 1px solid #ddd;
height: 0;
padding: 0 20px;
overflow: hidden;
transition: 0.2s all ease-out;
width: 100%;
font-size: 16px;
}
li.faq-con.is-active .answer{
padding: 20px;
height: unset;
overflow: visible;
}
li.faq-con.is-active span.down {
transform: rotate(180deg);
}
/* button */
.btn-area {
text-align: center;
margin-top: 60px;
}
.btn-area button {
padding: 10px 20px;
border: 0;
border-radius: 10px;
background-color: #333;
color: #fff;
font-size: 16px;
}
p.faq-qty {
font-size: 16px;
padding-bottom: 8px;
}1-4. 화면 확인
2. 더보기 버튼 생성
(5개 이상인 경우에만 더보기 버튼이 나오도록)
2-1. html 작성
<template>
<div class="cpFaq">
<div class="title">FAQ</div>
<!-- menu -->
<ul class="faq-menu">
<template for:each={faqMenuList} for:item="item" for:index="index">
<li key={item.value} data-val={item.value} data-idx={index}
onclick={clickTabmenu} class="m-menu">
{item.label}
</li>
</template>
</ul>
<!-- -->
<div class="faq-wrap">
<p class="faq-qty">Total {currFaqlist.length}</p>
<ul>
<template for:each={pagingList} for:item="item" for:index="index">
<li key={item.id} data-idx={index} class="faq-con">
<div class="question">
<p class="q-title">[{item.cateTxt}] {item.question} </p>
<span class="down">▼</span>
</div>
<div class="answer">{item.answer}</div>
</li>
</template>
</ul>
</div>
<!-- -->
<div class="btn-area" lwc:if={showSeemoreBtn}>
<button onclick={clickShowmoreBtn}>See More ({pagingData.totalShowNum}/ {currFaqlist.length})</button>
</div>
</div>
</template>2-2. JS
import { LightningElement, track } from 'lwc';
export default class CpFaq extends LightningElement {
@track activeMenu = 'all';
@track currFaqlist = [];
@track pagingList = [];
@track pagingData = {
showNum : 5, // 한번에 보여지는 개수
totalShowNum : 5, // 현재 보여지고 있는 개수
clickNum : 0 // 몇 번 클릭되었는지
}
get showSeemoreBtn(){
let x = !(this.currFaqlist.length == this.pagingData.totalShowNum);
return x;
}
@track isFirstLoaded = true;
renderedCallback(){
if(this.isFirstLoaded){
let menuList = this.template.querySelectorAll('.m-menu');
console.log('menuList : ', menuList);
if(menuList[0]) {
menuList[0].classList.add('is-active');
this.isFirstLoaded = false;
}
}
}
connectedCallback() {
this.setCurrFaqlist();
}
setCurrFaqlist(){
if(this.activeMenu == 'all'){
this.currFaqlist = this.faqList;
}else{
let newList = [];
this.faqList.forEach((el, index) => {
if(el.category == this.activeMenu){
newList.push(el);
}
});
this.currFaqlist = newList;
}
console.log('this.currFaqlist : ', JSON.parse(JSON.stringify(this.currFaqlist)));
let showNum = this.currFaqlist.length < this.pagingData.showNum ? this.currFaqlist.length : this.pagingData.showNum;
this.pagingData.totalShowNum = showNum;
this.pagingData.clickNum = 0 ;
this.setPagingList();
}
setPagingList(){
let newList = [];
this.faqList.forEach((el, index) => {
if(index < this.pagingData.totalShowNum){
newList.push(el);
}
});
this.pagingList = newList;
console.log('this.pagingList : ', JSON.parse(JSON.stringify(this.pagingList)));
}
clickTabmenu(e){
let idx = e.currentTarget.dataset.idx;
let faqList = this.template.querySelectorAll('.m-menu');
faqList.forEach((el, index) => {
if(index == idx){
el.classList.toggle('is-active');
}else{
el.classList.remove('is-active');
}
});
let tabName = e.currentTarget.dataset.val;
this.pagingData.clickNum = 0;
this.activeMenu = tabName;
console.log('clickTabmenu > this.activeMenu : ', this.activeMenu);
this.setCurrFaqlist();
}
clickShowmoreBtn(){
this.pagingData.clickNum = this.pagingData.clickNum + 1;
let total = (this.pagingData.clickNum * 5) + 5;
let totalNum = this.currFaqlist.length < total ? this.currFaqlist.length : total;
this.pagingData.totalShowNum = totalNum;
console.log('this.pagingData : ', this.pagingData);
this.setPagingList();
}
}2-3. 화면 확인
3. 아코디언 추가
3-1. html 수정
3-2. JS 추가
qClick(e){
let idx = e.currentTarget.dataset.idx;
let faqList = this.template.querySelectorAll('.faq-con');
faqList.forEach((el, index) => {
if(index == idx){
el.classList.toggle('is-active');
}else{
el.classList.remove('is-active');
}
});
}3-3. 화면 확인
개인 공부 기록용.