@dssp/project 1.0.0 → 1.0.2

package/dist-client/pages/lib/chatbot-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatbot-widget.js","sourceRoot":"","sources":["../../../client/pages/lib/chatbot-widget.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\n\n// API 상수\nconst CHATBOT_API_URL = 'https://korea-uni-chat-ui.ettisoft.com/chat'\n\ninterface SourceItem {\n  title: string\n  url: string\n}\n\ninterface ChatMessage {\n  id: string\n  text: string\n  isUser: boolean\n  timestamp: Date\n  sources?: SourceItem[]\n}\n\nexport class ChatbotWidget extends LitElement {\n  static styles = css`\n    :host {\n      position: fixed;\n      bottom: 40px;\n      right: 20px;\n      z-index: 1000;\n    }\n\n    .chatbot-container {\n      position: relative;\n    }\n\n    .chatbot-icon {\n      width: 60px;\n      height: 60px;\n      background: linear-gradient(135deg, var(--md-sys-color-tertiary, #b85d5a) 0%, var(--md-sys-color-primary) 100%);\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n      transition: all 0.3s ease;\n      border: none;\n      outline: none;\n    }\n\n    .chatbot-icon:hover {\n      transform: scale(1.1);\n      box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);\n    }\n\n    .chatbot-icon svg {\n      width: 28px;\n      height: 28px;\n      fill: white;\n    }\n\n    .chat-window {\n      position: absolute;\n      bottom: 80px;\n      right: 0;\n      width: 350px;\n      height: 500px;\n      background: white;\n      border-radius: 20px;\n      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      transform: translateY(20px) scale(0.95);\n      opacity: 0;\n      transition: all 0.3s ease;\n      border: 1px solid #e1e5e9;\n      pointer-events: none; /* 닫혀있을 때 클릭 차단 해제 */\n    }\n\n    .chat-window.open {\n      transform: translateY(0) scale(1);\n      opacity: 1;\n      pointer-events: auto; /* 열렸을 때 클릭 가능 */\n    }\n\n    .chat-header {\n      background: linear-gradient(135deg, var(--md-sys-color-tertiary, #b85d5a) 0%, var(--md-sys-color-primary) 100%);\n      color: white;\n      padding: 15px 20px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .chat-header h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n    }\n\n    .close-btn {\n      background: none;\n      border: none;\n      color: white;\n      cursor: pointer;\n      font-size: 32px;\n      padding: 0;\n      width: 36px;\n      height: 36px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 50%;\n      transition: background-color 0.2s ease;\n    }\n\n    .close-btn:hover {\n      background-color: rgba(255, 255, 255, 0.2);\n    }\n\n    .messages-container {\n      flex: 1;\n      overflow-y: auto;\n      padding: 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 15px;\n    }\n\n    .message {\n      display: flex;\n      align-items: flex-end;\n      gap: 10px;\n      max-width: 80%;\n    }\n\n    .message.user {\n      align-self: flex-end;\n      flex-direction: row-reverse;\n    }\n\n    .message.bot {\n      align-self: flex-start;\n    }\n\n    .message-bubble {\n      padding: 12px 16px;\n      border-radius: 18px;\n      font-size: 14px;\n      line-height: 1.4;\n      word-wrap: break-word;\n      position: relative;\n    }\n\n    .message.user .message-bubble {\n      background: linear-gradient(135deg, var(--md-sys-color-tertiary, #b85d5a) 0%, var(--md-sys-color-primary) 100%);\n      color: white;\n      border-bottom-right-radius: 4px;\n    }\n\n    .message.bot .message-bubble {\n      background: #f1f3f4;\n      color: #333;\n      border-bottom-left-radius: 4px;\n    }\n\n    .message-avatar {\n      width: 32px;\n      height: 32px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 12px;\n      font-weight: 600;\n      flex-shrink: 0;\n    }\n\n    .message.user .message-avatar {\n      background: linear-gradient(135deg, var(--md-sys-color-tertiary, #b85d5a) 0%, var(--md-sys-color-primary) 100%);\n      color: white;\n    }\n\n    .message.bot .message-avatar {\n      background: #e8eaf0;\n      color: #666;\n    }\n\n    .input-container {\n      padding: 20px;\n      border-top: 1px solid #e1e5e9;\n      display: flex;\n      gap: 10px;\n      align-items: center;\n    }\n\n    .message-input {\n      flex: 1;\n      border: 1px solid #e1e5e9;\n      border-radius: 25px;\n      padding: 12px 16px;\n      font-size: 14px;\n      outline: none;\n      transition: border-color 0.2s ease;\n    }\n\n    .message-input:focus {\n      border-color: var(--md-sys-color-primary);\n    }\n\n    .send-btn {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      background: linear-gradient(135deg, var(--md-sys-color-tertiary, #b85d5a) 0%, var(--md-sys-color-primary) 100%);\n      border: none;\n      color: white;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ease;\n    }\n\n    .send-btn:hover:not(:disabled) {\n      transform: scale(1.05);\n    }\n\n    .send-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .loading-indicator {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      color: #666;\n      font-size: 12px;\n    }\n\n    .loading-dots {\n      display: flex;\n      gap: 4px;\n    }\n\n    .loading-dot {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--md-sys-color-primary);\n      animation: loading 1.4s infinite ease-in-out;\n    }\n\n    .loading-dot:nth-child(1) {\n      animation-delay: -0.32s;\n    }\n    .loading-dot:nth-child(2) {\n      animation-delay: -0.16s;\n    }\n\n    @keyframes loading {\n      0%,\n      80%,\n      100% {\n        transform: scale(0);\n      }\n      40% {\n        transform: scale(1);\n      }\n    }\n\n    /* 스크롤바 스타일링 */\n    .messages-container::-webkit-scrollbar {\n      width: 6px;\n    }\n\n    .messages-container::-webkit-scrollbar-track {\n      background: #f1f1f1;\n      border-radius: 3px;\n    }\n\n    .messages-container::-webkit-scrollbar-thumb {\n      background: #c1c1c1;\n      border-radius: 3px;\n    }\n\n    .messages-container::-webkit-scrollbar-thumb:hover {\n      background: #a8a8a8;\n    }\n\n    /* 근거 버튼 */\n    .evidence-btn {\n      margin-top: 8px;\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      border: 1px solid #d6daf0;\n      background: #ffffff;\n      color: #3b4cca;\n      border-radius: 14px;\n      padding: 6px 10px;\n      font-size: 12px;\n      cursor: pointer;\n      transition:\n        background-color 0.2s ease,\n        border-color 0.2s ease;\n    }\n\n    .evidence-btn:hover {\n      background-color: #f4f6ff;\n      border-color: #c2c8ef;\n    }\n\n    /* 오버레이 */\n    .overlay {\n      position: fixed;\n      inset: 0;\n      background: rgba(0, 0, 0, 0.35);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.2s ease;\n      z-index: 1100; /* 챗봇보다 위 */\n    }\n\n    .overlay.open {\n      opacity: 1;\n      pointer-events: auto;\n    }\n\n    .overlay-panel {\n      width: min(520px, calc(100vw - 40px));\n      max-height: min(70vh, 560px);\n      background: #ffffff;\n      border-radius: 14px;\n      box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .overlay-header {\n      padding: 14px 16px;\n      background: linear-gradient(135deg, var(--md-sys-color-tertiary, #b85d5a) 0%, var(--md-sys-color-primary) 100%);\n      color: #ffffff;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .overlay-title {\n      font-weight: 600;\n      font-size: 16px;\n    }\n\n    .overlay-close {\n      background: none;\n      border: none;\n      color: #ffffff;\n      font-size: 26px;\n      width: 32px;\n      height: 32px;\n      border-radius: 50%;\n      cursor: pointer;\n    }\n\n    .overlay-body {\n      padding: 12px 16px 16px 16px;\n      overflow-y: auto;\n    }\n\n    .source-list {\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n      margin: 0;\n      padding: 0;\n      list-style: none;\n    }\n\n    .source-item {\n      border: 1px solid #e6e9f2;\n      border-radius: 10px;\n      padding: 10px 12px;\n      background: #f9fafc;\n    }\n\n    .source-link {\n      color: #1e3a8a;\n      text-decoration: none;\n      display: block;\n      word-break: break-all;\n    }\n\n    .source-link:hover {\n      text-decoration: underline;\n    }\n  `\n\n  static get properties() {\n    return {\n      isOpen: { type: Boolean },\n      messages: { type: Array },\n      inputValue: { type: String },\n      isLoading: { type: Boolean },\n      isSourcesOpen: { type: Boolean },\n      currentSources: { type: Array }\n    }\n  }\n\n  isOpen = false\n  messages: ChatMessage[] = []\n  inputValue = ''\n  isLoading = false\n  isSourcesOpen = false\n  currentSources: SourceItem[] = []\n\n  render() {\n    return html`\n      <div class=\"chatbot-container\">\n        <!-- 챗봇 아이콘 -->\n        <button class=\"chatbot-icon\" @click=\"${this.toggleChat}\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\n              d=\"M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z\"\n            />\n          </svg>\n        </button>\n\n        <!-- 대화창 -->\n        <div class=\"chat-window ${this.isOpen ? 'open' : ''}\">\n          <!-- 헤더 -->\n          <div class=\"chat-header\">\n            <h3>챗봇 도우미</h3>\n            <button class=\"close-btn\" @click=\"${this.toggleChat}\">×</button>\n          </div>\n\n          <!-- 메시지 영역 -->\n          <div class=\"messages-container\">\n            ${this.messages.length === 0\n              ? html`\n                  <div class=\"message bot\">\n                    <div class=\"message-avatar\">🤖</div>\n                    <div class=\"message-bubble\">안녕하세요! 무엇을 도와드릴까요?</div>\n                  </div>\n                `\n              : ''}\n            ${this.messages.map(\n              message => html`\n                <div class=\"message ${message.isUser ? 'user' : 'bot'}\">\n                  <div class=\"message-avatar\">${message.isUser ? '👤' : '🤖'}</div>\n                  <div class=\"message-bubble\">\n                    ${message.text}\n                    ${!message.isUser && message.sources && message.sources.length\n                      ? html`\n                          <div>\n                            <button class=\"evidence-btn\" @click=\"${() => this.openSourcesOverlay(message.sources || [])}\">\n                              근거 ${message.sources.length}개 보기\n                            </button>\n                          </div>\n                        `\n                      : ''}\n                  </div>\n                </div>\n              `\n            )}\n            ${this.isLoading\n              ? html`\n                  <div class=\"message bot\">\n                    <div class=\"message-avatar\">🤖</div>\n                    <div class=\"message-bubble\">\n                      <div class=\"loading-indicator\">\n                        <span>답변 중</span>\n                        <div class=\"loading-dots\">\n                          <div class=\"loading-dot\"></div>\n                          <div class=\"loading-dot\"></div>\n                          <div class=\"loading-dot\"></div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                `\n              : ''}\n          </div>\n\n          <!-- 입력 영역 -->\n          <div class=\"input-container\">\n            <input\n              class=\"message-input\"\n              type=\"text\"\n              placeholder=\"메시지를 입력하세요...\"\n              .value=\"${this.inputValue}\"\n              @input=\"${(e: Event) => (this.inputValue = (e.target as HTMLInputElement).value)}\"\n              @keypress=\"${this.handleKeyPress}\"\n              ?disabled=\"${this.isLoading}\"\n            />\n            <button class=\"send-btn\" @click=\"${this.sendMessage}\" ?disabled=\"${this.isLoading || !this.inputValue.trim()}\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <path d=\"M2.01 21L23 12 2.01 3 2 10l15 2-15 2z\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n        <!-- 근거 오버레이 -->\n        <div class=\"overlay ${this.isSourcesOpen ? 'open' : ''}\" @click=\"${this.closeSourcesOverlay}\">\n          <div class=\"overlay-panel\" @click=\"${(e: Event) => e.stopPropagation()}\">\n            <div class=\"overlay-header\">\n              <div class=\"overlay-title\">근거 ${this.currentSources.length}개</div>\n              <button class=\"overlay-close\" @click=\"${this.closeSourcesOverlay}\">×</button>\n            </div>\n            <div class=\"overlay-body\">\n              <ul class=\"source-list\">\n                ${this.currentSources.map(\n                  (s, idx) =>\n                    html` <li class=\"source-item\">\n                      <a class=\"source-link\" href=\"${s.url}\" target=\"_blank\" rel=\"noopener noreferrer\"\n                        >[#${idx + 1}] ${s.title}</a\n                      >\n                    </li>`\n                )}\n              </ul>\n            </div>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private boundHandleEscapeKey = this.handleEscapeKey.bind(this)\n\n  connectedCallback() {\n    super.connectedCallback()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    // 컴포넌트가 제거될 때 이벤트 리스너 정리\n    document.removeEventListener('keydown', this.boundHandleEscapeKey)\n  }\n\n  handleEscapeKey(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      if (this.isSourcesOpen) {\n        this.isSourcesOpen = false\n      } else if (this.isOpen) {\n        this.isOpen = false\n      }\n    }\n  }\n\n  toggleChat() {\n    this.isOpen = !this.isOpen\n    if (this.isOpen) {\n      // 챗봇이 열릴 때 ESC 키 이벤트 리스너 추가\n      document.addEventListener('keydown', this.boundHandleEscapeKey)\n      // 챗봇이 열릴 때 스크롤을 맨 아래로\n      this.requestUpdate()\n      setTimeout(() => this.scrollToBottom(), 100)\n    } else {\n      // 챗봇이 닫힐 때 ESC 키 이벤트 리스너 제거\n      document.removeEventListener('keydown', this.boundHandleEscapeKey)\n      this.isSourcesOpen = false\n      this.currentSources = []\n    }\n  }\n\n  scrollToBottom() {\n    const messagesContainer = this.shadowRoot?.querySelector('.messages-container') as HTMLElement\n    if (messagesContainer) {\n      messagesContainer.scrollTop = messagesContainer.scrollHeight\n    }\n  }\n\n  async sendMessage() {\n    if (!this.inputValue.trim() || this.isLoading) return\n\n    const userMessage: ChatMessage = {\n      id: Date.now().toString(),\n      text: this.inputValue.trim(),\n      isUser: true,\n      timestamp: new Date()\n    }\n\n    this.messages = [...this.messages, userMessage]\n    const messageText = this.inputValue.trim()\n    this.inputValue = ''\n    this.isLoading = true\n\n    // 사용자 메시지 추가 후 스크롤을 맨 아래로\n    setTimeout(() => this.scrollToBottom(), 50)\n\n    // 포커스 유지를 위해 input 요소 참조 저장\n    const input = this.shadowRoot?.querySelector('.message-input') as HTMLInputElement\n\n    try {\n      // API 호출\n      const response = await fetch(CHATBOT_API_URL, {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify({ query: messageText, top_k: 6 })\n      })\n\n      if (!response.ok) {\n        throw new Error(`HTTP ${response.status}`)\n      }\n\n      const data = await response.json()\n\n      const botMessage: ChatMessage = {\n        id: (Date.now() + 1).toString(),\n        text: data?.answer?.trim() || '죄송합니다. 응답을 처리할 수 없습니다.',\n        isUser: false,\n        timestamp: new Date(),\n        sources: data?.sources || []\n      }\n\n      this.messages = [...this.messages, botMessage]\n      // 봇 메시지 추가 후 스크롤을 맨 아래로\n      setTimeout(() => this.scrollToBottom(), 50)\n    } catch (error) {\n      const errorMessage: ChatMessage = {\n        id: (Date.now() + 1).toString(),\n        text: '죄송합니다. 일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',\n        isUser: false,\n        timestamp: new Date()\n      }\n      this.messages = [...this.messages, errorMessage]\n      // 에러 메시지 추가 후 스크롤을 맨 아래로\n      setTimeout(() => this.scrollToBottom(), 50)\n    } finally {\n      this.isLoading = false\n      // 로딩 완료 후 포커스 복원\n      setTimeout(() => {\n        if (input) {\n          input.focus()\n        }\n      }, 100)\n    }\n  }\n\n  openSourcesOverlay(sources: SourceItem[]) {\n    if (!sources || sources.length === 0) return\n    this.currentSources = sources\n    this.isSourcesOpen = true\n  }\n\n  closeSourcesOverlay() {\n    this.isSourcesOpen = false\n    this.currentSources = []\n  }\n\n  handleKeyPress(event: KeyboardEvent) {\n    if (event.key === 'Enter' && !event.shiftKey) {\n      event.preventDefault()\n      this.sendMessage()\n    }\n  }\n}\n\ncustomElements.define('chatbot-widget', ChatbotWidget)\n"]}

