Fix: 플로팅버튼 추가 및 라우터 추가

src/app/router/lazy.ts

@@ -2,3 +2,4 @@ import { lazy } from 'react';
 
 export const MainPage = lazy(() => import('@page/main-page'));
 export const MyPage = lazy(() => import('@page/my-page'));
+export const CreatPage = lazy(() => import('@page/create-page'));

src/app/router/path.ts

@@ -1,6 +1,7 @@
 export const routePath = {
   MAIN: '/',
   MY: '/MY',
+  CREATE: '/create',
 } as const;
 
 export type Routes = (typeof routePath)[keyof typeof routePath];

src/app/router/routes/global-routes.tsx

@@ -1,5 +1,5 @@
 import { routePath } from '@app/router/path';
-import { MainPage, MyPage } from '@app/router/lazy';
+import { CreatPage, MainPage, MyPage } from '@app/router/lazy';
 
 export const globalRoutes = [
   {
@@ -10,4 +10,8 @@ export const globalRoutes = [
     path: '/my',
     element: <MyPage />,
   },
+  {
+    path: '/create',
+    element: <CreatPage />,
+  },
 ];

src/page/create-page.tsx

@@ -0,0 +1,5 @@
+const CreatPage = () => {
+  return <div>creatPage</div>;
+};
+
+export default CreatPage;

src/page/main-page.tsx

@@ -9,6 +9,8 @@ import { RadioContent } from '@widgets/main/bottom-sheet/contents/radio/radio-co
 import { Card } from '@widgets/main/card/card';
 import { NotificationPanel } from '@widgets/main/notification/notificationPanel';
 import { useNavigate } from 'react-router';
+import { FloatingActionButton } from '@shared/ui/floatingActionButton';
+import PlusIcon from '@shared/assets/icon/plus.svg?react';
 
 export type SortType = 'latest' | 'near';
 type SheetType = 'location' | 'sort' | null;
@@ -30,6 +32,30 @@ const mockCards = [
     count: '3 / 10',
     location: '역삼 체육관',
   },
+  {
+    id: 3,
+    image: 'https://via.placeholder.com/102x128',
+    title: '역삼동 공터에서 경도 할 사람 찾고 있어요!! (성인만)',
+    date: '01.01 / 13:40',
+    count: '1 / 20',
+    location: '개나리 공원',
+  },
+  {
+    id: 4,
+    image: 'https://via.placeholder.com/102x128',
+    title: '역삼동 공터에서 경도 할 사람 찾고 있어요!! (성인만)',
+    date: '01.01 / 13:40',
+    count: '1 / 20',
+    location: '개나리 공원',
+  },
+  {
+    id: 5,
+    image: 'https://via.placeholder.com/102x128',
+    title: '역삼동 공터에서 경도 할 사람 찾고 있어요!! (성인만)',
+    date: '01.01 / 13:40',
+    count: '1 / 20',
+    location: '개나리 공원',
+  },
 ];
 const mockNotifications = [
   {
@@ -100,6 +126,15 @@ const MainPage = () => {
           />
         ))}
       </div>
+      <FloatingActionButton
+        icon={
+          <PlusIcon
+            width={'2rem'}
+            height={'2rem'}
+            onClick={() => navigate('/create')}
+          />
+        }
+      />
       <BottomSheet.Root
         isOpen={openSheet !== null}
         onClose={() => setOpenSheet(null)}

src/shared/ui/floatingActionButton.tsx

@@ -2,11 +2,18 @@ import type { ReactNode } from 'react';
 
 interface FloatingActionButtonProps {
   icon: ReactNode;
+  onClick?: () => void;
 }
 
-export function FloatingActionButton({ icon }: FloatingActionButtonProps) {
+export function FloatingActionButton({
+  icon,
+  onClick,
+}: FloatingActionButtonProps) {
   return (
-    <button className="rounded-[24px] text-white w-[4.4rem] h-[4.4rem] flex justify-center items-center bg-primary">
+    <button
+      onClick={onClick}
+      className="fixed right-[2.4rem] bottom-[5.4rem] z-50 rounded-[24px] text-white w-[4.4rem] h-[4.4rem] flex justify-center items-center bg-primary"
+    >
       {icon}
     </button>
   );