something is not defined error in thymeleaf. (self fixed it) #3612

gyull0210 · 2023-06-06T10:41:02Z

gyull0210
Jun 6, 2023

**Sorry. I fixed it. Just thymeleaf Issue. I didn't add <th:block layout:fragment="javascript"></th:block>.

Now It works well.
**

I used tailwindcss, thymeleaf, alpine.js
The error is that there is no imageUrl and there is no imageViewer() function.
However, it is defined in javascript.
The weird thing is that if I open the file as it is on html, I don't see the error.

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">  
  <header class="fixed top-0 right-0 z-50 w-full bg-gray-900 h-14" th:fragment="headerFragment">
    <div class="px-4 pt-2">
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <div class="relative mr-2 lg:hidden">
            <button class="text-gray-400 hover:text-white" type="button" x-on:click="openSidebar = ! openSidebar">
              <i class="fa-solid fa-bars fa-lg"></i>
            </button>
          </div>
          <a href="#" class="flex items-center justify-center">
            <div class="p-1.5 rounded focus:outline-none focus:ring-1 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-gray-900">
              <svg class="fill-sky-300 animate-spin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="28" height="28">              
                <g>
                  <path d="M347.992 22.832c-51.712.07-101.096 34.503-109.127 86.984-6.792 44.385 21.9 91.457 68.047 97.996 33.752 4.784 69.154-16.666 73.35-50.78 2.95-23.992-12.95-49.414-37.766-52.053-5.27-.562-10.605.153-15.478 1.91-7.48 1.888-13.638 7.08-16.848 13.93-1.555 2.91-2.556 6.132-2.83 9.608-.395 5 1.114 10.15 3.95 14.144 4.44 7.53 12.626 12.586 22 12.586 7.837 0 14.846-3.534 19.528-9.094-1.186 6.693-5.074 12.374-9.923 16.1-5.798 4.454-12.964 6.677-20.323 6.29-21.858-1.142-35.413-21.852-33.86-41.5 2.225-28.175 29.754-45.323 55.76-42.558 36.215 3.852 58.474 39.28 54.337 72.918-5.608 45.582-51.27 73.13-94.52 67-35.455-5.024-62.33-28.824-75.702-59.06-25.502-12.462-54.185-18.076-82.324-15.568-73.17 6.52-135.548 70.878-128.2 146.78 5.672 58.588 56.423 108.3 115.655 101.75 44.613-4.93 82.65-44.843 77.028-91.126-4.112-33.853-33.983-62.497-68.006-57.717-23.93 3.362-44.37 25.31-40.498 49.973 2.195 13.982 13.266 26.085 26.428 27.617 1.503.276 3.05.426 4.633.426 14.097 0 25.523-11.428 25.523-25.525 0-10.782-6.687-19.994-16.14-23.734 6.22-.15 12.117 2.062 16.607 5.505 5.8 4.448 9.8 10.797 11.332 18.004 4.548 21.41-11.938 39.867-31.315 43.456-27.79 5.148-51.47-17.014-55.527-42.854-5.648-35.982 22.8-66.658 56.358-71.373 45.47-6.39 83.886 30.595 89.154 73.966 1.82 14.983.02 29.355-4.59 42.527 2.383 27.298 11.775 53.85 27.447 76.166 42.22 60.117 129.123 81.955 191.172 37.628 47.897-34.216 65.572-103.043 30.295-151.074-26.57-36.177-80.135-49.16-117.4-21.143-27.258 20.495-37.133 60.7-15.988 87.78 14.873 19.044 44.09 25.772 63.51 10.083 12.984-10.49 17.54-30.37 6.88-42.858-2.156-2.525-4.954-4.495-7.997-5.785-1.582-.81-3.27-1.47-5.055-1.95-13.617-3.648-27.613 4.433-31.26 18.05-.784 2.92-1.024 5.86-.79 8.71-3.532-5.438-4.66-11.908-3.897-17.728.952-7.248 4.448-13.887 9.924-18.818 16.265-14.65 40.494-9.6 53.287 5.39 18.35 21.496 10.997 53.09-9.35 69.526-28.333 22.888-69.12 13.59-89.978-13.12-28.26-36.19-15.44-87.96 19.482-114.214 17.342-13.038 37.328-18.982 57.246-18.992 12.108-.007 24.188 2.19 35.635 6.306 19.393-21.698 32.76-48.573 37.747-77.1 12.655-72.385-33.343-149.295-108.54-161.83-6.347-1.058-12.734-1.567-19.085-1.558z" 
                  ></path>
                </g>
              </svg>
            </div>
            <div class="flex items-baseline">
              <div class="text-lg font-semibold text-white">
              삼사라
              </div>
              <div class="hidden ml-2 text-sm font-semibold text-white lg:block">
              도서관리시스템
              </div>
            </div>
          </a>
        </div>

        <div class="relative flex gap-4">
          <div class="relative">
            <button 
            class="text-gray-400 hover:text-white before:absolute before:w-2 before:h-2 before:bg-green-500 before:rounded-full before:right-0 before:top-0 before:ring-1 before:ring-white" 
            type="button"
            >
              <i class="fa-solid fa-bell fa-lg"></i>
            </button>
          </div>
          <div class="relative flex items-center gap-4">
            <div class="hidden w-6 h-6 overflow-hidden bg-gray-100 rounded-full lg:block">
              <img class="object-cover object-center w-full h-full" src="" alt="avatar">
            </div>
            <div class="">
              <span class="text-gray-400">ㅇㅇㅇ 관리자님</span>
            </div>
          </div>
        </div>
      </div>
    </div>  
  </header>   
