Skip to content

Commit

Permalink
프론트 코드 디자인 변경
Browse files Browse the repository at this point in the history
  • Loading branch information
@SummerToday
SummerToday committed Jul 6, 2024
1 parent ea4a220 commit f8184f4
Show file tree
Hide file tree
Showing 4 changed files with 334 additions and 45 deletions.
81 changes: 77 additions & 4 deletions src/main/resources/templates/article.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,83 @@
<meta charset="UTF-8">
<title>블로그 글</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
body, html {
height: 100%;
margin: 0;
font-family: 'Helvetica Neue', Arial, sans-serif;
background: #f7f9fc;
}

.header-custom {
background: #6a82fb;
background: linear-gradient(to right, #fc5c7d, #6a82fb);
color: white;
padding: 3rem 0;
text-align: center;
margin-bottom: 2rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.header-custom h1, .header-custom h4 {
margin: 0;
font-weight: 300;
}

.container {
margin-top: 2rem;
}

article {
background: white;
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

header h1 {
font-size: 2rem;
font-weight: bold;
border-bottom: 2px solid #fc5c7d;
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}

.text-muted {
color: #6c757d !important;
}

section p {
font-size: 1.2rem;
color: #333;
margin-bottom: 1rem;
}

.btn-primary {
background-color: #fc5c7d;
border: none;
transition: background-color 0.3s ease;
}

.btn-primary:hover {
background-color: #d4506c;
}

.btn-secondary {
background-color: #6a82fb;
border: none;
transition: background-color 0.3s ease;
}

.btn-secondary:hover {
background-color: #5563e7;
}
</style>
</head>
<body>
<div class="p-5 mb-5 text-center</> bg-light">
<h1 class="mb-3">My Blog</h1>
<h4 class="mb-3">블로그에 오신 것을 환영합니다.</h4>
<div class="header-custom">
<h1 class="mb-3">What's your story?</h1>
<h4 class="mb-3">당신의 이야기를 들려주세요!</h4>
</div>

<div class="container mt-5">
Expand All @@ -34,4 +106,5 @@ <h1 class="fw-bolder mb-1" th:text="${article.title}"></h1>
</div>

<script src="/js/article.js"></script>
</body>
</body>
</html>
113 changes: 98 additions & 15 deletions src/main/resources/templates/articleList.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,116 @@
<meta charset="UTF-8">
<title>블로그 글 목록</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
body, html {
height: 100%;
margin: 0;
font-family: 'Helvetica Neue', Arial, sans-serif;
background: #f7f9fc;
}

.header-custom {
background: #6a82fb;
background: linear-gradient(to right, #fc5c7d, #6a82fb);
color: white;
padding: 3rem 0;
text-align: center;
margin-bottom: 2rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.header-custom h1, .header-custom h4 {
margin: 0;
font-weight: 300;
}

.container {
margin-top: 2rem;
}

.card {
margin-bottom: 1rem;
border: none;
border-radius: 1rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.card:hover {
transform: translateY(-5px);
}

.card-header {
background: #6a82fb;
color: white;
border-radius: 1rem 1rem 0 0;
font-weight: bold;
}

.btn-custom {
background-color: #fc5c7d;
color: white;
border: none;
transition: background-color 0.3s ease;
}

.btn-custom:hover {
background-color: #d4506c;
}

.btn-logout {
background-color: #6a82fb;
color: white;
border: none;
margin-top: 2rem;
transition: background-color 0.3s ease;
}

.btn-logout:hover {
background-color: #5563e7;
}

@media (max-width: 768px) {
.header-custom h1 {
font-size: 2rem;
}

.header-custom h4 {
font-size: 1rem;
}
}
</style>
</head>
<body>
<div class="p-5 mb-5 text-center</> bg-light">
<h1 class="mb-3">My Blog</h1>
<h4 class="mb-3">블로그에 오신 것을 환영합니다.</h4>
<div class="header-custom">
<h1 class="mb-3">What's your story?</h1>
<h4 class="mb-3">당신의 이야기를 들려주세요!</h4>
</div>

<div class="container">
<button type="button" id="create-btn"
th:onclick="|location.href='@{/new-article}'|"
class="btn btn-secondary btn-sm mb-3">글 등록</button>
<div class="row-6" th:each="item : ${articles}">
<div class="card">
<div class="card-header" th:text="${item.id}">
</div>
<div class="card-body">
<h5 class="card-title" th:text="${item.title}"></h5>
<p class="card-text" th:text="${item.content}"></p>
<a th:href="@{/articles/{id}(id=${item.id})}" class="btn btn-primary">보러가기</a>
class="btn btn-custom btn-sm mb-3">글 등록</button>
<div class="row" th:each="item : ${articles}">
<div class="col-md-6">
<div class="card">
<div class="card-header" th:text="${item.id}"></div>
<div class="card-body">
<h5 class="card-title" th:text="${item.title}"></h5>
<p class="card-text" th:text="${item.content}"></p>
<a th:href="@{/articles/{id}(id=${item.id})}" class="btn btn-primary">보러가기</a>
</div>
</div>
</div>
<br>
</div>

<button type="button" class="btn btn-secondary" onclick="location.href='/logout'">로그아웃</button>
<button type="button" class="btn btn-logout" onclick="location.href='/logout'">로그아웃</button>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="/js/token.js"></script>
<script src="/js/article.js"></script>
</body>
</body>
</html>
80 changes: 76 additions & 4 deletions src/main/resources/templates/newArticle.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,82 @@
<meta charset="UTF-8">
<title>블로그 글</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
body, html {
height: 100%;
margin: 0;
font-family: 'Helvetica Neue', Arial, sans-serif;
background: #f7f9fc;
}

.header-custom {
background: #6a82fb;
background: linear-gradient(to right, #fc5c7d, #6a82fb);
color: white;
padding: 3rem 0;
text-align: center;
margin-bottom: 2rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.header-custom h1, .header-custom h4 {
margin: 0;
font-weight: 300;
}

.container {
margin-top: 2rem;
}

article {
background: white;
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

header input {
font-size: 1.5rem;
font-weight: bold;
border: none;
border-bottom: 2px solid #fc5c7d;
border-radius: 0;
box-shadow: none;
margin-bottom: 1rem;
transition: border-color 0.3s ease;
}

header input:focus {
border-color: #6a82fb;
box-shadow: none;
}

section textarea {
border: 2px solid #fc5c7d;
border-radius: 0.5rem;
transition: border-color 0.3s ease;
}

section textarea:focus {
border-color: #6a82fb;
box-shadow: none;
}

.btn-primary {
background-color: #fc5c7d;
border: none;
transition: background-color 0.3s ease;
}

.btn-primary:hover {
background-color: #d4506c;
}
</style>
</head>
<body>
<div class="p-5 mb-5 text-center</> bg-light">
<h1 class="mb-3">My Blog</h1>
<h4 class="mb-3">블로그에 오신 것을 환영합니다.</h4>
<div class="header-custom">
<h1 class="mb-3">What's your story?</h1>
<h4 class="mb-3">당신의 이야기를 들려주세요!</h4>
</div>

<div class="container mt-5">
Expand All @@ -31,4 +102,5 @@ <h4 class="mb-3">블로그에 오신 것을 환영합니다.</h4>
</div>

<script src="/js/article.js"></script>
</body>
</body>
</html>
Loading

0 comments on commit f8184f4

Please sign in to comment.