Merge pull request #176 from pirogramming/hyungju/main

feat: MD 복사할 때 토스트 뜨도록 수정

Author: Tonyjoo11

static/css/reflections.css

@@ -36,13 +36,67 @@
 }
 
 body {
-  font-family: inherit; /* 이미 있으면 생략 */
   background: #F9F9F9;
 }
 
 button {
   cursor: pointer;
 }
+
+/* 토스트 */
+
+/* 토스트 (테마 맞춘 밝은 카드형 + 상단 슬라이드) */
+.ref-toast {
+  position: fixed;
+  top: 72px;
+  left: 50%;
+  transform: translateX(-50%) translateY(-30px) scale(0.95);
+  background: #fff;
+  color: var(--gray-900);
+  padding: 12px 16px;
+
+  border-radius: 9999px;
+  font-size: 15px;
+  font-weight: 600;
+
+  opacity: 0;
+  z-index: 9999;
+
+  border: 1px solid var(--blue-10);
+  box-shadow: 0 12px 30px rgba(29, 41, 75, 0.15);
+  min-width: 220px;
+  max-width: min(560px, calc(100vw - 24px));
+  text-align: center;
+
+  transition:
+    transform 0.35s cubic-bezier(.22,1.4,.36,1),
+    opacity 0.25s ease;
+}
+
+.ref-toast.show {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0) scale(1);
+}
+
+
+
+/* 성공: 블루 포인트 */
+.ref-toast-success {
+  border-color: var(--blue-20);
+}
+.ref-toast-success::before {
+  content: "✓ ";
+  font-weight: 800;
+  font-size: 15px;
+  padding-left: 5px;
+}
+
+/* 실패: 빨간 포인트 */
+.ref-toast-error {
+  border-color: #fca5a5;
+}
+
+
 /* =========================
    Note List Page
 ========================= */

static/js/reflections.js

@@ -17,6 +17,23 @@
     });
   };
 
+  const showToast = (message, type = "success") => {
+    const toast = document.createElement("div");
+    toast.className = `ref-toast ref-toast-${type}`;
+    toast.textContent = message;
+
+    document.body.appendChild(toast);
+
+    requestAnimationFrame(() => {
+      toast.classList.add("show");
+    });
+
+    setTimeout(() => {
+      toast.classList.remove("show");
+      setTimeout(() => toast.remove(), 300);
+    }, 2000);
+  };
+
   /** ---------------------------
    *  1) Kebab menu (수정/삭제)
    *     - 버튼 클릭: 해당 메뉴 토글
@@ -436,10 +453,10 @@
 
         try {
           await navigator.clipboard.writeText(ta.value);
-          alert("마크다운 복사됨");
+          showToast("마크다운 복사 완료", "success");
         } catch (e) {
           console.error(e);
-          alert("복사 실패");
+          showToast("마크다운 복사 실패", "error");
         }
       });
     });