[#8] 와인 타입 선택 컴포넌트 제작

src/app/example/page.tsx

@@ -1,3 +1,4 @@
+import { SelectType } from "@/components";
 import Header from "@/components/header/Header";
 import React from "react";
 
@@ -10,6 +11,12 @@ const Page = () => {
         description="Western Cape, South Africa"
         price="64,990"
       />
+
+      <section>
+        <SelectType isError={false} />
+        <br />
+        <SelectType isError={true} />
+      </section>
     </div>
   );
 };

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";

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,
+  },
+};

src/components/select-type/select-type.tsx

@@ -0,0 +1,81 @@
+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";
+
+const imgMap = {
+  Red: redWine,
+  White: whiteWine,
+  Sparkling: sparklingWine,
+} as const;
+
+type WineType = keyof typeof imgMap;
+
+const TypeInput = ({ name }: { name: WineType }) => {
+  const imgSrc = imgMap[name] || "";
+
+  return (
+    <div
+      className={cn(
+        "h-[38px]",
+        "rounded-full border border-border-secondary",
+        "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 items-center justify-center gap-[6px]",
+          "cursor-pointer rounded-full",
+          "text-default hover:bg-gray100",
+          "peer peer-checked:bg-gray800 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">
+          {name}
+        </span>
+      </label>
+    </div>
+  );
+};
+
+const SelectType = ({ isError }: { isError: boolean }) => {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-2">
+        <p className="text-body-sm tracking-[-0.02em] text-default">타입</p>
+        {isError && (
+          <p className="text-component-notes-md tracking-[-0.02em] text-danger">
+            와인 타입은 필수 입력이에요
+          </p>
+        )}
+      </div>
+      <div className="flex gap-[10px]">
+        <TypeInput name="Red" />
+        <TypeInput name="White" />
+        <TypeInput name="Sparkling" />
+      </div>
+    </div>
+  );
+};
+
+export default SelectType;

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: "에러가 발생했습니다",
+  },
+};

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 };

tailwind.config.ts

@@ -18,6 +18,11 @@ export default {
         gray600: "#8C8C8B",
         gray800: "#484746",
         primary: "#1A1918",
+        danger: "#ff6b6b",
+        border: {
+          secondary: "#F2F2F2",
+          tertiary: "#BABABA",
+        },
       },
       screens: {
         mobile: { max: "743px" },