diff --git a/src/components/common/sidebar/Sidebar.tsx b/src/components/common/sidebar/Sidebar.tsx index fafb716a..bc86a3cb 100644 --- a/src/components/common/sidebar/Sidebar.tsx +++ b/src/components/common/sidebar/Sidebar.tsx @@ -1,7 +1,7 @@ import { NavLink, useLocation } from 'react-router-dom'; import Avatar from '../avatar/Avatar'; import * as S from './Sidebar.styled'; -import { useCallback, useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import EditMyProfileImg from './editMyProfileImg/EditMyProfileImg'; import useAuthStore from '../../../store/authStore'; @@ -69,4 +69,4 @@ const Sidebar = ({ menuItems, profileImage, nickname }: SidebarProps) => { ); }; -export default Sidebar; +export default React.memo(Sidebar); diff --git a/src/components/manageProjects/ProjectHeader.tsx b/src/components/manageProjects/ProjectHeader.tsx index d9f8133d..c54b634b 100644 --- a/src/components/manageProjects/ProjectHeader.tsx +++ b/src/components/manageProjects/ProjectHeader.tsx @@ -2,6 +2,7 @@ import * as S from './ProjectHeader.styled'; import Title from '../common/title/Title'; import { ProjectDetailExtended } from '../../models/projectDetail'; import RecruitmentDate from './RecruitmentDate'; +import React from 'react'; interface ProjectHeaderProps { projectData: ProjectDetailExtended; } @@ -18,4 +19,4 @@ function ProjectHeader({ projectData }: ProjectHeaderProps) { ); } -export default ProjectHeader; +export default React.memo(ProjectHeader); diff --git a/src/mock/browser.ts b/src/mock/browser.ts index 1370c817..e9a841ec 100644 --- a/src/mock/browser.ts +++ b/src/mock/browser.ts @@ -17,6 +17,7 @@ import { import { userPageAppliedProjectList, userPageProfile } from './userpage'; export const handlers = [ + passNonPassList, myProjectList, applicantList, projectDetail, @@ -29,7 +30,6 @@ export const handlers = [ myPageAppliedProjectList, userPageProfile, userPageAppliedProjectList, - passNonPassList, ]; export const worker = setupWorker(...handlers); diff --git a/src/pages/manage/myProjectVolunteer/MyProjectVolunteer.tsx b/src/pages/manage/myProjectVolunteer/MyProjectVolunteer.tsx index 05590ce7..0319336a 100644 --- a/src/pages/manage/myProjectVolunteer/MyProjectVolunteer.tsx +++ b/src/pages/manage/myProjectVolunteer/MyProjectVolunteer.tsx @@ -19,16 +19,20 @@ import MainLogo from '../../../assets/mainlogo.svg'; import Modal from '../../../components/common/modal/Modal'; import { useModal } from '../../../hooks/useModal'; import ProjectHeader from '../../../components/manageProjects/ProjectHeader'; +import { useMemo } from 'react'; const MyProjectVolunteer = () => { const { projectId } = useParams(); - const sidebarMenuItem = applicantsMenuItems(Number(projectId)); const { data: projectData } = useGetProjectData(Number(projectId)); const { isOpen, handleModalClose, handleModalOpen, message } = useModal(); const { handlePassNonPassStatus } = usePassNonPassMutation( Number(projectId), handleModalOpen ); + const sidebarMenuItem = useMemo( + () => applicantsMenuItems(Number(projectId)), + [projectId] + ); const { applicantsData, isApplicantLoading } = useApllicantList( Number(projectId) );