sori.studio/components/admin/AdminMediaFolderPanel.vue

<script setup>
const openMenuId = defineModel('openMenuId', {
  type: String,
  default: ''
})

/** 서버 `MEDIA_THUMBNAIL_ROOT`와 동일한 썸네일 논리 폴더 라벨 */
const MEDIA_THUMBNAIL_ROOT = '썸네일'

const props = defineProps({
  activeFolder: {
    type: String,
    default: ''
  },
  activeSystemMediaCount: {
    type: Number,
    default: 0
  },
  activeSystemMediaHint: {
    type: String,
    default: ''
  },
  activeSystemMediaTitle: {
    type: String,
    default: ''
  },
  folderMediaCounts: {
    type: Object,
    default: () => ({})
  },
  folders: {
    type: Array,
    default: () => []
  },
  libraryCount: {
    type: Number,
    default: 0
  },
  mode: {
    type: String,
    default: 'library'
  },
  deletingFolder: {
    type: String,
    default: ''
  }
})

const emit = defineEmits([
  'create-folder',
  'drop-folder',
  'remove-folder',
  'select-folder'
])

/**
 * 논리 폴더 경로가 썸네일 전용 루트인지 확인한다.
 * @param {string} folder - 폴더 경로
 * @returns {boolean} 썸네일 전용이면 true
 */
const isThumbnailFolderPath = (folder) => folder === MEDIA_THUMBNAIL_ROOT || String(folder).startsWith(`${MEDIA_THUMBNAIL_ROOT}/`)

/**
 * 폴더 행 메뉴 id를 반환한다.
 * @param {string} folder - 폴더 경로
 * @returns {string} 행 메뉴 id
 */
const getFolderMenuId = (folder) => `folder:${folder}`

/**
 * 폴더 경로의 표시 이름을 반환한다.
 * @param {string} folder - 폴더 경로
 * @returns {string} 표시 이름
 */
const getFolderName = (folder) => String(folder || '').split('/').filter(Boolean).pop() || '미분류'

/**
 * 폴더 깊이를 반환한다.
 * @param {string} folder - 폴더 경로
 * @returns {number} 폴더 깊이
 */
const getFolderDepth = (folder) => Math.max(String(folder || '').split('/').filter(Boolean).length - 1, 0)
</script>

<template>
  <aside
    v-if="props.mode === 'library'"
    class="admin-media-folder-panel admin-media__folders rounded border border-line bg-white p-3"
  >
    <button
      class="admin-media__folder-button flex w-full items-center justify-between rounded px-3 py-2 text-left text-sm font-semibold hover:bg-surface"
      :class="!props.activeFolder ? 'bg-[#15171a] text-white hover:bg-[#15171a]' : 'text-ink'"
      type="button"
      @click="emit('select-folder', '')"
      @dragover.prevent
      @drop.prevent="emit('drop-folder', '미분류')"
    >
      <span>전체 미디어</span>
      <span>{{ props.libraryCount }}</span>
    </button>

    <div class="admin-media__folder-list mt-3 grid gap-1">
      <div
        v-for="folder in props.folders"
        :key="folder"
        class="admin-media__folder-row flex items-stretch rounded"
        :class="props.activeFolder === folder ? 'bg-[#15171a] text-white' : 'text-ink hover:bg-surface'"
      >
        <button
          class="admin-media__folder-button flex min-w-0 flex-1 items-center justify-between rounded py-2 pr-3 text-left text-sm"
          :style="{ paddingLeft: `${12 + getFolderDepth(folder) * 14}px` }"
          type="button"
          @click="emit('select-folder', folder)"
          @dragover.prevent
          @drop.prevent="emit('drop-folder', folder)"
        >
          <span class="admin-media__folder-name min-w-0 truncate">{{ getFolderName(folder) }}</span>
          <span class="admin-media__folder-count shrink-0 text-xs opacity-70">{{ props.folderMediaCounts[folder] || 0 }}</span>
        </button>
        <AdminRowMoreMenu
          v-if="folder !== '미분류' && !isThumbnailFolderPath(folder)"
          v-model:open-menu-id="openMenuId"
          :item-id="getFolderMenuId(folder)"
          menu-label="폴더 메뉴"
          size="sm"
          class="mr-0.5 shrink-0"
          :inverse="props.activeFolder === folder"
          :busy="props.deletingFolder === folder"
        >
          <button
            class="admin-row-more-menu__item admin-row-more-menu__item--danger"
            type="button"
            role="menuitem"
            :disabled="props.deletingFolder === folder"
            @click="emit('remove-folder', folder)"
          >
            폴더 삭제
          </button>
        </AdminRowMoreMenu>
      </div>
    </div>

    <div class="admin-media__folder-actions mt-4 border-t border-line pt-4">
      <button
        class="admin-media__folder-add w-full rounded bg-[#15171a] px-3 py-2 text-xs font-semibold text-white"
        type="button"
        @click="emit('create-folder')"
      >
        폴더 추가
      </button>
    </div>
  </aside>

  <aside
    v-else
    class="admin-media-folder-panel admin-media__folders admin-media__folders--thumbnails rounded border border-line bg-white p-3"
  >
    <button
      class="admin-media__folder-button flex w-full items-center justify-between rounded px-3 py-2 text-left text-sm font-semibold bg-[#15171a] text-white hover:bg-[#15171a]"
      type="button"
      @click="emit('select-folder', '')"
    >
      <span>{{ props.activeSystemMediaTitle }}</span>
      <span>{{ props.activeSystemMediaCount }}</span>
    </button>
    <p class="admin-media__thumb-hint mt-4 text-xs leading-relaxed text-muted">
      {{ props.activeSystemMediaHint }}
    </p>
  </aside>
</template>