Skip to content

Commit 1864581

Browse files
hyunwoo0081hyunwoo0081
committed
fix: optimize render process
1 parent 5e978ab commit 1864581

9 files changed

Lines changed: 206 additions & 149 deletions

File tree

‎src/components/navigation/Navigation.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import UserModal from './UserModal.tsx';
88
import UserLayout from './UserLayout.tsx';
99
import AlarmLayout, {AlarmMenu, useAlarmLayout} from './AlarmLayout.tsx';
1010
import useWindowSizeStore, {WindowSize} from '../../stores/useWindowSizeStore.ts';
11+
import {IAlarmList} from "@constant/interfaces.ts";
1112
import authControl from '@constant/authControl.ts';
1213
import Api from '@constant/Api.ts';
1314
import {LOGO_BLUE} from '@constant/imageUrls.ts';
@@ -81,19 +82,19 @@ function Navigation() {
8182
// Todo: any 데이터 타입 수정
8283
if (isLogin) {
8384
Api.fetch2Json('/api/v1/alert?page=0&size=10')
84-
.then(res => {
85+
.then((res: IAlarmList) => {
8586
const AlertList = res.alertResponseList;
8687

8788
// 알람이 있는지 확인
88-
setHasAlarm(AlertList.some((alert: any) => !alert.read));
89+
setHasAlarm(AlertList.some((alert) => !alert.read));
8990

9091
// Todo: 멘토 | 기업 승인 거절 시에도 토큰 업데이트 기능 추가
9192
// 토큰 무한 업데이트 되지 않도록 처리하기
9293
// 알람 중 멘토 | 기업 승인 요청이 있다면 토큰 업데이트
9394
const MentorContents = '이제부터 멘토링을 등록할 수 있습니다.';
94-
const mentorRequest = AlertList.find((v: any) => !!v && v.alertType === 'MENTORING' && v.content === MentorContents);
95+
const mentorRequest = AlertList.find((v) => !!v && v.alertType === 'MENTORING' && v.content === MentorContents);
9596
const EnterpriseAuthContents = '기업 인증이 완료 되었습니다.';
96-
const hasEnterpriseAuthReq = AlertList.some((v: any) => !!v && v.alertType === 'ETC' && v.content === EnterpriseAuthContents);
97+
const hasEnterpriseAuthReq = AlertList.some((v) => !!v && v.alertType === 'ETC' && v.content === EnterpriseAuthContents);
9798

9899
const token = authControl.getInfoFromToken();
99100
const isMentor = token && token.role === 'MENTOR';

‎src/constant/Routes.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import TermsOfInfo from '@pages/DummyPages/TermsOfInfo.tsx';
3838
import TermsOfService from '@pages/DummyPages/TermsOfService.tsx';
3939
import Page404 from '@pages/Page404.tsx';
4040
import {createBrowserRouter} from 'react-router-dom';
41+
import GlobalUseEffect from "@hooks/GlobalUseEffect.tsx";
4142

4243
export const MAP_ROUTE = [
4344
{path: '/', title: '사이드 프로젝트 매칭 플랫폼', element: (<MainPage/>), auth: ['ALL']},
@@ -100,7 +101,7 @@ export const MAP_ROUTE = [
100101
export const BROWSER_ROUTER = createBrowserRouter([
101102
{
102103
path: '/',
103-
element: null,
104+
element: <GlobalUseEffect/>,
104105
errorElement: (<Page404/>),
105106
children: MAP_ROUTE.map((route) => ({
106107
path: route.path,

‎src/hooks/GlobalUseEffect.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {useEffect, useState} from 'react';
2-
import {Location, useLocation, useNavigate} from 'react-router-dom';
2+
import {Location, Outlet, useLocation, useNavigate} from 'react-router-dom';
33
import ApplyDenyContentsDialog from '@components/dialogLayout/ApplyDenyContentsDialog.tsx';
44
import authControl from '@constant/authControl.ts';
55
import {MAP_ROUTE} from '@constant/Routes.tsx';
@@ -67,7 +67,10 @@ function GlobalUseEffect() {
6767
}, [location]);
6868

6969
return (
70-
<ApplyDenyContentsDialog refuseId={refuseId} isOpen={isApplyDialogOpen} setIsOpen={setIsApplyDialogOpen} />
70+
<>
71+
<ApplyDenyContentsDialog refuseId={refuseId} isOpen={isApplyDialogOpen} setIsOpen={setIsApplyDialogOpen} />
72+
<Outlet/>
73+
</>
7174
);
7275
}
7376

‎src/pages/MainPage/MainFeedPage.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ function MainFeedPage() {
8383
onChange={e => setSearchKeyword(e.target.value)}/>
8484

8585
<button className='search_button'
86+
aria-label='피드 검색'
8687
onClick={search}>
8788
<Search width={isMobile ? 48 : 62} height={isMobile ? 48 : 62}/>
8889
</button>

‎src/pages/MainPage/MainMenteePage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ function MainMenteePage() {
100100
onChange={e => setSearchKeyword(e.target.value)}/>
101101

102102
{!isAdvancedSearchOpened && (
103-
<button className='search_button' onClick={search}>
103+
<button className='search_button' aria-label='검색' onClick={search}>
104104
<Search width={isMobile ? 48 : 62} height={isMobile ? 48 : 62}/>
105105
</button>
106106
)}

‎src/pages/MainPage/MainMentorPage.tsx‎

Lines changed: 56 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import useMentoringPopup from '@hooks/useMentoringPopup.ts';
1313
import useInfScroll from '@hooks/useInfScroll.ts';
1414
import useWindowSizeStore from '@/stores/useWindowSizeStore.ts';
1515
import {TechTypeOptions} from '@constant/selectOptions.ts';
16-
import {IMainMentorList, IMentoring} from '@constant/interfaces.ts';
16+
import {IMainMentorList, IMentoring, SearchParams} from '@constant/interfaces.ts';
1717
import {MentorAdapter} from '@constant/InfScrollAdapter.ts';
1818
import authControl from '@constant/authControl.ts';
1919

@@ -29,14 +29,6 @@ function MainMentorPage() {
2929
const [isLoginDialogOpen, setIsLoginDialogOpen] = useState<boolean>(false);
3030
const infScrollLayout = useRef<HTMLDivElement>(null);
3131

32-
const [searchType, setSearchType] = useState<string>(SearchTypeOptions[0].value);
33-
const [searchValue, setSearchValue] = useState<string>('');
34-
// const [stack, setStack] = useState<string>('스택 전체');
35-
const [stack, setStack] = useState<string[]>([]);
36-
const [roleType, setRoleType] = useState<string>(TechTypeOptions[0].value);
37-
38-
const isMobile = useWindowSizeStore(state => state.isMobile);
39-
4032
const adapter = useRef(new MentorAdapter());
4133
const {data, loading, isEnded, isEmpty, setReqParams, hideData}
4234
= useInfScroll<IMainMentorList, IMentoring>(adapter.current, infScrollLayout);
@@ -47,22 +39,6 @@ function MainMentorPage() {
4739
const isLogin = !!authControl.getUserIdFromToken();
4840
const UserRole = token ? token.role : '';
4941

50-
useEffect(() => {
51-
search();
52-
}, []);
53-
54-
function search() {
55-
let searchObj = {};
56-
57-
if (searchValue)
58-
searchObj = {...searchObj, searchType: searchType, searchValue: searchValue};
59-
if (stack.length)
60-
searchObj = {...searchObj, stack: stack[0]};
61-
if (roleType)
62-
searchObj = {...searchObj, roleType: roleType};
63-
64-
setReqParams(searchObj);
65-
}
6642

6743
return (
6844
<div>
@@ -100,29 +76,8 @@ function MainMentorPage() {
10076
))}
10177
</div>
10278
</div>
103-
<div className='search_layout'>
104-
<SelectBox options={TechTypeOptions}
105-
hasDefault={roleType !== TechTypeOptions[0].value}
106-
value={roleType}
107-
onChange={value => setRoleType(value)}/>
108-
<TechStackSelector value={stack} max={1} placeholder='스택 전체' onChange={setStack}/>
109-
<SelectBox options={SearchTypeOptions}
110-
hasDefault={false}
111-
value={searchType}
112-
onChange={value => setSearchType(value)}/>
113-
114-
<div className='search_input_layout'>
115-
<input type='text'
116-
placeholder='키워드를 한글자 이상 입력해주세요'
117-
maxLength={49}
118-
value={searchValue}
119-
onChange={e => setSearchValue(e.target.value)}/>
120-
121-
<button className='search_button' onClick={search}>
122-
<Search width={isMobile ? 48 : 62} height={isMobile ? 48 : 62}/>
123-
</button>
124-
</div>
125-
</div>
79+
80+
<MentorSearches setReqParams={setReqParams}/>
12681

12782
<div className={'card_layout' + (!loading && isEmpty ? ' no_contents' : '')}
12883
ref={infScrollLayout}>
@@ -151,4 +106,57 @@ function MainMentorPage() {
151106
);
152107
}
153108

109+
function MentorSearches({setReqParams}: {setReqParams: (params: SearchParams) => void}) {
110+
const [searchType, setSearchType] = useState<string>(SearchTypeOptions[0].value);
111+
const [searchValue, setSearchValue] = useState<string>('');
112+
// const [stack, setStack] = useState<string>('스택 전체');
113+
const [stack, setStack] = useState<string[]>([]);
114+
const [roleType, setRoleType] = useState<string>(TechTypeOptions[0].value);
115+
116+
const isMobile = useWindowSizeStore(state => state.isMobile);
117+
118+
useEffect(() => {
119+
search();
120+
}, []);
121+
122+
function search() {
123+
let searchObj = {};
124+
125+
if (searchValue)
126+
searchObj = {...searchObj, searchType: searchType, searchValue: searchValue};
127+
if (stack.length)
128+
searchObj = {...searchObj, stack: stack[0]};
129+
if (roleType)
130+
searchObj = {...searchObj, roleType: roleType};
131+
132+
setReqParams(searchObj);
133+
}
134+
135+
return (
136+
<div className='search_layout'>
137+
<SelectBox options={TechTypeOptions}
138+
hasDefault={roleType !== TechTypeOptions[0].value}
139+
value={roleType}
140+
onChange={value => setRoleType(value)}/>
141+
<TechStackSelector value={stack} max={1} placeholder='스택 전체' onChange={setStack}/>
142+
<SelectBox options={SearchTypeOptions}
143+
hasDefault={false}
144+
value={searchType}
145+
onChange={value => setSearchType(value)}/>
146+
147+
<div className='search_input_layout'>
148+
<input type='text'
149+
placeholder='키워드를 한글자 이상 입력해주세요'
150+
maxLength={49}
151+
value={searchValue}
152+
onChange={e => setSearchValue(e.target.value)}/>
153+
154+
<button className='search_button' aria-label='검색' onClick={search}>
155+
<Search width={isMobile ? 48 : 62} height={isMobile ? 48 : 62}/>
156+
</button>
157+
</div>
158+
</div>
159+
);
160+
}
161+
154162
export default MainMentorPage;

0 commit comments

Comments
 (0)