📚 진행한 공부

• 포켓몬을 선택한 포켓몬으로 변경

📖 포켓몬을 선택한 포켓몬으로 변경

전엔 포켓몬 한마리만 덩그러니 놓아져 있었는데, 팀원 분들과의 회의 후에 좋은 아이디어를 얻었다.

위에는 여러 포켓몬을 배치해 두고 아래에는 직접 조작이 가능한 포켓몬 한 마리를 둔 후에, 위에 있는 포켓몬을 클릭하면 조작 가능한 포켓몬이 변경되게끔 하면 좋겠다는 의견을 듣고 오! 이거다 싶어서 적극적으로 의견을 받아들인 후 실행에 옮겼다.

💻 src/app/(providers)/(root)/page.tsx

"use client";
import React, { useEffect, useRef, useState } from 'react';
import api from '@/lib/axios';
import Image from 'next/image';
import backgroundImage from '@/assets/background.png';

interface Pokemon {
  id: number;
  name: string;
  korean_name: string;
  height: number;
  weight: number;
  sprites: { 
    front_default: string,
    other: {
      showdown: {
        front_default: string;
      }
    }
   };
  types: { type: { name: string; korean_name: string } }[];
  abilities: { ability: { name: string; korean_name: string } }[];
  moves: { move: { name: string; korean_name: string } }[];
  x?: number;
  y?: number;
};

const MOVEMENT_AREA = { width: 600, height: 1100 };

export default function Home() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [pokemonData, setPokemonData] = useState<Pokemon[]>([]);
  const [selectedPokemon, setSelectedPokemon] = useState<Pokemon | null>(null);
  const [selectedPokemonPos, setSelectedPokemonPos] = useState({ x: 0, y: 0 });

  const moveSelectedPokemon = (dx: number, dy: number) => {
    if (!selectedPokemon) return;

    setSelectedPokemonPos(prevPos => ({
      x: prevPos.x + dx,
      y: prevPos.y + dy
    }));
  };

  const handleKeyDown = (event: KeyboardEvent) => {
    switch (event.key) {
      case 'a':
        moveSelectedPokemon(-20, 0);
        break;
      case 'd':
        moveSelectedPokemon(20, 0);
        break;
      case ' ':
        moveSelectedPokemon(0, -50);
        setTimeout(() => moveSelectedPokemon(0, 50), 500);
        break;
    }
  };

  const handlePokemonClick = (index: number) => {
    if (!selectedPokemon) return;

    const newPokemonData = [...pokemonData];
    const clickedPokemon = newPokemonData[index];

    // 이미지 교체
    const tempSprite = clickedPokemon.sprites.front_default;
    newPokemonData[index].sprites.front_default = selectedPokemon.sprites.front_default;
    setSelectedPokemon({ ...selectedPokemon, sprites: { ...selectedPokemon.sprites, front_default: tempSprite } });

    setPokemonData(newPokemonData);
  };

  useEffect(() => {
    const fetchPokemon = async () => {
      try {
        const response = await api.get<Pokemon[]>('/api/pokemons');
        const data = response.data.slice(0, 6); // 상단에 5마리, 아래 1마리만 필요

        if (data.length > 0) {
          const canvasWidth = canvasRef.current?.width || 800;
          const canvasHeight = canvasRef.current?.height || 600;
          const spacing = canvasWidth / (5 + 1);

          const updatedData = data.map((pokemon, index) => ({
            ...pokemon,
            x: index < 5 ? spacing * (index + 1) - 150 : canvasWidth / 2 - 200,
            y: index < 5 ? 50 : canvasHeight + 280,
          }));

          setPokemonData(updatedData);
          setSelectedPokemon(updatedData[5]); // 6번째 포켓몬을 선택
          setSelectedPokemonPos({ x: updatedData[5].x!, y: updatedData[5].y! });
        }
      } catch (error) {
        console.log('데이터 불러오는 도중 오류:', error);
      }
    };
    fetchPokemon();
  }, []);

  useEffect(() => {
    window.addEventListener('keydown', handleKeyDown);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [selectedPokemon]);

  return (
    <div
      className="relative h-full w-full"
      style={{
        width: MOVEMENT_AREA.width,
        height: MOVEMENT_AREA.height,
        backgroundImage: `url(${backgroundImage.src})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center'
      }}
    >
      {pokemonData.slice(0, 5).map((pokemon, idx) => (
        <div
          key={idx}
          id={`pokemon-${idx}`}
          className="absolute z-1 transition-transform duration-1000 cursor-pointer"
          style={{ transform: `translate(${pokemon.x}px, ${pokemon.y}px)` }}
          onClick={() => handlePokemonClick(idx)}
        >
          <Image src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-v/black-white/animated/${pokemon.id}.gif`} alt="포켓몬 이미지" width={100} height={100} />
        </div>
      ))}

      {selectedPokemon && (
        <div
          id="selected-pokemon"
          className="absolute z-1 transition-transform duration-1000"
          style={{ transform: `translate(${selectedPokemonPos.x}px, ${selectedPokemonPos.y}px)` }}
        >
          <Image src={selectedPokemon.sprites.front_default} alt="선택된 포켓몬 이미지" width={200} height={200} />
        </div>
      )}
    </div>
  );
}

