[폴더, 파일 구조 정리]

components/layout/ContentsWrapper.vue

@@ -1,95 +0,0 @@
-<template>
-    <div class="wrapper">
-      <!-- 경로 -->
-      <nav class="breadcrumb">{{ breadcrumb }}</nav>
-  
-      <!-- 화면 명 + 버튼 영역 -->
-      <header class="header">
-        <h1 class="title">{{ pageTitle }}</h1>
-        <div class="header-actions">
-          <slot name="actions" />
-        </div>
-      </header>
-  
-      <!-- 메인 콘텐츠 -->
-      <main class="content">
-        <slot />
-      </main>
-    </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { useRoute } from '#imports'
-  
-  const route = useRoute()
-  
-  // 경로(메뉴 경로)
-  const breadcrumb = computed(() => route.path)
-  
-  // 화면명(meta.title 값)
-  const pageTitle = computed(() => route.meta.title || 'Untitled Page')
-  </script>
-  
-  <style scoped>
-  .wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding: 16px;
-    background: #f9f9f9;
-    min-height: 100%;
-  }
-  
-  .breadcrumb {
-    font-size: 14px;
-    color: #666;
-  }
-  
-  /* 화면명과 버튼을 좌우 끝으로 배치 */
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  
-  .title {
-    margin: 0;
-    font-size: 20px;
-    font-weight: bold;
-  }
-  
-  .header-actions {
-    display: flex;
-    gap: 8px;
-  }
-  
-  .content {
-    flex: 1;
-    padding: 12px;
-    background: #fff;
-    border-radius: 8px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-  }
-
-  /* 버튼 공통 스타일 */
-.header-actions ::v-deep button {
-  background-color: #4CAF50;
-  color: white;
-  font-size: 14px;
-  padding: 6px 12px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.header-actions ::v-deep button:hover {
-  background-color: #45a049;
-}
-
-.header-actions ::v-deep button:disabled {
-  background-color: #ccc;
-  cursor: not-allowed;
-}
-
-  </style>
-  

components/layout/GlobalLoading.vue

@@ -1,220 +0,0 @@
-<template>
-  <Teleport to="body">
-    <Transition
-      name="loading-fade"
-      enter-active-class="transition-opacity duration-300"
-      leave-active-class="transition-opacity duration-300"
-      enter-from-class="opacity-0"
-      enter-to-class="opacity-100"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
-    >
-      <div
-        v-if="isLoading"
-        class="global-loading-overlay"
-        @click.self="handleOverlayClick"
-      >
-        <div class="loading-container">
-          <!-- 스피너 -->
-          <div class="loading-spinner">
-            <div class="spinner"></div>
-          </div>
-
-          <!-- 로딩 메시지 -->
-          <div class="loading-message">
-            <p class="message-text">{{ currentMessage }}</p>
-            <p v-if="loadingCount > 1" class="count-text">
-              ({{ loadingCount }}개 작업 진행 중)
-            </p>
-          </div>
-
-          <!-- 진행 중인 작업 목록 (개발 모드에서만) -->
-          <div
-            v-if="showDetails && loadingMessages.length > 1"
-            class="loading-details"
-          >
-            <details class="details">
-              <summary class="details-summary">진행 중인 작업 보기</summary>
-              <ul class="details-list">
-                <li
-                  v-for="(message, index) in loadingMessages"
-                  :key="index"
-                  class="details-item"
-                >
-                  {{ message }}
-                </li>
-              </ul>
-            </details>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  /** 오버레이 클릭 시 로딩 취소 허용 여부 */
-  allowCancel?: boolean;
-  /** 개발 모드에서 상세 정보 표시 여부 */
-  showDetails?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  allowCancel: false,
-  showDetails: false,
-});
-
-const { isLoading, currentMessage, loadingCount, loadingMessages, clearAll } =
-  useLoading();
-
-// 오버레이 클릭 처리
-const handleOverlayClick = () => {
-  if (props.allowCancel) {
-    clearAll();
-  }
-};
-</script>
-
-<style scoped>
-.global-loading-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-  backdrop-filter: blur(2px);
-}
-
-.loading-container {
-  background: white;
-  border-radius: 12px;
-  padding: 2rem;
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  text-align: center;
-  min-width: 200px;
-  max-width: 400px;
-}
-
-.loading-spinner {
-  margin-bottom: 1rem;
-}
-
-.spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid #f3f4f6;
-  border-top: 4px solid #3b82f6;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin: 0 auto;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.loading-message {
-  margin-bottom: 1rem;
-}
-
-.message-text {
-  font-size: 1.125rem;
-  font-weight: 500;
-  color: #374151;
-  margin: 0 0 0.5rem 0;
-}
-
-.count-text {
-  font-size: 0.875rem;
-  color: #6b7280;
-  margin: 0;
-}
-
-.loading-details {
-  margin-top: 1rem;
-  text-align: left;
-}
-
-.details {
-  font-size: 0.875rem;
-}
-
-.details-summary {
-  cursor: pointer;
-  color: #6b7280;
-  font-weight: 500;
-  list-style: none;
-  padding: 0.5rem 0;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.details-summary::-webkit-details-marker {
-  display: none;
-}
-
-.details-summary::before {
-  content: "▶";
-  display: inline-block;
-  margin-right: 0.5rem;
-  transition: transform 0.2s;
-}
-
-.details[open] .details-summary::before {
-  transform: rotate(90deg);
-}
-
-.details-list {
-  margin: 0.5rem 0 0 0;
-  padding: 0;
-  list-style: none;
-}
-
-.details-item {
-  padding: 0.25rem 0;
-  color: #6b7280;
-  border-bottom: 1px solid #f3f4f6;
-}
-
-.details-item:last-child {
-  border-bottom: none;
-}
-
-/* 다크 모드 지원 */
-@media (prefers-color-scheme: dark) {
-  .loading-container {
-    background: #1f2937;
-    color: #f9fafb;
-  }
-
-  .message-text {
-    color: #f9fafb;
-  }
-
-  .count-text,
-  .details-summary,
-  .details-item {
-    color: #d1d5db;
-  }
-
-  .details-summary {
-    border-bottom-color: #374151;
-  }
-
-  .details-item {
-    border-bottom-color: #374151;
-  }
-}
-</style>

components/layout/navigation/AppHeader.vue

@@ -18,7 +18,7 @@
     <!-- 사용자 정보 및 드롭다운 -->
     <div class="user-menu-wrapper">
       <div class="user-info" @click="toggleDropdown">
-        <span class="user-name">{{ userStore.name }}</span>
+        <span class="user-name">{{ userStore.user?.name }}</span>
         <div class="user-icon">
           <svg
             width="24"
@@ -36,10 +36,6 @@
         </div>
       </div>
       <div v-show="showDropdown" class="user-dropdown">
-        <div class="user-details">
-          <p class="user-email">{{ userStore.user?.email }}</p>
-          <p class="user-role">{{ userStore.isAdmin ? "관리자" : "사용자" }}</p>
-        </div>
         <div class="dropdown-divider"></div>
         <button class="logout-btn" @click="logout">
           <svg
@@ -61,12 +57,7 @@
   </header>
 </template>
 
-<script setup>
-import { ref, computed, onMounted, onBeforeUnmount } from "vue";
-import { useUserStore } from "~/stores/user";
-import { usePermissionsStore } from "~/stores/permissions";
-
-// defineModel 사용
+<script setup lang="ts">
 const modelValue = defineModel({ type: String, required: true });
 
 const showDropdown = ref(false);
@@ -84,7 +75,7 @@ const availableMenus = computed(() => {
 });
 
 // 메뉴 클릭 핸들러
-function onMenuClick(menu) {
+function onMenuClick(menu: string) {
   modelValue.value = menu;
 }
 
@@ -92,9 +83,9 @@ function toggleDropdown() {
   showDropdown.value = !showDropdown.value;
 }
 
-function handleClickOutside(event) {
+function handleClickOutside(event: MouseEvent) {
   const menu = document.querySelector(".user-menu-wrapper");
-  if (menu && !menu.contains(event.target)) {
+  if (menu && !menu.contains(event.target as Node)) {
     showDropdown.value = false;
   }
 }

components/layout/wrapper/ContentsWrapper.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="wrapper">
+    <!-- 경로 -->
+    <nav class="breadcrumb">{{ breadcrumb }}</nav>
+
+    <!-- 화면 명 + 버튼 영역 -->
+    <header class="header">
+      <h1 class="title">{{ pageTitle }}</h1>
+      <div class="header-actions">
+        <slot name="actions" />
+      </div>
+    </header>
+
+    <!-- 메인 콘텐츠 -->
+    <main class="content">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute();
+
+// 경로(메뉴 경로)
+const breadcrumb = computed(() => route.path);
+
+// 화면명(meta.title 값)
+const pageTitle = computed(() => route.meta.title || "Untitled Page");
+</script>
+
+<style scoped>
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 16px;
+  background: #f9f9f9;
+  min-height: 100%;
+}
+
+.breadcrumb {
+  font-size: 14px;
+  color: #666;
+}
+
+/* 화면명과 버튼을 좌우 끝으로 배치 */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.content {
+  flex: 1;
+  padding: 12px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* 버튼 공통 스타일 */
+.header-actions ::v-deep button {
+  background-color: #4caf50;
+  color: white;
+  font-size: 14px;
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.header-actions ::v-deep button:hover {
+  background-color: #45a049;
+}
+
+.header-actions ::v-deep button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+</style>

components/layout/wrapper/PopupWrapper.vue

@@ -1,81 +1,78 @@
-<template>
-  <customPopup v-model:show="show">
-    <div class="popup-content" :style="{ width, height }">
-      <!-- Top -->
-      <div class="popup-top">
-        <slot name="top"></slot>
-      </div>
-
-      <!-- Middle -->
-      <div class="popup-middle">
-        <slot name="middle"></slot>
-      </div>
-
-      <!-- Bottom -->
-      <div class="popup-bottom">
-        <button class="popup-close" @click="show = false">닫기</button>
-        <slot name="bottom"></slot>
-      </div>
-    </div>
-  </customPopup>
-</template>
-
-<script setup lang="ts">
-
-defineProps<{
-  width?: string
-  height?: string
-}>()
-
-// defineModel + 기본값 지정
-const show = defineModel('show', {type: Boolean, default:false});
-
-</script>
-
-
-<style scoped>
-.popup-content {
-  background: white;
-  display: flex;
-  flex-direction: column;
-  border-radius: 8px;
-  overflow: hidden;
-}
-.popup-top {
-  padding: 10px 20px;
-  font-weight: bold;
-  background: #f0f0f0;
-  border-bottom: 1px solid #ddd;
-}
-.popup-middle {
-  flex: 1;
-  padding: 20px;
-  overflow-y: auto;
-}
-.popup-bottom {
-  padding: 10px 20px;
-  display: flex;
-  justify-content: center; /* 중앙 정렬 */
-  gap: 10px;
-  background: #f9f9f9;
-  border-top: 1px solid #ddd;
-}
-
-/* ⭐️ bottom 슬롯 버튼 공통 스타일 */
-.popup-bottom ::v-deep(button) {
-  padding: 8px 16px;
-  border: none;
-  border-radius: 6px;
-  background: #007bff;
-  color: white;
-  cursor: pointer;
-}
-.popup-bottom ::v-deep(button:hover) {
-  background: #0056b3;
-}
-
-.popup-close {
-  background: #ddd !important;
-  color: black !important;
-}
-</style>
+<template>
+  <CommonPopup v-model:show="show">
+    <div class="popup-content" :style="{ width, height }">
+      <!-- Top -->
+      <div class="popup-top">
+        <slot name="top"></slot>
+      </div>
+
+      <!-- Middle -->
+      <div class="popup-middle">
+        <slot name="middle"></slot>
+      </div>
+
+      <!-- Bottom -->
+      <div class="popup-bottom">
+        <button class="popup-close" @click="show = false">닫기</button>
+        <slot name="bottom"></slot>
+      </div>
+    </div>
+  </CommonPopup>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: string;
+  height?: string;
+}>();
+
+// defineModel + 기본값 지정
+const show = defineModel("show", { type: Boolean, default: false });
+</script>
+
+<style scoped>
+.popup-content {
+  background: white;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.popup-top {
+  padding: 10px 20px;
+  font-weight: bold;
+  background: #f0f0f0;
+  border-bottom: 1px solid #ddd;
+}
+.popup-middle {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+}
+.popup-bottom {
+  padding: 10px 20px;
+  display: flex;
+  justify-content: center; /* 중앙 정렬 */
+  gap: 10px;
+  background: #f9f9f9;
+  border-top: 1px solid #ddd;
+}
+
+/* ⭐️ bottom 슬롯 버튼 공통 스타일 */
+.popup-bottom ::v-deep(button) {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 6px;
+  background: #007bff;
+  color: white;
+  cursor: pointer;
+}
+.popup-bottom ::v-deep(button:hover) {
+  background: #0056b3;
+}
+
+.popup-close {
+  background: #ddd !important;
+  color: black !important;
+}
+</style>