[Feat] 파일시스템 디렉토리 구현

[hyungchunKim]

파일시스템 디렉토리 구현

• 프로젝트 폴더의 구조를 계층적으로 구현한다.
• 폴더와 파일을 아이콘으로 구분하고 확장자명에 따라 파일은 다시 개별 아이콘으로 구분해서 UI를 만든다.
• 코드 에디팅페이지에 진입하자마자 백엔드에 파일시스템 디렉토리의 조회를 요청해 백엔드에서 보내준 파일이름, 파일경로, 파일 타입을 반영해 UI를 렌더링 한다.
• 파일이나 폴더를 좌클릭하면 그 파일이 선택되도록 구현한다.
• 파일을 우클릭하면 파일 삭제, 파일 이름 변경 모달이 뜨도록 구현한다.
• 폴더를 우클릭하면 폴더 이름 변경, 폴더 삭제, 폴더 생성, 파일 생성 모달이 뜨도록 구현한다.
• 폴더나 파일의 이름 변경을 누르면 이름을 입력하는 입력창이 생기고 enter를 누르거나 포커스가 사라지면 변경된 이름이 저장되도록한다.
• 파일이나 폴더의 crud가 일어날때마다 새로운 경로값을 백엔드에 요청해서 수정사항을 보내준다.
• 파일을 더블클릭하면 코드에디터에 더블클릭한 파일의 데이터가 새로운 탭으로 렌더링 되도록 구현한다.
• 각 계층 구조가 토글에 의해서 숨겨지고 보여지도록 구현한다.

---

추후 구현 고려 사항

파일과 폴더 Drag & Drop 그리고 그에대한 경로값 백엔드에 요청보내기