[#8] 와인 이미지 등록 컴포넌트 제작

src/app/example/page.tsx

@@ -9,6 +9,7 @@ import {
   TextInput,
 } from "@/components";
 import Profile from "@/components/profile/profile";
+import WineImg from "@/components/wine-img/wine-img";
 import React, { ChangeEvent } from "react";
 
 const Page = () => {
@@ -103,6 +104,12 @@ const Page = () => {
         <Profile url="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Allosaurus_BW.jpg/120px-Allosaurus_BW.jpg" />
       </section>
 
+      <br />
+      <section>
+        <WineImg />
+        <WineImg isError={true} errorMsg="와인 사진은 필수" />
+      </section>
+
       <br />
     </div>
   );

src/components/wine-img/wine-img.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from "@storybook/nextjs";
+import WineImg from "./wine-img";
+
+const meta: Meta<typeof WineImg> = {
+  title: "Components/WineImg",
+  component: WineImg,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: "와인 등록 시 사용되는 이미지 업로드 컴포넌트 입니다.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    isError: { control: { type: "boolean" } },
+    errorMsg: { control: { type: "text" } },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WineImg>;
+
+export const UploadWineImg: Story = {
+  args: {},
+};
+
+export const ErrorWineImg: Story = {
+  args: { isError: true, errorMsg: "와인 사진은 필수 입력이에요" },
+};

src/components/wine-img/wine-img.tsx

@@ -0,0 +1,53 @@
+import { cn } from "@/lib/utils";
+import Icon from "../icon/icon";
+import { ComponentProps } from "react";
+
+interface WineImgProps extends ComponentProps<"input"> {
+  isError?: boolean;
+  errorMsg?: string;
+}
+
+/**
+ * 와인 이미지 등록 컴포넌트
+ * @author hwitae
+ * @param isError 오류 여부
+ * @param errorMsg 표시할 에러 메시지
+ * @returns
+ */
+const WineImg = ({ isError, errorMsg, ...props }: WineImgProps) => {
+  return (
+    <div className="flex items-end gap-2">
+      <label htmlFor="wine-img" className="flex flex-col gap-2">
+        <p className="text-body-sm tracking-[-0.02em]">와인 사진</p>
+        <div
+          className={cn(
+            "relative h-[140px] w-[140px]",
+            "cursor-pointer rounded-[4px] border border-gray-300",
+            "hover:bg-gray-100 active:bg-gray-200",
+            isError && "border-2 border-red-400"
+          )}
+        >
+          <Icon
+            icon="CameraIcon"
+            size={"lg"}
+            className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-gray-400"
+          />
+        </div>
+      </label>
+      {isError && (
+        <p className="text-component-notes-md tracking-[-0.02em] text-red-400">
+          {errorMsg}
+        </p>
+      )}
+      <input
+        id="wine-img"
+        type="file"
+        accept="image/*"
+        className="hidden"
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default WineImg;