react-portfolio : page - home(values, faq, Testimonials)

Values 컴포넌트 만들기

data.js

export const values = [
    {
        id: 1,
        icon: <SiOpenaigym/>,
        title: "Value One",
        desc: "Placeat quidem facere dicta modi? Pariatur exercitationem illum."
    },
    {
        id: 2,
        icon: <SiOpenaigym/>,
        title: "Value Two",
        desc: "Placeat quidem facere dicta modi? Pariatur exercitationem illum."
    },
    {
        id: 3,
        icon: <SiOpenaigym/>,
        title: "Value Three",
        desc: "Placeat quidem facere dicta modi? Pariatur exercitationem illum."
    },
    {
        id: 4,
        icon: <SiOpenaigym/>,
        title: "Value Four",
        desc: "Placeat quidem facere dicta modi? Pariatur exercitationem illum."
    }
]

Home.jsx

import MainHeader from '../../components/MainHeader';
import Programs from '../../components/Programs';
import Values from '../../components/Values';
import './home.css';

const Home = () => {
  return(
    <>
      <MainHeader/>
      <Programs/>
      <Values/>
    </>
  )
}

export default Home;

Values.jsx

import Image from '../images/values.jpg';
import SectionHeader from './SectionHeader';
import Card from './Card';
import {GiCutDiamond} from 'react-icons/gi';
import {values} from '../data';

const Values = () => {
  return(
    <section className="values">
      <div className="container values__container">
          <div className="values__left">
            <div className="values__image">
              <img src={Image} alt="Values Image"/>
            </div>  
          </div>
          <div className="values__right">
            <SectionHeader icon={<GiCutDiamond/>} title="Values"/>
            <p>
              Loarm ipsum dolor sit amet consetetur, adipisicing elit.
            </p>
            <div className="values__wrapper">
              {
                values.map(({icon, title, desc}, id)=>{
                  return <Card className="aa" key={id}>
                    <span>{icon}</span>
                    <h4>{title}</h4>
                    <small>{desc}</small>
                  </Card>
                })
              }
            </div>
          </div>
      </div>
     
    </section>
  )
}

export default Values;

FAQs 컴포넌트 만들기

FAQs 안에 faq박스는 따로 컴포넌트를 만들어서 사용한다.
data.jsx

export const faqs = [
    {
        id: 1,
        question: "How often should I exercise?",
        answer: "Consectetur adipisicing elit. Non ipsa dolorem, rem consequatur eum omnis ex, fuga temporibus qui nesciunt odio aliquam commodi culpa inventore ut similique repellendus perferendis sint!"
    },
    {
        id: 2,
        question: "What time of day is best to work out?",
        answer: "Distinctio nihil blanditiis accusantium atque, quo maxime inventore eum! Cum dolorem quibusdam amet et qui. Eos, omnis beatae? Quas, est at! Molestiae quidem ab soluta exercitationem culpa nostrum iusto illum qui non a harum deserunt atque commodi at velit."
    },
    {
        id: 3,
        question: "How long should my workouts be?",
        answer: "In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content."
    },
    {
        id: 4,
        question: "Do I need to warm up before my workouts?",
        answer: "Molestiae quidem ab soluta exercitationem culpa nostrum iusto illum qui non a harum deserunt atque commodi at velit, consequatur quibusdam dignissimos cum labore possimus placeat consectetur nisi cupiditate? Qui totam est omnis dolor nobis quisquam veritatis a!"
    },
    {
        id: 5,
        question: "Should I do strength training, cardio or both?",
        answer: "Maiores fuga, cum praesentium esse laudantium! Distinctio nihil blanditiis accusantium atque, quo maxime inventore eum! Cum dolorem quibusdam amet et qui."
    },
    {
        id: 6,
        question: "Should I lift weights for strength training?",
        answer: "Quas, est at! Molestiae quidem ab soluta exercitationem culpa nostrum iusto illum qui non a harum deserunt atque commodi at velit, consequatur quibusdam dignissimos cum labore possimus placeat consectetur nisi cupiditate."
    }
];

FAQs.jsx

import SectionHeader from './SectionHeader';
import FAQ from './FAQ';
import {FaQuestion} from 'react-icons/fa';
import {faqs} from '../data';


const FAQs = () =>{
  return(
    <section className="faqs">
      <div className="container faqs__container">
        <SectionHeader icon={<FaQuestion/>} title="FAQs"/>
        <div className="faqs__wrapper">
          {
            faqs.map(({id, question, answer}, index)=>{
              return <FAQ key={id} question={question} answer={answer}/>
            })
          }
        </div>
      </div>
    </section>
  )
}

export default FAQs;

FAQ.jsx

import {useState} from 'react';
import {AiOutlinePlus} from 'react-icons/ai';
import {AiOutlineMinus} from 'react-icons/ai';

const FAQ = ({question, answer}) => {
  const [isAnswerShowing, setIsAnswerShowing] = useState(true);
  return(
    <article className="faq" onClick={()=> setIsAnswerShowing(prev => !prev) }>
       <div>
        <h4>{question}</h4>
        <button className="faq__icon">
          {
            isAnswerShowing ? <AiOutlineMinus/> : <AiOutlinePlus/> 
          }
          
        </button>
       </div>
       {
        isAnswerShowing && <p>{answer}</p>
       }
       
    </article>
   
  )
}

