Merge pull request #28 from nguswjd/feat/profile

feat: 유저 프로필 컴포넌트 작가, aside 유형 추가

Author: nguswjd

src/components/aside/aside.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate, useLocation } from 'react-router';
 
-import UserProfile from './user-profile';
+import UserProfile from '../user-profile';
 import { Asidetab } from './aside-tab-menu';
 
 import { MessageCircleMore } from 'lucide-react';
@@ -201,7 +201,12 @@ const Aside: React.FC = () => {
         />
       </section>
 
-      <UserProfile className="mt-auto" />
+      <UserProfile
+        className="mt-auto"
+        variant="aside"
+        userName="김자까"
+        userId="jakka@gmail.com"
+      />
     </aside>
   );
 };

src/components/aside/user-profile.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import UserProfile from './user-profile';
+
+const meta = {
+  title: 'Components/UserProfile',
+  component: UserProfile,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['author', 'aside'],
+    },
+  },
+} satisfies Meta<typeof UserProfile>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Author: Story = {
+  args: {
+    variant: 'author',
+    userName: '김자까',
+    userImage: '',
+    isSelected: false,
+  },
+};
+
+export const Aside: Story = {
+  args: {
+    variant: 'aside',
+    userName: '김자까',
+    userId: 'jakka@gmail.com',
+    userImage: '',
+  },
+};

src/components/user-profile.stories.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+interface UserProfileProps {
+  variant?: 'author' | 'aside';
+  userName: string;
+  userId?: string;
+  userImage?: string;
+  postTime?: string;
+  className?: string;
+  isSelected?: boolean;
+  onAction?: () => void;
+}
+
+const UserProfile: React.FC<UserProfileProps> = ({
+  variant,
+  userName,
+  userId,
+  userImage,
+  className = '',
+  isSelected = false,
+  onAction,
+}) => {
+  const defaultImage = '';
+
+  if (variant === 'author') {
+    return (
+      <div className={`flex flex-col items-center ${className}`}>
+        <div className="relative cursor-pointer" onClick={onAction}>
+          <img
+            src={userImage || defaultImage}
+            alt={userName}
+            className={`h-28 w-28 rounded-full object-cover transition-all ${
+              isSelected ? 'ring-2 ring-blue-100' : ''
+            }`}
+          />
+        </div>
+        <span
+          className={`mt-4 text-sm transition-colors ${
+            isSelected ? 'text-gray-900' : 'text-gray-500'
+          }`}
+        >
+          {userName}
+        </span>
+      </div>
+    );
+  }
+
+  if (variant === 'aside') {
+    return (
+      <div className={`flex items-center gap-[10px] ${className}`}>
+        <img
+          src={userImage || defaultImage}
+          alt={userName}
+          className="h-[42px] w-[42px] rounded-full object-cover"
+        />
+        <div className="flex flex-col">
+          <span className="text-base font-normal text-gray-200">
+            {userName}
+          </span>
+          <span className="text-xs text-gray-300">{userId}</span>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export default UserProfile;