Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | 'use client';
import Image from 'next/image';
import { useState } from 'react';
import { DEFAULT_PROFILE_IMAGE } from 'constants/default-images';
import { Icon } from '@/components/icon';
import { useModal } from '@/components/ui';
import { UserOutModal } from './UserOutModal';
interface User {
id: number;
nickName: string;
profileImage: string;
profileMessage?: string;
}
interface UserListProps {
onClose: () => void;
users: User[];
}
export const UserList = ({ onClose, users }: UserListProps) => {
const [isManaging, setIsManaging] = useState(false);
const { open } = useModal();
return (
<div className='bg-mono-white flex h-[calc(100vh-112px)] flex-col'>
{/* 헤더 */}
<div className='flex items-center justify-between border-b border-gray-200 px-5 py-3'>
<Icon id='chevron-left-2' className='w-6 cursor-pointer text-gray-500' onClick={onClose} />
<span className='text-text-md-bold flex items-center gap-1'>
<span className='text-gray-800'>참여자</span>
<span className='text-mint-500'>{users.length}</span>
</span>
<button
className='text-text-sm-semibold cursor-pointer'
onClick={() => setIsManaging(!isManaging)}
>
{isManaging ? (
<span className='text-gray-600'>완료</span>
) : (
<span className='text-mint-600'>관리</span>
)}
</button>
</div>
{/* 유저 리스트 */}
<div className='scrollbar-thin flex-1 overflow-y-auto'>
{users.map((user, index) => (
<div key={user.id}>
<div className='bg-mono-white flex h-22 items-center gap-4 p-5'>
<div className='h-12 w-12 overflow-hidden rounded-full'>
<Image
width={48}
className='h-full w-full object-cover'
alt='profile'
height={48}
src={user.profileImage || DEFAULT_PROFILE_IMAGE}
/>
</div>
<div className='flex-1'>
<div className='text-text-md-bold text-gray-800'>{user.nickName}</div>
<div className='text-text-sm-medium line-clamp-1 text-gray-600'>
{user.profileMessage || '상태 메시지가 없습니다.'}
</div>
</div>
{/* 방장이 0번째로 들어온다면 이렇게, 방장이라는걸 알 수 있는 필드가 있다면 수정 */}
{index === 0 ? (
<span className='bg-mint-100 text-mint-700 text-text-xs-medium rounded-full px-2.5 py-1'>
방장
</span>
) : null}
{isManaging && index !== 0 && (
<button
className='bg-error-500 flex h-5 w-5 items-center justify-center rounded-full'
onClick={(e) => {
e.stopPropagation();
open(<UserOutModal nickName={user.nickName} />);
}}
>
<div className='bg-mono-white h-0.5 w-2.5' />
</button>
)}
</div>
</div>
))}
</div>
</div>
);
};
|