2021-1-capstone-design1 / MAC_Project1

Go to a project
Toggle navigation Toggle navigation pinning
이정민
518de44a 2 parents 4afa73cd fdef15bf

Merge branch 'feat/web'

Inline Side-by-side
Showing 30 changed files with 2249 additions and 0 deletions
1 +{
2 + "presets": [
3 + "next/babel"
4 + ],
5 + "plugins": [
6 + [
7 + "babel-plugin-styled-components",
8 + {
9 + "fileName": true,
10 + "displayName": true,
11 + "pure": true
12 + }
13 + ]
14 + ]
15 +}
...\ No newline at end of file ...\ No newline at end of file
1 +export const browserslist = ["defaults"];
1 +# Config
2 +!config/default.json
3 +!config/development.json.sample
4 +config/*.json
5 +
6 +# Next
7 +.next
8 +out
9 +
10 +# Logs
11 +npm-debug.log*
12 +
13 +# NPM
14 +node_modules/
15 +
16 +# Transpiled code
17 +dist
18 +out
19 +.out
20 +
21 +# Dev tools
22 +.DS_Store
23 +.vscode
24 +.idea
25 +*.swp
26 +*.bak
27 +
28 +node_modules.nosync/
29 +*.env.*
...\ No newline at end of file ...\ No newline at end of file
1 +{
2 + "editor.formatOnSave": true,
3 + "prettier.semi": false,
4 + "prettier.trailingComma": "all",
5 + "prettier.singleQuote": true,
6 + "prettier.tslintIntegration": true,
7 + "prettier.tabWidth": 2,
8 + "prettier.printWidth": 120
9 +}
1 +node_modules
2 +dist/*
...\ No newline at end of file ...\ No newline at end of file
1 +var blackTheme = {
2 + 'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
3 + 'common.bisize.width': '251px',
4 + 'common.bisize.height': '21px',
5 + 'common.backgroundImage': 'none',
6 + 'common.backgroundColor': '#1e1e1e',
7 + 'common.border': '0px',
8 +
9 + // header
10 + 'header.backgroundImage': 'none',
11 + 'header.backgroundColor': 'transparent',
12 + 'header.border': '0px',
13 +
14 + // load button
15 + 'loadButton.backgroundColor': '#fff',
16 + 'loadButton.border': '1px solid #ddd',
17 + 'loadButton.color': '#222',
18 + 'loadButton.fontFamily': "'Noto Sans', sans-serif",
19 + 'loadButton.fontSize': '12px',
20 +
21 + // download button
22 + 'downloadButton.backgroundColor': '#fdba3b',
23 + 'downloadButton.border': '1px solid #fdba3b',
24 + 'downloadButton.color': '#fff',
25 + 'downloadButton.fontFamily': "'Noto Sans', sans-serif",
26 + 'downloadButton.fontSize': '12px',
27 +
28 + // main icons
29 + 'menu.normalIcon.color': '#8a8a8a',
30 + 'menu.activeIcon.color': '#555555',
31 + 'menu.disabledIcon.color': '#434343',
32 + 'menu.hoverIcon.color': '#e9e9e9',
33 + 'menu.iconSize.width': '24px',
34 + 'menu.iconSize.height': '24px',
35 +
36 + // submenu icons
37 + 'submenu.normalIcon.color': '#8a8a8a',
38 + 'submenu.activeIcon.color': '#e9e9e9',
39 + 'submenu.iconSize.width': '32px',
40 + 'submenu.iconSize.height': '32px',
41 +
42 + // submenu primary color
43 + 'submenu.backgroundColor': '#1e1e1e',
44 + 'submenu.partition.color': '#3c3c3c',
45 +
46 + // submenu labels
47 + 'submenu.normalLabel.color': '#8a8a8a',
48 + 'submenu.normalLabel.fontWeight': 'lighter',
49 + 'submenu.activeLabel.color': '#fff',
50 + 'submenu.activeLabel.fontWeight': 'lighter',
51 +
52 + // checkbox style
53 + 'checkbox.border': '0px',
54 + 'checkbox.backgroundColor': '#fff',
55 +
56 + // range style
57 + 'range.pointer.color': '#fff',
58 + 'range.bar.color': '#666',
59 + 'range.subbar.color': '#d1d1d1',
60 +
61 + 'range.disabledPointer.color': '#414141',
62 + 'range.disabledBar.color': '#282828',
63 + 'range.disabledSubbar.color': '#414141',
64 +
65 + 'range.value.color': '#fff',
66 + 'range.value.fontWeight': 'lighter',
67 + 'range.value.fontSize': '11px',
68 + 'range.value.border': '1px solid #353535',
69 + 'range.value.backgroundColor': '#151515',
70 + 'range.title.color': '#fff',
71 + 'range.title.fontWeight': 'lighter',
72 +
73 + // colorpicker style
74 + 'colorpicker.button.border': '1px solid #1e1e1e',
75 + 'colorpicker.title.color': '#fff',
76 +};
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta charset="UTF-8" />
5 + <title>TUI Example</title>
6 + <link
7 + type="text/css"
8 + href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css"
9 + rel="stylesheet"
10 + />
11 + <link type="text/css" href="./tui-image-editor.css" rel="stylesheet" />
12 + <style>
13 + @import url(http://fonts.googleapis.com/css?family=Noto+Sans);
14 + html,
15 + body {
16 + height: 100%;
17 + margin: 0;
18 + }
19 + </style>
20 + </head>
21 + <body>
22 + <div id="tui-image-editor-container"></div>
23 + <script
24 + type="text/javascript"
25 + src="https://api-storage.cloud.toast.com/v1/AUTH_e18353c4ea5746c097143946d0644e61/toast-ui-cdn/tui-image-editor/v3.11.0/example/fabric-v4.2.0.js"
26 + ></script>
27 + <script
28 + type="text/javascript"
29 + src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"
30 + ></script>
31 + <script
32 + type="text/javascript"
33 + src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"
34 + ></script>
35 + <script
36 + type="text/javascript"
37 + src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"
38 + ></script>
39 + <script type="text/javascript" src="./tui-image-editor.js"></script>
40 + <script type="text/javascript" src="./black-theme.js"></script>
41 + <script type="text/javascript" src="../../dist/gif-generator.js"></script>
42 + <script>
43 + // Image editor
44 + var imageEditor = new tui.ImageEditor("#tui-image-editor-container", {
45 + includeUI: {
46 + loadImage: {
47 + path: "./sampleImage2.png",
48 + name: "SampleImage",
49 + },
50 + theme: blackTheme, // or whiteTheme
51 + initMenu: "filter",
52 + menuBarPosition: "bottom",
53 + },
54 + cssMaxWidth: 700,
55 + cssMaxHeight: 500,
56 + usageStatistics: false,
57 + });
58 + window.onresize = function () {
59 + imageEditor.ui.resizeEditor();
60 + };
61 +
62 + let gifGenerator;
63 + setTimeout(function () {
64 + gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas());
65 + }, 1000);
66 + </script>
67 + </body>
68 +</html>
1 +/*!
2 + * tui-image-editor.js
3 + * @version 3.14.1
4 + * @author NHN. FE Development Lab <dl_javascript@nhn.com>
5 + * @license MIT
6 + */
7 +body > textarea {
8 + position: fixed !important;
9 +}
10 +.tui-image-editor-container {
11 + margin: 0;
12 + padding: 0;
13 + box-sizing: border-box;
14 + min-height: 300px;
15 + height: 100%;
16 + position: relative;
17 + background-color: #282828;
18 + overflow: hidden;
19 + letter-spacing: 0.3px;
20 +}
21 +.tui-image-editor-container div,
22 +.tui-image-editor-container ul,
23 +.tui-image-editor-container label,
24 +.tui-image-editor-container input,
25 +.tui-image-editor-container li {
26 + box-sizing: border-box;
27 + margin: 0;
28 + padding: 0;
29 + -ms-user-select: none;
30 + -moz-user-select: -moz-none;
31 + -khtml-user-select: none;
32 + -webkit-user-select: none;
33 + user-select: none;
34 +}
35 +.tui-image-editor-container .tui-image-editor-header {
36 +/* BUTTON AND LOGO */
37 + min-width: 533px;
38 + position: absolute;
39 + background-color: #151515;
40 + top: 0;
41 + width: 100%;
42 +}
43 +.tui-image-editor-container .tui-image-editor-header-buttons,
44 +.tui-image-editor-container .tui-image-editor-controls-buttons {
45 + float: right;
46 + margin: 8px;
47 +}
48 +.tui-image-editor-container .tui-image-editor-header-logo,
49 +.tui-image-editor-container .tui-image-editor-controls-logo {
50 + float: left;
51 + width: 30%;
52 + padding: 17px;
53 +}
54 +.tui-image-editor-container .tui-image-editor-controls-logo,
55 +.tui-image-editor-container .tui-image-editor-controls-buttons {
56 + width: 270px;
57 + height: 100%;
58 + display: none;
59 +}
60 +.tui-image-editor-container .tui-image-editor-header-buttons button,
61 +.tui-image-editor-container .tui-image-editor-header-buttons div,
62 +.tui-image-editor-container .tui-image-editor-controls-buttons button,
63 +.tui-image-editor-container .tui-image-editor-controls-buttons div {
64 + display: inline-block;
65 + position: relative;
66 + width: 120px;
67 + height: 40px;
68 + padding: 0;
69 + line-height: 40px;
70 + outline: none;
71 + border-radius: 20px;
72 + border: 1px solid #ddd;
73 + font-family: 'Noto Sans', sans-serif;
74 + font-size: 12px;
75 + font-weight: bold;
76 + cursor: pointer;
77 + vertical-align: middle;
78 + letter-spacing: 0.3px;
79 + text-align: center;
80 +}
81 +.tui-image-editor-container .tui-image-editor-download-btn {
82 + background-color: #fdba3b;
83 + border-color: #fdba3b;
84 + color: #fff;
85 +}
86 +.tui-image-editor-container .tui-image-editor-load-btn {
87 + position: absolute;
88 + left: 0;
89 + right: 0;
90 + display: inline-block;
91 + top: 0;
92 + bottom: 0;
93 + width: 100%;
94 + cursor: pointer;
95 + opacity: 0;
96 +}
97 +.tui-image-editor-container .tui-image-editor-main-container {
98 + position: absolute;
99 + width: 100%;
100 + top: 0;
101 + bottom: 64px;
102 +}
103 +.tui-image-editor-container .tui-image-editor-main {
104 + position: absolute;
105 + text-align: center;
106 + top: 64px;
107 + bottom: 0;
108 + right: 0;
109 + left: 0;
110 +}
111 +.tui-image-editor-container .tui-image-editor-wrap {
112 + position: absolute;
113 + bottom: 0;
114 + width: 100%;
115 + overflow: auto;
116 +}
117 +.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap {
118 + display: table;
119 + width: 100%;
120 + height: 100%;
121 +}
122 +.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap .tui-image-editor-align-wrap {
123 + display: table-cell;
124 + vertical-align: middle;
125 +}
126 +.tui-image-editor-container .tui-image-editor {
127 + position: relative;
128 + display: inline-block;
129 +}
130 +.tui-image-editor-container .tui-image-editor-menu,
131 +.tui-image-editor-container .tui-image-editor-help-menu {
132 + width: auto;
133 + list-style: none;
134 + padding: 0;
135 + margin: 0 auto;
136 + display: table-cell;
137 + text-align: center;
138 + vertical-align: middle;
139 + white-space: nowrap;
140 +}
141 +.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item,
142 +.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item {
143 + position: relative;
144 + display: inline-block;
145 + border-radius: 2px;
146 + padding: 7px 8px 3px 8px;
147 + cursor: pointer;
148 + margin: 0 4px;
149 +}
150 +.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:hover:before,
151 +.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item[tooltip-content]:hover:before {
152 + content: '';
153 + position: absolute;
154 + display: inline-block;
155 + margin: 0 auto 0;
156 + width: 0;
157 + height: 0;
158 + border-right: 7px solid transparent;
159 + border-top: 7px solid #2f2f2f;
160 + border-left: 7px solid transparent;
161 + left: 13px;
162 + top: -2px;
163 +}
164 +.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:hover:after,
165 +.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item[tooltip-content]:hover:after {
166 + content: attr(tooltip-content);
167 + position: absolute;
168 + display: inline-block;
169 + background-color: #2f2f2f;
170 + color: #fff;
171 + padding: 5px 8px;
172 + font-size: 11px;
173 + font-weight: lighter;
174 + border-radius: 3px;
175 + max-height: 23px;
176 + top: -25px;
177 + left: 0;
178 + min-width: 24px;
179 +}
180 +.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item.active,
181 +.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item.active {
182 + background-color: #fff;
183 + transition: all 0.3s ease;
184 +}
185 +.tui-image-editor-container .tui-image-editor-wrap {
186 + position: absolute;
187 +}
188 +.tui-image-editor-container .tui-image-editor-grid-visual {
189 + display: none;
190 + position: absolute;
191 + width: 100%;
192 + height: 100%;
193 + border: 1px solid rgba(255,255,255,0.7);
194 +}
195 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor,
196 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor {
197 + transition: none;
198 +}
199 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-grid-visual,
200 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-grid-visual {
201 + display: block;
202 +}
203 +.tui-image-editor-container .tui-image-editor-grid-visual table {
204 + width: 100%;
205 + height: 100%;
206 + border-collapse: collapse;
207 +}
208 +.tui-image-editor-container .tui-image-editor-grid-visual table td {
209 + border: 1px solid rgba(255,255,255,0.3);
210 +}
211 +.tui-image-editor-container .tui-image-editor-grid-visual table td.dot:before {
212 + content: '';
213 + position: absolute;
214 + box-sizing: border-box;
215 + width: 10px;
216 + height: 10px;
217 + border: 0;
218 + box-shadow: 0 0 1px 0 rgba(0,0,0,0.3);
219 + border-radius: 100%;
220 + background-color: #fff;
221 +}
222 +.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-top:before {
223 + top: -5px;
224 + left: -5px;
225 +}
226 +.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-top:before {
227 + top: -5px;
228 + right: -5px;
229 +}
230 +.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-bottom:before {
231 + bottom: -5px;
232 + left: -5px;
233 +}
234 +.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-bottom:before {
235 + bottom: -5px;
236 + right: -5px;
237 +}
238 +.tui-image-editor-container .tui-image-editor-submenu {
239 + display: none;
240 + position: absolute;
241 + bottom: 0;
242 + width: 100%;
243 + height: 150px;
244 + white-space: nowrap;
245 + z-index: 2;
246 +}
247 +.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover svg > use.active {
248 + display: block;
249 +}
250 +.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item li {
251 + display: inline-block;
252 + vertical-align: top;
253 +}
254 +.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-newline {
255 + display: block;
256 + margin-top: 0;
257 +}
258 +.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button {
259 + position: relative;
260 + cursor: pointer;
261 + display: inline-block;
262 + font-weight: normal;
263 + font-size: 11px;
264 + margin: 0 9px 0 9px;
265 +}
266 +.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.preset {
267 + margin: 0 9px 20px 5px;
268 +}
269 +.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item label > span {
270 + display: inline-block;
271 + cursor: pointer;
272 + padding-top: 5px;
273 + font-family: "Noto Sans", sans-serif;
274 + font-size: 11px;
275 +}
276 +.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.apply label,
277 +.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.cancel label {
278 + vertical-align: 7px;
279 +}
280 +.tui-image-editor-container .tui-image-editor-submenu > div {
281 + display: none;
282 + vertical-align: bottom;
283 +}
284 +.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-style {
285 + opacity: 0.95;
286 + z-index: -1;
287 + position: absolute;
288 + top: 0;
289 + bottom: 0;
290 + left: 0;
291 + right: 0;
292 + display: block;
293 +}
294 +.tui-image-editor-container .tui-image-editor-partition > div {
295 + width: 1px;
296 + height: 52px;
297 + border-left: 1px solid #3c3c3c;
298 + margin: 0 8px 0 8px;
299 +}
300 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-partition > div {
301 + height: 108px;
302 + margin: 0 29px 0 0px;
303 +}
304 +.tui-image-editor-container .tui-image-editor-submenu-align {
305 + text-align: left;
306 + margin-right: 30px;
307 +}
308 +.tui-image-editor-container .tui-image-editor-submenu-align label > span {
309 + width: 55px;
310 + white-space: nowrap;
311 +}
312 +.tui-image-editor-container .tui-image-editor-submenu-align:first-child {
313 + margin-right: 0;
314 +}
315 +.tui-image-editor-container .tui-image-editor-submenu-align:first-child label > span {
316 + width: 70px;
317 +}
318 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu > div.tui-image-editor-menu-crop,
319 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu > div.tui-image-editor-menu-flip,
320 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu > div.tui-image-editor-menu-rotate,
321 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu > div.tui-image-editor-menu-shape,
322 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu > div.tui-image-editor-menu-text,
323 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu > div.tui-image-editor-menu-mask,
324 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu > div.tui-image-editor-menu-icon,
325 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu > div.tui-image-editor-menu-draw,
326 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu > div.tui-image-editor-menu-filter,
327 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-zoom .tui-image-editor-submenu > div.tui-image-editor-menu-zoom {
328 + display: table-cell;
329 +}
330 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu,
331 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu,
332 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu,
333 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu,
334 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu,
335 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu,
336 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu,
337 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu,
338 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu,
339 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-zoom .tui-image-editor-submenu {
340 + display: table;
341 +}
342 +.tui-image-editor-container .tui-image-editor-help-menu {
343 + list-style: none;
344 + padding: 0;
345 + margin: 0 auto;
346 + text-align: center;
347 + vertical-align: middle;
348 + border-radius: 20px;
349 + background-color: rgba(255,255,255,0.06);
350 + z-index: 2;
351 + position: absolute;
352 +}
353 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history {
354 + display: none;
355 + background-color: #fff;
356 + color: #444;
357 + position: absolute;
358 + width: 196px;
359 + height: 276px;
360 + padding: 4px 2px;
361 + box-shadow: 0 2px 6px 0 rgba(0,0,0,0.15);
362 + cursor: auto;
363 + transform: translateX(calc(-50% + 12px));
364 +}
365 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list {
366 + height: 268px;
367 + padding: 0;
368 + overflow: hidden scroll;
369 + list-style: none;
370 +}
371 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item {
372 + height: 24px;
373 + font-size: 11px;
374 + line-height: 24px;
375 +}
376 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item {
377 + position: relative;
378 + height: 24px;
379 + cursor: pointer;
380 +}
381 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item svg {
382 + width: 24px;
383 + height: 24px;
384 +}
385 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item span {
386 + display: inline-block;
387 + width: 128px;
388 + height: 24px;
389 + text-align: left;
390 +}
391 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-icon {
392 + display: inline-block;
393 + width: 24px;
394 + height: 24px;
395 + position: absolute;
396 + top: 6px;
397 + left: 6px;
398 +}
399 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-checkbox {
400 + display: none;
401 + width: 24px;
402 + height: 24px;
403 + position: absolute;
404 + top: 5px;
405 + right: -6px;
406 +}
407 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.selected-item {
408 + background-color: rgba(119,119,119,0.12);
409 +}
410 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.selected-item .history-item-checkbox {
411 + display: inline-block;
412 +}
413 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.disabled-item {
414 + color: #333;
415 + opacity: 0.3;
416 +}
417 +.tui-image-editor-container .tui-image-editor-help-menu .opened .tie-panel-history {
418 + display: block;
419 +}
420 +.tui-image-editor-container .tui-image-editor-help-menu .opened .tie-panel-history:before {
421 + content: '';
422 + position: absolute;
423 + display: inline-block;
424 + margin: 0 auto;
425 + width: 0;
426 + height: 0;
427 +}
428 +.tui-image-editor-container .filter-color-item {
429 + display: inline-block;
430 +}
431 +.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox {
432 + display: block;
433 +}
434 +.tui-image-editor-container .tui-image-editor-checkbox-wrap {
435 + display: inline-block !important;
436 + text-align: left;
437 +}
438 +.tui-image-editor-container .tui-image-editor-checkbox-wrap.fixed-width {
439 + width: 187px;
440 + white-space: normal;
441 +}
442 +.tui-image-editor-container .tui-image-editor-checkbox {
443 + display: inline-block;
444 + margin: 1px 0 1px 0;
445 +}
446 +.tui-image-editor-container .tui-image-editor-checkbox input {
447 + width: 14px;
448 + height: 14px;
449 + opacity: 0;
450 +}
451 +.tui-image-editor-container .tui-image-editor-checkbox > label > span {
452 + color: #fff;
453 + height: 14px;
454 + position: relative;
455 +}
456 +.tui-image-editor-container .tui-image-editor-checkbox input + label:before,
457 +.tui-image-editor-container .tui-image-editor-checkbox > label > span:before {
458 + content: '';
459 + position: absolute;
460 + width: 14px;
461 + height: 14px;
462 + background-color: #fff;
463 + top: 6px;
464 + left: -19px;
465 + display: inline-block;
466 + margin: 0;
467 + text-align: center;
468 + font-size: 11px;
469 + border: 0;
470 + border-radius: 2px;
471 + padding-top: 1px;
472 + box-sizing: border-box;
473 +}
474 +.tui-image-editor-container .tui-image-editor-checkbox input[type='checkbox']:checked + span:before {
475 + background-size: cover;
476 + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg==");
477 +}
478 +.tui-image-editor-container .tui-image-editor-selectlist-wrap {
479 + position: relative;
480 +}
481 +.tui-image-editor-container .tui-image-editor-selectlist-wrap select {
482 + width: 100%;
483 + height: 28px;
484 + margin-top: 4px;
485 + border: 0;
486 + outline: 0;
487 + border-radius: 0;
488 + border: 1px solid #cbdbdb;
489 + background-color: #fff;
490 + -webkit-appearance: none;
491 + -moz-appearance: none;
492 + appearance: none;
493 + padding: 0 7px 0 10px;
494 +}
495 +.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist {
496 + display: none;
497 + position: relative;
498 + top: -1px;
499 + border: 1px solid #ccc;
500 + background-color: #fff;
501 + border-top: 0px;
502 + padding: 4px 0;
503 +}
504 +.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li {
505 + display: block;
506 + text-align: left;
507 + padding: 7px 10px;
508 + font-family: 'Noto Sans', sans-serif;
509 +}
510 +.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li:hover {
511 + background-color: rgba(81,92,230,0.05);
512 +}
513 +.tui-image-editor-container .tui-image-editor-selectlist-wrap:before {
514 + content: '';
515 + position: absolute;
516 + display: inline-block;
517 + width: 14px;
518 + height: 14px;
519 + right: 5px;
520 + top: 10px;
521 + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII=");
522 + background-size: cover;
523 +}
524 +.tui-image-editor-container .tui-image-editor-selectlist-wrap select::-ms-expand {
525 + display: none;
526 +}
527 +.tui-image-editor-container .tui-image-editor-virtual-range-bar .tui-image-editor-disabled,
528 +.tui-image-editor-container .tui-image-editor-virtual-range-subbar .tui-image-editor-disabled,
529 +.tui-image-editor-container .tui-image-editor-virtual-range-pointer .tui-image-editor-disabled {
530 + backbround-color: #f00;
531 +}
532 +.tui-image-editor-container .tui-image-editor-range {
533 + position: relative;
534 + top: 5px;
535 + width: 166px;
536 + height: 17px;
537 + display: inline-block;
538 +}
539 +.tui-image-editor-container .tui-image-editor-virtual-range-bar {
540 + top: 7px;
541 + position: absolute;
542 + width: 100%;
543 + height: 2px;
544 + background-color: #666;
545 +}
546 +.tui-image-editor-container .tui-image-editor-virtual-range-subbar {
547 + position: absolute;
548 + height: 100%;
549 + left: 0;
550 + right: 0;
551 + background-color: #d1d1d1;
552 +}
553 +.tui-image-editor-container .tui-image-editor-virtual-range-pointer {
554 + position: absolute;
555 + cursor: pointer;
556 + top: -5px;
557 + left: 0;
558 + width: 12px;
559 + height: 12px;
560 + background-color: #fff;
561 + border-radius: 100%;
562 +}
563 +.tui-image-editor-container .tui-image-editor-range-wrap {
564 + display: inline-block;
565 + margin-left: 4px;
566 +}
567 +.tui-image-editor-container .tui-image-editor-range-wrap.short .tui-image-editor-range {
568 + width: 100px;
569 +}
570 +.tui-image-editor-container .color-picker-control .tui-image-editor-range {
571 + width: 108px;
572 + margin-left: 10px;
573 +}
574 +.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-pointer {
575 + background-color: #333;
576 +}
577 +.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-bar {
578 + background-color: #ccc;
579 +}
580 +.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-subbar {
581 + background-color: #606060;
582 +}
583 +.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short {
584 + margin-top: -2px;
585 + margin-left: 19px;
586 +}
587 +.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label {
588 + color: #8e8e8e;
589 + font-weight: normal;
590 +}
591 +.tui-image-editor-container .tui-image-editor-range-wrap label {
592 + vertical-align: baseline;
593 + font-size: 11px;
594 + margin-right: 7px;
595 + color: #fff;
596 +}
597 +.tui-image-editor-container .tui-image-editor-range-value {
598 + cursor: default;
599 + width: 40px;
600 + height: 24px;
601 + outline: none;
602 + border-radius: 2px;
603 + box-shadow: none;
604 + border: 1px solid #d5d5d5;
605 + text-align: center;
606 + background-color: #1c1c1c;
607 + color: #fff;
608 + font-weight: lighter;
609 + vertical-align: baseline;
610 + font-family: 'Noto Sans', sans-serif;
611 + margin-top: 21px;
612 + margin-left: 4px;
613 +}
614 +.tui-image-editor-container .tui-image-editor-controls {
615 + position: absolute;
616 + background-color: #151515;
617 + width: 100%;
618 + height: 64px;
619 + display: table;
620 + bottom: 0;
621 + z-index: 2;
622 +}
623 +.tui-image-editor-container .tui-image-editor-icpartition {
624 + display: inline-block;
625 + background-color: #444;
626 + width: 1px;
627 + height: 24px;
628 +}
629 +.tui-image-editor-container.left .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before {
630 + left: 28px;
631 + top: 11px;
632 + border-right: 7px solid #2f2f2f;
633 + border-top: 7px solid transparent;
634 + border-bottom: 7px solid transparent;
635 +}
636 +.tui-image-editor-container.left .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after {
637 + top: 7px;
638 + left: 42px;
639 + white-space: nowrap;
640 +}
641 +.tui-image-editor-container.left .tui-image-editor-submenu {
642 + left: 0;
643 + height: 100%;
644 + width: 248px;
645 +}
646 +.tui-image-editor-container.left .tui-image-editor-main-container {
647 + left: 64px;
648 + width: calc(100% - 64px);
649 + height: 100%;
650 +}
651 +.tui-image-editor-container.left .tui-image-editor-controls {
652 + width: 64px;
653 + height: 100%;
654 + display: table;
655 +}
656 +.tui-image-editor-container.left .tui-image-editor-menu,
657 +.tui-image-editor-container.right .tui-image-editor-menu {
658 + white-space: inherit;
659 +}
660 +.tui-image-editor-container.left .tui-image-editor-submenu,
661 +.tui-image-editor-container.right .tui-image-editor-submenu {
662 + white-space: normal;
663 +}
664 +.tui-image-editor-container.left .tui-image-editor-submenu > div,
665 +.tui-image-editor-container.right .tui-image-editor-submenu > div {
666 + vertical-align: middle;
667 +}
668 +.tui-image-editor-container.left .tui-image-editor-controls li,
669 +.tui-image-editor-container.right .tui-image-editor-controls li {
670 + display: inline-block;
671 + margin: 4px auto;
672 +}
673 +.tui-image-editor-container.left .tui-image-editor-icpartition,
674 +.tui-image-editor-container.right .tui-image-editor-icpartition {
675 + position: relative;
676 + top: -7px;
677 + width: 24px;
678 + height: 1px;
679 +}
680 +.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition,
681 +.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition {
682 + display: block;
683 + width: 75%;
684 + margin: auto;
685 +}
686 +.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition > div,
687 +.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition > div {
688 + border-left: 0;
689 + height: 10px;
690 + border-bottom: 1px solid #3c3c3c;
691 + width: 100%;
692 + margin: 0;
693 +}
694 +.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-align,
695 +.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-align {
696 + margin-right: 0;
697 +}
698 +.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item li,
699 +.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item li {
700 + margin-top: 15px;
701 +}
702 +.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li,
703 +.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li {
704 + margin-top: 0;
705 +}
706 +.tui-image-editor-container.left .tui-image-editor-checkbox-wrap.fixed-width,
707 +.tui-image-editor-container.right .tui-image-editor-checkbox-wrap.fixed-width {
708 + width: 182px;
709 + white-space: normal;
710 +}
711 +.tui-image-editor-container.left .tui-image-editor-range-wrap.tui-image-editor-newline label.range,
712 +.tui-image-editor-container.right .tui-image-editor-range-wrap.tui-image-editor-newline label.range {
713 + display: block;
714 + text-align: left;
715 + width: 75%;
716 + margin: auto;
717 +}
718 +.tui-image-editor-container.left .tui-image-editor-range,
719 +.tui-image-editor-container.right .tui-image-editor-range {
720 + width: 136px;
721 +}
722 +.tui-image-editor-container.right .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before {
723 + left: -3px;
724 + top: 11px;
725 + border-left: 7px solid #2f2f2f;
726 + border-top: 7px solid transparent;
727 + border-bottom: 7px solid transparent;
728 +}
729 +.tui-image-editor-container.right .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after {
730 + top: 7px;
731 + left: unset;
732 + right: 43px;
733 + white-space: nowrap;
734 +}
735 +.tui-image-editor-container.right .tui-image-editor-submenu {
736 + right: 0;
737 + height: 100%;
738 + width: 248px;
739 +}
740 +.tui-image-editor-container.right .tui-image-editor-main-container {
741 + right: 64px;
742 + width: calc(100% - 64px);
743 + height: 100%;
744 +}
745 +.tui-image-editor-container.right .tui-image-editor-controls {
746 + right: 0;
747 + width: 64px;
748 + height: 100%;
749 + display: table;
750 +}
751 +.tui-image-editor-container.top .tui-image-editor-submenu .tui-image-editor-partition.only-left-right,
752 +.tui-image-editor-container.bottom .tui-image-editor-submenu .tui-image-editor-partition.only-left-right {
753 + display: none;
754 +}
755 +.tui-image-editor-container.bottom .tui-image-editor-submenu > div {
756 + padding-bottom: 24px;
757 +}
758 +.tui-image-editor-container.top .color-picker-control .triangle {
759 + top: -8px;
760 + border-right: 7px solid transparent;
761 + border-top: 0px;
762 + border-left: 7px solid transparent;
763 + border-bottom: 8px solid #fff;
764 +}
765 +.tui-image-editor-container.top .tui-image-editor-size-wrap {
766 + height: 100%;
767 +}
768 +.tui-image-editor-container.top .tui-image-editor-main-container {
769 + bottom: 0;
770 +}
771 +.tui-image-editor-container.top .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before {
772 + left: 13px;
773 + border-top: 0;
774 + border-bottom: 7px solid #2f2f2f;
775 + top: 33px;
776 +}
777 +.tui-image-editor-container.top .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after {
778 + top: 38px;
779 +}
780 +.tui-image-editor-container.top .tui-image-editor-submenu {
781 + top: 0;
782 + bottom: auto;
783 +}
784 +.tui-image-editor-container.top .tui-image-editor-submenu > div {
785 + padding-top: 24px;
786 + vertical-align: top;
787 +}
788 +.tui-image-editor-container.top .tui-image-editor-controls-logo {
789 + display: table-cell;
790 +}
791 +.tui-image-editor-container.top .tui-image-editor-controls-buttons {
792 + display: table-cell;
793 +}
794 +.tui-image-editor-container.top .tui-image-editor-main {
795 + top: 64px;
796 + height: calc(100% - 64px);
797 +}
798 +.tui-image-editor-container.top .tui-image-editor-controls {
799 + top: 0;
800 + bottom: inherit;
801 +}
802 +.tui-image-editor-container .tui-image-editor-help-menu.top {
803 + white-space: nowrap;
804 + width: 506px;
805 + height: 40px;
806 + top: 8px;
807 + left: 50%;
808 + transform: translateX(-50%);
809 +}
810 +.tui-image-editor-container .tui-image-editor-help-menu.top .tie-panel-history {
811 + top: 45px;
812 +}
813 +.tui-image-editor-container .tui-image-editor-help-menu.top .opened .tie-panel-history:before {
814 + border-right: 8px solid transparent;
815 + border-left: 8px solid transparent;
816 + border-bottom: 8px solid #fff;
817 + left: 90px;
818 + top: -8px;
819 +}
820 +.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content]:before {
821 + left: 13px;
822 + top: 35px;
823 + border: none;
824 + border-bottom: 7px solid #2f2f2f;
825 + border-left: 7px solid transparent;
826 + border-right: 7px solid transparent;
827 +}
828 +.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content]:after {
829 + top: 41px;
830 + left: -4px;
831 + white-space: nowrap;
832 +}
833 +.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content].opened:before,
834 +.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content].opened:after {
835 + content: none;
836 +}
837 +.tui-image-editor-container .tui-image-editor-help-menu.bottom {
838 + white-space: nowrap;
839 + width: 506px;
840 + height: 40px;
841 + bottom: 8px;
842 + left: 50%;
843 + transform: translateX(-50%);
844 +}
845 +.tui-image-editor-container .tui-image-editor-help-menu.bottom .tie-panel-history {
846 + bottom: 45px;
847 +}
848 +.tui-image-editor-container .tui-image-editor-help-menu.bottom .opened .tie-panel-history:before {
849 + border-right: 8px solid transparent;
850 + border-left: 8px solid transparent;
851 + border-top: 8px solid #fff;
852 + left: 90px;
853 + bottom: -8px;
854 +}
855 +.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content]:before {
856 + left: 13px;
857 + top: auto;
858 + bottom: 36px;
859 + border: none;
860 + border-top: 7px solid #2f2f2f;
861 + border-left: 7px solid transparent;
862 + border-right: 7px solid transparent;
863 +}
864 +.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content]:after {
865 + top: auto;
866 + left: -4px;
867 + bottom: 41px;
868 + white-space: nowrap;
869 +}
870 +.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content].opened:before,
871 +.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content].opened:after {
872 + content: none;
873 +}
874 +.tui-image-editor-container .tui-image-editor-help-menu.left {
875 + white-space: inherit;
876 + width: 40px;
877 + height: 506px;
878 + left: 8px;
879 + top: 50%;
880 + transform: translateY(-50%);
881 +}
882 +.tui-image-editor-container .tui-image-editor-help-menu.left .tie-panel-history {
883 + left: 140px;
884 + top: -4px;
885 +}
886 +.tui-image-editor-container .tui-image-editor-help-menu.left .opened .tie-panel-history:before {
887 + border-top: 8px solid transparent;
888 + border-bottom: 8px solid transparent;
889 + border-right: 8px solid #fff;
890 + left: -8px;
891 + top: 14px;
892 +}
893 +.tui-image-editor-container .tui-image-editor-help-menu.left .tui-image-editor-item {
894 + margin: 4px auto;
895 + padding: 6px 8px;
896 +}
897 +.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content]:before {
898 + left: 27px;
899 + top: 11px;
900 + border: none;
901 + border-right: 7px solid #2f2f2f;
902 + border-top: 7px solid transparent;
903 + border-bottom: 7px solid transparent;
904 +}
905 +.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content]:after {
906 + top: 7px;
907 + left: 40px;
908 + white-space: nowrap;
909 +}
910 +.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content].opened:before,
911 +.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content].opened:after {
912 + content: none;
913 +}
914 +.tui-image-editor-container .tui-image-editor-help-menu.right {
915 + white-space: inherit;
916 + width: 40px;
917 + height: 506px;
918 + right: 8px;
919 + top: 50%;
920 + transform: translateY(-50%);
921 +}
922 +.tui-image-editor-container .tui-image-editor-help-menu.right .tie-panel-history {
923 + right: -30px;
924 + top: -4px;
925 +}
926 +.tui-image-editor-container .tui-image-editor-help-menu.right .opened .tie-panel-history:before {
927 + border-top: 8px solid transparent;
928 + border-bottom: 8px solid transparent;
929 + border-left: 8px solid #fff;
930 + right: -8px;
931 + top: 14px;
932 +}
933 +.tui-image-editor-container .tui-image-editor-help-menu.right .tui-image-editor-item {
934 + margin: 4px auto;
935 + padding: 6px 8px;
936 +}
937 +.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content]:before {
938 + left: -6px;
939 + top: 11px;
940 + border: none;
941 + border-left: 7px solid #2f2f2f;
942 + border-top: 7px solid transparent;
943 + border-bottom: 7px solid transparent;
944 +}
945 +.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content]:after {
946 + top: 7px;
947 + left: auto;
948 + right: 39px;
949 + white-space: nowrap;
950 +}
951 +.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content].opened:before,
952 +.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content].opened:after {
953 + content: none;
954 +}
955 +.tui-image-editor-container .tie-icon-add-button .tui-image-editor-button {
956 + min-width: 42px;
957 +}
958 +.tui-image-editor-container .svg_ic-menu,
959 +.tui-image-editor-container .svg_ic-helpmenu {
960 + width: 24px;
961 + height: 24px;
962 +}
963 +.tui-image-editor-container .svg_ic-submenu {
964 + width: 32px;
965 + height: 32px;
966 +}
967 +.tui-image-editor-container .svg_img-bi {
968 + width: 257px;
969 + height: 26px;
970 +}
971 +.tui-image-editor-container .tui-image-editor-help-menu svg > use,
972 +.tui-image-editor-container .tui-image-editor-controls svg > use {
973 + display: none;
974 +}
975 +.tui-image-editor-container .tui-image-editor-help-menu .enabled svg:hover > use.hover,
976 +.tui-image-editor-container .tui-image-editor-controls .enabled svg:hover > use.hover,
977 +.tui-image-editor-container .tui-image-editor-help-menu .normal svg:hover > use.hover,
978 +.tui-image-editor-container .tui-image-editor-controls .normal svg:hover > use.hover {
979 + display: block;
980 +}
981 +.tui-image-editor-container .tui-image-editor-help-menu .active svg:hover > use.hover,
982 +.tui-image-editor-container .tui-image-editor-controls .active svg:hover > use.hover {
983 + display: none;
984 +}
985 +.tui-image-editor-container .tui-image-editor-help-menu .on svg > use.hover,
986 +.tui-image-editor-container .tui-image-editor-controls .on svg > use.hover,
987 +.tui-image-editor-container .tui-image-editor-help-menu .opened svg > use.hover,
988 +.tui-image-editor-container .tui-image-editor-controls .opened svg > use.hover {
989 + display: block;
990 +}
991 +.tui-image-editor-container .tui-image-editor-help-menu svg > use.normal,
992 +.tui-image-editor-container .tui-image-editor-controls svg > use.normal {
993 + display: block;
994 +}
995 +.tui-image-editor-container .tui-image-editor-help-menu .active svg > use.active,
996 +.tui-image-editor-container .tui-image-editor-controls .active svg > use.active {
997 + display: block;
998 +}
999 +.tui-image-editor-container .tui-image-editor-help-menu .enabled svg > use.enabled,
1000 +.tui-image-editor-container .tui-image-editor-controls .enabled svg > use.enabled {
1001 + display: block;
1002 +}
1003 +.tui-image-editor-container .tui-image-editor-help-menu .active svg > use.normal,
1004 +.tui-image-editor-container .tui-image-editor-controls .active svg > use.normal,
1005 +.tui-image-editor-container .tui-image-editor-help-menu .enabled svg > use.normal,
1006 +.tui-image-editor-container .tui-image-editor-controls .enabled svg > use.normal {
1007 + display: none;
1008 +}
1009 +.tui-image-editor-container .tui-image-editor-help-menu .help svg > use.disabled,
1010 +.tui-image-editor-container .tui-image-editor-controls .help svg > use.disabled,
1011 +.tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg > use.normal,
1012 +.tui-image-editor-container .tui-image-editor-controls .help.enabled svg > use.normal {
1013 + display: block;
1014 +}
1015 +.tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg > use.disabled,
1016 +.tui-image-editor-container .tui-image-editor-controls .help.enabled svg > use.disabled {
1017 + display: none;
1018 +}
1019 +.tui-image-editor-container .tui-image-editor-controls:hover {
1020 + z-index: 3;
1021 +}
1022 +.tui-image-editor-container div.tui-colorpicker-clearfix {
1023 + width: 159px;
1024 + height: 28px;
1025 + border: 1px solid #d5d5d5;
1026 + border-radius: 2px;
1027 + background-color: #f5f5f5;
1028 + margin-top: 6px;
1029 + padding: 4px 7px 4px 7px;
1030 +}
1031 +.tui-image-editor-container .tui-colorpicker-palette-hex {
1032 + width: 114px;
1033 + background-color: #f5f5f5;
1034 + border: 0;
1035 + font-size: 11px;
1036 + margin-top: 2px;
1037 + font-family: 'Noto Sans', sans-serif;
1038 +}
1039 +.tui-image-editor-container .tui-colorpicker-palette-hex[value='#ffffff'] + .tui-colorpicker-palette-preview,
1040 +.tui-image-editor-container .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview {
1041 + border: 1px solid #ccc;
1042 +}
1043 +.tui-image-editor-container .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview {
1044 + background-size: cover;
1045 + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC");
1046 +}
1047 +.tui-image-editor-container .tui-colorpicker-palette-preview {
1048 + border-radius: 100%;
1049 + float: left;
1050 + width: 17px;
1051 + height: 17px;
1052 + border: 0;
1053 +}
1054 +.tui-image-editor-container .color-picker-control {
1055 + position: absolute;
1056 + display: none;
1057 + z-index: 99;
1058 + width: 192px;
1059 + background-color: #fff;
1060 + box-shadow: 0 3px 22px 6px rgba(0,0,0,0.15);
1061 + padding: 16px;
1062 + border-radius: 2px;
1063 +}
1064 +.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-toggle-slider {
1065 + display: none;
1066 +}
1067 +.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button {
1068 + border: 0;
1069 + border-radius: 100%;
1070 + margin: 2px;
1071 + background-size: cover;
1072 + font-size: 1px;
1073 +}
1074 +.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title='#ffffff'] {
1075 + border: 1px solid #ccc;
1076 +}
1077 +.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title=''] {
1078 + border: 1px solid #ccc;
1079 +}
1080 +.tui-image-editor-container .color-picker-control .triangle {
1081 + width: 0;
1082 + height: 0;
1083 + border-right: 7px solid transparent;
1084 + border-top: 8px solid #fff;
1085 + border-left: 7px solid transparent;
1086 + position: absolute;
1087 + bottom: -8px;
1088 + left: 84px;
1089 +}
1090 +.tui-image-editor-container .color-picker-control .tui-colorpicker-container,
1091 +.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container ul,
1092 +.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container {
1093 + width: 100%;
1094 + height: auto;
1095 +}
1096 +.tui-image-editor-container .filter-color-item .color-picker-control label {
1097 + font-color: #333;
1098 + font-weight: normal;
1099 + margin-right: 7pxleft;
1100 +}
1101 +.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox {
1102 + margin-top: 0;
1103 +}
1104 +.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox input + label:before,
1105 +.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox > label:before {
1106 + left: -16px;
1107 +}
1108 +.tui-image-editor-container .color-picker {
1109 + width: 100%;
1110 + height: auto;
1111 +}
1112 +.tui-image-editor-container .color-picker-value {
1113 + width: 32px;
1114 + height: 32px;
1115 + border: 0px;
1116 + border-radius: 100%;
1117 + margin: auto;
1118 + margin-bottom: 1px;
1119 +}
1120 +.tui-image-editor-container .color-picker-value.transparent {
1121 + border: 1px solid #cbcbcb;
1122 + background-size: cover;
1123 + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC");
1124 +}
1125 +.tui-image-editor-container .color-picker-value + label {
1126 + color: #fff;
1127 +}
1128 +.tui-image-editor-container .tui-image-editor-submenu svg > use {
1129 + display: none;
1130 +}
1131 +.tui-image-editor-container .tui-image-editor-submenu svg > use.normal {
1132 + display: block;
1133 +}
1134 +.tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype="icon-bubble"] svg > use.active,
1135 +.tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype="icon-heart"] svg > use.active,
1136 +.tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype="icon-location"] svg > use.active,
1137 +.tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype="icon-polygon"] svg > use.active,
1138 +.tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype="icon-star"] svg > use.active,
1139 +.tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype="icon-star-2"] svg > use.active,
1140 +.tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype="icon-arrow-3"] svg > use.active,
1141 +.tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype="icon-arrow-2"] svg > use.active,
1142 +.tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype="icon-arrow"] svg > use.active {
1143 + display: block;
1144 +}
1145 +.tie-draw-line-select-button.line .tui-image-editor-button.line svg > use.normal,
1146 +.tie-draw-line-select-button.free .tui-image-editor-button.free svg > use.normal {
1147 + display: none;
1148 +}
1149 +.tie-draw-line-select-button.line .tui-image-editor-button.line svg > use.active,
1150 +.tie-draw-line-select-button.free .tui-image-editor-button.free svg > use.active {
1151 + display: block;
1152 +}
1153 +.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg > use.normal,
1154 +.tie-flip-button.flipX .tui-image-editor-button.flipX svg > use.normal,
1155 +.tie-flip-button.flipY .tui-image-editor-button.flipY svg > use.normal {
1156 + display: none;
1157 +}
1158 +.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg > use.active,
1159 +.tie-flip-button.flipX .tui-image-editor-button.flipX svg > use.active,
1160 +.tie-flip-button.flipY .tui-image-editor-button.flipY svg > use.active {
1161 + display: block;
1162 +}
1163 +.tie-mask-apply.apply.active .tui-image-editor-button.apply label {
1164 + color: #fff;
1165 +}
1166 +.tie-mask-apply.apply.active .tui-image-editor-button.apply svg > use.active {
1167 + display: block;
1168 +}
1169 +.tie-crop-button .tui-image-editor-button.apply,
1170 +.tie-crop-preset-button .tui-image-editor-button.apply {
1171 + margin-right: 24px;
1172 +}
1173 +.tie-crop-button .tui-image-editor-button.preset.active svg > use.active,
1174 +.tie-crop-preset-button .tui-image-editor-button.preset.active svg > use.active {
1175 + display: block;
1176 +}
1177 +.tie-crop-button .tui-image-editor-button.apply.active svg > use.active,
1178 +.tie-crop-preset-button .tui-image-editor-button.apply.active svg > use.active {
1179 + display: block;
1180 +}
1181 +.tie-shape-button.rect .tui-image-editor-button.rect svg > use.normal,
1182 +.tie-shape-button.circle .tui-image-editor-button.circle svg > use.normal,
1183 +.tie-shape-button.triangle .tui-image-editor-button.triangle svg > use.normal {
1184 + display: none;
1185 +}
1186 +.tie-shape-button.rect .tui-image-editor-button.rect svg > use.active,
1187 +.tie-shape-button.circle .tui-image-editor-button.circle svg > use.active,
1188 +.tie-shape-button.triangle .tui-image-editor-button.triangle svg > use.active {
1189 + display: block;
1190 +}
1191 +.tie-text-effect-button .tui-image-editor-button.active svg > use.active {
1192 + display: block;
1193 +}
1194 +.tie-text-align-button.left .tui-image-editor-button.left svg > use.active,
1195 +.tie-text-align-button.center .tui-image-editor-button.center svg > use.active,
1196 +.tie-text-align-button.right .tui-image-editor-button.right svg > use.active {
1197 + display: block;
1198 +}
1199 +.tie-mask-image-file,
1200 +.tie-icon-image-file {
1201 + opacity: 0;
1202 + position: absolute;
1203 + width: 100%;
1204 + height: 100%;
1205 + border: 1px solid #008000;
1206 + cursor: inherit;
1207 + left: 0;
1208 + top: 0;
1209 +}
1210 +.tie-zoom-button.resetFlip .tui-image-editor-button.resetFlip svg > use.normal,
1211 +.tie-zoom-button.flipX .tui-image-editor-button.flipX svg > use.normal,
1212 +.tie-zoom-button.flipY .tui-image-editor-button.flipY svg > use.normal {
1213 + display: none;
1214 +}
1215 +.tie-zoom-button.resetFlip .tui-image-editor-button.resetFlip svg > use.active,
1216 +.tie-zoom-button.flipX .tui-image-editor-button.flipX svg > use.active,
1217 +.tie-zoom-button.flipY .tui-image-editor-button.flipY svg > use.active {
1218 + display: block;
1219 +}
1220 +.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls ul {
1221 + text-align: right;
1222 +}
1223 +.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls-logo {
1224 + display: none;
1225 +}
1226 +/*# sourceMappingURL=src/css/index.css.map */
1227 +
1228 +/*# sourceMappingURL=tui-image-editor.css.map*/
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
1 +{
2 + "name": "gif-generator",
3 + "version": "1.0.0",
4 + "description": "",
5 + "main": "index.js",
6 + "scripts": {
7 + "start": "webpack -w",
8 + "build": "webpack"
9 + },
10 + "author": "",
11 + "license": "ISC",
12 + "devDependencies": {
13 + "@babel/cli": "^7.13.14",
14 + "@babel/core": "^7.13.15",
15 + "@babel/preset-env": "^7.13.15",
16 + "babel-loader": "^8.2.2",
17 + "fabric": "^4.4.0",
18 + "webpack": "^5.31.0",
19 + "webpack-cli": "^4.6.0"
20 + },
21 + "dependencies": {
22 + "@babel/plugin-proposal-class-properties": "^7.13.0",
23 + "gifencoder": "^2.0.1",
24 + "stream": "0.0.2"
25 + }
26 +}
1 +import GIF from "gifencoder";
2 +
3 +class GifGenerator {
4 + constructor(canvas) {
5 + this.canvas = canvas;
6 + this.width = canvas.getWidth();
7 + this.height = canvas.getHeight();
8 + this.gif = new GIF(this.width, this.height);
9 +
10 + this.gif.start();
11 + this.gif.setTransparent(null);
12 + this.gif.setRepeat(0);
13 + this.gif.setQuality(10);
14 + }
15 +
16 + addFrame(delay = 0) {
17 + this.gif.setDelay(delay);
18 + this.gif.addFrame(this.canvas.getContext());
19 + }
20 +
21 + render() {
22 + this.gif.finish();
23 + const byte = new Uint8Array(this.gif.out.data);
24 +
25 + return new Blob([byte], { type: "image/gif" });
26 + }
27 +}
28 +
29 +window.GifGenerator = GifGenerator;
1 +const path = require('path');
2 +
3 +module.exports = {
4 + entry: './src/index.js',
5 + output: {
6 + path: __dirname + '/dist',
7 + filename: 'gif-generator.js',
8 + sourceMapFilename: 'gif-generator.map',
9 + },
10 + module: {
11 + rules: [
12 + {
13 + test: /\.js$/,
14 + include: [
15 + path.resolve(__dirname, 'src/js')
16 + ],
17 + exclude: /node_modules/,
18 + use: {
19 + loader: 'babel-loader',
20 + options: {
21 + presets: ['@babel/preset-env'],
22 + plugins: ['@babel/plugin-proposal-class-properties']
23 + }
24 + }
25 + }
26 + ]
27 + },
28 + devtool: 'source-map',
29 + mode: 'development'
30 +};
...\ No newline at end of file ...\ No newline at end of file
1 +/// <reference types="next" />
2 +/// <reference types="next/types/global" />
1 +/* eslint-disable @typescript-eslint/no-var-requires */
2 +const withBundleAnalyzer = require("@next/bundle-analyzer")({
3 + enabled: process.env.ANALYZE === "true",
4 +});
5 +
6 +module.exports = withBundleAnalyzer({
7 + target: "serverless",
8 + env: {
9 + BASE_URL: process.env.BASE_URL,
10 + },
11 +
12 + webpack(conf) {
13 + conf.module.rules.push({
14 + test: /\.svg$/,
15 + use: [
16 + {
17 + loader: "@svgr/webpack",
18 + options: {
19 + svgoConfig: {
20 + plugins: [
21 + {
22 + // Enable figma's wrong mask-type attribute work
23 + removeRasterImages: false,
24 + removeStyleElement: false,
25 + removeUnknownsAndDefaults: false,
26 + // Enable svgr's svg to fill the size
27 + removeViewBox: false,
28 + },
29 + ],
30 + },
31 + },
32 + },
33 + ],
34 + });
35 + // 절대경로
36 + conf.resolve.modules.push(__dirname);
37 + return conf;
38 + },
39 +});
1 +{
2 + "name": "website",
3 + "version": "0.1.0",
4 + "private": true,
5 + "dependencies": {
6 + "@next/bundle-analyzer": "^10.0.7",
7 + "@testing-library/jest-dom": "^5.11.4",
8 + "@testing-library/react": "^11.1.0",
9 + "@testing-library/user-event": "^12.1.10",
10 + "next": "^10.0.5",
11 + "react": "^17.0.2",
12 + "react-dom": "^17.0.2",
13 + "styled-components": "^5.2.3",
14 + "styled-reset": "^4.3.4",
15 + "tui-image-editor": "3.14.2",
16 + "@toast-ui/react-image-editor": "3.14.2",
17 + "web-vitals": "^1.0.1"
18 + },
19 + "devDependencies": {
20 + "@babel/core": "^7.13.10",
21 + "@babel/plugin-syntax-dynamic-import": "^7.8.3",
22 + "@svgr/webpack": "^5.5.0",
23 + "@types/node": "^14.14.22",
24 + "@types/react": "^17.0.0",
25 + "@types/react-dom": "^17.0.0",
26 + "@types/react-window": "^1.8.2",
27 + "@types/styled-components": "^5.1.7",
28 + "@typescript-eslint/eslint-plugin": "^4.14.1",
29 + "@typescript-eslint/eslint-plugin-tslint": "^4.14.1",
30 + "@typescript-eslint/parser": "^4.14.1",
31 + "babel-loader": "^8.2.2",
32 + "eslint": "^7.18.0",
33 + "eslint-config-airbnb-typescript": "^12.3.1",
34 + "eslint-config-prettier": "^8.1.0",
35 + "eslint-plugin-import": "^2.22.1",
36 + "eslint-plugin-jsx-a11y": "^6.4.1",
37 + "eslint-plugin-react": "^7.22.0",
38 + "eslint-plugin-react-hooks": "^4.2.0",
39 + "prettier": "^2.2.1",
40 + "typescript": "^4.1.3"
41 + },
42 + "scripts": {
43 + "dev": "next",
44 + "debug": "NODE_OPTIONS='--inspect' next dev",
45 + "build": "next build",
46 + "start": "next start",
47 + "export": "next export",
48 + "type-check": "tsc",
49 + "eslint": "eslint .",
50 + "analyze": "ANALYZE=true next build"
51 + },
52 + "eslintConfig": {
53 + "extends": [
54 + "react-app",
55 + "react-app/jest"
56 + ]
57 + },
58 + "browserslist": {
59 + "production": [
60 + ">0.2%",
61 + "not dead",
62 + "not op_mini all"
63 + ],
64 + "development": [
65 + "last 1 chrome version",
66 + "last 1 firefox version",
67 + "last 1 safari version"
68 + ]
69 + }
70 +}
1 +import styled from "styled-components";
2 +
3 +const Header = () => {
4 + return <Container>Gif Generator</Container>;
5 +};
6 +
7 +const Container = styled.div`
8 + position: fixed;
9 + top: 0;
10 + left: 0;
11 + width: 100%;
12 + padding: 1.5rem;
13 + background-color: white;
14 + box-shadow: ${({ theme }) => theme.boxShadow.normal};
15 + text-align: center;
16 + font-size: 1.6rem;
17 + font-weight: 500;
18 + font-style: italic;
19 +`;
20 +
21 +export default Header;
1 +import dynamic from "next/dynamic";
2 +import { useState } from "react";
3 +import styled from "styled-components";
4 +
5 +const ToastEditor = dynamic(() => import("components/ToastEditor"), {
6 + ssr: false,
7 +});
8 +const Image = ({ previewURL, setPreviewURL }) => {
9 + const [file, setFile] = useState(undefined);
10 + console.log("previewURL", previewURL);
11 +
12 + // const uploadImage = (file) => {
13 + // if (!file) {
14 + // return;
15 + // }
16 + // };
17 +
18 + // const selectImg = (e) => {
19 + // const reader = new FileReader();
20 + // const targetFile = e.target.files[0];
21 + // setFile(targetFile);
22 + // // uploadImage(targetFile);
23 +
24 + // reader.onloadend = () => {
25 + // setPreviewURL(reader.result);
26 + // };
27 +
28 + // reader.readAsDataURL(targetFile);
29 + // };
30 +
31 + // const [isEditorOpened, setIsEditorOpened] = useState(false);
32 + // const handleEditor = () => {
33 + // setIsEditorOpened(true);
34 + // };
35 +
36 + return (
37 + <>
38 + <Container>
39 + <ImgBox>
40 + {/* <div onClick={handleEditor}>asdf</div> */}
41 + {/* {file === undefined ? ( */}
42 + <>
43 + {/* <div className="sub-flex">
44 + <BlankBox />
45 + <div>Click to add a photo</div>
46 + <input
47 + type="file"
48 + style={{
49 + position: "absolute",
50 + top: 0,
51 + paddingLeft: 0,
52 + zIndex: 0,
53 + width: "90%",
54 + height: "100%",
55 + border: "none",
56 + cursor: "pointer",
57 + outline: "none",
58 + }}
59 + onChange={selectImg}
60 + />
61 + </div>
62 + <div className="sub-flex">Open Image Editor</div> */}
63 + </>
64 + {/* ) : ( */}
65 + <img
66 + id="image"
67 + alt={""}
68 + style={{
69 + objectFit: "cover",
70 + display: "flex",
71 + maxHeight: "90%",
72 + maxWidth: "90%",
73 + }}
74 + src={previewURL as string}
75 + />
76 + {/* )} */}
77 + </ImgBox>
78 + {/* <Menu /> */}
79 + </Container>
80 + {/* {isEditorOpened && <ToastEditor {...{ setPreviewURL, setIsImgAdded }} />} */}
81 + </>
82 + );
83 +};
84 +
85 +const Menu = () => {
86 + return (
87 + <div style={{ width: "15rem", marginLeft: "2rem" }}>
88 + <Box />
89 + <Box />
90 + <Box />
91 + <Box />
92 + </div>
93 + );
94 +};
95 +
96 +const Container = styled.div`
97 + width: 100%;
98 + display: flex;
99 + justify-content: center;
100 + margin-top: 10rem;
101 +`;
102 +const ImgBox = styled.div`
103 + position: relative;
104 + width: 90%;
105 + /* height: 30rem; */
106 + background-color: white;
107 + box-shadow: ${({ theme }) => theme.boxShadow.normal};
108 + border-radius: 2rem;
109 + margin-top: 2rem;
110 + display: flex;
111 + align-items: center;
112 + justify-content: center;
113 + font-size: 1rem;
114 + display: flex;
115 + /* flex: 0.6; */
116 + padding: 1rem 0;
117 + /* .sub-flex {
118 + position: relative;
119 + width: 100%;
120 + height: 100%;
121 + display: flex;
122 + align-items: center;
123 + justify-content: center;
124 + :first-child {
125 + border-right: 1px solid ${({ theme }) => theme.color.gray};
126 + }
127 + } */
128 +`;
129 +
130 +const Box = styled.div`
131 + width: 100%;
132 + height: 10rem;
133 + margin-top: 2rem;
134 + border-radius: 1rem;
135 + background-color: white;
136 + box-shadow: ${({ theme }) => theme.boxShadow.normal};
137 +`;
138 +const BlankBox = styled.div`
139 + z-index: 1;
140 + position: absolute;
141 + top: 0;
142 + width: 90%;
143 + height: 50px;
144 + background-color: white;
145 +`;
146 +
147 +export default Image;
1 +/// <reference path="react-image-editor.d.ts" />
2 +import ImageEditor from "@toast-ui/react-image-editor";
3 +import { useEffect, useState } from "react";
4 +import styled from "styled-components";
5 +import "tui-image-editor/dist/tui-image-editor.css";
6 +
7 +const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
8 + // const [lowerCanvas, setLowerCanvas] = useState<HTMLCanvasElement>();
9 + // const [upperCanvas, setUpperCanvas] = useState<HTMLCanvasElement>();
10 + // // console.log(
11 + // // document.getElementsByClassName("lower-canvas")[0]?.toDataURL("image/png")
12 + // // );
13 + // console.log("s");
14 +
15 + // // const [upperCanvas, setUpperCanvas] = useState(
16 + // // document.getElementsByClassName("upper-canvas ")[0]
17 + // // );
18 +
19 + // useEffect(() => {
20 + // window?.addEventListener("click", () => {
21 + // setLowerCanvas(
22 + // document.getElementsByClassName("lower-canvas")[0] as HTMLCanvasElement
23 + // );
24 + // setUpperCanvas(
25 + // document.getElementsByClassName("upper-canvas")[0] as HTMLCanvasElement
26 + // );
27 + // });
28 + // }, []);
29 +
30 + // useEffect(() => {
31 + // const img = lowerCanvas?.toDataURL("image/png");
32 + // const uploaded = document.getElementById("image");
33 + // console.log(uploaded);
34 + // // let w = window.open();
35 + // // if (w?.window) w.document.body.innerHTML = "<img src='" + img + "'>";
36 + // const image = new Image();
37 + // // image.onload = function () {
38 + // // lowerCanvas.width = uploaded.clientWidth;
39 + // // lowerCanvas.height = uploaded.clientHeight;
40 + // // lowerCanvas?.getContext("2d").drawImage(image, 0, 0);
41 + // // };
42 + // image.src = previewURL;
43 + // console.log("b");
44 + // if (lowerCanvas?.getContext&&upperCanvas?.getContext) {
45 + // image.onload = function () {
46 +
47 + // lowerCanvas.width = 1000;
48 + // lowerCanvas.height = 572;
49 + // upperCanvas.width = 1000;
50 + // upperCanvas.height = 572;
51 + // lowerCanvas?.getContext("2d").drawImage(image, 0, 0);
52 + // };
53 + // console.log(lowerCanvas.getContext("2d"));
54 + // }
55 + // }, [lowerCanvas?.toDataURL("image/png")]);
56 +
57 + const handleEnd = () => {
58 + const lowerCanvas = document.getElementsByClassName(
59 + "lower-canvas"
60 + )[0] as HTMLCanvasElement;
61 + setPreviewURL(lowerCanvas.toDataURL("image/png"));
62 + console.log("asdf");
63 + setIsImgAdded(true);
64 + setIsEditorOpened(false);
65 + };
66 +
67 + return (
68 + <Container>
69 + <div onClick={handleEnd} className="upload">
70 + Upload
71 + </div>
72 + <ImageEditor
73 + includeUI={{
74 + loadImage: {
75 + // path: 'img/sampleImage.jpg',
76 + name: "SampleImage",
77 + },
78 + // theme: myTheme,
79 + menu: ["shape", "filter"],
80 + initMenu: "filter",
81 + uiSize: {
82 + width: "100%",
83 + height: "700px",
84 + },
85 + menuBarPosition: "bottom",
86 + }}
87 + cssMaxHeight={500}
88 + cssMaxWidth={700}
89 + selectionStyle={{
90 + cornerSize: 20,
91 + rotatingPointOffset: 70,
92 + }}
93 + usageStatistics={true}
94 + />
95 + </Container>
96 + );
97 +};
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 +
133 +export default ToastEditor;
1 +declare module "@toast-ui/react-image-editor";
1 +import type { AppProps } from "next/app";
2 +import Head from "next/head";
3 +import { ThemeProvider } from "styled-components";
4 +import { GlobalStyle } from "styles/global-style";
5 +import { theme } from "styles/theme";
6 +
7 +function MyApp({ Component, pageProps }: AppProps) {
8 + return (
9 + <>
10 + <Head>
11 + <meta name="viewport" content="width=device-width, initial-scale=1" />
12 + <title>Gif Generator</title>
13 + </Head>
14 + <GlobalStyle />
15 + <ThemeProvider theme={theme}>
16 + <Component {...pageProps} />
17 + <div id="modal-root" />
18 + </ThemeProvider>
19 + </>
20 + );
21 +}
22 +
23 +export default MyApp;
1 +import Document, {
2 + Html,
3 + Head,
4 + Main,
5 + NextScript,
6 + DocumentContext,
7 +} from "next/document";
8 +import { ServerStyleSheet } from "styled-components";
9 +
10 +class MyDocument extends Document {
11 + static async getInitialProps(ctx: DocumentContext) {
12 + const sheet = new ServerStyleSheet();
13 + const originalRenderPage = ctx.renderPage;
14 + try {
15 + ctx.renderPage = () =>
16 + originalRenderPage({
17 + enhanceApp: (App) => (props) =>
18 + sheet.collectStyles(<App {...props} />),
19 + });
20 +
21 + const initialProps = await Document.getInitialProps(ctx);
22 + return {
23 + ...initialProps,
24 + styles: (
25 + <>
26 + {initialProps.styles}
27 + {sheet.getStyleElement()}
28 + </>
29 + ),
30 + };
31 + } finally {
32 + sheet.seal();
33 + }
34 + }
35 +
36 + render() {
37 + return (
38 + <Html>
39 + <Head>
40 + <meta charSet="utf-8" />
41 + <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
42 + <meta property="og:title" content="네이버 예약" />
43 + <link rel="preconnect" href="https://fonts.gstatic.com" />
44 + <link
45 + href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
46 + rel="preload"
47 + as="style"
48 + />
49 + <link
50 + href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
51 + rel="stylesheet"
52 + />
53 + <script
54 + type="text/javascript"
55 + src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=3ioixdkru3"
56 + />
57 + </Head>
58 + <body>
59 + <Main />
60 + <NextScript />
61 + <script src="libs/code-snippet.min.js"></script>
62 + <script src="libs/jquery.min.js"></script>
63 + <script src="libs/fabric.min.js"></script>
64 + <script src="js/image-editor.js"></script>
65 + <div id="my-image-editor">
66 + <canvas></canvas>
67 + </div>
68 + </body>
69 + </Html>
70 + );
71 + }
72 +}
73 +
74 +export default MyDocument;
1 +import Header from "components/Header";
2 +import Image from "components/Image";
3 +import styled from "styled-components";
4 +import dynamic from "next/dynamic";
5 +import { useState } from "react";
6 +
7 +const ToastEditor = dynamic(() => import("components/ToastEditor"), {
8 + ssr: false,
9 +});
10 +
11 +const Index = () => {
12 + const [isEditorOpened, setIsEditorOpened] = useState(false);
13 + const [previewURL, setPreviewURL] = useState<string | ArrayBuffer>("");
14 + const [isImgAdded, setIsImgAdded] = useState(false);
15 +
16 + return (
17 + <Container>
18 + <Header />
19 +
20 + {!isImgAdded ? (
21 + <div
22 + style={{
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>
37 + ) : (
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 + )
51 + )}
52 + {isEditorOpened && (
53 + <ToastEditor {...{ setPreviewURL, setIsImgAdded, setIsEditorOpened }} />
54 + )}
55 + </Container>
56 + );
57 +};
58 +
59 +const Container = styled.div`
60 + display: flex;
61 + flex-direction: column;
62 + align-items: center;
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 + }
81 + }
82 +`;
83 +
84 +export default Index;
1 +import { createGlobalStyle } from "styled-components";
2 +import { reset } from "styled-reset";
3 +import { media } from "./theme";
4 +
5 +export const GlobalStyle = createGlobalStyle`
6 + ${reset}
7 + :focus {
8 + outline: none;
9 + border: none;
10 + }
11 + div[role="button"] {
12 + cursor: pointer;
13 + }
14 + ::-webkit-scrollbar {
15 + display: none;
16 + }
17 + html{
18 + -webkit-text-size-adjust: none;
19 + font-family: -apple-system,BlinkMacSystemFont,helvetica,Apple SD Gothic Neo,sans-serif;
20 + font-display: fallback;
21 + ${media.tablet}{
22 + font-size: 10px;
23 + }
24 + -ms-overflow-style: none;
25 + scrollbar-width: none;
26 + }
27 + button {
28 + background: none;
29 + padding: 0;
30 + border: none;
31 + cursor: pointer;
32 + &:disabled {
33 + cursor: default;
34 + fill: #f2f3f4;
35 + }
36 + }
37 +
38 + .pc-tablet-only {
39 + display: block;
40 + ${media.mobile} {
41 + display: none;
42 + }
43 + }
44 + .tablet-mobile-only{
45 + display: none;
46 + ${media.tablet}{
47 + display:block;
48 + }
49 + }
50 + .mobile-only {
51 + display: none;
52 + ${media.mobile} {
53 + display: block;
54 + }
55 + }
56 +`;
1 +import "styled-components";
2 +
3 +declare module "styled-components" {
4 + export interface DefaultTheme {
5 + color: {
6 + purple: "#8661de";
7 + blue: "#00bac7";
8 + gray: "#f6f6f6";
9 + green: "#07b495";
10 + lightGreen: "#99ecdd";
11 + darkGray: "#54595d";
12 + };
13 + boxShadow: {
14 + normal: "0 3px 8px 0 rgb(0 0 0 / 10%)";
15 + purple: "0 3px 8px 0 #d6c9ff";
16 + blue: "0 3px 8px 0 #b3e2e6";
17 + };
18 + }
19 +}
1 +import { DefaultTheme } from "styled-components";
2 +
3 +export const theme: DefaultTheme = {
4 + color: {
5 + purple: "#8661de",
6 + blue: "#00bac7",
7 + gray: "#f6f6f6",
8 + green: "#07b495",
9 + lightGreen: "#99ecdd",
10 + darkGray: "#54595d",
11 + },
12 + boxShadow: {
13 + normal: "0 3px 8px 0 rgb(0 0 0 / 10%)",
14 + purple: "0 3px 8px 0 #d6c9ff",
15 + blue: "0 3px 8px 0 #b3e2e6",
16 + },
17 +};
18 +
19 +const customMediaQuery = (maxWidth: number): string =>
20 + `@media (max-width: ${maxWidth}px)`;
21 +
22 +export const media = {
23 + custom: customMediaQuery,
24 + pc: customMediaQuery(1440),
25 + tablet: customMediaQuery(768),
26 + mobile: customMediaQuery(576),
27 +};
1 +{
2 + "compilerOptions": {
3 + "target": "es5",
4 + "lib": [
5 + "dom",
6 + "dom.iterable",
7 + "esnext"
8 + ],
9 + "allowJs": true,
10 + "skipLibCheck": true,
11 + "strict": false,
12 + "forceConsistentCasingInFileNames": true,
13 + "noEmit": true,
14 + "esModuleInterop": true,
15 + "module": "esnext",
16 + "moduleResolution": "node",
17 + "resolveJsonModule": true,
18 + "isolatedModules": true,
19 + "jsx": "preserve",
20 + "baseUrl": "src",
21 + "rootDir": "src",
22 + },
23 + "include": [
24 + "next-env.d.ts",
25 + "**/*.ts",
26 + "**/*.tsx",
27 + "next.config.js",
28 + "custom.d.ts",
29 + "styled.d.ts",
30 + "src/styles",
31 + "src/pages",
32 + "public",
33 + "**/*.scss",
34 + "src/components",
35 + "resources",
36 + ],
37 + "exclude": [
38 + "node_modules",
39 + ]
40 +}
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.