</html>

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
  <!-- sidebar -->
  <aside class="fixed z-50 w-56 h-full overflow-y-scroll transition duration-300 ease-out -translate-x-56 bg-gray-900 lg:translate-x-0 pt-14" 
  :class="openSidebar ? 'translate-x-0':'-translate-x-56'"
  th:fragment="sidebarFragment"
  >
  <div class="px-6 pt-4">
    <ul class="flex flex-col space-y-2">
      <li class="relative text-gray-500 hover:text-white focus-within:text-white">
        <div class="absolute inset-y-0 left-0 flex items-center pl-2 pointer-events-none">
          <i class="fa-solid fa-table-columns"></i>
        </div>
        <a href="#"
          class="inline-block w-full py-2 pl-8 pr-4 text-xs rounded hover:bg-gray-800 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:bg-gray-800"        
        >대시보드
        </a>
          </li>
          <li class="" x-data="{ open: false }">
            <div
              class="relative flex items-center justify-between text-gray-500 hover:text-white focus-within:text-white"
              x-on:click="open = ! open"
            >
              <div class="flex items-center w-full">
                <div
                  class="absolute inset-y-0 left-0 flex items-center pl-2 pointer-events-none"
                >
                  <i class="fa-solid fa-book-open-reader"></i>
                </div>
                <a href="#"
                  class="inline-block w-full py-2 pl-8 pr-4 text-xs rounded hover:bg-gray-800 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:bg-gray-800"
                  >출납관리</a>
              </div>
              <button class="absolute right-0 flex items-center p-1" tabindex="-1">
                <i class="fa-solid fa-chevron-down fa-xs"></i>
              </button>
            </div>
            <div class="pt-2 pl-4" x-show="open" x-transition>
              <ul class="flex flex-col pl-2 text-gray-500 border-l border-gray-700">
                <li>
                  <a
                    href="/admin/borrow"
                    class="inline-block w-full px-4 py-2 text-xs rounded hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 focus:text-white"
                    >대출</a
                  >
                </li>
                <li>
                  <a
                    href="/admin/receive"
                    class="inline-block w-full px-4 py-2 text-xs rounded hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 focus:text-white"
                    >반납</a
                  >
                </li>
                <li>
                  <a
                    href="/admin/reservation"
                    class="inline-block w-full px-4 py-2 text-xs rounded hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 focus:text-white"
                    >예약</a
                  >
                </li>
                <li>
                  <a
                    href="/admin/overdue"
                    class="inline-block w-full px-4 py-2 text-xs rounded hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 focus:text-white"
                    >연체관리</a
                  >
                </li>
              </ul>
            </div>
          </li>
          <li class="" x-data="{ open: false }">
            <div
              class="relative flex items-center justify-between text-gray-500 hover:text-white focus-within:text-white"
              x-on:click="open = ! open"
            >
              <div class="flex items-center w-full">
                <div
                  class="absolute inset-y-0 left-0 flex items-center pl-2 pointer-events-none"
                >
                  <i class="fa-solid fa-book"></i>
                </div>
                <a href="#"
                  class="inline-block w-full py-2 pl-8 pr-4 text-xs rounded hover:bg-gray-800 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:bg-gray-800"
                  >장서관리</a>
              </div>
              <button class="absolute right-0 flex items-center p-1" tabindex="-1">
                <i class="fa-solid fa-chevron-down fa-xs"></i>
              </button>
            </div>
            <div class="pt-2 pl-4" x-show="open" x-transition>
              <ul class="flex flex-col pl-2 text-gray-500 border-l border-gray-700">
                <li>
                  <a
                    href="/admin/book/search"
                    class="inline-block w-full px-4 py-2 text-xs rounded hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 focus:text-white"
                    >장서조회</a
                  >
                </li>
                <li>
                  <a
                    href="/admin/book/create"
                    class="inline-block w-full px-4 py-2 text-xs rounded hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 focus:text-white"
                    >장서등록</a
                  >
                </li>
                <li>
                  <a
                    href="/admin/book/maintenance"
                    class="inline-block w-full px-4 py-2 text-xs rounded hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 focus:text-white"
                    >유지보수</a
                  >
                </li>
                <li>
                  <a
                    href="/admin/book/request"
                    class="inline-block w-full px-4 py-2 text-xs rounded hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 focus:text-white"
                    >희망도서</a
                  >
                </li>
              </ul>
            </div>
          </li>
          <li class="relative text-gray-500 hover:text-white focus-within:text-white" x-data="{ open: false }">
            <div
              class="relative flex items-center justify-between text-gray-500 hover:text-white focus-within:text-white"
              x-on:click="open = ! open"
            >
              <div class="flex items-center w-full">
                <div
                  class="absolute inset-y-0 left-0 flex items-center pl-2 pointer-events-none"
                >
                  <i class="fa-solid fa-user"></i>
                </div>
                <a href="#"
                  class="inline-block w-full py-2 pl-8 pr-4 text-xs rounded hover:bg-gray-800 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:bg-gray-800"
                  >회원관리</a>
              </div>
              <button class="absolute right-0 flex items-center p-1" tabindex="-1">
                <i class="fa-solid fa-chevron-down fa-xs"></i>
              </button>
            </div>
            <div class="pt-2 pl-4"  x-show="open" x-transition> 
              <ul class="flex flex-col pl-2 text-gray-500 border-l border-gray-700">
                <li>
                  <a
                    href="/admin/user/search"
                    class="inline-block w-full px-4 py-2 text-xs rounded hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 focus:text-white"
                    >회원조회</a
                  >
                </li>
                <li>
                  <a
                    href="/admin/user/create"
                    class="inline-block w-full px-4 py-2 text-xs rounded hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 focus:text-white"
                    >회원등록</a
                  >
                </li>
                <li>
                  <a
                    href="/admin/user/restricted"
                    class="inline-block w-full px-4 py-2 text-xs rounded hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 focus:text-white"
                    >제재된 회원</a
                  >
                </li>
                <li>
                  <a
                    href="/admin/user/setting"
                    class="inline-block w-full px-4 py-2 text-xs rounded hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 focus:text-white"
                    >회원설정</a
                  >
                </li>
              </ul>
            </div>
          </li>
          <li class="relative text-gray-500 hover:text-white focus-within:text-white" x-data="{ open: false }">
            <div
              class="relative flex items-center justify-between text-gray-500 hover:text-white focus-within:text-white"
              x-on:click="open = ! open"
            >
              <div class="flex items-center w-full">
                <div
                  class="absolute inset-y-0 left-0 flex items-center pl-2 pointer-events-none"
                >
                  <i class="fa-solid fa-chart-line"></i>
                </div>
                <a href="#"
                  class="inline-block w-full py-2 pl-8 pr-4 text-xs rounded hover:bg-gray-800 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:bg-gray-800"
                  >통계</a>
              </div>
              <button class="absolute right-0 flex items-center p-1" tabindex="-1">
                <i class="fa-solid fa-chevron-down fa-xs"></i>
              </button>
            </div>
            <div class="pt-2 pl-4" x-show="open" x-transition>
              <ul class="flex flex-col pl-2 text-gray-500 border-l border-gray-700">
                <li>
                  <a
                    href="#"
                    class="inline-block w-full px-4 py-2 text-xs rounded hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 focus:text-white"
                    >출납 통계</a
                  >
                </li>
                <li>
                  <a
                    href="#"
                    class="inline-block w-full px-4 py-2 text-xs rounded hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 focus:text-white"
                    >보유도서 현황</a
                  >
                </li>
                <li>
                  <a
                    href="#"
                    class="inline-block w-full px-4 py-2 text-xs rounded hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 focus:text-white"
                    >이용자 현황</a
                  >
                </li>
              </ul>
            </div>
          </li>
          <li class="relative text-gray-500 hover:text-white focus-within:text-white" x-data="{ open: false }">
            <div
              class="relative flex items-center justify-between text-gray-500 hover:text-white focus-within:text-white"
              x-on:click="open = ! open"
            >
              <div class="flex items-center w-full">
                <div
                  class="absolute inset-y-0 left-0 flex items-center pl-2 pointer-events-none"
                >
                  <i class="fa-solid fa-comments"></i>
                </div>
                <a href="#"
                  class="inline-block w-full py-2 pl-8 pr-4 text-xs rounded hover:bg-gray-800 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:bg-gray-800"
                  >게시판</a>
              </div>
              <button class="absolute right-0 flex items-center p-1" tabindex="-1">
                <i class="fa-solid fa-chevron-down fa-xs"></i>
              </button>
            </div>
            <div class="pt-2 pl-4" x-show="open" x-transition>
              <ul class="flex flex-col pl-2 text-gray-500 border-l border-gray-700">
                <li>
                  <a
                    href="/admin/notice"
                    class="inline-block w-full px-4 py-2 text-xs rounded hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 focus:text-white"
                    >공지사항</a
                  >
                </li>
                <li>
                  <a
                    href="/admin/board"
                    class="inline-block w-full px-4 py-2 text-xs rounded hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 focus:text-white"
                    >관리자게시판</a
                  >
                </li>
                <li>
                  <a
                    href="/admin/qna"
                    class="inline-block w-full px-4 py-2 text-xs rounded hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 focus:text-white"
                    >Q&A</a
                  >
                </li>                    
              </ul>
            </div>
          </li>              
          <li class="relative text-gray-500 hover:text-white focus-within:text-white">
            <div
              class="absolute inset-y-0 left-0 flex items-center pl-2 pointer-events-none"
            >
              <i class="fa-solid fa-life-ring"></i>
            </div>
            <a
              href="/admin/support"
              class="inline-block w-full py-2 pl-8 pr-4 text-xs rounded hover:bg-gray-800 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:bg-gray-800"
              >지원 및 문의</a
            >
          </li>
        </ul>
      </div>
      <div class="px-6 pt-8">
        <hr class="border-gray-700" />
      </div>
      <div class="px-6 pt-4 pb-8">
        <ul>
          <li class="relative text-gray-500 hover:text-white focus-within:text-white">
            <div
              class="absolute inset-y-0 left-0 flex items-center pl-2 pointer-events-none"
            >
              <i class="fa-solid fa-gear"></i>
            </div>
            <a
              href="/admin/setting"
              class="inline-block w-full py-2 pl-8 pr-4 text-xs rounded hover:bg-gray-800 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:bg-gray-800"
              >설정</a
            >
          </li>
          <li class="relative text-gray-500 hover:text-white focus-within:text-white">
            <div
              class="absolute inset-y-0 left-0 flex items-center pl-2 pointer-events-none"
            >
              <i class="fa-solid fa-bell"></i>
            </div>
            <a
              href="/admin/notification"
              class="inline-block w-full py-2 pl-8 pr-4 text-xs rounded hover:bg-gray-800 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:bg-gray-800"
              >알림</a>
          </li>             
        </ul>
      </div>
      <div class="pl-6 pr-4 py-4 bg-[#232529] flex items-center justify-between">
        <div class="flex items-center">
          <div
            class="relative w-8 h-8 rounded-full before:absolute before:w-2 before:h-2 before:bg-green-500 before:rounded-full before:right-0 before:bottom-0 before:ring-1 before:ring-white"
          >
            <img
              class="rounded-full"
              src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8YXZhdGFyfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
              alt=""
            />
          </div>
          <div class="flex flex-col pl-3">
            <div class="text-sm text-gray-50">Jane Doeson</div>
            <span class="text-xs text-[#acacb0] font-light tracking-tight">
              [email protected]
            </span>
          </div>
        </div>
        <button
          class="text-gray-400 bg-gray-700 rounded focus:outline-none focus:ring-1 focus:ring-gray-500 focus:text-white"
        >
          <svg class="w-4 h-4 stroke-current" fill="none" viewBox="0 0 24 24">
            <path
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.5"
              d="M15.25 10.75L12 14.25L8.75 10.75"
            ></path>
          </svg>
        </button>
      </div>
  </aside>
