Skip to content

Commit 4606ec6

Browse files
hyeeunchohyeeuncho
committed
refact: event funnel 이동 로직 수정
1 parent 4f510f4 commit 4606ec6

File tree

3 files changed

+58
-35
lines changed

3 files changed

+58
-35
lines changed

‎src/features/event/ui/EventFunnel.tsx‎

Lines changed: 49 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,33 +7,52 @@ import EventTypePage from '../../../pages/event/ui/create-event/EventTypePage';
77
import EventTagPage from '../../../pages/event/ui/create-event/EventTagPage';
88
import EventOrganizerInfoPage from '../../../pages/event/ui/create-event/EventOrganizerInfoPage';
99
import EventRegisterLayout from '../../../shared/ui/backgrounds/EventRegisterLayout';
10-
import { useNavigate } from 'react-router-dom';
10+
import { useLocation, useNavigate } from 'react-router-dom';
1111
import { EventFunnelInterface, StepNames } from '../../../shared/types/funnelType';
1212
import { useFunnelState } from '../model/FunnelContext';
1313
import { useEventCreation } from '../hooks/useEventHook';
1414
import { useHostCreation } from '../../host/hook/useHostHook';
1515
import { HostCreationRequest } from '../../host/model/host';
16+
import { useState } from 'react';
1617

