diff --git a/src/features/dashboard/ui/MultiplePieCharts.tsx b/src/features/dashboard/ui/MultiplePieCharts.tsx index dc7b9a44..6f2e4090 100644 --- a/src/features/dashboard/ui/MultiplePieCharts.tsx +++ b/src/features/dashboard/ui/MultiplePieCharts.tsx @@ -30,9 +30,9 @@ const MultiplePieCharts = ({ responses }: MultiplePieChartsProps) => { return (

{option.optionName}

- + - + {data.map((_, i) => ( ))} diff --git a/src/features/event/ui/EventFunnel.tsx b/src/features/event/ui/EventFunnel.tsx index d7667c67..f0ea2158 100644 --- a/src/features/event/ui/EventFunnel.tsx +++ b/src/features/event/ui/EventFunnel.tsx @@ -7,33 +7,52 @@ import EventTypePage from '../../../pages/event/ui/create-event/EventTypePage'; import EventTagPage from '../../../pages/event/ui/create-event/EventTagPage'; import EventOrganizerInfoPage from '../../../pages/event/ui/create-event/EventOrganizerInfoPage'; import EventRegisterLayout from '../../../shared/ui/backgrounds/EventRegisterLayout'; -import { useNavigate } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import { EventFunnelInterface, StepNames } from '../../../shared/types/funnelType'; import { useFunnelState } from '../model/FunnelContext'; import { useEventCreation } from '../hooks/useEventHook'; import { useHostCreation } from '../../host/hook/useHostHook'; import { HostCreationRequest } from '../../host/model/host'; +import { useState } from 'react'; -const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelInterface) => { +const EventFunnel = ({ onNext, Funnel, Step, currentStep }: EventFunnelInterface) => { const navigate = useNavigate(); const { eventState, hostState, setHostState } = useFunnelState(); const { mutate: createEvent } = useEventCreation(); const { mutate: createHost } = useHostCreation(); + const location = useLocation(); + const [backPath] = useState(location.state?.backPath ?? '/'); + + const stepOrder = [ + StepNames.HostSelection, + StepNames.HostCreation, + StepNames.EventTitle, + StepNames.EventPeriod, + StepNames.EventOrganizerInfo, + StepNames.EventInfo, + StepNames.EventType, + StepNames.EventTag, + ] as const; + const stepNameToIndex = (name: StepNames) => stepOrder.indexOf(name); + + const goTo = (stepName: StepNames) => { + const index = stepNameToIndex(stepName); + onNext(String(index)); + }; const handleNext = (nextStep: string) => { - if (currentStep === 7) { - createEvent(eventState, { - onSuccess: () => { - navigate('/menu/myHost'); - }, - onError: error => { - console.error('API 호출 실패:', error); - }, - }); - } else { - onNext(nextStep); - } + onNext(nextStep); }; + const handleCreateEvent = () => { + createEvent(eventState, { + onSuccess: () => { + navigate('/menu/myHost'); + }, + onError: error => { + console.error('API 호출 실패:', error); + }, + }); + } const initialHostState: HostCreationRequest = { profileImageUrl: '', hostChannelName: '', @@ -45,7 +64,7 @@ const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelI createHost(hostState, { onSuccess: () => { setHostState(initialHostState); - handleNext(String(currentStep - 1)); + goTo(StepNames.HostSelection); }, onError: error => { const message = error?.message || '호스트 생성에 실패했습니다. 다시 시도해주세요.'; @@ -59,8 +78,8 @@ const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelI handleNext(String(currentStep + 2))} - onPrev={() => navigate('/')} + onNext={() => goTo(StepNames.EventTitle)} + onPrev={() => navigate(backPath)} requireValidation={true} > @@ -70,7 +89,7 @@ const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelI handleHostCreation()} - onPrev={() => onPrev(String(currentStep - 1))} + onPrev={() => goTo(StepNames.HostSelection)} requireValidation={true} > @@ -79,9 +98,8 @@ const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelI handleNext(String(currentStep + 1))} - onPrev={() => onPrev(String(currentStep - 1))} - goHome={true} + onNext={() => goTo(StepNames.EventPeriod)} + onPrev={() => goTo(StepNames.HostSelection)} requireValidation={true} > @@ -90,8 +108,8 @@ const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelI handleNext(String(currentStep + 1))} - onPrev={() => onPrev(String(currentStep - 1))} + onNext={() => goTo(StepNames.EventOrganizerInfo)} + onPrev={() => goTo(StepNames.EventTitle)} > @@ -99,8 +117,8 @@ const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelI handleNext(String(currentStep + 1))} - onPrev={() => onPrev(String(currentStep - 1))} + onNext={() => goTo(StepNames.EventInfo)} + onPrev={() => goTo(StepNames.EventPeriod)} requireValidation={true} > @@ -109,8 +127,8 @@ const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelI handleNext(String(currentStep + 1))} - onPrev={() => onPrev(String(currentStep - 1))} + onNext={() => goTo(StepNames.EventType)} + onPrev={() => goTo(StepNames.EventOrganizerInfo)} requireValidation={true} > @@ -119,16 +137,16 @@ const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelI handleNext(String(currentStep + 1))} - onPrev={() => onPrev(String(currentStep - 1))} + onNext={() => goTo(StepNames.EventTag)} + onPrev={() => goTo(StepNames.EventInfo)} > handleNext(String(currentStep + 1))} - onPrev={() => onPrev(String(currentStep - 1))} + onNext={() => handleCreateEvent()} + onPrev={() => goTo(StepNames.EventType)} > diff --git a/src/pages/menu/ui/MenuPage.tsx b/src/pages/menu/ui/MenuPage.tsx index 049ceb67..1dc6ee48 100644 --- a/src/pages/menu/ui/MenuPage.tsx +++ b/src/pages/menu/ui/MenuPage.tsx @@ -1,13 +1,17 @@ import { flexColumn } from '../../../../design-system/styles/flex'; import HorizontalCardButton from '../../../../design-system/ui/buttons/HorizontalCardButton'; -import { useNavigate } from 'react-router-dom'; +import { NavigateOptions, To, useNavigate } from 'react-router-dom'; import Header from '../../../../design-system/ui/Header'; import { getButtonData } from '../../../shared/types/menuType'; import BottomBar from '../../../widgets/main/ui/BottomBar'; -const handleIconClick = (navigate: (path: string) => void, path: string, url?: string) => { +const handleIconClick = (navigate: (to: To, options?: NavigateOptions) => void, path: string, url?: string, backPath?: string) => { if (url) { window.open(url, '_blank'); + } else if (path && backPath) { + navigate(path, { + state: { backPath: '/menu' }, + }); } else if (path) { navigate(path); } @@ -27,7 +31,7 @@ const MenuPage = () => { iconPath={{button.label}} hoverIconPath={{button.label}} label={button.label} - onClick={() => handleIconClick(navigate, button.path, button.url)} + onClick={() => handleIconClick(navigate, button.path, button.url, button.backPath)} /> {button.label !== '내 호스트' && index !== buttonData.length - 1 && (
diff --git a/src/shared/types/menuType.ts b/src/shared/types/menuType.ts index 05787407..3cfd2737 100644 --- a/src/shared/types/menuType.ts +++ b/src/shared/types/menuType.ts @@ -22,6 +22,7 @@ export interface buttonData { label: string; // 버튼 텍스트 path: string; // 경로 url?: string; // 외부 url + backPath?: string } export const getButtonData = (): buttonData[] => { @@ -30,7 +31,7 @@ export const getButtonData = (): buttonData[] => { const baseButtons: buttonData[] = [ { iconPath: Ticket, hoverIconPath: SelectedTicket, label: '구입한 티켓', path: '/menu/myTicket' }, { iconPath: Host, hoverIconPath: SelectedHost, label: '내 호스트', path: '/menu/myHost' }, - { iconPath: Event, hoverIconPath: SelectedEvent, label: '이벤트 주최하기', path: '/event-creation' }, + { iconPath: Event, hoverIconPath: SelectedEvent, label: '이벤트 주최하기', path: '/event-creation', backPath:'/menu' }, { iconPath: Setting, hoverIconPath: SelectedSetting, label: '마이페이지', path: '/menu/myPage' }, { iconPath: Manual, hoverIconPath: SelectedManual, label: '사용법', path: '/menu/myTicket', url: USER_MANUAL_URL }, ]; diff --git a/src/widgets/dashboard/ui/response/ResponseModal.tsx b/src/widgets/dashboard/ui/response/ResponseModal.tsx index 1cfe8db9..c39bffdf 100644 --- a/src/widgets/dashboard/ui/response/ResponseModal.tsx +++ b/src/widgets/dashboard/ui/response/ResponseModal.tsx @@ -31,7 +31,7 @@ const ResponesModal = ({ onClose }: ResponesModalProps) => { onClose(); }} /> -

응답을 확인할 티켓을 선택하세요

+

응답을 확인할 티켓을 선택하세요

{isLoading ? (
로딩 중...
diff --git a/src/widgets/dashboard/ui/ticket/SelectTicketInfo.tsx b/src/widgets/dashboard/ui/ticket/SelectTicketInfo.tsx index f26e0045..749ebc9e 100644 --- a/src/widgets/dashboard/ui/ticket/SelectTicketInfo.tsx +++ b/src/widgets/dashboard/ui/ticket/SelectTicketInfo.tsx @@ -12,8 +12,8 @@ const SelectTicketInfo = ({ tickets, onClick }: SelectTicketInfoProps) => {
티켓 아이콘 -

{tickets.ticketName}

-

{tickets.ticketPrice}원

+

{tickets.ticketName}

+

{tickets.ticketPrice}원