이정민

copied alert

...@@ -90,8 +90,11 @@ const GifEditor = ({ previewURL }) => { ...@@ -90,8 +90,11 @@ const GifEditor = ({ previewURL }) => {
90 setDownload(null); 90 setDownload(null);
91 setPercent(0); 91 setPercent(0);
92 setViewLink(null); 92 setViewLink(null);
93 + setIsCopied(false);
93 }; 94 };
94 95
96 + // 클립보드 관련
97 + const [isCopied, setIsCopied] = useState(false);
95 const clipboardCopy = (text: string) => { 98 const clipboardCopy = (text: string) => {
96 if (!document.queryCommandSupported("copy")) { 99 if (!document.queryCommandSupported("copy")) {
97 return alert("클립보드가 지원되지 않는 브라우저입니다."); 100 return alert("클립보드가 지원되지 않는 브라우저입니다.");
...@@ -108,6 +111,13 @@ const GifEditor = ({ previewURL }) => { ...@@ -108,6 +111,13 @@ const GifEditor = ({ previewURL }) => {
108 111
109 return null; 112 return null;
110 }; 113 };
114 + const handleShare = (text) => {
115 + setIsCopied(true);
116 + clipboardCopy(text);
117 + setTimeout(() => {
118 + setIsCopied(false);
119 + }, 2000);
120 + };
111 121
112 return ( 122 return (
113 <> 123 <>
...@@ -133,7 +143,7 @@ const GifEditor = ({ previewURL }) => { ...@@ -133,7 +143,7 @@ const GifEditor = ({ previewURL }) => {
133 <div className="download__explain">Click to Copy the Link!</div> 143 <div className="download__explain">Click to Copy the Link!</div>
134 <div 144 <div
135 className="download__copy" 145 className="download__copy"
136 - onClick={() => clipboardCopy(viewLink)} 146 + onClick={() => handleShare(viewLink)}
137 > 147 >
138 {viewLink} 148 {viewLink}
139 <div style={{ marginLeft: "0.5rem" }}> 149 <div style={{ marginLeft: "0.5rem" }}>
...@@ -141,6 +151,7 @@ const GifEditor = ({ previewURL }) => { ...@@ -141,6 +151,7 @@ const GifEditor = ({ previewURL }) => {
141 </div> 151 </div>
142 </div> 152 </div>
143 </div> 153 </div>
154 + <CopiedText {...{ isCopied }}>Copied to Clipboard!</CopiedText>
144 </div> 155 </div>
145 </> 156 </>
146 )} 157 )}
...@@ -361,4 +372,18 @@ const ModalWrapper = styled.div<{ unableToUpload: boolean }>` ...@@ -361,4 +372,18 @@ const ModalWrapper = styled.div<{ unableToUpload: boolean }>`
361 } 372 }
362 `; 373 `;
363 374
375 +const CopiedText = styled.div<{ isCopied: boolean }>`
376 + position: absolute;
377 + z-index: 100;
378 + top: 35rem;
379 + font-size: 1.2rem;
380 + background: white;
381 + padding: 0.7rem 1rem;
382 + white-space: nowrap;
383 + border-radius: 2rem;
384 + transition: 0.3s;
385 + opacity: ${({ isCopied }) => (isCopied ? 1 : 0)};
386 + box-shadow: ${({ theme }) => theme.boxShadow.normal};
387 +`;
388 +
364 export default GifEditor; 389 export default GifEditor;
......