feat: page 추가

Author: gihwan-dev

src/main.tsx

@@ -10,6 +10,8 @@ import { JoinPage, LoginPage, ResetPwPage, NotFound, Policy } from './pages/inde
 import ProtectedRoute from './providers/ProtectedRoute.tsx';
 
 import UserInvite from './components/common/UserInvite.tsx';
+import EditGroupPage from './pages/EditGroupPage.tsx';
+import AddGroupPage from './pages/AddGroupPage.tsx';
 
 const router = createBrowserRouter([
   {
@@ -24,9 +26,17 @@ const router = createBrowserRouter([
         ),
       },
       {
-        path: 'userInvite',
+        path: '/userInvite',
         element: <UserInvite />,
       },
+      {
+        path: '/edit-group/:id',
+        element: <EditGroupPage />,
+      },
+      {
+        path: '/add-group',
+        element: <AddGroupPage />,
+      },
       {
         path: '/login',
         element: <LoginPage />,

src/pages/AddGroupPage.tsx

@@ -0,0 +1,19 @@
+import GroupForm from '@/components/GroupForm/GroupForm';
+import AppBar from '@/components/common/AppBar';
+
+const AddGroupPage = () => {
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    console.log(formData);
+  };
+
+  return (
+    <div className="flex min-h-dvh w-screen flex-col overflow-x-hidden px-6">
+      <AppBar backButton title={'모임 일정 등록하기'} />
+      <GroupForm onSubmit={handleSubmit} />
+    </div>
+  );
+};
+
+export default AddGroupPage;

src/pages/EditGroupPage.tsx

@@ -0,0 +1,29 @@
+import GroupForm from '@/components/GroupForm/GroupForm';
+import AppBar from '@/components/common/AppBar';
+
+const EditGroupPage = () => {
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    console.log(formData);
+  };
+
+  return (
+    <div className="flex min-h-dvh w-screen flex-col overflow-x-hidden px-4">
+      <AppBar backButton title={'모임 일정 등록하기'} />
+      {/**
+       * // TODO: 기본값을 서버에서 받아와서 넘겨줘야 합니다.
+       */}
+      <GroupForm
+        onSubmit={handleSubmit}
+        name=""
+        description=""
+        endDate={new Date().toString()}
+        memo=""
+        startDate={new Date().toString()}
+      />
+    </div>
+  );
+};
+
+export default EditGroupPage;

src/pages/index.ts

@@ -1,6 +1,6 @@
 import ResetPwPage from './ResetPwPage';
 import JoinPage from './JoinPage';
-import Loading from './Loading';
+import Loading from '../components/common/Loading/Loading';
 import LoginPage from './LoginPage';
 import { NotFound } from './Notfound';
 

src/styles/index.css

@@ -2,7 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-
 .userInvite {
   display: flex;
   justify-content: center;
@@ -14,6 +13,7 @@
 }
 .userInvite svg {
   margin: auto;
+}
 
 @media (min-width: 1024px) {
   .drawer-toggle {