diff --git a/app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx b/app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx
new file mode 100644
index 000000000..ff453792b
--- /dev/null
+++ b/app/frontend/src/components/MogacoPost/MogacoPostTitle.tsx
@@ -0,0 +1,43 @@
+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>;
+};
+
+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.REQUIRED}
+              maxLength={MOGACO_POST.TITLE.MAX_LENGTH}
+              onChange={onChange}
+            />
+            <div className={styles.count}>
+              {value?.length || 0}/{MOGACO_POST.TITLE.MAX_LENGTH}
+            </div>
+          </div>
+          {error && <div className={styles.errorMessage}>{error.message}</div>}
+        </div>
+      )}
+    />
+  );
+}
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..72304e728 100644
--- a/app/frontend/src/components/MogacoPost/index.tsx
+++ b/app/frontend/src/components/MogacoPost/index.tsx
@@ -1,48 +1,141 @@
+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';
+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 = () => {};
 
   return (
-    <form className={styles.container}>
+    <form className={styles.container} onSubmit={handleSubmit(onSubmit)}>
+      <MogacoPostTitle control={control} />
       <div className={styles.formContent}>
-        <input
-          type="text"
-          className={styles.title}
-          placeholder="모각코 함께해요"
-          required
+        <Controller
+          control={control}
+          name="memberId"
+          render={({ field: { onChange, value } }) => (
+            <Input
+              label={MOGACO_POST.MEMBER.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={MOGACO_POST.GROUP.LABEL}
+              placeholder={MOGACO_POST.GROUP.REQUIRED}
+              required
+              onChange={onChange}
+              value={value}
+              errorMessage={error && MOGACO_POST.GROUP.REQUIRED}
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="maxHumanCount"
+          rules={{
+            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={MOGACO_POST.COUNT.LABEL}
+              type="number"
+              placeholder={MOGACO_POST.COUNT.REQUIRED}
+              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={MOGACO_POST.ADDRESS.LABEL}
+              placeholder={MOGACO_POST.ADDRESS.REQUIRED}
+              required
+              onChange={onChange}
+              value={value}
+              errorMessage={error && MOGACO_POST.ADDRESS.REQUIRED}
+            />
+          )}
         />
-        <Input label="그룹" placeholder="그룹을 선택해주세요" required />
-        <Input
-          label="최대 인원 수"
-          type="number"
-          placeholder="20"
-          min={1}
-          max={20}
-          required
+        <Controller
+          control={control}
+          name="date"
+          rules={{
+            required: MOGACO_POST.DATE.REQUIRED,
+            min: { value: date, message: MOGACO_POST.DATE.MIN },
+          }}
+          render={({ field: { onChange, value }, fieldState: { error } }) => (
+            <Input
+              label={MOGACO_POST.DATE.LABEL}
+              type="datetime-local"
+              required
+              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: MOGACO_POST.CONTENTS.REQUIRED,
+            maxLength: {
+              value: MOGACO_POST.CONTENTS.MAX_LENGTH,
+              message: MOGACO_POST.CONTENTS.MAX,
+            },
+          }}
+          render={({ field: { onChange, value }, fieldState: { error } }) => (
+            <Textarea
+              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}
+              errorMessage={error && error.message}
+            />
+          )}
         />
-        <Textarea label="설명" maxLength={1000} rows={6} />
       </div>
       <div className={styles.formContent}>
         <Button
@@ -51,7 +144,6 @@ export function MogacoPostPage() {
           shape="fill"
           size="large"
           fullWidth
-          onClick={() => {}}
         >
           등록하기
         </Button>
diff --git a/app/frontend/src/components/commons/Input/Textarea.tsx b/app/frontend/src/components/commons/Input/Textarea.tsx
index 2da00d5a1..a7cb2aa5a 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..5291fb853 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 | number;
+  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.toString().length : 0}/{maxLength}
           </span>
         )}
       </div>
       <input
-        ref={inputRef}
         className={styles.input}
         type={type}
         placeholder={placeholder}
@@ -62,9 +56,8 @@ export function Input({
         maxLength={maxLength}
         min={min}
         max={max}
-        required={required}
         defaultValue={defaultValue}
-        onChange={handleInput}
+        onChange={onChange}
       />
       {!disabled && errorMessage && (
         <p className={styles.errorMessage}>{errorMessage}</p>
diff --git a/app/frontend/src/constants/MogacoPost.ts b/app/frontend/src/constants/MogacoPost.ts
new file mode 100644
index 000000000..21c787f70
--- /dev/null
+++ b/app/frontend/src/constants/MogacoPost.ts
@@ -0,0 +1,34 @@
+export const MOGACO_POST = {
+  TITLE: {
+    REQUIRED: '제목을 입력해주세요',
+    MAX: '최대 64자까지 입력 가능합니다',
+    MAX_LENGTH: 64,
+  },
+  MEMBER: { LABEL: '작성자' },
+  GROUP: { LABEL: '그룹', REQUIRED: '그룹을 선택해주세요' },
+  COUNT: {
+    LABEL: '최대 인원 수',
+    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';
diff --git a/app/frontend/src/types/mogaco.ts b/app/frontend/src/types/mogaco.ts
index 024cd5199..2f27f7f07 100644
--- a/app/frontend/src/types/mogaco.ts
+++ b/app/frontend/src/types/mogaco.ts
@@ -1,4 +1,4 @@
-export type Mogaco = {
+interface MogacoTypes {
   id: string;
   groupId: string;
   memberId: string;
@@ -9,10 +9,33 @@ export type Mogaco = {
   maxHumanCount: number;
   address: string;
   status: '모집 중' | '마감' | '종료';
-};
-
-export type Participant = {
-  id: string;
   nickname: string;
   profile: string;
-};
+}
+
+export type Mogaco = Pick<
+  MogacoTypes,
+  | 'id'
+  | 'groupId'
+  | 'memberId'
+  | 'title'
+  | 'contents'
+  | 'date'
+  | 'participantList'
+  | 'maxHumanCount'
+  | 'address'
+  | 'status'
+>;
+
+export type MogacoPostForm = Pick<
+  MogacoTypes,
+  | 'title'
+  | 'memberId'
+  | 'groupId'
+  | 'contents'
+  | 'date'
+  | 'maxHumanCount'
+  | 'address'
+>;
+
+export type Participant = Pick<MogacoTypes, 'id' | 'nickname' | 'profile'>;