Merge pull request #258 from Link-MIND/feat/#256

feature(admin.html): 페이지 올라가는지 확인
Link-MIND · Feb 3, 2025 · 1b66082 · 1b66082
2 parents 3ae6447 + 0ec709e
commit 1b66082
Show file tree

Hide file tree

Showing 5 changed files with 300 additions and 0 deletions.
diff --git a/linkmind/src/main/resources/templates/basic/admin.html b/linkmind/src/main/resources/templates/basic/admin.html
@@ -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>
diff --git a/linkmind/src/main/resources/templates/basic/linkListPage.html b/linkmind/src/main/resources/templates/basic/linkListPage.html
@@ -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>
diff --git a/linkmind/src/main/resources/templates/basic/qrForm.html b/linkmind/src/main/resources/templates/basic/qrForm.html
@@ -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>
diff --git a/linkmind/src/main/resources/templates/basic/register.html b/linkmind/src/main/resources/templates/basic/register.html
@@ -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>
diff --git a/linkmind/src/main/resources/templates/basic/text-basic.html b/linkmind/src/main/resources/templates/basic/text-basic.html
@@ -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>