feat: Profile 컴포넌트 구현

Author: jwj0620gcu

.storybook/main.ts

@@ -11,4 +11,4 @@ const config: StorybookConfig = {
   ],
   framework: '@storybook/react-vite',
 };
-export default config;
+export default config;

public/profile-sample.jpg

@@ -18,4 +18,4 @@
   "theme_color": "#ffffff",
   "background_color": "#ffffff",
   "display": "standalone"
-}
+}

public/site.webmanifest

@@ -1,17 +1,20 @@
 import { Button } from '@shared/ui/Button/Button';
 import { Checkbox } from '@shared/ui/Checkbox/Checkbox';
+import { Profile } from '@shared/ui/Profile/Profile';
 import { RadioButton } from '@shared/ui/RadioButton/RadioButton';
 
 export default function Playground() {
   return (
     <div className="flex flex-col gap-6 p-8">
       <h1 className="typo-title-2">UI Playground</h1>
 
+      {/* Button */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">Button</h2>
         <p className="typo-caption-2 text-gray-600">
           Hover와 Focus 상태를 확인하려면 마우스를 올리거나 Tab 키로 포커스를 이동하세요.
         </p>
+
         <div className="flex flex-col gap-4">
           <div className="flex items-center gap-4">
             <span className="typo-caption-1 w-24">Fill</span>
@@ -20,6 +23,7 @@ export default function Playground() {
               Disabled
             </Button>
           </div>
+
           <div className="flex items-center gap-4">
             <span className="typo-caption-1 w-24">Outline</span>
             <Button variant="outline">Default</Button>
@@ -30,6 +34,7 @@ export default function Playground() {
         </div>
       </section>
 
+      {/* Checkbox */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">Checkbox</h2>
         <div className="flex flex-col gap-2">
@@ -40,6 +45,7 @@ export default function Playground() {
         </div>
       </section>
 
+      {/* Radio Button */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">Radio Button</h2>
         <div className="flex flex-col gap-2">
@@ -49,6 +55,40 @@ export default function Playground() {
           <RadioButton checked disabled label="Selected + Disabled" />
         </div>
       </section>
+
+      {/* Profile */}
+      <section className="flex flex-col gap-4">
+        <h2 className="typo-body-1">Profile</h2>
+        <p className="typo-caption-2 text-gray-600">
+          size variant 및 placeholder 상태를 확인합니다.
+        </p>
+
+        <div className="flex items-center gap-10">
+          {/* small image */}
+          <div className="flex flex-col items-center gap-2">
+            <Profile size="sm" imageUrl="/profile-sample.jpg" />
+            <span className="typo-caption-2">Small Image</span>
+          </div>
+
+          {/* large image */}
+          <div className="flex flex-col items-center gap-2">
+            <Profile size="lg" imageUrl="/profile-sample.jpg" />
+            <span className="typo-caption-2">Large Image</span>
+          </div>
+
+          {/* small placeholder */}
+          <div className="flex flex-col items-center gap-2">
+            <Profile size="sm" />
+            <span className="typo-caption-2 text-gray-500">Small Placeholder</span>
+          </div>
+
+          {/* large placeholder */}
+          <div className="flex flex-col items-center gap-2">
+            <Profile size="lg" />
+            <span className="typo-caption-2 text-gray-500">Large Placeholder</span>
+          </div>
+        </div>
+      </section>
     </div>
   );
 }

src/pages/playground.tsx

@@ -0,0 +1,18 @@
+import { profileVariants } from './Profile.variants';
+import type { ComponentPropsWithoutRef } from 'react';
+import type { VariantProps } from 'tailwind-variants';
+
+export type ProfileProps = ComponentPropsWithoutRef<'div'> &
+  VariantProps<typeof profileVariants> & {
+    imageUrl?: string;
+  };
+
+export const Profile = ({ size, imageUrl, className, ...props }: ProfileProps) => {
+  return (
+    <div
+      className={profileVariants({ size, className })}
+      style={imageUrl ? { backgroundImage: `url(${imageUrl})` } : undefined}
+      {...props}
+    />
+  );
+};

src/shared/ui/Profile/Profile.tsx

@@ -0,0 +1,24 @@
+import { tv } from 'tailwind-variants';
+
+export const profileVariants = tv({
+  base: [
+    'relative',
+    'flex items-center justify-center',
+    'overflow-hidden',
+
+    'rounded-full',
+    'bg-[var(--color-gray-200)]',
+    'bg-center bg-cover bg-no-repeat',
+  ],
+
+  variants: {
+    size: {
+      sm: ['w-[44px]', 'h-[44px]'],
+      lg: ['w-[152px]', 'h-[152px]'],
+    },
+  },
+
+  defaultVariants: {
+    size: 'sm',
+  },
+});