ContentSectionThree

 

오늘은 강의보단 개인적으로 만들고 싶었던 작업물을 만들었다.
홈페이지의 3번째 세션을 만들었고 글은 아무거나 가져온 것이기 때문에 수정할 예정이다.
1번째와 2번째 세션을 아직 지속적으로 작업중이므로 블로그에 올리기에 부끄러운 수준이라 나중에 올릴 듯 싶다.

REACT를 이욯했으며 
사용된 라이브러리는 react-icons,antd 가 있다.

ContentSectionThree.jsx

import React, { useState, useEffect } from 'react';
import { Layout } from 'antd';
import { FaDiscord, FaBloggerB, FaEnvelope } from 'react-icons/fa';
import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
import './ContentSectionThree.scss';

const { Footer, Content } = Layout;

const images = [
    {
        url: '그림URL',
        title: "Lossless Youths",
        description: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim',
        website: 'https://united-prompt.tistory.com/'
    },

];

const ContentSectionThree = () => {
    const [currentIndex, setCurrentIndex] = useState(0);
    const openWebsite = (url) => {
        window.open(url, '_blank', 'noopener,noreferrer');
    };
    const goToNext = () => {
        setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
    };

    const goToPrev = () => {
        setCurrentIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length);
    };

    return (
        <div className="content-section-three">
            <div className="image-slider">
                {images.map((image, index) => (
                    <div
                        key={index}
                        className={`slide ${index === currentIndex ? 'active' : ''}`}
                        style={{ backgroundImage: `url(${image.url})` }}
                    >
                        {index === currentIndex && (
                            <div className="slide-content">
                                <h2 className="slide-title">{image.title}</h2>
                                <p className="slide-description">{image.description}</p>
                                <button onClick={() => openWebsite(image.website)} className="slide-read-more">Read More</button>
                            </div>
                        )}
                    </div>
                ))}
            </div>

            <Footer className="footer">
                <div className="contact-info">
                    <a href="https://discordapp.com/users/yourid" target="_blank" rel="noopener noreferrer">
                        <FaDiscord className="icon" />
                    </a>
                    <a href="https://united-prompt.tistory.com" target="_blank" rel="noopener noreferrer">
                        <FaBloggerB className="icon" />
                    </a>
                    <a href="mailto:your-email@example.com">
                        <FaEnvelope className="icon" />
                    </a>
                </div>
                United Prompt ©{new Date().getFullYear()} Made by useSword
            </Footer>


            <div className="slider-controls">
                <button className="control-button" onClick={goToPrev}>
                    <FaArrowLeft />
                </button>
                <button className="control-button" onClick={goToNext}>
                    <FaArrowRight />
                </button>
            </div>
        </div>
    );
};

export default ContentSectionThree;

 

ContentSectionThree.scss

z-index는 다른 세션과 겹칠수도 있기 때문에 각 세션마다 1~3,4~6,7~11까지 주었다.

.content-section-three {
    position: relative;
    width: 100%;
    height: 84vh;
    z-index: 7;

.image-slider {
    width: 100%;
    height: 100%;
    position: relative;

    .slide {
        width: 100%;
        height: 100%;
        position: absolute;
        background-size: cover;
        background-position: center;
        transition: opacity 0.5s ease;
        opacity: 0;
        &.active {
            opacity: 1;
        }
        .slide-content {
            top: 20%; // Adjust as needed to move the content up
            left: 5%;
            position: absolute;
            padding: 2rem;

            width: 30%;
            .slide-title {
                font-family: "Lemon", serif;
                font-family: "Manrope", sans-serif;
                font-family: "Oswald", sans-serif;
                font-family: "Playfair Display", serif;
                font-size: 3rem;
                margin-bottom: 1rem;
                text-align: left;
            }
            .slide-description {
                font-size: 1rem;
                margin-bottom: 3rem;
                white-space: normal;
                text-align: left;
            }
        }
    }
}
.slider-controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    .control-button {
        background: none;
        border: none;
        cursor: pointer;
        margin: 0 10px;
        color: #fff;
        padding-bottom: 10%;

        &:hover {
            color: #ccc;
        }
        .icon {
            width: 30px;
            height: 30px;
        }
    }
}

.footer {
    text-align: center;

    flex: 0 0 10%;
    background: #f0f0f0;
    z-index: 7;

    .contact-info {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        padding-bottom: 10px;
        .icon {
            font-size: 24px;
            color: #333;

            &:hover {
                color: #007bff;
            }
        }
    }
}

.slide-read-more {
    position: absolute;
    top: 70%;
    left: 10%;
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
    margin-top: 4rem;
    padding: 1rem 2rem;
    border-radius: 25px;
    font-size: 1.2rem;
    z-index: 20;
    pointer-events: all;
    &:hover {
        background-color: #fff;
        color: #000;
    }
}
// 반응형 미디어 쿼리 설정
@media (max-width: 768px) {
    .content-section-three {
        .slider {
            .item {
                height: 40vh;
            }
        }
    }
}
}

 

 

코드를 작성할 떄 문제점이 하나 발생했다.

리스트인 images에서 여러개의 사진들을 사용할 경우 마지막의 사진에서만 제목,설명,버튼이 상호작용만 가능했다.
난 우선 버튼만 필요했기 때문에 scss에서 상위 계층으로 옮겼더니 해결되었다.