이정민

CSS 변경

...@@ -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
......