[React]GitHub Pages + React로 나만의 포트폴리오 만들기 - 5. 프로젝트 슬라이더 + 프로젝트 내 이미지 슬라이더

1. 프로젝트 슬라이더

- 내가 참여했던 프로젝트들을 원래는 a태그만 달아서 해당 페이지로 넘기려고 했는데, 간략한 소개가 있으면 좋을 것 같아서 프로젝트 슬라이더를 만들기로 결정!

1) 프로젝트 내용 파일 생성

- 우선, 프로젝트 내용들을 객체 배열 형태로 정리해서 projectItems라는 이름으로 저장함.

projectItems.js

export const projectItems = [
  {
    title: "🛒물품대여서비스",
    category: "개인 프로젝트",
    imageUrl: ``,
    githubLink: "",
    description:
      "",
    features:
      "",
    techStack: "",
  },
  {
    title: "💁‍♀️나만의 포트폴리오",
    category: "개인 프로젝트",
    imageUrl: ``,
    githubLink: "",
    description:
      "",
    features:
      "",
    techStack: "",
  },
];

- 이후 projectDetail에서 import해 사용.

2) 프로젝트 내용 뿌리기

ProjectDetail.js

import { projectItems } from "./ProjectItems";
 
...
 
const [currentProjectIndex, setCurrentProjectIndex] = useState(0);
 
  const handlePrevProject = () => {
    setCurrentProjectIndex((prevIndex) =>
      prevIndex === 0 ? projectItems.length - 1 : prevIndex - 1
    );
  };
 
  const handleNextProject = () => {
    setCurrentProjectIndex((prevIndex) =>
      prevIndex === projectItems.length - 1 ? 0 : prevIndex + 1
    );
  };

- 프로젝트를 기준으로 양옆 <, > 버튼을 누르면 프로젝트가 변경되는 슬라이드로 구현 예정이라, 현재 화면에 보여줄 프로젝트 인덱스를 저장할 객체 currentProjectIndex 생성.

- handlePrevProject() 함수와 handleNextProjext() 함수는 버튼을 누르면 화면에 보여줄 프로젝트의 인덱스를 바꿔주는 함수임.
- 두 함수 모두 setCurrentProjectIndex의 인자로, 새로운 상태를 반환하는 콜백 함수를 전달함(이때 prevIndex는 현재의 프로젝트 인덱스를 나타냄).
- handlePrevProject() 함수의 경우 이 값이 0이면 마지막 프로젝트로 이동하고, 그렇지 않으면 이전 프로젝트로 이동.
- handleNextProjext() 함수의 경우 prevIndex 값이 마지막 프로젝트의 인덱스를 가리키고 있다면 0번째 프로젝트로 이동하고, 그렇지 않다면 다음 프로젝트로 이동.

return (
    <div className="container project" ref={ref}>
      <h1 className="project-title">
        <a name="Project">Projects</a>
      </h1>
      <div className="project-card-wrapper">
        <div className="slide">
          <img
            src={process.env.PUBLIC_URL + "/projectImgs/left.png"}
            onClick={handlePrevProject}
          />
        </div>
        <Card className="project-card">
          <div className="project-order">
            {currentProjectIndex + 1} / {projectItems.length}
          </div>
          <h2 className="project-title">
            {projectItems[currentProjectIndex].title}
          </h2>
          <h4 style={{ textAlign: "center", width: "100%" }}>
            {projectItems[currentProjectIndex].category}
          </h4>
          <section>
            <div className="project-img"></div>
          </section>
          <section>
            <article className="info-article">
              <p className="link-wrapper">
                Github
                <br />
              </p>
              <a href={projectItems[currentProjectIndex].githubLink}>
                {projectItems[currentProjectIndex].title}
              </a>
            </article>
            <article>
              <h3>프로젝트 소개</h3>
              <p
                dangerouslySetInnerHTML={{
                  __html: projectItems[currentProjectIndex].description,
                }}
              ></p>
              <h3>주요 기능</h3>
              <p
                dangerouslySetInnerHTML={{
                  __html: projectItems[currentProjectIndex].features,
                }}
              ></p>
              <h3>기술스택</h3>
              <p>{projectItems[currentProjectIndex].techStack}</p>
            </article>
          </section>
        </Card>
        <div className="slide">
          <img
            src={process.env.PUBLIC_URL + "/projectImgs/right.png"}
            onClick={handleNextProject}
          />
        </div>
      </div>
    </div>
  );
});