package/dist-client/pages/lib/select2-component.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+export declare class Select2Component extends LitElement {
+    static styles: import("lit").CSSResult;
+    placeholder: string;
+    options: Array<{
+        name: string;
+        value: string;
+    }>;
+    selectedValues: string[];
+    showOptions: boolean;
+    get selectedItems(): ({
+        name: string;
+        value: string;
+    } | undefined)[];
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleOutsideClick;
+    private _toggleOptions;
+    private _handleSelect;
+    private _handleRemove;
+    private _dispatchEvent;
+}

package/dist-client/pages/lib/select2-component.js

@@ -0,0 +1,181 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+let Select2Component = class Select2Component extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.placeholder = '';
+        this.options = [];
+        this.selectedValues = [];
+        this.showOptions = false;
+        this._handleOutsideClick = (event) => {
+            const path = event.composedPath();
+            if (!path.includes(this)) {
+                this.showOptions = false;
+            }
+        };
+    }
+    get selectedItems() {
+        return this.selectedValues.map(id => this.options.find(option => option.value === id)).filter(Boolean);
+    }
+    render() {
+        return html `
+      <div select-container>
+        <div tags @click="${this._toggleOptions}">${this.placeholder}</div>
+        ${this.showOptions
+            ? html `
+              <div options>
+                ${this.options.map(option => html `
+                    <div
+                      option
+                      ?selected=${this.selectedValues.includes(option.value)}
+                      @click=${() => this._handleSelect(option.value)}
+                    >
+                      ${option.name}
+                    </div>
+                  `)}
+              </div>
+            `
+            : ''}
+      </div>
+
+      <div selected-tags>
+        ${this.selectedItems.map((tag) => html `
+            <div tag @click=${() => this._handleRemove(tag.value)}>
+              ${tag.name}
+              <span tag-close>&times;</span>
+            </div>
+          `)}
+      </div>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this._handleOutsideClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this._handleOutsideClick);
+    }
+    _toggleOptions() {
+        this.showOptions = !this.showOptions;
+    }
+    _handleSelect(optionValue) {
+        if (this.selectedValues.includes(optionValue)) {
+            // 이미 선택된 옵션을 선택한 경우 해제
+            this.selectedValues = this.selectedValues.filter(value => value !== optionValue);
+        }
+        else {
+            // 선택되지 않은 옵션 추가
+            this.selectedValues = [...this.selectedValues, optionValue];
+        }
+        this.showOptions = false;
+        this._dispatchEvent(this.selectedValues);
+    }
+    _handleRemove(tagValue) {
+        this.selectedValues = this.selectedValues.filter(value => value !== tagValue);
+        this._dispatchEvent(this.selectedValues);
+    }
+    _dispatchEvent(selectedValues) {
+        this.dispatchEvent(new CustomEvent('selection-changed', {
+            detail: { selectedValues }, // ID 배열을 부모로 전달
+            bubbles: true,
+            composed: true
+        }));
+    }
+};
+Select2Component.styles = css `
+    div[select-container] {
+      position: relative;
+      border: 1px solid rgba(51, 51, 51, 0.2);
+      border-radius: 5px;
+      padding: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+      font-size: 14px;
+      color: var(--md-sys-color-primary);
+    }
+    div[select-container]:focus {
+      border: 1px solid #1f7fd9;
+    }
+
+    div[dropdown] {
+      border: 1px solid #ccc;
+      padding: var(--spacing-small, 4px);
+      cursor: pointer;
+    }
+
+    div[options] {
+      position: absolute;
+      left: 0;
+      top: 30px;
+      min-width: 50%;
+      border: 1px solid #ccc;
+      background-color: var(--md-sys-color-surface-tint);
+      color: var(--md-sys-color-on-primary);
+      max-height: 150px;
+      overflow-y: auto;
+      display: block;
+      z-index: 1;
+    }
+
+    div[option] {
+      padding: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+      cursor: pointer;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+    }
+    div[option]:last-child {
+      border-bottom: none;
+    }
+
+    div[option]:hover {
+      background-color: var(--md-sys-color-tertiary-container);
+    }
+
+    div[option][selected] {
+      background-color: var(--md-sys-color-tertiary-container);
+      font-weight: bold;
+      color: var(--md-sys-color-on-primary);
+    }
+
+    div[selected-tags] {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-small, 4px);
+      margin-top: var(--spacing-small, 4px);
+    }
+
+    div[tag] {
+      background-color: #2e79be;
+      color: white;
+      padding: var(--spacing-tiny, 2px) var(--spacing-medium, 8px);
+      border-radius: 20px;
+      font-size: 12px;
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    span[tag-close] {
+      margin-left: var(--spacing-small, 4px);
+    }
+  `;
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Select2Component.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], Select2Component.prototype, "options", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], Select2Component.prototype, "selectedValues", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], Select2Component.prototype, "showOptions", void 0);
+Select2Component = __decorate([
+    customElement('select2-component')
+], Select2Component);
+export { Select2Component };
+//# sourceMappingURL=select2-component.js.map

package/dist-client/pages/lib/select2-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select2-component.js","sourceRoot":"","sources":["../../../client/pages/lib/select2-component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\n@customElement('select2-component')\nexport class Select2Component extends LitElement {\n  static styles = css`\n    div[select-container] {\n      position: relative;\n      border: 1px solid rgba(51, 51, 51, 0.2);\n      border-radius: 5px;\n      padding: var(--spacing-small, 4px) var(--spacing-medium, 8px);\n      font-size: 14px;\n      color: var(--md-sys-color-primary);\n    }\n    div[select-container]:focus {\n      border: 1px solid #1f7fd9;\n    }\n\n    div[dropdown] {\n      border: 1px solid #ccc;\n      padding: var(--spacing-small, 4px);\n      cursor: pointer;\n    }\n\n    div[options] {\n      position: absolute;\n      left: 0;\n      top: 30px;\n      min-width: 50%;\n      border: 1px solid #ccc;\n      background-color: var(--md-sys-color-surface-tint);\n      color: var(--md-sys-color-on-primary);\n      max-height: 150px;\n      overflow-y: auto;\n      display: block;\n      z-index: 1;\n    }\n\n    div[option] {\n      padding: var(--spacing-small, 4px) var(--spacing-medium, 8px);\n      cursor: pointer;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.4);\n    }\n    div[option]:last-child {\n      border-bottom: none;\n    }\n\n    div[option]:hover {\n      background-color: var(--md-sys-color-tertiary-container);\n    }\n\n    div[option][selected] {\n      background-color: var(--md-sys-color-tertiary-container);\n      font-weight: bold;\n      color: var(--md-sys-color-on-primary);\n    }\n\n    div[selected-tags] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--spacing-small, 4px);\n      margin-top: var(--spacing-small, 4px);\n    }\n\n    div[tag] {\n      background-color: #2e79be;\n      color: white;\n      padding: var(--spacing-tiny, 2px) var(--spacing-medium, 8px);\n      border-radius: 20px;\n      font-size: 12px;\n      display: inline-flex;\n      align-items: center;\n      cursor: pointer;\n    }\n\n    span[tag-close] {\n      margin-left: var(--spacing-small, 4px);\n    }\n  `\n\n  @property({ type: String }) placeholder: string = ''\n  @property({ type: Array }) options: Array<{ name: string; value: string }> = []\n  @property({ type: Array }) selectedValues: string[] = []\n\n  @state() showOptions: boolean = false\n\n  get selectedItems() {\n    return this.selectedValues.map(id => this.options.find(option => option.value === id)).filter(Boolean)\n  }\n\n  render() {\n    return html`\n      <div select-container>\n        <div tags @click=\"${this._toggleOptions}\">${this.placeholder}</div>\n        ${this.showOptions\n          ? html`\n              <div options>\n                ${this.options.map(\n                  option => html`\n                    <div\n                      option\n                      ?selected=${this.selectedValues.includes(option.value)}\n                      @click=${() => this._handleSelect(option.value)}\n                    >\n                      ${option.name}\n                    </div>\n                  `\n                )}\n              </div>\n            `\n          : ''}\n      </div>\n\n      <div selected-tags>\n        ${this.selectedItems.map(\n          (tag: any) => html`\n            <div tag @click=${() => this._handleRemove(tag.value)}>\n              ${tag!.name}\n              <span tag-close>&times;</span>\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    document.addEventListener('click', this._handleOutsideClick)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    document.removeEventListener('click', this._handleOutsideClick)\n  }\n\n  private _handleOutsideClick = (event: MouseEvent) => {\n    const path = event.composedPath()\n    if (!path.includes(this)) {\n      this.showOptions = false\n    }\n  }\n\n  private _toggleOptions() {\n    this.showOptions = !this.showOptions\n  }\n\n  private _handleSelect(optionValue: string) {\n    if (this.selectedValues.includes(optionValue)) {\n      // 이미 선택된 옵션을 선택한 경우 해제\n      this.selectedValues = this.selectedValues.filter(value => value !== optionValue)\n    } else {\n      // 선택되지 않은 옵션 추가\n      this.selectedValues = [...this.selectedValues, optionValue]\n    }\n\n    this.showOptions = false\n    this._dispatchEvent(this.selectedValues)\n  }\n\n  private _handleRemove(tagValue: string) {\n    this.selectedValues = this.selectedValues.filter(value => value !== tagValue)\n    this._dispatchEvent(this.selectedValues)\n  }\n\n  private _dispatchEvent(selectedValues: string[]) {\n    this.dispatchEvent(\n      new CustomEvent('selection-changed', {\n        detail: { selectedValues }, // ID 배열을 부모로 전달\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}

package/dist-client/pages/lib/waether.d.ts

@@ -0,0 +1,7 @@
+export default function _getWeather(latitude: number, longitude: number): Promise<{
+    rain: number;
+    temperature: number;
+    humidity: number;
+    windDirection: string;
+    windSpeed: number;
+}>;

package/dist-client/pages/lib/waether.js

@@ -0,0 +1,156 @@
+const API_KEY = '9epdR01s19phfu%2B3%2F0elTxTi92Nibl3qEO1HSm2QydrWOlrDqyNn9qzeQRJ3jPOh3hV8TesHg1L%2BQ9D6UOPmWQ%3D%3D';
+const URL = 'https://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getVilageFcst';
+const NUM_OF_ROWS = 12;
+const DATA_TYPE = 'JSON';
+export default async function _getWeather(latitude, longitude) {
+    var _a;
+    const { nx, ny } = _getIndexByLatAndLong(latitude, longitude);
+    const { base_date, base_time } = _getTodayAndHour();
+    const result = await fetch(`${URL}?serviceKey=${API_KEY}&base_date=${base_date}&base_time=${base_time}&nx=${nx}&ny=${ny}&pageNo=1&numOfRows=${NUM_OF_ROWS}&dataType=${DATA_TYPE}`);
+    let rain = 0;
+    let temperature = 0;
+    let humidity = 0;
+    let windDirection = '';
+    let windSpeed = 0;
+    if (result.status == 200) {
+        let weather = await result.json().then(data => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.response) === null || _a === void 0 ? void 0 : _a.body; });
+        weather = (_a = weather === null || weather === void 0 ? void 0 : weather.items) === null || _a === void 0 ? void 0 : _a.item;
+        for (let key in weather) {
+            const data = (weather === null || weather === void 0 ? void 0 : weather[key]) || {};
+            if (data.category === 'POP') {
+                rain = data.fcstValue;
+            }
+            if (data.category === 'REH') {
+                humidity = data.fcstValue;
+            }
+            if (data.category === 'TMP') {
+                temperature = data.fcstValue;
+            }
+            if (data.category === 'VEC') {
+                windDirection = _getWindDirectionByValue(data.fcstValue);
+            }
+            if (data.category === 'WSD') {
+                windSpeed = data.fcstValue;
+            }
+        }
+        console.log('weather :', weather);
+    }
+    return { rain, temperature, humidity, windDirection, windSpeed };
+}
+const RE = 6371.00877; // 지구 반경(km)
+const GRID = 5.0; // 격자 간격(km)
+const SLAT1 = 30.0; // 투영 위도1(degree)
+const SLAT2 = 60.0; // 투영 위도2(degree)
+const OLON = 126.0; // 기준점 경도(degree)
+const OLAT = 38.0; // 기준점 위도(degree)
+const XO = 43; // 기준점 X좌표(GRID)
+const YO = 136; // 기1준점 Y좌표(GRID)
+// 위경도 -> 기상청 좌표
+function _getIndexByLatAndLong(latitude, longitude) {
+    const DEGRAD = Math.PI / 180.0;
+    const re = RE / GRID;
+    const slat1 = SLAT1 * DEGRAD;
+    const slat2 = SLAT2 * DEGRAD;
+    const olon = OLON * DEGRAD;
+    const olat = OLAT * DEGRAD;
+    let sn = Math.tan(Math.PI * 0.25 + slat2 * 0.5) / Math.tan(Math.PI * 0.25 + slat1 * 0.5);
+    sn = Math.log(Math.cos(slat1) / Math.cos(slat2)) / Math.log(sn);
+    let sf = Math.tan(Math.PI * 0.25 + slat1 * 0.5);
+    sf = (Math.pow(sf, sn) * Math.cos(slat1)) / sn;
+    let ro = Math.tan(Math.PI * 0.25 + olat * 0.5);
+    ro = (re * sf) / Math.pow(ro, sn);
+    let ra = Math.tan(Math.PI * 0.25 + latitude * DEGRAD * 0.5);
+    ra = (re * sf) / Math.pow(ra, sn);
+    let theta = longitude * DEGRAD - olon;
+    if (theta > Math.PI)
+        theta -= 2.0 * Math.PI;
+    if (theta < -Math.PI)
+        theta += 2.0 * Math.PI;
+    theta *= sn;
+    return {
+        nx: Math.floor(ra * Math.sin(theta) + XO + 0.5),
+        ny: Math.floor(ro - ra * Math.cos(theta) + YO + 0.5),
+        latitude,
+        longitude
+    };
+}
+function _getTodayAndHour() {
+    const now = new Date();
+    const todayDate = now.toISOString().slice(0, 10).replace(/-/g, '');
+    const yesterday = new Date(now);
+    yesterday.setDate(yesterday.getDate() - 1);
+    const yesterdayDate = yesterday.toISOString().slice(0, 10).replace(/-/g, '');
+    // 1일 총 8번 데이터가 업데이트 된다. (0200, 0500, 0800, 1100, 1400, 1700, 2000, 2300)
+    let base_date;
+    let base_time;
+    if (now.getHours() < 2 || (now.getHours() === 2 && now.getMinutes() <= 10)) {
+        base_date = yesterdayDate;
+        base_time = '2300';
+    }
+    else if (now.getHours() < 5 || (now.getHours() === 5 && now.getMinutes() <= 10)) {
+        base_date = todayDate;
+        base_time = '0200';
+    }
+    else if (now.getHours() < 8 || (now.getHours() === 8 && now.getMinutes() <= 10)) {
+        base_date = todayDate;
+        base_time = '0500';
+    }
+    else if (now.getHours() <= 11 || now.getMinutes() <= 10) {
+        base_date = todayDate;
+        base_time = '0800';
+    }
+    else if (now.getHours() < 14 || (now.getHours() === 14 && now.getMinutes() <= 10)) {
+        base_date = todayDate;
+        base_time = '1100';
+    }
+    else if (now.getHours() < 17 || (now.getHours() === 17 && now.getMinutes() <= 10)) {
+        base_date = todayDate;
+        base_time = '1400';
+    }
+    else if (now.getHours() < 20 || (now.getHours() === 20 && now.getMinutes() <= 10)) {
+        base_date = todayDate;
+        base_time = '1700';
+    }
+    else if (now.getHours() < 23 || (now.getHours() === 23 && now.getMinutes() <= 10)) {
+        base_date = todayDate;
+        base_time = '2000';
+    }
+    else {
+        base_date = todayDate;
+        base_time = '2300';
+    }
+    return { base_time, base_date };
+}
+const windTable = {
+    0: 'N',
+    1: 'NNE',
+    2: 'NE',
+    3: 'ENE',
+    4: 'E',
+    5: 'ESE',
+    6: 'SE',
+    7: 'SSE',
+    8: 'S',
+    9: 'SSW',
+    10: 'SW',
+    11: 'WSW',
+    12: 'W',
+    13: 'WNW',
+    14: 'NW',
+    15: 'NNW',
+    16: 'N'
+};
+const directoinMapping = {
+    N: '북',
+    S: '남',
+    E: '동',
+    W: '서'
+};
+function _getWindDirectionByValue(value) {
+    var _a;
+    const calc = Math.floor((Number(value) + 22.5 * 0.5) / 22.5) || null;
+    if (calc === null)
+        return '';
+    return ((_a = windTable[calc]) === null || _a === void 0 ? void 0 : _a.replace(/[NSEW]/g, match => directoinMapping[match])) || '';
+}
+//# sourceMappingURL=waether.js.map

