feat: 즐겨찾기 메뉴 4개 제한 기능 추가

- 즐겨찾기 메뉴 최대 4개 제한
- 5번째 추가 시 마지막 항목 자동 제거
- menu-category 컴포넌트 아이콘 파일 경로 수정

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jay Sheen
2025-10-21 19:13:32 +09:00
parent cb58b6b1d0
commit e38469f181

View File

@@ -4,13 +4,12 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
import { UserFavorite } from '@/entities/user/model/types';
import { RefObject, useEffect, useState } from 'react';
import { useLocation } from 'react-router';
import { PATHS } from '@/shared/constants/paths';
import { MenuItem } from '../model/types';
export interface MenuCategoryProps {
menuId?: number;
menuIcon?: string;
menuName?: string;
iconFilePath?: string;
subMenu?: Array<MenuItem>;
setMenuOn?: (menuOn: boolean) => void;
editMode?: boolean;
@@ -21,7 +20,7 @@ export interface MenuCategoryProps {
export const MenuCategory = ({
menuId,
menuIcon,
iconFilePath,
menuName,
subMenu,
setMenuOn,
@@ -31,7 +30,7 @@ export const MenuCategory = ({
itemIndex
}: MenuCategoryProps) => {
const { navigate } = useNavigate();
const location = useLocation();
// const location = useLocation();
const [favoriteItems, setFavoriteItems] = useState<Array<UserFavorite>>([]);
const [menuIds, setMenuIds] = useState<Array<number | undefined>>([]);
@@ -52,36 +51,39 @@ export const MenuCategory = ({
programPath?: string,
) => {
let userFavorite = useStore.getState().UserStore.userFavorite;
let randomNum = Math.floor(Math.random() * 3) + 1;
if(checked){
// 즐겨찾기가 4개 이상일 경우 마지막 항목 제거
if(userFavorite.length >= 4){
userFavorite = userFavorite.slice(0, 3);
}
userFavorite = [
...userFavorite,
{
menuId: menuId,
menuName: menuName,
menuNameEng: menuNameEng,
iconFilePath: `${IMAGE_ROOT}/ico_menu_0${randomNum}.svg`,
iconFilePath: iconFilePath,
programPath: programPath
}
];
}
else{
userFavorite = userFavorite.filter((value, index) => {
userFavorite = userFavorite.filter((value, _) => {
return value.menuId !== menuId
});
}
useStore.getState().UserStore.setUserFavorite(userFavorite);
setChangeMenuId(`${menuId}-${checked}`);
callFavoiteItems();
if(location.pathname === PATHS.home){
// if(location.pathname === PATHS.home){
}
// }
};
const callFavoiteItems = () => {
let userFavorite = useStore.getState().UserStore.userFavorite;
setFavoriteItems(userFavorite);
let newArr: Array<number | undefined> = userFavorite.map((value, index) => {
let newArr: Array<number | undefined> = userFavorite.map((value, _) => {
return value.menuId;
});
setMenuIds(newArr);
@@ -158,7 +160,7 @@ export const MenuCategory = ({
} }
>
<div className="category-header">
<div className={ 'category-icon ' + menuIcon }></div>
<div className={ 'category-icon ' + iconFilePath }></div>
<span>{ menuName }</span>
</div>
<ul className="category-items">