Skip to content

Commit

Permalink
[FEAT] 후트 경로로 드래그앤 드롭 추가 및 뒤로가기 삭제
Browse files Browse the repository at this point in the history
  • Loading branch information
@jsangmin99
jsangmin99 committed Oct 1, 2024
1 parent 9285b27 commit ed5d18d
Showing 1 changed file with 67 additions and 39 deletions.
106 changes: 67 additions & 39 deletions src/components/drive/FolderComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,24 @@
<div class="drive-container">
<!-- 현재 경로 표시 -->
<div class="breadcrumb">
<span v-for="(folder, index) in breadcrumb" :key="folder.folderId"
class="breadcrumb-item"
draggable="true"
@dragover.prevent
@drop="onDrop($event, folder.folderId)"
@click="navigateToFolder(folder.folderId)">
<!-- 루트 경로로 드래그 앤 드롭 가능하게 설정 -->
<span @click="navigateToFolder(rootFolderId)" class="breadcrumb-item"
:class="{ active: currentFolderId === rootFolderId }" draggable="true" @dragover.prevent
@drop="onDrop($event, rootFolderId)">
루트
</span>

<span v-if="breadcrumb.length"> / </span>
<span v-for="(folder, index) in breadcrumb" :key="folder.folderId" class="breadcrumb-item" draggable="true"
@dragover.prevent @drop="onDrop($event, folder.folderId)" @click="navigateToFolder(folder.folderId)">
{{ folder.folderName }}
<span v-if="index !== breadcrumb.length - 1"> / </span> <!-- 마지막 폴더에는 '/' 표시 안함 -->
<span v-if="index !== breadcrumb.length - 1"> / </span>
</span>
</div>