package/dist-client/pages/lib/waether.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"waether.js","sourceRoot":"","sources":["../../../client/pages/lib/waether.ts"],"names":[],"mappings":"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","sourcesContent":["const API_KEY = '9epdR01s19phfu%2B3%2F0elTxTi92Nibl3qEO1HSm2QydrWOlrDqyNn9qzeQRJ3jPOh3hV8TesHg1L%2BQ9D6UOPmWQ%3D%3D'\nconst URL = 'https://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getVilageFcst'\nconst NUM_OF_ROWS = 12\nconst DATA_TYPE = 'JSON'\n\nexport default async function _getWeather(latitude: number, longitude: number) {\n  const { nx, ny } = _getIndexByLatAndLong(latitude, longitude)\n  const { base_date, base_time } = _getTodayAndHour()\n  const result = await fetch(\n    `${URL}?serviceKey=${API_KEY}&base_date=${base_date}&base_time=${base_time}&nx=${nx}&ny=${ny}&pageNo=1&numOfRows=${NUM_OF_ROWS}&dataType=${DATA_TYPE}`\n  )\n\n  let rain = 0\n  let temperature = 0\n  let humidity = 0\n  let windDirection = ''\n  let windSpeed = 0\n\n  if (result.status == 200) {\n    let weather = await result.json().then(data => data?.response?.body)\n    weather = weather?.items?.item\n\n    for (let key in weather) {\n      const data = weather?.[key] || {}\n\n      if (data.category === 'POP') {\n        rain = data.fcstValue\n      }\n      if (data.category === 'REH') {\n        humidity = data.fcstValue\n      }\n      if (data.category === 'TMP') {\n        temperature = data.fcstValue\n      }\n      if (data.category === 'VEC') {\n        windDirection = _getWindDirectionByValue(data.fcstValue)\n      }\n      if (data.category === 'WSD') {\n        windSpeed = data.fcstValue\n      }\n    }\n\n    console.log('weather :', weather)\n  }\n\n  return { rain, temperature, humidity, windDirection, windSpeed }\n}\n\nconst RE = 6371.00877 // 지구 반경(km)\nconst GRID = 5.0 // 격자 간격(km)\nconst SLAT1 = 30.0 // 투영 위도1(degree)\nconst SLAT2 = 60.0 // 투영 위도2(degree)\nconst OLON = 126.0 // 기준점 경도(degree)\nconst OLAT = 38.0 // 기준점 위도(degree)\nconst XO = 43 // 기준점 X좌표(GRID)\nconst YO = 136 // 기1준점 Y좌표(GRID)\n\n// 위경도 -> 기상청 좌표\nfunction _getIndexByLatAndLong(latitude: number, longitude: number) {\n  const DEGRAD = Math.PI / 180.0\n  const re = RE / GRID\n  const slat1 = SLAT1 * DEGRAD\n  const slat2 = SLAT2 * DEGRAD\n  const olon = OLON * DEGRAD\n  const olat = OLAT * DEGRAD\n\n  let sn = Math.tan(Math.PI * 0.25 + slat2 * 0.5) / Math.tan(Math.PI * 0.25 + slat1 * 0.5)\n  sn = Math.log(Math.cos(slat1) / Math.cos(slat2)) / Math.log(sn)\n  let sf = Math.tan(Math.PI * 0.25 + slat1 * 0.5)\n  sf = (Math.pow(sf, sn) * Math.cos(slat1)) / sn\n  let ro = Math.tan(Math.PI * 0.25 + olat * 0.5)\n  ro = (re * sf) / Math.pow(ro, sn)\n  let ra = Math.tan(Math.PI * 0.25 + latitude * DEGRAD * 0.5)\n  ra = (re * sf) / Math.pow(ra, sn)\n  let theta = longitude * DEGRAD - olon\n  if (theta > Math.PI) theta -= 2.0 * Math.PI\n  if (theta < -Math.PI) theta += 2.0 * Math.PI\n  theta *= sn\n\n  return {\n    nx: Math.floor(ra * Math.sin(theta) + XO + 0.5),\n    ny: Math.floor(ro - ra * Math.cos(theta) + YO + 0.5),\n    latitude,\n    longitude\n  }\n}\n\nfunction _getTodayAndHour() {\n  const now = new Date()\n  const todayDate = now.toISOString().slice(0, 10).replace(/-/g, '')\n  const yesterday = new Date(now)\n  yesterday.setDate(yesterday.getDate() - 1)\n  const yesterdayDate = yesterday.toISOString().slice(0, 10).replace(/-/g, '')\n\n  // 1일 총 8번 데이터가 업데이트 된다. (0200, 0500, 0800, 1100, 1400, 1700, 2000, 2300)\n  let base_date\n  let base_time\n\n  if (now.getHours() < 2 || (now.getHours() === 2 && now.getMinutes() <= 10)) {\n    base_date = yesterdayDate\n    base_time = '2300'\n  } else if (now.getHours() < 5 || (now.getHours() === 5 && now.getMinutes() <= 10)) {\n    base_date = todayDate\n    base_time = '0200'\n  } else if (now.getHours() < 8 || (now.getHours() === 8 && now.getMinutes() <= 10)) {\n    base_date = todayDate\n    base_time = '0500'\n  } else if (now.getHours() <= 11 || now.getMinutes() <= 10) {\n    base_date = todayDate\n    base_time = '0800'\n  } else if (now.getHours() < 14 || (now.getHours() === 14 && now.getMinutes() <= 10)) {\n    base_date = todayDate\n    base_time = '1100'\n  } else if (now.getHours() < 17 || (now.getHours() === 17 && now.getMinutes() <= 10)) {\n    base_date = todayDate\n    base_time = '1400'\n  } else if (now.getHours() < 20 || (now.getHours() === 20 && now.getMinutes() <= 10)) {\n    base_date = todayDate\n    base_time = '1700'\n  } else if (now.getHours() < 23 || (now.getHours() === 23 && now.getMinutes() <= 10)) {\n    base_date = todayDate\n    base_time = '2000'\n  } else {\n    base_date = todayDate\n    base_time = '2300'\n  }\n\n  return { base_time, base_date }\n}\n\nconst windTable = {\n  0: 'N',\n  1: 'NNE',\n  2: 'NE',\n  3: 'ENE',\n  4: 'E',\n  5: 'ESE',\n  6: 'SE',\n  7: 'SSE',\n  8: 'S',\n  9: 'SSW',\n  10: 'SW',\n  11: 'WSW',\n  12: 'W',\n  13: 'WNW',\n  14: 'NW',\n  15: 'NNW',\n  16: 'N'\n}\nconst directoinMapping = {\n  N: '북',\n  S: '남',\n  E: '동',\n  W: '서'\n}\n\nfunction _getWindDirectionByValue(value: number): string {\n  const calc: number | null = Math.floor((Number(value) + 22.5 * 0.5) / 22.5) || null\n\n  if (calc === null) return ''\n\n  return windTable[calc]?.replace(/[NSEW]/g, match => directoinMapping[match]) || ''\n}\n"]}

