From 0a9f2ced24d6c8ff718f687854f7287aaba58713 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A0=95=EC=9B=90?= <jwon133@gmail.com>
Date: Sat, 31 Jan 2026 23:40:42 +0900
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=EC=95=84=ED=86=A0=EB=AF=B9=20?=
 =?UTF-8?q?=EC=9D=B8=ED=92=8B,=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8?=
 =?UTF-8?q?=EB=A5=BC=20=EC=A1=B0=ED=95=A9=ED=95=9C=20=EC=9D=B8=ED=92=8B=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/test/page.tsx                         | 23 ++++++++
 src/components/input/Input.module.css         | 18 +++++++
 src/components/input/Input.tsx                | 23 ++++++++
 src/components/input/PasswordInput.module.css | 21 ++++++++
 src/components/input/PasswordInput.tsx        | 52 +++++++++++++++++++
 src/components/input/index.ts                 |  2 +
 6 files changed, 139 insertions(+)
 create mode 100644 src/app/test/page.tsx
 create mode 100644 src/components/input/Input.module.css
 create mode 100644 src/components/input/Input.tsx
 create mode 100644 src/components/input/PasswordInput.module.css
 create mode 100644 src/components/input/PasswordInput.tsx
 create mode 100644 src/components/input/index.ts

diff --git a/src/app/test/page.tsx b/src/app/test/page.tsx
new file mode 100644
index 0000000..089ab76
--- /dev/null
+++ b/src/app/test/page.tsx
@@ -0,0 +1,23 @@
+import { Input, PasswordInput } from '@/components/input';
+
+export default function TestPage() {
+  return (
+    <main style={{ padding: 40, display: 'flex', flexDirection: 'column', gap: 24 }}>
+      <h1>Input 컴포넌트 테스트</h1>
+
+      <h2>Atom - Input</h2>
+      <div style={{ width: 460 }}>
+        <Input placeholder="댓글을 입력해 주세요." />
+      </div>
+
+      <div style={{ width: 460 }}>
+        <Input placeholder="이메일을 입력해 주세요." type="email" />
+      </div>
+
+      <h2>Molecule - PasswordInput</h2>
+      <div style={{ width: 460 }}>
+        <PasswordInput placeholder="비밀번호를 입력해 주세요." />
+      </div>
+    </main>
+  );
+}
diff --git a/src/components/input/Input.module.css b/src/components/input/Input.module.css
new file mode 100644
index 0000000..4cc39c3
--- /dev/null
+++ b/src/components/input/Input.module.css
@@ -0,0 +1,18 @@
+.input {
+  width: 100%;
+  height: 48px;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+  padding: 16px;
+  background: #ffffff;
+  font-family: var(--font-pretendard), 'Pretendard', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 19px;
+  color: #0f172a;
+  outline: none;
+}
+
+.input::placeholder {
+  color: #64748b;
+}
diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
new file mode 100644
index 0000000..3197589
--- /dev/null
+++ b/src/components/input/Input.tsx
@@ -0,0 +1,23 @@
+import { ComponentPropsWithRef } from 'react';
+import clsx from 'clsx';
+import styles from './Input.module.css';
+
+type InputProps = ComponentPropsWithRef<'input'>;
+
+/**
+ * 공통 Input 컴포넌트 (Atom)
+ *
+ * - 네이티브 <input>의 모든 속성(placeholder, type, onChange 등)을 그대로 사용할 수 있습니다.
+ * - width는 부모 요소에 맞춰 100%로 채워지므로, 부모에서 width를 지정해 주세요.
+ * - 비밀번호 입력에는 PasswordInput을 사용하세요.
+ *
+ * @example
+ * // 기본 사용
+ * <Input placeholder="댓글을 입력해 주세요." />
+ *
+ * // react-hook-form 연동
+ * <Input {...register('email')} placeholder="이메일을 입력해 주세요." />
+ */
+export default function Input({ className, ref, ...props }: InputProps) {
+  return <input ref={ref} className={clsx(styles.input, className)} {...props} />;
+}
diff --git a/src/components/input/PasswordInput.module.css b/src/components/input/PasswordInput.module.css
new file mode 100644
index 0000000..9481610
--- /dev/null
+++ b/src/components/input/PasswordInput.module.css
@@ -0,0 +1,21 @@
+.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;
+}
diff --git a/src/components/input/PasswordInput.tsx b/src/components/input/PasswordInput.tsx
new file mode 100644
index 0000000..54b1b30
--- /dev/null
+++ b/src/components/input/PasswordInput.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import { ComponentPropsWithRef, useState } from 'react';
+import Image from 'next/image';
+import clsx from 'clsx';
+import Input from './Input';
+import visibilityTrue from '@/assets/icons/visibility/visibillityTrue.svg';
+import visibilityFalse from '@/assets/icons/visibility/visibillityFalse.svg';
+import styles from './PasswordInput.module.css';
+
+type PasswordInputProps = Omit<ComponentPropsWithRef<'input'>, 'type'>;
+
+/**
+ * 비밀번호 Input 컴포넌트 (Molecule)
+ *
+ * - Input(Atom) + 눈 아이콘 토글 조합
+ * - 눈 아이콘 클릭으로 비밀번호 표시/숨김 전환
+ * - type은 내부에서 관리하므로 별도로 넘기지 않습니다.
+ *
+ * @example
+ * <PasswordInput placeholder="비밀번호를 입력해 주세요." />
+ *
+ * // react-hook-form 연동
+ * <PasswordInput {...register('password')} placeholder="비밀번호를 입력해 주세요." />
+ */
+export default function PasswordInput({ className, ref, ...props }: PasswordInputProps) {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <div className={styles.wrapper}>
+      <Input
+        ref={ref}
+        type={showPassword ? 'text' : 'password'}
+        className={clsx(styles.input, className)}
+        {...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>
+  );
+}
diff --git a/src/components/input/index.ts b/src/components/input/index.ts
new file mode 100644
index 0000000..65ebafa
--- /dev/null
+++ b/src/components/input/index.ts
@@ -0,0 +1,2 @@
+export { default as Input } from './Input';
+export { default as PasswordInput } from './PasswordInput';

