feat: 드라이브(파일 저장소) 프론트엔드 UI 구현

폴더 탐색·드래그앤드롭 업로드(presigned 3단계)·다운로드·이름변경/삭제, 라우트(/drive)·사이드바 네비 추가 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-30 18:20:51 +09:00
parent 9ce3158450
commit 638d1265f6
8 changed files with 1264 additions and 1 deletions
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+// 드라이브 이름 입력 모달 — 폴더 생성 / 폴더·파일 이름 변경 공용
+import { computed, ref } from 'vue'
+import BaseModal from '@/components/common/BaseModal.vue'
+
+const props = withDefaults(
+  defineProps<{
+    title: string
+    label?: string
+    placeholder?: string
+    init?: string
+    confirmText?: string
+  }>(),
+  { label: '이름', placeholder: '', init: '', confirmText: '저장' },
+)
+const emit = defineEmits<{
+  (e: 'save', name: string): void
+  (e: 'close'): void
+}>()
+
+const name = ref(props.init)
+const valid = computed(() => {
+  const v = name.value.trim()
+  return v.length >= 1 && v.length <= 255
+})
+
+function submit(): void {
+  if (!valid.value) return
+  emit('save', name.value.trim())
+}
+</script>
+
+<template>
+  <BaseModal
+    :title="title"
+    size="sm"
+    @close="emit('close')"
+  >
+    <label class="form-field"><span class="form-label"><span class="req">*</span> {{ label }}</span>
+      <input
+        v-model="name"
+        class="form-input"
+        :placeholder="placeholder"
+        maxlength="255"
+        autofocus
+        @keydown.enter="submit"
+      >
+    </label>
+
+    <template #foot>
+      <button
+        class="mbtn"
+        @click="emit('close')"
+      >
+        취소
+      </button>
+      <button
+        class="mbtn primary"
+        :disabled="!valid"
+        @click="submit"
+      >
+        {{ confirmText }}
+      </button>
+    </template>
+  </BaseModal>
+</template>