package/dist-client/pages/project/component/pagenation.d.ts

@@ -0,0 +1,18 @@
+import '@material/web/button/outlined-button.js';
+import '@material/web/icon/icon.js';
+import { LitElement } from 'lit';
+export declare class PagenationControl extends LitElement {
+    static styles: import("lit").CSSResult[];
+    currentPage: number;
+    totalItems: number;
+    pageLimit: number;
+    private get totalPages();
+    private get pageBlock();
+    render(): import("lit-html").TemplateResult<1>;
+    private _emitPageChange;
+    private _numberButtons;
+    private _onFirst;
+    private _onPrev;
+    private _onNext;
+    private _onLast;
+}

package/dist-client/pages/project/component/pagenation.js

@@ -0,0 +1,142 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/button/outlined-button.js';
+import '@material/web/icon/icon.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let PagenationControl = class PagenationControl extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.currentPage = 1;
+        this.totalItems = 0;
+        this.pageLimit = 20;
+    }
+    get totalPages() {
+        const totalPages = Math.ceil((this.totalItems || 0) / (this.pageLimit || 1));
+        return Math.max(1, totalPages);
+    }
+    get pageBlock() {
+        const blockSize = 10;
+        const blockIndex = Math.floor((this.currentPage - 1) / blockSize);
+        const start = blockIndex * blockSize + 1;
+        const end = Math.min(start + blockSize - 1, this.totalPages);
+        return { start, end };
+    }
+    render() {
+        return html `
+      <div pagination>
+        <md-outlined-button icon ?disabled=${this.currentPage <= 1} @click=${this._onFirst}>
+          <md-icon>first_page</md-icon>
+        </md-outlined-button>
+        <md-outlined-button icon ?disabled=${this.currentPage <= 1} @click=${this._onPrev}>
+          <md-icon>chevron_left</md-icon>
+        </md-outlined-button>
+
+        <div numbers>${this._numberButtons()}</div>
+
+        <md-outlined-button icon ?disabled=${this.currentPage >= this.totalPages} @click=${this._onNext}>
+          <md-icon>chevron_right</md-icon>
+        </md-outlined-button>
+        <md-outlined-button icon ?disabled=${this.currentPage >= this.totalPages} @click=${this._onLast}>
+          <md-icon>last_page</md-icon>
+        </md-outlined-button>
+      </div>
+    `;
+    }
+    _emitPageChange(nextPage) {
+        const bounded = Math.min(Math.max(1, nextPage), this.totalPages);
+        if (bounded !== this.currentPage) {
+            this.dispatchEvent(new CustomEvent('page-change', {
+                detail: { page: bounded },
+                bubbles: true,
+                composed: true
+            }));
+        }
+    }
+    _numberButtons() {
+        const { start, end } = this.pageBlock;
+        const buttons = [];
+        for (let page = start; page <= end; page++) {
+            const selected = page === this.currentPage;
+            buttons.push(html `<md-outlined-button data-page ?selected=${selected} @click=${() => this._emitPageChange(page)}
+          >${page}</md-outlined-button
+        >`);
+        }
+        return buttons;
+    }
+    _onFirst() {
+        this._emitPageChange(1);
+    }
+    _onPrev() {
+        this._emitPageChange(this.currentPage - 1);
+    }
+    _onNext() {
+        this._emitPageChange(this.currentPage + 1);
+    }
+    _onLast() {
+        this._emitPageChange(this.totalPages);
+    }
+};
+PagenationControl.styles = [
+    css `
+      div[pagination] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--spacing-medium, 8px);
+        margin: var(--spacing-large, 12px);
+
+        div[numbers] {
+          display: inline-flex;
+          gap: var(--spacing-tiny, 2px);
+        }
+
+        md-icon {
+          --md-icon-size: 18px;
+        }
+
+        md-outlined-button {
+          --md-outlined-button-container-height: 30px;
+          --md-outlined-button-label-text-size: 13px;
+          padding: 0 10px;
+        }
+
+        md-outlined-button[selected] {
+          --md-outlined-button-label-text-color: #ffffff;
+          --md-sys-color-outline: #0595e5;
+          background-color: #0595e5;
+        }
+
+        md-outlined-button[icon] {
+          min-width: 30px;
+          width: 30px;
+          padding: 0;
+        }
+
+        md-outlined-button[icon] md-icon {
+          margin-top: 5px;
+        }
+
+        md-outlined-button[data-page] {
+          min-width: 34px;
+          padding: 0 8px;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], PagenationControl.prototype, "currentPage", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], PagenationControl.prototype, "totalItems", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], PagenationControl.prototype, "pageLimit", void 0);
+PagenationControl = __decorate([
+    customElement('pagenation-control')
+], PagenationControl);
+export { PagenationControl };
+//# sourceMappingURL=pagenation.js.map

package/dist-client/pages/project/component/pagenation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagenation.js","sourceRoot":"","sources":["../../../../client/pages/project/component/pagenation.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGpD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAiDuB,gBAAW,GAAW,CAAC,CAAA;QACvB,eAAU,GAAW,CAAC,CAAA;QACtB,cAAS,GAAW,EAAE,CAAA;IA+EpD,CAAC;IA7EC,IAAY,UAAU;QACpB,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,CAAA;QAC5E,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,CAAC,CAAA;IAChC,CAAC;IAED,IAAY,SAAS;QACnB,MAAM,SAAS,GAAG,EAAE,CAAA;QACpB,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC,CAAA;QACjE,MAAM,KAAK,GAAG,UAAU,GAAG,SAAS,GAAG,CAAC,CAAA;QACxC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,SAAS,GAAG,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QAC5D,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,CAAA;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;6CAE8B,IAAI,CAAC,WAAW,IAAI,CAAC,WAAW,IAAI,CAAC,QAAQ;;;6CAG7C,IAAI,CAAC,WAAW,IAAI,CAAC,WAAW,IAAI,CAAC,OAAO;;;;uBAIlE,IAAI,CAAC,cAAc,EAAE;;6CAEC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,UAAU,WAAW,IAAI,CAAC,OAAO;;;6CAG1D,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,UAAU,WAAW,IAAI,CAAC,OAAO;;;;KAIlG,CAAA;IACH,CAAC;IAEO,eAAe,CAAC,QAAgB;QACtC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QAChE,IAAI,OAAO,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;YACjC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;gBAC7B,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;gBACzB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAA;QACH,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,CAAA;QACrC,MAAM,OAAO,GAAG,EAAW,CAAA;QAC3B,KAAK,IAAI,IAAI,GAAG,KAAK,EAAE,IAAI,IAAI,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC;YAC3C,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC,WAAW,CAAA;YAC1C,OAAO,CAAC,IAAI,CACV,IAAI,CAAA,2CAA2C,QAAQ,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;aAC7F,IAAI;UACP,CACH,CAAA;QACH,CAAC;QACD,OAAO,OAAO,CAAA;IAChB,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAA;IACzB,CAAC;IAEO,OAAO;QACb,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;IAC5C,CAAC;IAEO,OAAO;QACb,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;IAC5C,CAAC;IAEO,OAAO;QACb,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;IACvC,CAAC;;AAhIM,wBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4CF;CACF,AA9CY,CA8CZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qDAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAuB;AAnDvC,iBAAiB;IAD7B,aAAa,CAAC,oBAAoB,CAAC;GACvB,iBAAiB,CAkI7B","sourcesContent":["import '@material/web/button/outlined-button.js'\nimport '@material/web/icon/icon.js'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('pagenation-control')\nexport class PagenationControl extends LitElement {\n  static styles = [\n    css`\n      div[pagination] {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: var(--spacing-medium, 8px);\n        margin: var(--spacing-large, 12px);\n\n        div[numbers] {\n          display: inline-flex;\n          gap: var(--spacing-tiny, 2px);\n        }\n\n        md-icon {\n          --md-icon-size: 18px;\n        }\n\n        md-outlined-button {\n          --md-outlined-button-container-height: 30px;\n          --md-outlined-button-label-text-size: 13px;\n          padding: 0 10px;\n        }\n\n        md-outlined-button[selected] {\n          --md-outlined-button-label-text-color: #ffffff;\n          --md-sys-color-outline: #0595e5;\n          background-color: #0595e5;\n        }\n\n        md-outlined-button[icon] {\n          min-width: 30px;\n          width: 30px;\n          padding: 0;\n        }\n\n        md-outlined-button[icon] md-icon {\n          margin-top: 5px;\n        }\n\n        md-outlined-button[data-page] {\n          min-width: 34px;\n          padding: 0 8px;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Number }) currentPage: number = 1\n  @property({ type: Number }) totalItems: number = 0\n  @property({ type: Number }) pageLimit: number = 20\n\n  private get totalPages(): number {\n    const totalPages = Math.ceil((this.totalItems || 0) / (this.pageLimit || 1))\n    return Math.max(1, totalPages)\n  }\n\n  private get pageBlock(): { start: number; end: number } {\n    const blockSize = 10\n    const blockIndex = Math.floor((this.currentPage - 1) / blockSize)\n    const start = blockIndex * blockSize + 1\n    const end = Math.min(start + blockSize - 1, this.totalPages)\n    return { start, end }\n  }\n\n  render() {\n    return html`\n      <div pagination>\n        <md-outlined-button icon ?disabled=${this.currentPage <= 1} @click=${this._onFirst}>\n          <md-icon>first_page</md-icon>\n        </md-outlined-button>\n        <md-outlined-button icon ?disabled=${this.currentPage <= 1} @click=${this._onPrev}>\n          <md-icon>chevron_left</md-icon>\n        </md-outlined-button>\n\n        <div numbers>${this._numberButtons()}</div>\n\n        <md-outlined-button icon ?disabled=${this.currentPage >= this.totalPages} @click=${this._onNext}>\n          <md-icon>chevron_right</md-icon>\n        </md-outlined-button>\n        <md-outlined-button icon ?disabled=${this.currentPage >= this.totalPages} @click=${this._onLast}>\n          <md-icon>last_page</md-icon>\n        </md-outlined-button>\n      </div>\n    `\n  }\n\n  private _emitPageChange(nextPage: number) {\n    const bounded = Math.min(Math.max(1, nextPage), this.totalPages)\n    if (bounded !== this.currentPage) {\n      this.dispatchEvent(\n        new CustomEvent('page-change', {\n          detail: { page: bounded },\n          bubbles: true,\n          composed: true\n        })\n      )\n    }\n  }\n\n  private _numberButtons() {\n    const { start, end } = this.pageBlock\n    const buttons = [] as any[]\n    for (let page = start; page <= end; page++) {\n      const selected = page === this.currentPage\n      buttons.push(\n        html`<md-outlined-button data-page ?selected=${selected} @click=${() => this._emitPageChange(page)}\n          >${page}</md-outlined-button\n        >`\n      )\n    }\n    return buttons\n  }\n\n  private _onFirst() {\n    this._emitPageChange(1)\n  }\n\n  private _onPrev() {\n    this._emitPageChange(this.currentPage - 1)\n  }\n\n  private _onNext() {\n    this._emitPageChange(this.currentPage + 1)\n  }\n\n  private _onLast() {\n    this._emitPageChange(this.totalPages)\n  }\n}\n"]}

package/dist-client/pages/project/component/project-update-header.d.ts

@@ -0,0 +1 @@
+import '@material/web/icon/icon.js';