20230216 무한스크롤 시도 + 무한스크롤'만' 성공ㅠ

일단 내가 사용한 storesearch api는 공식문서에서 찾을 수 없는 api다

내가 못찾는건줄 알았는데 그냥 steam의 공식문서 안에 없었다..ㅋㅋㅋㅋㅋ

게임의 category(Single-player, Multi-player)가 아니라 게임의 genre(Action, Strategy)를 불러오는 게 uxui적으로 더 낫다는 생각이 들었는데, 만약 storesearch api에서 장르를 출력할 수 있다면 굳이 appdetails api를 사용할 필요가 없게 된다. 그래서 storesearch api에 사용할 수 있는 params를 알아보기 위해 공식문서에서 해당 api를 찾았고, 도저히 찾을 수가 없어서 챗gpt에게 물었더니 내가 찾는 api의 공식문서 위치를 알려줬다!! 근데

ㅎㅎ여기서 알려주는대로 공식문서에 들어가서 찾았는데 그냥 이 api자체가 없었다

공식문서에도 없는 api가 어떻게, 왜 정상적으로 작동하는 건지 아직도 이해가 안 됨

2023년 2월 11일에 출시된 호와그와트 레거시Hogwarts Legacy도 불러올 수 있는 걸 보면 배포가 중단된 api는 아닌거 같은데..?🤔

 

그리고 reponse.data.items 안에는 불러올 수 있는 genre가 없다ㅠㅋㅋㅋㅋㅋㅋ이거 제대로 된 api가 맞는건가

그치만 최근에 출시된 게임도 검색이 되는데🤔🤔🤔🤔

 

 

 

어쨌든 무한스크롤을 시도했고, 검색후 10개가 로드되고 스크롤이 화면 바닥에 닿으면 추가로 10개가 로드되도록 만드는 데 성공했다. 아래는 해당 코드!!

const [searchValue, setSearchValue] = useState("");
const [searchResult, setSearchResult] = useState<any>([]);
const [termResult, setTermResult] = useState("");

const [offset, setOffset] = useState<any>(0);

const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearchValue(e.target.value);
};

const handleTermResult = () => {
setSearchResult([]);
setTermResult(searchValue);
getGameSummary(searchValue, offset);
};

useEffect(() => {
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
// addEventListener 이벤트 추가
// removeEventListener 이벤트 제거

const handleScroll = () => {
const scrollTop = // 화면의 처음부터 ~ 현재 화면에 보이는 부분 + 현재 스크롤 위치
  (document.documentElement && document.documentElement.scrollTop) ||
  document.body.scrollTop;

const scrollHeight = // 전체 화면 길이
  (document.documentElement && document.documentElement.scrollHeight) ||
  document.body.scrollHeight;

const clientHeight = // 현재 화면에서 보이는 height
  document.documentElement.clientHeight || window.innerHeight;

const scrolledToBottom =
  Math.ceil(scrollTop + clientHeight) >= scrollHeight;

if (scrolledToBottom) {
  setOffset((prev: any) => prev + 10);
  // console.log("searchvalue", searchValue);
  getGameSummary(searchValue, offset + 10);
}
};


const getGameSummary = (searchValue: any, offset: number) => {
axios
  .get("https://store.steampowered.com/api/storesearch", {
    params: {
      cc: "us",
      l: "en",
      term: searchValue,
      start: offset, // 무한스크롤 offset을 적용할 params로 이 부분을 추가했다!!
      limit: 10,
    },
  })
  .then((response) => {
    console.log("result", response);
    response.data.items.map((game: any) => {
      getGameCategory(game);
    });
  })
  .catch((error) => {
    console.error(error);
  });
};

const getGameCategory = (gameinfo: any) => {
axios
  .get("https://store.steampowered.com/api/appdetails", {
    params: { appids: gameinfo.id, filters: "categories" },
  })
  .then((res) => {
    console.log("appid", res);
    setSearchResult((e: any) => [
      ...e,
      {
        image: gameinfo.tiny_image,
        name: gameinfo.name,
        cate: res.data[gameinfo.id].data.categories
          .map((cate: any) => cate.description)
          .slice(0, 2)
          .toString(),
      },
    ]);
  })
  .catch((error) => {
    console.error(error);
  });
};

return (
    <div
      style={{
        backgroundColor: "#192030",
        display: "flex",
        flexDirection: "column",
        width: "100%",
        height: "100%",
        minHeight: 1080,
      }}
    >
      <SearchPageHeader>
        <SteamPlusLogo />
        <GameSearchInputArea>
          <GameSearchInput
            type="text"
            value={searchValue}
            onChange={handleSearch}
          />
          <BiSearchAlt2
            className="searchIcon"
            onClick={() => {
              getGameSummary(searchValue, offset);
              handleTermResult();
            }}
          />
        </GameSearchInputArea>
      </SearchPageHeader>
      <SearchCount>
        '{`${termResult}`}' 검색 결과 {}n 개
      </SearchCount>
      <GameSearchList>
        {searchResult.map((game: any) => {
          return (
            <GameChannelBlockView key={game.id}>
              <GameChannelBlock game={game} />
            </GameChannelBlockView>
          );
        })}
      </GameSearchList>
    </div>
  );
};

그런데 문제가...발생함

검색 직후 처음으로 로드되는 게임리스트는 검색어와 연관된 결과가 맞는데, 무한스크롤로 추가로 로드되는 게임리스트들은 검색어와 전혀 관계가 없는 게임들이었다

그리고 11~20번째 게임 = 21~30번째 게임 = 31~40번째 게임...이런식으로 똑같은 게임이 반복해서 추가로 로드됨

 

스크롤이 구현은 됐는데 진짜 말그대로 스크롤만 구현이 됐다ㅠ이게 뭐람

한시간동안 화면을 봤지만 멘탈이 조금 터져서 그런가 더이상 코드가 눈에 들어오지 않아서 오류는 내일부터 본격적으로 찾아보기로..ㅎㅎ....