diff --git a/pages/index.tsx b/pages/index.tsx
index b390ee55..0271c9a6 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,5 +1,17 @@
-const HomePage = () => {
-  return <>Hello World</>;
+import type { NextPage } from 'next';
+
+import WriteInput from '@/src/components/Input/WriteInput';
+import { useInput } from '@/src/hooks/useInput';
+
+const HomePage: NextPage = () => {
+  const testInputProps = useInput({
+    id: 'test',
+    defaultValue: '',
+  });
+
+  return (
+    <WriteInput inputProps={testInputProps} placeholder="메모를 끄적여보세요" />
+  );
 };
 
 export default HomePage;
diff --git a/plopfile.mjs b/plopfile.mjs
index d2e3eb12..3f197c12 100644
--- a/plopfile.mjs
+++ b/plopfile.mjs
@@ -1,4 +1,3 @@
-/* eslint-disable import/no-anonymous-default-export */
 export default function (plop) {
   const getComponentName = {
     type: 'input',
diff --git a/src/assets/icons/submit.svg b/src/assets/icons/submit.svg
new file mode 100644
index 00000000..039b1dea
--- /dev/null
+++ b/src/assets/icons/submit.svg
@@ -0,0 +1,4 @@
+<svg width="100%" height="100%" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="currentColor"/>
+<path d="M23.4258 14.6138C23.2489 14.687 23.0832 14.7955 22.9393 14.9393L14.9393 22.9393C14.3536 23.5251 14.3536 24.4749 14.9393 25.0607C15.5251 25.6464 16.4749 25.6464 17.0607 25.0607L22.5 19.6213V32C22.5 32.8284 23.1716 33.5 24 33.5C24.8284 33.5 25.5 32.8284 25.5 32V19.6213L30.9393 25.0607C31.5251 25.6464 32.4749 25.6464 33.0607 25.0607C33.6464 24.4749 33.6464 23.5251 33.0607 22.9393L25.0607 14.9393C24.7678 14.6464 24.3839 14.5 24 14.5C23.7966 14.5 23.6027 14.5405 23.4258 14.6138Z" fill="white"/>
+</svg>
diff --git a/src/components/Input/WriteInput/index.tsx b/src/components/Input/WriteInput/index.tsx
new file mode 100644
index 00000000..20c40fef
--- /dev/null
+++ b/src/components/Input/WriteInput/index.tsx
@@ -0,0 +1,115 @@
+import type { ChangeEvent, HTMLAttributes, KeyboardEvent } from 'react';
+import { useMemo, useRef, useState } from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+
+import { MAIN_INPUT_MAX_LENGTH } from '@/src/constants/config';
+import type { UseInputReturn } from '@/src/hooks/useInput';
+import { COLORS } from '@/src/styles/tokens';
+
+import Icon from '../../SvgIcon';
+import * as style from './style.css';
+
+interface WriteInputProps extends HTMLAttributes<HTMLTextAreaElement> {
+  inputProps: UseInputReturn;
+  placeholder?: string;
+  maxLength?: number;
+}
+
+const WriteInput = ({
+  inputProps,
+  placeholder,
+  maxLength = MAIN_INPUT_MAX_LENGTH,
+}: WriteInputProps) => {
+  const { id, value } = inputProps;
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+  const [textareaHeight, setTextareaHeight] = useState({
+    row: 1,
+    lineBreak: {},
+  });
+
+  const handleResize = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const { scrollHeight, clientHeight, value } = e.target;
+
+    if (value.length === 0) {
+      setTextareaHeight((prev) => ({
+        row: 1,
+        lineBreak: { ...prev.lineBreak, [e.target.value.length]: false },
+      }));
+    }
+
+    if (scrollHeight > clientHeight) {
+      setTextareaHeight((prev) => ({
+        row: prev.row + 1,
+        lineBreak: { ...prev.lineBreak, [value.length - 1]: true },
+      }));
+    }
+
+    if (textareaHeight.lineBreak[value.length]) {
+      setTextareaHeight((prev) => ({
+        row: prev.row - 1,
+        lineBreak: { ...prev.lineBreak, [value.length]: false },
+      }));
+    }
+  };
+
+  const handleKeydownEnter = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.code === 'Enter') {
+      setTextareaHeight((prev) => ({
+        row: prev.row + 1,
+        lineBreak: { ...prev.lineBreak, [value.length]: true },
+      }));
+    }
+  };
+
+  const isValid = useMemo(() => value.length > 0, [value.length]);
+
+  return (
+    <div className={style.conatiner}>
+      <div
+        className={style.contentWrapper}
+        style={assignInlineVars({
+          [style.inputHeight]: `${textareaHeight.row * 27}px`,
+        })}
+      >
+        <label htmlFor={id} className={style.label}>
+          <textarea
+            {...inputProps}
+            ref={inputRef}
+            autoComplete="off"
+            rows={textareaHeight.row}
+            className={style.input}
+            placeholder={placeholder}
+            maxLength={maxLength}
+            onInput={handleResize}
+            onKeyDown={handleKeydownEnter}
+          />
+        </label>
+
+        <div
+          className={style.submitWrapper({
+            multirow: textareaHeight.row > 1,
+          })}
+        >
+          <div className={style.submit}>
+            {value.length > 0 && (
+              <span className={style.textCount}>
+                <span className={style.currentTextCount}>{value.length}</span>
+                &nbsp;/&nbsp;500자
+              </span>
+            )}
+            <button disabled={!isValid}>
+              <Icon
+                icon="submit"
+                width={48}
+                height={48}
+                color={isValid ? COLORS['Blue/Default'] : undefined}
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WriteInput;
diff --git a/src/components/Input/WriteInput/style.css.ts b/src/components/Input/WriteInput/style.css.ts
new file mode 100644
index 00000000..1f2fe392
--- /dev/null
+++ b/src/components/Input/WriteInput/style.css.ts
@@ -0,0 +1,90 @@
+import { createVar, style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { COLORS } from '@/src/styles/tokens';
+
+export const conatiner = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  borderRadius: '16px',
+  width: '100%',
+  padding: '22px 12px 22px 24px',
+  border: `2px solid ${COLORS['Blue/Gradient']}`,
+});
+
+export const inputHeight = createVar();
+export const contentWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  height: inputHeight,
+  minHeight: '27px',
+  maxHeight: '260px',
+});
+
+export const label = style({
+  width: '100%',
+});
+
+export const input = style({
+  padding: '0',
+  width: '100%',
+  maxHeight: '216px',
+  resize: 'none',
+  color: COLORS['Grey/900'],
+  fontSize: '17px',
+  lineHeight: '27px',
+  overflowWrap: 'break-word',
+  '::placeholder': {
+    color: COLORS['Grey/250'],
+  },
+});
+
+export const submitWrapper = recipe({
+  base: {
+    display: 'flex',
+    alignItems: 'flex-end',
+    paddingLeft: '20px',
+  },
+  variants: {
+    multirow: {
+      true: {
+        height: '100%',
+      },
+    },
+  },
+});
+
+export const submit = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '16px',
+  height: '48px',
+});
+
+export const textCount = style({
+  color: COLORS['Grey/400'],
+  fontSize: '14px',
+  fontWeight: '400',
+  whiteSpace: 'nowrap',
+});
+
+export const currentTextCount = style({
+  color: COLORS['Blue/Default'],
+  fontSize: '14px',
+  fontWeight: '700',
+});
+
+export const alert = style({
+  display: 'flex',
+  alignItems: 'center',
+  marginTop: '12px',
+});
+
+export const alertMsg = style({
+  marginLeft: '6px',
+  color: COLORS['Grey/600'],
+  fontSize: '13px',
+  fontWeight: '600',
+  lineHeight: '17px',
+});
diff --git a/src/components/SvgIcon.tsx b/src/components/SvgIcon.tsx
index 72283873..a8b23852 100644
--- a/src/components/SvgIcon.tsx
+++ b/src/components/SvgIcon.tsx
@@ -1,23 +1,16 @@
-import { Icon as icon } from '../constants/icon';
+import { iconFactory, type Icons } from '../constants/icon';
 
 interface IconProps {
-  icon: keyof typeof icon;
-  fill?: string;
-  stroke?: string;
+  icon: Icons;
+  color?: string;
   width?: number;
   height?: number;
 }
 
