내일배움캠프 9주차 금요일 TIL

금일 작업

import express from "express";
import axios from "axios";
import dotenv from "dotenv";
import authMiddleware from "../middlewares/auth.middleware.js";

dotenv.config();
const router = express.Router();
const RIOT_API_KEY = process.env.RIOT_API_KEY;

/**
닉네임과 태그를 입력받아 소환사 정보를 반환하는 API
 */
router.post("/summoner-info", authMiddleware, async (req, res) => {
  const { gameName, tagLine } = req.body;

  const userId = req.user.userId; // authMiddleware에서 설정된 userId 사용
  if (!userId) {
    return res
      .status(401)
      .json({ message: "인증된 사용자 정보가 필요합니다." });
  }

  if (!gameName || !tagLine) {
    return res
      .status(400)
      .json({ message: "gameName과 tagLine은 필수입니다." });
  }

  try {
    // Step 1: Riot ID로 PUUID 가져오기
    const accountResponse = await axios.get(
      `https://asia.api.riotgames.com/riot/account/v1/accounts/by-riot-id/${gameName}/${tagLine}`,
      { headers: { "X-Riot-Token": RIOT_API_KEY } }
    );

    const { puuid } = accountResponse.data;

    // Step 2: PUUID로 소환사 정보 가져오기
    const summonerResponse = await axios.get(
      `https://kr.api.riotgames.com/lol/summoner/v4/summoners/by-puuid/${puuid}`,
      { headers: { "X-Riot-Token": RIOT_API_KEY } }
    );

    const { profileIconId, summonerLevel } = summonerResponse.data;

    // 프로필 이미지 링크 생성
    const profileIconLink = `https://raw.communitydragon.org/latest/game/assets/ux/summonericons/profileicon${profileIconId}.png`;

    // 응답 데이터
    return res.status(200).json({
      fullName: `${gameName}#${tagLine}`,
      profileIconLink,
      summonerLevel,
    });
  } catch (error) {
    console.error(
      "API 요청 중 오류 발생:",
      error.response?.data || error.message
    );
    return res
      .status(500)
      .json({ message: "API 요청 중 오류가 발생했습니다." });
  }
});

export default router;

Riot API를 사용하여 소환사 이름과 태그를 입력받아 해당 소환사의 정보를 반환하는 내용이다. 인증 미들웨어를 통해 사용자 인증을 확인한 후, Riot API에 요청하여 소환사의 PUUID와 프로필 정보를 가져와 JSON 형식으로 응답받아 유저정보를 조회.

// src/routers/profile.router.js
import express from "express";
import authMiddleware from "../middlewares/auth.middleware.js";

const router = express.Router();

router.post("/save-profile", authMiddleware, async (req, res) => {
  const {
    lolNickname,
    profileImage,
    tier,
    line,
    mostPlay1,
    mostPlay2,
    mostPlay3,
  } = req.body;

  const userId = req.user.userId; // authMiddleware에서 설정된 userId 사용
  if (!userId) {
    return res
      .status(401)
      .json({ message: "인증된 사용자 정보가 필요합니다." });
  }

  // 데이터 유효성 검사
  if (
    !lolNickname ||
    !tier ||
    !line ||
    !mostPlay1 ||
    !mostPlay2 ||
    !mostPlay3
  ) {
    return res.status(400).json({ message: "모든 필드를 입력해야 합니다." });
  }

  try {
    const userExists = await prisma.users.findUnique({
      where: { userId: userId },
    });

    if (!userExists) {
      return res.status(404).json({ message: "사용자를 찾을 수 없습니다." });
    }
    // 프로필 데이터베이스에 저장
    const newProfile = await prisma.profiles.create({
      data: {
        lolNickname,
        profileImage,
        tier,
        line,
        mostPlay1,
        mostPlay2,
        mostPlay3,
      },
    });

    res.status(201).json({
      message: "프로필이 성공적으로 생성되었습니다.",
      profile: newProfile,
    });
  } catch (error) {
    console.error("프로필 생성 중 오류 발생:", error);
    res.status(500).json({ message: "서버 오류가 발생했습니다." });
  }
});

export default router;

이후 사용자가 리그 오브 레전드 프로필 정보를 입력하여 저장하는 내용. 인증 미들웨어를 통해 사용자 인증을 확인한 후, 입력된 데이터를 유효성 검사하고 데이터베이스에 프로필 정보를 저장한 후 성공 메시지를 반환합니다.
(수정, 테스트 필요)

이후 인증미들웨어, 유저정보관련 라우터 수정 후 프론트엔드 폴더 총 5개를 설정하였다.

채팅 부분을 맏아 임시로 클라이언트 html을 구축하고 시작하다보니, 서버측 코드보다 프론트엔드 쪽을 더 많이 만지고 있는 것 같다. 그러나 그에 따른 라우터의 필요를 느끼고 직접 구축해 나가며 필요한 처리를 예전보다 더 빨리 생각할 수 있게된 것을 느꼈다.
추후 활용될지는 모르겠으나, 게임사에서 제공하는 open API를 통해 직접 정보를 다루는 경험은 인상깊었다. 평소에 방문하던 API 활용 사이트가 어떻게 구축되는지 조금 더 알게된 것 같다.
금주동안 프로젝트를 열심히 진행은 하였지만 아직 다듬을 부분은 많은 것 같다.