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 ( - );