diff --git a/src/shared/ui/icons/index.tsx b/src/shared/ui/icons/index.tsx
index 74f9284..9dc836d 100644
--- a/src/shared/ui/icons/index.tsx
+++ b/src/shared/ui/icons/index.tsx
@@ -143,3 +143,178 @@ export const ArrowRightIcon: React.FC<IconProps> = ({ size = 20, ...props }) =>
     />
   </svg>
 );
+
+// Eye (Password Show) 아이콘
+export const EyeIcon: React.FC<IconProps> = ({ size = 20, ...props }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M1 10C1 10 4.6 3.7 10 3.7C15.4 3.7 19 10 19 10C19 10 15.4 16.3 10 16.3C4.6 16.3 1 10 1 10Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M10 12.7C11.4912 12.7 12.7 11.4912 12.7 10C12.7 8.50883 11.4912 7.3 10 7.3C8.50883 7.3 7.3 8.50883 7.3 10C7.3 11.4912 8.50883 12.7 10 12.7Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+// Eye Off (Password Hide) 아이콘
+export const EyeOffIcon: React.FC<IconProps> = ({ size = 20, ...props }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M15.3083 15.3083C13.8248 16.4526 11.9675 16.969 10 16.3C4.6 16.3 1 10 1 10C1 10 2.21398 7.34848 4.20849 5.38148M8.31885 3.9015C8.86877 3.76697 9.43174 3.7 10 3.7C15.4 3.7 19 10 19 10C19 10 18.0664 12.0624 16.5165 13.9248M8.28636 8.28636C7.94273 8.63 7.72728 9.09636 7.68378 9.58045C7.64028 10.0645 7.77227 10.5367 8.0506 10.8924C8.32893 11.2481 8.73099 11.4583 9.16738 11.4764C9.60377 11.4944 10.0392 11.3188 10.3776 10.9882M1 1L19 19"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+// Chevron Down (Select) 아이콘
+export const ChevronDownIcon: React.FC<IconProps> = ({ size = 20, ...props }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M5 7.5L10 12.5L15 7.5"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+// X Circle (Clear Search) 아이콘
+export const XCircleIcon: React.FC<IconProps> = ({ size = 20, ...props }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <circle cx="10" cy="10" r="8.33333" stroke="currentColor" strokeWidth="2" />
+    <path
+      d="M12.5 7.5L7.5 12.5M7.5 7.5L12.5 12.5"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+// User 아이콘 (예제용)
+export const UserIcon: React.FC<IconProps> = ({ size = 20, ...props }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M16.6667 17.5V15.8333C16.6667 14.9493 16.3155 14.1014 15.6904 13.4763C15.0653 12.8512 14.2174 12.5 13.3333 12.5H6.66667C5.78261 12.5 4.93477 12.8512 4.30965 13.4763C3.68452 14.1014 3.33334 14.9493 3.33334 15.8333V17.5"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <circle
+      cx="10"
+      cy="5.83333"
+      r="3.33333"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+// Mail 아이콘 (예제용)
+export const MailIcon: React.FC<IconProps> = ({ size = 20, ...props }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M3.33334 3.33334H16.6667C17.5833 3.33334 18.3333 4.08334 18.3333 5.00001V15C18.3333 15.9167 17.5833 16.6667 16.6667 16.6667H3.33334C2.41667 16.6667 1.66667 15.9167 1.66667 15V5.00001C1.66667 4.08334 2.41667 3.33334 3.33334 3.33334Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M18.3333 5L10 10.8333L1.66667 5"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+// Lock 아이콘 (예제용)
+export const LockIcon: React.FC<IconProps> = ({ size = 20, ...props }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <rect
+      x="3.33333"
+      y="9.16667"
+      width="13.3333"
+      height="9.16667"
+      rx="1.66667"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M5.83333 9.16667V5.83333C5.83333 3.53215 7.69881 1.66667 10 1.66667C12.3012 1.66667 14.1667 3.53215 14.1667 5.83333V9.16667"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/src/shared/ui/inputBox/inputBox.stories.tsx b/src/shared/ui/inputBox/inputBox.stories.tsx
new file mode 100644
index 0000000..1c3cc95
--- /dev/null
+++ b/src/shared/ui/inputBox/inputBox.stories.tsx
@@ -0,0 +1,162 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Input, Textarea, Select } from "./inputBox";
+// 아이콘 임포트
+import { UserIcon, MailIcon, LockIcon, XCircleIcon } from "@/shared/ui/icons";
+
+const meta = {
+  title: "Shared/UI/InputBox",
+  component: Input,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: "공통 입력 컴포넌트입니다. Input, Textarea, Select를 포함합니다.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    // 1. Size
+    size: {
+      control: "radio",
+      options: ["medium", "large"],
+      description: "입력창 크기 조절",
+      table: { defaultValue: { summary: "large" } },
+    },
+    // 2. Boolean States
+    hasError: {
+      control: "boolean",
+      description: "에러 상태 표시 (Red Border)",
+    },
+    isFullWidth: {
+      control: "boolean",
+      description: "부모 컨테이너 너비 100% 차지 여부",
+      table: { defaultValue: { summary: "true" } },
+    },
+    disabled: {
+      control: "boolean",
+      description: "비활성화 상태",
+    },
+    // 3. Icons
+    leftIcon: { control: false, description: "좌측 아이콘 (ReactNode)" },
+    rightIcon: { control: false, description: "우측 아이콘 (ReactNode)" },
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// 기본 텍스트 입력
+export const Default: Story = {
+  args: {
+    placeholder: "텍스트를 입력해주세요",
+    size: "large",
+    isFullWidth: true,
+  },
+};
+
+// 아이콘 포함 (User, Mail 아이콘 예시)
+export const WithIcons: Story = {
+  args: {
+    placeholder: "이메일 입력",
+    leftIcon: <UserIcon width={20} />, // 아이콘 크기 지정 권장
+    rightIcon: <MailIcon width={20} />,
+    isFullWidth: true,
+  },
+};
+
+// 비밀번호 입력 (강도 표시 포함)
+export const Password: Story = {
+  args: {
+    type: "password",
+    placeholder: "비밀번호를 입력하세요",
+    leftIcon: <LockIcon width={20} />,
+    passwordStrength: 2, // 0~3 단계
+    isFullWidth: true,
+  },
+};
+
+// 검색 입력 (Rounded Pill Shape)
+export const Search: Story = {
+  args: {
+    type: "search",
+    placeholder: "검색어를 입력하세요...",
+    size: "medium",
+    isFullWidth: true,
+    // onClear가 전달되면 값이 있을 때 X 버튼이 자동으로 노출됨
+    onClear: () => alert("Clear Clicked!"),
+  },
+};
+
+// 에러 상태
+export const ErrorState: Story = {
+  args: {
+    placeholder: "잘못된 입력",
+    defaultValue: "유효하지 않은 값",
+    hasError: true,
+    isFullWidth: true,
+    rightIcon: <XCircleIcon width={20} className="text-[color:var(--color-error-500,#EF4444)]" />,
+  },
+};
+
+export const TextareaField: StoryObj<typeof Textarea> = {
+  render: (args) => <Textarea {...args} />,
+  args: {
+    placeholder: "내용을 자세히 적어주세요.",
+    maxLength: 200, // 글자수 카운터 표시
+    isFullWidth: true,
+    rows: 4,
+  },
+  argTypes: {
+    hasError: { control: "boolean" },
+  },
+};
+
+export const SelectField: StoryObj<typeof Select> = {
+  render: (args) => <Select {...args} />,
+  args: {
+    placeholder: "옵션을 선택하세요",
+    isFullWidth: true,
+    options: [
+      { label: "옵션 1", value: "option1" },
+      { label: "옵션 2", value: "option2" },
+      { label: "옵션 3", value: "option3" },
+    ],
+  },
+};
+
+// all states 모음
+export const States: Story = {
+  render: () => (
+    <div className="flex flex-col gap-5 w-[360px] p-4 border rounded-xl bg-gray-50">
+      <h3 className="text-sm font-bold text-gray-500 mb-2">Input States</h3>
+
+      {/* 1. 기본 */}
+      <Input placeholder="기본 (Default)" isFullWidth />
+
+      {/* 2. 포커스 (autoFocus) */}
+      <Input placeholder="포커스 (Focus)" autoFocus isFullWidth />
+
+      {/* 3. 에러 */}
+      <Input
+        placeholder="에러 (Error)"
+        defaultValue="유효하지 않은 값"
+        hasError
+        isFullWidth
+        rightIcon={<XCircleIcon className="text-red-500" width={20} />}
+      />
+
+      {/* 4. 비활성 */}
+      <Input placeholder="비활성 (Disabled)" defaultValue="수정 불가능한 값" disabled isFullWidth />
+
+      {/* 5. 읽기 전용 */}
+      <Input
+        placeholder="읽기 전용 (Read Only)"
+        defaultValue="읽기 전용 모드"
+        readOnly
+        isFullWidth
+      />
+    </div>
+  ),
+};
diff --git a/src/shared/ui/inputBox/inputBox.tsx b/src/shared/ui/inputBox/inputBox.tsx
new file mode 100644
index 0000000..89f41c9
--- /dev/null
+++ b/src/shared/ui/inputBox/inputBox.tsx
@@ -0,0 +1,316 @@
+import React, { useState } from "react";
+import { EyeIcon, EyeOffIcon, SearchIcon, XCircleIcon, ChevronDownIcon } from "@/shared/ui/icons";
+
+export type InputSize = "medium" | "large";
+
+interface BaseInputProps {
+  hasError?: boolean;
+  isFullWidth?: boolean;
+}
+
+// 모든 입력 컴포넌트(Input, Textarea, Select) 공통 스타일
+const commonStyles = {
+  base: "outline-none transition-all duration-200 border placeholder:text-[color:var(--color-gray-500,#808080)] text-[color:var(--color-gray-900,#1A1A1A)]",
+  disabled:
+    "disabled:bg-[color:var(--color-gray-100,#F2F2F2)] disabled:text-[color:var(--color-gray-400,#999999)] disabled:border-[color:var(--color-gray-200,#E5E5E5)] disabled:cursor-not-allowed",
+  focus:
+    "focus:border-[color:var(--color-primary-500,#3385DB)] focus:shadow-[0_0_0_3px_var(--color-primary-100,#E0EDFB)]",
+  error:
+    "border-[color:var(--color-error-500,`#EF4444`)]! focus:shadow-[0_0_0_3px_var(--color-error-100,`#FEE2E2`)]!",
+  defaultBorder: "border-[color:var(--color-gray-300,`#CCCCCC`)]",
+};
+
+// Input 전용 사이즈 스타일
+const sizeStyles: Record<InputSize, string> = {
+  medium: "h-10 text-[14px] leading-[20px]",
+  large: "h-12 text-[16px] leading-[24px]",
+};
+
+// Input 형태 (기본, 검색창)
+const shapeStyles = {
+  default: `rounded-lg bg-white px-4 ${commonStyles.focus}`,
+  search: `rounded-[20px] bg-[color:var(--color-gray-50,#F9F9F9)] pl-10 pr-10 ${commonStyles.focus}`,
+};
+
+const getInputClasses = (
+  size: InputSize,
+  isSearch: boolean,
+  hasError: boolean,
+  isFullWidth: boolean,
+  hasLeftContent: boolean,
+  hasRightContent: boolean,
+  className?: string,
+): string => {
+  const shapeClass = isSearch ? shapeStyles.search : shapeStyles.default;
+  const stateClass = hasError ? commonStyles.error : commonStyles.defaultBorder;
+
+  // 아이콘 유무에 따른 패딩 계산 (검색 형태는 shapeStyles.search에 고정 패딩 포함)
+  const paddingLeftClass = !isSearch && hasLeftContent ? (size === "large" ? "pl-10" : "pl-9") : "";
+
+  const paddingRightClass =
+    !isSearch && hasRightContent ? (size === "large" ? "pr-10" : "pr-9") : "";
+
+  // 전체 너비 여부
+  const widthClass = isFullWidth ? "w-full" : "w-auto";
+
+  return [
+    commonStyles.base,
+    commonStyles.disabled,
+    sizeStyles[size],
+    shapeClass,
+    stateClass,
+    widthClass,
+    paddingLeftClass,
+    paddingRightClass,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+};
+
+const getTextareaClasses = (
+  hasError: boolean,
+  isFullWidth: boolean,
+  className?: string,
+): string => {
+  const stateClass = hasError ? commonStyles.error : commonStyles.defaultBorder;
+  const widthClass = isFullWidth ? "w-full" : "w-auto";
+
+  return [
+    commonStyles.base,
+    "min-h-[120px] p-3 text-[16px] leading-[24px] rounded-lg bg-white resize-y",
+    commonStyles.focus,
+    stateClass,
+    widthClass,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+};
+
+const getSelectClasses = (hasError: boolean, isFullWidth: boolean, className?: string): string => {
+  const stateClass = hasError ? commonStyles.error : commonStyles.defaultBorder;
+  const widthClass = isFullWidth ? "w-full" : "w-auto";
+
+  return [
+    commonStyles.base,
+    commonStyles.disabled,
+    "h-[48px] px-4 pr-10 appearance-none rounded-lg bg-white text-[16px]",
+    commonStyles.focus,
+    stateClass,
+    widthClass,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+};
+
+// --- Input 컴포넌트 ---
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
+    BaseInputProps {
+  size?: InputSize;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  passwordStrength?: 0 | 1 | 2 | 3;
+  onClear?: () => void;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      type = "text",
+      size = "large",
+      hasError = false,
+      disabled = false,
+      isFullWidth = true,
+      leftIcon,
+      rightIcon,
+      className = "",
+      passwordStrength,
+      onClear,
+      ...props
+    },
+    ref,
+  ) => {
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const isSearch = type === "search";
+    const currentType = type === "password" && isPasswordVisible ? "text" : type;
+
+    // 아이콘 및 액션 존재 여부
+    const hasRightContent = Boolean(
+      rightIcon || type === "password" || (isSearch && props.value && onClear),
+    );
+
+    const inputClasses = getInputClasses(
+      size,
+      isSearch,
+      hasError,
+      isFullWidth,
+      Boolean(leftIcon),
+      hasRightContent,
+      className,
+    );
+
+    const containerClasses = `relative inline-flex flex-col transition-all duration-200 ease-out ${
+      isFullWidth ? "w-full min-w-[280px]" : "w-auto"
+    }`;
+
+    return (
+      <div className={containerClasses}>
+        <div className="relative w-full">
+          {/* 왼쪽 아이콘 */}
+          {(leftIcon || isSearch) && (
+            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-[color:var(--color-gray-600,#666666)] pointer-events-none">
+              {isSearch ? <SearchIcon width={20} /> : leftIcon}
+            </div>
+          )}
+
+          <input
+            ref={ref}
+            type={currentType}
+            disabled={disabled}
+            className={inputClasses}
+            {...props}
+          />
+
+          {/* 오른쪽 아이콘 및 액션 */}
+          <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
+            {type === "password" && !disabled && (
+              <button
+                type="button"
+                onClick={() => setIsPasswordVisible(!isPasswordVisible)}
+                className="text-[color:var(--color-gray-600,#666666)] hover:text-[color:var(--color-primary-800,#004A9C)] focus:outline-none"
+              >
+                {isPasswordVisible ? <EyeOffIcon width={20} /> : <EyeIcon width={20} />}
+              </button>
+            )}
+
+            {isSearch && props.value && onClear && (
+              <button
+                type="button"
+                onClick={onClear}
+                className="text-[color:var(--color-gray-600,#666666)] hover:text-[color:var(--color-gray-900,#1A1A1A)] focus:outline-none"
+              >
+                <XCircleIcon width={16} />
+              </button>
+            )}
+
+            {!isSearch && type !== "password" && rightIcon && (
+              <span className="text-[color:var(--color-gray-600,#666666)] pointer-events-none">
+                {rightIcon}
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* 비밀번호 강도 표시 */}
+        {type === "password" && passwordStrength !== undefined && (
+          <div className="mt-2 w-full h-1 bg-[color:var(--color-gray-100,#F2F2F2)] rounded-full overflow-hidden">
+            <div
+              className={`h-full transition-all duration-300 ${
+                passwordStrength === 1
+                  ? "w-1/3 bg-[color:var(--color-error-500,#EF4444)]"
+                  : passwordStrength === 2
+                    ? "w-2/3 bg-[color:var(--color-warning-500,#F59E0B)]"
+                    : passwordStrength === 3
+                      ? "w-full bg-[color:var(--color-success-500,#10A259)]"
+                      : "w-0"
+              }`}
+            />
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+Input.displayName = "Input";
+
+// --- Textarea 컴포넌트 ---
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    BaseInputProps {
+  maxLength?: number;
+}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ maxLength, hasError, isFullWidth = true, className = "", onChange, ...props }, ref) => {
+    // 초기값 계산
+    const [charCount, setCharCount] = useState(() => {
+      const initialValue = props.value ?? props.defaultValue ?? "";
+      return String(initialValue).length;
+    });
+
+    // value가 외부에서 변경될 때도 글자수 동기화
+    React.useEffect(() => {
+      if (props.value !== undefined) {
+        setCharCount(String(props.value).length);
+      }
+    }, [props.value]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setCharCount(e.target.value.length);
+      onChange?.(e);
+    };
+
+    const textareaClasses = getTextareaClasses(!!hasError, !!isFullWidth, className);
+    const containerClasses = `relative ${isFullWidth ? "w-full" : "w-auto"}`;
+
+    return (
+      <div className={containerClasses}>
+        <textarea
+          ref={ref}
+          className={textareaClasses}
+          onChange={handleChange}
+          maxLength={maxLength}
+          {...props}
+        />
+        {maxLength && (
+          <div className="absolute right-3 bottom-3 text-[12px] text-[color:var(--color-gray-500,#808080)]">
+            {charCount} / {maxLength}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+// --- Select 컴포넌트 ---
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, BaseInputProps {
+  options: { label: string; value: string | number }[];
+  placeholder?: string;
+}
+
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ hasError, isFullWidth = true, options, placeholder, className = "", ...props }, ref) => {
+    const selectClasses = getSelectClasses(!!hasError, !!isFullWidth, className);
+    const containerClasses = `relative ${isFullWidth ? "w-full" : "w-auto"}`;
+
+    return (
+      <div className={containerClasses}>
+        <select
+          ref={ref}
+          className={selectClasses}
+          defaultValue={placeholder ? "" : undefined}
+          {...props}
+        >
+          {placeholder && (
+            <option value="" disabled hidden>
+              {placeholder}
+            </option>
+          )}
+          {options.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+        <div className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-[color:var(--color-gray-600,#666666)]">
+          <ChevronDownIcon width={20} />
+        </div>
+      </div>
+    );
+  },
+);
+Select.displayName = "Select";