이 중 새롭게 추가된 코드를 요약해 보자면

💻 포켓몬의 위치 상태 업데이트 코드

const [selectedPokemon, setSelectedPokemon] = useState<Pokemon | null>(null);
const [selectedPokemonPos, setSelectedPokemonPos] = useState({ x: 0, y: 0 });

// 선택된 포켓몬의 위치를 이동시키는 함수
const moveSelectedPokemon = (dx: number, dy: number) => { 
    // 선택된 포켓몬이 없다면 return
    if (!selectedPokemon) return; 
	// 선택된 포켓몬의 위치 상태 업데이트
    setSelectedPokemonPos(prevPos => ({
      // 현재 x 위치에 dx 값을 더해서 새로운 x 위치 설정
      x: prevPos.x + dx,
      // 현재 y 위치에 dy 값을 더해서 새로운 y 위치를 설정
      y: prevPos.y + dy
    }));
  };

💻 포켓몬 클릭 시 이미지 변경 처리 함수

// 포켓몬을 클릭했을 때 처리하는 함수
const handlePokemonClick = (index: number) => {
    // 선택된 포켓몬이 없는 경우 함수를 종료
    if (!selectedPokemon) return;

    // 기존 포켓몬 데이터를 복사하여 새로운 배열 생성
    const newPokemonData = [...pokemonData];
    // 클릭한 포켓몬 데이터를 가져옴
    const clickedPokemon = newPokemonData[index];

    // 이미지 교체
    // 클릭한 포켓몬의 이미지 주소를 임시로 저장
    const tempSprite = clickedPokemon.sprites.front_default;
    // 클릭한 포켓몬의 이미지를 선택된 포켓몬의 이미지로 변경
    newPokemonData[index].sprites.front_default = selectedPokemon.sprites.front_default;
    // 선택된 포켓몬의 이미지를 클릭한 포켓몬의 이미지로 변경
    setSelectedPokemon({ ...selectedPokemon, sprites: { ...selectedPokemon.sprites, front_default: tempSprite } });

    // 포켓몬 데이터를 업데이트하여 리렌더링
    setPokemonData(newPokemonData);
};

💻 포켓몬 데이터를 불러오는 비동기 함수

useEffect(() => {
    // 포켓몬 데이터를 가져오는 비동기 함수
    const fetchPokemon = async () => {
      try {
        // API로부터 포켓몬 데이터를 가져옴
        const response = await api.get<Pokemon[]>('/api/pokemons');
        // 상단에 5마리, 아래 1마리만 필요하므로 처음 6개의 데이터를 사용
        const data = response.data.slice(0, 6);

        if (data.length > 0) {
          // 캔버스의 너비와 높이를 설정, 기본값은 800과 600
          const canvasWidth = canvasRef.current?.width || 800;
          const canvasHeight = canvasRef.current?.height || 600;
          // 포켓몬을 균등하게 배치하기 위한 간격을 계산
          const spacing = canvasWidth / (5 + 1);

          // 각 포켓몬의 위치를 설정하여 업데이트된 데이터를 생성
          const updatedData = data.map((pokemon, index) => ({
            ...pokemon,
            // 상단 5마리는 가로로 나열하고, 마지막 한 마리는 중앙 아래에 배치
            x: index < 5 ? spacing * (index + 1) - 150 : canvasWidth / 2 - 200,
            y: index < 5 ? 50 : canvasHeight + 280,
          }));

          // 상태를 업데이트하여 포켓몬 데이터를 설정
          setPokemonData(updatedData);
          // 6번째 포켓몬을 선택하여 상태에 저장
          setSelectedPokemon(updatedData[5]);
          // 선택된 포켓몬의 초기 위치를 상태에 저장
          setSelectedPokemonPos({ x: updatedData[5].x!, y: updatedData[5].y! });
        }
      } catch (error) {
        console.log('데이터 불러오는 도중 오류:', error);
      }
    };
    // fetchPokemon 함수를 호출하여 포켓몬 데이터를 가져옴
    fetchPokemon();
  }, []);

📖 오늘의 결과물