feat: 채팅 저장소 클립 보드 저장시 알림 띄우기 (#36)

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Chzzk Plus",
   "description": "네이버 스트리밍 서비스 Chzzk Plus",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "manifest_version": 3,
   "icons": {
     "16": "icon16.png",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "chzzk-plus",
   "private": true,
-  "version": "1.0.11",
+  "version": "1.0.12",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.tsx

@@ -123,7 +123,7 @@ function App() {
       <hr />
 
       <p className="description">* 표시된 설정은 새로고침 후 적용됩니다</p>
-      <p className="version">v1.0.11</p>
+      <p className="version">v1.0.12</p>
     </div>
   );
 }

src/components/Global.css

@@ -18,8 +18,8 @@
   background: #141517;
   z-index: 1000;
   overflow-y: auto;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 .czp-global::-webkit-scrollbar {
   display: none;
@@ -104,4 +104,16 @@
 }
 .czp-chat-st-remove-btn:hover {
   background-color: #353535;
-}
+}
+
+.czp-storage-message {
+  position: absolute;
+  background-color: white;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 0.25rem;
+  padding: 1rem 2rem;
+  font-size: 1.5rem;
+  font-family: "Sandoll Nemony2";
+}

src/components/Global.tsx

@@ -9,6 +9,7 @@ import {
 const MessageStorage = () => {
   const [storage, setStorage] = useState<string[]>([]);
   const [text, setText] = useState<string>("");
+  const [showCopied, setShowCopied] = useState<boolean>(false);
 
   // 저장되어있는 storage 불러오기
   useEffect(() => {
@@ -21,6 +22,7 @@ const MessageStorage = () => {
 
   // 메세지 클립보드에 복사
   const copyMessage = (data: string) => {
+    setShowCopied(true);
     navigator.clipboard.writeText(data).then(() => {});
   };
 
@@ -44,6 +46,22 @@ const MessageStorage = () => {
     });
   };
 
+  useEffect(() => {
+    let timeoutId: number;
+
+    if (showCopied) {
+      timeoutId = setTimeout(() => {
+        setShowCopied(false);
+      }, 1000);
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [showCopied]);
+
   return (
     <>
       <h2 className="czp-storage-heading">채팅 저장소</h2>
@@ -89,6 +107,7 @@ const MessageStorage = () => {
           </div>
         ))}
       </div>
+      {showCopied && <div className="czp-storage-message">복사되었습니다.</div>}
     </>
   );
 };