Merge pull request #56 from Team-TenTen/feature/#53/component-user

유저 컴포넌트 구현

src/components/common/Button/Button.tsx

@@ -3,7 +3,7 @@ interface ButtonProps {
   type?: 'button' | 'reset' | 'submit' | undefined
   className?: string
   style?: React.CSSProperties
-  onClick?: (_e?: React.MouseEvent<HTMLButtonElement>) => void
+  onClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void
 }
 
 const Button = ({

src/components/common/User/User.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import { cls } from '@/utils'
+import Link from 'next/link'
+import Avatar from '../Avatar/Avatar'
+import Button from '../Button/Button'
+import useToggle from '../Toggle/hooks/useToggle'
+
+interface UserProps {
+  id: number
+  name: string
+  profile: string
+  oneLiner?: string
+  isFollow?: boolean
+  isAuth?: boolean
+  onClick?: (id: number, isFollow: boolean) => void
+}
+
+const User = ({
+  id,
+  name,
+  profile,
+  oneLiner,
+  isFollow,
+  isAuth,
+  onClick,
+}: UserProps) => {
+  const [isFollowing, toggle] = useToggle(isFollow)
+
+  const handleButtonClick = () => {
+    toggle()
+    onClick?.(id, isFollowing)
+  }
+
+  return (
+    <div className="flex items-center gap-x-3 rounded-md border border-slate3 p-3">
+      <div className="inline-flex shrink-0">
+        <Avatar
+          src={profile}
+          width={40}
+          height={40}
+          alt={name}
+        />
+      </div>
+      <div className="flex grow flex-col gap-y-0.5 overflow-hidden py-0.5">
+        <Link
+          href={`/user/${id}`}
+          className="block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold text-gray9">
+          {name}
+        </Link>
+        <p className="overflow-hidden text-ellipsis whitespace-nowrap text-xs text-gray6">
+          {oneLiner}
+        </p>
+      </div>
+      {!isAuth && (
+        <div className="shrink-0">
+          <Button
+            type="button"
+            className={cls(
+              'button px-2.5 py-1.5 text-sm',
+              isFollowing ? 'button-white' : 'button-emerald',
+            )}
+            onClick={handleButtonClick}>
+            {isFollowing ? '팔로잉' : '팔로우'}
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default User

src/data/index.ts

@@ -96,7 +96,7 @@ export const mock_memberData = [
 ]
 
 export const mock_userData = {
-  id: 'frong',
+  id: 3,
   name: '프롱이',
   profile: '/duck.jpg',
   mySpaces: [
@@ -192,3 +192,27 @@ export const mock_replyData = [
     auth: true,
   },
 ]
+
+export const mock_usersData = [
+  {
+    id: 1,
+    name: 'dudwns',
+    oneLiner: '안녕하세요',
+    profile: '/duck.jpg',
+    isFollow: true,
+  },
+  {
+    id: 2,
+    name: 'bomi',
+    oneLiner: '안녕하세요',
+    profile: '/duck.jpg',
+    isFollow: false,
+  },
+  {
+    id: 3,
+    name: '프롱프롱프롱프롱프롱프롱프롱프롱프롱프롱프롱프롱프롱프롱프롱프롱프롱프롱이',
+    oneLiner:
+      '안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요',
+    profile: '/duck.jpg',
+  },
+]