[#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,7 @@ import {
   SelectType,
   TextInput,
 } from "@/components";
+import Profile from "@/components/profile/profile";
 import React, { ChangeEvent } from "react";
 
 const Page = () => {
@@ -95,6 +96,14 @@ 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 />
     </div>
   );
 };

src/components/index.ts

@@ -9,3 +9,4 @@ export { default as Icon } from "./icon/icon";
 export { default as BlockGauge } from "./gauge/block-gauge";
 export { default as DetailTaste } from "./taste/detail-taste";
 export { default as ReviewTaste } from "./taste/review-taste";
+export { default as Profile } from "./profile/profile";

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;