From fb10b9ee95fa8edc84d8209c73fd4f95c3116f4e Mon Sep 17 00:00:00 2001
From: ttaerrim <ltr0121@naver.com>
Date: Sun, 28 Jan 2024 13:16:27 +0900
Subject: [PATCH 01/11] =?UTF-8?q?=E2=9C=A8=20=EA=B7=B8=EB=A3=B9=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/frontend/src/hooks/useRouter.tsx              |  5 +++++
 app/frontend/src/pages/Groups/Create/index.css.ts |  9 +++++++++
 app/frontend/src/pages/Groups/Create/index.tsx    | 11 +++++++++++
 app/frontend/src/pages/index.ts                   |  1 +
 4 files changed, 26 insertions(+)
 create mode 100644 app/frontend/src/pages/Groups/Create/index.css.ts
 create mode 100644 app/frontend/src/pages/Groups/Create/index.tsx

diff --git a/app/frontend/src/hooks/useRouter.tsx b/app/frontend/src/hooks/useRouter.tsx
index 75f2a8cba..4c72aec70 100644
--- a/app/frontend/src/hooks/useRouter.tsx
+++ b/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 />,
+        },
       ],
     },
     {
diff --git a/app/frontend/src/pages/Groups/Create/index.css.ts b/app/frontend/src/pages/Groups/Create/index.css.ts
new file mode 100644
index 000000000..a18f318b7
--- /dev/null
+++ b/app/frontend/src/pages/Groups/Create/index.css.ts
@@ -0,0 +1,9 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '3.6rem',
+  maxWidth: '80rem',
+  margin: '0 auto',
+});
diff --git a/app/frontend/src/pages/Groups/Create/index.tsx b/app/frontend/src/pages/Groups/Create/index.tsx
new file mode 100644
index 000000000..1a2454f9c
--- /dev/null
+++ b/app/frontend/src/pages/Groups/Create/index.tsx
@@ -0,0 +1,11 @@
+import { Input } from '@/components';
+
+import * as styles from './index.css';
+
+export function GroupCreatePage() {
+  return (
+    <form className={styles.container}>
+      <Input label="그룹명" required value="dd" />
+    </form>
+  );
+}
diff --git a/app/frontend/src/pages/index.ts b/app/frontend/src/pages/index.ts
index be3bc46ce..70f8f4827 100644
--- a/app/frontend/src/pages/index.ts
+++ b/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';

From 9438b36d9189fe61d9c17c6407ca1bd0ff444fd8 Mon Sep 17 00:00:00 2001
From: ttaerrim <ltr0121@naver.com>
Date: Sun, 28 Jan 2024 13:32:25 +0900
Subject: [PATCH 02/11] =?UTF-8?q?=F0=9F=94=A8=20=EA=B7=B8=EB=A3=B9=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=ED=8F=BC=20=ED=95=84=EB=93=9C=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/Groups/Create/index.tsx         | 42 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/app/frontend/src/pages/Groups/Create/index.tsx b/app/frontend/src/pages/Groups/Create/index.tsx
index 1a2454f9c..2836f2375 100644
--- a/app/frontend/src/pages/Groups/Create/index.tsx
+++ b/app/frontend/src/pages/Groups/Create/index.tsx
@@ -1,11 +1,49 @@
-import { Input } from '@/components';
+import { TextLabel, Button } from '@morak/ui';
+
+import { FormInput } from '@/components';
 
 import * as styles from './index.css';
 
 export function GroupCreatePage() {
   return (
     <form className={styles.container}>
-      <Input label="그룹명" required value="dd" />
+      <FormInput label="그룹명" required value="dd" />
+      <TextLabel label="그룹 유형" required />
+      <div>
+        <div>
+          <label htmlFor="public-group">
+            <input type="radio" name="group" id="public-group" />
+            공개 그룹
+          </label>
+        </div>
+        <div>
+          <label htmlFor="private-group">
+            <input type="radio" name="group" id="private-group" />
+            비공개 그룹
+          </label>
+        </div>
+      </div>
+      <TextLabel label="가입 방식" required />
+      <div>
+        <label htmlFor="need-approve">
+          <input
+            type="checkbox"
+            id="need-approve"
+            name="need-approve"
+            checked
+          />
+          그룹장의 가입 승인 필요
+        </label>
+      </div>
+      <div>
+        <label htmlFor="need-code">
+          <input type="checkbox" id="need-code" name="need-code" />
+          참여 코드로 바로 가입
+        </label>
+      </div>
+      <Button type="submit" theme="primary" shape="fill" size="large" fullWidth>
+        확인
+      </Button>
     </form>
   );
 }