-const Icon = ({
-  icon: iconKey,
-  fill,
-  stroke,
-  width = 24,
-  height = 24,
-}: IconProps) => {
-  const SvgIcon = icon[iconKey];
+const Icon = ({ icon, color, width = 24, height = 24 }: IconProps) => {
+  const SvgIcon = iconFactory[icon];
 
-  return <SvgIcon fill={fill} stroke={stroke} width={width} height={height} />;
+  return <SvgIcon color={color} width={width} height={height} />;
 };
 
 export default Icon;
diff --git a/src/constants/config.ts b/src/constants/config.ts
new file mode 100644
index 00000000..1307be25
--- /dev/null
+++ b/src/constants/config.ts
@@ -0,0 +1,4 @@
+/**
+ * "끄적끄적" 최대 입력 글자 수
+ */
+export const MAIN_INPUT_MAX_LENGTH = 500;
diff --git a/src/constants/icon.ts b/src/constants/icon.ts
index 50685d54..1d81236f 100644
--- a/src/constants/icon.ts
+++ b/src/constants/icon.ts
@@ -1,11 +1,9 @@
-import type { FC, SVGProps } from 'react';
-
 import Profle from '@/src/assets/icons/profile.svg';
+import Submit from '@/src/assets/icons/submit.svg';
 
-export type IconFactory = {
-  [key: string]: FC<SVGProps<SVGSVGElement>>;
-};
-
-export const Icon: IconFactory = {
+export const iconFactory = {
   profile: Profle,
+  submit: Submit,
 };
+
+export type Icons = keyof typeof iconFactory;
diff --git a/src/hooks/useInput.ts b/src/hooks/useInput.ts
new file mode 100644
index 00000000..4fe895de
--- /dev/null
+++ b/src/hooks/useInput.ts
@@ -0,0 +1,19 @@
+import type { ChangeEvent } from 'react';
+import { useState } from 'react';
+
+interface UseInputArgs {
+  id: string;
+  defaultValue?: string;
+}
+
+export const useInput = ({ id, defaultValue = '' }: UseInputArgs) => {
+  const [value, setValue] = useState(defaultValue);
+
+  const onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setValue(e.currentTarget.value);
+  };
+
+  return { id, value, onChange };
+};
+
+export type UseInputReturn = ReturnType<typeof useInput>;
diff --git a/tsconfig.json b/tsconfig.json
index 19fff78a..91e21029 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "strict": true,
+    "strict": false,
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,