프로필 컴포넌트 생성

src/App.tsx

@@ -1,4 +1,3 @@
-import Button from './components/common/button/Button'
 import './styles/index.css'
 
 function App() {

src/components/common/button/Button.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import Button from './Button'
 const meta = {
-  title: 'Component/Button',
+  title: 'Components/Button',
   component: Button,
   parameters: {
     layout: 'centered'

src/components/common/profile/Profile.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Profile from './Profile'
+const meta = {
+  title: 'Components/Profile',
+  component: Profile,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    imageSize: {
+      control: 'select',
+      options: ['S', 'M', 'L']
+    }
+  }
+} satisfies Meta<typeof Profile>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const LargeProfile: Story = {
+  args: {
+    imageSize: 'L',
+    canEdit: true,
+    onClick: () => alert('l size 프로필 변경')
+  }
+}
+
+export const MediumProfile: Story = {
+  args: {
+    imageSize: 'M',
+    canEdit: false,
+    onClick: () => alert('l size 프로필 변경')
+  }
+}
+
+export const SmallProfile: Story = {
+  args: {
+    imageSize: 'S',
+    canEdit: true,
+    onClick: () => alert('s size 프로필 변경')
+  }
+}

src/components/common/profile/Profile.tsx

@@ -0,0 +1,39 @@
+import type { ProfileImageProps } from './ProfileType'
+import { PROFILE_SIZE, PROFILE_BORDER_COLOR } from './constants'
+
+const Profile = ({
+  imageSize,
+  imageUrl = 'https://chanwookim.me/agumon-dday/agumon.png',
+  canEdit = false
+}: ProfileImageProps) => {
+  return (
+    <div
+      className={`border ${canEdit && 'cursor-pointer'} ${
+        PROFILE_BORDER_COLOR['black500']
+      } rounded-full relative overflow-hidden ${
+        imageSize === 'S'
+          ? PROFILE_SIZE['S']
+          : imageSize === 'M'
+          ? PROFILE_SIZE['M']
+          : imageSize === 'L'
+          ? PROFILE_SIZE['L']
+          : ''
+      }`}
+    >
+      <img
+        onClick={
+          canEdit
+            ? () => {
+                alert('프로필 바꾸는 기능!')
+              }
+            : undefined
+        }
+        src={imageUrl}
+        alt={'profile photo'}
+        className={'absolute top-0 left-0 w-[100%] h-[100%]'}
+      />
+    </div>
+  )
+}
+
+export default Profile

src/components/common/profile/ProfileType.ts

@@ -0,0 +1,8 @@
+type ProfileImageType = 'S' | 'M' | 'L'
+
+export interface ProfileImageProps {
+  imageSize: ProfileImageType
+  imageUrl?: string
+  canEdit?: boolean
+  onClick?: () => void
+}

src/components/common/profile/constants.ts

@@ -0,0 +1,8 @@
+export const PROFILE_SIZE = {
+  L: 'w-[150px] h-[150px]',
+  M: 'w-[92px] h-[92px]',
+  S: 'w-[70px] h-[70px]'
+}
+export const PROFILE_BORDER_COLOR = {
+  black500: 'border-black-500'
+}