17-
const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelInterface) => {
18+
const EventFunnel = ({ onNext, Funnel, Step, currentStep }: EventFunnelInterface) => {
1819
const navigate = useNavigate();
1920
const { eventState, hostState, setHostState } = useFunnelState();
2021
const { mutate: createEvent } = useEventCreation();
2122
const { mutate: createHost } = useHostCreation();
23+
const location = useLocation();
24+
const [backPath] = useState(location.state?.backPath ?? '/');
25+
26+
const stepOrder = [
27+
StepNames.HostSelection,
28+
StepNames.HostCreation,
29+
StepNames.EventTitle,
30+
StepNames.EventPeriod,
31+
StepNames.EventOrganizerInfo,
32+
StepNames.EventInfo,
33+
StepNames.EventType,
34+
StepNames.EventTag,
35+
] as const;
36+
const stepNameToIndex = (name: StepNames) => stepOrder.indexOf(name);
37+
38+
const goTo = (stepName: StepNames) => {
39+
const index = stepNameToIndex(stepName);
40+
onNext(String(index));
41+
};
2242

2343
const handleNext = (nextStep: string) => {
24-
if (currentStep === 7) {
25-
createEvent(eventState, {
26-
onSuccess: () => {
27-
navigate('/menu/myHost');
28-
},
29-
onError: error => {
30-
console.error('API 호출 실패:', error);
31-
},
32-
});
33-
} else {
34-
onNext(nextStep);
35-
}
44+
onNext(nextStep);
3645
};
46+
const handleCreateEvent = () => {
47+
createEvent(eventState, {
48+
onSuccess: () => {
49+
navigate('/menu/myHost');
50+
},
51+
onError: error => {
52+
console.error('API 호출 실패:', error);
53+
},
54+
});
55+
}
3756
const initialHostState: HostCreationRequest = {
3857
profileImageUrl: '',
3958
hostChannelName: '',
@@ -45,7 +64,7 @@ const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelI
4564
createHost(hostState, {
4665
onSuccess: () => {
4766
setHostState(initialHostState);
48-
handleNext(String(currentStep - 1));
67+
goTo(StepNames.HostSelection);
4968
},
5069
onError: error => {
5170
const message = error?.message || '호스트 생성에 실패했습니다. 다시 시도해주세요.';
@@ -59,8 +78,8 @@ const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelI
5978
<Step name={StepNames.HostSelection}>
6079
<EventRegisterLayout
6180
title="이벤트를 호스팅할 채널을 선택해주세요"
62-
onNext={() => handleNext(String(currentStep + 2))}
63-
onPrev={() => navigate('/')}
81+
onNext={() => goTo(StepNames.EventTitle)}
82+
onPrev={() => navigate(backPath)}
6483
requireValidation={true}
6584
>
6685
<HostSelectionPage onNext={handleNext} currentStep={currentStep} />
@@ -70,7 +89,7 @@ const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelI
7089
<EventRegisterLayout
7190
title="채널을 새로 생성합니다"
7291
onNext={() => handleHostCreation()}
73-
onPrev={() => onPrev(String(currentStep - 1))}
92+
onPrev={() => goTo(StepNames.HostSelection)}
7493
requireValidation={true}
7594
>
7695
<HostCreationPage />
@@ -79,9 +98,8 @@ const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelI
7998
<Step name={StepNames.EventTitle}>
8099
<EventRegisterLayout
81100
title="이벤트 제목을 입력해주세요"
82-
onNext={() => handleNext(String(currentStep + 1))}
83-
onPrev={() => onPrev(String(currentStep - 1))}
84-
goHome={true}
101+
onNext={() => goTo(StepNames.EventPeriod)}
102+
onPrev={() => goTo(StepNames.HostSelection)}
85103
requireValidation={true}
86104
>
87105
<EventTitlePage />
@@ -90,17 +108,17 @@ const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelI
90108
<Step name={StepNames.EventPeriod}>
91109
<EventRegisterLayout
92110
title="이벤트 기간을 입력해주세요"
93-
onNext={() => handleNext(String(currentStep + 1))}
94-
onPrev={() => onPrev(String(currentStep - 1))}
111+
onNext={() => goTo(StepNames.EventOrganizerInfo)}
112+
onPrev={() => goTo(StepNames.EventTitle)}
95113
>
96114
<EventPeriodPage />
97115
</EventRegisterLayout>
98116
</Step>
99117
<Step name={StepNames.EventOrganizerInfo}>
100118
<EventRegisterLayout
101119
title="이벤트 주최자 정보를 입력해주세요"
102-
onNext={() => handleNext(String(currentStep + 1))}
103-
onPrev={() => onPrev(String(currentStep - 1))}
120+
onNext={() => goTo(StepNames.EventInfo)}
121+
onPrev={() => goTo(StepNames.EventPeriod)}
104122
requireValidation={true}
105123
>
106124
<EventOrganizerInfoPage />
@@ -109,8 +127,8 @@ const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelI
109127
<Step name={StepNames.EventInfo}>
110128
<EventRegisterLayout
111129
title="이벤트 정보를 입력해주세요"
112-
onNext={() => handleNext(String(currentStep + 1))}
113-
onPrev={() => onPrev(String(currentStep - 1))}
130+
onNext={() => goTo(StepNames.EventType)}
131+
onPrev={() => goTo(StepNames.EventOrganizerInfo)}
114132
requireValidation={true}
115133
>
116134
<EventInfoPage />
@@ -119,16 +137,16 @@ const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelI
119137
<Step name={StepNames.EventType}>
120138
<EventRegisterLayout
121139
title="이벤트 진행방식을 선택해주세요"
122-
onNext={() => handleNext(String(currentStep + 1))}
123-
onPrev={() => onPrev(String(currentStep - 1))}
140+
onNext={() => goTo(StepNames.EventTag)}
141+
onPrev={() => goTo(StepNames.EventInfo)}
124142
>
125143
<EventTypePage />
126144
</EventRegisterLayout>
127145
</Step>
128146
<Step name={StepNames.EventTag}>
129147
<EventRegisterLayout
130-
onNext={() => handleNext(String(currentStep + 1))}
131-
onPrev={() => onPrev(String(currentStep - 1))}
148+
onNext={() => handleCreateEvent()}
149+
onPrev={() => goTo(StepNames.EventType)}
132150
>
133151
<EventTagPage />
134152
</EventRegisterLayout>

‎src/pages/menu/ui/MenuPage.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import { flexColumn } from '../../../../design-system/styles/flex';
22
import HorizontalCardButton from '../../../../design-system/ui/buttons/HorizontalCardButton';
3-
import { useNavigate } from 'react-router-dom';
3+
import { NavigateOptions, To, useNavigate } from 'react-router-dom';
44
import Header from '../../../../design-system/ui/Header';
55
import { getButtonData } from '../../../shared/types/menuType';
66
import BottomBar from '../../../widgets/main/ui/BottomBar';
77

8-
const handleIconClick = (navigate: (path: string) => void, path: string, url?: string) => {
8+
const handleIconClick = (navigate: (to: To, options?: NavigateOptions) => void, path: string, url?: string, backPath?: string) => {
99
if (url) {
1010
window.open(url, '_blank');
11+
} else if (path && backPath) {
12+
navigate(path, {
13+
state: { backPath: '/menu' },
14+
});
1115
} else if (path) {
1216
navigate(path);
1317
}
@@ -27,7 +31,7 @@ const MenuPage = () => {
2731
iconPath={<img src={button.iconPath} alt={button.label} className="w-6 h-6 md:w-7 md:h-7" />}
2832
hoverIconPath={<img src={button.hoverIconPath} alt={button.label} className="w-6 h-6 md:w-7 md:h-7" />}
2933
label={button.label}
30-
onClick={() => handleIconClick(navigate, button.path, button.url)}
34+
onClick={() => handleIconClick(navigate, button.path, button.url, button.backPath)}
3135
/>
3236
{button.label !== '내 호스트' && index !== buttonData.length - 1 && (
3337
<hr className="mt-5 border-[0.5px] border-gray4" />

‎src/shared/types/menuType.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export interface buttonData {
2222
label: string; // 버튼 텍스트
2323
path: string; // 경로
2424
url?: string; // 외부 url
25+
backPath?: string
2526
}
2627

2728
export const getButtonData = (): buttonData[] => {
@@ -30,7 +31,7 @@ export const getButtonData = (): buttonData[] => {
3031
const baseButtons: buttonData[] = [
3132
{ iconPath: Ticket, hoverIconPath: SelectedTicket, label: '구입한 티켓', path: '/menu/myTicket' },
3233
{ iconPath: Host, hoverIconPath: SelectedHost, label: '내 호스트', path: '/menu/myHost' },
33-
{ iconPath: Event, hoverIconPath: SelectedEvent, label: '이벤트 주최하기', path: '/event-creation' },
34+
{ iconPath: Event, hoverIconPath: SelectedEvent, label: '이벤트 주최하기', path: '/event-creation', backPath:'/menu' },
3435
{ iconPath: Setting, hoverIconPath: SelectedSetting, label: '마이페이지', path: '/menu/myPage' },
3536
{ iconPath: Manual, hoverIconPath: SelectedManual, label: '사용법', path: '/menu/myTicket', url: USER_MANUAL_URL },
3637
];

0 commit comments

Comments
 (0)
⚡