Fix/#28/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/IdolCard.jsx

@@ -8,7 +8,7 @@ const IdolCard = ({ idol }) => {
   console.log('IdolCard 받은 데이터:', idol);
 
   return (
-    <div className="bg-midnightBlack p-6 flex justify-center">
+    <div className="  p-6 flex justify-center">
       <div
         className="relative w-[98px] h-[98px] flex items-center justify-center rounded-full cursor-pointer transition-all"
         onClick={() => setIsSelected(!isSelected)}

src/components/IdolImage.jsx

@@ -1,11 +1,10 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect } from 'react';
 
-const ImageWithBorder = ({ borderColor = "#f96868", size = "128px" }) => {
-  const [imageSrc, setImageSrc] = useState("");
+const ImageWithBorder = ({ borderColor = '#f96868', size = '128px' }) => {
+  const [imageSrc, setImageSrc] = useState('');
 
   useEffect(() => {
-
-    setImageSrc("https://via.placeholder.com/150");
+    setImageSrc('https://via.placeholder.com/150');
   }, []);
 
   if (!imageSrc) {
@@ -27,12 +26,13 @@ const ImageWithBorder = ({ borderColor = "#f96868", size = "128px" }) => {
         }}
       ></div>
       <div
-        className="absolute overflow-hidden bg-white rounded-full"
+        className="absolute overflow-hidden bg-white rounded-full
+        bg-transparent"
         style={{
           width: `calc(${size} - 13px)`,
           height: `calc(${size} - 13px)`,
-          left: "6.53px",
-          top: "6.53px",
+          left: '6.53px',
+          top: '6.53px',
         }}
       >
         <img

src/pages/myPage/MyPage.jsx

@@ -1,33 +1,175 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
+import Header from '@/components/Header';
 import IdolCard from '@/components/IdolCard';
 
+import nextIcon from '@/assets/icons/nextIcon.svg';
+import prevIcon from '@/assets/icons/prevIcon.svg';
+import checkIcon from '@/assets/images/check.png';
+import { fetchIdols } from '@/apis/idolApi';
+
+const storageKey = 'favoriteIdols';
+
 const MyPage = () => {
   const [idols, setIdols] = useState([]);
+  const [selectedIdols, setSelectedIdols] = useState([]);
+  const [favoriteIdols, setFavoriteIdols] = useState([]);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [isClicked, setIsClicked] = useState(false);
+
+  const getItemsPerPage = () => {
+    if (typeof window !== 'undefined') {
+      if (window.innerWidth < 640) return 6;
+      if (window.innerWidth < 768) return 8;
+      return 16;
+    }
+    return 16;
+  };
 
   useEffect(() => {
-    const fetchIdols = async () => {
-      try {
-        const response = await axios.get(
-          'https://fandom-k-api.vercel.app/13-3/idols?pageSize=30'
-        );
-        setIdols(response.data.list); // API 응답 데이터 리스트를 저장
-      } catch (error) {
-        console.error('아이돌 데이터를 불러오는 중 오류 발생:', error); //아이돌 데이터 로딩 중 에러 확인
-      }
+    const loadIdols = async () => {
+      const data = await fetchIdols(30);
+      setIdols(data);
     };
+    loadIdols();
+  }, []);
 
-    fetchIdols();
+  useEffect(() => {
+    const storedFavorites = localStorage.getItem(storageKey);
+    if (storedFavorites) {
+      setFavoriteIdols(storedFavorites.split(','));
+    }
   }, []);
 
+  useEffect(() => {
+    localStorage.setItem(storageKey, favoriteIdols.join(','));
+  }, [favoriteIdols]);
+
+  const handleToggle = (idolId) => {
+    setSelectedIdols((prev) =>
+      prev.includes(idolId)
+        ? prev.filter((id) => id !== idolId)
+        : [...prev, idolId]
+    );
+    setIsClicked(true);
+  };
+
+  const handleAddFavorites = () => {
+    if (!isClicked) return;
+
+    setFavoriteIdols((prev) => [...prev, ...selectedIdols]);
+    setSelectedIdols([]);
+    setIsClicked(false);
+  };
+
+  const handleRemoveFavorite = (idolId) => {
+    setFavoriteIdols((prev) => prev.filter((id) => id !== idolId));
+  };
+
+  const nextPage = () => {
+    const itemsPerPage = getItemsPerPage();
+    if ((currentPage + 1) * itemsPerPage < idols.length) {
+      setCurrentPage((prev) => prev + 1);
+    }
+  };
+
+  const prevPage = () => {
+    if (currentPage > 0) {
+      setCurrentPage((prev) => prev - 1);
+    }
+  };
+
   return (
-    <div className="h-screen w-full bg-midnightBlack flex items-center justify-center">
-      <div className="flex w-full max-w-[1200px] px-4 justify-center gap-6">
-        {idols.length > 0 ? (
-          idols.map((idol) => <IdolCard key={idol.id} idol={idol} />)
-        ) : (
-          <p className="text-white">아이돌 데이터를 불러오는 중...</p>
-        )}
+    <div className="w-full min-h-screen bg-[#02000E] flex flex-col items-center   ">
+      <Header />
+
+      <div className="w-full max-w-[1200px] flex flex-col items-center py-6 sm:py-10">
+        <h1 className="text-white text-[16px] sm:text-[20px] md:text-[24px] font-bold self-start">
+          내가 관심있는 아이돌
+        </h1>
+
+        <div className="w-full overflow-x-auto">
+          <div className="flex gap-4 mt-4 min-h-[150px] min-w-max">
+            {favoriteIdols.length > 0 ? (
+              favoriteIdols.map((idolId) => {
+                const idol = idols.find((i) => i.id === idolId);
+                return idol ? (
+                  <div key={idol.id} className="flex-shrink-0">
+                    <IdolCard
+                      idol={idol}
+                      onToggle={handleRemoveFavorite}
+                      className="w-[88px] h-[88px] rounded-full object-cover"
+                    />
+                  </div>
+                ) : null;
+              })
+            ) : (
+              <p className="text-gray-500 text-center w-full mt-[50px]">
+                관심있는 아이돌을 추가해보세요.
+              </p>
+            )}
+          </div>
+        </div>
+
+        <div className="w-[1200px] h-[1px] bg-gray-600 my-6"></div>
+
+        <h2 className="text-white text-[16px] sm:text-[20px] md:text-[24px] font-bold self-start">
+          관심 있는 아이돌을 추가해보세요.
+        </h2>
+
+        <div className="relative w-full max-w-[1200px] mt-[20px]">
+          <button
+            onClick={prevPage}
+            disabled={currentPage === 0}
+            className="absolute w-[29px] h-[135px] top-1/2 -left-[40px] bg-[#1B1B1B]/80
+             flex items-center justify-center rounded-lg opacity-80 hover:opacity-100 transition-all z-10
+             disabled:opacity-50 disabled:cursor-not-allowed transform -translate-y-1/2"
+          >
+            <img src={prevIcon} alt="Previous" className="w-4 h-4" />
+          </button>
+
+          <button
+            onClick={nextPage}
+            disabled={(currentPage + 1) * getItemsPerPage() >= idols.length}
+            className="absolute w-[29px] h-[135px] top-1/2 -right-[40px] bg-[#1B1B1B]/80
+             flex items-center justify-center rounded-lg opacity-80 hover:opacity-100 transition-all z-10
+             disabled:opacity-50 disabled:cursor-not-allowed transform -translate-y-1/2"
+          >
+            <img src={nextIcon} alt="Next" className="w-4 h-4" />
+          </button>
+
+          <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-8 gap-6 mt-4 mx-auto bg-[#02000E] min-h-[300px]">
+            {idols
+              .slice(
+                currentPage * getItemsPerPage(),
+                (currentPage + 1) * getItemsPerPage()
+              )
+              .map((idol) => (
+                <div
+                  key={idol.id}
+                  className="relative w-[98px] h-[98px] rounded-full border-[2px] border-[#FF4D78] flex items-center justify-center"
+                  onClick={() => handleToggle(idol.id)}
+                >
+                  <IdolCard
+                    idol={idol}
+                    onToggle={handleToggle}
+                    isSelectable={true}
+                    className="w-[88px] h-[88px] rounded-full object-cover"
+                  />
+                </div>
+              ))}
+          </div>
+        </div>
+
+        <button
+          onClick={handleAddFavorites}
+          disabled={!isClicked}
+          className={`w-[255px] h-[50px] mt-6 text-white rounded-full text-lg font-bold
+            bg-[#FE578F] hover:bg-[#e4567e] transition-all
+            ${!isClicked ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+        >
+          + 추가하기
+        </button>
       </div>
     </div>
   );

vite.config.js

@@ -1,13 +1,21 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import path from "path";
+import path from 'path';
 
-// https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
   resolve: {
     alias: {
-      "@": path.resolve(__dirname, "src"), // 수정된 부분
+      '@': path.resolve(__dirname, 'src'),
     },
   },
-});
+  server: {
+    proxy: {
+      '/api': {
+        target: 'https://fandom-k-api.vercel.app',
+        changeOrigin: true,
+        secure: false,
+      },
+    },
+  },
+});