polarvo-layout 1.0.0

package/README.md

@@ -0,0 +1,70 @@
+<!-- 폴라보 사용 레이아웃 라이브러리 -->
+* components 폴더: 컴포넌트
+* core 폴더: 핵심 로직
+* utils 폴더: 기타 로직
+
+# 로컬에서 라이브러리 테스트하기
+1) 라이브러리(polavo-layout)에서 ```npm link```
+2) 라이브러리를 사용하려는 프로젝트에서 ```npm link polavo-layout```
+
+# 폴더구조
+src/
+├── index.js                # 메인 엔트리 포인트
+├── core/                   
+│   ├── engines/            # 엔진별 핵심 로직
+│   │   ├── LayoutEngine.js
+│   │   ├── DisplayEngine.js
+│   │   ├── FreeDropEngine.js
+│   │   └── GridDropEngine.js
+│   │   └── HistoryEngine.js
+│   ├── managers/           # 엔진 관리 및 통신
+│   │   ├── EngineManager.js
+│   │   ├── ApiManager.js
+│   │   └── EventBus.js
+├── library/                # 반응형 래퍼
+│   ├── LayoutLibrary.js
+│   ├── DisplayLibrary.js
+│   ├── FreeDropLibrary.js
+│   ├── GridDropLibrary.js
+│   ├── HistoryLibrary.js
+│   └── index.js
+├── configs/                # 설정
+│   ├── index.js
+│   ├── resources/          # 기본 설정
+│   │   ├── layoutResource.js
+│   │   ├── displayResource.js
+│   │   ├── elementResource.js
+│   │   ├── dropResource.js
+│   │   └── index.js
+├── components/             # vue 컴포넌트                   
+│   ├── Layout/
+│   │   ├── CanvasContainer.vue
+│   │   ├── PolarLayout.vue
+│   │   ├── BaseLayout.vue
+│   │   ├── FreeLayout.vue
+│   │   └── GridLayout.vue
+│   ├── IconBar/
+│   │   └── IconBar.vue
+│   ├── SideBar/
+│   │   ├── ElementSideBar.vue
+│   │   ├── LayoutSideBar.vue
+│   │   └── LayoutSettingSideBar.vue
+│   ├── FastMenu/
+│   │   ├── LayoutFastMenu.vue
+│   │   ├── DisplayFastMenu.vue
+│   │   ├── DesignFastMenu.vue
+│   │   └── HistoryFastMenu.vue
+│   └── MiniMenu/
+│   │   └── LayoutMiniMenu.vue
+├── utils/                  # 유틸리티                   
+│   ├── directives/
+│   │   ├── click-outside.js
+│   │   └── index.js
+│   └── injex.js
+├── icons/                  # 아이콘  
+│   ├── layout/
+│   ├── menu/
+│   ├── display/
+│   ├── action/
+│   └── history/
+└── styles.scss

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "polarvo-layout",
+  "version": "1.0.0",
+  "type": "module",
+  "author": "unigence <unigencelab@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/unigenceLab/polavo-layout.git"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": "./src/index.js",
+    "./styles.scss": "./src/styles.scss"
+  },
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
+    "tailwindcss": "^3.4.17",
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
+    "tailwindcss": "^3.4.17"
+  },
+  "scripts": {
+    "pack:local": "npm pack"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.8",
+    "lodash-es": "^4.17.22",
+    "v-calendar": "^3.1.2"
+  }
+}

package/src/components/FastMenu/DesignFastMenu.vue

