limelee85 / poke_list

포켓몬 타입

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

poke_list's Issues

만들것

포켓몬

1. 타입 검색 영역

• 임의 타입 선택 가능한 버튼 추가
• 포켓몬 검색 가능(pokeapiv2)
• poke_list에 타입 값 추가하여 타입과 이미지를 먼저 뜨게하고 이후 pokeapiv2 포켓몬 정보를 추가하도록 수정
• attack type 영역에 추가된 타입을 클릭할 시 타입 삭제
• 이미지 버튼화/ 드래그 드랍 가능
  • 버튼 선택시 포켓몬 정보 입력가능한 모달창 팝업
  • 마이엔트리에 드래그 드랍 시 타입 검색 영역에서 설정했던 정보를 그대로 전달

2. 상성 결과 영역

• 타입 상성 결과 출력
• 2배 이상만 출력하기

3. 마이엔트리 영역

• 마이엔트리 영역 추가
• 드래그 드랍 시 마이엔트리에 저장 (localStorarge)

4. 포켓몬 정보 통일화

• 포켓몬 정보(디폴트값) : 이름/레벨/종족값/개체값(V)/노력치(0)/성격(무보정성격)/지닌물건(없음)/특성(기본특성)
• 테라스탈에 따른 타입 계산식
• 특성에 따른 변화 알고리즘 만들기(데미지 공식 계산 중 특성마다 다른 데미지 배수, 적용 시점 등을 하나의 배열에 저장하는 방법)
  • 특성에 따라 타입이 바뀌는 특성

검색창에 디바운싱 적용

상황

• 현재는 텍스트 입력 후 바로 결과가 표시되도록 함
• 빠른 타이핑으로 인한 불필요한 연산을 줄여 UI 렌더링을 최적화 함

예제 1

• lodash 사용
• debounce: 마지막 호출 후 일정 시간이 지나야 작동하도록 함
• 주간 다운로드가 5천만이지만 마지막 업데이트가 3년 전이라는 게 마음에 걸림

import React, { useState } from 'react';
import { debounce } from 'lodash';

const SearchComponent = () => {
  const [value, setValue] = useState('');

  const handleChange = debounce((eventValue) => {
    console.log(`Searching for: ${eventValue}`);
    // 검색 로직을 실행합니다.
  }, 500); // 500ms 디바운싱

  return (
    <input
      type="text"
      value={value}
      onChange={(e) => {
        setValue(e.target.value);
        handleChange(e.target.value);
      }}
    />
  );
};

예제 2

• 순수 JavaScript
• 출처: https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore?tab=readme-ov-file#_debounce

import React, { useState, useEffect, useCallback } from 'react';

// debounce 함수 정의
function debounce(func, wait, immediate = false) {
  let timeout;
  return function() {
    const context = this, args = arguments;
    const later = () => {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

function SearchComponent() {
  const [query, setQuery] = useState('');

  // 검색 로직을 실행하는 함수
  const fetchSearchResults = (query) => {
    console.log('Fetching search results for:', query);
    // 검색 결과를 불러오는 로직을 여기에 구현합니다.
  };

  // debounce를 사용하여 fetchSearchResults 함수를 감싸줍니다.
  // useCallback을 사용하여 함수가 재생성되는 것을 방지합니다.
  const debouncedSearch = useCallback(debounce((searchQuery) => fetchSearchResults(searchQuery), 500), []);

  useEffect(() => {
    if (query.length > 0) {
      debouncedSearch(query);
    }
  }, [query, debouncedSearch]);

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
    </div>
  );
}

export default SearchComponent;

세대별 타입 및 종족값 출력 이슈

기존 포켓몬 검색 영역에 매핑할 리스트

{
  name: {
    ko: "",
    en: ""
  },
  type: ["",""]
  habcds: {
    1: 0, 2: 0,
  },
  image: {
   normal: ""
   shine: ""
   }
}

---

기존 리스트로 검색할 시 AS-IS 및 TO-BE

as-is	issue	to-be
1. name (ko, en)	api를 통해 스크래핑 가능	세대별로 리스트 생성
2. type	출시 후 타입이 변화한 포켓몬 존재 (ex : 픽시=노말-> 페어리) poke api에서 past_types이라는 key를 통해 스크래핑 가능 세대 선택 시 타입이 변화해야 함	showdown calc 의 species.js에서 생성한 Species 오브젝트에서 타입 정보를 가져옴
3. habcds	출시 후 종족값이 변화한 포켓몬 존재 1) 1세대에서는 특방/특공 수치가 특수 수치로 되어있었음 2) 밸런스를 위해 수치 자체가 변경된 포켓몬이 있음 3) poke api에서 종족값 변경 이력 확인 불가 세대 선택 시 변화된 종족값이 반영되야함.	showdown calc 의 species.js에서 생성한 Species 오브젝트에서 타입 정보를 가져옴
4. image	api를 통해 스크래핑 가능	세대별로 리스트 생성

