Showing
1 changed file
with
26 additions
and
1 deletions
| ... | @@ -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; | ... | ... |
-
Please register or login to post a comment