기타

1. MySQL 테이블 설계
디렉터리 테이블을 사용하여 상위 폴더와 하위 폴더의 관계를 나타내고, 재귀적으로 폴더와 파일을 관리할 수 있도록 구성합니다.

sql
코드 복사
CREATE TABLE directory (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,         -- 폴더나 파일 이름
    parent_id INT NULL,                 -- 상위 폴더 ID (최상위 폴더의 경우 NULL)
    type ENUM('folder', 'file') NOT NULL, -- 폴더/파일 구분
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (parent_id) REFERENCES directory(id) ON DELETE CASCADE
);
id: 각 디렉터리 항목의 고유 ID입니다.
name: 폴더명이나 파일명을 저장합니다.
parent_id: 상위 디렉터리의 ID를 참조합니다. NULL이면 최상위 폴더를 의미합니다.
type: folder와 file을 구분하여 트리 구조에서 폴더와 파일을 구별합니다.
created_at, updated_at: 생성 및 수정 시간입니다.
2. DTO 설계
스프링부트에서 DTO를 계층 구조로 생성하여 TUI Grid 트리 그리드에 맞게 데이터를 구성할 수 있습니다.

java
코드 복사
import java.util.List;

public class DirectoryDto {
    private Long id;
    private String name;
    private String type;
    private Long parentId;
    private List<DirectoryDto> children; // 자식 디렉터리 또는 파일을 포함하는 리스트

    // 생성자, getter/setter
}
id: 폴더 또는 파일의 고유 ID.
name: 폴더명 또는 파일명.
type: 폴더/파일 구분.
parentId: 상위 폴더의 ID.
children: 하위 자식 디렉터리 또는 파일 목록을 포함하여 재귀적으로 트리 구조를 표현합니다.
3. 트리 데이터 조회 로직
스프링부트에서는 자식 폴더 및 파일을 재귀적으로 조회하여 트리 구조로 반환하는 메서드를 작성할 수 있습니다.

java
코드 복사
import java.util.List;
import java.util.stream.Collectors;

@Service
public class DirectoryService {
    @Autowired
    private DirectoryRepository directoryRepository;

    public DirectoryDto getDirectoryTree(Long parentId) {
        List<DirectoryEntity> rootDirectories = directoryRepository.findByParentId(parentId);
        return rootDirectories.stream()
            .map(this::convertToDtoWithChildren)
            .collect(Collectors.toList());
    }

    private DirectoryDto convertToDtoWithChildren(DirectoryEntity entity) {
        DirectoryDto dto = new DirectoryDto();
        dto.setId(entity.getId());
        dto.setName(entity.getName());
        dto.setType(entity.getType());
        dto.setParentId(entity.getParentId());

        List<DirectoryDto> children = directoryRepository.findByParentId(entity.getId()).stream()
            .map(this::convertToDtoWithChildren)
            .collect(Collectors.toList());
        dto.setChildren(children);
        return dto;
    }
}
4. TUI Grid에서 데이터 표시
컨트롤러에서 트리 구조 데이터를 조회해 JSON 형태로 프론트엔드에 전달하면, 트리 그리드에서 이를 표현할 수 있습니다. TUI Grid의 treeColumnOptions와 _children 속성을 사용하여 동적으로 생성된 트리 구조를 표시할 수 있습니다.

javascript
코드 복사
fetch('/api/directory/tree')
  .then(response => response.json())
  .then(data => {
    const grid = new tui.Grid({
      el: document.getElementById('grid'),
      data: data,
      columns: [
        { header: 'Name', name: 'name', tree: true },
        { header: 'Type', name: 'type' }
      ],
      treeColumnOptions: {
        name: 'name',
        useIcon: true
      }
    });
  });
이렇게 하면 동적으로 확장되는 트리 구조를 효과적으로 관리할 수 있습니다.