---

제안

1. 각 세대별로 이름 및 스프라이트가 반영된 리스트 생성

// 1세대 포켓몬 리스트 예시 (1 ~ 151) 
RBY_list = [
    {
        "name": {
            "ko": "캐이시",
            "en": "Abra"
        },
        "image": {
            "default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/63.png",
            "shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/63.png"
        }
    },
   ...
    {
        "name": {
            "ko": "주뱃",
            "en": "Zubat"
        },
        "image": {
            "default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/41.png",
            "shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/41.png"
        }
    }
]

// 2세대에 추가된 포켓몬 리스트 예시 (152 ~ 251)
GSC_list_PATCH =[
    {
        "name": {
            "ko": "에이팜",
            "en": "Aipom"
        },
        "image": {
            "default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/190.png",
            "shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/190.png"
        }
    },
...
    {
        "name": {
            "ko": "왕자리",
            "en": "Yanma"
        },
        "image": {
            "default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/193.png",
            "shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/193.png"
        }
    }
]

2. 쇼다운 계산기의 포켓몬 정보를 가져옴
   Showdown Calculator species.js
   
   화면 내 선택한 세대 정보(gen)에 따라 Species에 영문명, 타입, 종족값, 특성 등을 반영한 오브젝트 생성

/calc/data/species.js
var RBY = {
    Abra: {
        types: ['Psychic'],
        bs: { hp: 25, at: 20, df: 15, sp: 90, sl: 105 },
        weightkg: 19.5,
        nfe: true
    },
   ...
    Zubat: {
        types: ['Poison', 'Flying'],
        bs: { hp: 40, at: 45, df: 35, sp: 55, sl: 40 },
        weightkg: 7.5,
        nfe: true
    }
};

3. 자동 검색 영역에서 포켓몬 이름 입력 시 이름에 해당하는 1번 및 2번 오브젝트를 병합하여 포켓몬 정보 및 타입 영역에 출력
   
   예시)
   

검색 결과에 해당 포켓몬의 진화체 표시

진화 종류

• 영구 진화
• 일시 진화

진화 조건

• 레벨
  • 랜덤
• 성별
• 리전
• 아이템
• 메가진화
• 거다이맥스
• 폼 체인지

레이아웃 정의 w.figma

아래 피그마에 레이아웃을 정의함

바로가기 > figma

검색 오버레이에서 화살표 위아래 방향키를 눌러도 스크롤이 움직이지 않음

fix: `next.config.js`에서 `images.domains` 대신 `images.remotePatterns` 사용하기

에러 내용

• 아래 메시지가 콘솔 로그에 표시됨.
• images.domains는 더 이상 사용되지 않으므로, 대신 images.remotePatterns를 사용하라는 내용.
• 참고: stackoverflow

The "images.domains" configuration is deprecated. Please use "images.remotePatterns" configuration instead.

해결법

수정 전

// next.config.js

images: {
  domains: ["raw.githubusercontent.com"],
}

수정 후

// next.config.js

images: {
  remotePatterns: [
    {
      protocol: "https",
      hostname: "raw.githubusercontent.com",
      port: "",
      pathname: "/**",
    },
  ],
},

검색창 무한 스크롤 적용

남청의 원반 포켓몬 반영 안됨.

npm @smogon/calc v0.8.1에 남청의 원반 추가 포켓몬이 반영되어 있지 않아 주석처리함.
남청의 원반 포켓몬이 반영되면 주석을 지우거나 git 수동 컴파일 후 반영 필요함.