@@ -0,0 +1,83 @@
+<template>
+  <!-- editor - sub right -->
+  <div id="fast-menu" class="flex items-center gap-2">
+    <div
+      class="text-sm px-2 py-0.5 rounded-md cursor-pointer hover:opacity-80"
+      :class="{ 'bg-blue-50 text-blue-700 font-semibold': activeDesign === 'option' }"
+      @click="clickDesignBar('option')"
+    >
+      옵션설정
+    </div>
+    <div
+      class="text-sm px-2 py-0.5 rounded-md cursor-pointer hover:opacity-80"
+      :class="{ 'bg-blue-50 text-blue-700 font-semibold': activeDesign === 'design' }"
+      @click="clickDesignBar('design')"
+    >
+      디자인설정
+    </div>
+    <div class="text-sm px-2 py-0.5 rounded-md cursor-pointer hover:opacity-80">더보기</div>
+  </div>
+</template>
+
+<script setup>
+import { toRefs, computed, inject, watch } from 'vue';
+
+const props = defineProps({
+  polavo: {
+    type: Object,
+    required: true,
+  },
+});
+const { activeDesign } = toRefs(props.polavo.display.state);
+const { setActiveDesign } = props.polavo.display;
+
+const { activeData, activeSection } = toRefs(props.polavo.layout.state);
+const sectionMode = computed(() => activeData.value?.mode);
+
+const { activeElement: freeActiveElement } = toRefs(props.polavo.freeDrop.state);
+const { activeElement: gridActiveElement } = toRefs(props.polavo.gridDrop.state);
+
+const activeElement = computed(() => {
+  if (sectionMode.value === 'free') {
+    return freeActiveElement.value;
+  } else if (sectionMode.value === 'grid') {
+    return gridActiveElement.value;
+  }
+  return null;
+});
+
+const selectedElement = inject('selectedElement');
+const selectedChildProps = inject('selectedChildProps');
+
+// const emits = defineEmits(['click:designBar']);
+function clickDesignBar(designMenu) {
+  if (designMenu == 'option') {
+    designMenu = activeElement.value?.type === 'inputForm' ? 'option-form' : 'option-default';
+  }
+
+  // selectedElement의 props 기본값 세팅
+  if (selectedElement.value) {
+    setComponentDefaults(selectedElement.value);
+  }
+
+  setActiveDesign(designMenu);
+}
+
+
+function setComponentDefaults(element) {
+  const child = props.polavo.components.getElement(activeSection.value, element.id);
+  if (!child) return;
+  selectedChildProps.value = Object.keys(child.$props);
+
+  //click한 컴포넌트의 props 객체 조회
+  const childProps = child.$options.props;
+
+  // props에 default 항목이 있는 경우, 함수인지 아닌지 확인 후 default 값 설정
+  Object.entries(childProps).forEach(([key, propInfo]) => {
+    if (propInfo.default !== undefined && (element[key] === undefined || element[key] === null)) {
+      // 함수인 경우 실행하여 기본값 설정
+      selectedElement.value[key] = typeof propInfo.default === 'function' ? propInfo.default() : propInfo.default;
+    }
+  });
+}
+</script>

package/src/components/FastMenu/DisplayFastMenu.vue

@@ -0,0 +1,65 @@
+<template>
+  <!-- editor - title left -->
+  <div id="fast-menu" class="flex items-center gap-4">
+    <div class="flex gap-2 text-gray-400">
+      <font-awesome-icon
+        :icon="['fas', 'display']"
+        class="cursor-pointer icon hover:opacity-70 active:text-blue-600"
+        :class="{ active: displayMode === 'desktop' }"
+        @click="setDisplayMode('desktop')"
+      />
+      <font-awesome-icon
+        :icon="['fas', 'mobile-screen']"
+        class="cursor-pointer icon hover:opacity-70 active:text-blue-600"
+        :class="{ active: displayMode === 'mobile' }"
+        @click="setDisplayMode('mobile')"
+      />
+    </div>
+    <div id="divider" class="w-px bg-gray-200 h-4"></div>
+    <div class="text-sm text-gray-400">
+      <input
+        type="number"
+        name="px"
+        aria-label="픽셀 단위 크기"
+        min="600"
+        max="2400"
+        step="50"
+        :value="displaySize.px"
+        class="border-b-2 pr-1 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"
+        @change="setDisplaySize('px', $event.target.value)"
+      />
+      px /
+      <input
+        type="number"
+        name="percent"
+        aria-label="퍼센트 단위 크기"
+        min="0"
+        max="100"
+        step="10"
+        :value="displaySize.percent"
+        class="border-b-2 pr-1 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"
+        @change="setDisplaySize('percent', $event.target.value)"
+      />
+      %
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { toRefs } from 'vue';
+
+const props = defineProps({
+  polavo: {
+    type: Object,
+    required: true,
+  },
+});
+const { displayMode, displaySize } = toRefs(props.polavo.display.state);
+const { setDisplayMode, setDisplaySize } = props.polavo.display;
+</script>
+
+<style scoped>
+.icon.active {
+  color: #1e40af; /* text-blue-800 */
+}
+</style>

