Merge pull request #509 from ttaerrim/group-new

[Feat] 그룹 생성 페이지 추가

app/frontend/src/hooks/useRouter.tsx

@@ -11,6 +11,7 @@ import {
   Groups,
   ProfilePage,
   NotFound,
+  GroupCreatePage,
 } from '@/pages';
 
 export const useRouter = () =>
@@ -50,6 +51,10 @@ export const useRouter = () =>
           path: 'groups',
           element: <Groups />,
         },
+        {
+          path: 'group/new',
+          element: <GroupCreatePage />,
+        },
       ],
     },
     {

app/frontend/src/pages/Groups/Create/GroupTypeRadio.tsx

@@ -0,0 +1,30 @@
+import { Control, useController } from 'react-hook-form';
+
+import * as styles from './index.css';
+import { GroupCreate } from './types';
+
+export function GroupTypeRadio({ control }: { control: Control<GroupCreate> }) {
+  const {
+    field: { value, onChange },
+  } = useController({
+    name: 'type',
+    control,
+  });
+
+  return (
+    <div className={styles.groupWrapper}>
+      {['public', 'private'].map((type) => (
+        <label key={type} className={styles.inputField} htmlFor={type}>
+          <input
+            type="radio"
+            name="group"
+            id={type}
+            checked={value === type}
+            onChange={(e) => onChange(e.target.id)}
+          />
+          {type === 'public' ? '공개' : '비공개'} 그룹
+        </label>
+      ))}
+    </div>
+  );
+}

app/frontend/src/pages/Groups/Create/index.css.ts

@@ -0,0 +1,30 @@
+import { style } from '@vanilla-extract/css';
+
+import { sansRegular14 } from '@/styles/font.css';
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '2.4rem',
+  maxWidth: '80rem',
+  margin: '0 auto',
+});
+
+export const groupWrapper = style({
+  display: 'flex',
+  gap: '1.2rem',
+});
+export const inputField = style([
+  sansRegular14,
+  {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.4rem',
+  },
+]);
+
+export const inputWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.8rem',
+});

app/frontend/src/pages/Groups/Create/index.tsx

@@ -0,0 +1,62 @@
+import { useController, useForm } from 'react-hook-form';
+
+import { TextLabel, Button } from '@morak/ui';
+
+import { FormInput } from '@/components';
+
+import { GroupTypeRadio } from './GroupTypeRadio';
+import * as styles from './index.css';
+import { GroupCreate } from './types';
+
+export function GroupCreatePage() {
+  const {
+    control,
+    handleSubmit,
+    formState: { isValid },
+  } = useForm<GroupCreate>({
+    defaultValues: {
+      name: '',
+      type: 'public',
+      joinType: ['approve'],
+    },
+    mode: 'all',
+  });
+
+  const {
+    field: { value: nameValue, onChange: onChangeName },
+  } = useController({
+    name: 'name',
+    control,
+    rules: {
+      required: true,
+    },
+  });
+  return (
+    <form
+      className={styles.container}
+      // TODO: POST 요청
+      onSubmit={handleSubmit((data) => console.log(data))}
+    >
+      <FormInput
+        label="그룹명"
+        required
+        value={nameValue}
+        onChange={onChangeName}
+      />
+      <div className={styles.inputWrapper}>
+        <TextLabel label="그룹 유형" required />
+        <GroupTypeRadio control={control} />
+      </div>
+      <Button
+        type="submit"
+        theme="primary"
+        shape="fill"
+        size="large"
+        fullWidth
+        disabled={!isValid}
+      >
+        확인
+      </Button>
+    </form>
+  );
+}

app/frontend/src/pages/Groups/Create/types.ts

@@ -0,0 +1,6 @@
+export type GroupCreate = {
+  name: string;
+  type: 'public' | 'private';
+  joinType: GroupJoin[];
+};
+export type GroupJoin = 'approve' | 'code';

app/frontend/src/pages/index.ts

@@ -1,5 +1,6 @@
 export * from './Calendar';
 export * from './Groups';
+export * from './Groups/Create';
 export * from './Main';
 export * from './Map';
 export * from './Mogaco';