Showing
4 changed files
with
119 additions
and
32 deletions
... | @@ -5,6 +5,9 @@ const Header = () => { | ... | @@ -5,6 +5,9 @@ const Header = () => { |
5 | }; | 5 | }; |
6 | 6 | ||
7 | const Container = styled.div` | 7 | const Container = styled.div` |
8 | + position: fixed; | ||
9 | + top: 0; | ||
10 | + left: 0; | ||
8 | width: 100%; | 11 | width: 100%; |
9 | padding: 1.5rem; | 12 | padding: 1.5rem; |
10 | background-color: white; | 13 | background-color: white; | ... | ... |
... | @@ -7,7 +7,7 @@ const ToastEditor = dynamic(() => import("components/ToastEditor"), { | ... | @@ -7,7 +7,7 @@ const ToastEditor = dynamic(() => import("components/ToastEditor"), { |
7 | }); | 7 | }); |
8 | const Image = ({ previewURL, setPreviewURL }) => { | 8 | const Image = ({ previewURL, setPreviewURL }) => { |
9 | const [file, setFile] = useState(undefined); | 9 | const [file, setFile] = useState(undefined); |
10 | - console.log('previewURL',previewURL) | 10 | + console.log("previewURL", previewURL); |
11 | 11 | ||
12 | // const uploadImage = (file) => { | 12 | // const uploadImage = (file) => { |
13 | // if (!file) { | 13 | // if (!file) { |
... | @@ -39,8 +39,8 @@ const Image = ({ previewURL, setPreviewURL }) => { | ... | @@ -39,8 +39,8 @@ const Image = ({ previewURL, setPreviewURL }) => { |
39 | <ImgBox> | 39 | <ImgBox> |
40 | {/* <div onClick={handleEditor}>asdf</div> */} | 40 | {/* <div onClick={handleEditor}>asdf</div> */} |
41 | {/* {file === undefined ? ( */} | 41 | {/* {file === undefined ? ( */} |
42 | - <> | 42 | + <> |
43 | - {/* <div className="sub-flex"> | 43 | + {/* <div className="sub-flex"> |
44 | <BlankBox /> | 44 | <BlankBox /> |
45 | <div>Click to add a photo</div> | 45 | <div>Click to add a photo</div> |
46 | <input | 46 | <input |
... | @@ -60,19 +60,19 @@ const Image = ({ previewURL, setPreviewURL }) => { | ... | @@ -60,19 +60,19 @@ const Image = ({ previewURL, setPreviewURL }) => { |
60 | /> | 60 | /> |
61 | </div> | 61 | </div> |
62 | <div className="sub-flex">Open Image Editor</div> */} | 62 | <div className="sub-flex">Open Image Editor</div> */} |
63 | - </> | 63 | + </> |
64 | {/* ) : ( */} | 64 | {/* ) : ( */} |
65 | - <img | 65 | + <img |
66 | - id="image" | 66 | + id="image" |
67 | - alt={""} | 67 | + alt={""} |
68 | - style={{ | 68 | + style={{ |
69 | - objectFit: "cover", | 69 | + objectFit: "cover", |
70 | - display: "flex", | 70 | + display: "flex", |
71 | - margin: "0 auto", | 71 | + maxHeight: "90%", |
72 | - width: "50rem", | 72 | + maxWidth: "90%", |
73 | - }} | 73 | + }} |
74 | - src={previewURL as string} | 74 | + src={previewURL as string} |
75 | - /> | 75 | + /> |
76 | {/* )} */} | 76 | {/* )} */} |
77 | </ImgBox> | 77 | </ImgBox> |
78 | {/* <Menu /> */} | 78 | {/* <Menu /> */} |
... | @@ -97,10 +97,12 @@ const Container = styled.div` | ... | @@ -97,10 +97,12 @@ const Container = styled.div` |
97 | width: 100%; | 97 | width: 100%; |
98 | display: flex; | 98 | display: flex; |
99 | justify-content: center; | 99 | justify-content: center; |
100 | + margin-top: 10rem; | ||
100 | `; | 101 | `; |
101 | const ImgBox = styled.div` | 102 | const ImgBox = styled.div` |
102 | position: relative; | 103 | position: relative; |
103 | - height: 30rem; | 104 | + width: 90%; |
105 | + /* height: 30rem; */ | ||
104 | background-color: white; | 106 | background-color: white; |
105 | box-shadow: ${({ theme }) => theme.boxShadow.normal}; | 107 | box-shadow: ${({ theme }) => theme.boxShadow.normal}; |
106 | border-radius: 2rem; | 108 | border-radius: 2rem; |
... | @@ -110,9 +112,9 @@ const ImgBox = styled.div` | ... | @@ -110,9 +112,9 @@ const ImgBox = styled.div` |
110 | justify-content: center; | 112 | justify-content: center; |
111 | font-size: 1rem; | 113 | font-size: 1rem; |
112 | display: flex; | 114 | display: flex; |
113 | - flex: 0.6; | 115 | + /* flex: 0.6; */ |
114 | padding: 1rem 0; | 116 | padding: 1rem 0; |
115 | - .sub-flex { | 117 | + /* .sub-flex { |
116 | position: relative; | 118 | position: relative; |
117 | width: 100%; | 119 | width: 100%; |
118 | height: 100%; | 120 | height: 100%; |
... | @@ -122,7 +124,7 @@ const ImgBox = styled.div` | ... | @@ -122,7 +124,7 @@ const ImgBox = styled.div` |
122 | :first-child { | 124 | :first-child { |
123 | border-right: 1px solid ${({ theme }) => theme.color.gray}; | 125 | border-right: 1px solid ${({ theme }) => theme.color.gray}; |
124 | } | 126 | } |
125 | - } | 127 | + } */ |
126 | `; | 128 | `; |
127 | 129 | ||
128 | const Box = styled.div` | 130 | const Box = styled.div` | ... | ... |
1 | /// <reference path="react-image-editor.d.ts" /> | 1 | /// <reference path="react-image-editor.d.ts" /> |
2 | import ImageEditor from "@toast-ui/react-image-editor"; | 2 | import ImageEditor from "@toast-ui/react-image-editor"; |
3 | import { useEffect, useState } from "react"; | 3 | import { useEffect, useState } from "react"; |
4 | +import styled from "styled-components"; | ||
4 | import "tui-image-editor/dist/tui-image-editor.css"; | 5 | import "tui-image-editor/dist/tui-image-editor.css"; |
5 | 6 | ||
6 | -const ToastEditor = ({ setPreviewURL, setIsImgAdded }) => { | 7 | +const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => { |
7 | // const [lowerCanvas, setLowerCanvas] = useState<HTMLCanvasElement>(); | 8 | // const [lowerCanvas, setLowerCanvas] = useState<HTMLCanvasElement>(); |
8 | // const [upperCanvas, setUpperCanvas] = useState<HTMLCanvasElement>(); | 9 | // const [upperCanvas, setUpperCanvas] = useState<HTMLCanvasElement>(); |
9 | // // console.log( | 10 | // // console.log( |
... | @@ -54,15 +55,20 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded }) => { | ... | @@ -54,15 +55,20 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded }) => { |
54 | // }, [lowerCanvas?.toDataURL("image/png")]); | 55 | // }, [lowerCanvas?.toDataURL("image/png")]); |
55 | 56 | ||
56 | const handleEnd = () => { | 57 | const handleEnd = () => { |
57 | - const lowerCanvas = document.getElementsByClassName("lower-canvas")[0] as HTMLCanvasElement; | 58 | + const lowerCanvas = document.getElementsByClassName( |
59 | + "lower-canvas" | ||
60 | + )[0] as HTMLCanvasElement; | ||
58 | setPreviewURL(lowerCanvas.toDataURL("image/png")); | 61 | setPreviewURL(lowerCanvas.toDataURL("image/png")); |
59 | - console.log('asdf') | 62 | + console.log("asdf"); |
60 | setIsImgAdded(true); | 63 | setIsImgAdded(true); |
64 | + setIsEditorOpened(false); | ||
61 | }; | 65 | }; |
62 | 66 | ||
63 | return ( | 67 | return ( |
64 | - <> | 68 | + <Container> |
65 | - <div onClick={handleEnd}>asdf</div> | 69 | + <div onClick={handleEnd} className="upload"> |
70 | + Upload | ||
71 | + </div> | ||
66 | <ImageEditor | 72 | <ImageEditor |
67 | includeUI={{ | 73 | includeUI={{ |
68 | loadImage: { | 74 | loadImage: { |
... | @@ -73,7 +79,7 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded }) => { | ... | @@ -73,7 +79,7 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded }) => { |
73 | menu: ["shape", "filter"], | 79 | menu: ["shape", "filter"], |
74 | initMenu: "filter", | 80 | initMenu: "filter", |
75 | uiSize: { | 81 | uiSize: { |
76 | - width: "1000px", | 82 | + width: "100%", |
77 | height: "700px", | 83 | height: "700px", |
78 | }, | 84 | }, |
79 | menuBarPosition: "bottom", | 85 | menuBarPosition: "bottom", |
... | @@ -86,8 +92,42 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded }) => { | ... | @@ -86,8 +92,42 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded }) => { |
86 | }} | 92 | }} |
87 | usageStatistics={true} | 93 | usageStatistics={true} |
88 | /> | 94 | /> |
89 | - </> | 95 | + </Container> |
90 | ); | 96 | ); |
91 | }; | 97 | }; |
92 | 98 | ||
99 | +const Container = styled.div` | ||
100 | + position: fixed; | ||
101 | + width: 90%; | ||
102 | + top: 10rem; | ||
103 | + border-radius: 1.5rem; | ||
104 | + box-shadow: ${({ theme }) => theme.boxShadow.normal}; | ||
105 | + display: flex; | ||
106 | + flex-direction: column; | ||
107 | + align-items: center; | ||
108 | + .upload { | ||
109 | + font: 800 11.5px Arial; | ||
110 | + position: absolute; | ||
111 | + right: 0; | ||
112 | + top: 0; | ||
113 | + width: 120px; | ||
114 | + height: 40px; | ||
115 | + background: red; | ||
116 | + z-index: 10; | ||
117 | + border-radius: 20px; | ||
118 | + margin: 8px; | ||
119 | + background-color: #fdba3b; | ||
120 | + display: flex; | ||
121 | + align-items: center; | ||
122 | + justify-content: center; | ||
123 | + cursor: pointer; | ||
124 | + } | ||
125 | + .tui-image-editor-container { | ||
126 | + border-radius: 1.5rem; | ||
127 | + } | ||
128 | + .tui-image-editor-container .tui-image-editor-help-menu.top { | ||
129 | + top: 2rem; | ||
130 | + } | ||
131 | +`; | ||
132 | + | ||
93 | export default ToastEditor; | 133 | export default ToastEditor; | ... | ... |
... | @@ -18,14 +18,39 @@ const Index = () => { | ... | @@ -18,14 +18,39 @@ const Index = () => { |
18 | <Header /> | 18 | <Header /> |
19 | 19 | ||
20 | {!isImgAdded ? ( | 20 | {!isImgAdded ? ( |
21 | - <button className="open-button" onClick={() => setIsEditorOpened(true)}> | 21 | + <div |
22 | - asdf | 22 | + style={{ |
23 | - </button> | 23 | + height: "80vh", |
24 | + width: "100%", | ||
25 | + display: "flex", | ||
26 | + alignItems: "center", | ||
27 | + justifyContent: "center", | ||
28 | + }} | ||
29 | + > | ||
30 | + <button | ||
31 | + className="open-button" | ||
32 | + onClick={() => setIsEditorOpened(true)} | ||
33 | + > | ||
34 | + Open Image Editor | ||
35 | + </button> | ||
36 | + </div> | ||
24 | ) : ( | 37 | ) : ( |
25 | - <Image {...{ previewURL, setPreviewURL }} /> | 38 | + !isEditorOpened && ( |
39 | + <> | ||
40 | + <div style={{ position: "fixed", top: "5rem" }}> | ||
41 | + <button | ||
42 | + className="open-button" | ||
43 | + onClick={() => setIsEditorOpened(true)} | ||
44 | + > | ||
45 | + Change Image | ||
46 | + </button> | ||
47 | + </div> | ||
48 | + <Image {...{ previewURL, setPreviewURL }} /> | ||
49 | + </> | ||
50 | + ) | ||
26 | )} | 51 | )} |
27 | - {isEditorOpened && !isImgAdded && ( | 52 | + {isEditorOpened && ( |
28 | - <ToastEditor {...{ setPreviewURL, setIsImgAdded }} /> | 53 | + <ToastEditor {...{ setPreviewURL, setIsImgAdded, setIsEditorOpened }} /> |
29 | )} | 54 | )} |
30 | </Container> | 55 | </Container> |
31 | ); | 56 | ); |
... | @@ -36,6 +61,23 @@ const Container = styled.div` | ... | @@ -36,6 +61,23 @@ const Container = styled.div` |
36 | flex-direction: column; | 61 | flex-direction: column; |
37 | align-items: center; | 62 | align-items: center; |
38 | .open-button { | 63 | .open-button { |
64 | + margin-top: 3rem; | ||
65 | + padding: 0.5rem 2rem; | ||
66 | + display: flex; | ||
67 | + align-items: center; | ||
68 | + transition: 0.3s; | ||
69 | + :hover { | ||
70 | + font-size: 1.1rem; | ||
71 | + transition: 0.3s; | ||
72 | + } | ||
73 | + ::before { | ||
74 | + width: 2.315rem; | ||
75 | + content: "+"; | ||
76 | + font-size: 2rem; | ||
77 | + margin-right: 1rem; | ||
78 | + box-shadow: ${({ theme }) => theme.boxShadow.normal}; | ||
79 | + border-radius: 50%; | ||
80 | + } | ||
39 | } | 81 | } |
40 | `; | 82 | `; |
41 | 83 | ... | ... |
-
Please register or login to post a comment