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

next.config.ts

@@ -17,6 +17,9 @@ const nextConfig: NextConfig = {
 
     return config;
   },
+  images: {
+    remotePatterns: [new URL("https://upload.wikimedia.org/**")],
+  },
 };
 
 export default nextConfig;

src/app/example/page.tsx

@@ -8,6 +8,8 @@ import {
   SelectType,
   TextInput,
 } from "@/components";
+import Profile from "@/components/profile/profile";
+import WineImg from "@/components/wine-img/wine-img";
 import React, { ChangeEvent } from "react";
 
 const Page = () => {
@@ -95,6 +97,20 @@ const Page = () => {
           errorMsg="에러입니다"
         />
       </section>
+
+      <br />
+      <section>
+        <Profile />
+        <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/profile/profile.stories.tsx

@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from "@storybook/nextjs";
+import Profile from "./profile";
+
+const meta: Meta<typeof Profile> = {
+  title: "Components/Profile",
+  component: Profile,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: "프로필 이미지 컴포넌트 입니다.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    url: { control: { type: "text" } },
+    isEditing: { control: { type: "text" } },
+    className: { control: { type: "text" } },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Profile>;
+
+export const DefaultProfile: Story = {
+  args: {},
+};
+
+export const ImgProfile: Story = {
+  args: {
+    url: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Synthetic_Production_of_Penicillin_TR1468.jpg/120px-Synthetic_Production_of_Penicillin_TR1468.jpg",
+  },
+};
+
+export const NotEditingProfile: Story = {
+  args: {
+    url: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Synthetic_Production_of_Penicillin_TR1468.jpg/120px-Synthetic_Production_of_Penicillin_TR1468.jpg",
+    isEditing: false,
+  },
+};
+
+export const StyledProfile: Story = {
+  args: {
+    url: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Synthetic_Production_of_Penicillin_TR1468.jpg/120px-Synthetic_Production_of_Penicillin_TR1468.jpg",
+    isEditing: false,
+    className: "border border-gray-800",
+  },
+};

src/components/profile/profile.tsx

@@ -0,0 +1,71 @@
+import Image from "next/image";
+import DefaultProfile from "../../../public/images/profile/default-profile.svg";
+import { cn } from "@/lib/utils";
+import Icon from "../icon/icon";
+import { ComponentProps } from "react";
+
+interface ProfileProps extends ComponentProps<"input"> {
+  url?: string;
+  isEditing?: boolean;
+  className?: string;
+}
+
+/**
+ * 프로필 컴포넌트
+ * @author hwitae
+ * @param url 이미지 경로
+ * @param isEditing 이미지 업로드 기능 활성화 여부
+ * @param className 스타일
+ * @returns input
+ */
+const Profile = ({
+  url,
+  isEditing = true,
+  className,
+  ...props
+}: ProfileProps) => {
+  return (
+    <div className="group relative">
+      <div
+        className={cn(
+          "rounded-full bg-white",
+          isEditing && "hover:border hover:border-gray-300 hover:bg-gray-300",
+          className
+        )}
+      >
+        <label className="hover:cursor-pointer">
+          {url ? (
+            <Image
+              src={url}
+              width={164}
+              height={164}
+              alt="프로필 이미지"
+              className="h-[164px] w-[164px] rounded-full object-cover"
+              draggable={false}
+              priority
+            />
+          ) : (
+            <DefaultProfile width="164px" height="164px" />
+          )}
+          <input
+            id="uploadImg"
+            type="file"
+            accept="image/*"
+            className="hidden"
+            disabled={!isEditing}
+            {...props}
+          />
+          {isEditing && (
+            <Icon
+              icon="CameraIcon"
+              size={"2xl"}
+              className="absolute left-1/2 right-4 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 group-hover:block"
+            />
+          )}
+        </label>
+      </div>
+    </div>
+  );
+};
+
+export default Profile;

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;