refactor: 이벤트 및 티켓 리팩토링

src/features/event/ui/EventFunnel.tsx

@@ -47,6 +47,10 @@ const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelI
         setHostState(initialHostState);
         handleNext(String(currentStep - 1));
       },
+      onError: (error: any) => {
+        const message = error?.message || '호스트 생성에 실패했습니다. 다시 시도해주세요.';
+        alert(message);
+      },
     });
   };
 
@@ -56,7 +60,7 @@ const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelI
         <EventRegisterLayout
           title="이벤트를 호스팅할 채널을 선택해주세요"
           onNext={() => handleNext(String(currentStep + 2))}
-          onPrev={() => navigate(-1)}
+          onPrev={() => navigate('/')}
           requireValidation={true}
         >
           <HostSelectionPage onNext={handleNext} currentStep={currentStep} />

src/features/home/ui/EventSliderSection.tsx

@@ -65,6 +65,7 @@ const EventSliderSection = ({ title, events }: EventSliderSectionProps) => {
                 eventDate={event.startDate}
                 location={event.address}
                 hashtags={event.hashtags}
+                onlineType={event.onlineType}
                 onClick={() => navigate(`/event-details/${event.id}`)}
               />
             </div>

src/features/join/hooks/useUserHook.ts

@@ -13,15 +13,15 @@ export const useUserInfo = (enabled: boolean = true) => {
 export const useUserUpdate = () => {
   return useMutation<UserInfoResponse, Error, UserInfoRequest>({
     mutationFn: updateUser,
+    onError: (error) => {
+      alert(error.message);
+    }
   });
 };
 
 export const useAgreeTerms = () => {
   return useMutation({
     mutationFn: agreeTerms,
-    onSuccess: () => {
-      alert('이용약관 동의 완료');
-    },
     onError: (error) => {
       alert('동의 처리 실패');
       console.error('이용약관 동의 실패', error);

src/features/ticket/ui/QrScanner.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import QrScanner from "qr-scanner";
 import { useTicketQrCodeValidate } from "../hooks/useOrderHook";
+import Button from "../../../../design-system/ui/Button";
 
 const QrScannerComponent = () => {
     const videoRef = useRef<HTMLVideoElement>(null);
@@ -53,7 +54,6 @@ const QrScannerComponent = () => {
     };
 
     const checkInApiCall = async (qrData: string) => {
-        console.log("스캔된 QR 데이터:", qrData);
         try {
             const params = new URLSearchParams(qrData.replace(/-/g, '='));
             const orderIdStr = params.get('orderId');
@@ -72,24 +72,13 @@ const QrScannerComponent = () => {
 
     return (
         <div className="p-4">
-            <h2 className="text-xl font-bold mb-2">QR 코드 스캔</h2>
             <video
                 ref={videoRef}
                 className="border rounded w-full max-w-md"
-                style={{ aspectRatio: "4 / 3" }}
+                style={{ aspectRatio: "3 / 4" }}
             />
             {!isScanning && (
-                <button
-                    onClick={handleStartScan}
-                    className="mt-4 px-4 py-2 bg-blue-600 text-white rounded"
-                >
-                    스캔 시작
-                </button>
-            )}
-            {scanResult && (
-                <p className="mt-4 text-green-700 font-semibold">
-                    스캔 결과: {scanResult}
-                </p>
+                <Button label="스캔하기" onClick={handleStartScan} className="w-full h-12 rounded-full mt-10 px-4 py-2" />
             )}
         </div>
     );

src/pages/dashboard/ui/DashbaordPage.tsx

@@ -11,7 +11,7 @@ const DashboardPage = () => {
   const formattedPrice = data?.totalPrice.toLocaleString();
 
   return (
-    <DashboardLayout centerContent="대시보드" pinkBg={true}>
+    <DashboardLayout centerContent="DASHBOARD" pinkBg={true}>
       <div className="flex flex-col mt-8 md:mt-13 px-7 gap-4">
         <h1 className="text-2xl font-bold">{data?.eventName || '이벤트 이름 없음'}</h1>
         <CheckList />

src/pages/dashboard/ui/EventDetailPage.tsx

@@ -63,7 +63,7 @@ const EventDetailPage = () => {
   };
 
   return (
-    <DashboardLayout centerContent="WOOACON 2024">
+    <DashboardLayout centerContent="대시보드">
       <div className="flex flex-col gap-5 mt-8 px-7">
         <h1 className="text-center text-xl font-bold mb-5">이벤트 상세 정보</h1>
         <FileUpload value={bannerImageUrl} onChange={setBannerImageUrl} useDefaultImage={false} />

src/pages/dashboard/ui/EventTagPage.tsx

@@ -8,7 +8,7 @@ const EventTagPage = () => {
   const navigate = useNavigate();
 
   return (
-    <DashboardLayout centerContent="WOOACON 2024">
+    <DashboardLayout centerContent="DASHBOARD">
       <div className="flex flex-col gap-5 mt-8 px-7">
         <h1 className="text-center text-xl font-bold mb-5">이벤트 태그 정보</h1>
         <EventCategory />

src/pages/dashboard/ui/ParticipantsMangementPage.tsx

@@ -31,7 +31,7 @@ const ParticipantsManagementPage = () => {
   });
 
   return (
-    <DashboardLayout centerContent="WOOACON 2024" pinkBg={true}>
+    <DashboardLayout centerContent="DASHBOARD" pinkBg={true}>
       <div className="flex flex-col px-2 md:px-4">
         <h1 className="text-center font-bold text-xl py-4 md:py-6">구매/참가자 관리</h1>
         <div className="flex justify-end gap-2 md:gap-3 px-4">

src/pages/dashboard/ui/ResponseManagementPage.tsx

@@ -12,7 +12,7 @@ const ResponseManagementPage = () => {
   const { data, isLoading, isError } = usePurchaserAnswers(selectedTicketId);
   const orderCount = data?.result?.orderCount ?? 0;
   return (
-    <DashboardLayout centerContent="WOOACON 2024" pinkBg={true}>
+    <DashboardLayout centerContent="DASHBOARD" pinkBg={true}>
       {isModalOpen && (
         <ResponesModal onClose={closeModal}></ResponesModal>
       )}

src/pages/dashboard/ui/mail/EmailEditPage.tsx

@@ -36,7 +36,7 @@ const EmailEditPage = () => {
   };
 
   return (
-    <DashboardLayout centerContent="WOOACON 2024">
+    <DashboardLayout centerContent="DASHBOARD">
       <div className="flex flex-col gap-5 mt-8 px-7">
         <EmailInput
           type="이메일 내용 수정"

src/pages/dashboard/ui/mail/EmailPage.tsx

@@ -51,7 +51,7 @@ const EmailPage = () => {
   };
 
   return (
-    <DashboardLayout centerContent="WOOACON 2024">
+    <DashboardLayout centerContent="DASHBOARD">
       <div className="p-5 flex flex-col gap-10 min-h-full">
         <EmailInput
           openSelectTicket={() => setTicketModalOpen(true)}

src/pages/dashboard/ui/mail/MailBoxPage.tsx

@@ -24,7 +24,7 @@ const MailBoxPage = () => {
   };
 
   return (
-    <DashboardLayout centerContent="WOOACON 2024">
+    <DashboardLayout centerContent="DASHBOARD">
       <div className={`flex flex-col gap-2 mt-8 px-7 ${isModalOpen ? 'blur-sm' : ''}`}>
         <h1 className="w-full text-center font-bold text-xl">보낸 메일함</h1>
         <div className="flex justify-end">

src/pages/dashboard/ui/ticket/CheckInPage.tsx

@@ -1,11 +1,17 @@
 import QrScannerComponent from "../../../../features/ticket/ui/QrScanner";
+import DashboardLayout from "../../../../shared/ui/backgrounds/DashboardLayout";
 
 const CheckInPage = () => {
   return (
-    <div className="max-w-screen-md mx-auto">
-      <h1 className="text-2xl font-bold mb-4">체크인 스캐너</h1>
-      <QrScannerComponent />
-    </div>
+    <DashboardLayout centerContent="DASHBOARD">
+      <div className='flex flex-col gap-2 mt-8 px-7'>
+        <h1 className="w-full text-center font-bold text-xl">QR 코드 스캔</h1>
+        <div className="max-w-screen-md mx-auto">
+          <QrScannerComponent />
+        </div>
+      </div>
+    </DashboardLayout>
+
   );
 };
 

src/pages/dashboard/ui/ticket/TicketCreatePage.tsx

@@ -90,7 +90,7 @@ const TicketCreatePage = () => {
   };
 
   return (
-    <DashboardLayout centerContent="WOOACON 2024">
+    <DashboardLayout centerContent="DASHBOARD">
       <div className=" flex flex-col gap-3 md:gap-5 px-7 py-5">
         <div className="w-full text-center font-bold text-xl">티켓(입장권)</div>
         <p className="text-gray-400 text-11 md:text-xs">

src/pages/dashboard/ui/ticket/TicketListPage.tsx

@@ -20,7 +20,7 @@ const TicketListPage = () => {
   if (isError) return <div>티켓 정보를 불러오는 중 오류가 발생했습니다.</div>;
 
   return (
-    <DashboardLayout centerContent="WOOACON 2024">
+    <DashboardLayout centerContent="DASHBOARD">
       <div className="mt-8 px-7">
         <div className="text-center text-xl font-bold mb-5">티켓(입장권)</div>
         <p className="text-gray-400 text-sm mb-5">

src/pages/dashboard/ui/ticket/TicketOptionCreatePage.tsx

@@ -25,7 +25,7 @@ const TicketOptionCreatePage = () => {
   }, [isEditing, optionDetail]);
 
   return (
-    <DashboardLayout centerContent="WOOACON 2024">
+    <DashboardLayout centerContent="대시보드">
       <div className="mt-8 px-7">
         <div className="text-center text-xl font-bold mb-5">티켓 옵션 생성</div>
         <p className="text-gray-400 text-sm mb-5">티켓 옵션을 생성할 수 있습니다.</p>

src/pages/dashboard/ui/ticket/TicketOptionPage.tsx

@@ -66,7 +66,7 @@ const TicketOptionPage = () => {
     : [];
 
   return (
-    <DashboardLayout centerContent="WOOACON 2024">
+    <DashboardLayout centerContent="DASHBOARDs">
       <div className="mt-8 px-7">
         <div className="text-center text-xl font-bold mb-5">티켓에 추가 옵션 부착 하기</div>
         <p className="text-placeholderText text-xs mb-5">

src/pages/event/ui/AllEventsPage.tsx

@@ -8,6 +8,7 @@ import { useNavigate } from 'react-router-dom';
 import useAuthStore from '../../../app/provider/authStore';
 import { AnimatePresence } from 'framer-motion';
 import LoginModal from '../../../widgets/main/ui/LoginModal';
+import ProfileCircle from '../../../../design-system/ui/Profile';
 
 const AllEventsPage = () => {
   const navigater = useNavigate();
@@ -21,19 +22,18 @@ const AllEventsPage = () => {
             iconPath={<img src={searchIcon} alt="searchIcon" />}
             onClick={() => navigater('/search')}
             onChange={() => {}}
-            placeholder="입력해주세요"
+            placeholder="검색어를 입력해주세요"
           />
         }
         leftButtonClassName="sm:text-lg md:text-xl lg:text-2xl font-extrabold font-nexon"
         leftButtonClick={() => navigater('/')}
         leftButtonLabel="같이가요"
         rightContent={
-          <SecondaryButton
-            size="large"
-            color="black"
-            label={isLoggedIn ? `${name}님` : '로그인'}
-            onClick={isLoggedIn ? closeModal : openModal}
-          />
+          isLoggedIn ? (
+            <ProfileCircle profile="userProfile" name={name?.slice(1, 3) || ''} className="w-11 h-11 text-15" />
+          ) : (
+            <SecondaryButton size="large" color="black" label="로그인" onClick={openModal} />
+          )
         }
       />
       <AnimatePresence>{isModalOpen && <LoginModal onClose={closeModal} />}</AnimatePresence>

src/pages/event/ui/EventDetailsPage.tsx

@@ -136,24 +136,27 @@ const EventDetailsPage = () => {
             <h2 className="font-bold text-xl">티켓 옵션</h2>
             <TicketInfo eventId={event.result.id} />
 
-            <div className="flex flex-col gap-2">
-              <h2 className="font-bold text-xl">관련 링크</h2>
-              <div className="flex flex-col gap-3 mb-4">
-                {event.result.referenceLinks.map((link: { title: string; url: string }, index: number) => (
-                  <div key={index} className="flex items-center gap-2">
-                    <img src={linkIcon} alt="링크 이모지" />
-                    <a
-                      href={link.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-blue-500 underline"
-                    >
-                      {link.title}
-                    </a>
-                  </div>
-                ))}
-              </div>
-            </div>
+            {event.result.referenceLinks && event.result.referenceLinks.length > 0 && (
+  <div className="flex flex-col gap-2">
+    <h2 className="font-bold text-xl">관련 링크</h2>
+    <div className="flex flex-col gap-3 mb-4">
+      {event.result.referenceLinks.map((link: { title: string; url: string }, index: number) => (
+        <div key={index} className="flex items-center gap-2">
+          <img src={linkIcon} alt="링크 이모지" />
+          <a
+            href={link.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-500 underline"
+          >
+            {link.title}
+          </a>
+        </div>
+      ))}
+    </div>
+  </div>
+)}
+
           </div>
         </>
       ) : (

src/pages/home/ui/MainPage.tsx

@@ -42,7 +42,7 @@ const MainPage = () => {
             iconPath={<img src={searchIcon} alt="Search" />}
             onClick={() => navigate('/search')}
             onChange={() => {}}
-            placeholder="입력해주세요"
+            placeholder="검색어를 입력해주세요"
           />
         }
         leftButtonClassName="sm:text-lg md:text-xl lg:text-2xl font-extrabold font-nexon"

src/pages/join/AgreementPage.tsx

@@ -4,28 +4,13 @@ import Button from '../../../design-system/ui/Button';
 import AgreementList from '../../features/join/ui/AgreementList';
 import { useAgreementStore } from '../../features/join/model/agreementStore';
 import { useNavigate } from 'react-router-dom';
-import { useAgreeTerms } from '../../features/join/hooks/useUserHook';
-import { TermsAgreementRequest } from '../../features/join/model/userInformation';
 
 const AgreementPage: React.FC = () => {
-  const { isAllRequiredAgreed, getAgreementStates } = useAgreementStore();
+  const { isAllRequiredAgreed } = useAgreementStore();
   const navigate = useNavigate();
-  const { mutate:agreeTerms } = useAgreeTerms();
 
   const handleAgree = () => {
-    const states = getAgreementStates();
-    const agreementData: TermsAgreementRequest = {
-      serviceAgreed: states.serviceAgreed,
-      privacyPolicyAgree: states.privacyPolicyAgree,
-      personalInfoUsageAgreed: states.personalInfoUsageAgreed,
-      marketingAgreed: states.marketingAgreed,
-    };
-
-    agreeTerms(agreementData, {
-      onSuccess: () => {
-        navigate('/join/info-input');
-      },
-    });
+    navigate('/join/info-input');
   };
 
   return (