diff --git a/src/app/router/lazy.ts b/src/app/router/lazy.ts
index cd516c5..799788d 100644
--- a/src/app/router/lazy.ts
+++ b/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'));
diff --git a/src/app/router/path.ts b/src/app/router/path.ts
index 583a5e5..2ce23b6 100644
--- a/src/app/router/path.ts
+++ b/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];
diff --git a/src/app/router/routes/global-routes.tsx b/src/app/router/routes/global-routes.tsx
index 56cbe26..6624625 100644
--- a/src/app/router/routes/global-routes.tsx
+++ b/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: ,
},
+ {
+ path: '/create',
+ element: ,
+ },
];
diff --git a/src/page/create-page.tsx b/src/page/create-page.tsx
new file mode 100644
index 0000000..93e7ce1
--- /dev/null
+++ b/src/page/create-page.tsx
@@ -0,0 +1,5 @@
+const CreatPage = () => {
+ return
creatPage
;
+};
+
+export default CreatPage;
diff --git a/src/page/main-page.tsx b/src/page/main-page.tsx
index 6b76e7d..f3dcf57 100644
--- a/src/page/main-page.tsx
+++ b/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 = () => {
/>
))}
+ navigate('/create')}
+ />
+ }
+ />
setOpenSheet(null)}
diff --git a/src/shared/ui/floatingActionButton.tsx b/src/shared/ui/floatingActionButton.tsx
index 7fbfeb9..c62169e 100644
--- a/src/shared/ui/floatingActionButton.tsx
+++ b/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 (
-