Skip to content

[DB] 로그인 페이지의 깨진 카카오 아이콘 SVG로 복원 #66

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

Merged
usn757 merged 1 commit into from
Jun 7, 2025
Merged

[DB] 로그인 페이지의 깨진 카카오 아이콘 SVG로 복원 #66

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
297 changes: 141 additions & 156 deletions src/main/resources/templates/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,168 +1,153 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/defaultLayout}">
<head>
<meta charset="UTF-8">
<title>PETTY - 로그인</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #fdf7e4;
color: #333;
padding: 20px;
}
h1 {
color: #f1c40f;
text-align: center;
}
.login-container {
max-width: 400px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
div {
margin-bottom: 15px;
}
label {
font-weight: bold;
color: #f39c12;
display: block;
margin-bottom: 5px;
}
input[type="email"], input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #f39c12;
border-radius: 4px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #f39c12;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #f1c40f;
}
.social-login {
margin-top: 20px;
text-align: center;
}
.social-login hr {
margin: 20px 0;
border: 0;
border-top: 1px solid #ddd;
}
/* Common social button styles */
.social-button {
width: 100%;
padding: 10px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px; /* Add some space between social buttons */
}
.social-icon {
margin-right: 10px;
width: 20px;
height: 20px;
}
<title>로그인</title>
<th:block layout:fragment="css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" th:href="@{/css/bootstrap-overrides.css}"/>
<style>
.login-form-container {
max-width: 450px;
margin: 0 auto;
}

/* GitHub button specific styles */
.github-button {
background-color: #333;
color: white;
}
.github-button:hover {
background-color: #555;
}
.social-login-divider {
display: flex;
align-items: center;
text-align: center;
color: var(--secondary-text-color);
margin: 1.5rem 0;
}

/* Kakao button specific styles */
.kakao-button {
background-color: #FEE500; /* Kakao yellow */
color: #3C1E1E; /* Dark brown for text */
}
.kakao-button:hover {
background-color: #FFDE00; /* Lighter yellow on hover */
}
.kakao-button .social-icon {
fill: #3C1E1E; /* Fill color for Kakao icon */
}
</style>
.social-login-divider::before,
.social-login-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid var(--input-border-color);
}

.social-login-divider:not(:empty)::before {
margin-right: .5em;
}

.social-login-divider:not(:empty)::after {
margin-left: .5em;
}

.social-login-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
margin-bottom: 10px;
padding: 10px;
border-radius: var(--border-radius-sm);
font-weight: bold;
border: 1px solid var(--input-border-color);
}

.social-login-btn img {
width: 20px;
height: 20px;
}

.social-login-btn.kakao {
background-color: #FEE500;
color: #191919;
border-color: #FEE500;
}

.social-login-btn.github {
background-color: #333;
color: white;
border-color: #333;
}
</style>
</th:block>
</head>
<body>
<h1>로그인</h1>
<div class="login-container">
<div>
<label for="username">아이디(email):</label>
<input type="email" id="username" required>
</div>
<div>
<label for="password">비밀번호:</label>
<input type="password" id="password" required>
</div>
<div>
<button onclick="login()">로그인</button>
</div>
<th:block layout:fragment="content">
<div class="container mt-4">
<div class="p-md-4 p-3 bg-white rounded shadow-sm">
<div class="login-form-container">
<h1 class="text-center mb-4">로그인</h1>

<form id="loginForm">
<div class="mb-3">
<label for="username" class="form-label">아이디 (이메일)</label>
<input type="email" class="form-control" id="username" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">비밀번호</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary">로그인</button>
</div>
</form>


<div class="social-login">
<hr>
<p>소셜 계정으로 로그인</p>

<button class="social-button kakao-button" onclick="location.href='/oauth2/authorization/kakao'">
<svg class="social-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<!-- 카카오톡 말풍선 아이콘 스타일 -->
<path fill="black" d="M12 2C6.48 2 2 5.94 2 10.5c0 2.67 1.64 5.03 4.18 6.5-.2.75-.7 2.05-.8 2.3 0 0-.01.1.05.14.06.04.14 0 .14 0 .18-.03 2.1-1.4 2.96-2.03.77.16 1.57.26 2.47.26 5.52 0 10-3.94 10-8.5S17.52 2 12 2z"/>
</svg>
카카오로 로그인
</button>

<button class="social-button github-button" onclick="location.href='/oauth2/authorization/github'">
<svg class="social-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
GitHub로 로그인
</button>
<div class="social-login-buttons">
<a href="/oauth2/authorization/kakao" class="btn social-login-btn kakao text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
style="width:20px; height:20px; margin-right: 10px;">
<path fill="#191919"
d="M12 2C6.48 2 2 5.94 2 10.5c0 2.67 1.64 5.03 4.18 6.5-.2.75-.7 2.05-.8 2.3 0 0-.01.1.05.14.06.04.14 0 .14 0 .18-.03 2.1-1.4 2.96-2.03.77.16 1.57.26 2.47.26 5.52 0 10-3.94 10-8.5S17.52 2 12 2z"/>
</svg>
카카오로 로그인
</a>

<a href="/oauth2/authorization/github" class="btn social-login-btn github text-decoration-none">
<svg class="social-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"
style="width:20px; height:20px; margin-right: 10px;">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
GitHub으로 로그인
</a>
</div>
</div>
</div>
</div>
</div>

<script>
// 로그인 함수
async function login() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;

try {
const response = await fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username, password })
});

if (response.ok) {
window.location.href = '/';
// }
} else {
alert('로그인 실패');
</th:block>

<th:block layout:fragment="script">
<script>
// form의 submit 이벤트를 가로채서 처리
document.getElementById('loginForm').addEventListener('submit', function (event) {
event.preventDefault(); // 폼의 기본 제출 동작을 막음
login(); // 기존 login 함수 호출
});

// 로그인 함수
async function login() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;

try {
const response = await fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({username, password})
});

if (response.ok) {
window.location.href = '/'; // 로그인 성공 시 메인 페이지로 이동
} else {
const errorText = await response.text();
// 서버에서 커스텀 에러 메시지를 보냈다면 표시, 아니면 일반 메시지
alert(errorText || '아이디 또는 비밀번호가 일치하지 않습니다.');
}
} catch (error) {
console.error('로그인 에러:', error);
alert('로그인 중 오류가 발생했습니다.');
}
} catch (error) {
console.error('로그인 에러:', error);
alert('로그인 중 오류가 발생했습니다.');
}
}
</script>
</script>
</th:block>
</body>
</html>