From 5093d810dacc497b33717feb9b652f5d2ba99e09 Mon Sep 17 00:00:00 2001
From: ttaerrim <ltr0121@naver.com>
Date: Sun, 28 Jan 2024 13:39:06 +0900
Subject: [PATCH 03/11] =?UTF-8?q?=F0=9F=92=84=20=EA=B7=B8=EB=A3=B9=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20css=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/Groups/Create/index.css.ts      | 23 ++++++++++++++++++-
 .../src/pages/Groups/Create/index.tsx         | 22 ++++++++----------
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/app/frontend/src/pages/Groups/Create/index.css.ts b/app/frontend/src/pages/Groups/Create/index.css.ts
index a18f318b7..3a922fdba 100644
--- a/app/frontend/src/pages/Groups/Create/index.css.ts
+++ b/app/frontend/src/pages/Groups/Create/index.css.ts
@@ -1,9 +1,30 @@
 import { style } from '@vanilla-extract/css';
 
+import { sansRegular14 } from '@/styles/font.css';
+
 export const container = style({
   display: 'flex',
   flexDirection: 'column',
-  gap: '3.6rem',
+  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',
+});
diff --git a/app/frontend/src/pages/Groups/Create/index.tsx b/app/frontend/src/pages/Groups/Create/index.tsx
index 2836f2375..19733bdc1 100644
--- a/app/frontend/src/pages/Groups/Create/index.tsx
+++ b/app/frontend/src/pages/Groups/Create/index.tsx
@@ -8,24 +8,22 @@ export function GroupCreatePage() {
   return (
     <form className={styles.container}>
       <FormInput label="그룹명" required value="dd" />
-      <TextLabel label="그룹 유형" required />
-      <div>
-        <div>
-          <label htmlFor="public-group">
+      <div className={styles.inputWrapper}>
+        <TextLabel label="그룹 유형" required />
+        <div className={styles.groupWrapper}>
+          <label className={styles.inputField} htmlFor="public-group">
             <input type="radio" name="group" id="public-group" />
             공개 그룹
           </label>
-        </div>
-        <div>
-          <label htmlFor="private-group">
+          <label className={styles.inputField} htmlFor="private-group">
             <input type="radio" name="group" id="private-group" />
             비공개 그룹
           </label>
         </div>
       </div>
-      <TextLabel label="가입 방식" required />
-      <div>
-        <label htmlFor="need-approve">
+      <div className={styles.inputWrapper}>
+        <TextLabel label="가입 방식" required />
+        <label className={styles.inputField} htmlFor="need-approve">
           <input
             type="checkbox"
             id="need-approve"
@@ -34,9 +32,7 @@ export function GroupCreatePage() {
           />
           그룹장의 가입 승인 필요
         </label>
-      </div>
-      <div>
-        <label htmlFor="need-code">
+        <label className={styles.inputField} htmlFor="need-code">
           <input type="checkbox" id="need-code" name="need-code" />
           참여 코드로 바로 가입
         </label>

From 4efd47be2d21ff560cdd5b7e899455f15f271791 Mon Sep 17 00:00:00 2001
From: ttaerrim <ltr0121@naver.com>
Date: Sun, 28 Jan 2024 16:03:30 +0900
Subject: [PATCH 04/11] =?UTF-8?q?=F0=9F=94=A8=20react-hook-form=20`useForm?=
 =?UTF-8?q?`=20=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 임시 GroupCreate 타입 추가
- 공개/비공개 그룹 타입 useForm 사용해서 선택하도록 변경
---
 .../src/pages/Groups/Create/index.tsx         | 79 +++++++++++++++----
 1 file changed, 62 insertions(+), 17 deletions(-)

diff --git a/app/frontend/src/pages/Groups/Create/index.tsx b/app/frontend/src/pages/Groups/Create/index.tsx
index 19733bdc1..441a36518 100644
--- a/app/frontend/src/pages/Groups/Create/index.tsx
+++ b/app/frontend/src/pages/Groups/Create/index.tsx
@@ -1,35 +1,73 @@
+import { Controller, useForm } from 'react-hook-form';
+
 import { TextLabel, Button } from '@morak/ui';
 
 import { FormInput } from '@/components';
 
 import * as styles from './index.css';
 
+type GroupJoin = 'need-approve' | 'need-code';
+type GroupCreate = {
+  name: string;
+  type: 'public-group' | 'private-group';
+  joinType: GroupJoin[];
+};
 export function GroupCreatePage() {
+  const {
+    control,
+    handleSubmit,
+    formState: { isValid },
+  } = useForm<GroupCreate>({
+    defaultValues: {
+      name: '',
+      type: 'public-group',
+      joinType: ['need-approve'],
+    },
+    mode: 'all',
+  });
   return (
-    <form className={styles.container}>
-      <FormInput label="그룹명" required value="dd" />
+    <form
+      className={styles.container}
+      onSubmit={handleSubmit((data) => console.log(data))}
+    >
+      <FormInput label="그룹명" required />
       <div className={styles.inputWrapper}>
         <TextLabel label="그룹 유형" required />
         <div className={styles.groupWrapper}>
-          <label className={styles.inputField} htmlFor="public-group">
-            <input type="radio" name="group" id="public-group" />
-            공개 그룹
-          </label>
-          <label className={styles.inputField} htmlFor="private-group">
-            <input type="radio" name="group" id="private-group" />
-            비공개 그룹
-          </label>
+          <Controller
+            control={control}
+            name="type"
+            render={({ field: { onChange, value } }) => (
+              <>
+                <label className={styles.inputField} htmlFor="public-group">
+                  <input
+                    type="radio"
+                    name="group"
+                    id="public-group"
+                    checked={value === 'public-group'}
+                    onChange={(e) => onChange(e.target.id)}
+                  />
+                  공개 그룹
+                </label>
+                <label className={styles.inputField} htmlFor="private-group">
+                  <input
+                    type="radio"
+                    name="group"
+                    id="private-group"
+                    checked={value === 'private-group'}
+                    onChange={(e) => onChange(e.target.id)}
+                  />
+                  비공개 그룹
+                </label>
+              </>
+            )}
+          />
         </div>
       </div>
       <div className={styles.inputWrapper}>
         <TextLabel label="가입 방식" required />
         <label className={styles.inputField} htmlFor="need-approve">
-          <input
-            type="checkbox"
-            id="need-approve"
-            name="need-approve"
-            checked
-          />
+          <input type="checkbox" id="need-approve" name="need-approve" />
           그룹장의 가입 승인 필요
         </label>
         <label className={styles.inputField} htmlFor="need-code">
@@ -37,7 +75,14 @@ export function GroupCreatePage() {
           참여 코드로 바로 가입
         </label>
       </div>
-      <Button type="submit" theme="primary" shape="fill" size="large" fullWidth>
+      <Button
+        type="submit"
+        theme="primary"
+        shape="fill"
+        size="large"
+        fullWidth
+        disabled={!isValid}
+      >
         확인
       </Button>
     </form>

From 7ccd2e53ca6bef90ac720ca4728b57de3e7df774 Mon Sep 17 00:00:00 2001
From: ttaerrim <ltr0121@naver.com>
Date: Sun, 28 Jan 2024 16:07:03 +0900
Subject: [PATCH 05/11] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20map=20=EB=A9=94?=
 =?UTF-8?q?=EC=86=8C=EB=93=9C=20=EC=82=AC=EC=9A=A9=ED=95=98=EC=97=AC=20?=
 =?UTF-8?q?=EB=9D=BC=EB=94=94=EC=98=A4=20=EB=B2=84=ED=8A=BC=20=EB=A0=8C?=
 =?UTF-8?q?=EB=8D=94=EB=A7=81=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/Groups/Create/index.tsx         | 40 +++++++++----------
 1 file changed, 18 insertions(+), 22 deletions(-)

diff --git a/app/frontend/src/pages/Groups/Create/index.tsx b/app/frontend/src/pages/Groups/Create/index.tsx
index 441a36518..870fd12a4 100644
--- a/app/frontend/src/pages/Groups/Create/index.tsx
+++ b/app/frontend/src/pages/Groups/Create/index.tsx
@@ -9,7 +9,7 @@ import * as styles from './index.css';
 type GroupJoin = 'need-approve' | 'need-code';
 type GroupCreate = {
   name: string;
-  type: 'public-group' | 'private-group';
+  type: 'public' | 'private';
   joinType: GroupJoin[];
 };
 export function GroupCreatePage() {
@@ -20,7 +20,7 @@ export function GroupCreatePage() {
   } = useForm<GroupCreate>({
     defaultValues: {
       name: '',
-      type: 'public-group',
+      type: 'public',
       joinType: ['need-approve'],
     },
     mode: 'all',
@@ -39,26 +39,22 @@ export function GroupCreatePage() {
             name="type"
             render={({ field: { onChange, value } }) => (
               <>
-                <label className={styles.inputField} htmlFor="public-group">
-                  <input
-                    type="radio"
-                    name="group"
-                    id="public-group"
-                    checked={value === 'public-group'}
-                    onChange={(e) => onChange(e.target.id)}
-                  />
-                  공개 그룹
-                </label>
-                <label className={styles.inputField} htmlFor="private-group">
-                  <input
-                    type="radio"
-                    name="group"
-                    id="private-group"
-                    checked={value === 'private-group'}
-                    onChange={(e) => onChange(e.target.id)}
-                  />
-                  비공개 그룹
-                </label>
+                {['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>
+                ))}
               </>
             )}
           />

From 037246605b68237ccda423e5615b1c6de622ea2a Mon Sep 17 00:00:00 2001
From: ttaerrim <ltr0121@naver.com>
Date: Sun, 28 Jan 2024 16:17:21 +0900
Subject: [PATCH 06/11] =?UTF-8?q?=F0=9F=94=A8=20=EA=B7=B8=EB=A3=B9=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EC=8B=9C=20=EA=B0=80=EC=9E=85=20=EB=B0=A9?=
 =?UTF-8?q?=EC=8B=9D=20rhf=20Controller=20=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/Groups/Create/index.tsx         | 51 +++++++++++++++----
 1 file changed, 41 insertions(+), 10 deletions(-)

diff --git a/app/frontend/src/pages/Groups/Create/index.tsx b/app/frontend/src/pages/Groups/Create/index.tsx
index 870fd12a4..ea2eb3581 100644
--- a/app/frontend/src/pages/Groups/Create/index.tsx
+++ b/app/frontend/src/pages/Groups/Create/index.tsx
@@ -6,7 +6,7 @@ import { FormInput } from '@/components';
 
 import * as styles from './index.css';
 
-type GroupJoin = 'need-approve' | 'need-code';
+type GroupJoin = 'approve' | 'code';
 type GroupCreate = {
   name: string;
   type: 'public' | 'private';
@@ -21,7 +21,7 @@ export function GroupCreatePage() {
     defaultValues: {
       name: '',
       type: 'public',
-      joinType: ['need-approve'],
+      joinType: ['approve'],
     },
     mode: 'all',
   });
@@ -62,14 +62,45 @@ export function GroupCreatePage() {
       </div>
       <div className={styles.inputWrapper}>
         <TextLabel label="가입 방식" required />
-        <label className={styles.inputField} htmlFor="need-approve">
-          <input type="checkbox" id="need-approve" name="need-approve" />
-          그룹장의 가입 승인 필요
-        </label>
-        <label className={styles.inputField} htmlFor="need-code">
-          <input type="checkbox" id="need-code" name="need-code" />
-          참여 코드로 바로 가입
-        </label>
+        <Controller
+          control={control}
+          name="joinType"
+          render={({ field: { onChange, value } }) => (
+            <>
+              {['approve', 'code'].map((type) => {
+                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 (
+                  <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>
+                );
+              })}
+            </>
+          )}
+        />
       </div>
       <Button
         type="submit"

From e59346dac6e6e0f1e5746cae11d7d0708fbf3115 Mon Sep 17 00:00:00 2001
From: ttaerrim <ltr0121@naver.com>
Date: Sun, 28 Jan 2024 16:25:43 +0900
Subject: [PATCH 07/11] =?UTF-8?q?=F0=9F=94=A8=20=EA=B7=B8=EB=A3=B9=20?=
 =?UTF-8?q?=EC=9C=A0=ED=98=95=20=EB=B9=84=EA=B3=B5=EA=B0=9C=EB=A1=9C=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=ED=96=88=EC=9D=84=20=EB=95=8C=EB=A7=8C=20?=
 =?UTF-8?q?=EA=B0=80=EC=9E=85=20=EB=B0=A9=EC=8B=9D=20=ED=95=84=EB=93=9C?=
 =?UTF-8?q?=EB=A5=BC=20=EB=85=B8=EC=B6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/Groups/Create/index.tsx         | 92 ++++++++++---------
 1 file changed, 50 insertions(+), 42 deletions(-)

diff --git a/app/frontend/src/pages/Groups/Create/index.tsx b/app/frontend/src/pages/Groups/Create/index.tsx
index ea2eb3581..a28ec7e1c 100644
--- a/app/frontend/src/pages/Groups/Create/index.tsx
+++ b/app/frontend/src/pages/Groups/Create/index.tsx
@@ -17,6 +17,7 @@ export function GroupCreatePage() {
     control,
     handleSubmit,
     formState: { isValid },
+    watch,
   } = useForm<GroupCreate>({
     defaultValues: {
       name: '',
@@ -25,6 +26,9 @@ export function GroupCreatePage() {
     },
     mode: 'all',
   });
+
+  const groupType = watch('type');
+
   return (
     <form
       className={styles.container}
@@ -60,48 +64,52 @@ export function GroupCreatePage() {
           />
         </div>
       </div>
-      <div className={styles.inputWrapper}>
-        <TextLabel label="가입 방식" required />
-        <Controller
-          control={control}
-          name="joinType"
-          render={({ field: { onChange, value } }) => (
-            <>
-              {['approve', 'code'].map((type) => {
-                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 (
-                  <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>
-                );
-              })}
-            </>
-          )}
-        />
-      </div>
+      {groupType === 'private' && (
+        <div className={styles.inputWrapper}>
+          <TextLabel label="가입 방식" required />
+          <Controller
+            control={control}
+            name="joinType"
+            render={({ field: { onChange, value } }) => (
+              <>
+                {['approve', 'code'].map((type) => {
+                  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 (
+                    <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>
+                  );
+                })}
+              </>
+            )}
+          />
+        </div>
+      )}
       <Button
         type="submit"
         theme="primary"

From 07fcb71f7d6444391fdf46cded76c93e9dbcb22d Mon Sep 17 00:00:00 2001
From: ttaerrim <ltr0121@naver.com>
Date: Sun, 28 Jan 2024 20:32:34 +0900
Subject: [PATCH 08/11] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=EA=B7=B8=EB=A3=B9?=
 =?UTF-8?q?=20=EC=83=9D=EC=84=B1=20=ED=8F=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Groups/Create/GroupJoinTypeCheckbox.tsx   | 42 ++++++++++
 .../pages/Groups/Create/GroupTypeRadio.tsx    | 30 +++++++
 .../src/pages/Groups/Create/index.tsx         | 79 ++-----------------
 app/frontend/src/pages/Groups/Create/types.ts |  6 ++
 4 files changed, 85 insertions(+), 72 deletions(-)
 create mode 100644 app/frontend/src/pages/Groups/Create/GroupJoinTypeCheckbox.tsx
 create mode 100644 app/frontend/src/pages/Groups/Create/GroupTypeRadio.tsx
 create mode 100644 app/frontend/src/pages/Groups/Create/types.ts

diff --git a/app/frontend/src/pages/Groups/Create/GroupJoinTypeCheckbox.tsx b/app/frontend/src/pages/Groups/Create/GroupJoinTypeCheckbox.tsx
new file mode 100644
index 000000000..2d25d05e4
--- /dev/null
+++ b/app/frontend/src/pages/Groups/Create/GroupJoinTypeCheckbox.tsx
@@ -0,0 +1,42 @@
+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,
+}: {
+  control: Control<GroupCreate>;
+}) {
+  const {
+    field: { value, onChange },
+  } = useController({
+    name: 'joinType',
+    control,
+  });
+
+  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>
+  ));
+}
diff --git a/app/frontend/src/pages/Groups/Create/GroupTypeRadio.tsx b/app/frontend/src/pages/Groups/Create/GroupTypeRadio.tsx
new file mode 100644
index 000000000..816f8a997
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/frontend/src/pages/Groups/Create/index.tsx b/app/frontend/src/pages/Groups/Create/index.tsx
index a28ec7e1c..096546dd3 100644
--- a/app/frontend/src/pages/Groups/Create/index.tsx
+++ b/app/frontend/src/pages/Groups/Create/index.tsx
@@ -1,17 +1,14 @@
-import { Controller, useForm } from 'react-hook-form';
+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';
 
-type GroupJoin = 'approve' | 'code';
-type GroupCreate = {
-  name: string;
-  type: 'public' | 'private';
-  joinType: GroupJoin[];
-};
 export function GroupCreatePage() {
   const {
     control,
@@ -37,76 +34,14 @@ export function GroupCreatePage() {
       <FormInput label="그룹명" required />
       <div className={styles.inputWrapper}>
         <TextLabel label="그룹 유형" required />
-        <div className={styles.groupWrapper}>
-          <Controller
-            control={control}
-            name="type"
-            render={({ field: { onChange, value } }) => (
-              <>
-                {['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>
+        <GroupTypeRadio control={control} />
       </div>
       {groupType === 'private' && (
         <div className={styles.inputWrapper}>
           <TextLabel label="가입 방식" required />
-          <Controller
+          <GroupJoinTypeCheckbox
             control={control}
-            name="joinType"
-            render={({ field: { onChange, value } }) => (
-              <>
-                {['approve', 'code'].map((type) => {
-                  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 (
-                    <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>
-                  );
-                })}
-              </>
-            )}
+            required={groupType === 'private'}
           />
         </div>
       )}
diff --git a/app/frontend/src/pages/Groups/Create/types.ts b/app/frontend/src/pages/Groups/Create/types.ts
new file mode 100644
index 000000000..0e234d72b
--- /dev/null
+++ b/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';

From facb1d6fd3b8128d614ceba1f4a830386de123c8 Mon Sep 17 00:00:00 2001
From: ttaerrim <ltr0121@naver.com>
Date: Sun, 28 Jan 2024 20:33:44 +0900
Subject: [PATCH 09/11] =?UTF-8?q?=F0=9F=94=A8=20=EA=B7=B8=EB=A3=B9=20?=
 =?UTF-8?q?=EC=9C=A0=ED=98=95=20=EB=B9=84=EA=B3=B5=EA=B0=9C=EC=9D=BC=20?=
 =?UTF-8?q?=EB=95=8C=20=EA=B0=80=EC=9E=85=20=EB=B0=A9=EC=8B=9D=EC=9D=84=20?=
 =?UTF-8?q?=ED=95=9C=20=EA=B0=9C=20=EC=9D=B4=EC=83=81=20=EC=84=A0=ED=83=9D?=
 =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20rules=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/Groups/Create/GroupJoinTypeCheckbox.tsx      | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/frontend/src/pages/Groups/Create/GroupJoinTypeCheckbox.tsx b/app/frontend/src/pages/Groups/Create/GroupJoinTypeCheckbox.tsx
index 2d25d05e4..db3e35fa1 100644
--- a/app/frontend/src/pages/Groups/Create/GroupJoinTypeCheckbox.tsx
+++ b/app/frontend/src/pages/Groups/Create/GroupJoinTypeCheckbox.tsx
@@ -7,14 +7,21 @@ 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>) => {

From 70709fa86069f63144e495759da4628a96f652da Mon Sep 17 00:00:00 2001
From: ttaerrim <ltr0121@naver.com>
Date: Thu, 1 Feb 2024 15:01:27 +0900
Subject: [PATCH 10/11] =?UTF-8?q?=F0=9F=94=A5=20=EB=B9=84=EA=B3=B5?=
 =?UTF-8?q?=EA=B0=9C=20=EA=B7=B8=EB=A3=B9=EC=9D=98=20=EC=B2=B4=ED=81=AC?=
 =?UTF-8?q?=EB=B0=95=EC=8A=A4=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Groups/Create/GroupJoinTypeCheckbox.tsx   | 49 -------------------
 .../src/pages/Groups/Create/index.tsx         | 14 +-----
 2 files changed, 1 insertion(+), 62 deletions(-)
 delete mode 100644 app/frontend/src/pages/Groups/Create/GroupJoinTypeCheckbox.tsx

diff --git a/app/frontend/src/pages/Groups/Create/GroupJoinTypeCheckbox.tsx b/app/frontend/src/pages/Groups/Create/GroupJoinTypeCheckbox.tsx
deleted file mode 100644
index db3e35fa1..000000000
--- a/app/frontend/src/pages/Groups/Create/GroupJoinTypeCheckbox.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-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>
-  ));
-}
diff --git a/app/frontend/src/pages/Groups/Create/index.tsx b/app/frontend/src/pages/Groups/Create/index.tsx
index 096546dd3..b5da30f18 100644
--- a/app/frontend/src/pages/Groups/Create/index.tsx
+++ b/app/frontend/src/pages/Groups/Create/index.tsx
@@ -4,7 +4,6 @@ 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';
@@ -14,7 +13,6 @@ export function GroupCreatePage() {
     control,
     handleSubmit,
     formState: { isValid },
-    watch,
   } = useForm<GroupCreate>({
     defaultValues: {
       name: '',
@@ -24,11 +22,10 @@ export function GroupCreatePage() {
     mode: 'all',
   });
 
-  const groupType = watch('type');
-
   return (
     <form
       className={styles.container}
+      // TODO: POST 요청
       onSubmit={handleSubmit((data) => console.log(data))}
     >
       <FormInput label="그룹명" required />
@@ -36,15 +33,6 @@ export function GroupCreatePage() {
         <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"

From 65a6c02eaa93b3d7c682503a83bbd48f4a8656d3 Mon Sep 17 00:00:00 2001
From: ttaerrim <ltr0121@naver.com>
Date: Thu, 1 Feb 2024 15:01:54 +0900
Subject: [PATCH 11/11] =?UTF-8?q?=F0=9F=94=A8=20=EA=B7=B8=EB=A3=B9?=
 =?UTF-8?q?=EB=AA=85=20useController=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/frontend/src/pages/Groups/Create/index.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/frontend/src/pages/Groups/Create/index.tsx b/app/frontend/src/pages/Groups/Create/index.tsx
index b5da30f18..b61f86323 100644
--- a/app/frontend/src/pages/Groups/Create/index.tsx
+++ b/app/frontend/src/pages/Groups/Create/index.tsx
@@ -1,4 +1,4 @@
-import { useForm } from 'react-hook-form';
+import { useController, useForm } from 'react-hook-form';
 
 import { TextLabel, Button } from '@morak/ui';
 
@@ -22,13 +22,27 @@ export function GroupCreatePage() {
     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 />
+      <FormInput
+        label="그룹명"
+        required
+        value={nameValue}
+        onChange={onChangeName}
+      />
       <div className={styles.inputWrapper}>
         <TextLabel label="그룹 유형" required />
         <GroupTypeRadio control={control} />