20230214 steam 검색결과 불러오기 성공!!

storesearch api로 검색결과를 불러오는 건 성공했다!!ㅋㅋㅋㅋ

게임 15만개를 돌려야 하는 applist api는 미련없이 쓰레기통에 버릴 수 있게 됨

// ChannelSearchPage.tsx

const [searchValue, setSearchValue] = useState(""); // 검색어
const [searchResult, setSearchResult] = useState([]); // 검색결과

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

const SubmitSearch = () => {
    axios
      .get(
        "https://cors-anywhere.herokuapp.com/https://store.steampowered.com/api/storesearch",
        {
          params: {
            cc: "us",
            l: "en",
            term: searchValue,
            //limit : 10
          },
        }
      )
      .then((response) => {
        console.log("searchresult", response.data.items);
        setSearchResult(response.data.items);
      })
      .catch((error) => {
        console.error(error);
      })
  };

    return(
        <div>
            <GameSearchInput
                type="text"
                value={searchValue}
                onChange={handleSearch}
              /> // 검색창
              <BiSearchAlt2 className="searchIcon" onClick={SubmitSearch} /> // 검색버튼
            </SearchPageHeader>
            <SearchCount>
            '{`${searchValue}`}' 검색 결과 {} 개
            </SearchCount>
            <GameSearchList>
            {searchResult.map((game: Game) => {
              return (
                <GameChannelBlockView key={game.id}>
                  <GameChannelBlock game={game} /> // 자식컴포넌트로 props 전달
                </GameChannelBlockView>
              );
            })}
        </div>
    )

// GameChannelBlock.tsx 자식 컴포넌트

interface Props {
  game: any;
}

function GameChannelBlock({ game }: Props) {
     return (
         <div>
            <GameChannelImg src={`${game.tiny_image}`} /> // 썸네일 이미지
            <GameChannelTitle>{`${game.name}`}</GameChannelTitle> // 제목
         </div>
     )
 }

 

그런데 생각지 못한 난관이 생김.. storesearch api에는 해당 게임의 카테고리를 제공하지 않는다ㅠ

15만개의 게임을 돌릴 용기는 나지 않아서 카테고리 정보를 가져올 수 있는 방법을 찾아봤는데, screenshot을 가져오려고 일단 모셔뒀던 appdetail api에서 카테고리 정보를 얻을 수 있다는 아주 다행스러운 사실을 접함

useEffect(() => {
axios
  .get(
    "https://cors-anywhere.herokuapp.com/https://store.steampowered.com/api/appdetails",
    { params: { appids: appId, filters: "categories" } }
  )
  .then((res) => {
    console.log("appid", res);
  })
  .catch((error) => {
    console.error(error);
  });
}, []);

https://store.steampowered.com/api/appdetails?appids=APPID&filters=categories

APPID 자리에 게임의 id를 넣으면 해당게임의 카테고리가 나온다

 

그래서 이제 appId에 storesearch api에서 뽑아낸 게임 id를 넣어야 하는데 하루종일 api만 찾았더니 눈이 뻑뻑하다ㅠ

오늘은 검색 기능이 제대로 작동한다는거에 만족하는 걸로..

 

 

까먹지 말고 해야할 것

+ filter로 검색결과에서 DLC 제외하기!!!!