</html>

<!DOCTYPE html>
<html lagn="ko"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1, user-scalable=yes, initial-scale=1.0" />
</head>
<body>
    <div class="relative flex" x-data="{ openSidebar : false }">
      <!-- sidebar fragment 사용-->
      <th:block th:replace="fragments/admin/sidebar :: sidebarFragment"></th:block>

      <div class="relative flex flex-col w-full min-h-screen">
        <!-- header fragment 사용-->
        <th:block th:replace="fragments/admin/header :: headerFragment"></th:block> 
        <!-- content fragment 사용 -->
        <th:block layout:fragment="content"></th:block>    
      </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/adminLayout}"> 
<head>    
  <title>장서 등록</title>
  <link rel="stylesheet" href="../../../static/css/common.css" th:href="@{/static/css/common.css}" /> 
  <script src="https://kit.fontawesome.com/f31fa860a2.js" crossorigin="anonymous"></script>      
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>    
</head>
<body x-data="{ openNaverModal : false, openIsbnModal : false }">
  <main class="relative w-full h-full bg-gray-100" layout:fragment="content">
    <div class="relative w-full h-screen pt-16 pl-0 lg:pl-56">
      <div class="flex flex-col h-full gap-6 p-4 overflow-y-auto">
        <div class="p-4 font-semibold bg-white border border-transparent rounded-md shadow-md text-medium shadow-gray-200/80">
          <i class="text-gray-400 fa-solid fa-book fa-lg"></i>
          장서 등록
        </div>           
        <div class="flex flex-col gap-6 p-4 font-semibold bg-white border border-transparent rounded-md shadow-md lg:flex-row text-medium shadow-gray-200/80">
          <div class="flex flex-col gap-4">
            <label class="block text-sm">네이버 도서 검색</label>
            <div class="flex gap-4">
              <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow" type="text" placeholder="도서검색">
              <button class="px-4 py-2 text-sm text-white bg-gray-600 rounded-lg whitespace-nowrap" x-on:click="openNaverModal = true">검색</button>
            </div>
          </div>
          <div class="flex flex-col gap-4">
            <label class="block text-sm">ISBN 서지정보 검색</label>
            <div class="flex gap-4">
              <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow" type="text" placeholder="ISBN 검색">
              <button class="px-4 py-2 text-sm text-white bg-gray-600 rounded-lg whitespace-nowrap" type="button" x-on:click="openIsbnModal = true">검색</button>
            </div>
          </div>
        </div>      
        <div class="p-4 bg-white border border-transparent rounded-md shadow-md shadow-gray-200/80">
          <div class="">
            <form class="">
              <div class="py-2 mb-4 text-base font-semibold border-b border-gray-300">
                기본 정보
              </div>
              <div class="flex flex-col lg:flex-row">                   
                <!-- defult information -->
                <div class="flex flex-col items-center gap-6 lg:items-stretch lg:flex-row">
                  <!-- photo -->
                  <div class="mt-4 mb-4" aria-current="도서사진" x-data="imageViewer()">
                    <label for="uploadPhoto" class="block overflow-hidden bg-transparent border border-transparent rounded-lg h-52 w-36 min-w-[9rem]">
                      <template x-if="!imageUrl">
                        <div class="flex flex-col items-center justify-center w-full h-full gap-6 text-gray-400 bg-gray-200">
                          <i class="fa-solid fa-image fa-2xl"></i>
                          <span class="text-sm text-gray-400">사진 업로드</span>
                        </div>
                      </template>
                      <template x-if="imageUrl">
                        <img class="object-cover object-center w-full h-full" :src="imageUrl" alt="" x-cloak>
                      </template>                      
                    </label>
                    <input id="uploadPhoto" class="hidden w-full px-4 py-2 border border-gray-400 rounded-md shadow" type="file" accept="image/webp, image/jpg, image/jpeg, image/png" @change="fileChosen">            
                  </div>
                  <!-- information -->
                  <div class="">
                    <!--ISBN-->
                    <div class="mb-4">
                      <label class="block text-sm">ISBN</label>
                      <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-lg shadow" type="text">
                    </div> 
                    <!--총서명-->
                    <div class="mb-4">
                      <label class="block text-sm">총서명</label>
                      <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-lg shadow" type="text">
                    </div>                     
                    <!-- 도서명 -->
                    <div class="mb-4">
                      <label class="block text-sm">도서명</label>
                      <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-lg shadow" type="text">
                    </div>
                    <!--  -->
                    <div class="mb-4">
                      <label class="block text-sm">서명권차</label>
                      <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-lg shadow" type="text">
                    </div>
                    <div class="mb-4" aria-current="저자">
                      <label class="block text-sm">저자</label>
                      <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow" type="text">
                    </div>
                    <div class="mb-4" aria-current="발행지">
                      <label class="block text-sm">발행지</label>
                      <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow" type="text">
                    </div>
                    <div class="mb-4" aria-current="출판년도">
                      <label class="block text-sm">출판년도</label>
                      <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow" type="text">
                    </div>
                    <div class="mb-4" aria-current="출판사">
                      <label class="block text-sm">출판사</label>
                      <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow" type="text">
                    </div>
                    <div class="mb-4" aria-current="페이지">
                      <label class="block text-sm">페이지</label>
                      <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow" type="text">
                    </div>
                    <div class="mb-4" aria-current="크기">
                      <label class="block text-sm">크기</label>
                      <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow" type="text">
                    </div>
                    <div class="mb-4" aria-current="가격">
                      <label class="block text-sm">가격</label>
                      <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow" type="text">
                    </div>
                    <div class="mb-4" aria-current="첨부자료">
                      <label class="block text-sm">첨부자료</label>
                      <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow" type="text">
                    </div>
                    <div class="mb-4" aria-current="소장위치">
                      <label class="block text-sm">소장위치</label>
                      <select class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow" type="text">
                        <option>자료실</option>
                      </select>
                    </div>
                    <div class="mb-4" aria-current="반입구분">
                      <label class="block text-sm">반입구분</label>
                      <select class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow" type="text">
                        <option>구매</option>
                      </select>
                    </div>
                    <div class="mb-4" aria-current="도서상태">
                      <label class="block text-sm">도서상태</label>
                      <select class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow">
                        <option>대출가능</option>
                      </select>
                    </div>
                    <div class="mb-4" aria-current="UID">
                      <label class="block text-sm">UID</label>
                      <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow" type="text">                         
                    </div>
                    <div class="mb-4" aria-current="청구기호">
                      <label class="block mb-4 text-sm">청구기호</label>
                      <div class="flex flex-wrap items-center gap-4 mb-4">
                        <!-- 별치 -->
                        <div class="mb-4" aria-current="별치기호">
                          <label class="block text-sm">별치기호</label>
                          <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow" type="text">                         
                        </div>
                        <!-- 분류기호 -->
                        <div class="mb-4" aria-current="분류기호">
                          <label class="block text-sm">분류기호</label>
                          <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow" type="text">                         
                        </div>
                        <!-- 저자기호 -->
                        <div class="mb-4" aria-current="저자기호">
                          <label class="block text-sm">저자기호</label>
                          <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow" type="text">                         
                        </div>
                        <!-- 청구권차 -->
                        <div class="mb-4" aria-current="청구권차">
                          <label class="block text-sm">청구권차</label>
                          <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow" type="text">                         
                        </div>
                        <!-- 복본 -->
                        <div class="mb-4" aria-current="복본">
                          <label class="block text-sm">복본</label>
                          <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow" type="text">                         
                        </div>
                        <!-- 등록번호 -->
                        <div class="mb-4" aria-current="등록번호">
                          <label class="block text-sm">등록번호</label>
                          <input class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow" type="text">                         
                        </div>
                      </div>
                    </div>   
                  </div>
                </div> 
              </div>
            </form>
          </div>
        </div>
        <!-- extra infromation -->
        <div class="p-4 bg-white border border-transparent rounded-md shadow-md shadow-gray-200/80">
          <div class="py-2 mb-4 font-semibold border-b border-gray-300 ext-base">
            추가 정보
          </div>
          <div class="">
                  
          </div>
          <div class="">
            <div class="mb-4" aria-current="설명">
              <label class="block">설명</label>
              <textarea class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md shadow" rows="5" type="text"></textarea>
            </div>
          </div>

          <div class="relative flex justify-between">
            <button class="px-4 py-2 bg-gray-100 border border-gray-300 rounded">취소</button>
            <button class="px-4 py-2 text-white bg-gray-600 rounded">저장</button>
          </div>
        </div>
      </div>
      <!-- naver modal -->
        <div class="w-full max-w-screen-lg absolute z-50 p-4 border shadow bg-white rounded-lg top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]" 
        :class="openNaverModal ? '':'block'" x-show="openNaverModal" x-cloak
        id="searchBookModal"
        >
          <div class="">
            <div class="mb-4">
              <div class="py-2 mb-4 text-sm font-semibold border-b border-gray-300">
                네이버 도서 검색
              </div>
              <form class="flex gap-4">
                <input class="px-4 py-2 border border-gray-300 rounded-md shadow" type="text" placeholder="도서명을 입력하세요">
                <button class="px-4 py-2 text-white bg-gray-600 rounded-lg whitespace-nowrap">검색</button>
              </form>
            </div>
            <div class="mb-4 w-full max-h-[500px] overflow-y-auto">
              <table class="w-full overflow-hidden rounded-md table-auto">
                <thead class="bg-gray-200">
                  <tr class="whitespace-nowrap">
                    <th class="px-6 py-2">
                      <div class="flex items-center">
                        <input class="w-4 h-4 border border-gray-300 rounded" type="checkbox">
                      </div>
                    </th>
                    <th class="px-6 py-2">
                      표지
                    </th>
                    <th class="px-6 py-2">도서명</th>
                    <th class="px-6 py-2">저자</th>
                    <th class="px-6 py-2">출판사</th>
                    <th class="px-6 py-2">출판년도</th>
                    <th class="px-6 py-2">가격</th>
                    <th class="px-6 py-2">ISBN</th>
                  </tr>
                </thead>
                <tbody class="">
                  <tr class="border-b border-gray-300 border-dashed whitespace-nowrap">
                    <td class="px-6 py-2">
                      <div class="flex items-center">
                        <input class="w-4 h-4 border border-gray-300 rounded" type="checkbox">
                      </div>
                    </td>
                    <td class="px-6 py-2">
                      <div class="min-w-[6rem] w-24 h-32 rounded overflow-hidden">
                        <img class="object-cover object-center w-full h-full" src="" alt="책 표지">
                      </div>
                    </td>
                    <td class="px-6 py-2">
                      도서명
                    </td>
                    <td class="px-6 py-2">
                      저자
                    </td>
                    <td class="px-6 py-2">
                      출판사
                    </td>
                    <td class="px-6 py-2">
                      출판년도
                    </td>
                    <td class="px-6 py-2">
                      가격
                    </td>
                    <td class="px-6 py-2">
                      ISBN
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="relative flex justify-between">
              <button class="px-4 py-2 bg-gray-200 border border-gray-300 rounded-lg">취소</button>
              <button class="px-4 py-2 text-white bg-gray-600 rounded-lg" x-on:click="openNaverModal = false">등록하기</button>
            </div>
          </div>
        </div>
        <!-- public library modal -->
        <div class="w-full max-w-screen-lg absolute z-50 p-4 border shadow bg-white rounded-lg top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]" 
        :class="openIsbnModal ? '':'block'" x-show="openIsbnModal" x-cloak
        id="searchBookModal">
          <div class="">
            <div class="mb-4">
              <div class="py-2 mb-4 text-sm font-semibold border-b border-gray-300">
                국립중앙도서관 서지정보 검색
              </div>
              <form class="flex gap-4">
                <select class="px-4 py-2 border border-gray-300 rounded-md shadow">
                  <option>ISBN</option>
                  <option>본표제</option>
                  <option>발행처</option>
                  <option>저자</option>
                </select>
                <input class="px-4 py-2 border border-gray-300 rounded-md shadow" type="text" placeholder="도서명을 입력하세요">
                <button class="px-4 py-2 text-white bg-gray-600 rounded-lg whitespace-nowrap">검색</button>
              </form>
            </div>
            <div class="mb-4 w-full max-h-[500px] overflow-y-auto">
              <table class="w-full overflow-hidden rounded-md table-auto">
                <thead class="bg-gray-200">
                  <tr class="whitespace-nowrap">
                    <th class="px-6 py-2">
                      <div class="flex items-center">
                        <input class="w-4 h-4 border border-gray-300 rounded" type="checkbox">
                      </div>
                    </th>
                    <th class="px-6 py-2">
                      표지
                    </th>
                    <th class="px-6 py-2">도서명</th>
                    <th class="px-6 py-2">저자</th>
                    <th class="px-6 py-2">출판사</th>
                    <th class="px-6 py-2">출판년도</th>
                    <th class="px-6 py-2">가격</th>
                    <th class="px-6 py-2">ISBN</th>
                  </tr>
                </thead>
                <tbody class="">
                  <tr class="border-b border-gray-300 border-dashed whitespace-nowrap">
                    <td class="px-6 py-2">
                      <div class="flex items-center">
                        <input class="w-4 h-4 border border-gray-300 rounded" type="checkbox">
                      </div>
                    </td>
                    <td class="px-6 py-2">
                      <div class="min-w-[6rem] w-24 h-32 rounded overflow-hidden">
                        <img class="object-cover object-center w-full h-full" src="" alt="책 표지">
                      </div>
                    </td>
                    <td class="px-6 py-2">
                      도서명
                    </td>
                    <td class="px-6 py-2">
                      저자
                    </td>
                    <td class="px-6 py-2">
                      출판사
                    </td>
                    <td class="px-6 py-2">
                      출판년도
                    </td>
                    <td class="px-6 py-2">
                      가격
                    </td>
                    <td class="px-6 py-2">
                      ISBN
                    </td>
                  </tr>
                </tbody>
              </table>         
            </div>
            <div class="relative flex justify-between">
              <button class="px-4 py-2 bg-gray-200 border border-gray-300 rounded-lg">취소</button>
              <button class="px-4 py-2 text-white bg-gray-600 rounded-lg" x-on:click="openIsbnModal = false">등록하기</button>
            </div>
          </div>
        </div>  
    </div>
  </main>
  <script>
    function imageViewer() {
      return {
        imageUrl: '',

        fileChosen(event) {
          this.fileToDataUrl(event, src => this.imageUrl = src)
        },

        fileToDataUrl(event, callback) {
          if (! event.target.files.length) return

          let file = event.target.files[0],
            reader = new FileReader()
  
          reader.readAsDataURL(file)
          reader.onload = e => callback(e.target.result)
        },
      }
    }
  </script>
</body>    
</html>

And also This page cannot read javascript tag, so no render javascript. I don't know why...
the alpine.js tag in the interval that calls the sidebar works well. The part where the problem occurs is the same as the code section defined by the template.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

something is not defined error in thymeleaf. (self fixed it) #3612

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

something is not defined error in thymeleaf. (self fixed it) #3612

Uh oh!

Uh oh!

gyull0210 Jun 6, 2023

**Sorry. I fixed it. Just thymeleaf Issue. I didn't add <th:block layout:fragment="javascript"></th:block>.

Replies: 0 comments

gyull0210
Jun 6, 2023