package/src/components/FastMenu/HistoryFastMenu.vue

@@ -0,0 +1,12 @@
+<template>
+  <!-- editor - title right -->
+  <div id="fast-menu" class="flex gap-2 text-gray-400">
+    <UndoIcon class="size-5 cursor-pointer hover:opacity-70 active:text-blue-600" />
+    <RedoIcon class="size-5 cursor-pointer hover:opacity-70 active:text-blue-600" />
+  </div>
+</template>
+
+<script setup>
+import UndoIcon from '../../icons//history/UndoIcon.vue';
+import RedoIcon from '../../icons/history/RedoIcon.vue';
+</script>

package/src/components/FastMenu/LayoutFastMenu.vue

@@ -0,0 +1,98 @@
+<template>
+  <!-- editor - sub left -->
+  <div id="fast-menu" class="flex items-center gap-2" v-if="activeSection">
+    <div class="flex items-center gap-2 text-gray-400">
+      <div class="text-sm">{{ activeSection }}</div>
+      <button
+        class="mode text-xs border px-2 py-1 rounded-md hover:opacity-80"
+        :class="sectionMode"
+        @click="setSectionMode(sectionMode === 'grid' ? 'free' : 'grid')"
+      >
+        {{ sectionMode == 'grid' ? '그리드 모드' : '자유 모드' }}
+      </button>
+    </div>
+    <div id="divider" class="w-px bg-gray-200 h-4"></div>
+    <div>
+      <template v-if="sectionMode === 'free'">
+        <div class="flex items-center gap-2 text-gray-400">
+          <div class="text-sm">보조선 표시</div>
+          <input
+            type="checkbox"
+            :checked="activeData?.config?.showGuideLine"
+            @change="setSectionConfig('guideLine', $event.target.checked)"
+          />
+        </div>
+      </template>
+      <template v-else-if="sectionMode === 'grid'">
+        <div class="flex items-center gap-2 text-gray-400">
+          <div class="flex items-center gap-1">
+            <label class="text-sm" for="row-count">행 개수</label>
+            <input
+              type="number"
+              id="row-count"
+              min="1"
+              max="50"
+              class="text-sm text-center w-6 border-b-2 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"
+              :value="activeData?.config?.gridRows"
+              @change="setSectionConfig('row', $event.target.value)"
+            />
+          </div>
+          <div class="flex items-center gap-1">
+            <label class="text-sm" for="column-count">열 개수</label>
+            <input
+              type="number"
+              id="column-count"
+              min="1"
+              max="12"
+              class="text-sm text-center w-6 border-b-2 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"
+              :value="activeData?.config?.gridColumns"
+              @change="setSectionConfig('column', $event.target.value)"
+            />
+          </div>
+          <div class="flex items-center gap-1">
+            <label class="text-sm" for="gap-size">갭 크기</label>
+            <input
+              type="number"
+              id="gap-size"
+              min="0"
+              max="12"
+              class="text-sm text-center w-6 border-b-2 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"
+              :value="gapSize"
+              @change="setGapSize($event.target.value)"
+            />
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { toRefs, computed } from 'vue';
+
+const props = defineProps({
+  polavo: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { activeSection, activeData, gapSize } = toRefs(props.polavo.layout.state);
+const { setGapSize, setSectionMode, setSectionConfig } = props.polavo.layout;
+const sectionMode = computed(() => activeData.value?.mode);
+</script>
+
+<style scoped lang="scss">
+button.mode {
+  &.free {
+    background-color: #e0e7ff;
+    border-color: #6366f1;
+    color: #3730a3;
+  }
+  &.grid {
+    background-color: #d1fae5;
+    border-color: #10b981;
+    color: #065f46;
+  }
+}
+</style>

package/src/components/IconBar/IconBar.vue

@@ -0,0 +1,220 @@
+<template>
+  <aside id="icon-bar" class="flex flex-col items-center justify-between w-16 h-fit bg-white border-r border-gray-200">
+    <div
+      class="icon-wrapper logo border-b border-gray-200 text-2xl text-blue-800 p-0 w-full"
+      @click="openIconBar = !openIconBar"
+    >
+      <font-awesome-icon :icon="['fas', 'p']" class="h-16" />
+    </div>
+
+    <!-- 아이콘바 활성화 -->
+    <div class="h-[calc(100vh-61px)] flex flex-col justify-between" v-if="openIconBar">
+      <!-- 위쪽 아이콘 그룹 -->
+      <div class="top-side flex flex-col items-center gap-2 mt-4">
+        <div class="icon-group">
+          <div
+            class="icon-wrapper w-14 text-2xl text-gray-400 p-2"
+            title="프로젝트 관리"
+            :class="{ active: activeMenu === 'home' }"
+            @click="$router.push('/console/home')"
+          >
+            <font-awesome-icon :icon="['fas', 'folder']" />
+            <div class="text-xs text-center col-span-1 w-max">프로젝트</div>
+          </div>
+        </div>
+
+        <!-- 에디터 화면 아이콘 그룹 -->
+        <template v-if="isEditorPage">
+          <div id="divider" class="h-px bg-gray-200 w-8"></div>
+          <div class="icon-group">
+            <!-- 👂 내부설정에 테마설정 포함 -->
+            <div
+              class="icon-wrapper text-2xl text-gray-400 p-2 hover"
+              title="내부설정"
+              :class="{ active: activeMenu === 'projectSetting' }"
+              @click="polavo.display.setActiveMenu('projectSetting')"
+            >
+              <font-awesome-icon :icon="['fas', 'computer']" />
+              <div class="text-xs text-center col-span-1 w-max">내부설정</div>
+            </div>
+            <div
+              class="icon-wrapper text-2xl text-gray-400 p-2 hover"
+              title="DB관리"
+              :class="{ active: activeMenu === 'dbSetting' }"
+              @click="polavo.display.setActiveMenu('dbSetting')"
+            >
+              <font-awesome-icon :icon="['fas', 'database']" />
+              <div class="text-xs text-center col-span-1 w-max">DB관리</div>
+            </div>
+            <div
+              class="icon-wrapper text-2xl text-gray-400 p-2 hover"
+              title="화면관리"
+              :class="{ active: activeMenu === 'screenSetting' }"
+              @click="polavo.display.setActiveMenu('screenSetting')"
+            >
+              <font-awesome-icon :icon="['far', 'window-restore']" />
+              <div class="text-xs text-center col-span-1 w-max">화면관리</div>
+            </div>
+          </div>
+
+          <!-- 화면 선택 시 아이콘 그룹 -->
+          <template v-if="isScreen">
+            <div id="divider" class="h-px bg-gray-200 w-8"></div>
+            <div class="icon-group">
+              <div
+                class="icon-wrapper text-2xl text-gray-400 p-2 hover"
+                title="레이아웃"
+                :class="{ active: activeMenu === 'layout' }"
+                @click="polavo.display.setActiveMenu('layout')"
+              >
+                <font-awesome-icon :icon="['fas', 'table-columns']" />
+                <div class="text-xs text-center col-span-1 w-max">레이아웃</div>
+              </div>
+              <div
+              v-if="activeSection"
+                class="icon-wrapper text-2xl text-gray-400 p-2 hover"
+                title="요소"
+                :class="{ active: activeMenu === 'element' }"
+                @click="polavo.display.setActiveMenu('element')"
+              >
+                <font-awesome-icon :icon="['fas', 'shapes']" />
+                <div class="text-xs text-center col-span-1 w-max">요소</div>
+              </div>
+            </div>
+          </template>
+        </template>
+      </div>
+
+      <!-- 아래쪽 아이콘 그룹 -->
+      <div class="bottom-side flex flex-col items-center gap-2 mb-6">
+        <div
+          class="icon-wrapper text-2xl text-gray-400 p-2 hover"
+          title="환경설정"
+          :class="{ active: activeMenu === 'setting' }"
+          @click="$router.push('/console/setting')"
+        >
+          <font-awesome-icon :icon="['fas', 'gear']" />
+          <div class="text-xs text-center col-span-1 w-max">환경설정</div>
+        </div>
+        <!-- 계정설정 -->
+        <div class="relative" v-click-outside="() => (toggleUser = false)">
+          <div
+            class="icon-wrapper user w-12 bg-gray-200 text-xl text-gray-400 rounded-full p-3 hover"
+            :class="{ active: toggleUser }"
+            title="계정설정"
+            @click="toggleUser = !toggleUser"
+          >
+            <font-awesome-icon :icon="['fas', 'user']" />
+          </div>
+
+          <!-- 계정설정 토글메뉴 -->
+          <div
+            v-if="toggleUser"
+            class="bubble z-10 absolute -top-1/2 left-full ml-3 py-2 px-1 bg-white border border-gray-200 shadow-lg w-max text-center rounded-lg"
+          >
+            <ul class="space-y-1">
+              <li class="hover:bg-gray-100 py-1 px-6 cursor-pointer">계정설정</li>
+              <li class="hover:bg-gray-100 py-1 px-6 cursor-pointer" @click="logout()">로그아웃</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script setup>
+import { ref, toRefs } from 'vue';
+import { clickOutside } from '../../utils/index.js';
+
+const props = defineProps({
+  polavo: {
+    type: Object,
+    required: true,
+  },
+  isEditorPage: {
+    type: Boolean,
+    default: false,
+  },
+  isScreen: {
+    type: Boolean,
+    default: false,
+  },
+});
+const { activeMenu } = toRefs(props.polavo.display.state);
+const { activeSection } = toRefs(props.polavo.layout.state);
+
+// 디렉티브 등록
+const vClickOutside = clickOutside;
+
+// 상태 변수
+const openIconBar = ref(true); // 아이콘바 오픈여부
+const toggleUser = ref(false); // 유저 정보 오픈여부
+
+// 라이브러리
+import { useRouter } from 'vue-router';
+const router = useRouter();
+
+async function logout() {
+  const result = await props.polavo.userApi.logout();
+  if (result) {
+    // 로그아웃 성공 시 라우터 이동
+    //서브도메인 제거하기위해 아래와 같이 코드 짰습니다
+    router.push({ path: '/console/login' });
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.icon-wrapper {
+  aspect-ratio: 1 / 1; /* aspect-square */
+  display: grid; /* grid */
+  grid-template-rows: 1fr auto; /* grid-rows-[1fr_auto] */
+  place-items: center; /* place-items-center */
+  justify-content: center; /* justify-center */
+  gap: 0.25rem; /* gap-1 */
+  cursor: pointer; /* cursor-pointer */
+
+  &:hover:not(.logo):not(.active) {
+    width: 100%;
+    background-color: #f3f4f6; /* hover:bg-gray-100 */
+    border-radius: 0.5rem; /* rounded-lg */
+    color: #4b5563; /* text-gray-600 */
+  }
+
+  &:hover.user:not(.active),
+  &.active.user {
+    width: 100%;
+    background-color: #f3f4f6; /* bg-gray-100 */
+    border-radius: 9999px; /* rounded-full */
+    color: #4b5563; /* text-gray-600 */
+  }
+
+  &.active:not(.user) {
+    width: 100%;
+    background-color: #eff6ff; /* bg-blue-50 */
+    border-radius: 0.5rem; /* rounded-lg */
+    color: #1e40af; /* text-blue-800 */
+  }
+}
+
+.icon-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem; /* gap-2 */
+  padding-top: 0.5rem; /* py-2 */
+}
+
+.bubble::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: -8px;
+  transform: translateY(-50%);
+  border-width: 4px 8px 4px 0;
+  border-style: solid;
+  border-color: transparent white transparent transparent;
+  filter: drop-shadow(-1px 0 1px rgba(0, 0, 0, 0.1));
+}
+</style>