🎉 프로필 영역 컴포넌트 구현

src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/ProfileSection.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import ProfileSection from './ProfileSection'
+
+const meta = {
+  title: 'ItemPage/ProfileSection',
+  component: ProfileSection,
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof ProfileSection>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Profile: Story = {
+  args: { userName: '푸바오바오' },
+  render: () => {
+    return <ProfileSection userName="푸바오바오" />
+  },
+}

src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/ProfileSection.tsx

@@ -0,0 +1,23 @@
+import { Avatar, AvatarImage } from '@/components/ui/Avatar'
+import { TYPHOGRAPHY } from '@/styles/sizes'
+
+type ProfileSectionProps = {
+  profileImg?: string
+  userName: string
+}
+
+const ProfileSection = ({
+  profileImg = 'https://github.com/shadcn.png',
+  userName,
+}: ProfileSectionProps) => {
+  return (
+    <section className="flex w-full py-2 border-b-[1px] items-center">
+      <Avatar size="md">
+        <AvatarImage src={profileImg} />
+      </Avatar>
+      <div className={`ml-9 ${TYPHOGRAPHY.profile}`}>{userName}</div>
+    </section>
+  )
+}
+
+export default ProfileSection

src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/index.tsx

@@ -0,0 +1,3 @@
+import ProfileSection from './ProfileSection'
+
+export default ProfileSection

src/app/(root)/(routes)/items/[itemId]/page.tsx

@@ -0,0 +1,19 @@
+import ProfileSection from './components/ProfileSection'
+
+type ItemPageProps = {
+  params: {
+    itemId: string
+  }
+}
+
+const ItemPage = ({ params }: ItemPageProps) => {
+  return (
+    <main className="flex-col min-h-screen  bg-background-color">
+      <div>이미지 슬라이더 영역</div>
+      <ProfileSection userName="임시이름" />
+      <div>아이템 상세정보 영역</div>
+    </main>
+  )
+}
+
+export default ItemPage

src/styles/sizes.ts

@@ -3,6 +3,7 @@ const TYPHOGRAPHY = {
   description: 'text-[12px]',
   date: 'text-[10px] text-[#BFBFBF]',
   icon: 'text-[10px]',
+  profile: 'text-color text-[12px] font-bold'
 }
 const HEIGHT = {
   'card-lg': '161px',