Fix favorite idol UI

src/apis/idolApi.js

@@ -0,0 +1,13 @@
+import axios from 'axios';
+
+export const fetchIdols = async (pageSize = 30) => {
+  try {
+    const response = await axios.get(
+      `https://fandom-k-api.vercel.app/13-3/idols?pageSize=${pageSize}`
+    );
+    return response.data.list;
+  } catch (error) {
+    console.error('아이돌 데이터를 불러오는 중 오류 발생:', error);
+    return [];
+  }
+};

src/components/IdolImage.jsx

@@ -1,48 +1,60 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect } from 'react';
+import { fetchIdols } from '@/apis/idolApi';
 
-const ImageWithBorder = ({ borderColor = "#f96868", size = "128px" }) => {
-  const [imageSrc, setImageSrc] = useState("");
+function IdolImage({
+  idolId,
+  alt = '아이돌 프로필',
+  className = '',
+  size = 'size',
+  borderColor = 'coralRed',
+}) {
+  const [imageSrc, setImageSrc] = useState(null);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
-
-    setImageSrc("https://via.placeholder.com/150");
-  }, []);
+    if (!idolId) {
+      return;
+    }
 
-  if (!imageSrc) {
-    return <div>Loading...</div>;
+    const fetchImage = async () => {
+      setLoading(true);
+      try {
+        const idols = await fetchIdols();
+        const idolData = idols.find((idol) => idol.id === idolId);
+      } catch (error) {
+        console.error('이미지 로딩 실패:', error);
+        setImageSrc(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchImage();
+  }, [idolId]);
+
+  const sizeClass = {
+    size: 'w-[70px] h-[70px]',
+  };
+
+  if (loading) {
+    return (
+      <div
+        className={`overflow-hidden rounded-full border-2 ${sizeClass[size]} ${className}`}
+      >
+        <div className="flex items-center justify-center w-full h-full bg-gray-300 animate-pulse"></div>
+      </div>
+    );
   }
 
+  if (!imageSrc) return null;
+
   return (
     <div
-      className="relative shrink-0"
-      style={{
-        width: size,
-        height: size,
-      }}
+      className={`overflow-hidden rounded-full border-2 ${sizeClass[size]} ${className}`}
     >
-      <div
-        className="absolute inset-0 rounded-full border-solid"
-        style={{
-          border: `1.31px solid ${borderColor}`,
-        }}
-      ></div>
-      <div
-        className="absolute overflow-hidden bg-white rounded-full"
-        style={{
-          width: `calc(${size} - 13px)`,
-          height: `calc(${size} - 13px)`,
-          left: "6.53px",
-          top: "6.53px",
-        }}
-      >
-        <img
-          className="absolute inset-0 object-cover"
-          src={imageSrc}
-          alt="Profile"
-        />
-      </div>
+      <img className="w-full h-full object-cover" src={imageSrc} alt={alt} />
     </div>
   );
-};
+}
 
-export default ImageWithBorder;
+export default React.memo(IdolImage);

src/pages/myPage/CheckedIdolCard.jsx

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react';
+import checkIcon from '@/assets/images/check.png';
+import PrimaryButton from '@/components/PrimaryButton';
+import xButton from '@/assets/icons/xButton.svg';
+
+const CheckedIdolCard = ({
+  idol,
+  isSelectable = true,
+  isSelected = false,
+  isFavorte = false,
+  onRemove,
+}) => {
+  const defaultImage = 'https://link24.kr/9iFIhh0';
+  const storageKey = 'favoriteIdols';
+  const [localIsSelected, setLocalIsSelected] = useState(isSelected);
+
+  useEffect(() => {
+    if (isSelectable) {
+      const savedFavorites = localStorage.getItem(storageKey) || '';
+      setLocalIsSelected(savedFavorites.split(',').includes(String(idol.id)));
+    }
+  }, [idol.id, isSelectable]);
+
+  const toggleFavorite = () => {
+    if (!isSelectable) return;
+
+    let savedFavorites = localStorage.getItem(storageKey) || '';
+    let favoriteArray = savedFavorites ? savedFavorites.split(',') : [];
+
+    if (favoriteArray.includes(String(idol.id))) {
+      favoriteArray = favoriteArray.filter((id) => id !== String(idol.id));
+    } else {
+      favoriteArray.push(String(idol.id));
+    }
+
+    localStorage.setItem(storageKey, favoriteArray.join(','));
+    setLocalIsSelected(!localIsSelected);
+  };
+
+  return (
+    <div className="p-1 flex flex-col items-center">
+      <div
+        className={`relative w-[98px] h-[98px] md:w-[128px] md:h-[128px] p-[2px]
+                    flex items-center justify-center rounded-full 
+                    ${isSelectable ? 'cursor-pointer' : 'cursor-default'} transition-all`}
+        onClick={isSelectable ? toggleFavorite : undefined}
+      >
+        <div className="absolute inset-0 rounded-full border-[1.3px] border-coralRed border-opacity-100 z-10"></div>
+
+        <div className="absolute inset-0 m-1.5 over rounded-full overflow-hidden">
+          <img
+            src={idol.profilePicture || defaultImage}
+            alt={idol.name}
+            className="w-full h-full object-cover"
+          />
+        </div>
+
+        {localIsSelected && isSelectable && (
+          <>
+            <div className="absolute inset-0 rounded-full bg-gradient-to-r from-coralRed to-pinkPunch opacity-50 z-20" />
+            <img
+              src={checkIcon}
+              alt="check"
+              className="absolute w-[40%] h-[40%] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-30"
+            />
+          </>
+        )}
+      </div>
+
+      <div className="mt-1 text-center">
+        <p className="text-white text-sm font-bold">{idol.name}</p>
+        <p className="text-white/70 text-xs">{idol.group || '그룹 없음'}</p>
+      </div>
+    </div>
+  );
+};
+
+export default CheckedIdolCard;