From eaea4509403e2ddd25431519da9b09c4ade2c325 Mon Sep 17 00:00:00 2001 From: juha399 Date: Fri, 7 Feb 2025 12:05:41 +0900 Subject: [PATCH 1/2] fix FavoriteIdol Section Button and Add Button to List --- src/pages/myPage/MyPage.jsx | 156 ++++++++++++++---------------------- 1 file changed, 59 insertions(+), 97 deletions(-) diff --git a/src/pages/myPage/MyPage.jsx b/src/pages/myPage/MyPage.jsx index b5c3ca4..cbcfec8 100644 --- a/src/pages/myPage/MyPage.jsx +++ b/src/pages/myPage/MyPage.jsx @@ -16,21 +16,6 @@ const MyPage = () => { const [currentPage, setCurrentPage] = useState(0); const [itemsPerPage, setItemsPerPage] = useState(16); - const favoriteIdSet = new Set(favoriteIdols.map(Number)); // 숫자로 변환한 Set 생성 - const favoriteIdolsArr = idols.filter((idol) => favoriteIdSet.has(idol.id)); - - const handleAddToFavorites = () => { - if (selectedIdols.length === 0) return; - - setFavoriteIdols((prev) => { - const updatedFavorites = [...new Set([...prev, ...selectedIdols])]; - localStorage.setItem(storageKey, updatedFavorites.join(',')); // localStorage 업데이트 - return updatedFavorites; - }); - - setSelectedIdols([]); // 선택된 아이돌 초기화 - }; - useEffect(() => { const updateItemsPerPage = () => { const width = window.innerWidth; @@ -55,9 +40,9 @@ const MyPage = () => { useEffect(() => { const storedFavorites = localStorage.getItem(storageKey); if (storedFavorites) { - setFavoriteIdols(storedFavorites.split(',')); + setFavoriteIdols(storedFavorites.split(',').map(Number)); // 문자열 배열 → 숫자로 변환 } - }, []); // `favoriteIdols` 변경될 때마다 실행 + }, []); const handleToggle = (idolId) => { setSelectedIdols((prev) => @@ -67,9 +52,21 @@ const MyPage = () => { ); }; + const handleAddToFavorites = () => { + if (selectedIdols.length === 0) return; + + setFavoriteIdols((prev) => { + const updatedFavorites = [...new Set([...prev, ...selectedIdols])]; + localStorage.setItem(storageKey, updatedFavorites.join(',')); + return updatedFavorites; + }); + + setSelectedIdols([]); + }; + const handleRemoveFavorite = (idolId) => { setFavoriteIdols((prev) => { - const updatedFavorites = prev.filter((id) => id !== idolId.toString()); + const updatedFavorites = prev.filter((id) => id !== idolId); localStorage.setItem(storageKey, updatedFavorites.join(',')); return updatedFavorites; }); @@ -89,102 +86,67 @@ const MyPage = () => {
- {/* 관심있는 아이돌 섹션 */} + {/* 관심 있는 아이돌 섹션 */}

내가 관심있는 아이돌

-
- {favoriteIdolsArr.map((idol) => ( -
- - {/* 닫기 버튼 */} - {/* X 버튼 (항상 테두리 상단에 고정) */} - - -
- ))} + + +
+ ); + })}
- {/* 회색 구분선 */} -
- - {/* 아이돌 추가하기 섹션 */}

관심 있는 아이돌을 추가해보세요.

- {/* 버튼이 그리드 크기에 따라 자동으로 좌우 맞춤 */} -
- {/* 이전 버튼 */} - - - {/* 이후 버튼 */} - - {/* 아이돌 리스트 */} -
- {idols - .slice( - currentPage * itemsPerPage, - (currentPage + 1) * itemsPerPage - ) - .map((idol) => ( - handleToggle(idol.id)} - /> - ))} -
+
+ {idols + .slice(currentPage * itemsPerPage, (currentPage + 1) * itemsPerPage) + .map((idol) => ( + + ))}
- {/* 추가하기 버튼 */} -
- - + 추가하기 - -
+ + + 추가하기 +
); }; From b6d09d6ffcf3a70336c0eb555b7804dffd1ee50b Mon Sep 17 00:00:00 2001 From: juha399 Date: Fri, 7 Feb 2025 12:43:26 +0900 Subject: [PATCH 2/2] fix FavoriteIdol Section Button and Add Button to List --- src/pages/myPage/CheckedIdolCard.jsx | 34 +++------------- src/pages/myPage/MyPage.jsx | 58 +++++++++++++++++++++------- 2 files changed, 50 insertions(+), 42 deletions(-) diff --git a/src/pages/myPage/CheckedIdolCard.jsx b/src/pages/myPage/CheckedIdolCard.jsx index 22f79c1..a951cbf 100644 --- a/src/pages/myPage/CheckedIdolCard.jsx +++ b/src/pages/myPage/CheckedIdolCard.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React from 'react'; import checkIcon from '@/assets/images/check.png'; const CheckedIdolCard = ({ @@ -7,40 +7,16 @@ const CheckedIdolCard = ({ isSelectable = true, isSelected = false, sizeClass = 'w-[98px] h-[98px] tablet:w-[128px] tablet:h-[128px]', + onClick, }) => { 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 ( -
+
onClick(idol.id) : undefined} > {children}
@@ -53,7 +29,7 @@ const CheckedIdolCard = ({ />
- {localIsSelected && isSelectable && ( + {isSelected && isSelectable && ( <>
{ useEffect(() => { const storedFavorites = localStorage.getItem(storageKey); if (storedFavorites) { - setFavoriteIdols(storedFavorites.split(',').map(Number)); // 문자열 배열 → 숫자로 변환 + setFavoriteIdols(storedFavorites.split(',').map(Number)); } }, []); @@ -126,18 +126,50 @@ const MyPage = () => { 관심 있는 아이돌을 추가해보세요. -
- {idols - .slice(currentPage * itemsPerPage, (currentPage + 1) * itemsPerPage) - .map((idol) => ( - - ))} + {/* 이전 버튼 */} +
+ + + {/* 아이돌 리스트 */} +
+ {idols + .slice( + currentPage * itemsPerPage, + (currentPage + 1) * itemsPerPage + ) + .map((idol) => ( + handleToggle(idol.id)} + /> + ))} +
+ + {/* 다음 버튼 (반응형 위치 조정) */} +