Skip to content

Commit

Permalink
Apply #18 - tailwind css
Browse files Browse the repository at this point in the history 
tailwind css 를 cdn 방식으로 적용
로그인, 로그아웃, 이벤트 목록, 어드민 이벤트 상세에 적용
나머지 뷰 디자인은 차차 발전시킬 예정

### Reference

* https://tailwindcss.com/
  • Loading branch information
@bmcho
bmcho committed Aug 26, 2022
1 parent 3da367e commit 8190b38
Show file tree
Hide file tree
Showing 8 changed files with 185 additions and 119 deletions.
146 changes: 91 additions & 55 deletions src/main/resources/templates/admin/event-detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,63 +2,99 @@
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<title>관리자 이벤트</title>
</head>
<body>
<p>
<a id="logout">로그아웃</a>
</p>
<p>
<span id="eventTitle">This is admin event page.</span>
</p>
<form id="eventForm">
<table id="eventTable">
<tbody>
<tr>
<td><label for="placeName">장소 이름</label></td>
<td><input type="text" id="placeName" name="placeName" readonly></td>
</tr>
<tr>
<td><label for="eventName">이벤트 이름</label></td>
<td><input type="text" id="eventName" name="eventName" required></td>
</tr>
<tr>
<td><label for="eventStatus">이벤트 상태</label></td>
<td>
<select id="eventStatus" name="eventStatus" required>
<option>열림</option>
<option>종료</option>
<option>취소</option>
</select>
</td>
</tr>
<tr>
<td><label for="eventStartDatetime">시작 일시</label></td>
<td><input type="datetime-local" id="eventStartDatetime" name="eventStartDatetime" required></td>
</tr>
<tr>
<td><label for="eventEndDatetime">종료 일시</label></td>
<td><input type="datetime-local" id="eventEndDatetime" name="eventEndDatetime" required></td>
</tr>
<tr>
<td><label for="currentNumberOfPeople">현재 인원</label></td>
<td><input type="number" id="currentNumberOfPeople" name="currentNumberOfPeople" min="0" required></td>
</tr>
<tr>
<td><label for="capacity">최대 수용 인원</label></td>
<td><input type="number" id="capacity" name="capacity" min="0" required></td>
</tr>
<tr>
<td><label for="memo">메모</label></td>
<td><textarea id="memo" name="memo"></textarea></td>
</tr>
</tbody>
</table>
<input type="hidden" id="eventId" name="id">
<input type="hidden" id="csrf">
</form>
<button id="saveEvent" type="submit">저장</button>
<button id="removeEvent" type="button">삭제</button>
<button id="backToEvents" type="button">취소</button>
<div class="space-y-4">
<button id="logout" type="button" class="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-3 rounded">로그아웃</button>
<h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
<span id="eventTitle">This is admin event page.</span>
</h2>
<div class="mt-5 md:mt-0">
<form id="eventForm">
<table id="eventTable" class="w-full max-w-md">
<tbody>
<tr>
<td class="md:w-1/3">
<label for="placeName" class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4">장소 이름</label>
</td>
<td class="md:w-2/3">
<input type="text" id="placeName" name="placeName" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" readonly>
</td>
</tr>
<tr>
<td class="md:w-1/3">
<label for="eventName" class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4">이벤트 이름</label>
</td>
<td class="md:w-2/3">
<input type="text" id="eventName" name="eventName" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
</td>
</tr>
<tr>
<td class="md:w-1/3">
<label for="eventStatus" class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4">이벤트 상태</label>
</td>
<td class="md:w-2/3">
<select id="eventStatus" name="eventStatus" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
<option>열림</option>
<option>종료</option>
<option>취소</option>
</select>
</td>
</tr>
<tr>
<td class="md:w-1/3">
<label for="eventStartDatetime" class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4">시작 일시</label>
</td>
<td class="md:w-2/3">
<input type="datetime-local" id="eventStartDatetime" name="eventStartDatetime" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
</td>
</tr>
<tr>
<td class="md:w-1/3">
<label for="eventEndDatetime" class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4">종료 일시</label>
</td>
<td class="md:w-2/3">
<input type="datetime-local" id="eventEndDatetime" name="eventEndDatetime" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
</td>
</tr>
<tr>
<td class="md:w-1/3">
<label for="currentNumberOfPeople" class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4">현재 인원</label>
</td>
<td class="md:w-2/3">
<input type="number" id="currentNumberOfPeople" name="currentNumberOfPeople" min="0" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
</td>
</tr>
<tr>
<td class="md:w-1/3">
<label for="capacity" class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4">최대 수용 인원</label>
</td>
<td class="md:w-2/3">
<input type="number" id="capacity" name="capacity" min="0" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
</td>
</tr>
<tr>
<td class="md:w-1/3">
<label for="memo" class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4">메모</label>
</td>
<td class="md:w-2/3">
<textarea id="memo" name="memo" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea>
</td>
</tr>
</tbody>
</table>
<input type="hidden" id="eventId" name="id">
<input type="hidden" id="csrf">
</form>
<div class="text-right w-full max-w-md">
<button id="saveEvent" type="submit" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">저장</button>
<button id="removeEvent" type="button" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">삭제</button>
<button id="backToEvents" type="button" class="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded">취소</button>
</div>
</div>
</div>
</body>
</html>
2 changes: 1 addition & 1 deletion src/main/resources/templates/admin/event-detail.th.xml
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<?xml version="1.0"?>
<thlogic>
<attr sel="#logout" th:text="'로그아웃'" th:href="@{/logout}" />
<attr sel="#logout" th:onclick="'location.href=\'' + @{/logout} + '\''" />
<attr sel="#eventTitle" th:text="'이벤트 상세 - 관리자 (' + ${adminOperationStatus.message} + ')'" />
<attr sel="#eventTable">
<attr sel="#placeName" th:value="*{event?.placeName}" />
Expand Down
49 changes: 28 additions & 21 deletions src/main/resources/templates/auth/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,34 @@
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<title>Login</title>
</head>
<body>
<p>
<span id="loginTitle">This is login page.</span>
</p>
<form id="loginForm">
<table>
<tbody>
<tr>
<td><label for="username">EMAIL</label></td>
<td><input type="text" id="username" name="username" required></td>
</tr>
<tr>
<td><label for="password">패스워드</label></td>
<td><input type="password" id="password" name="password" required></td>
</tr>
</tbody>
</table>
<input type="hidden" id="csrf">
</form>
<button id="login" type="submit">로그인</button>
<body class="bg-gray-200">
<div class="py-32 bg-gray-200 flex justify-center">
<div class="w-full max-w-xs">
<form id="loginForm" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<div class="mb-4">
<label for="username" class="block text-gray-700 text-sm font-bold mb-2">
Email
</label>
<input type="text" id="username" name="username" placeholder="이메일 주소 (ex: [email protected])" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
</div>
<div class="mb-6">
<label for="password" class="block text-gray-700 text-sm font-bold mb-2">
Password
</label>
<input type="password" id="password" name="password" placeholder="************" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" required>
</div>
<input type="hidden" id="csrf">
<div class="flex items-center justify-between">
<button id="login" type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
로그인
</button>
</div>
</form>
</div>
</div>
</body>
</html>
1 change: 0 additions & 1 deletion src/main/resources/templates/auth/login.th.xml
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<?xml version="1.0"?>
<thlogic>
<attr sel="#loginTitle" th:text="'로그인 페이지'" />
<attr sel="#csrf" th:value="${_csrf.token}" th:name="${_csrf.parameterName}" />
<attr sel="#login" th:form="loginForm" th:formaction="@{/login}" th:formmethod="post" />
</thlogic>
34 changes: 24 additions & 10 deletions src/main/resources/templates/auth/logout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,30 @@
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<title>Logout</title>
</head>
<body>
<p>
<span id="logoutTitle">This is logout page.</span>
</p>
<form id="logoutForm">
<input type="hidden" id="csrf">
</form>
<button id="logout" type="submit">로그아웃</button>
<button id="cancel" type="button">취소</button>
<body class="bg-gray-200">
<div class="py-32 bg-gray-200 flex justify-center">
<div class="w-full max-w-xs">
<form id="logoutForm" class="space-y-4 bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">

