Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature(admin.html): 페이지 올라가는지 확인 #258

Merged
merged 1 commit into from
Feb 3, 2025
Merged

feature(admin.html): 페이지 올라가는지 확인 #258

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions linkmind/src/main/resources/templates/basic/admin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>환영합니다</title>
</head>
<body>
<h1 id="welcomeMessage"></h1> <!-- ID를 추가하여 JavaScript에서 접근 가능하게 함 -->
</body>

<script>
// 세션 스토리지에서 userName을 가져옴
const userName = sessionStorage.getItem('userName');

// userName이 존재하는 경우 환영 메시지를 설정
if (userName) {
document.getElementById('welcomeMessage').innerText = userName + '님 환영합니다!';
} else {
document.getElementById('welcomeMessage').innerText = '환영합니다!';
}
</script>
</html>
47 changes: 47 additions & 0 deletions linkmind/src/main/resources/templates/basic/linkListPage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Links</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
.link-container {
display: flex;
flex-direction: column;
margin: 20px;
}

.link-item {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 5px 0;
display: flex;
align-items: center;
}

.link-thumbnail {
width: 50px;
height: 50px;
margin-right: 10px;
border-radius: 5px;
}

.link-title {
font-size: 18px;
}
</style>
</head>
<body>
<div th:if="${links.size() == 0}">
<h3>링크가 현재 없습니다!</h3>
</div>
<div class="link-container">
<h1>Links List</h1>
<div th:each="link : ${links}" class="link-item">
<img th:src="${link.thumbnailUrl}" alt="Thumbnail" class="link-thumbnail"/>
<span class="link-title" th:text="${link.title}"></span>
</div>
</div>
</body>
</html>
101 changes: 101 additions & 0 deletions linkmind/src/main/resources/templates/basic/qrForm.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>입력폼 페이지</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f8ff; /* 배경색 조정 가능 */
}

.form-container {
text-align: center;
}

.input-field {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
font-size: 1rem;
width: 300px;
margin-bottom: 15px;
}

.submit-button {
background-color: #add8e6; /* 연한 파란색 */
border: none;
border-radius: 5px;
color: white;
padding: 15px 30px;
font-size: 1.2rem;
cursor: pointer;
transition: background-color 0.3s;
}

.submit-button:hover {
background-color: #87ceeb; /* 버튼 호버 색상 */
}
</style>
</head>
<body>


<h1>QR 코드를 관리자 디스코드에서 등록하셨나요?</h1>

<div class="form-container">

<h2>입력코드를 입력하세요!</h2>
<form id="codeForm">
<input type="text" class="input-field" placeholder="코드를 입력하세요" id="code"/>
<br>
<button class="submit-button" type="submit">제출</button>
</form>
</div>

<script>
document.getElementById('codeForm').addEventListener('submit', function(event) {
event.preventDefault(); // 기본 폼 제출 방지

const code = document.getElementById('code').value;

// JSON 데이터 생성
const data = {
code: code,
};

// AJAX 요청
fetch('/admin/verify-code', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => {
if (response.ok) {
return response.json();
}
throw new Error('네트워크 응답이 좋지 않습니다.');
})
.then(data => {
console.log(data); // 서버에서 반환한 데이터 처리
alert(data.data.userName); // 예를 들어, 성공 메시지 표시
if (data.redirectUrl) { // 리다이렉트 URL이 있는 경우
// userName을 세션 스토리지에 저장
sessionStorage.setItem('userName', data.data.userName);
window.location.href = data.redirectUrl; // 리다이렉트
}
})
.catch(error => {
console.error('문제가 발생했습니다:', error);
});
});
</script>

</body>
</html>
88 changes: 88 additions & 0 deletions linkmind/src/main/resources/templates/basic/register.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f8ff; /* 배경색 조정 가능 */
}

.form-container {
text-align: center;
border: 1px solid #ccc;
border-radius: 10px;
padding: 20px;
background-color: white;
}

.input-field {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
font-size: 1rem;
width: 300px;
margin-bottom: 15px;
}

.submit-button {
background-color: #add8e6; /* 연한 파란색 */
border: none;
border-radius: 5px;
color: white;
padding: 15px 30px;
font-size: 1.2rem;
cursor: pointer;
transition: background-color 0.3s;
}

.submit-button:hover {
background-color: #87ceeb; /* 버튼 호버 색상 */
}
</style>
</head>
<body>

<div class="form-container">
<h1>로그인</h1>
<form id="loginForm" th:action="@{/admin/register}" method="post" onsubmit="submitForm(event)">
<input type="text" class="input-field" placeholder="아이디를 입력하세요" th:name="'username'" required/>
<br>
<input type="password" class="input-field" placeholder="비밀번호를 입력하세요" th:name="'password'" required/>
<br>
<button class="submit-button" type="submit">로그인</button>
</form>
</div>

<script>
async function submitForm(event) {
event.preventDefault(); // 기본 폼 제출 방지

const formData = new FormData(document.getElementById('loginForm'));
const jsonData = Object.fromEntries(formData.entries()); // FormData를 JSON으로 변환

const response = await fetch('/admin/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json' // JSON 형식으로 전송
},
body: JSON.stringify(jsonData) // JSON 문자열로 변환
});

if (response.ok) {
const data = await response.json();
window.location.href = data.redirectUrl; // 리다이렉트 URL로 이동
} else {
// 오류 처리
console.error('Registration failed:', response.statusText);
}
}
</script>

</body>
</html>
42 changes: 42 additions & 0 deletions linkmind/src/main/resources/templates/basic/text-basic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>버튼 선택 페이지</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f8ff; /* 배경색 조정 가능 */
}
.button-container {
text-align: center;
}
.button {
background-color: #add8e6; /* 연한 파란색 */
border: none;
border-radius: 5px;
color: white;
padding: 15px 30px;
font-size: 1.2rem;
cursor: pointer;
transition: background-color 0.3s;
}
.button:hover {
background-color: #87ceeb; /* 버튼 호버 색상 */
}
</style>
</head>
<body>

<div class="button-container">
<button class="button" th:onclick="|location.href='@{/basic/hi}'|" type="button">개발자 백 오피스</button>
<br><br>
<button class="button" th:onclick="|location.href='@{/swagger-ui/index.html#/}'|" type="button">손님</button>
</div>

</body>
</html>