[EDIT] headerとの間隔を調整しました。

src/main/java/com/example/demo/app/domain/model/UserModel.java

@@ -2,6 +2,8 @@ package com.example.demo.app.domain.model;
 
 import java.time.LocalDate;
 
+import com.example.demo.app.infra.entity.UserEntity;
+
 import lombok.AllArgsConstructor;
 import lombok.Getter;
 
@@ -12,7 +14,7 @@ public class UserModel {
     private String userName;
     private String mailAddress;
     private String password;
-    private Integer secretQuestionId;
+    private Long secretQuestionId;
     private String secretAnswer;
     private LocalDate brithDate;
     private Integer saving;
@@ -21,4 +23,22 @@ public class UserModel {
     private Long goalId;
     private Long courseId;
     private Integer deleteFlag;
+    
+    public static UserModel convertFrom(UserEntity userEntity) {
+		return new UserModel(
+				userEntity.getUserId(),
+				userEntity.getUserName(),
+				userEntity.getMailAddress(),
+				userEntity.getPassword(),
+				userEntity.getQuestionEntity().getSecretQuestionId(),
+				userEntity.getSecretQuestionAnswer(),
+				userEntity.getBirthDate(),
+				userEntity.getSaving(),
+				userEntity.getAnnualIncome(),
+				userEntity.getMonthlyBudget(),
+				userEntity.getGoalEntity().getGoalId(),
+				userEntity.getCourseEntity().getCourseId(),
+				userEntity.getDeleteFlag()
+				);
+	}
 }

src/main/java/com/example/demo/app/domain/service/UserService.java

@@ -1,5 +1,6 @@
 package com.example.demo.app.domain.service;
 
+import com.example.demo.app.domain.model.UserModel;
 import com.example.demo.app.presentation.form.UserForm;
 
 public interface UserService {
@@ -7,4 +8,6 @@ public interface UserService {
 	void register(UserForm userForm);
     
     public void updateCourse(Long userId, Long courseId);
+
+    public UserModel findByUserId(Long userId);
 }

src/main/java/com/example/demo/app/domain/service/impl/UserServiceImpl.java

@@ -2,6 +2,7 @@ package com.example.demo.app.domain.service.impl;
 
 import org.springframework.stereotype.Service;
 
+import com.example.demo.app.domain.model.UserModel;
 import com.example.demo.app.domain.service.UserService;
 import com.example.demo.app.infra.entity.CourseEntity;
 import com.example.demo.app.infra.entity.GoalEntity;
@@ -69,6 +70,11 @@ public class UserServiceImpl implements UserService {
 		userRepository.save(userEntity);
 	}
 	
+	
+	public UserModel findByUserId(Long userId) {
+		
+		return UserModel.convertFrom(userRepository.findById(userId).get());
+	}
 }
 
 

src/main/java/com/example/demo/app/presentation/controller/TransactionController.java

@@ -19,11 +19,15 @@ import org.springframework.web.bind.annotation.RequestParam;
 
 import com.example.demo.app.domain.model.LoginModel;
 import com.example.demo.app.domain.service.CategoryService;
+import com.example.demo.app.domain.service.GoalService;
 import com.example.demo.app.domain.service.TransactionService;
+import com.example.demo.app.domain.service.UserService;
 import com.example.demo.app.presentation.form.CategoryForm;
 import com.example.demo.app.presentation.form.Expense;
+import com.example.demo.app.presentation.form.GoalForm;
 import com.example.demo.app.presentation.form.Income;
 import com.example.demo.app.presentation.form.TransactionForm;
+import com.example.demo.app.presentation.form.UserForm;
 
 import lombok.RequiredArgsConstructor;
 
@@ -33,6 +37,8 @@ public class TransactionController {
 
 	private final TransactionService transactionService;
 	private final CategoryService categoryService;
+	private final GoalService goalService;
+	private final UserService userService;
 
 	// 一覧画面
 	@GetMapping("/transaction/list")
@@ -230,9 +236,8 @@ public class TransactionController {
 	    LocalDate today = LocalDate.now();
 
 	    int year = (years.equals("0")) ? today.getYear() : Integer.parseInt(years);
-		int month = (months.equals("0")) ? today.getMonthValue() : Integer.parseInt(months);
 
-		System.out.println("year : " + year + "month : " + month);
+	    int month = (months.equals("0")) ? today.getMonthValue() : Integer.parseInt(months);
 
 	    YearMonth yearMonth = YearMonth.of(year, month);
 
@@ -240,6 +245,17 @@ public class TransactionController {
 
 	    int firstDayOfWeek = yearMonth.atDay(1).getDayOfWeek().getValue() % 7;
 
+	    YearMonth previousYearMonth = yearMonth.minusMonths(1);
+
+	    int previousYear = previousYearMonth.getYear();
+	    int previousMonth = previousYearMonth.getMonthValue();
+
+	    YearMonth nextYearMonth = yearMonth.plusMonths(1);
+
+	    int nextYear = nextYearMonth.getYear();
+	    int nextMonth = nextYearMonth.getMonthValue();
+
+
 	    model.addAttribute("year", year);
 	    model.addAttribute("month", month);
 	    model.addAttribute("day", today.getDayOfMonth());
@@ -247,25 +263,50 @@ public class TransactionController {
 	    model.addAttribute("lastDay", lastDay);
 	    model.addAttribute("firstDayOfWeek", firstDayOfWeek);
 
-		LocalDate startDate = LocalDate.now().withDayOfMonth(1);
+	    model.addAttribute("previousYear", previousYear);
+	    model.addAttribute("previousMonth", previousMonth);
+
+	    model.addAttribute("nextYear", nextYear);
+	    model.addAttribute("nextMonth", nextMonth);
+
+	    LocalDate startDate = yearMonth.atDay(1);
+	    LocalDate endDate = yearMonth.atEndOfMonth();
 
-		LocalDate endDate = LocalDate.now().withDayOfMonth(LocalDate.now().lengthOfMonth());
 
 	    List<Income> incomeList = transactionService.findTotalIncomeList(startDate, endDate, loginUser.getUserId());
+
 	    List<Expense> expenseList = transactionService.findTotalExpenseList(startDate, endDate, loginUser.getUserId());
 
 	    model.addAttribute("incomeList", incomeList);
-
 	    model.addAttribute("expenseList", expenseList);
 
+
 	    int totalIncome = transactionService.findTotalIncome(startDate, endDate, loginUser.getUserId());
 
 	    int totalExpense = transactionService.findTotalExpense(startDate, endDate, loginUser.getUserId());
 
+
 	    model.addAttribute("totalIncome", totalIncome);
 	    model.addAttribute("totalExpense", totalExpense);
 	    
+	    
+
+	    GoalForm goalForm = GoalForm.convertFrom(goalService.getGoalByUserId(loginUser.getUserId()));
+	    
+	    UserForm userForm = UserForm.convertFrom(userService.findByUserId(loginUser.getUserId()));
+	    
+	    model.addAttribute("achievementRate", goalForm.getAchievementRate());
+	    
+	    model.addAttribute("targetAmount", goalForm.getTargetAmount());
+	    
+	    model.addAttribute("saving", userForm.getSaving());
+	    
+	    model.addAttribute("deadline", goalForm.getDeadline());
+	    
+	    
+
 	    return "menu";
 	}
 
+
 }

src/main/java/com/example/demo/app/presentation/form/UserForm.java

@@ -2,6 +2,8 @@ package com.example.demo.app.presentation.form;
 
 import java.time.LocalDate;
 
+import com.example.demo.app.domain.model.UserModel;
+
 import lombok.AllArgsConstructor;
 import lombok.Data;
 import lombok.NoArgsConstructor;
@@ -21,4 +23,21 @@ public class UserForm {
 	private Integer monthlyBudget;
 	private Long goalId;
 	private Long courseId;
+
+	
+	public static UserForm convertFrom(UserModel userModel) {
+		return new UserForm(
+				userModel.getUserName(),
+				userModel.getMailAddress(),
+				userModel.getPassword(),
+				userModel.getSecretQuestionId(),
+				userModel.getSecretAnswer(),
+				userModel.getBrithDate(),
+				userModel.getSaving(),
+				userModel.getAnnualIncome(),
+				userModel.getMonthlyBudget(),
+				userModel.getGoalId(),
+				userModel.getCourseId()
+				);
+	}
 }

src/main/resources/static/css/menu.css

@@ -42,6 +42,22 @@ td:hover {
     background-color: bisque;
 }
 
+.calendar-title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    gap: 30px;
+
+    margin: 15px 10px;
+}
+
+.calendar-date {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+}
+
 .year {
     font-size: 20px;
 }
@@ -51,8 +67,23 @@ td:hover {
     font-weight: bold;
 }
 
-.calendar-title {
-    margin: 15px 10px;
+.month-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 40px;
+    height: 40px;
+
+    font-size: 28px;
+    text-decoration: none;
+    color: #333;
+
+    border-radius: 50%;
+}
+
+.month-button:hover {
+    background-color: #eee;
 }
 
 .date {

src/main/resources/templates/menu.html

@@ -14,22 +14,30 @@
 
 </head>
 
-<body>
+<body class="pb-5 pt-5">
 
 	<div th:replace="~{header :: header}"></div>
 
 
 	<div class="calendar-title">
 
-		<span class="year" th:text="|${year}年|">
-		</span>
+		<a class="month-button" th:href="@{/menu(years=${previousYear}, months=${previousMonth})}">
+			←
+		</a>
 
-		<span class="month" th:text="|${month}月|">
-		</span>
+		<div class="calendar-date">
+			<span class="year" th:text="|${year}年|"></span>
+			<span class="month" th:text="|${month}月|"></span>
+		</div>
+
+		<a class="month-button" th:href="@{/menu(years=${nextYear}, months=${nextMonth})}">
+			→
+		</a>
 
 	</div>
 
 
+
 	<table id="calendar">
 
 		<thead>
@@ -54,21 +62,25 @@
 				<td th:each="weekDay : ${#numbers.sequence(0, 6)}">
 
 					<a th:if="${week * 7 + weekDay - firstDayOfWeek + 1 >= 1
-					           and week * 7 + weekDay - firstDayOfWeek + 1 <= lastDay}"
-					   th:href="@{/transaction/detail(
+					           and week * 7 + weekDay - firstDayOfWeek + 1 <= lastDay}" th:href="@{/transaction/detail(
 					       todayDates=${T(java.time.LocalDate).of(year, month, week * 7 + weekDay - firstDayOfWeek + 1)}
 					   )}">
 
 
-						<div th:if="${week * 7 + weekDay - firstDayOfWeek + 1 >= 1 and week * 7 + weekDay - firstDayOfWeek + 1 <= lastDay}">
+						<div
+							th:if="${week * 7 + weekDay - firstDayOfWeek + 1 >= 1 and week * 7 + weekDay - firstDayOfWeek + 1 <= lastDay}">
 
 							<div class="date" th:text="${week * 7 + weekDay - firstDayOfWeek + 1}">
 							</div>
 
-							<div th:each="income : ${incomeList}" th:if="${income.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}" class="income" th:text="|収入 +${income.amount}円|">
+							<div th:each="income : ${incomeList}"
+								th:if="${income.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}"
+								class="income" th:text="|収入 +${income.amount}円|">
 							</div>
 
-							<div th:each="expense : ${expenseList}" th:if="${expense.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}" class="expense" th:text="|支出 -${expense.amount}円|">
+							<div th:each="expense : ${expenseList}"
+								th:if="${expense.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}"
+								class="expense" th:text="|支出 -${expense.amount}円|">
 							</div>
 
 						</div>
@@ -101,6 +113,30 @@
 
 	</div>
 
+	<div>
+		<span>目標貯金</span>
+		<span th:text="${targetAmount}"></span>
+		<span>円</span>
+	</div>
+	<div>
+		<span>貯金額</span>
+		<span th:text="${saving}"></span>
+		<span>円</span>
+	</div>
+	
+	<hr>
+	
+	<div>
+		<span>達成率</span>
+		<span th:text="${achievementRate}"></span>
+		<span>円</span>
+	</div>
+	<div>
+		<span>達成期限</span>
+		<span th:text="${deadline}"></span>
+		<span>円</span>
+	</div>
+
 	<div th:replace="~{footer :: footer}"></div>
 
 </body>

src/main/resources/templates/transaction_create.html

@@ -9,7 +9,7 @@
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 
-<body>
+<body class="pb-5 pt-5">
 
 	<div th:replace="~{header :: header}"></div>
 

src/main/resources/templates/transaction_detail.html

@@ -9,7 +9,7 @@
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 
-<body>
+<body class="pb-5 pt-5">
 
 	<div th:replace="~{header :: header}"></div>
 	<h1 th:text="${today}"></h1>

src/main/resources/templates/transaction_list.html

@@ -9,7 +9,7 @@
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 
-<body>
+<body class="pb-5 pt-5">
 
 	<div th:replace="~{header :: header}"></div>
 	

src/main/resources/templates/transaction_update.html

@@ -9,7 +9,7 @@
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 
-<body>
+<body class="pb-5 pt-5">
 
 	<div th:replace="~{header :: header}"></div>