From 73168b7abb063048f81aba7bb06c77da886b5430 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A0=95=EC=9B=90?= <jwon133@gmail.com>
Date: Sun, 1 Feb 2026 03:06:01 +0900
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=EC=95=84=ED=86=A0=EB=AF=B9=20?=
 =?UTF-8?q?=EB=B0=95=EC=8A=A4=20=EC=9D=B8=ED=92=8B=20=EA=B5=AC=ED=98=84,?=
 =?UTF-8?q?=20=EC=95=84=ED=86=A0=EB=AF=B9=20=EC=9D=B8=ED=92=8B=EC=9D=98=20?=
 =?UTF-8?q?=EC=A1=B0=ED=95=A9=EC=9C=BC=EB=A1=9C=20=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EC=9D=B8=ED=92=8B=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/AccountInput.tsx         | 25 ++++++++
 src/components/input/ActionTextArea.tsx       | 61 +++++++++++++++++++
 src/components/input/ChangePassword.tsx       | 41 +++++++++++++
 src/components/input/CommentInput.tsx         | 20 ++++++
 src/components/input/Input.tsx                | 22 ++-----
 src/components/input/PasswordInput.tsx        | 22 +++----
 src/components/input/TextArea.tsx             | 13 ++++
 src/components/input/index.ts                 |  5 ++
 .../input/styles/AccountInput.module.css      | 29 +++++++++
 .../input/styles/ActionTextArea.module.css    | 26 ++++++++
 .../input/styles/ChangePassword.module.css    | 24 ++++++++
 .../input/styles/CommentInput.module.css      |  9 +++
 .../input/{ => styles}/Input.module.css       |  0
 .../{ => styles}/PasswordInput.module.css     |  0
 .../input/styles/TextArea.module.css          | 20 ++++++
 src/components/input/types/types.ts           | 28 +++++++++
 16 files changed, 314 insertions(+), 31 deletions(-)
 create mode 100644 src/components/input/AccountInput.tsx
 create mode 100644 src/components/input/ActionTextArea.tsx
 create mode 100644 src/components/input/ChangePassword.tsx
 create mode 100644 src/components/input/CommentInput.tsx
 create mode 100644 src/components/input/TextArea.tsx
 create mode 100644 src/components/input/styles/AccountInput.module.css
 create mode 100644 src/components/input/styles/ActionTextArea.module.css
 create mode 100644 src/components/input/styles/ChangePassword.module.css
 create mode 100644 src/components/input/styles/CommentInput.module.css
 rename src/components/input/{ => styles}/Input.module.css (100%)
 rename src/components/input/{ => styles}/PasswordInput.module.css (100%)
 create mode 100644 src/components/input/styles/TextArea.module.css
 create mode 100644 src/components/input/types/types.ts

