[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/GroupJoinTypeCheckbox.tsx

@@ -0,0 +1,49 @@
+import { Control, useController } from 'react-hook-form';
+
+import * as styles from './index.css';
+import { GroupCreate } from './types';
+
+type GroupJoin = 'approve' | 'code';
+
+export function GroupJoinTypeCheckbox({
+  control,
+  required,
+}: {
+  control: Control<GroupCreate>;
+  required: boolean;
+}) {
+  const {
+    field: { value, onChange },
+  } = useController({
+    name: 'joinType',
+    control,
+    rules: {
+      validate: {
+        moreThanOne: (v) => required && v.length > 0,
+      },
+    },
+  });
+
+  const onChangeCheckbox = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const joinType = e.target.id as GroupJoin;
+    if (value.includes(joinType)) {
+      const newValue = value.filter((item) => item !== joinType);
+      onChange(newValue);
+    } else {
+      onChange([...value, joinType]);
+    }
+  };
+
+  return ['approve', 'code'].map((type) => (
+    <label key={type} className={styles.inputField} htmlFor={type}>
+      <input
+        type="checkbox"
+        id={type}
+        name={type}
+        checked={value.includes(type as GroupJoin)}
+        onChange={onChangeCheckbox}
+      />
+      {type === 'approve' ? '그룹장의 가입 승인 필요' : '참여 코드로 바로 가입'}
+    </label>
+  ));
+}

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,60 @@
+import { useForm } from 'react-hook-form';
+
+import { TextLabel, Button } from '@morak/ui';
+
+import { FormInput } from '@/components';
+
+import { GroupJoinTypeCheckbox } from './GroupJoinTypeCheckbox';
+import { GroupTypeRadio } from './GroupTypeRadio';
+import * as styles from './index.css';
+import { GroupCreate } from './types';
+
+export function GroupCreatePage() {
+  const {
+    control,
+    handleSubmit,
+    formState: { isValid },
+    watch,
+  } = useForm<GroupCreate>({
+    defaultValues: {
+      name: '',
+      type: 'public',
+      joinType: ['approve'],
+    },
+    mode: 'all',
+  });
+
+  const groupType = watch('type');
+
+  return (
+    <form
+      className={styles.container}
+      onSubmit={handleSubmit((data) => console.log(data))}
+    >
+      <FormInput label="그룹명" required />
+      <div className={styles.inputWrapper}>
+        <TextLabel label="그룹 유형" required />
+        <GroupTypeRadio control={control} />
+      </div>
+      {groupType === 'private' && (
+        <div className={styles.inputWrapper}>
+          <TextLabel label="가입 방식" required />
+          <GroupJoinTypeCheckbox
+            control={control}
+            required={groupType === 'private'}
+          />
+        </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';