diff --git a/src/components/input/AccountInput.tsx b/src/components/input/AccountInput.tsx
new file mode 100644
index 0000000..97ec397
--- /dev/null
+++ b/src/components/input/AccountInput.tsx
@@ -0,0 +1,39 @@
+import { useId } from 'react';
+
+import Input from './Input';
+import { AccountInputProps } from './types/types';
+import styles from './styles/AccountInput.module.css';
+
+/**
+ * 프로필 페이지용 계정 정보 표시 컴포넌트.
+ * 이메일과 비밀번호를 읽기 전용으로 보여줍니다.
+ * children 슬롯에 변경하기 버튼 등을 주입할 수 있습니다.
+ */
+export default function AccountInput({ email, children }: AccountInputProps) {
+  const emailId = useId();
+  const passwordId = useId();
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.field}>
+        <label htmlFor={emailId} className={styles.label}>
+          이메일
+        </label>
+        <Input id={emailId} type="email" value={email} disabled className={styles.readOnly} />
+      </div>
+      <div className={styles.field}>
+        <label htmlFor={passwordId} className={styles.label}>
+          비밀번호
+        </label>
+        <Input
+          id={passwordId}
+          type="password"
+          value="••••••••"
+          disabled
+          className={styles.readOnly}
+        />
+      </div>
+      {children && <div className={styles.buttonArea}>{children}</div>}
+    </div>
+  );
+}
diff --git a/src/components/input/ActionTextArea.tsx b/src/components/input/ActionTextArea.tsx
new file mode 100644
index 0000000..27652f3
--- /dev/null
+++ b/src/components/input/ActionTextArea.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import Image from 'next/image';
+import clsx from 'clsx';
+import TextArea from './TextArea';
+import { ActionTextAreaProps } from './types/types';
+import arrowActive from '@/assets/buttons/arrow/arrowUpActivedButton.svg';
+import arrowInactive from '@/assets/buttons/arrow/arrowUpNonActivedButton.svg';
+import styles from './styles/ActionTextArea.module.css';
+
+/**
+ * 전송 버튼이 포함된 텍스트 입력 컴포넌트.
+ * 텍스트를 입력하면 전송 버튼이 활성화되고, 높이가 내용에 맞게 자동 조절됩니다.
+ * CommentInput의 기반 컴포넌트로, 단독으로도 사용할 수 있습니다.
+ */
+export default function ActionTextArea({
+  onSubmit,
+  wrapperClassName,
+  className,
+  onChange,
+  ...props
+}: ActionTextAreaProps) {
+  const [hasValue, setHasValue] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  return (
+    <div
+      className={clsx(styles.wrapper, wrapperClassName)}
+      role="group"
+      aria-label="텍스트 입력 및 전송"
+    >
+      <TextArea
+        ref={textareaRef}
+        rows={1}
+        className={clsx(styles.textarea, className)}
+        onChange={(e) => {
+          setHasValue(e.target.value.length > 0);
+          const el = textareaRef.current;
+          if (el) {
+            el.style.height = 'auto';
+            el.style.height = `${el.scrollHeight}px`;
+          }
+          onChange?.(e);
+        }}
+        {...props}
+      />
+      <button
+        type="button"
+        className={styles.action}
+        onClick={onSubmit}
+        disabled={!hasValue}
+        aria-label="전송"
+      >
+        <Image src={hasValue ? arrowActive : arrowInactive} alt="" width={24} height={24} />
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/input/ChangePassword.tsx b/src/components/input/ChangePassword.tsx
new file mode 100644
index 0000000..4b5af7a
--- /dev/null
+++ b/src/components/input/ChangePassword.tsx
@@ -0,0 +1,50 @@
+import { useId } from 'react';
+
+import Input from './Input';
+import { ChangePasswordProps } from './types/types';
+import styles from './styles/ChangePassword.module.css';
+
+/**
+ * 비밀번호 변경 폼 컴포넌트.
+ * 새 비밀번호 + 확인 입력 필드로 구성되며, isEditing이 false면 입력이 비활성화됩니다.
+ * children 슬롯에 변경하기/취소 버튼 등을 주입할 수 있습니다.
+ */
+export default function ChangePassword({
+  isEditing = false,
+  newPasswordProps,
+  confirmPasswordProps,
+  children,
+}: ChangePasswordProps) {
+  const newPasswordId = useId();
+  const confirmPasswordId = useId();
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.field}>
+        <label htmlFor={newPasswordId} className={styles.label}>
+          새 비밀번호
+        </label>
+        <Input
+          id={newPasswordId}
+          type="password"
+          placeholder="새 비밀번호를 입력해 주세요."
+          disabled={!isEditing}
+          {...newPasswordProps}
+        />
+      </div>
+      <div className={styles.field}>
+        <label htmlFor={confirmPasswordId} className={styles.label}>
+          새 비밀번호 확인
+        </label>
+        <Input
+          id={confirmPasswordId}
+          type="password"
+          placeholder="새 비밀번호를 다시 한 번 입력해 주세요."
+          disabled={!isEditing}
+          {...confirmPasswordProps}
+        />
+      </div>
+      <div className={styles.buttonArea}>{children}</div>
+    </div>
+  );
+}
diff --git a/src/components/input/CommentInput.tsx b/src/components/input/CommentInput.tsx
new file mode 100644
index 0000000..8c7ef0c
--- /dev/null
+++ b/src/components/input/CommentInput.tsx
@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+import ActionTextArea from './ActionTextArea';
+import { CommentInputProps } from './types/types';
+import styles from './styles/CommentInput.module.css';
+
+/**
+ * 댓글 입력 컴포넌트.
+ * ActionTextArea를 위아래 보더 스타일로 감싸서 댓글 영역에 맞는 디자인을 제공합니다.
+ * 전송 버튼과 높이 자동 조절은 ActionTextArea에서 상속됩니다.
+ */
+export default function CommentInput({ className, ...props }: CommentInputProps) {
+  return (
+    <ActionTextArea
+      wrapperClassName={styles.wrapper}
+      className={clsx(styles.textarea, className)}
+      {...props}
+    />
+  );
+}
diff --git a/src/components/input/Input.stories.tsx b/src/components/input/Input.stories.tsx
new file mode 100644
index 0000000..a14559a
--- /dev/null
+++ b/src/components/input/Input.stories.tsx
@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import { fn } from 'storybook/test';
+
+import Input from './Input';
+
+const meta = {
+  title: 'Components/Input',
+  component: Input,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    placeholder: '텍스트를 입력해 주세요.',
+    onChange: fn(),
+  },
+  argTypes: {
+    type: {
+      control: 'inline-radio',
+      options: ['text', 'email', 'password'],
+    },
+    errorMessage: {
+      control: 'text',
+    },
+    isError: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 460 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Email: Story = {
+  args: {
+    type: 'email',
+    placeholder: '이메일을 입력해 주세요.',
+  },
+};
+
+export const EmailWithError: Story = {
+  args: {
+    type: 'email',
+    placeholder: '이메일을 입력해 주세요.',
+    errorMessage: '유효한 이메일이 아닙니다',
+  },
+};
+
+export const ErrorBorderOnly: Story = {
+  args: {
+    isError: true,
+    placeholder: '보더만 빨간색',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    value: '비활성 상태',
+  },
+};
+
+export const Overview: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 460 }}>
+      <Input placeholder="기본 Input" />
+      <Input type="email" placeholder="이메일" />
+      <Input type="email" placeholder="이메일" errorMessage="유효한 이메일이 아닙니다" />
+      <Input placeholder="보더만 에러" isError />
+      <Input placeholder="비활성" disabled />
+    </div>
+  ),
+  parameters: {
+    controls: { disable: true },
+  },
+};
diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
new file mode 100644
index 0000000..3696db0
--- /dev/null
+++ b/src/components/input/Input.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { useId } from 'react';
+import clsx from 'clsx';
+import { InputProps } from './types/types';
+import styles from './styles/Input.module.css';
+
+/**
+ * 범용 텍스트 입력 컴포넌트.
+ * 네이티브 `<input>`의 모든 속성을 지원하며, errorMessage를 전달하면
+ * 빨간 테두리 + 하단 에러 텍스트가 자동으로 표시됩니다.
+ */
+export default function Input({ className, errorMessage, isError, ...props }: InputProps) {
+  const hasError = isError || !!errorMessage;
+  const errorId = useId();
+
+  return (
+    <>
+      <input
+        aria-invalid={hasError || undefined}
+        aria-describedby={errorMessage ? errorId : undefined}
+        {...props}
+        className={clsx(styles.input, hasError && styles.error, className)}
+      />
+      {errorMessage && (
+        <p id={errorId} role="alert" className={styles.errorMessage}>
+          {errorMessage}
+        </p>
+      )}
+    </>
+  );
+}
diff --git a/src/components/input/PasswordInput.stories.tsx b/src/components/input/PasswordInput.stories.tsx
new file mode 100644
index 0000000..09f8fc5
--- /dev/null
+++ b/src/components/input/PasswordInput.stories.tsx
@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import { fn } from 'storybook/test';
+
+import PasswordInput from './PasswordInput';
+
+const meta = {
+  title: 'Components/PasswordInput',
+  component: PasswordInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    placeholder: '비밀번호를 입력해 주세요.',
+    onChange: fn(),
+  },
+  argTypes: {
+    errorMessage: {
+      control: 'text',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 460 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof PasswordInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithError: Story = {
+  args: {
+    errorMessage: '비밀번호를 입력해주세요.',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const Overview: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 460 }}>
+      <PasswordInput placeholder="기본 비밀번호" />
+      <PasswordInput placeholder="에러 상태" errorMessage="비밀번호를 입력해주세요." />
+      <PasswordInput placeholder="비활성" disabled />
+    </div>
+  ),
+  parameters: {
+    controls: { disable: true },
+  },
+};
diff --git a/src/components/input/PasswordInput.tsx b/src/components/input/PasswordInput.tsx
new file mode 100644
index 0000000..3932bf8
--- /dev/null
+++ b/src/components/input/PasswordInput.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import { useId, useState } from 'react';
+import Image from 'next/image';
+import clsx from 'clsx';
+import Input from './Input';
+import { PasswordInputProps } from './types/types';
+import visibilityTrue from '@/assets/icons/visibility/visibillityTrue.svg';
+import visibilityFalse from '@/assets/icons/visibility/visibillityFalse.svg';
+import styles from './styles/PasswordInput.module.css';
+
+/**
+ * 비밀번호 전용 입력 컴포넌트.
+ * 우측 눈 아이콘으로 비밀번호 표시/숨기기를 토글할 수 있습니다.
+ * 복사 방지가 기본 적용되어 있으며, errorMessage 전달 시 에러 상태를 표시합니다.
+ */
+export default function PasswordInput({ className, errorMessage, ...props }: PasswordInputProps) {
+  const [showPassword, setShowPassword] = useState(false);
+  const errorId = useId();
+
+  return (
+    <>
+      <div className={styles.wrapper} role="group" aria-label="비밀번호 입력">
+        <Input
+          type={showPassword ? 'text' : 'password'}
+          className={clsx(styles.input, className)}
+          isError={!!errorMessage}
+          onCopy={(e) => e.preventDefault()}
+          aria-describedby={errorMessage ? errorId : undefined}
+          {...props}
+        />
+        <button
+          type="button"
+          className={styles.toggleButton}
+          onClick={() => setShowPassword((prev) => !prev)}
+          aria-label={showPassword ? '비밀번호 숨기기' : '비밀번호 보기'}
+        >
+          <Image
+            src={showPassword ? visibilityTrue : visibilityFalse}
+            alt=""
+            width={24}
+            height={24}
+          />
+        </button>
+      </div>
+      {errorMessage && (
+        <p id={errorId} role="alert" className={styles.errorMessage}>
+          {errorMessage}
+        </p>
+      )}
+    </>
+  );
+}
diff --git a/src/components/input/TextArea.tsx b/src/components/input/TextArea.tsx
new file mode 100644
index 0000000..48e0e91
--- /dev/null
+++ b/src/components/input/TextArea.tsx
@@ -0,0 +1,12 @@
+import clsx from 'clsx';
+import { TextAreaProps } from './types/types';
+import styles from './styles/TextArea.module.css';
+
+/**
+ * 멀티라인 텍스트 입력 컴포넌트.
+ * 네이티브 `<textarea>`의 모든 속성을 지원합니다.
+ * 높이 자동 조절이 필요하면 ActionTextArea를 사용하세요.
+ */
+export default function TextArea({ className, ref, ...props }: TextAreaProps) {
+  return <textarea ref={ref} className={clsx(styles.textarea, className)} {...props} />;
+}
diff --git a/src/components/input/index.ts b/src/components/input/index.ts
new file mode 100644
index 0000000..676d610
--- /dev/null
+++ b/src/components/input/index.ts
@@ -0,0 +1,7 @@
+export { default as Input } from './Input';
+export { default as PasswordInput } from './PasswordInput';
+export { default as AccountInput } from './AccountInput';
+export { default as ChangePassword } from './ChangePassword';
+export { default as TextArea } from './TextArea';
+export { default as ActionTextArea } from './ActionTextArea';
+export { default as CommentInput } from './CommentInput';
diff --git a/src/components/input/styles/AccountInput.module.css b/src/components/input/styles/AccountInput.module.css
new file mode 100644
index 0000000..eb87b61
--- /dev/null
+++ b/src/components/input/styles/AccountInput.module.css
@@ -0,0 +1,29 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.label {
+  font-family: var(--font-pretendard), 'Pretendard', sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  color: var(--color-text-tertiary);
+}
+
+.readOnly {
+  background: var(--color-background-secondary);
+  color: var(--color-text-disabled);
+}
+
+.buttonArea {
+  display: flex;
+}
diff --git a/src/components/input/styles/ActionTextArea.module.css b/src/components/input/styles/ActionTextArea.module.css
new file mode 100644
index 0000000..bec3d55
--- /dev/null
+++ b/src/components/input/styles/ActionTextArea.module.css
@@ -0,0 +1,26 @@
+.wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.textarea {
+  min-height: auto;
+  padding-right: 56px;
+  overflow-y: hidden;
+}
+
+.action {
+  position: absolute;
+  right: 16px;
+  bottom: 12px;
+  display: flex;
+  align-items: center;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.action:disabled {
+  cursor: default;
+}
diff --git a/src/components/input/styles/ChangePassword.module.css b/src/components/input/styles/ChangePassword.module.css
new file mode 100644
index 0000000..ee73def
--- /dev/null
+++ b/src/components/input/styles/ChangePassword.module.css
@@ -0,0 +1,24 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.label {
+  font-family: var(--font-pretendard), 'Pretendard', sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  color: var(--color-text-tertiary);
+}
+
+.buttonArea {
+  display: flex;
+}
diff --git a/src/components/input/styles/CommentInput.module.css b/src/components/input/styles/CommentInput.module.css
new file mode 100644
index 0000000..eec8ddd
--- /dev/null
+++ b/src/components/input/styles/CommentInput.module.css
@@ -0,0 +1,9 @@
+.wrapper {
+  border-top: 1px solid var(--color-background-tertiary);
+  border-bottom: 1px solid var(--color-background-tertiary);
+}
+
+.textarea {
+  border: none;
+  border-radius: 0;
+}
diff --git a/src/components/input/styles/Input.module.css b/src/components/input/styles/Input.module.css
new file mode 100644
index 0000000..13c4f40
--- /dev/null
+++ b/src/components/input/styles/Input.module.css
@@ -0,0 +1,28 @@
+.input {
+  width: 100%;
+  height: 48px;
+  border-radius: 12px;
+  border: 1px solid var(--color-background-tertiary);
+  padding: 16px;
+  background: var(--color-background-inverse);
+  font-family: var(--font-pretendard), 'Pretendard', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 19px;
+  color: var(--color-text-tertiary);
+  outline: none;
+}
+
+.input::placeholder {
+  color: var(--color-text-default);
+}
+
+.error {
+  border-color: var(--color-status-danger);
+}
+
+.errorMessage {
+  font-size: 12px;
+  color: var(--color-status-danger);
+  margin-top: 4px;
+}
diff --git a/src/components/input/styles/PasswordInput.module.css b/src/components/input/styles/PasswordInput.module.css
new file mode 100644
index 0000000..3c8b717
--- /dev/null
+++ b/src/components/input/styles/PasswordInput.module.css
@@ -0,0 +1,27 @@
+.wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.input {
+  padding-right: 48px;
+}
+
+.toggleButton {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.errorMessage {
+  font-size: 12px;
+  color: var(--color-status-danger);
+  margin-top: 4px;
+}
diff --git a/src/components/input/styles/TextArea.module.css b/src/components/input/styles/TextArea.module.css
new file mode 100644
index 0000000..54bb587
--- /dev/null
+++ b/src/components/input/styles/TextArea.module.css
@@ -0,0 +1,20 @@
+.textarea {
+  width: 100%;
+  min-height: 75px;
+  border-radius: 12px;
+  border: 1px solid var(--color-background-tertiary);
+  padding: 12px 16px;
+  background: var(--color-background-inverse);
+  font-family: var(--font-pretendard), 'Pretendard', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 19px;
+  color: var(--color-text-tertiary);
+  outline: none;
+  resize: none;
+  overflow-y: auto;
+}
+
+.textarea::placeholder {
+  color: var(--color-text-default);
+}
diff --git a/src/components/input/types/types.ts b/src/components/input/types/types.ts
new file mode 100644
index 0000000..e2b8b2e
--- /dev/null
+++ b/src/components/input/types/types.ts
@@ -0,0 +1,45 @@
+import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
+
+export type InputProps = ComponentPropsWithoutRef<'input'> & {
+  /** 입력 필드 하단에 표시할 에러 메시지 */
+  errorMessage?: string;
+  /** 에러 스타일 적용 여부 (errorMessage 없이 테두리만 빨갛게 할 때 사용) */
+  isError?: boolean;
+};
+
+export type PasswordInputProps = Omit<ComponentPropsWithoutRef<'input'>, 'type'> & {
+  /** 입력 필드 하단에 표시할 에러 메시지 */
+  errorMessage?: string;
+};
+
+export type TextAreaProps = ComponentPropsWithoutRef<'textarea'> & {
+  /** textarea DOM 참조 */
+  ref?: Ref<HTMLTextAreaElement>;
+};
+
+export type ActionTextAreaProps = TextAreaProps & {
+  /** 엔터 키 또는 제출 버튼 클릭 시 호출되는 콜백 */
+  onSubmit?: () => void;
+  /** 외부 래퍼 div에 적용할 추가 CSS 클래스 */
+  wrapperClassName?: string;
+};
+
+export type CommentInputProps = Omit<ActionTextAreaProps, 'wrapperClassName'>;
+
+export type AccountInputProps = {
+  /** 표시할 이메일 주소 (읽기 전용) */
+  email?: string;
+  /** 우측에 주입할 버튼 등 (예: 변경하기 버튼) */
+  children?: ReactNode;
+};
+
+export type ChangePasswordProps = {
+  /** 비밀번호 수정 모드 활성화 여부 */
+  isEditing?: boolean;
+  /** 새 비밀번호 입력 필드에 전달할 props */
+  newPasswordProps?: PasswordInputProps;
+  /** 비밀번호 확인 입력 필드에 전달할 props */
+  confirmPasswordProps?: PasswordInputProps;
+  /** 하단에 주입할 버튼 등 (예: 변경하기 버튼) */
+  children?: ReactNode;
+};