- projectItems 데이터를 이용해 동적으로 데이터 화면에 뿌려주기.
- <Card className="project-card"></Card> 양 옆에 <div className="slide"></div> 내부 화살표 이미지에 각각 달아줌.

3) 이미지 슬라이드

- 원래는 프로젝트 내의 이미지도 원래는 대표 이미지 한 장만 보여주려고 했는데 이미지로 슬라이더로 보여주기로 결정함.

projectItems.js

export const projectItems = [
  {
    title: "🛒물품대여서비스",
    category: "개인 프로젝트",
    imageUrls: [
	  ...
    ],
  },
  ...
]

- 먼저 imageUrl을 배열로 선언.

ProjectDetail.js

import { projectItems } from "./ProjectItems";
 
...
 
  const [currentProjectIndex, setCurrentProjectIndex] = useState(0);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  
  const imageUrls = projectItems[currentProjectIndex].imageUrls;
  const hasMultipleImages = imageUrls.length > 1;

  const handlePrevProject = () => {
    setCurrentProjectIndex((prevIndex) =>
      prevIndex === 0 ? projectItems.length - 1 : prevIndex - 1
    );
    setCurrentImageIndex(0); // 프로젝트 변경 시 이미지 슬라이더 초기화
  };

  const handleNextProject = () => {
    setCurrentProjectIndex((prevIndex) =>
      prevIndex === projectItems.length - 1 ? 0 : prevIndex + 1
    );
    setCurrentImageIndex(0);
  };

  const handlePrevImage = () => {
    setCurrentImageIndex((prevIndex) =>
      prevIndex === 0
        ? projectItems[currentProjectIndex].imageUrls.length - 1
        : prevIndex - 1
    );
  };

  const handleNextImage = () => {
    setCurrentImageIndex((prevIndex) =>
      prevIndex === projectItems[currentProjectIndex].imageUrls.length - 1
        ? 0
        : prevIndex + 1
    );
  };
  
  ...

- currentImageIndex 상태 변수 생성해서 현재 선택된 프로젝트 내에서의 이미지 인덱스를 관리(초기값 0).
-  imageUrls 배열 변수 선언해 현재 프로젝트의 이미지를 다룰 수 있게 함.

- 이미지가 한장 뿐인 프로젝트를 고려해, 이미지가 여러 장인 프로젝트만 이미지 위에 옆으로 가기 버튼이 보이도록 설정하고 싶었음.
- hasMultipleImages 불리언 변수를 선언해 현재 프로젝트의 이미지가 두 장 이상인지 여부를 확인함.
- 그래서 이미지가 여러 장일 경우에만 슬라이더가 작동하게끔 사용.

return (
    <div className="container project" ref={ref}>
      <h1 className="project-title">
        <a name="Project">Projects</a>
      </h1>
      
      ...
      
          <section>
            <div className="project-img">
              <div className="slider">
                <img
                  src={
                    projectItems[currentProjectIndex].imageUrls[
                      currentImageIndex
                    ]
                  }
                  alt={projectItems[currentProjectIndex].title}
                />
                {hasMultipleImages && (
                  <div className="slider-controls">
                    <button onClick={handlePrevImage}>{"<"}</button>
                    <button onClick={handleNextImage}>{">"}</button>
                  </div>
                )}
              </div>
            </div>
          </section>
          <section>
            <article className="info-article">
             ...
            </article>
          </section>
        </Card>
        
        ...
        
    </div>
  );
});

- {hasMultipleImages && (...)} 의 경우, 조건부 렌더링을 통해, 현재 프로젝트에 이미지가 여러 장(hasMultipleImages) 있는 경우에만 슬라이더 컨트롤을 렌더링함.
- hasMultipleImages가 true일 때, 슬라이더 컨트롤(이미지 전환 버튼)이 화면에 나타남.

 

2. 결과 🎉