- 프로젝트를 시작하기 위해 스프링부트 프로젝트를 생성합니다.
- Spring Boot : 3.2.1 , Openjdk : 21, Gradle : 8.5 을 사용합니다.
- 필요한 dependency를 추가 합니다.
- 추후에 필요한 부분은 따로 추가를 할 예정이고 현재는 이렇게만 추가 하도록 하겠습니다.
gitignore.io
Create useful .gitignore files for your project
www.toptal.com
스프링부트를 생성을 할 때 기본적인 gitignore을 추가를 해주긴 하지만 저는 MacOS, Window 등 더 다양한 설정을 하기 위해서 따로 추가를 해주도록 하겠습니다.
저는 Java, Gradle, Intellij+all, VisualStudioCode, MacOS, Windows를 추가하여 변경을 했습니다.
그럼 이제 프로젝트의 기본적인 설정은 완료가 된 것 같습니다.
해당 어플리케이션 실행을 하려고 하니 데이터베이스 설정을 해주지 않아 오류가 나오는 상황입니다.
그래서 먼저 mysql로 데이터베이스를 만들어준 후 실행을 해보도록 하겠습니다.
인텔리제이에서 간단하게 mysql을 설정해주고 application.yaml 파일에 datasource 정보를 입력해주도록 하겠습니다.
application.yml
spring:
profiles:
active: dev
include:
- db
jpa:
hibernate:
ddl-auto: create
show_sql: true
properties:
hibernate:
format_sql: true
default_batch_fetch_size: 100
dialect: org.hibernate.dialect.MySQLDialect
logging:
level:
org.hibernate.type: trace # 콘솔차에 조건에 바인딩되는 값 및 조회 결과 출력
org.hibernate.SQL: debug # logger를 통해 하이버네이트 실행 SQL
org.hibernate.type.descriptor.sql: trace # sql의 ? 값을 Parameter로 보여줌.
application-db.yml
spring:
datasource:
username: ${DATABASE_USERNAME}
password: ${DATABASE_PASSWORD}
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://${DATABASE_URL}/${DATABASE_NAME}?serverTimezone=UTC&characterEncoding=UTF-8
데이터베이스 정보는 환경변수로 설정을 해줍니다.
설정을 해주고 실행을 진행을 했는데 다음과 같은 오류가 나왔습니다.
java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES)
저는 정확하게 설정을 해줬는데 DB에 접속 허용이 되지 않는 이유가 무엇일까 찾아봤습니다.
로깅 설정도 해주고 여러가지 확인을 하던 도중
저는 환경 변수로 설정을 해둔 DATABASE_PASSWORD 부분에서 오타가 있던 것을 확인 했습니다.
오타를 수정한 후 정상적으로 어플리케이션이 기동 되는 것을 확인 했습니다.
이제 첫 화면의 구성을 위해
resources/static 폴더 내부에 index.html을 만들어줍니다.
간단하게 헤더만 설정 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>온라인 쇼핑몰</title>
<link rel="stylesheet" href="./css/mainPage.css">
</head>
<body>
<header class="main_header">
<div class="logo">Malls</div>
<div class="user-controls">
<div class="icon my-page">
<img src="./images/user.png" alt="My Page" class="icon-img">
마이페이지
</div>
<div class="icon like">
<img src="./images/heart.png" alt="Like" class="icon-img">
좋아요
</div>
<div class="icon shopping-bag">
<img src="./images/bag.png" alt="Shopping Bag" class="icon-img">
장바구니
</div>
<div class="login" onclick="redirectToLogin()">
<img src="./images/login.png" alt="Login" class="icon-img">
로그인
</div>
</div>
</header>
<script src="js/redirect.js"></script>
</body>
</html>헤더 설정 후
mainPage.css를 작성 합니다.
/* 헤더와 로고 스타일링 */
.main_header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.logo {
font-size: 36px;
font-weight: bold;
}
/* 사용자 인터페이스 컨트롤 스타일링 */
.user-controls {
display: flex;
align-items: center;
}
.user-controls > div {
margin-left: 10px;
cursor: pointer;
}
/* 아이콘 스타일링 */
.icon {
display: flex;
align-items: center;
padding: 5px 10px;
cursor: pointer;
}
.icon-img {
width: 24px;
height: 24px;
margin-right: 5px;
}
/* 추가 스타일링 */
그 후에 redirect.js도 생성합니다.
function redirectToLogin() {
window.location.href = "html/login.html";
}
function redirectToSignup() {
window.location.href = "html/signup.html";
}
function redirectToPasswordSearch() {
window.location.href = "html/passwordSearch.html";
}
function redirectToHome() {
window.location.href = "../index.html";
}
여러 리다이렉트를 생성했습니다. 모두 로그인까지 쓰이는 내용이니 미리 추가를 해둡니다.
그 후 login.html을 작성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인 - Malls</title>
<link rel="stylesheet" href="/css/loginPage.css">
</head>
<body>
<div class="login-container">
<h1 class="login-title">로그인</h1>
<form class="login-form">
<div class="input-container">
<input type="text" id="username" placeholder="아이디 (이메일)" required>
</div>
<div class="input-container">
<input type="password" id="password" placeholder="비밀번호" required>
</div>
<div class="input-container">
<button type="submit" class="login-button">로그인하기</button>
</div>
</form>
<div class="social-login">
<button class="social-button kakao">카카오로 로그인</button>
<button class="social-button naver">네이버로 로그인</button>
</div>
<div class="additional-links">
<div class="signup-link" onclick="redirectToSignup()">회원가입 하기</div>
<div class="forgot-password-link" onclick="redirectToPasswordSearch()">비밀번호 찾기</div>
</div>
<div class="additional-links">
<div class="home-link" onclick="redirectToHome()">홈으로 가기</div>
</div>
</div>
<script src="/js/redirect.js"></script>
</body>
</html>
그리고 동일하게 css도 작성합니다.
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
background: white;
padding: 40px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 300px;
}
.login-title {
margin-bottom: 30px;
font-size: 32px;
color: #333;
}
.input-container {
margin-bottom: 20px;
}
.input-container input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.login-button {
width: 100%;
padding: 10px;
border: none;
border-radius: 4px;
background-color: #333;
color: white;
cursor: pointer;
}
.login-button:hover {
background-color: #555;
}
.social-button {
background-color: #FEE500; /* 카카오 색상 */
border: none;
border-radius: 4px;
padding: 10px;
width: calc(50% - 10px);
margin: 5px;
cursor: pointer;
}
.social-button.naver {
background-color: #03C75A; /* 네이버 색상 */
}
.additional-links {
margin-top: 10px;
display: flex; /* 이 부분을 추가하여 자식 요소들을 가로로 나열합니다. */
justify-content: center; /* 가운데 정렬을 위해 추가합니다. */
gap: 10px; /* 요소들 사이의 간격을 위해 추가합니다. */
}
.additional-links div {
cursor: pointer; /* 클릭 가능함을 나타내기 위해 추가합니다. */
color: #333; /* 기본 하이퍼링크 색상을 사용합니다. */
text-decoration: none; /* 밑줄을 제거합니다. */
padding: 5px 10px; /* 클릭 영역을 늘리기 위해 패딩을 추가합니다. */
}
@media (max-width: 400px) {
.login-container {
width: 95%;
padding: 20px;
}
}
이제 메인 페이지에 헤더 부분에 로그인을 할 수가 있게 되고 로그인 페이지로 이동이 가능합니다.
다음 글에서는 회원가입을 진행 할 수 있도록 회원 가입 페이지를 만들겠습니다.
그리고 스프링부트의 시큐리티 설정과 로그 설정 그리고 회원 가입 API를 작성해보록 하겠습니다.
'Project' 카테고리의 다른 글
| Chats 프로젝트 (3) - logack, Signup (1) | 2024.01.09 |
|---|
