React - LostArk Open-API 사용 홈페이지 만들기(3-1) 최종

너무 오랜만에 글을 작성하게 되었습니다.

 

 

위사진처럼 캐릭터 이미지가 나오게 하려면 아래 저번에 postman을 통해 가져온 json데이터에  CharacterImage입니다.

  "CharacterImage": "https://img.lostark.co.kr/armory/3/2cf62d73eb826b998660819ee163dca4862c6e0cf8d8b49c107b3324ae0e778e.png?v=20231219054109",

json 데이터 형식에 맞게 코드를 작성해 주면  아래코드와 같이 나오게 됩니다.

// swiper
import "swiper/css";
// swiper
import "swiper/css/navigation";
import React, { useState, useEffect } from "react";
// 캐릭터 css
import styles from "./charaters.module.css";
import ColorSchemesExample from "../nav/nav";
// swiepr
import { Pagination, Autoplay } from "swiper/modules";
// swiepr
import { Swiper, SwiperSlide } from "swiper/react";
// 이벤트
import Events from "../events/events";
// 캐릭터
import Characters from "./Characters.json";
// 던전
import DungeonsComponent from "../dungeons/dungeons";

function Character() {
  const [characterData, setCharacterData] = useState([]);

  useEffect(() => {
    setCharacterData(Characters);
  }, []);

  return (
    <>
      <div className={styles.wrap}>
        <ColorSchemesExample />
        <div className={styles.main}>
          <h3 className={styles.header}>보유캐릭터</h3>
          <div className={styles.lost_wrap}>
          // 스와이퍼
            <Swiper
              autoplay={{
                delay: 3000, // set the delay in milliseconds
                disableOnInteraction: false,
              }}
              loop={true}
              pagination={{
                type: "fraction",
              }}
              modules={[Pagination, Autoplay]}
              className="mySwiper"
            >
              {characterData.map((character, index) => (
                <SwiperSlide key={index}>
                  <div className={styles.characterCard}>
                  // 캐릭터 이미지
                    <img
                      src={character.CharacterImage}
                      alt={`Character : ${index}`}
                      className={styles.characterImage}
                    />
                    // 캐릭터 상세
                    <div className={styles.classinfo}>
                      <p>서버 : {character.ServerName}</p>
                      <p>클래스 : {character.CharacterClassName}</p>
                      <p>아이템 : {character.ItemAvgLevel}</p>
                    </div>
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
          </div>
          // 던전데이터
          <DungeonsComponent />
          // 이벤트
          <Events />
        </div>
      </div>
      // 푸터
      <Footer />
    </>
  );
}

export default Character;

 

swiper.js 예전에 html 버전으로도 설명한 적이 있는데 React에도 사용 가능하기에  사용했습니다. 슬라이드를 간편하게 만들어 주는 프레임 워크입니다. 아주 유용하답니다. 아래 링크를 통해 쉽게 이해할 수 있답니다.

https://frontdevpark.tistory.com/entry/Swiperjs-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C%EB%A5%BC-%EC%89%BD%EA%B2%8C-%EB%A7%8C%EB%93%A4%EA%B3%A0-%EC%93%B0%EC%9E%90

Swiper.js - 슬라이드를 쉽게 만들고 쓰자!

npm install 통해 스와이프를 다운로드해주고 적용시켜 주고

$ npm install swiper

 

위에 코드에 이렇게 작성해 주었습니다

            <Swiper
              autoplay={{
              // 3초 마다 돌아가기
                delay: 3000, // set the delay in milliseconds
                disableOnInteraction: false,
              }}
              // 무한으로 돌아가게 할거냐 아니면 False 를 작성
              loop={true}
              pagination={{
                type: "fraction", // (bullets, fraction, progressbar, custom) 종류가 있습니다.
              }}
              modules={[Pagination, Autoplay]}
              className="mySwiper"
            >

 

캐릭터 사진 밑에 금주 던전과 이벤트는 캐릭터와 같이 postman을 통해 데이터를 가져올 수 있습니다.

이로써 LostArk-Open-API 홈페이지 작성을 마치겠습니다.

전체코드가 궁금하신 분들은 아래 깃허브와 데모사이트를 통해 보실 수 있습니다.

https://bp4 sp4.github.io/LostArk-Open-API/

LostArk-Open-API

 

 

https://github.com/bp4sp4/LostArk-Open-API

GitHub - bp4sp4/LostArk-Open-API: React LostArk(Open-api) MiniProject