diff --git a/public/images/wine-type/red.jpg b/public/images/wine-type/red.jpg
new file mode 100644
index 00000000..d542027d
Binary files /dev/null and b/public/images/wine-type/red.jpg differ
diff --git a/public/images/wine-type/sparkling.jpg b/public/images/wine-type/sparkling.jpg
new file mode 100644
index 00000000..5a78c31b
Binary files /dev/null and b/public/images/wine-type/sparkling.jpg differ
diff --git a/public/images/wine-type/white.jpg b/public/images/wine-type/white.jpg
new file mode 100644
index 00000000..461ac82d
Binary files /dev/null and b/public/images/wine-type/white.jpg differ
diff --git a/src/app/example/page.tsx b/src/app/example/page.tsx
index 7788dd01..89ae8e82 100644
--- a/src/app/example/page.tsx
+++ b/src/app/example/page.tsx
@@ -1,7 +1,13 @@
+"use client";
+
+import { SelectType } from "@/components";
 import Header from "@/components/header/Header";
-import React from "react";
+import React, { ChangeEvent } from "react";
 
 const Page = () => {
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    console.log(e.target.value);
+  };
   return (
     <div>
       <Header
@@ -10,6 +16,12 @@ const Page = () => {
         description="Western Cape, South Africa"
         price="64,990"
       />
+
+      <section>
+        <SelectType isError={false} onChange={handleChange} />
+        <br />
+        <SelectType isError={true} />
+      </section>
     </div>
   );
 };
diff --git a/src/components/index.ts b/src/components/index.ts
index eff89347..3cffee1d 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,2 +1,4 @@
 export { default as Gnb } from "./gnb/Gnb";
 export { default as Header } from "./header/Header";
