ewhk9887/korean_code_reviews_from_github huggingface dataset:
@@ -0,0 +1,66 @@
+import { useQuery } from "@tanstack/react-query";
+import { getCountries } from "../api/countryAPI";
+import CountryCard from "./CountryCard";
+import { useEffect } from "react";
+import { Country } from "../types/country";
+import useCountryStore from "../zustand/countryStore";
+
+const CountryList = ({ isDone }: { isDone: boolean }) => {
+  const { countries, setCountries, favoriteCountries, setFavoriteCountries } =
+    useCountryStore();
+
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["countries"],
+    queryFn: getCountries,
+  });
+
+  const handleToggleCountry = (country: Country) => {
+    if (isDone) {
+      setFavoriteCountries(
+        favoriteCountries.filter((toggle) => toggle.cca3 !== country.cca3)
+      );
+      setCountries([country, ...countries]);
+    } else {
+      setCountries(countries.filter((toggle) => toggle.cca3 !== country.cca3));
+      setFavoriteCountries([country, ...favoriteCountries]);
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      setCountries(data);
+    }
+  }, [data, setCountries]);
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center">
+        <h1 className="text-4xl">로딩중입니다!!</h1>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex justify-center items-center">
+        <h1 className="text-4xl">에러가 발생했습니다!</h1>
+      </div>
+    );
+  }
+
+  const isDoneCountries = isDone ? favoriteCountries : countries;
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 px-8">
+      {isDoneCountries.map((country) => (
+        <CountryCard
+          key={country.cca3}
+          country={country}
+          handleToggleCountry={handleToggleCountry}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default CountryList;

리뷰: countryList 컴포넌트를 보니, 단순 UI만 제공하는 것이 아닌 핵심 로직들을 전부 다 가지고 있는 것으로 보입니다.
파일명으로만 보았을땐, UI 역할만 하고 있을 것으로 추측되었는데 재활용 가능한 컴포넌트는 아닌 것 같아서요~
개인적인 의견으로는 List에는 단순 내려준 데이터를 노출하게만 하고, 비즈니스 로직은 위에서 전달해주는 것이 어떤지 코멘트 드립니다!
@@ -0,0 +1,15 @@
+import axios from "axios";
+import { Country } from "../types/country";
+
+export const countryApi = axios.create({
+  baseURL: "https://restcountries.com/v3.1",
+});
+
+export const getCountries = async (): Promise<Country[]> => {
+  try {
+    const response = await countryApi.get("/all");
+    return response.data;
+  } catch (error) {
+    throw new Error();
+  }
+};

리뷰: 별로 중요한 것은 아니지만 ㅎㅎ
throw new Error() 요기에 뭔가를 넣어주시면 좋아요
```javascript
throw new Error(error.response?.data.message);
```
이런식으로요 ㅎㅎ
@@ -0,0 +1,66 @@
+import { useQuery } from "@tanstack/react-query";
+import { getCountries } from "../api/countryAPI";
+import CountryCard from "./CountryCard";
+import { useEffect } from "react";
+import { Country } from "../types/country";
+import useCountryStore from "../zustand/countryStore";
+
+const CountryList = ({ isDone }: { isDone: boolean }) => {
+  const { countries, setCountries, favoriteCountries, setFavoriteCountries } =
+    useCountryStore();
+
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["countries"],
+    queryFn: getCountries,
+  });
+
+  const handleToggleCountry = (country: Country) => {
+    if (isDone) {
+      setFavoriteCountries(
+        favoriteCountries.filter((toggle) => toggle.cca3 !== country.cca3)
+      );
+      setCountries([country, ...countries]);
+    } else {
+      setCountries(countries.filter((toggle) => toggle.cca3 !== country.cca3));
+      setFavoriteCountries([country, ...favoriteCountries]);
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      setCountries(data);
+    }
+  }, [data, setCountries]);
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center">
+        <h1 className="text-4xl">로딩중입니다!!</h1>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex justify-center items-center">
+        <h1 className="text-4xl">에러가 발생했습니다!</h1>
+      </div>
+    );
+  }
+
+  const isDoneCountries = isDone ? favoriteCountries : countries;
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 px-8">
+      {isDoneCountries.map((country) => (
+        <CountryCard
+          key={country.cca3}
+          country={country}
+          handleToggleCountry={handleToggleCountry}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default CountryList;

리뷰: 필터를 하기 위한 의도로 setCountries 를 만들어 값을 변경하고 있는 것으로 보입니다!
favoriteCountries 라는 상태를 따로 지니고 있기에 countries를 변경하는 것보다 아래에서 filter만 해주는 로직으로 변경하는 것이 어떨지 제안 드립니다!
@@ -0,0 +1,66 @@
+import { useQuery } from "@tanstack/react-query";
+import { getCountries } from "../api/countryAPI";
+import CountryCard from "./CountryCard";
+import { useEffect } from "react";
+import { Country } from "../types/country";
+import useCountryStore from "../zustand/countryStore";
+
+const CountryList = ({ isDone }: { isDone: boolean }) => {
+  const { countries, setCountries, favoriteCountries, setFavoriteCountries } =
+    useCountryStore();
+
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["countries"],
+    queryFn: getCountries,
+  });
+
+  const handleToggleCountry = (country: Country) => {
+    if (isDone) {
+      setFavoriteCountries(
+        favoriteCountries.filter((toggle) => toggle.cca3 !== country.cca3)
+      );
+      setCountries([country, ...countries]);
+    } else {
+      setCountries(countries.filter((toggle) => toggle.cca3 !== country.cca3));
+      setFavoriteCountries([country, ...favoriteCountries]);
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      setCountries(data);
+    }
+  }, [data, setCountries]);
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center">
+        <h1 className="text-4xl">로딩중입니다!!</h1>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex justify-center items-center">
+        <h1 className="text-4xl">에러가 발생했습니다!</h1>
+      </div>
+    );
+  }
+
+  const isDoneCountries = isDone ? favoriteCountries : countries;
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 px-8">
+      {isDoneCountries.map((country) => (
+        <CountryCard
+          key={country.cca3}
+          country={country}
+          handleToggleCountry={handleToggleCountry}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default CountryList;

리뷰: 이것도 아주 사소한 거지만 ㅎㅎ
isDone 보다 isFavorite 이 알기 쉬울것 같아용ㅎㅎ
@@ -0,0 +1,66 @@
+import { useQuery } from "@tanstack/react-query";
+import { getCountries } from "../api/countryAPI";
+import CountryCard from "./CountryCard";
+import { useEffect } from "react";
+import { Country } from "../types/country";
+import useCountryStore from "../zustand/countryStore";
+
+const CountryList = ({ isDone }: { isDone: boolean }) => {
+  const { countries, setCountries, favoriteCountries, setFavoriteCountries } =
+    useCountryStore();
+
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["countries"],
+    queryFn: getCountries,
+  });
+
+  const handleToggleCountry = (country: Country) => {
+    if (isDone) {
+      setFavoriteCountries(
+        favoriteCountries.filter((toggle) => toggle.cca3 !== country.cca3)
+      );
+      setCountries([country, ...countries]);
+    } else {
+      setCountries(countries.filter((toggle) => toggle.cca3 !== country.cca3));
+      setFavoriteCountries([country, ...favoriteCountries]);
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      setCountries(data);
+    }
+  }, [data, setCountries]);
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center">
+        <h1 className="text-4xl">로딩중입니다!!</h1>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex justify-center items-center">
+        <h1 className="text-4xl">에러가 발생했습니다!</h1>
+      </div>
+    );
+  }
+
+  const isDoneCountries = isDone ? favoriteCountries : countries;
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 px-8">
+      {isDoneCountries.map((country) => (
+        <CountryCard
+          key={country.cca3}
+          country={country}
+          handleToggleCountry={handleToggleCountry}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default CountryList;

리뷰: 동일합니다!
@@ -0,0 +1,18 @@
+import CountryList from "../components/CountryList";
+
+const Home = () => {
+  return (
+    <>
+      <h1 className="flex justify-center items-center mt-8 mb-8 text-2xl font-bold">
+        Favorite Countries
+      </h1>
+      <CountryList isDone={true} />
+      <h1 className="flex justify-center items-center mb-8 text-3xl font-bold">
+        Countries
+      </h1>
+      <CountryList isDone={false} />
+    </>
+  );
+};
+
+export default Home;

리뷰: h1이 너무 많습니다! 페이지에 하나만 존재해야합니다.
하지만 코드에서도 혼란을 야기할 수 있는 헤딩태그를 지양하는 것을 제안드립니다 :)
@@ -0,0 +1,15 @@
+import axios from "axios";
+import { Country } from "../types/country";
+
+export const countryApi = axios.create({
+  baseURL: "https://restcountries.com/v3.1",
+});
+
+export const getCountries = async (): Promise<Country[]> => {
+  try {
+    const response = await countryApi.get("/all");
+    return response.data;
+  } catch (error) {
+    throw new Error();
+  }
+};

리뷰: 제가 이번에 스스로 써본건 처음이라 잘 몰랐는데 은님 코드 보면서 깨달았습니다 감삼댜
@@ -0,0 +1,66 @@
+import { useQuery } from "@tanstack/react-query";
+import { getCountries } from "../api/countryAPI";
+import CountryCard from "./CountryCard";
+import { useEffect } from "react";
+import { Country } from "../types/country";
+import useCountryStore from "../zustand/countryStore";
+
+const CountryList = ({ isDone }: { isDone: boolean }) => {
+  const { countries, setCountries, favoriteCountries, setFavoriteCountries } =
+    useCountryStore();
+
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["countries"],
+    queryFn: getCountries,
+  });
+
+  const handleToggleCountry = (country: Country) => {
+    if (isDone) {
+      setFavoriteCountries(
+        favoriteCountries.filter((toggle) => toggle.cca3 !== country.cca3)
+      );
+      setCountries([country, ...countries]);
+    } else {
+      setCountries(countries.filter((toggle) => toggle.cca3 !== country.cca3));
+      setFavoriteCountries([country, ...favoriteCountries]);
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      setCountries(data);
+    }
+  }, [data, setCountries]);
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center">
+        <h1 className="text-4xl">로딩중입니다!!</h1>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex justify-center items-center">
+        <h1 className="text-4xl">에러가 발생했습니다!</h1>
+      </div>
+    );
+  }
+
+  const isDoneCountries = isDone ? favoriteCountries : countries;
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 px-8">
+      {isDoneCountries.map((country) => (
+        <CountryCard
+          key={country.cca3}
+          country={country}
+          handleToggleCountry={handleToggleCountry}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default CountryList;

리뷰: 아마 공부를 위해서 하신 듯 합니다만..!
zustand 스토어에 countries 와 favoriteCountries 가 있고 실제로 
```javascript
const isDoneCountries = isDone ? favoriteCountries : countries;
```
이런 부분에서도 useQuery 의 data 를 따로 쓰지는 않으니, 이런 경우라면 tanstack을 안쓰는 방향도 있을 것 같습니다~
물론 공부용이기 때문에 무시하셔도 됩니다 ^^;;
@@ -0,0 +1,28 @@
+import { Country } from "../types/country";
+
+const CountryCard = ({
+  country,
+  handleToggleCountry,
+}: {
+  country: Country;
+  handleToggleCountry: (country: Country) => void;
+}) => {
+  return (
+    <div
+      className="flex flex-col border rounded gap-2 px-4"
+      onClick={() => handleToggleCountry(country)}
+    >
+      <div className="flex justify-center mb-2">
+        <img
+          src={country.flags.svg}
+          alt={`${country.name.common} flag`}
+          className="w-32 h-20"
+        />
+      </div>
+      <h2>{country.name.common}</h2>
+      <p>{country.capital}</p>
+    </div>
+  );
+};
+
+export default CountryCard;

리뷰: 아 그냥..h1밑에 하위로 있다 생각해서 아무 생각없이 h2를 쓴겁니다.. 그렇군여.. html css에 대해서 따로 공부를 안하고 필요할 때마다 그냥 그 때 그때 쓰다보니 이런 부분이 아직 많이 미흡한듯하네여 후...
@@ -0,0 +1,66 @@
+import { useQuery } from "@tanstack/react-query";
+import { getCountries } from "../api/countryAPI";
+import CountryCard from "./CountryCard";
+import { useEffect } from "react";
+import { Country } from "../types/country";
+import useCountryStore from "../zustand/countryStore";
+
+const CountryList = ({ isDone }: { isDone: boolean }) => {
+  const { countries, setCountries, favoriteCountries, setFavoriteCountries } =
+    useCountryStore();
+
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["countries"],
+    queryFn: getCountries,
+  });
+
+  const handleToggleCountry = (country: Country) => {
+    if (isDone) {
+      setFavoriteCountries(
+        favoriteCountries.filter((toggle) => toggle.cca3 !== country.cca3)
+      );
+      setCountries([country, ...countries]);
+    } else {
+      setCountries(countries.filter((toggle) => toggle.cca3 !== country.cca3));
+      setFavoriteCountries([country, ...favoriteCountries]);
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      setCountries(data);
+    }
+  }, [data, setCountries]);
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center">
+        <h1 className="text-4xl">로딩중입니다!!</h1>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex justify-center items-center">
+        <h1 className="text-4xl">에러가 발생했습니다!</h1>
+      </div>
+    );
+  }
+
+  const isDoneCountries = isDone ? favoriteCountries : countries;
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 px-8">
+      {isDoneCountries.map((country) => (
+        <CountryCard
+          key={country.cca3}
+          country={country}
+          handleToggleCountry={handleToggleCountry}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default CountryList;

리뷰: 오오 같은 생각입니다~~
@@ -0,0 +1,66 @@
+import { useQuery } from "@tanstack/react-query";
+import { getCountries } from "../api/countryAPI";
+import CountryCard from "./CountryCard";
+import { useEffect } from "react";
+import { Country } from "../types/country";
+import useCountryStore from "../zustand/countryStore";
+
+const CountryList = ({ isDone }: { isDone: boolean }) => {
+  const { countries, setCountries, favoriteCountries, setFavoriteCountries } =
+    useCountryStore();
+
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["countries"],
+    queryFn: getCountries,
+  });
+
+  const handleToggleCountry = (country: Country) => {
+    if (isDone) {
+      setFavoriteCountries(
+        favoriteCountries.filter((toggle) => toggle.cca3 !== country.cca3)
+      );
+      setCountries([country, ...countries]);
+    } else {
+      setCountries(countries.filter((toggle) => toggle.cca3 !== country.cca3));
+      setFavoriteCountries([country, ...favoriteCountries]);
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      setCountries(data);
+    }
+  }, [data, setCountries]);
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center">
+        <h1 className="text-4xl">로딩중입니다!!</h1>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex justify-center items-center">
+        <h1 className="text-4xl">에러가 발생했습니다!</h1>
+      </div>
+    );
+  }
+
+  const isDoneCountries = isDone ? favoriteCountries : countries;
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 px-8">
+      {isDoneCountries.map((country) => (
+        <CountryCard
+          key={country.cca3}
+          country={country}
+          handleToggleCountry={handleToggleCountry}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default CountryList;

리뷰: 맞는 말씀입니다 훨씬 좋겟군여
@@ -0,0 +1,18 @@
+import CountryList from "../components/CountryList";
+
+const Home = () => {
+  return (
+    <>
+      <h1 className="flex justify-center items-center mt-8 mb-8 text-2xl font-bold">
+        Favorite Countries
+      </h1>
+      <CountryList isDone={true} />
+      <h1 className="flex justify-center items-center mb-8 text-3xl font-bold">
+        Countries
+      </h1>
+      <CountryList isDone={false} />
+    </>
+  );
+};
+
+export default Home;

리뷰: h1태그는 페이지당 1개만 써야하는지 몰랐네여... 명심하겠습니당
@@ -0,0 +1,15 @@
+import axios from "axios";
+import { Country } from "../types/country";
+
+export const countryApi = axios.create({
+  baseURL: "https://restcountries.com/v3.1",
+});
+
+export const getCountries = async (): Promise<Country[]> => {
+  try {
+    const response = await countryApi.get("/all");
+    return response.data;
+  } catch (error) {
+    throw new Error();
+  }
+};

리뷰: 주의 :: 타입스크립트 잘 몰라서 이상한 소리일 수 있습니다 ㅠ

getCountires 함수의 반환값이 Promise<Country[]>임을 명시해주고 계시는 것 같습니다.

저는 이번 API 구조가 복잡해서인지 무슨 에러였는지 자세히 기억은 안 나지만 에러를 계속 겪었습니다~!
try문 안에서 get 요청 부분을 보면 응답값의 타입 지정이 안 되어 있는데,  저는 이 부분에서 문제를 해결할 수 있었던 것으로 기억합니다!

`const response = await countryApi.get<Country[]>("/all");`

예를 들어서 data.wonyoung.common 이라는 필드는 API 응답값에 있지도 않은데 입력해서 휴먼 에러가 발생한 경우,
함수의 반환값에만 타입을 지정해주면 그냥 이 문제를 스킵하는데, 통신의 응답값에도 타입을 지정해주면 컴파일 단계에서 에러에 막히는 것으로 이해했는데 제대로 이해한 건지는 잘 모르겠네요!
@@ -0,0 +1,66 @@
+import { useQuery } from "@tanstack/react-query";
+import { getCountries } from "../api/countryAPI";
+import CountryCard from "./CountryCard";
+import { useEffect } from "react";
+import { Country } from "../types/country";
+import useCountryStore from "../zustand/countryStore";
+
+const CountryList = ({ isDone }: { isDone: boolean }) => {
+  const { countries, setCountries, favoriteCountries, setFavoriteCountries } =
+    useCountryStore();
+
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["countries"],
+    queryFn: getCountries,
+  });
+
+  const handleToggleCountry = (country: Country) => {
+    if (isDone) {
+      setFavoriteCountries(
+        favoriteCountries.filter((toggle) => toggle.cca3 !== country.cca3)
+      );
+      setCountries([country, ...countries]);
+    } else {
+      setCountries(countries.filter((toggle) => toggle.cca3 !== country.cca3));
+      setFavoriteCountries([country, ...favoriteCountries]);
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      setCountries(data);
+    }
+  }, [data, setCountries]);
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center">
+        <h1 className="text-4xl">로딩중입니다!!</h1>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex justify-center items-center">
+        <h1 className="text-4xl">에러가 발생했습니다!</h1>
+      </div>
+    );
+  }
+
+  const isDoneCountries = isDone ? favoriteCountries : countries;
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 px-8">
+      {isDoneCountries.map((country) => (
+        <CountryCard
+          key={country.cca3}
+          country={country}
+          handleToggleCountry={handleToggleCountry}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default CountryList;

리뷰: 홈페이지 관련해서 적어주신 것처럼 태그 이름을 바꾸는게 좋다는 말씀이신가요?
@@ -0,0 +1,28 @@
+import { Country } from "../types/country";
+
+const CountryCard = ({
+  country,
+  handleToggleCountry,
+}: {
+  country: Country;
+  handleToggleCountry: (country: Country) => void;
+}) => {
+  return (
+    <div
+      className="flex flex-col border rounded gap-2 px-4"
+      onClick={() => handleToggleCountry(country)}
+    >
+      <div className="flex justify-center mb-2">
+        <img
+          src={country.flags.svg}
+          alt={`${country.name.common} flag`}
+          className="w-32 h-20"
+        />
+      </div>
+      <h2>{country.name.common}</h2>
+      <p>{country.capital}</p>
+    </div>
+  );
+};
+
+export default CountryCard;

리뷰: 참고:
- https://techblog.woowahan.com/15541/
- https://webactually.com/2020/03/03/%3Csection%3E%EC%9D%84-%EB%B2%84%EB%A6%AC%EA%B3%A0-HTML5-%3Carticle%3E%EC%9D%84-%EC%8D%A8%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0/
@@ -0,0 +1,66 @@
+import { useQuery } from "@tanstack/react-query";
+import { getCountries } from "../api/countryAPI";
+import CountryCard from "./CountryCard";
+import { useEffect } from "react";
+import { Country } from "../types/country";
+import useCountryStore from "../zustand/countryStore";
+
+const CountryList = ({ isDone }: { isDone: boolean }) => {
+  const { countries, setCountries, favoriteCountries, setFavoriteCountries } =
+    useCountryStore();
+
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["countries"],
+    queryFn: getCountries,
+  });
+
+  const handleToggleCountry = (country: Country) => {
+    if (isDone) {
+      setFavoriteCountries(
+        favoriteCountries.filter((toggle) => toggle.cca3 !== country.cca3)
+      );
+      setCountries([country, ...countries]);
+    } else {
+      setCountries(countries.filter((toggle) => toggle.cca3 !== country.cca3));
+      setFavoriteCountries([country, ...favoriteCountries]);
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      setCountries(data);
+    }
+  }, [data, setCountries]);
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center">
+        <h1 className="text-4xl">로딩중입니다!!</h1>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex justify-center items-center">
+        <h1 className="text-4xl">에러가 발생했습니다!</h1>
+      </div>
+    );
+  }
+
+  const isDoneCountries = isDone ? favoriteCountries : countries;
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 px-8">
+      {isDoneCountries.map((country) => (
+        <CountryCard
+          key={country.cca3}
+          country={country}
+          handleToggleCountry={handleToggleCountry}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default CountryList;

리뷰: 그 생각은 못해봤는데 동일한 결과가...나오는지 해보겠습니다 ㅎㅎ... 한번의 동작으로 아 조건문을 개선하면 되겠군여!
@@ -0,0 +1,66 @@
+import { useQuery } from "@tanstack/react-query";
+import { getCountries } from "../api/countryAPI";
+import CountryCard from "./CountryCard";
+import { useEffect } from "react";
+import { Country } from "../types/country";
+import useCountryStore from "../zustand/countryStore";
+
+const CountryList = ({ isDone }: { isDone: boolean }) => {
+  const { countries, setCountries, favoriteCountries, setFavoriteCountries } =
+    useCountryStore();
+
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["countries"],
+    queryFn: getCountries,
+  });
+
+  const handleToggleCountry = (country: Country) => {
+    if (isDone) {
+      setFavoriteCountries(
+        favoriteCountries.filter((toggle) => toggle.cca3 !== country.cca3)
+      );
+      setCountries([country, ...countries]);
+    } else {
+      setCountries(countries.filter((toggle) => toggle.cca3 !== country.cca3));
+      setFavoriteCountries([country, ...favoriteCountries]);
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      setCountries(data);
+    }
+  }, [data, setCountries]);
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center">
+        <h1 className="text-4xl">로딩중입니다!!</h1>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex justify-center items-center">
+        <h1 className="text-4xl">에러가 발생했습니다!</h1>
+      </div>
+    );
+  }
+
+  const isDoneCountries = isDone ? favoriteCountries : countries;
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 px-8">
+      {isDoneCountries.map((country) => (
+        <CountryCard
+          key={country.cca3}
+          country={country}
+          handleToggleCountry={handleToggleCountry}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default CountryList;

리뷰: 이건 제가 뭐 말씀하시는지 잘 몰라서...학습하겠습니다 ㅠ..