[#198] add: 토스트 시스템 구현

simian114 · Aug 8, 2024 · a93aa26 · a93aa26
1 parent e4feb84
commit a93aa26
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 17 deletions.
diff --git a/src/main/java/com/blog/bespoke/infrastructure/web/htmx/Toast.java b/src/main/java/com/blog/bespoke/infrastructure/web/htmx/Toast.java
@@ -0,0 +1,36 @@
+package com.blog.bespoke.infrastructure.web.htmx;
+
+import java.util.Map;
+
+public class Toast {
+    static public final String TRIGGER = "toast";
+
+    static private Map<String, String> show(Level level, String message) {
+        return Map.of("level", level.level, "message", message);
+    }
+
+    static public Map<String, String> error(String message) {
+        return show(Level.ERROR, message);
+    }
+
+    static public Map<String, String> info(String message) {
+        return show(Level.INFO, message);
+    }
+
+    static public Map<String, String> success(String message) {
+        return show(Level.SUCCESS, message);
+    }
+
+    public enum Level {
+        WARNING("warning"),
+        ERROR("error"),
+        INFO("info"),
+        SUCCESS("success");
+
+        public final String level;
+
+        Level(String level) {
+            this.level = level;
+        }
+    }
+}
diff --git a/...main/java/com/blog/bespoke/presentation/web/view/myblog/BlogCategoryManageController.java b/...main/java/com/blog/bespoke/presentation/web/view/myblog/BlogCategoryManageController.java
@@ -3,15 +3,13 @@
 import com.blog.bespoke.application.dto.request.CategoryCreateRequestDto;
 import com.blog.bespoke.application.dto.response.UserResponseDto;
 import com.blog.bespoke.application.usecase.user.UserCategoryUseCase;
-import com.blog.bespoke.domain.model.category.Category;
 import com.blog.bespoke.domain.model.user.CategoryUpdateCmd;
 import com.blog.bespoke.domain.model.user.User;
-import com.blog.bespoke.infrastructure.aop.ResponseEnvelope.Envelope;
 import com.blog.bespoke.infrastructure.web.argumentResolver.annotation.LoginUser;
+import com.blog.bespoke.infrastructure.web.htmx.Toast;
 import io.github.wimdeblauwe.htmx.spring.boot.mvc.HtmxResponse;
 import jakarta.validation.Valid;
 import lombok.RequiredArgsConstructor;
-import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.validation.BindingResult;
@@ -70,27 +68,40 @@ public String categoryUpdate(
      * 카테고리 생성 api
      */
     @PostMapping("/blog/manage/categories")
-    public String categoryCreate(@LoginUser User currentUser,
-                                 @Valid @ModelAttribute("category") CategoryCreateRequestDto requestDto,
-                                 BindingResult bindingResult) {
+    public HtmxResponse categoryCreate(@LoginUser User currentUser,
+                                       @Valid @ModelAttribute("category") CategoryCreateRequestDto requestDto,
+                                       BindingResult bindingResult
+    ) {
         if (bindingResult.hasErrors()) {
-            return "page/myblog/categoryForm";
+            return HtmxResponse.builder()
+                    .view("page/myblog/categoryForm")
+                    .preventHistoryUpdate()
+                    .build();
         }
         userCategoryUseCase.createCategory(requestDto, currentUser.getId());
-        return "redirect:/blog/manage/categories";
+        return HtmxResponse.builder()
+                .redirect("/blog/manage/categories")
+                .trigger(
+                        Toast.TRIGGER,
+                        Toast.info("category created!")
+                )
+                .build();
     }
 
     /**
      * 카테고리 삭제 api
      */
-    @Envelope("category delete success!")
-    @ResponseBody
     @DeleteMapping("/blog/manage/categories/{categoryId}")
-    public ResponseEntity<?> deleteCategory(@PathVariable("categoryId") Long categoryId,
-                                 @LoginUser User currentUser
+    public HtmxResponse deleteCategory(@PathVariable("categoryId") Long categoryId,
+                                       @LoginUser User currentUser
     ) {
         userCategoryUseCase.deleteCategory(categoryId, currentUser);
-        return ResponseEntity.ok().build();
+        return HtmxResponse.builder()
+                .trigger(
+                        Toast.TRIGGER,
+                        Toast.info("success")
+                )
+                .build();
     }
 
     /**
@@ -106,6 +117,9 @@ public HtmxResponse changeVisibility(@PathVariable("categoryId") Long categoryId
         model.addAttribute("category", categoryResponseDto);
         return HtmxResponse.builder()
                 .view("page/myblog/categoryTable :: category-item-row")
+                .trigger(Toast.TRIGGER,
+                        Toast.info("success!")
+                        )
                 .build();
     }
 

diff --git a/src/main/resources/static/css/application.css b/src/main/resources/static/css/application.css
@@ -22466,6 +22466,18 @@ a:hover {
     max-width: 640px;
   }
 }
+.toastify.error {
+  background: linear-gradient(to right, #ff5f6d, #ffc371);
+}
+
+.toastify.success {
+  background: linear-gradient(to right, rgb(0, 176, 155), rgb(150, 201, 61));
+}
+
+.toastify.info {
+  background: linear-gradient(to right, rgb(0, 176, 155), rgb(150, 201, 61));
+}
+
 .home-page__post-list .card {
   transition: transform 0.25s ease-in-out;
 }

diff --git a/src/main/resources/static/css/application.css.map b/src/main/resources/static/css/application.css.map
diff --git a/src/main/resources/styles/component/toastify.scss b/src/main/resources/styles/component/toastify.scss
@@ -0,0 +1,11 @@
+.toastify.error {
+  background: linear-gradient(to right, #ff5f6d, #ffc371);
+}
+
+.toastify.success {
+  background: linear-gradient(to right, rgb(0, 176, 155), rgb(150, 201, 61));
+}
+
+.toastify.info {
+  background: linear-gradient(to right, rgb(0, 176, 155), rgb(150, 201, 61));
+}
diff --git a/src/main/resources/styles/global.scss b/src/main/resources/styles/global.scss
@@ -1,3 +1,4 @@
 @forward "base";
 @forward "common";
+@forward "component";
 @forward "page";
diff --git a/src/main/resources/templates/fragments/post.html b/src/main/resources/templates/fragments/post.html
@@ -17,13 +17,14 @@
             <div class="card-content">
                 <div class="media">
                     <div class="media-left">
-                        <figure class="image is-48x48">
+                        <figure class="image is-48x48 ">
                             <img
                                     src="https://bulma.io/assets/images/placeholders/96x96.png"
                                     alt="Placeholder image"
                                     loading="lazy"
                                     style=""
                                     th:src="${post.author.avatarUrl}"
+                                    class="is-rounded"
                             />
                         </figure>
                     </div>

diff --git a/src/main/resources/templates/layout/layout.html b/src/main/resources/templates/layout/layout.html
@@ -60,7 +60,7 @@
 <!--surreal-->
 </body>
 <!-- 한번만 실행되어야한다. -->
-<script>
+<script type="text/javascript">
     document.addEventListener("DOMContentLoaded", () => {
         document.body.addEventListener("htmx:responseError", function (res) {
             let response = res.detail?.xhr?.response;
@@ -73,8 +73,24 @@
                 gravity: "top",
                 position: "center",
                 stopOnFocus: true,
-                style: {background: "linear-gradient(to right, #ff5f6d, #ffc371)"}
+                className: "error"
+            }).showToast();
+        })
+
+        document.body.addEventListener("toast", function(res) {
+            const level = res.detail.level;
+            const message = res.detail.message;
+
+            Toastify({
+                text: message,
+                duration: 3000,
+                close: true,
+                gravity: "top",
+                position: "center",
+                stopOnFocus: true,
+                className: level,
             }).showToast();
+
         })
 
         NProgress.configure({ showSpinner: false });