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