반응형
tailwindCSS 를 적용하는 방법은 해당 글을 보면 된다.
# spring boot TailwindCSS와 연동하기, 사용방법
tailwindcss를 사용해서 앞단을 꾸며보자 tailwindcss를 사용하려면 또 복잡하다.. 안써볼 사람들은 넘어가면 된다. 일단 node.js가 난 이미 깔려있어서 괜찮은데 안깔려있으면 node.js는 무조건 설치하셔
somnote.tistory.com
그럼 이제 타임리프를 사용한 html과 컨트롤러를 만들어서 연결해주면 끝난다!
일단 소셜로그인이 필요하기 떄문에 로그인 화면을 1개 만든다.
참 타임리프 템플릿은 resources/templates 아래에 만들면 된다.
login.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>로그인</title>
<link href="/css/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-6">
<div class="bg-white rounded-xl shadow-md p-6 w-full max-w-md text-center">
<h2 class="text-2xl font-bold text-gray-800 mb-4">소셜 로그인</h2>
<div class="space-y-4 mt-4">
<a href="/oauth2/authorization/google"
class="block w-full py-2 bg-green-500 text-white rounded-lg font-semibold hover:bg-red-600 transition">
구글로 로그인하기
</a>
</div>
</div>
</body>
</html>
그다음 로그인이 성공적으로 완료되면 접속될 페이지를 만든다
dashboard.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>대시보드</title>
<link href="/css/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-6">
<div class="bg-white rounded-xl shadow-md p-6 w-full max-w-md text-center">
<h1 class="text-2xl font-bold text-blue-600 mb-2">안녕하세요!</h1>
<p class="text-lg text-gray-700 mb-4" th:text="'환영합니다, ' + ${nickname} + '님 👋'">사용자명</p>
<div class="space-y-4">
<a href="/diet" class="block w-full py-2 bg-green-500 text-white rounded-lg font-semibold">기록하기</a>
<a href="/study" class="block w-full py-2 bg-indigo-500 text-white rounded-lg font-semibold">언어공부하기</a>
</div>
<div class="mt-6">
<a href="/logout" class="text-sm text-red-500 underline">로그아웃</a>
</div>
</div>
</body>
</html>다 만들었으면 이제 앞단과 연결할 컨트롤러를 만든다.
DashboardController
package com.example.demo.dashboard.controller;
import lombok.RequiredArgsConstructor;
import org.springframework.security.core.annotation.AuthenticationPrincipal;
import org.springframework.security.oauth2.core.user.OAuth2User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
@RequiredArgsConstructor
public class DashboardController {
@GetMapping("/login")
public String loginPage() {
return "login";
}
@GetMapping("/dashboard")
public String dashboard(Model model, @AuthenticationPrincipal OAuth2User principal) {
if (principal != null) {
String nickname = (String) principal.getAttributes().get("name"); // 구글 로그인 이름
model.addAttribute("nickname", nickname);
} else {
model.addAttribute("nickname", "알 수 없음 사용자");
}
return "dashboard";
}
}
이제 구글로그인을 클릭하면 정상적으로 로그인이 되고
만든 dashboard 페이지로 이동된다.
반응형
'🗄️ 백엔드 > 🍃Spring' 카테고리의 다른 글
| # spring boot(java) 제미나이(Gemini) API 연동하기 (무료 버전) (3) | 2025.07.15 |
|---|---|
| # spring boot(gradle) google로그인(소셜 로그인) 연동 방법 3탄(배포된 사이트) (1) | 2025.07.10 |
| # spring boot(gradle) google로그인(소셜 로그인) 연동 방법 1탄 (4) | 2025.07.07 |
| # spring boot프로젝트 웹에서 생성하기 (spring initializer) (0) | 2025.07.07 |
| # HWP 템플릿에 동적으로 ROW 삽입하는 방법 (전자정부프레임워크 + MyBatis) (0) | 2025.07.01 |