poke_list/src/app/poke_data.js

Lines 10719 to 10730 in 5ca5014

	/* @smogon/calc SV2DLC issue
	{
	"name": {
	"ko": "꿰뚫는화염",
	"en": "Gouging Fire"
	},
	"image": {
	"default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1020.png",
	"shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/1020.png"
	}
	},
	*/

포켓몬 검색 후 타입 계산 결과가 출력되지 않는 포케몬 존재

원인

• @pkmn/data에서 정보를 가져오지 못함

export function createGenList(gens, genNum) {
  const result = [];
  const genList = GetPATCH(genNum);
  // genList로 순회 >> @pkmn/data에서 가져온 포켓몬 정보 중에 showdown 자작 포켓몬 있음
  for (const key in genList) {
    result.push(
      Object.assign(
        {},
        gens.get(genNum).species.get(genList[key].name.en),
        genList[key],
      ),
    );
  }

  result.sort((a, b) => {
    if (a.name.ko < b.name.ko) {
      return -1;
    }
    if (a.name.ko > b.name.ko) {
      return 1;
    }
    return 0;
  });

  return result;
}

포켓몬 목록

• 개굴닌자
• 거다이맥스

VGC CALC 분석

{
"name": "Abomasnow",
"type1": "Grass",
"type2": "Fire",
"tera_type": "Water",
"level": 50,
"maxHP": 197,
"curHP": 197,
"HPEVs": 252,
"isDynamax": false,
"isTerastalize": false,
"rawStats": {
"at": 87,
"df": 95,
"sa": 154,
"sd": 105,
"sp": 85
},
"boosts": {
"at": 0,
"df": 0,
"sa": 0,
"sd": 0,
"sp": 0
},
"stats": {
"at": 87,
"df": 95,
"sa": 154,
"sd": 105,
"sp": 85
},
"evs": {
"at": 0,
"df": 0,
"sa": 220,
"sd": 0,
"sp": 36
},
"nature": "Modest",
"ability": "Snow Warning",
"abilityOn": false,
"supremeOverlord": 0,
"highestStat": "sa",
"item": "Focus Sash",
"status": "Healthy",
"toxicCounter": 0,
"moves": [
{
"bp": 110,
"type": "Ice",
"category": "Special",
"hasSecondaryEffect": true,
"isSpread": true,
"zp": 185,
"isWind": true,
"name": "Blizzard",
"isCrit": false,
"isZ": false,
"hits": 1,
"isDouble": 0,
"tripleHits": 0,
"combinePledge": 0,
"timesAffected": 0,
"painMax": false
},
{
"bp": 90,
"type": "Grass",
"category": "Special",
"hasSecondaryEffect": true,
"isBullet": true,
"zp": 175,
"name": "Energy Ball",
"isCrit": false,
"isZ": false,
"hits": 1,
"isDouble": 0,
"tripleHits": 0,
"combinePledge": 0,
"timesAffected": 0,
"painMax": false
},
{
"type": "Ice",
"category": "Status",
"name": "Aurora Veil",
"bp": 0,
"isCrit": false,
"isZ": false,
"hits": 1,
"isDouble": 0,
"tripleHits": 0,
"combinePledge": 0,
"timesAffected": 0,
"painMax": false
},
{
"bp": 90,
"type": "Ground",
"category": "Special",
"hasSecondaryEffect": true,
"zp": 175,
"name": "Earth Power",
"isCrit": false,
"isZ": false,
"hits": 1,
"isDouble": 0,
"tripleHits": 0,
"combinePledge": 0,
"timesAffected": 0,
"painMax": false
}
],
"weight": 135.5
}

fix: 배포 환경에서 console.log 삭제

구현 방법

• 참조: Next.js 공식 문서
• 환경변수를 이용하여 배포 환경에서만 console.log가 표시되지 않도록 설정

// next.config.js

module.exports = {
  compiler: {
    removeConsole: true,
    // removeConsole: process.env.NODE_ENV === "production"
  },
}

Vercel에서 환경변수 설정하기

• https://vercel.com/docs/projects/environment-variables