Merge pull request #42 from Team-TenTen/feature/#41/component-space-m…

…ember

스페이스 멤버 컴포넌트 구현

src/components/common/SpaceMemberList/SpaceMemberList.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import Avatar from '../Avatar/Avatar'
+import Dropdown from '../Dropdown/Dropdown'
+import DropdownItem from '../Dropdown/DropdownItem'
+import { SPACE_MEMBER } from './constants'
+
+export interface Member {
+  id: number
+  name: string
+  profile: string
+  auth: string
+}
+
+export interface SpaceMemberListProps {
+  members: Member[]
+  edit?: boolean
+}
+
+const SpaceMemberList = ({ members, edit = false }: SpaceMemberListProps) => {
+  return (
+    <div className="flex flex-col">
+      <div className="py-4 text-base font-bold text-gray9">{SPACE_MEMBER}</div>
+      {members.map((member) => (
+        <div
+          key={member.id}
+          className="flex items-center justify-between border-t border-slate3 p-2">
+          <div className="flex items-center gap-2">
+            <Avatar
+              src={member.profile}
+              width={30}
+              height={30}
+              alt="프로필"
+            />
+            <div className="text-sm font-semibold">{member.name}</div>
+          </div>
+          {member.auth === 'owner' ? (
+            <DropdownItem
+              label="관리자"
+              border={true}
+              disabled={true}
+            />
+          ) : (
+            edit && (
+              <Dropdown
+                type="user_edit"
+                size="small"
+                placement="left"
+                onChange={(e) => {
+                  console.log(e?.currentTarget.value) // TODO: 멤버 리스트 권한 기능 구현할 때 여기에 함수 작성
+                }}
+              />
+            )
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default SpaceMemberList

src/components/common/SpaceMemberList/constants/index.ts

@@ -0,0 +1 @@
+export const SPACE_MEMBER = '스페이스 멤버'

src/components/index.ts

@@ -13,3 +13,4 @@ export { default as CategoryListItem } from './common/CategoryList/CategoryListI
 export { default as CategoryList } from './common/CategoryList/CategoryList'
 export { default as DropdownItem } from './common/Dropdown/DropdownItem'
 export { default as Dropdown } from './common/Dropdown/Dropdown'
+export { default as SpaceMemberList } from './common/SpaceMemberList/SpaceMemberList'

src/data/index.ts

@@ -73,3 +73,24 @@ export const mock_LinkData = [
     likes: 6,
   },
 ]
+
+export const mock_memberData = [
+  {
+    id: 1,
+    profile: '/duck.jpg',
+    name: '프롱이',
+    auth: 'owner',
+  },
+  {
+    id: 2,
+    profile: '/duck.jpg',
+    name: '백둥이',
+    auth: 'view',
+  },
+  {
+    id: 3,
+    profile: '/duck.jpg',
+    name: '풀택이',
+    auth: 'view',
+  },
+]