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

최종 화면을 보여드리자면 비주얼 업데이트를 조금 진행했습니다.

이렇게 만들게 되면 반응형을 따로 하지 않아도 바로 모바일 형식으로 볼 수 있는 장점이 있습니다.

오늘은 네이게이션 설정과 메인 디자인을 하도록 하겠습니다.

Navigation 영역 

import styles from "./nav.module.css";
import { Link } from "react-router-dom";

function Nav() {
  return (
      <div className={styles.wrap}>
        <div className={styles.top}>
          <Link to="/">
            <h3>My Info</h3>
          </Link>
          <div className={styles.navbar}>
            <ul className={styles.menu_list}>
              <li className={styles.menu_items}>
                <Link className={styles.navname} to="/">
                  홈
                </Link>
              </li>
              <li className={styles.menu_items}>
                <Link className={styles.navname} to="/notice/notice">
                  공지사항
                </Link>
              </li>
              <li className={styles.menu_items}>
                <Link className={styles.navname} to="/guilds/guilds">
                  길드랭킹
                </Link>
              </li>
            </ul>
          </div>
        </div>
      </div>
  );
}

export default nav;

 

리액트는 라우터 설정을 해야죠

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Character from "./charaters/charaters";
import Notice from "./notice/notice"; // 이후에 진행될 공지사항 페이지
import Guilds from "./guilds/guilds"; // 이후에 진행될 길드 페이지
const Router = () => {
  return (
    <BrowserRouter basename={process.env.PUBLIC_URL}>
      <Routes>
        <Route path="/" element={<Character />} />
        <Route path="/notice/notice" element={<Notice />} />
        <Route path="/guilds/guilds" element={<Guilds />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

설정을 했으면 메인 캐릭터들의 이미지를 가져와야 하기 때문에  들어가서 임의의 캐릭터를 입력하고 excute 하면 밑에 json 형태로 나타납니다. 귀찮으신 분들은 밑에 제 데이터 사용하셔도 됩니다.

https://developer-lostark.game.onstove.com/getting-started#API-ARMORIES 

Lostark OpenAPI Developer Portal

닉네임을 입력하면

"ArmoryProfile": {
    "CharacterImage": "https://img.lostark.co.kr/armory/9/3dcffeca51ac8843bacca6f77034e1d986db5f3012f7157d0f0819dc2545f35e.png?v=20240402084757",
    "ExpeditionLevel": 300,
    "PvpGradeName": "3단",
    "TownLevel": 70,
    "TownName": "포서린",
    "Title": "카멘 The TOP10",
    "GuildMemberGrade": "일반 길드원",
    "GuildName": "X0",
    "UsingSkillPoint": 416,
    "TotalSkillPoint": 420,
    "Stats": [

여러가지 데이터들이 나오는 게 필요한 건 "CharacterImage"입니다.

    "CharacterImage": "https://img.lostark.co.kr/armory/9/3dcffeca51ac8843bacca6f77034e1d986db5f3012f7157d0f0819dc2545f35e.png?v=20240402084757",

[
  {
    "CharacterImage": "https://img.lostark.co.kr/armory/3/2cf62d73eb826b998660819ee163dca4862c6e0cf8d8b49c107b3324ae0e778e.png?v=20231219054109",
    "ServerName": "루페온",
    "CharacterLevel": 60,
    "CharacterClassName": "워로드",
    "ItemAvgLevel": "1,638.17",
    "ItemMaxLevel": "1,638.17"
  },

  {
    "CharacterImage": "https://img.lostark.co.kr/armory/5/226b6095361f02226287fa9d6619c381f22e77ce46eb90f9b6b37d0bb29e725c.png?v=20231219044343",
    "ServerName": "루페온",
    "CharacterLevel": 60,
    "CharacterClassName": "워로드",
    "ItemAvgLevel": "1,415.00",
    "ItemMaxLevel": "1,415.00"
  },
  {
    "CharacterImage": "https://img.lostark.co.kr/armory/4/d6fdd6931ea787c4550ea577a9e96a474af3b99d93538db6387ddd615b0987a4.png?v=20231218034832",
    "ServerName": "루페온",
    "CharacterLevel": 60,
    "CharacterClassName": "창술사",
    "ItemAvgLevel": "1,600.83",
    "ItemMaxLevel": "1,600.83"
  },
  {
    "CharacterImage": "https://img.lostark.co.kr/armory/4/2533be9018a0a350738a3bd8426278173e6374911ff486f41858b72a102ed5b8.png?v=20231219035206",
    "ServerName": "루페온",

    "CharacterLevel": 60,
    "CharacterClassName": "도화가",
    "ItemAvgLevel": "1,530.00",
    "ItemMaxLevel": "1,530.00"
  }
  ]

귀찮으신 분들은 제 데이터를 쓰셔도 괜찮습니다.

글이 길어져서 3-1로 오겠습니다.