# Component/List

> Props: component-list.props.txt

## Examples


### Base

```tsx
{
  args: {
    width: 250,
    items: [{
      id: '1',
      text: '해린이도 춤추게 하는'
    }, {
      id: '2',
      text: '다니엘도 춤추게 하는'
    }, {
      id: '3',
      text: '민지도 춤추게 하는'
    }, {
      id: '4',
      text: '하니도 춤추게 하는'
    }, {
      id: '5',
      text: '혜인이도 춤추게 하는'
    }]
  },
  render: args => {
    const {
      items,
      ...rest
    } = args;
    const [_items, setItems] = useState<Array<ListItemProps>>(items);
    useEffect(() => {
      setItems(items);
    }, [items]);
    return <Stack direction='column' align='center'>
        <List items={_items} onChange={setItems} {...rest} />
      </Stack>;
  }
}
```

### Draggable

```tsx
{
  args: {
    width: 250,
    draggable: true,
    items: [{
      id: '1',
      text: '1 해린이도 춤추게 하는',
      isOn: true,
      fixed: true
    }, {
      id: '2',
      text: '2 다니엘도 춤추게 하는',
      isOn: false,
      fixed: false
    }, {
      id: '3',
      text: '3 민지도 춤추게 하는',
      isOn: false,
      fixed: true
    }, {
      id: '4',
      text: '4 하니도 춤추게 하는',
      isOn: true,
      fixed: false,
      disabled: true
    }, {
      id: '5',
      text: '5 혜인이도 춤추게 하는',
      isOn: true,
      fixed: true
    }]
  },
  render: args => {
    const {
      items,
      ...rest
    } = args;
    const [_items, setItems] = useState<Array<ListItemProps>>(items);
    const [opened, setOpened] = useState(false);
    useEffect(() => {
      setItems(items);
    }, [items]);
    return <Stack direction='column' align='center' gap={10}>
        <List items={_items} onChange={setItems} {...rest} />
        <Button onClick={() => setOpened(true)}>모달에서 보기</Button>
        <Modal title='우선 할당존 설정' width={720} opened={opened} onCancel={() => setOpened(false)}>
          <Stack direction='column' align='center'>
            <List items={_items} onChange={setItems} {...rest} />
          </Stack>
        </Modal>
      </Stack>;
  }
}
```

### Draggable Overflow

```tsx
{
  args: {
    width: 250,
    draggable: true,
    items: [{
      id: '1',
      text: '1 해린이도 춤추게 하는',
      isOn: true,
      fixed: true
    }, {
      id: '2',
      text: '2 다니엘도 춤추게 하는',
      isOn: false,
      fixed: false
    }, {
      id: '3',
      text: '3 민지도 춤추게 하는',
      isOn: false,
      fixed: true
    }, {
      id: '4',
      text: '4 하니도 춤추게 하는',
      isOn: true,
      fixed: false,
      disabled: true
    }, {
      id: '5',
      text: '5 혜인이도 춤추게 하는',
      isOn: true,
      fixed: true
    }]
  },
  render: args => {
    const {
      items,
      ...rest
    } = args;
    const [_items, setItems] = useState<Array<ListItemProps>>(items);
    const [opened, setOpened] = useState(false);
    useEffect(() => {
      setItems(items);
    }, [items]);
    return <Stack direction='column' align='center' gap={10}>
        <List items={_items} onChange={setItems} {...rest} />
        <Button onClick={() => setOpened(true)}>모달에서 보기</Button>
        <Modal title='우선 할당존 설정' width={720} opened={opened} onCancel={() => setOpened(false)}>
          <Stack direction='column' align='center'>
            <List items={_items} onChange={setItems} {...rest} />
          </Stack>
        </Modal>
      </Stack>;
  },
  render: args => {
    const {
      items,
      ...rest
    } = args;
    const [_items, setItems] = useState<Array<ListItemProps>>(items);
    useEffect(() => {
      setItems(items);
    }, [items]);
    return <Stack direction='column' align='center' gap={10} style={{
      width: 250,
      height: 300,
      padding: 0,
      backgroundColor: 'skyblue',
      overflow: 'hidden'
    }}>
        <List items={_items} onChange={setItems} {...rest} />
      </Stack>;
  }
}
```

### Full Case

```tsx
{
  args: {
    width: 250,
    items: [{
      id: '1',
      text: '해린이도 춤추게 하는'
    }, {
      id: '2',
      text: '다니엘도 춤추게 하는'
    }, {
      id: '3',
      text: '민지도 춤추게 하는'
    }, {
      id: '4',
      text: '하니도 춤추게 하는'
    }, {
      id: '5',
      text: '혜인이도 춤추게 하는'
    }]
  },
  render: args => {
    const {
      items,
      ...rest
    } = args;
    const [_items, setItems] = useState<Array<ListItemProps>>(items);
    useEffect(() => {
      setItems(items);
    }, [items]);
    return <Stack direction='column' align='center'>
        <List items={_items} onChange={setItems} {...rest} />
      </Stack>;
  },
  args: {
    width: 250,
    draggable: true,
    items: [{
      id: '1',
      text: '해린이도 춤추게 하는'
    }, {
      id: '2',
      text: '다니엘도 춤추게 하는',
      isOn: true
    }, {
      id: '3',
      text: '민지도 춤추게 하는',
      fixed: false
    }, {
      id: '4',
      text: '하니도 춤추게 하는',
      isOn: false,
      fixed: false
    }, {
      id: '5',
      text: '혜인이도 춤추게 하는',
      isOn: true,
      fixed: true,
      disabled: true
    }]
  }
}
```