[week6][정영훈] 과제 제출

src/routes/VoteHistoryPage.jsx

@@ -15,9 +15,16 @@ function VoteHistoryPage() {
 
   const getImages = async () => {
     try {
-      let response;
       // ### TO DO ###
-      // #############
+      let response = await axios.get("https://api.thecatapi.com/v1/votes", {
+        headers: {
+          "x-api-key":
+            "live_5xeBiFG48vOmeu9XXpYOu4Zs9dKtcIgRkFJcKZWigEXma3ckAjkA7V3pKxSjMcHO",
+        },
+        params: {
+          sub_id: userId,
+        },
+      });
       const data = response.data;
       const imageSet = [];
 
@@ -60,13 +67,18 @@ function VoteHistoryPage() {
       <div className="w-2/3 h-2/3 p-5 border-4 rounded-2xl border-[#FF6841] flex justify-center items-center">
         <div className="w-full h-3/4 grid grid-cols-4 auto-rows-[46%] gap-4 overflow-y-scroll hide-scroll scrollable-content">
           {images.map((img) => (
-            <div className="w-full h-full relative">
+            <div key={img.url} className="w-full h-full relative">
               <img
-                key={img.url}
                 src={img.url}
-                className={`object-cover w-full h-full border-[3px] border-[#FF6841] rounded-xl 
-                  ### FILL ME ### 
-                `}
+                alt="Voted Cat"
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  borderRadius: "10px",
+                  borderWidth: "3px",
+                  borderColor: img.value > 0 ? "blue" : "red",
+                  borderStyle: "solid",
+                }}
               />
             </div>
           ))}

src/routes/VotePage.jsx

@@ -14,23 +14,63 @@ function VotePage() {
     require("../assets/images/thumbs-down-icon.png")
   );
 
+  const [hoverThumbsUp, setHoverThumbsUp] = useState(false);
+  const [hoverThumbsDown, setHoverThumbsDown] = useState(false);
+
+  const [images, setImages] = useState([]);
   useEffect(() => {
     getImage();
   }, []);
 
   const getImage = async () => {
     try {
-      // ### TO DO ###
-      // #############
+      const response = await axios.get(
+        "https://api.thecatapi.com/v1/images/search?limit=1&size=large",
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key":
+              "live_5xeBiFG48vOmeu9XXpYOu4Zs9dKtcIgRkFJcKZWigEXma3ckAjkA7V3pKxSjMcHO",
+          },
+        }
+      );
+
+      const data = response.data;
+      const imageSet = [];
+
+      data.map((e) => {
+        imageSet.push({
+          id: e.id,
+          url: e.url,
+          isFavourite: false,
+          favouriteId: null,
+        });
+      });
+
+      setImages(imageSet);
     } catch (err) {
       console.log(err);
     }
   };
 
   const vote = async (val) => {
     try {
-      // ### TO DO ###
-      // #############
+      const response = await axios.post(
+        "https://api.thecatapi.com/v1/votes",
+        {
+          image_id: images[0].id,
+          sub_id: userId,
+          value: val,
+        },
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key":
+              "live_5xeBiFG48vOmeu9XXpYOu4Zs9dKtcIgRkFJcKZWigEXma3ckAjkA7V3pKxSjMcHO",
+          },
+        }
+      );
+      getImage();
     } catch (err) {
       console.log(err);
     }
@@ -63,18 +103,30 @@ function VotePage() {
         <div className="w-full h-[90%] flex justify-evenly items-center">
           <img
             // ### ONE CAT IMAGE ###
+            src={images.length > 0 ? images[0].url : "default-placeholder.png"}
+            alt="Cat"
             className="w-3/5 h-full border-[3px] rounded-xl border-[#FF6841]"
           />
           <div className="w-1/3 flex gap-12 justify-center">
             <img
               src={thumbsUpImage}
               className="w-20 h-20 cursor-pointer"
               // ### thumbsUpImage Event ###
+              style={{ filter: hoverThumbsUp ? "hue-rotate(180deg)" : "none" }}
+              onMouseEnter={() => setHoverThumbsUp(true)}
+              onMouseLeave={() => setHoverThumbsUp(false)}
+              onClick={() => vote(1)}
             />
             <img
               src={thumbsDownImage}
               className="w-20 h-20 cursor-pointer"
               // ### thumbsDownImage Event ###
+              style={{
+                filter: hoverThumbsDown ? "hue-rotate(330deg)" : "none",
+              }}
+              onMouseEnter={() => setHoverThumbsDown(true)}
+              onMouseLeave={() => setHoverThumbsDown(false)}
+              onClick={() => vote(-1)}
             />
           </div>
         </div>