+export { TextInput, ModalTextInput } from "./text-input/text-input";
+export { default as SelectType } from "./select-type/select-type";
diff --git a/src/components/select-type/select-type.stories.tsx b/src/components/select-type/select-type.stories.tsx
new file mode 100644
index 00000000..b57c4338
--- /dev/null
+++ b/src/components/select-type/select-type.stories.tsx
@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from "@storybook/nextjs";
+import SelectType from "./select-type";
+
+const meta: Meta<typeof SelectType> = {
+  title: "Components/type-select",
+  component: SelectType,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SelectType>;
+
+export const WineTypeSelect: Story = {
+  args: {},
+};
+
+export const WineTypeSelectError: Story = {
+  args: {
+    isError: true,
+  },
+};
diff --git a/src/components/select-type/select-type.tsx b/src/components/select-type/select-type.tsx
new file mode 100644
index 00000000..1be83f09
--- /dev/null
+++ b/src/components/select-type/select-type.tsx
@@ -0,0 +1,87 @@
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+import redWine from "../../../public/images/wine-type/red.jpg";
+import whiteWine from "../../../public/images/wine-type/white.jpg";
+import sparklingWine from "../../../public/images/wine-type/sparkling.jpg";
+import { ComponentProps } from "react";
+
+const imgMap = {
+  RED: redWine,
+  WHITE: whiteWine,
+  SPARKLING: sparklingWine,
+} as const;
+
+type WineType = keyof typeof imgMap;
+
+interface SelectTypeValue extends ComponentProps<"input"> {
+  isError: boolean;
+}
+
+const TypeInput = ({ name }: { name: WineType }) => {
+  const imgSrc = imgMap[name] || "";
+  const typeName = name.slice(0, 1) + name.slice(1).toLowerCase();
+
+  return (
+    <div
+      className={cn(
+        "h-[38px]",
+        "border-border-secondary rounded-full border",
+        "flex items-center",
+        "bg-white",
+        "pc:h-[48px]"
+      )}
+    >
+      <input
+        type="radio"
+        id={name}
+        value={name}
+        name="wine-type"
+        className="peer hidden"
+      />
+      <label
+        htmlFor={name}
+        className={cn(
+          "py-[7px] pl-2 pr-3",
+          "flex-center gap-[6px]",
+          "cursor-pointer rounded-full",
+          "text-default hover:bg-gray-200",
+          "peer-checked:bg-gray-800 peer-checked:text-white"
+        )}
+      >
+        <Image
+          className={cn("h-6 rounded-full object-cover", "pc:h-8 pc:w-8")}
+          src={imgSrc}
+          width={24}
+          height={24}
+          alt="레드와인"
+          draggable={false}
+        />
+        <span className="text-body-sm tracking-[-0.02em] pc:text-body-md">
+          {typeName}
+        </span>
+      </label>
+    </div>
+  );
+};
+
+const SelectType = ({ isError, ...props }: SelectTypeValue) => {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-2">
+        <p className="text-default text-body-sm tracking-[-0.02em]">타입</p>
+        {isError && (
+          <p className="text-component-notes-md tracking-[-0.02em] text-red-400">
+            와인 타입은 필수 입력이에요
+          </p>
+        )}
+      </div>
+      <div className="flex gap-[10px]" {...props}>
+        <TypeInput name="RED" />
+        <TypeInput name="WHITE" />
+        <TypeInput name="SPARKLING" />
+      </div>
+    </div>
+  );
+};
+
+export default SelectType;
diff --git a/src/components/text-input/text-input.stories.tsx b/src/components/text-input/text-input.stories.tsx
new file mode 100644
index 00000000..755b1a32
--- /dev/null
+++ b/src/components/text-input/text-input.stories.tsx
@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from "@storybook/nextjs";
+import { ModalTextInput, TextInput } from "./text-input";
+
+const meta: Meta<typeof TextInput> = {
+  title: "Components/text-input",
+  component: TextInput,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    title: { control: { type: "text" } },
+    placeholder: { control: { type: "text" } },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TextInput>;
+
+export const NoContent: Story = {
+  args: {
+    title: "",
+    placeholder: "",
+  },
+};
+
+export const InputError: Story = {
+  args: {
+    title: "",
+    placeholder: "",
+    errorMsg: "에러가 발생했습니다",
+  },
+};
+
+export const LongText: Story = {
+  args: {
+    title:
+      "여긴 긴 제목이 들어가는 곳 입니다. 여긴 긴 제목이 들어가는 곳 입니다. 여긴 긴 제목이 들어가는 곳 입니다.",
+    placeholder:
+      "긴 placeholder를 입력해주세요 긴 placeholder를 입력해주세요 긴 placeholder를 입력해주세요",
+  },
+};
+
+export const ModalInputError: Story = {
+  render: (args) => <ModalTextInput {...args} />,
+  args: {
+    errorMsg: "에러가 발생했습니다",
+  },
+};
diff --git a/src/components/text-input/text-input.tsx b/src/components/text-input/text-input.tsx
new file mode 100644
index 00000000..53d11eab
--- /dev/null
+++ b/src/components/text-input/text-input.tsx
@@ -0,0 +1,83 @@
+import { cn } from "@/lib/utils";
+
+interface InputValue {
+  placeholder: string;
+  errorMsg: string;
+}
+
+interface TextInputValue extends InputValue {
+  title: string;
+}
+
+/**
+ * 기본 Input
+ * @param placeholder input의 placeholder
+ * @param errorMsg 표출할 에러 메시지
+ * @returns
+ */
+const Input = ({ placeholder, errorMsg }: InputValue) => {
+  {
+    /* TODO(휘태): 에러 아이콘 넣기 */
+  }
+  return (
+    <input
+      id="text-input"
+      className={cn(
+        "w-[303px]",
+        "px-4 py-3",
+        "rounded border border-gray-300",
+        "text-[14px] leading-5 tracking-[0.02em] text-default",
+        "placeholder:text-body-sm placeholder:font-normal placeholder:text-tertiary",
+        "focus:outline-none",
+        "pc:w-[400px] pc:text-[16px] pc:leading-6 pc:placeholder:text-body-md pc:placeholder:font-normal",
+        errorMsg && "border-2 border-danger"
+      )}
+      type="text"
+      placeholder={placeholder ? placeholder : "내용을 입력해주세요"}
+    />
+  );
+};
+
+/**
+ * 기본 입력 창
+ * @param title 제목
+ * @param placeholder input의 placeholder
+ * @param errorMsg 표출할 에러 메시지
+ * @returns input
+ */
+const TextInput = ({ title, placeholder, errorMsg }: TextInputValue) => {
+  return (
+    <>
+      <div className={cn("flex flex-col gap-2")}>
+        <p className={"text-body-sm font-bold tracking-[0.02em] text-gray-800"}>
+          {title ? title : "제목"}
+        </p>
+        <Input placeholder={placeholder} errorMsg={errorMsg} />
+      </div>
+      {errorMsg && <p className="mt-1 text-body-sm text-danger">{errorMsg}</p>}
+    </>
+  );
+};
+
+/**
+ * 모달 창에서 사용할 입력 창
+ * @param title
+ * @param placeholder
+ * @param errorMsg
+ * @returns modal input
+ */
+const ModalTextInput = ({ title, placeholder, errorMsg }: TextInputValue) => {
+  return (
+    <div className={cn("flex flex-col gap-2")}>
+      <div className="flex gap-2">
+        <p className={"text-body-sm font-bold tracking-[0.02em] text-gray-800"}>
+          {title ? title : "제목"}
+        </p>
+        {errorMsg && <p className="text-body-sm text-danger">{errorMsg}</p>}
+      </div>
+      <Input placeholder={placeholder} errorMsg={errorMsg} />
+    </div>
+  );
+};
+
+export { TextInput, ModalTextInput };