export default FAQ;

Testimonials 컴포넌트 만들기

data.js

export const testimonials = [
    {
        id: 1,
        name: "Diana Ayi",
        quote: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium ipsam facere ea a laboriosam sed? Quod vel voluptates a! Maxime minima cumque aut? In expedita numquam consectetur non officia iusto.",
        job: "Student",
        avatar: require("./images/avatar1.jpg")
    },
    {
        id: 2,
        name: "Daniel Vinyo",
        quote: "Harum quaerat hic consequuntur molestias repellat ad quo tenetur vitae rem, labore quisquam? Atque, assumenda rerum this and that odit harum quaerat hic praesentium quisquam quae, enim iste ipsam id repellat.",
        job: "Software Egineer",
        avatar: require("./images/avatar2.jpg")
    },
    {
        id: 3,
        name: "Edem Quist",
        quote: "Quaerat hic praesentium consequuntur molestias repellat ad quo tenetur vitae rem, labore quisquam? Atque, assumenda rerum odit harum quaerat hic praesentium quisquam quae, enim iste ipsam id repellat.",
        job: "University Lecturer",
        avatar: require("./images/avatar3.jpg")
    },
    {
        id: 4,
        name: "Grace Lavoe",
        quote: "Cupiditate deleniti sint consequuntur molestias repellat ad quo tenetur vitae rem, labore quisquam? Atque, assumenda rerum odit harum quaerat hic praesentium quisquam quae, enim iste ipsam id repellat.",
        job: "Talking Parrot",
        avatar: require("./images/avatar4.jpg")
    },
    {
        id: 5,
        name: "Nana Yaa Dankwa",
        quote: "Maxime minima cumque sit amet consectetur adipisicing elit. Praesentium ipsam facere ea a laboriosam sed? Quod vel voluptates a! Maxime minima cumque aut? In expedita numquam consectetur non officia iusto.",
        job: "Pharmacist",
        avatar: require("./images/avatar5.jpg")
    }
]

Testimonials.jsx

import {useState} from 'react';
import SectionHeader from "./SectionHeader";
import Card from '../UI/Card';
import {ImQuotesLeft} from 'react-icons/im';
import {IoIosArrowDropleftCircle, IoIosArrowDroprightCircle} from 'react-icons/io';
import {testimonials} from '../data';

const Testimonials = () => {
  const [index, setIndex] = useState(1);
  const {name, quote, job, avatar} = testimonials[index];

  const prevTestimonialHandler = () => {
    setIndex(prev=>prev-1);
    console.log(index)
    if(index <= 0){
      setIndex(testimonials.length-1)
    }
  }

  const nextTestimonialHandler = () => {
    setIndex(prev=>prev+1);
    if(index >= testimonials.length-1){
      setIndex(0);
    }
  }
  return(
    <section className="testimonials">
      <div className="container testimonials__container">
        <SectionHeader icon={<ImQuotesLeft/>} title="Testimonials"/>
        <Card className="testimonial">
          <div className="testimonial__avatar">
           <img src={avatar} alt={name}/>
          </div>
          <p className='testimonial__quote'>{`"${quote}"`}</p>
          <h5>{name}</h5>
          <small className="testimonial__title">{job}</small>
        </Card>
        <div className="testimanails__btn-container">
          <button className="testimanails__btn" onClick={prevTestimonialHandler}><IoIosArrowDropleftCircle/></button>
          <button className="testimanails__btn" onClick={nextTestimonialHandler}><IoIosArrowDroprightCircle/></button>
        </div>
      </div>
    </section>
  )
}

export default Testimonials;

코드분석

const [index, setIndex] = useState(1);
const {name, quote, job, avatar} = testimonials[index];

<Card className="testimonial">
  <div className="testimonial__avatar">
    <img src={avatar} alt={name}/>
      </div>
<p className='testimonial__quote'>{`"${quote}"`}</p>
<h5>{name}</h5>
<small className="testimonial__title">{job}</small>
</Card>

data.js 에서 testimonials 가져온 값의 index(0). 그러니깐 첫번째 요소들이 화면에 보여지게됩니다.

<button className="testimanails__btn" onClick={prevTestimonialHandler}><IoIosArrowDropleftCircle/></button>
          <button className="testimanails__btn" onClick={nextTestimonialHandler}><IoIosArrowDroprightCircle/></button>

const prevTestimonialHandler = () => {
  setIndex(prev=>prev-1);
  console.log(index)
  if(index <= 0){
    setIndex(testimonials.length-1)
  }
}

const nextTestimonialHandler = () => {
  setIndex(prev=>prev+1);
  if(index >= testimonials.length-1){
    setIndex(0);
  }
}

이전 다음버튼으로, nextTestimonialHandler 함수는, 해당 버튼을 클릭하면 setIndex의 값을 기존 값의 1씩더해줍니다.
이때 변경된 index의 값이 testimonials 갯수와 같거나, 커지게되면 setIndex 값을 0으로 줍니다. (1,2,3, 해당 값보다 같거나 커지면 0이 됩니다).
prevTestimonialHandler 함수는 위에 이야기했던 함수와 반대로, 값에 -1씩줍니다(3,2,1 해당 값보다 같거나 커진다면 testimonials 갯수-1의 값으로 바꿔줍니다.)