From e5542f9b46ae8382491b2617c60568a358583353 Mon Sep 17 00:00:00 2001
From: LEEJW1953 <jiwonlee1953@naver.com>
Date: Thu, 23 Nov 2023 11:43:22 +0900
Subject: [PATCH 01/12] =?UTF-8?q?:sparkles:=20Input,=20Textarea=20?=
 =?UTF-8?q?=EA=B8=80=EC=9E=90=EC=88=98=20=ED=91=9C=EC=8B=9C=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

react hook form을 통해 표시할 예정
---
 .../src/components/commons/Input/Textarea.tsx | 22 ++++++-------------
 .../src/components/commons/Input/index.tsx    | 22 +++++++------------
 2 files changed, 15 insertions(+), 29 deletions(-)

diff --git a/app/frontend/src/components/commons/Input/Textarea.tsx b/app/frontend/src/components/commons/Input/Textarea.tsx
index 2da00d5a1..8677195b1 100644
--- a/app/frontend/src/components/commons/Input/Textarea.tsx
+++ b/app/frontend/src/components/commons/Input/Textarea.tsx
@@ -1,5 +1,3 @@
-import { useRef, useState } from 'react';
-
 import * as styles from './Textarea.css';
 
 type TextareaProps = {
@@ -11,6 +9,8 @@ type TextareaProps = {
   required?: boolean;
   fullWidth?: boolean;
   rows?: number;
+  value: string;
+  onChange: () => void;
 };
 
 export function Textarea({
@@ -22,16 +22,9 @@ export function Textarea({
   required = false,
   fullWidth = false,
   rows = 2,
+  value,
+  onChange,
 }: TextareaProps) {
-  const [textCount, setTextCount] = useState<number>(0);
-  const textRef = useRef<HTMLTextAreaElement | null>(null);
-
-  const handleInput = () => {
-    if (textRef && textRef.current) {
-      setTextCount(textRef.current.value.length);
-    }
-  };
-
   return (
     <div
       className={`${styles.container} ${errorMessage && styles.error} ${
@@ -44,18 +37,17 @@ export function Textarea({
           {required && <span className={styles.required}>*</span>}
         </span>
         <span className={styles.count}>
-          {textCount}/{maxLength}
+          {value ? value.length : 0}/{maxLength}
         </span>
       </div>
       <textarea
         rows={rows}
-        ref={textRef}
         className={styles.textarea}
         placeholder={placeholder}
         disabled={disabled}
         maxLength={maxLength}
-        required={required}
-        onChange={handleInput}
+        value={value}
+        onChange={onChange}
       />
       {!disabled && errorMessage && (
         <p className={styles.errorMessage}>{errorMessage}</p>
diff --git a/app/frontend/src/components/commons/Input/index.tsx b/app/frontend/src/components/commons/Input/index.tsx
index 736bb0ec9..b4b9ee429 100644
--- a/app/frontend/src/components/commons/Input/index.tsx
+++ b/app/frontend/src/components/commons/Input/index.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, HTMLInputTypeAttribute } from 'react';
+import { HTMLInputTypeAttribute } from 'react';
 
 import * as styles from './index.css';
 
@@ -13,6 +13,8 @@ type InputProps = {
   max?: number;
   required?: boolean;
   defaultValue?: string;
+  value?: string;
+  onChange?: () => void;
 };
 
 export function Input({
@@ -26,16 +28,9 @@ export function Input({
   max,
   required = false,
   defaultValue,
+  value,
+  onChange,
 }: InputProps) {
-  const [inputCount, setInputCount] = useState<number>(0);
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  const handleInput = () => {
-    if (inputRef && inputRef.current) {
-      setInputCount(inputRef.current.value.length);
-    }
-  };
-
   return (
     <div
       className={`${styles.container} ${errorMessage && styles.error} ${
@@ -49,12 +44,11 @@ export function Input({
         </span>
         {maxLength && (
           <span className={styles.count}>
-            {inputCount}/{maxLength}
+            {value ? value.length : 0}/{maxLength}
           </span>
         )}
       </div>
       <input
-        ref={inputRef}
         className={styles.input}
         type={type}
         placeholder={placeholder}
@@ -62,9 +56,9 @@ export function Input({
         maxLength={maxLength}
         min={min}
         max={max}
-        required={required}
         defaultValue={defaultValue}
-        onChange={handleInput}
+        value={value}
+        onChange={onChange}
       />
       {!disabled && errorMessage && (
         <p className={styles.errorMessage}>{errorMessage}</p>

From 62560ba5eeb939e40ec85806788614e18032fb8a Mon Sep 17 00:00:00 2001
From: LEEJW1953 <jiwonlee1953@naver.com>
Date: Thu, 23 Nov 2023 11:51:11 +0900
Subject: [PATCH 02/12] =?UTF-8?q?:sparkles:=20=EB=AA=A8=EA=B0=81=EC=BD=94?=
 =?UTF-8?q?=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EC=9E=91=EC=84=B1=20react=20h?=
 =?UTF-8?q?ook=20form=EC=9C=BC=EB=A1=9C=20=EA=B4=80=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MogacoPost/index.css.ts    |  84 +++++++--
 .../src/components/MogacoPost/index.tsx       | 177 +++++++++++++++---
 2 files changed, 213 insertions(+), 48 deletions(-)

diff --git a/app/frontend/src/components/MogacoPost/index.css.ts b/app/frontend/src/components/MogacoPost/index.css.ts
index caf97125d..b9b2b6003 100644
--- a/app/frontend/src/components/MogacoPost/index.css.ts
+++ b/app/frontend/src/components/MogacoPost/index.css.ts
@@ -2,34 +2,20 @@ import { style } from '@vanilla-extract/css';
 
 import { vars, fontStyle } from '@/styles';
 
-export const container = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '24px',
-  maxWidth: '75rem',
-  margin: '0 auto',
-  padding: '1.5rem',
-});
-
-export const formContent = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '1.6rem',
-  width: '100%',
-});
+const error = style({});
 
-export const title = style([
+const title = style([
   fontStyle.sansBold24,
   {
     padding: '0.8rem',
     height: '4rem',
+    width: '100%',
     color: vars.color.grayscale500,
     borderBottom: '2px solid transparent',
 
     selectors: {
       '&:focus': {
         outline: 'none',
-        borderBottom: `2px solid ${vars.color.morakGreen}`,
       },
       '&::placeholder': {
         color: vars.color.grayscale200,
@@ -37,3 +23,67 @@ export const title = style([
     },
   },
 ]);
+
+const titleContent = style([
+  fontStyle.sansRegular12,
+  {
+    display: 'flex',
+    flex: '1 0 0',
+    alignItems: 'center',
+    gap: '1.6rem',
+    borderBottom: '2px solid transparent',
+
+    selectors: {
+      '&:focus-within': {
+        borderBottom: `2px solid ${vars.color.morakGreen}`,
+      },
+      [`${error} &`]: {
+        borderBottom: `2px solid ${vars.color.morakRed}`,
+      },
+    },
+  },
+]);
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '24px',
+  maxWidth: '75rem',
+  margin: '0 auto',
+  padding: '1.5rem',
+});
+
+export const count = style([
+  fontStyle.sansRegular12,
+  {
+    visibility: 'hidden',
+
+    selectors: {
+      [`${titleContent}:focus-within &`]: {
+        visibility: 'visible',
+      },
+    },
+  },
+]);
+
+export { error, title, titleContent };
+
+export const errorMessage = style([
+  fontStyle.sansRegular12,
+  {
+    color: vars.color.morakRed,
+  },
+]);
+
+export const formContent = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1.6rem',
+  width: '100%',
+});
+
+export const titleContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.4rem',
+});
diff --git a/app/frontend/src/components/MogacoPost/index.tsx b/app/frontend/src/components/MogacoPost/index.tsx
index 8ac97c602..d44149c9d 100644
--- a/app/frontend/src/components/MogacoPost/index.tsx
+++ b/app/frontend/src/components/MogacoPost/index.tsx
@@ -1,48 +1,164 @@
+import { useForm, Controller } from 'react-hook-form';
+
 import dayjs from 'dayjs';
 
 import { Input, Button, Textarea } from '@/components';
 
 import * as styles from './index.css';
 
+type MogacoPostForm = {
+  title: string;
+  memberId: string;
+  groupId: string;
+  contents: string;
+  date: string;
+  maxHumanCount: string;
+  address: string;
+};
+
 export function MogacoPostPage() {
   const date = dayjs(new Date()).format('YYYY-MM-DD HH:mm');
+  const { control, handleSubmit } = useForm<MogacoPostForm>();
+
+  // POST 요청으로 수정 예정
+  const onSubmit = (data: MogacoPostForm) => console.log(data);
 
   return (
-    <form className={styles.container}>
+    <form className={styles.container} onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name="title"
+        rules={{
+          required: '제목을 입력해주세요',
+          maxLength: { value: 64, message: '최대 64자 까지 입력 가능합니다' },
+        }}
+        render={({ field: { onChange, value }, fieldState: { error } }) => (
+          <div className={`${styles.titleContainer} ${error && styles.error}`}>
+            <div className={styles.titleContent}>
+              <input
+                type="text"
+                className={`${styles.title}`}
+                placeholder="모각코 함께해요"
+                maxLength={64}
+                onChange={onChange}
+                value={value}
+              />
+              <div className={styles.count}>{value ? value.length : 0}/64</div>
+            </div>
+            {error && (
+              <div className={styles.errorMessage}>{error.message}</div>
+            )}
+          </div>
+        )}
+      />
       <div className={styles.formContent}>
-        <input
-          type="text"
-          className={styles.title}
-          placeholder="모각코 함께해요"
-          required
+        <Controller
+          control={control}
+          name="memberId"
+          render={({ field: { onChange, value } }) => (
+            <Input
+              label="작성자"
+              required
+              disabled
+              defaultValue="user" // 로그인한 유저 정보
+              onChange={onChange}
+              value={value}
+            />
+          )}
         />
-      </div>
-      <div className={styles.formContent}>
-        <Input
-          label="작성자"
-          maxLength={64}
-          required
-          disabled
-          defaultValue="user"
+        <Controller
+          control={control}
+          name="groupId"
+          rules={{ required: true }}
+          render={({ field: { onChange, value }, fieldState: { error } }) => (
+            <Input
+              label="그룹"
+              placeholder="그룹을 선택해주세요"
+              required
+              onChange={onChange}
+              value={value}
+              errorMessage={error && '그룹을 선택해주세요'}
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="maxHumanCount"
+          rules={{
+            required: '최대 인원 수를 입력해주세요',
+            pattern: { value: /^[0-9]*$/, message: '숫자만 입력 가능합니다' },
+            min: { value: 2, message: '최소 인원 수는 2명입니다' },
+            max: { value: 20, message: '최대 인원 수는 20명입니다' },
+          }}
+          render={({ field: { onChange, value }, fieldState: { error } }) => (
+            <Input
+              label="최대 인원 수"
+              type="number"
+              placeholder="20"
+              required
+              onChange={onChange}
+              value={value}
+              errorMessage={error && error.message}
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="address"
+          rules={{ required: true }}
+          render={({ field: { onChange, value }, fieldState: { error } }) => (
+            <Input
+              label="장소"
+              placeholder="장소를 검색해주세요"
+              required
+              onChange={onChange}
+              value={value}
+              errorMessage={error && '장소를 검색해주세요'}
+            />
+          )}
         />
-        <Input label="그룹" placeholder="그룹을 선택해주세요" required />
-        <Input
-          label="최대 인원 수"
-          type="number"
-          placeholder="20"
-          min={1}
-          max={20}
-          required
+        <Controller
+          control={control}
+          name="date"
+          rules={{
+            required: '날짜를 선택해주세요',
+            min: { value: date, message: '현재 이후의 시간을 선택해주세요' },
+          }}
+          render={({ field: { onChange, value }, fieldState: { error } }) => (
+            <Input
+              label="날짜 및 시간"
+              type="datetime-local"
+              required
+              defaultValue={date}
+              min={date}
+              onChange={onChange}
+              value={value}
+              errorMessage={error && error.message}
+            />
+          )}
         />
-        <Input label="장소" placeholder="장소를 검색해주세요" required />
-        <Input
-          label="날짜 및 시간"
-          type="datetime-local"
-          required
-          defaultValue={date}
-          min={date}
+        <Controller
+          control={control}
+          name="contents"
+          rules={{
+            required: '설명을 입력해주세요',
+            maxLength: {
+              value: 1000,
+              message: '최대 1000자까지 입력 가능합니다',
+            },
+          }}
+          render={({ field: { onChange, value }, fieldState: { error } }) => (
+            <Textarea
+              label="설명"
+              rows={6}
+              maxLength={1000}
+              required
+              onChange={onChange}
+              value={value}
+              errorMessage={error && error.message}
+            />
+          )}
         />
-        <Textarea label="설명" maxLength={1000} rows={6} />
       </div>
       <div className={styles.formContent}>
         <Button
@@ -51,7 +167,6 @@ export function MogacoPostPage() {
           shape="fill"
           size="large"
           fullWidth
-          onClick={() => {}}
         >
           등록하기
         </Button>

From 233c9e3e3c66a7fa19e42e5a3a02ba7c0d1ce7fc Mon Sep 17 00:00:00 2001
From: LEEJW1953 <jiwonlee1953@naver.com>
Date: Thu, 23 Nov 2023 15:29:26 +0900
Subject: [PATCH 03/12] =?UTF-8?q?:label:=20Mogaco=20type=20=EC=9C=A0?=
 =?UTF-8?q?=ED=8B=B8=EB=A6=AC=ED=8B=B0=20=ED=83=80=EC=9E=85=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/frontend/src/types/mogaco.ts | 32 +++++++++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/app/frontend/src/types/mogaco.ts b/app/frontend/src/types/mogaco.ts
index 024cd5199..87cd9a0a4 100644
--- a/app/frontend/src/types/mogaco.ts
+++ b/app/frontend/src/types/mogaco.ts
@@ -1,4 +1,4 @@
-export type Mogaco = {
+interface Mogaco {
   id: string;
   groupId: string;
   memberId: string;
@@ -9,10 +9,32 @@ export type Mogaco = {
   maxHumanCount: number;
   address: string;
   status: '모집 중' | '마감' | '종료';
-};
-
-export type Participant = {
-  id: string;
   nickname: string;
   profile: string;
+}
+
+export type MogacoPostForm = {
+  title: string;
+  memberId: string;
+  groupId: string;
+  contents: string;
+  date: string;
+  maxHumanCount: string;
+  address: string;
 };
+
+export type MogacoProps = Pick<
+  Mogaco,
+  | 'id'
+  | 'groupId'
+  | 'memberId'
+  | 'title'
+  | 'contents'
+  | 'date'
+  | 'participantList'
+  | 'maxHumanCount'
+  | 'address'
+  | 'status'
+>;
+
+export type Participant = Pick<Mogaco, 'memberId' | 'nickname' | 'profile'>;

From 12ac1813701fda6238632a6a7267aac0f0fa2147 Mon Sep 17 00:00:00 2001
From: LEEJW1953 <jiwonlee1953@naver.com>
Date: Thu, 23 Nov 2023 15:31:37 +0900
Subject: [PATCH 04/12] =?UTF-8?q?:sparkles:=20=EB=AA=A8=EA=B0=81=EC=BD=94?=
 =?UTF-8?q?=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EC=9E=91=EC=84=B1=20=EA=B4=80?=
 =?UTF-8?q?=EB=A0=A8=20=EC=83=81=EC=88=98=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/frontend/src/constants/MogacoPost.ts | 36 ++++++++++++++++++++++++
 app/frontend/src/constants/index.ts      |  1 +
 2 files changed, 37 insertions(+)
 create mode 100644 app/frontend/src/constants/MogacoPost.ts

diff --git a/app/frontend/src/constants/MogacoPost.ts b/app/frontend/src/constants/MogacoPost.ts
new file mode 100644
index 000000000..946ac7d19
--- /dev/null
+++ b/app/frontend/src/constants/MogacoPost.ts
@@ -0,0 +1,36 @@
+export const MOGACO_POST = {
+  TITLE: {
+    PLACEHOLDER: '모각코 함께해요',
+    REQUIRED: '제목을 입력해주세요',
+    MAX: '최대 64자 까지 입력 가능합니다',
+    MAX_LENGTH: 64,
+  },
+  MEMBER: { LABEL: '작성자' },
+  GROUP: { LABEL: '그룹', REQUIRED: '그룹을 선택해주세요' },
+  COUNT: {
+    LABEL: '최대 인원 수',
+    PLACEHOLDER: '20',
+    REQUIRED: '최대 인원 수를 입력해주세요',
+    PATTERN: '숫자만 입력 가능합니다',
+    MIN: '최소 인원 수는 2명입니다',
+    MIN_VALUE: 2,
+    MAX: '최대 인원 수는 20명입니다',
+    MAX_VALUE: 20,
+  },
+  ADDRESS: {
+    LABEL: '장소',
+    REQUIRED: '장소를 검색해주세요',
+  },
+  DATE: {
+    LABEL: '날짜 및 시간',
+    REQUIRED: '날짜를 선택해주세요',
+    MIN: '현재 이후의 시간을 선택해주세요',
+  },
+  CONTENTS: {
+    ROWS: 6,
+    LABEL: '설명',
+    REQUIRED: '설명을 입력해주세요',
+    MAX: '최대 1000자까지 입력 가능합니다',
+    MAX_LENGTH: 1000,
+  },
+};
diff --git a/app/frontend/src/constants/index.ts b/app/frontend/src/constants/index.ts
index 49bab3eee..941773b45 100644
--- a/app/frontend/src/constants/index.ts
+++ b/app/frontend/src/constants/index.ts
@@ -1,5 +1,6 @@
 export * from './Header';
 export * from './Main';
 export * from './MogacoDetail';
+export * from './MogacoPost';
 export * from './path';
 export * from './url';

From f2d360188760b62606903aa0cd17a21748660a29 Mon Sep 17 00:00:00 2001
From: LEEJW1953 <jiwonlee1953@naver.com>
Date: Thu, 23 Nov 2023 15:33:36 +0900
Subject: [PATCH 05/12] =?UTF-8?q?:sparkles:=20=EB=AA=A8=EA=B0=81=EC=BD=94?=
 =?UTF-8?q?=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EC=9E=91=EC=84=B1=20=EC=A0=9C?=
 =?UTF-8?q?=EB=AA=A9=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MogacoPost/MogacoPostTitle.tsx | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx

diff --git a/app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx b/app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx
new file mode 100644
index 000000000..2efec9104
--- /dev/null
+++ b/app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx
@@ -0,0 +1,45 @@
+import { Controller, Control } from 'react-hook-form';
+
+import { MOGACO_POST } from '@/constants';
+import { MogacoPostForm } from '@/types';
+
+import * as styles from './index.css';
+
+type MogacoPostTitleProps = {
+  control: Control<MogacoPostForm>;
+};
+
+const TITLE_MAXLENGTH = 64;
+
+export function MogacoPostTitle({ control }: MogacoPostTitleProps) {
+  return (
+    <Controller
+      control={control}
+      name="title"
+      rules={{
+        required: MOGACO_POST.TITLE.REQUIRED,
+        maxLength: {
+          value: MOGACO_POST.TITLE.MAX_LENGTH,
+          message: MOGACO_POST.TITLE.MAX,
+        },
+      }}
+      render={({ field: { onChange, value }, fieldState: { error } }) => (
+        <div className={`${styles.titleContainer} ${error && styles.error}`}>
+          <div className={styles.titleContent}>
+            <input
+              type="text"
+              className={styles.title}
+              placeholder={MOGACO_POST.TITLE.PLACEHOLDER}
+              maxLength={TITLE_MAXLENGTH}
+              onChange={onChange}
+            />
+            <div className={styles.count}>
+              {value ? value.length : 0}/{TITLE_MAXLENGTH}
+            </div>
+          </div>
+          {error && <div className={styles.errorMessage}>{error.message}</div>}
+        </div>
+      )}
+    />
+  );
+}

From e2ce7bccc132c6104dd074612ed8dd71d1cc717b Mon Sep 17 00:00:00 2001
From: LEEJW1953 <jiwonlee1953@naver.com>
Date: Thu, 23 Nov 2023 15:34:35 +0900
Subject: [PATCH 06/12] =?UTF-8?q?:bug:=20Input=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20value=20=EC=86=8D=EC=84=B1=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/frontend/src/components/commons/Input/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/frontend/src/components/commons/Input/index.tsx b/app/frontend/src/components/commons/Input/index.tsx
index b4b9ee429..8a1c87f81 100644
--- a/app/frontend/src/components/commons/Input/index.tsx
+++ b/app/frontend/src/components/commons/Input/index.tsx
@@ -57,7 +57,6 @@ export function Input({
         min={min}
         max={max}
         defaultValue={defaultValue}
-        value={value}
         onChange={onChange}
       />
       {!disabled && errorMessage && (

From b9b5922da92054262ea18268bf85fc5c79e51627 Mon Sep 17 00:00:00 2001
From: LEEJW1953 <jiwonlee1953@naver.com>
Date: Thu, 23 Nov 2023 15:37:29 +0900
Subject: [PATCH 07/12] =?UTF-8?q?:sparkles:=20=EB=AA=A8=EA=B0=81=EC=BD=94?=
 =?UTF-8?q?=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EC=9E=91=EC=84=B1=20=EC=A0=9C?=
 =?UTF-8?q?=EB=AA=A9=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC,=20=EC=83=81=EC=88=98=20=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MogacoPost/index.tsx       | 97 +++++++------------
 1 file changed, 37 insertions(+), 60 deletions(-)

diff --git a/app/frontend/src/components/MogacoPost/index.tsx b/app/frontend/src/components/MogacoPost/index.tsx
index d44149c9d..fa35fe4be 100644
--- a/app/frontend/src/components/MogacoPost/index.tsx
+++ b/app/frontend/src/components/MogacoPost/index.tsx
@@ -3,61 +3,29 @@ import { useForm, Controller } from 'react-hook-form';
 import dayjs from 'dayjs';
 
 import { Input, Button, Textarea } from '@/components';
+import { MOGACO_POST } from '@/constants';
+import { MogacoPostForm } from '@/types';
 
 import * as styles from './index.css';
-
-type MogacoPostForm = {
-  title: string;
-  memberId: string;
-  groupId: string;
-  contents: string;
-  date: string;
-  maxHumanCount: string;
-  address: string;
-};
+import { MogacoPostTitle } from './MogacoPostTitle';
 
 export function MogacoPostPage() {
   const date = dayjs(new Date()).format('YYYY-MM-DD HH:mm');
   const { control, handleSubmit } = useForm<MogacoPostForm>();
 
   // POST 요청으로 수정 예정
-  const onSubmit = (data: MogacoPostForm) => console.log(data);
+  const onSubmit = () => {};
 
   return (
     <form className={styles.container} onSubmit={handleSubmit(onSubmit)}>
-      <Controller
-        control={control}
-        name="title"
-        rules={{
-          required: '제목을 입력해주세요',
-          maxLength: { value: 64, message: '최대 64자 까지 입력 가능합니다' },
-        }}
-        render={({ field: { onChange, value }, fieldState: { error } }) => (
-          <div className={`${styles.titleContainer} ${error && styles.error}`}>
-            <div className={styles.titleContent}>
-              <input
-                type="text"
-                className={`${styles.title}`}
-                placeholder="모각코 함께해요"
-                maxLength={64}
-                onChange={onChange}
-                value={value}
-              />
-              <div className={styles.count}>{value ? value.length : 0}/64</div>
-            </div>
-            {error && (
-              <div className={styles.errorMessage}>{error.message}</div>
-            )}
-          </div>
-        )}
-      />
+      <MogacoPostTitle control={control} />
       <div className={styles.formContent}>
         <Controller
           control={control}
           name="memberId"
           render={({ field: { onChange, value } }) => (
             <Input
-              label="작성자"
+              label={MOGACO_POST.MEMBER.LABEL}
               required
               disabled
               defaultValue="user" // 로그인한 유저 정보
@@ -72,12 +40,12 @@ export function MogacoPostPage() {
           rules={{ required: true }}
           render={({ field: { onChange, value }, fieldState: { error } }) => (
             <Input
-              label="그룹"
-              placeholder="그룹을 선택해주세요"
+              label={MOGACO_POST.GROUP.LABEL}
+              placeholder={MOGACO_POST.GROUP.REQUIRED}
               required
               onChange={onChange}
               value={value}
-              errorMessage={error && '그룹을 선택해주세요'}
+              errorMessage={error && MOGACO_POST.GROUP.REQUIRED}
             />
           )}
         />
@@ -85,16 +53,25 @@ export function MogacoPostPage() {
           control={control}
           name="maxHumanCount"
           rules={{
-            required: '최대 인원 수를 입력해주세요',
-            pattern: { value: /^[0-9]*$/, message: '숫자만 입력 가능합니다' },
-            min: { value: 2, message: '최소 인원 수는 2명입니다' },
-            max: { value: 20, message: '최대 인원 수는 20명입니다' },
+            required: MOGACO_POST.COUNT.REQUIRED,
+            pattern: {
+              value: /^[0-9]*$/,
+              message: MOGACO_POST.COUNT.PATTERN,
+            },
+            min: {
+              value: MOGACO_POST.COUNT.MIN_VALUE,
+              message: MOGACO_POST.COUNT.MIN,
+            },
+            max: {
+              value: MOGACO_POST.COUNT.MAX_VALUE,
+              message: MOGACO_POST.COUNT.MAX,
+            },
           }}
           render={({ field: { onChange, value }, fieldState: { error } }) => (
             <Input
-              label="최대 인원 수"
+              label={MOGACO_POST.COUNT.LABEL}
               type="number"
-              placeholder="20"
+              placeholder={MOGACO_POST.COUNT.PLACEHOLDER}
               required
               onChange={onChange}
               value={value}
@@ -108,12 +85,12 @@ export function MogacoPostPage() {
           rules={{ required: true }}
           render={({ field: { onChange, value }, fieldState: { error } }) => (
             <Input
-              label="장소"
-              placeholder="장소를 검색해주세요"
+              label={MOGACO_POST.ADDRESS.LABEL}
+              placeholder={MOGACO_POST.ADDRESS.REQUIRED}
               required
               onChange={onChange}
               value={value}
-              errorMessage={error && '장소를 검색해주세요'}
+              errorMessage={error && MOGACO_POST.ADDRESS.REQUIRED}
             />
           )}
         />
@@ -121,15 +98,14 @@ export function MogacoPostPage() {
           control={control}
           name="date"
           rules={{
-            required: '날짜를 선택해주세요',
-            min: { value: date, message: '현재 이후의 시간을 선택해주세요' },
+            required: MOGACO_POST.DATE.REQUIRED,
+            min: { value: date, message: MOGACO_POST.DATE.MIN },
           }}
           render={({ field: { onChange, value }, fieldState: { error } }) => (
             <Input
-              label="날짜 및 시간"
+              label={MOGACO_POST.DATE.LABEL}
               type="datetime-local"
               required
-              defaultValue={date}
               min={date}
               onChange={onChange}
               value={value}
@@ -141,17 +117,18 @@ export function MogacoPostPage() {
           control={control}
           name="contents"
           rules={{
-            required: '설명을 입력해주세요',
+            required: MOGACO_POST.CONTENTS.REQUIRED,
             maxLength: {
-              value: 1000,
-              message: '최대 1000자까지 입력 가능합니다',
+              value: MOGACO_POST.CONTENTS.MAX_LENGTH,
+              message: MOGACO_POST.CONTENTS.MAX,
             },
           }}
           render={({ field: { onChange, value }, fieldState: { error } }) => (
             <Textarea
-              label="설명"
-              rows={6}
-              maxLength={1000}
+              label={MOGACO_POST.CONTENTS.LABEL}
+              placeholder={MOGACO_POST.CONTENTS.REQUIRED}
+              rows={MOGACO_POST.CONTENTS.ROWS}
+              maxLength={MOGACO_POST.CONTENTS.MAX_LENGTH}
               required
               onChange={onChange}
               value={value}

From 03d545dd78468643010c83dae32e699499d83ec5 Mon Sep 17 00:00:00 2001
From: LEEJW1953 <jiwonlee1953@naver.com>
Date: Thu, 23 Nov 2023 15:59:56 +0900
Subject: [PATCH 08/12] =?UTF-8?q?:bug:=20Input,=20Textarea=20=EC=86=8D?=
 =?UTF-8?q?=EC=84=B1=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/frontend/src/components/commons/Input/Textarea.tsx | 4 ++--
 app/frontend/src/components/commons/Input/index.tsx    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/frontend/src/components/commons/Input/Textarea.tsx b/app/frontend/src/components/commons/Input/Textarea.tsx
index 8677195b1..a7cb2aa5a 100644
--- a/app/frontend/src/components/commons/Input/Textarea.tsx
+++ b/app/frontend/src/components/commons/Input/Textarea.tsx
@@ -9,8 +9,8 @@ type TextareaProps = {
   required?: boolean;
   fullWidth?: boolean;
   rows?: number;
-  value: string;
-  onChange: () => void;
+  value?: string;
+  onChange?: () => void;
 };
 
 export function Textarea({
diff --git a/app/frontend/src/components/commons/Input/index.tsx b/app/frontend/src/components/commons/Input/index.tsx
index 8a1c87f81..5291fb853 100644
--- a/app/frontend/src/components/commons/Input/index.tsx
+++ b/app/frontend/src/components/commons/Input/index.tsx
@@ -13,7 +13,7 @@ type InputProps = {
   max?: number;
   required?: boolean;
   defaultValue?: string;
-  value?: string;
+  value?: string | number;
   onChange?: () => void;
 };
 
@@ -44,7 +44,7 @@ export function Input({
         </span>
         {maxLength && (
           <span className={styles.count}>
-            {value ? value.length : 0}/{maxLength}
+            {value ? value.toString().length : 0}/{maxLength}
           </span>
         )}
       </div>

From 93e2275e4e8e83c4acad82abe273cbc23ebd80f3 Mon Sep 17 00:00:00 2001
From: LEEJW1953 <jiwonlee1953@naver.com>
Date: Thu, 23 Nov 2023 16:00:34 +0900
Subject: [PATCH 09/12] =?UTF-8?q?:label:=20=EB=AA=A8=EA=B0=81=EC=BD=94=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

기존 타입과 이름 통일
---
 app/frontend/src/types/mogaco.ts | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/app/frontend/src/types/mogaco.ts b/app/frontend/src/types/mogaco.ts
index 87cd9a0a4..2f27f7f07 100644
--- a/app/frontend/src/types/mogaco.ts
+++ b/app/frontend/src/types/mogaco.ts
@@ -1,4 +1,4 @@
-interface Mogaco {
+interface MogacoTypes {
   id: string;
   groupId: string;
   memberId: string;
@@ -13,18 +13,8 @@ interface Mogaco {
   profile: string;
 }
 
-export type MogacoPostForm = {
-  title: string;
-  memberId: string;
-  groupId: string;
-  contents: string;
-  date: string;
-  maxHumanCount: string;
-  address: string;
-};
-
-export type MogacoProps = Pick<
-  Mogaco,
+export type Mogaco = Pick<
+  MogacoTypes,
   | 'id'
   | 'groupId'
   | 'memberId'
@@ -37,4 +27,15 @@ export type MogacoProps = Pick<
   | 'status'
 >;
 
-export type Participant = Pick<Mogaco, 'memberId' | 'nickname' | 'profile'>;
+export type MogacoPostForm = Pick<
+  MogacoTypes,
+  | 'title'
+  | 'memberId'
+  | 'groupId'
+  | 'contents'
+  | 'date'
+  | 'maxHumanCount'
+  | 'address'
+>;
+
+export type Participant = Pick<MogacoTypes, 'id' | 'nickname' | 'profile'>;

From 0f25ffaa45e7ea92b9d9e201dbb6dc59fb22a037 Mon Sep 17 00:00:00 2001
From: LEEJW1953 <jiwonlee1953@naver.com>
Date: Thu, 23 Nov 2023 16:06:48 +0900
Subject: [PATCH 10/12] =?UTF-8?q?:recycle:=20=EC=9E=91=EC=84=B1=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A0=9C=EB=AA=A9=20=EA=B4=80?=
 =?UTF-8?q?=EB=A0=A8=20=EC=83=81=EC=88=98=20=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx b/app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx
index 2efec9104..5e8a0c5e3 100644
--- a/app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx
+++ b/app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx
@@ -9,8 +9,6 @@ type MogacoPostTitleProps = {
   control: Control<MogacoPostForm>;
 };
 
-const TITLE_MAXLENGTH = 64;
-
 export function MogacoPostTitle({ control }: MogacoPostTitleProps) {
   return (
     <Controller
@@ -30,11 +28,11 @@ export function MogacoPostTitle({ control }: MogacoPostTitleProps) {
               type="text"
               className={styles.title}
               placeholder={MOGACO_POST.TITLE.PLACEHOLDER}
-              maxLength={TITLE_MAXLENGTH}
+              maxLength={MOGACO_POST.TITLE.MAX_LENGTH}
               onChange={onChange}
             />
             <div className={styles.count}>
-              {value ? value.length : 0}/{TITLE_MAXLENGTH}
+              {value ? value.length : 0}/{MOGACO_POST.TITLE.MAX_LENGTH}
             </div>
           </div>
           {error && <div className={styles.errorMessage}>{error.message}</div>}

From b22574e47331cd17f0947cda3a0c5ee71ad4de12 Mon Sep 17 00:00:00 2001
From: LEEJW1953 <jiwonlee1953@naver.com>
Date: Thu, 23 Nov 2023 17:45:26 +0900
Subject: [PATCH 11/12] =?UTF-8?q?:lipstick:=20=EC=A0=9C=EB=AA=A9,=20?=
 =?UTF-8?q?=EC=B5=9C=EB=8C=80=20=EC=9D=B8=EC=9B=90=20=EC=88=98=20placehold?=
 =?UTF-8?q?er=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx | 2 +-
 app/frontend/src/components/MogacoPost/index.tsx           | 2 +-
 app/frontend/src/constants/MogacoPost.ts                   | 4 +---
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx b/app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx
index 5e8a0c5e3..6ae76b092 100644
--- a/app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx
+++ b/app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx
@@ -27,7 +27,7 @@ export function MogacoPostTitle({ control }: MogacoPostTitleProps) {
             <input
               type="text"
               className={styles.title}
-              placeholder={MOGACO_POST.TITLE.PLACEHOLDER}
+              placeholder={MOGACO_POST.TITLE.REQUIRED}
               maxLength={MOGACO_POST.TITLE.MAX_LENGTH}
               onChange={onChange}
             />
diff --git a/app/frontend/src/components/MogacoPost/index.tsx b/app/frontend/src/components/MogacoPost/index.tsx
index fa35fe4be..72304e728 100644
--- a/app/frontend/src/components/MogacoPost/index.tsx
+++ b/app/frontend/src/components/MogacoPost/index.tsx
@@ -71,7 +71,7 @@ export function MogacoPostPage() {
             <Input
               label={MOGACO_POST.COUNT.LABEL}
               type="number"
-              placeholder={MOGACO_POST.COUNT.PLACEHOLDER}
+              placeholder={MOGACO_POST.COUNT.REQUIRED}
               required
               onChange={onChange}
               value={value}
diff --git a/app/frontend/src/constants/MogacoPost.ts b/app/frontend/src/constants/MogacoPost.ts
index 946ac7d19..21c787f70 100644
--- a/app/frontend/src/constants/MogacoPost.ts
+++ b/app/frontend/src/constants/MogacoPost.ts
@@ -1,15 +1,13 @@
 export const MOGACO_POST = {
   TITLE: {
-    PLACEHOLDER: '모각코 함께해요',
     REQUIRED: '제목을 입력해주세요',
-    MAX: '최대 64자 까지 입력 가능합니다',
+    MAX: '최대 64자까지 입력 가능합니다',
     MAX_LENGTH: 64,
   },
   MEMBER: { LABEL: '작성자' },
   GROUP: { LABEL: '그룹', REQUIRED: '그룹을 선택해주세요' },
   COUNT: {
     LABEL: '최대 인원 수',
-    PLACEHOLDER: '20',
     REQUIRED: '최대 인원 수를 입력해주세요',
     PATTERN: '숫자만 입력 가능합니다',
     MIN: '최소 인원 수는 2명입니다',

From b660c323adb2befed07374fc338198b8852595b7 Mon Sep 17 00:00:00 2001
From: LEEJW1953 <jiwonlee1953@naver.com>
Date: Thu, 23 Nov 2023 17:49:10 +0900
Subject: [PATCH 12/12] =?UTF-8?q?:recycle:=20=EC=82=BC=ED=95=AD=EC=97=B0?=
 =?UTF-8?q?=EC=82=B0=EC=9E=90=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx b/app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx
index 6ae76b092..ff453792b 100644
--- a/app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx
+++ b/app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx
@@ -32,7 +32,7 @@ export function MogacoPostTitle({ control }: MogacoPostTitleProps) {
               onChange={onChange}
             />
             <div className={styles.count}>
-              {value ? value.length : 0}/{MOGACO_POST.TITLE.MAX_LENGTH}
+              {value?.length || 0}/{MOGACO_POST.TITLE.MAX_LENGTH}
             </div>
           </div>
           {error && <div className={styles.errorMessage}>{error.message}</div>}