Merge pull request #25 from team-nabi/NABI-85

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

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: { profileImg: null, userName: '푸바오바오' },
+  render: () => {
+    return <ProfileSection profileImg={null} userName="푸바오바오" />
+  },
+}

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

@@ -0,0 +1,20 @@
+import { Avatar, AvatarImage } from '@/components/ui/Avatar'
+import { TYPHOGRAPHY } from '@/styles/sizes'
+
+type ProfileSectionProps = {
+  profileImg: string | null
+  userName: string
+}
+
+const ProfileSection = ({ profileImg, userName }: ProfileSectionProps) => {
+  return (
+    <section className="flex w-full py-2 border-b-[1px] items-center">
+      <Avatar size="md">
+        <AvatarImage imgUrl={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 profileImg={null} userName="임시이름" />
+      <div>아이템 상세정보 영역</div>
+    </main>
+  )
+}
+
+export default ItemPage

src/components/ui/Avatar/Avatar.stories.tsx

@@ -17,15 +17,15 @@ export const Normal: Story = {
     return (
       <>
         <Avatar size="sm">
-          <AvatarImage src="https://github.com/shadcn.png" />
+          <AvatarImage imgUrl={null} />
           <AvatarFallback>NB</AvatarFallback>
         </Avatar>
         <Avatar size="md">
-          <AvatarImage src="https://github.com/shadcn.png" />
+          <AvatarImage imgUrl={null} />
           <AvatarFallback>NB</AvatarFallback>
         </Avatar>
         <Avatar size="lg">
-          <AvatarImage src="https://github.com/shadcn.png" />
+          <AvatarImage imgUrl="https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg" />
           <AvatarFallback>NB</AvatarFallback>
         </Avatar>
       </>

src/components/ui/Avatar/Avatar.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import * as AvatarPrimitive from '@radix-ui/react-avatar'
 import { cva, type VariantProps } from 'class-variance-authority'
+import { DEFAULT_PROFILE_IMG } from '@/constants/image'
 import { cn } from '@/utils'
 
 const avatarVariants = cva(
@@ -39,11 +40,15 @@ Avatar.displayName = AvatarPrimitive.Root.displayName
 
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> & {
+    imgUrl: string | null
+  }
+>(({ className, imgUrl, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
     className={cn('aspect-square h-full w-full', className)}
+    src={imgUrl ?? DEFAULT_PROFILE_IMG}
+    onError={(e) => (e.currentTarget.src = DEFAULT_PROFILE_IMG)}
     {...props}
   />
 ))

src/constants/image.ts

@@ -0,0 +1,4 @@
+const DEFAULT_PROFILE_IMG = 'https://github.com/shadcn.png'
+const DEFAULT_ITEM_IMG = '';
+
+export {DEFAULT_PROFILE_IMG, DEFAULT_ITEM_IMG}

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',