<!-- 뒤로 가기 버튼 -->
<div class="toolbar">
<button @click="goBack" :disabled="!backButtonHistory.length">뒤로 가기</button>
<!-- <button @click="goBack" :disabled="!backButtonHistory.length || currentFolderId === rootFolderId">뒤로 가기</button> -->
<button @click="createFolder">새 폴더</button>
<button @click="refreshFolderList">새로고침</button>
<input type="file" multiple @change="onFileChange" />
Expand Down Expand Up @@ -66,7 +70,8 @@ export default {
folderList: [], // 현재 폴더 내 폴더 목록
fileList: [], // 현재 폴더 내 파일 목록
currentFolderId: null, // 현재 탐색 중인 폴더 ID
backButtonHistory: [], // 이전 폴더 기록
rootFolderId: null, // 루트 폴더 ID 저장
// backButtonHistory: [], // 이전 폴더 기록
files: [], // 업로드할 파일 배열
uploadProgress: [], // 파일 업로드 진행 상황
breadcrumb: [], // 폴더 경로를 저장하는 배열
Expand All @@ -81,6 +86,7 @@ export default {
try {
const response = await axios.get(`${process.env.VUE_APP_API_BASE_URL}/channel/${channelId}/drive`);
const data = response.data.result;
this.rootFolderId = data.nowFolderId; // 루트 폴더 설정
this.currentFolderId = data.nowFolderId;
this.folderList = data.folderListDto || [];
this.fileList = data.fileListDto || [];
Expand All @@ -99,27 +105,40 @@ export default {
// 드롭 시 호출
async onDrop(event, targetFolderId) {
if (!targetFolderId && this.draggedType === 'folder') {
if (targetFolderId === null || targetFolderId === undefined) {
alert('유효한 폴더 ID를 입력하세요.');
return;
}
// 폴더가 파일 안에 이동하지 않도록 처리
if (this.draggedType === 'folder' && !targetFolderId) {
alert('폴더는 파일 안에 이동할 수 없습니다.');
return;
}
if (this.draggedType === 'file') {
try {
await this.moveFile(this.draggedItem, targetFolderId || this.currentFolderId);
// 자기 자신에게 드롭하지 못하도록 하기 (폴더와 파일 구분)
if (this.draggedType === 'folder' && this.draggedItem === targetFolderId) {
alert('같은 폴더로 이동할 수 없습니다.');
return;
}
if (this.draggedType === 'file' && this.currentFolderId === targetFolderId) {
alert('같은 위치로 파일을 이동할 수 없습니다.');
return;
}
try {
if (this.draggedType === 'file') {
// 파일을 targetFolderId로 이동
await this.moveFile(this.draggedItem, targetFolderId);
alert('파일이 성공적으로 이동되었습니다.');
} catch (error) {
console.error('파일 이동 실패:', error);
alert('파일 이동 중 오류가 발생했습니다.');
}
} else if (this.draggedType === 'folder') {
try {
} else if (this.draggedType === 'folder') {
// 폴더를 targetFolderId로 이동
await this.moveFolder(this.draggedItem, targetFolderId);
alert('폴더가 성공적으로 이동되었습니다.');
} catch (error) {
console.error('폴더 이동 실패:', error);
alert('폴더 이동 중 오류가 발생했습니다.');
}
} catch (error) {
console.error(`${this.draggedType} 이동 실패:`, error);
alert(`${this.draggedType} 이동 중 오류가 발생했습니다.`);
}
// 드래그 상태 초기화
Expand All @@ -130,7 +149,8 @@ export default {
this.refreshFolderList();
},
// 폴더 생성
// 폴더 생성
async createFolder() {
try {
const response = await axios.post(`${process.env.VUE_APP_API_BASE_URL}/drive/folder/create`, {
Expand All @@ -145,15 +165,16 @@ export default {
}
},
// 뒤로 가기 기능
goBack() {
if (this.backButtonHistory.length) {
console.log('뒤로 가기:', this.backButtonHistory);
const previousFolderId = this.backButtonHistory.pop(); // 마지막 폴더 ID를 제거하고 이동
this.breadcrumb.pop(); // 경로에서 마지막 폴더 제거
this.navigateToFolder(previousFolderId, false); // false는 뒤로가기 이동 시 기록하지 않기 위함
}
},
// // 뒤로 가기 기능
// goBack() {
// if (this.backButtonHistory.length && this.currentFolderId !== this.rootFolderId) {
// console.log('뒤로 가기:', this.backButtonHistory);
// const previousFolderId = this.backButtonHistory.pop(); // 마지막 폴더 ID를 제거하고 이동
// this.breadcrumb.pop(); // 경로에서 마지막 폴더 제거
// this.navigateToFolder(previousFolderId, false); // false는 뒤로가기 이동 시 기록하지 않기 위함
// }
// },
// 폴더 탐색
// async refreshFolderList() {
Expand All @@ -171,7 +192,7 @@ export default {
// 폴더/파일 목록 갱신
async refreshFolderList() {
try {
const response = await axios.get(`${process.env.VUE_APP_API_BASE_URL}/drive/folder/${this.currentFolderId || 1}`);
const response = await axios.get(`${process.env.VUE_APP_API_BASE_URL}/drive/folder/${this.currentFolderId}`);
this.folderList = response.data.result.folderListDto || [];
this.fileList = response.data.result.fileListDto || [];
} catch (error) {
Expand Down Expand Up @@ -371,24 +392,31 @@ export default {
}
},
// 폴더 탐색
async navigateToFolder(folderId, recordHistory = true) {
if (recordHistory && this.currentFolderId !== folderId) {
this.backButtonHistory.push(this.currentFolderId);
// async navigateToFolder(folderId, recordHistory = true) {
async navigateToFolder(folderId) {
// if (recordHistory && this.currentFolderId !== folderId) {
// this.backButtonHistory.push(this.currentFolderId);
if (folderId === this.rootFolderId) {
console.log('루트 폴더로 이동');
console.log('rootFolderId:', this.rootFolderId);
// 루트 폴더일 경우, breadcrumb를 초기화
this.breadcrumb = [];
} else {
const selectedFolder = this.folderList.find(folder => folder.folderId === folderId);
// 선택한 폴더가 이미 breadcrumb에 있다면, 해당 폴더까지만 남기고 나머지 경로는 삭제
const folderIndex = this.breadcrumb.findIndex(bc => bc.folderId === folderId);
if (folderIndex !== -1) {
this.breadcrumb = this.breadcrumb.slice(0, folderIndex + 1);
} else if (selectedFolder) {
// 새로운 폴더를 탐색하는 경우
this.breadcrumb.push({
folderId: selectedFolder.folderId,
folderName: selectedFolder.folderName,
});
}
}
// }
this.currentFolderId = folderId;
await this.refreshFolderList();
Expand All @@ -397,7 +425,7 @@ export default {
},
created() {
// this.currentFolderId = this.currentFolderId || 1;
this.refreshFolderList();
this.loadChannelDrive();
},
};
</script>
Expand Down

0 comments on commit ed5d18d

Please sign in to comment.