diff --git a/src/components/common/Button/Button.tsx b/src/components/common/Button/Button.tsx
index 781fedcb..ca8f5688 100644
--- a/src/components/common/Button/Button.tsx
+++ b/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 = ({
diff --git a/src/components/common/User/User.tsx b/src/components/common/User/User.tsx
new file mode 100644
index 00000000..6de1d5b2
--- /dev/null
+++ b/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
diff --git a/src/data/index.ts b/src/data/index.ts
index a5c580fd..86acff94 100644
--- a/src/data/index.ts
+++ b/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',
+  },
+]