<h3 class="text-center text-lg font-bold leading-7 text-gray-900 sm:text-lg sm:truncate">
<span id="logoutTitle">This is logout page.</span>
</h3>

<input type="hidden" id="csrf">
<div class="flex items-center justify-evenly">
<button id="logout" type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
로그아웃
</button>
<button id="cancel" type="button" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
취소
</button>
</div>
</form>
</div>
</div>
</body>
</html>
2 changes: 1 addition & 1 deletion src/main/resources/templates/auth/logout.th.xml
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<?xml version="1.0"?>
<thlogic>
<attr sel="#logoutTitle" th:text="'로그아웃 페이지'" />
<attr sel="#logoutTitle" th:text="'로그아웃 하시겠습니까?'" />
<attr sel="#csrf" th:value="${_csrf.token}" th:name="${_csrf.parameterName}" />
<attr sel="#logout" th:form="logoutForm" th:formaction="@{/logout}" th:formmethod="post" />
<attr sel="#cancel" th:onclick="'location.href=\'' + @{${backUrl}} + '\''" />
Expand Down
68 changes: 39 additions & 29 deletions src/main/resources/templates/event/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,47 @@
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<title>이벤트 리스트</title>
</head>
<body>
<p>
<span id="eventsTitle">This is events page.</span>
</p>
<table id="eventsTable">
<thead>
<tr>
<th>장소명</th>
<th>이벤트명</th>
<th>이벤트 상태</th>
<th>시작 일시</th>
<th>종료 일시</th>
<th>현재 인원</th>
<th>최대 수용 인원</th>
<th>상세</th>
</tr>
</thead>
<tbody>
<tr>
<td class="placeName">1</td>
<td class="eventName">테스트 이벤트</td>
<td class="eventStatus">OPENED</td>
<td class="eventStartDatetime">2021-01-01 09:00:00</td>
<td class="eventEndDatetime">2021-01-01 10:00:00</td>
<td class="currentNumberOfPeople">0</td>
<td class="capacity">10</td>
<td><a>상세</a></td>
</tr>
</tbody>
</table>
<div class="space-y-4 py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
<span id="eventsTitle">This is events page.</span>
</h2>
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table id="eventsTable" class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">장소명</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">이벤트명</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">이벤트 상태</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">시작 일시</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">종료 일시</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">현재 인원</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">최대 수용 인원</th>
<th scope="col" class="relative px-6 py-3"><span class="sr-only">상세</span></th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="placeName px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1</td>
<td class="eventName px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">테스트 이벤트</td>
<td class="eventStatus px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">OPENED</span>
</td>
<td class="eventStartDatetime px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2021-01-01 09:00:00</td>
<td class="eventEndDatetime px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2021-01-01 10:00:00</td>
<td class="currentNumberOfPeople px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">0</td>
<td class="capacity px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">10</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a class="text-indigo-600 hover:text-indigo-900">상세</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
2 changes: 1 addition & 1 deletion src/main/resources/templates/event/index.th.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<attr sel="tr[0]" th:each="event : ${events}">
<attr sel="td.placeName" th:text="${event.placeName}" />
<attr sel="td.eventName" th:text="${event.eventName}" />
<attr sel="td.eventStatus" th:text="${event.eventStatus}" />
<attr sel="td.eventStatus/span" th:text="${event.eventStatus}" />
<attr sel="td.eventStartDatetime" th:text="${#temporals.format(event.eventStartDatetime, 'M/d (ha)', 'US')}" />
<attr sel="td.eventEndDatetime" th:text="${#temporals.format(event.eventEndDatetime, 'M/d (ha)', 'US')}" />
<attr sel="td.currentNumberOfPeople" th:text="${event.currentNumberOfPeople}" />
Expand Down

0 comments on commit 8190b38

Please sign in to comment.