diff --git a/src/components/input/AccountInput.tsx b/src/components/input/AccountInput.tsx
new file mode 100644
index 0000000..cf749e0
--- /dev/null
+++ b/src/components/input/AccountInput.tsx
@@ -0,0 +1,25 @@
+import Input from './Input';
+import { AccountInputProps } from './types/types';
+import styles from './styles/AccountInput.module.css';
+
+/**
+ * 프로필 페이지용 계정 정보 표시 컴포넌트.
+ * 이메일과 비밀번호 모두 읽기 전용으로 표시한다.
+ * @param email 등록된 이메일 주소
+ * @param children 하단 영역에 렌더링할 요소 (수정하기 버튼 등)
+ */
+export default function AccountInput({ email, children }: AccountInputProps) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.field}>
+        <label className={styles.label}>이메일</label>
+        <Input type="email" value={email} disabled className={styles.readOnly} />
+      </div>
+      <div className={styles.field}>
+        <label className={styles.label}>비밀번호</label>
+        <Input 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..a77ed8f
--- /dev/null
+++ b/src/components/input/ActionTextArea.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import { useCallback, 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';
+
+/**
+ * 전송 버튼이 포함된 텍스트 입력 기본 컴포넌트.
+ * 입력값이 있으면 전송 버튼이 활성화된다.
+ * @param onSubmit 전송 버튼 클릭 시 호출되는 콜백
+ * @param wrapperClassName wrapper div에 적용할 추가 CSS 클래스
+ * @param className TextArea에 적용할 추가 CSS 클래스
+ * @param props 네이티브 textarea의 모든 속성
+ */
+export default function ActionTextArea({
+  onSubmit,
+  wrapperClassName,
+  className,
+  onChange,
+  ...props
+}: ActionTextAreaProps) {
+  const [hasValue, setHasValue] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const autoResize = useCallback(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
+  }, []);
+
+  return (
+    <div className={clsx(styles.wrapper, wrapperClassName)}>
+      <TextArea
+        ref={textareaRef}
+        rows={1}
+        className={clsx(styles.textarea, className)}
+        onChange={(e) => {
+          setHasValue(e.target.value.length > 0);
+          autoResize();
+          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..10e58a0
--- /dev/null
+++ b/src/components/input/ChangePassword.tsx
@@ -0,0 +1,41 @@
+import Input from './Input';
+import { ChangePasswordProps } from './types/types';
+import styles from './styles/ChangePassword.module.css';
+
+/**
+ * 비밀번호 변경 컴포넌트.
+ * @param isEditing 편집 모드 여부 (false면 인풋 비활성화, 기본값 false)
+ * @param newPasswordProps 새 비밀번호 인풋에 전달할 props
+ * @param confirmPasswordProps 새 비밀번호 확인 인풋에 전달할 props
+ * @param children 버튼 등 하단 영역에 렌더링할 요소
+ */
+export default function ChangePassword({
+  isEditing = false,
+  newPasswordProps,
+  confirmPasswordProps,
+  children,
+}: ChangePasswordProps) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.field}>
+        <label className={styles.label}>새 비밀번호</label>
+        <Input
+          type="password"
+          placeholder="새 비밀번호를 입력해 주세요."
+          disabled={!isEditing}
+          {...newPasswordProps}
+        />
+      </div>
+      <div className={styles.field}>
+        <label className={styles.label}>새 비밀번호 확인</label>
+        <Input
+          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..d82416b
--- /dev/null
+++ b/src/components/input/CommentInput.tsx
@@ -0,0 +1,20 @@
+import clsx from 'clsx';
+import ActionTextArea from './ActionTextArea';
+import { CommentInputProps } from './types/types';
+import styles from './styles/CommentInput.module.css';
+
+/**
+ * 댓글 입력 컴포넌트.
+ * ActionTextArea를 위아래 보더 스타일로 감싼다.
+ * @param className TextArea에 적용할 추가 CSS 클래스
+ * @param props 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.tsx b/src/components/input/Input.tsx
index 3197589..de86aa1 100644
--- a/src/components/input/Input.tsx
+++ b/src/components/input/Input.tsx
@@ -1,22 +1,12 @@
-import { ComponentPropsWithRef } from 'react';
 import clsx from 'clsx';
-import styles from './Input.module.css';
-
-type InputProps = ComponentPropsWithRef<'input'>;
+import { InputProps } from './types/types';
+import styles from './styles/Input.module.css';
 
 /**
- * 공통 Input 컴포넌트 (Atom)
- *
- * - 네이티브 <input>의 모든 속성(placeholder, type, onChange 등)을 그대로 사용할 수 있습니다.
- * - width는 부모 요소에 맞춰 100%로 채워지므로, 부모에서 width를 지정해 주세요.
- * - 비밀번호 입력에는 PasswordInput을 사용하세요.
- *
- * @example
- * // 기본 사용
- * <Input placeholder="댓글을 입력해 주세요." />
- *
- * // react-hook-form 연동
- * <Input {...register('email')} placeholder="이메일을 입력해 주세요." />
+ * 공통 Input 컴포넌트.
+ * @param className 추가 CSS 클래스
+ * @param ref 외부에서 전달하는 ref (react-hook-form 등)
+ * @param props 네이티브 input의 모든 속성(placeholder, type, onChange 등)
  */
 export default function Input({ className, ref, ...props }: InputProps) {
   return <input ref={ref} className={clsx(styles.input, className)} {...props} />;
diff --git a/src/components/input/PasswordInput.tsx b/src/components/input/PasswordInput.tsx
index 54b1b30..5b5df22 100644
--- a/src/components/input/PasswordInput.tsx
+++ b/src/components/input/PasswordInput.tsx
@@ -1,27 +1,19 @@
 'use client';
 
-import { ComponentPropsWithRef, useState } from 'react';
+import { 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 './PasswordInput.module.css';
-
-type PasswordInputProps = Omit<ComponentPropsWithRef<'input'>, 'type'>;
+import styles from './styles/PasswordInput.module.css';
 
 /**
- * 비밀번호 Input 컴포넌트 (Molecule)
- *
- * - Input(Atom) + 눈 아이콘 토글 조합
- * - 눈 아이콘 클릭으로 비밀번호 표시/숨김 전환
- * - type은 내부에서 관리하므로 별도로 넘기지 않습니다.
- *
- * @example
- * <PasswordInput placeholder="비밀번호를 입력해 주세요." />
- *
- * // react-hook-form 연동
- * <PasswordInput {...register('password')} placeholder="비밀번호를 입력해 주세요." />
+ * 비밀번호 Input 컴포넌트.
+ * @param className 추가 CSS 클래스
+ * @param ref 외부에서 전달하는 ref (react-hook-form 등)
+ * @param props 네이티브 input의 모든 속성(type 제외)
  */
 export default function PasswordInput({ className, ref, ...props }: PasswordInputProps) {
   const [showPassword, setShowPassword] = useState(false);
diff --git a/src/components/input/TextArea.tsx b/src/components/input/TextArea.tsx
new file mode 100644
index 0000000..c149c38
--- /dev/null
+++ b/src/components/input/TextArea.tsx
@@ -0,0 +1,13 @@
+import clsx from 'clsx';
+import { TextAreaProps } from './types/types';
+import styles from './styles/TextArea.module.css';
+
+/**
+ * 멀티라인 입력 컴포넌트.
+ * @param className 추가 CSS 클래스
+ * @param ref 외부에서 전달하는 ref (react-hook-form 등)
+ * @param props 네이티브 textarea의 모든 속성(placeholder, rows, onChange 등)
+ */
+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
index 65ebafa..676d610 100644
--- a/src/components/input/index.ts
+++ b/src/components/input/index.ts
@@ -1,2 +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..c8eea88
--- /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: #0f172a;
+}
+
+.readOnly {
+  background: #f1f5f9;
+  color: #94a3b8;
+}
+
+.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..4d5fe3b
--- /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: #0f172a;
+}
+
+.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..9149440
--- /dev/null
+++ b/src/components/input/styles/CommentInput.module.css
@@ -0,0 +1,9 @@
+.wrapper {
+  border-top: 1px solid #e2e8f0;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.textarea {
+  border: none;
+  border-radius: 0;
+}
diff --git a/src/components/input/Input.module.css b/src/components/input/styles/Input.module.css
similarity index 100%
rename from src/components/input/Input.module.css
rename to src/components/input/styles/Input.module.css
diff --git a/src/components/input/PasswordInput.module.css b/src/components/input/styles/PasswordInput.module.css
similarity index 100%
rename from src/components/input/PasswordInput.module.css
rename to src/components/input/styles/PasswordInput.module.css
diff --git a/src/components/input/styles/TextArea.module.css b/src/components/input/styles/TextArea.module.css
new file mode 100644
index 0000000..3f19f8a
--- /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 #e2e8f0;
+  padding: 12px 16px;
+  background: #ffffff;
+  font-family: var(--font-pretendard), 'Pretendard', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 19px;
+  color: #0f172a;
+  outline: none;
+  resize: none;
+  overflow-y: auto;
+}
+
+.textarea::placeholder {
+  color: #64748b;
+}
diff --git a/src/components/input/types/types.ts b/src/components/input/types/types.ts
new file mode 100644
index 0000000..6457d43
--- /dev/null
+++ b/src/components/input/types/types.ts
@@ -0,0 +1,28 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+
+export type InputProps = ComponentPropsWithRef<'input'>;
+
+export type PasswordInputProps = Omit<ComponentPropsWithRef<'input'>, 'type'>;
+
+export type TextAreaProps = ComponentPropsWithRef<'textarea'>;
+
+export type PasswordFieldProps = Omit<ComponentPropsWithRef<'input'>, 'type'>;
+
+export type ActionTextAreaProps = TextAreaProps & {
+  onSubmit?: () => void;
+  wrapperClassName?: string;
+};
+
+export type CommentInputProps = Omit<ActionTextAreaProps, 'wrapperClassName'>;
+
+export type AccountInputProps = {
+  email?: string;
+  children?: ReactNode;
+};
+
+export type ChangePasswordProps = {
+  isEditing?: boolean;
+  newPasswordProps?: PasswordFieldProps;
+  confirmPasswordProps?: PasswordFieldProps;
+  children?: ReactNode;
+};

From e9d4bce44b56af7622e2a0bf2d20696253e04dc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A0=95=EC=9B=90?= <jwon133@gmail.com>
Date: Sun, 1 Feb 2026 03:13:24 +0900
Subject: [PATCH 3/4] =?UTF-8?q?chore:=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/test/page.tsx | 23 -----------------------
 1 file changed, 23 deletions(-)
 delete mode 100644 src/app/test/page.tsx

diff --git a/src/app/test/page.tsx b/src/app/test/page.tsx
deleted file mode 100644
index 089ab76..0000000
--- a/src/app/test/page.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Input, PasswordInput } from '@/components/input';
-
-export default function TestPage() {
-  return (
-    <main style={{ padding: 40, display: 'flex', flexDirection: 'column', gap: 24 }}>
-      <h1>Input 컴포넌트 테스트</h1>
-
-      <h2>Atom - Input</h2>
-      <div style={{ width: 460 }}>
-        <Input placeholder="댓글을 입력해 주세요." />
-      </div>
-
-      <div style={{ width: 460 }}>
-        <Input placeholder="이메일을 입력해 주세요." type="email" />
-      </div>
-
-      <h2>Molecule - PasswordInput</h2>
-      <div style={{ width: 460 }}>
-        <PasswordInput placeholder="비밀번호를 입력해 주세요." />
-      </div>
-    </main>
-  );
-}

From e3d2636fd98500b289e3667cf9c9a8e3d345c596 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A0=95=EC=9B=90?= <jwon133@gmail.com>
Date: Sun, 1 Feb 2026 03:55:07 +0900
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=EC=A0=9C=EB=AF=B8=EB=82=98=EC=9D=B4?=
 =?UTF-8?q?=20=EC=BD=94=EB=93=9C=20=EB=A6=AC=EB=B7=B0=20=ED=81=AC=EB=A6=AC?=
 =?UTF-8?q?=ED=8B=B0=EC=BB=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/Input.tsx         |  5 ++---
 src/components/input/PasswordInput.tsx |  4 +---
 src/components/input/TextArea.tsx      |  1 -
 src/components/input/types/types.ts    | 16 ++++++++--------
 4 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
index de86aa1..f1db8b6 100644
--- a/src/components/input/Input.tsx
+++ b/src/components/input/Input.tsx
@@ -5,9 +5,8 @@ import styles from './styles/Input.module.css';
 /**
  * 공통 Input 컴포넌트.
  * @param className 추가 CSS 클래스
- * @param ref 외부에서 전달하는 ref (react-hook-form 등)
  * @param props 네이티브 input의 모든 속성(placeholder, type, onChange 등)
  */
-export default function Input({ className, ref, ...props }: InputProps) {
-  return <input ref={ref} className={clsx(styles.input, className)} {...props} />;
+export default function Input({ className, ...props }: InputProps) {
+  return <input className={clsx(styles.input, className)} {...props} />;
 }
diff --git a/src/components/input/PasswordInput.tsx b/src/components/input/PasswordInput.tsx
index 5b5df22..85d6626 100644
--- a/src/components/input/PasswordInput.tsx
+++ b/src/components/input/PasswordInput.tsx
@@ -12,16 +12,14 @@ import styles from './styles/PasswordInput.module.css';
 /**
  * 비밀번호 Input 컴포넌트.
  * @param className 추가 CSS 클래스
- * @param ref 외부에서 전달하는 ref (react-hook-form 등)
  * @param props 네이티브 input의 모든 속성(type 제외)
  */
-export default function PasswordInput({ className, ref, ...props }: PasswordInputProps) {
+export default function PasswordInput({ className, ...props }: PasswordInputProps) {
   const [showPassword, setShowPassword] = useState(false);
 
   return (
     <div className={styles.wrapper}>
       <Input
-        ref={ref}
         type={showPassword ? 'text' : 'password'}
         className={clsx(styles.input, className)}
         {...props}
diff --git a/src/components/input/TextArea.tsx b/src/components/input/TextArea.tsx
index c149c38..9eabd1c 100644
--- a/src/components/input/TextArea.tsx
+++ b/src/components/input/TextArea.tsx
@@ -5,7 +5,6 @@ import styles from './styles/TextArea.module.css';
 /**
  * 멀티라인 입력 컴포넌트.
  * @param className 추가 CSS 클래스
- * @param ref 외부에서 전달하는 ref (react-hook-form 등)
  * @param props 네이티브 textarea의 모든 속성(placeholder, rows, onChange 등)
  */
 export default function TextArea({ className, ref, ...props }: TextAreaProps) {
diff --git a/src/components/input/types/types.ts b/src/components/input/types/types.ts
index 6457d43..0f7f0d9 100644
--- a/src/components/input/types/types.ts
+++ b/src/components/input/types/types.ts
@@ -1,12 +1,12 @@
-import { ComponentPropsWithRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
 
-export type InputProps = ComponentPropsWithRef<'input'>;
+export type InputProps = ComponentPropsWithoutRef<'input'>;
 
-export type PasswordInputProps = Omit<ComponentPropsWithRef<'input'>, 'type'>;
+export type PasswordInputProps = Omit<ComponentPropsWithoutRef<'input'>, 'type'>;
 
-export type TextAreaProps = ComponentPropsWithRef<'textarea'>;
-
-export type PasswordFieldProps = Omit<ComponentPropsWithRef<'input'>, 'type'>;
+export type TextAreaProps = ComponentPropsWithoutRef<'textarea'> & {
+  ref?: Ref<HTMLTextAreaElement>;
+};
 
 export type ActionTextAreaProps = TextAreaProps & {
   onSubmit?: () => void;
@@ -22,7 +22,7 @@ export type AccountInputProps = {
 
 export type ChangePasswordProps = {
   isEditing?: boolean;
-  newPasswordProps?: PasswordFieldProps;
-  confirmPasswordProps?: PasswordFieldProps;
+  newPasswordProps?: PasswordInputProps;
+  confirmPasswordProps?: PasswordInputProps;
   children?: ReactNode;
 };