feat: 사용 매뉴얼 연결

src/features/home/ui/EventSliderSection.tsx

@@ -38,23 +38,30 @@ const EventSliderSection = ({ title, events }: EventSliderSectionProps) => {
   const eventsToShow =
     filteredEvents.length > 0
       ? filteredEvents
-          .slice(startIndex, startIndex + maxCardsToShow)
-          .concat(
-            startIndex + maxCardsToShow > filteredEvents.length
-              ? filteredEvents.slice(0, (startIndex + maxCardsToShow) % filteredEvents.length)
-              : []
-          )
+        .slice(startIndex, startIndex + maxCardsToShow)
+        .concat(
+          startIndex + maxCardsToShow > filteredEvents.length
+            ? filteredEvents.slice(0, (startIndex + maxCardsToShow) % filteredEvents.length)
+            : []
+        )
       : [];
 
   return (
     <div className="relative w-full px-6">
       <h2 className="sm:mb-3 md:mb-3.5 lg:mb-4 font-bold sm:text-sm md:text-base lg:text-lg">{title}</h2>
-      <div className="flex gap-4">
+      <div className="flex gap-4 justify-center">
         {filteredEvents.length === 0 ? (
           <div className="w-full text-center text-gray-500">표시할 이벤트가 없습니다.</div>
         ) : (
           eventsToShow.map((event: EventItem) => (
-            <div key={event.id} className="w-full h-full min-h-[200px] max-w-sm min-w-[200px]">
+            <div
+              key={event.id}
+              className="
+                  h-full min-h-[200px]
+                  lg:min-w-[220px]  sm:min-w-[160px] w-[100%] sm:w-[40%]
+                  max-w-sm
+                "
+            >
               <EventCard
                 key={event.id}
                 id={event.id}
@@ -69,6 +76,7 @@ const EventSliderSection = ({ title, events }: EventSliderSectionProps) => {
                 onClick={() => navigate(`/event-details/${event.id}`)}
               />
             </div>
+
           ))
         )}
         {eventsToShow.length === 1 && (
@@ -83,7 +91,7 @@ const EventSliderSection = ({ title, events }: EventSliderSectionProps) => {
               eventDate=""
               location=""
               hashtags={[]}
-              onClick={() => {}}
+              onClick={() => { }}
             />
           </div>
         )}

src/pages/home/ui/MainPage.tsx

@@ -13,7 +13,9 @@ import useAuthStore from '../../../app/provider/authStore';
 import EventTags from '../../../features/home/ui/EventTags';
 import ProfileCircle from '../../../../design-system/ui/Profile';
 import useEventList from '../../../entities/event/hook/useEventListHook';
-
+import FloatingButton from '../../../shared/ui/FloatingButton';
+import manualIcon from '../../../../public/assets/menu/help.svg';
+import { USER_MANUAL_URL } from '../../../shared/types/menuType';
 const MainPage = () => {
   const navigate = useNavigate();
   const { isModalOpen, openModal, closeModal, isLoggedIn, name } = useAuthStore();
@@ -35,13 +37,13 @@ const MainPage = () => {
   };
 
   return (
-    <div className="flex flex-col items-center pb-24">
+    <div className="relative flex flex-col items-center pb-24">
       <Header
         centerContent={
           <SearchTextField
             iconPath={<img src={searchIcon} alt="Search" />}
             onClick={() => navigate('/search')}
-            onChange={() => {}}
+            onChange={() => { }}
             placeholder="검색어를 입력해주세요"
           />
         }
@@ -84,6 +86,11 @@ const MainPage = () => {
       >
         전체 이벤트 보러가기 <span className="ml-1.5">&gt;</span>
       </button>
+      <div className="sticky w-full flex justify-end px-6 z-50">
+        <FloatingButton ariaLabel="사용법" onClick={() => window.open(USER_MANUAL_URL, '_blank')} className='bottom-24'>
+          <img src={manualIcon} alt="사용법" className="w-full h-full" />
+        </FloatingButton>
+      </div>
       <BottomBar />
     </div>
   );

src/pages/menu/ui/MenuPage.tsx

@@ -5,8 +5,12 @@ 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) => {
-  navigate(path);
+const handleIconClick = (navigate: (path: string) => void, path: string, url?: string) => {
+  if (url) {
+    window.open(url, '_blank');
+  } else if (path) {
+    navigate(path);
+  }
 };
 
 const MenuPage = () => {
@@ -23,7 +27,7 @@ const MenuPage = () => {
               iconPath={<img src={button.iconPath} alt={button.label} className="w-6 h-6 md:w-7 md:h-7" />}
               hoverIconPath={<img src={button.hoverIconPath} alt={button.label} className="w-6 h-6 md:w-7 md:h-7" />}
               label={button.label}
-              onClick={() => handleIconClick(navigate, button.path)}
+              onClick={() => handleIconClick(navigate, button.path, button.url)}
             />
             {button.label !== '내 호스트' && index !== buttonData.length - 1 && (
               <hr className="mt-5 border-[0.5px] border-gray4" />

src/pages/menu/ui/myHost/MyHostPage.tsx

@@ -7,6 +7,9 @@ import useHostChannelList from '../../../../entities/host/hook/useHostChannelLis
 import useHostDetail from '../../../../entities/host/hook/useHostDetailHook';
 import TertiaryButton from '../../../../../design-system/ui/buttons/TertiaryButton';
 import useAuthStore from '../../../../app/provider/authStore';
+import FloatingButton from '../../../../shared/ui/FloatingButton';
+import manualIcon from '../../../../../public/assets/menu/help.svg';
+import { HOST_MANUAL_URL } from '../../../../shared/types/menuType';
 
 const MyHostPage = () => {
   const [selectedHostId, setSelectedHostId] = useState<number | null>(null);
@@ -78,6 +81,11 @@ const MyHostPage = () => {
             />
           ))}
       </div>
+      <div className="sticky w-full flex justify-end px-6 z-50">
+        <FloatingButton ariaLabel="사용법" onClick={() => window.open(HOST_MANUAL_URL, '_blank')} className='bottom-8'>
+          <img src={manualIcon} alt="사용법" className="w-full h-full" />
+        </FloatingButton>
+      </div>
     </TicketHostLayout>
   );
 };

src/shared/types/menuType.ts

@@ -9,12 +9,19 @@ import SelectedHost from '../../../public/assets/menu/SelectedHost.svg';
 import SelectedLogout from '../../../public/assets/menu/SelectedLogout.svg';
 import SelectedSetting from '../../../public/assets/menu/SelectedSetting.svg';
 import useAuthStore from '../../app/provider/authStore';
+import Manual from '../../../public/assets/menu/manual.svg';
+import SelectedManual from '../../../public/assets/menu/SelectedManual.svg';
+
+export const USER_MANUAL_URL = 'https://namu00.notion.site/209eaffb9b0e803d9bc3da1fa0be5496';
+export const HOST_MANUAL_URL = 'https://namu00.notion.site/209eaffb9b0e80caa0dae68c1e12ed0f';
+
 
 export interface buttonData {
   iconPath: string; // 아이콘 경로
   hoverIconPath: string; // 호버 아이콘 경로
   label: string; // 버튼 텍스트
   path: string; // 경로
+  url?: string; // 외부 url
 }
 
 export const getButtonData = (): buttonData[] => {
@@ -25,6 +32,7 @@ export const getButtonData = (): buttonData[] => {
     { iconPath: Host, hoverIconPath: SelectedHost, label: '내 호스트', path: '/menu/myHost' },
     { iconPath: Event, hoverIconPath: SelectedEvent, label: '이벤트 주최하기', path: '/event-creation' },
     { iconPath: Setting, hoverIconPath: SelectedSetting, label: '마이페이지', path: '/menu/myPage' },
+    { iconPath: Manual, hoverIconPath: SelectedManual, label: '사용법', path: '/menu/myTicket', url: USER_MANUAL_URL },
   ];
 
   if (isLoggedIn) {

src/shared/ui/EventCard.tsx

@@ -43,7 +43,7 @@ const EventCard = ({
   isDelete = false,
   onDeleteSuccess,
   onlineType,
-  aspectRatio = 'md:aspect-[3/4.3] sm:aspect-[3/4.5]'
+  aspectRatio = 'md:aspect-[3/4.3] sm:aspect-[3/5]'
 }: EventCardProps) => {
   const navigate = useNavigate();
   const { pathname } = useLocation();

src/shared/ui/FloatingButton.tsx

@@ -0,0 +1,36 @@
+import { motion } from 'framer-motion';
+import classNames from 'classnames';
+
+interface FloatingButtonProps {
+  onClick: () => void;
+  children: React.ReactNode;
+  className?: string;
+  ariaLabel: string;
+}
+
+const FloatingButton = ({
+  onClick,
+  children,
+  className,
+  ariaLabel,
+}: FloatingButtonProps) => {
+  return (
+    <motion.button
+      whileTap={{ scale: 0.9 }}
+      whileHover={{ scale: 1.05 }}
+      onClick={onClick}
+      aria-label={ariaLabel}
+      className={classNames(
+        'fixed right-100 ',
+        'z-50 flex items-center justify-center',
+        'rounded-full shadow-lg',
+        'w-12 h-12 sm:w-10 sm:h-10 lg:w-12 lg:h-12',
+        className,
+      )}
+    >
+      {children}
+    </motion.button>
+  );
+};
+
+export default FloatingButton;