diff --git "a/.github/ISSUE_TEMPLATE/\360\237\220\236-\353\262\204\352\267\270-\353\246\254\355\217\254\355\212\270-\355\205\234\355\224\214\353\246\277.md" "b/.github/ISSUE_TEMPLATE/\360\237\220\236-\353\262\204\352\267\270-\353\246\254\355\217\254\355\212\270-\355\205\234\355\224\214\353\246\277.md"
new file mode 100644
index 00000000..286df978
--- /dev/null
+++ "b/.github/ISSUE_TEMPLATE/\360\237\220\236-\353\262\204\352\267\270-\353\246\254\355\217\254\355\212\270-\355\205\234\355\224\214\353\246\277.md"
@@ -0,0 +1,25 @@
+---
+name: "\U0001F41E 버그 리포트 템플릿"
+about: 프로젝트에서 발생하는 버그에 대해 명세합니다.
+title: "[Bug] Issue title"
+labels: "\U0001F41E BugFix"
+assignees: ""
+---
+
+## 💬 버그 설명
+
+문제가 생긴 상황을 간단히 설명해주세요.
+
+## 🔁 재현 방법
+
+문제가 어떻게 발생했는지 순서대로 작성해주세요.
+
+## ⚙️ 기대 동작
+
+정상적으로 어떤 동작을 기대했는지 설명해주세요.
+
+## 📸 스크린샷 (선택사항)
+
+## 📄 추가 정보
+
+기타 참고할만한 정보나 자료가 있다면 자유롭게 작성해주세요.
diff --git a/next.config.ts b/next.config.ts
index 61e331f5..913c0975 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -17,6 +17,9 @@ const nextConfig: NextConfig = {
 
     return config;
   },
+  images: {
+    remotePatterns: [new URL("https://upload.wikimedia.org/**")],
+  },
 };
 
 export default nextConfig;
diff --git a/public/images/profile/default-profile.svg b/public/images/profile/default-profile.svg
new file mode 100644
index 00000000..da1685ad
--- /dev/null
+++ b/public/images/profile/default-profile.svg
@@ -0,0 +1,3 @@
+<svg width="164" height="164" viewBox="0 0 164 164" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M82 0C36.7078 0 0 36.7078 0 82C0 127.292 36.7078 164 82 164C127.292 164 164 127.292 164 82C164 36.7078 127.292 0 82 0ZM82 41C94.7388 41 105.062 51.3269 105.062 64.0625C105.062 76.7981 94.7484 87.125 82 87.125C69.2644 87.125 58.9375 76.7981 58.9375 64.0625C58.9375 51.3269 69.2516 41 82 41ZM82 143.5C65.0459 143.5 49.6805 136.604 38.5336 125.47C43.7227 112.077 56.5352 102.5 71.75 102.5H92.25C107.478 102.5 120.29 112.071 125.466 125.47C114.32 136.613 98.9445 143.5 82 143.5Z" fill="#F2F2F2"/>
+</svg>
diff --git a/src/app/example/page.tsx b/src/app/example/page.tsx
index 34c3d585..3174402d 100644
--- a/src/app/example/page.tsx
+++ b/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>
   );
 };
diff --git a/src/components/index.ts b/src/components/index.ts
index 647de881..1ddf5e47 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -9,6 +9,7 @@ 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";
 export { default as Button } from "./button/basic-button";
 export { default as ArrowButton } from "./button/arrow-button";
 export { default as IconButton } from "./button/icon-button";
diff --git a/src/components/profile/profile.stories.tsx b/src/components/profile/profile.stories.tsx
new file mode 100644
index 00000000..9ab4dcaf
--- /dev/null
+++ b/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",
+  },
+};
diff --git a/src/components/profile/profile.tsx b/src/components/profile/profile.tsx
new file mode 100644
index 00000000..3c2c01cf
--- /dev/null
+++ b/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;