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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user