
+++ client/resources/css/common.css
... | ... | @@ -0,0 +1,468 @@ |
1 | +@charset "utf-8"; | |
2 | + | |
3 | +/* 마진 */ | |
4 | +.ml0 { | |
5 | + margin-left: 0px; | |
6 | +} | |
7 | + | |
8 | +.ml5 { | |
9 | + margin-left: 5px; | |
10 | +} | |
11 | + | |
12 | +.ml10 { | |
13 | + margin-left: 10px; | |
14 | +} | |
15 | + | |
16 | +.ml20 { | |
17 | + margin-left: 20px; | |
18 | +} | |
19 | + | |
20 | +.ml30 { | |
21 | + margin-left: 30px; | |
22 | +} | |
23 | + | |
24 | +.ml40 { | |
25 | + margin-left: 40px; | |
26 | +} | |
27 | + | |
28 | +.ml50 { | |
29 | + margin-left: 50px; | |
30 | +} | |
31 | + | |
32 | +.ml60 { | |
33 | + margin-left: 60px; | |
34 | +} | |
35 | + | |
36 | +.ml70 { | |
37 | + margin-left: 70px; | |
38 | +} | |
39 | + | |
40 | +.ml80 { | |
41 | + margin-left: 80px; | |
42 | +} | |
43 | + | |
44 | +.ml90 { | |
45 | + margin-left: 90px; | |
46 | +} | |
47 | + | |
48 | +.ml100 { | |
49 | + margin-left: 100px; | |
50 | +} | |
51 | + | |
52 | +.mr0 { | |
53 | + margin-right: 0px; | |
54 | +} | |
55 | + | |
56 | +.mr5 { | |
57 | + margin-right: 5px; | |
58 | +} | |
59 | + | |
60 | +.mr10 { | |
61 | + margin-right: 10px; | |
62 | +} | |
63 | + | |
64 | +.mr20 { | |
65 | + margin-right: 20px; | |
66 | +} | |
67 | + | |
68 | +.mr30 { | |
69 | + margin-right: 30px; | |
70 | +} | |
71 | + | |
72 | +.mr40 { | |
73 | + margin-right: 40px; | |
74 | +} | |
75 | + | |
76 | +.mr50 { | |
77 | + margin-right: 50px; | |
78 | +} | |
79 | + | |
80 | +.mr60 { | |
81 | + margin-right: 60px; | |
82 | +} | |
83 | + | |
84 | +.mr70 { | |
85 | + margin-right: 70px; | |
86 | +} | |
87 | + | |
88 | +.mr80 { | |
89 | + margin-right: 80px; | |
90 | +} | |
91 | + | |
92 | +.mr90 { | |
93 | + margin-right: 90px; | |
94 | +} | |
95 | + | |
96 | +.mr100 { | |
97 | + margin-right: 100px; | |
98 | +} | |
99 | + | |
100 | +.mt0 { | |
101 | + margin-top: 0px; | |
102 | +} | |
103 | + | |
104 | +.mt5 { | |
105 | + margin-top: 5px; | |
106 | +} | |
107 | + | |
108 | +.mt10 { | |
109 | + margin-top: 10px; | |
110 | +} | |
111 | + | |
112 | +.mt20 { | |
113 | + margin-top: 20px; | |
114 | +} | |
115 | + | |
116 | +.mt30 { | |
117 | + margin-top: 30px; | |
118 | +} | |
119 | + | |
120 | +.mt40 { | |
121 | + margin-top: 40px; | |
122 | +} | |
123 | + | |
124 | +.mt50 { | |
125 | + margin-top: 50px; | |
126 | +} | |
127 | + | |
128 | +.mt60 { | |
129 | + margin-top: 60px; | |
130 | +} | |
131 | + | |
132 | +.mt70 { | |
133 | + margin-top: 70px; | |
134 | +} | |
135 | + | |
136 | +.mt80 { | |
137 | + margin-top: 80px; | |
138 | +} | |
139 | + | |
140 | +.mt90 { | |
141 | + margin-top: 90px; | |
142 | +} | |
143 | + | |
144 | +.mt100 { | |
145 | + margin-top: 100px; | |
146 | +} | |
147 | + | |
148 | +.mb0 { | |
149 | + margin-bottom: 0px; | |
150 | +} | |
151 | + | |
152 | +.mb5 { | |
153 | + margin-bottom: 5px; | |
154 | +} | |
155 | + | |
156 | +.mb10 { | |
157 | + margin-bottom: 10px; | |
158 | +} | |
159 | + | |
160 | +.mb20 { | |
161 | + margin-bottom: 20px; | |
162 | +} | |
163 | + | |
164 | +.mb30 { | |
165 | + margin-bottom: 30px; | |
166 | +} | |
167 | + | |
168 | +.mb40 { | |
169 | + margin-bottom: 40px; | |
170 | +} | |
171 | + | |
172 | +.mb50 { | |
173 | + margin-bottom: 50px; | |
174 | +} | |
175 | + | |
176 | +.mb60 { | |
177 | + margin-bottom: 60px; | |
178 | +} | |
179 | + | |
180 | +.mb70 { | |
181 | + margin-bottom: 70px; | |
182 | +} | |
183 | + | |
184 | +.mb80 { | |
185 | + margin-bottom: 80px; | |
186 | +} | |
187 | + | |
188 | +.mb90 { | |
189 | + margin-bottom: 90px; | |
190 | +} | |
191 | + | |
192 | +.mb100 { | |
193 | + margin-bottom: 100px; | |
194 | +} | |
195 | + | |
196 | +/* 패딩 */ | |
197 | +.pd0 { | |
198 | + padding: 0; | |
199 | +} | |
200 | + | |
201 | +.pd5 { | |
202 | + padding: 5px; | |
203 | +} | |
204 | + | |
205 | +.pd10 { | |
206 | + padding: 10px; | |
207 | +} | |
208 | + | |
209 | +.pd15 { | |
210 | + padding: 15px; | |
211 | +} | |
212 | + | |
213 | + | |
214 | +.pd20 { | |
215 | + padding: 20px; | |
216 | +} | |
217 | + | |
218 | +.pd30 { | |
219 | + padding: 30px; | |
220 | +} | |
221 | + | |
222 | +.pd40 { | |
223 | + padding: 40px; | |
224 | +} | |
225 | + | |
226 | +.pd50 { | |
227 | + padding: 50px; | |
228 | +} | |
229 | + | |
230 | +.pd60 { | |
231 | + padding: 60px; | |
232 | +} | |
233 | + | |
234 | +.pd70 { | |
235 | + padding: 70px; | |
236 | +} | |
237 | + | |
238 | +.pd80 { | |
239 | + padding: 80px; | |
240 | +} | |
241 | + | |
242 | +.pd90 { | |
243 | + padding: 90px; | |
244 | +} | |
245 | + | |
246 | +.pd100 { | |
247 | + padding: 100px; | |
248 | +} | |
249 | + | |
250 | +.pt0 { | |
251 | + padding-top: 0; | |
252 | +} | |
253 | + | |
254 | +.pt5 { | |
255 | + padding-top: 5px; | |
256 | +} | |
257 | + | |
258 | +.pt10 { | |
259 | + padding-top: 10px; | |
260 | +} | |
261 | + | |
262 | +.pt20 { | |
263 | + padding-top: 20px; | |
264 | +} | |
265 | + | |
266 | +.pt30 { | |
267 | + padding-top: 30px; | |
268 | +} | |
269 | + | |
270 | +.pt40 { | |
271 | + padding-top: 40px; | |
272 | +} | |
273 | + | |
274 | +.pt50 { | |
275 | + padding-top: 50px; | |
276 | +} | |
277 | + | |
278 | +.pt60 { | |
279 | + padding-top: 60px; | |
280 | +} | |
281 | + | |
282 | +.pt70 { | |
283 | + padding-top: 70px; | |
284 | +} | |
285 | + | |
286 | +.pt80 { | |
287 | + padding-top: 80px; | |
288 | +} | |
289 | + | |
290 | +.pt90 { | |
291 | + padding-top: 90px; | |
292 | +} | |
293 | + | |
294 | +.pt100 { | |
295 | + padding-top: 100px; | |
296 | +} | |
297 | + | |
298 | +.pb0 { | |
299 | + padding-bottom: 0; | |
300 | +} | |
301 | + | |
302 | +.pb5 { | |
303 | + padding-bottom: 5px; | |
304 | +} | |
305 | + | |
306 | +.pb10 { | |
307 | + padding-bottom: 10px; | |
308 | +} | |
309 | + | |
310 | +.pb20 { | |
311 | + padding-bottom: 20px; | |
312 | +} | |
313 | + | |
314 | +.pb30 { | |
315 | + padding-bottom: 30px; | |
316 | +} | |
317 | + | |
318 | +.pb40 { | |
319 | + padding-bottom: 40px; | |
320 | +} | |
321 | + | |
322 | +.pb50 { | |
323 | + padding-bottom: 50px; | |
324 | +} | |
325 | + | |
326 | +.pb60 { | |
327 | + padding-bottom: 60px; | |
328 | +} | |
329 | + | |
330 | +.pb70 { | |
331 | + padding-bottom: 70px; | |
332 | +} | |
333 | + | |
334 | +.pb80 { | |
335 | + padding-bottom: 80px; | |
336 | +} | |
337 | + | |
338 | +.pb90 { | |
339 | + padding-bottom: 90px; | |
340 | +} | |
341 | + | |
342 | +.pb100 { | |
343 | + padding-bottom: 100px; | |
344 | +} | |
345 | + | |
346 | +.pl0 { | |
347 | + padding-left: 0; | |
348 | +} | |
349 | + | |
350 | +.pl5 { | |
351 | + padding-left: 5px; | |
352 | +} | |
353 | + | |
354 | +.pl10 { | |
355 | + padding-left: 10px; | |
356 | +} | |
357 | + | |
358 | +.pl15 { | |
359 | + padding-left: 15px; | |
360 | +} | |
361 | + | |
362 | +.pl20 { | |
363 | + padding-left: 20px; | |
364 | +} | |
365 | + | |
366 | +.pl30 { | |
367 | + padding-left: 30px; | |
368 | +} | |
369 | + | |
370 | +.pl40 { | |
371 | + padding-left: 40px; | |
372 | +} | |
373 | + | |
374 | +.pl50 { | |
375 | + padding-left: 50px; | |
376 | +} | |
377 | + | |
378 | +.pl60 { | |
379 | + padding-left: 60px; | |
380 | +} | |
381 | + | |
382 | +.pl70 { | |
383 | + padding-left: 70px; | |
384 | +} | |
385 | + | |
386 | +.pl80 { | |
387 | + padding-left: 80px; | |
388 | +} | |
389 | + | |
390 | +.pl90 { | |
391 | + padding-left: 90px; | |
392 | +} | |
393 | + | |
394 | +.pl100 { | |
395 | + padding-left: 100px; | |
396 | +} | |
397 | + | |
398 | +.pr0 { | |
399 | + padding-right: 0; | |
400 | +} | |
401 | + | |
402 | +.pr5 { | |
403 | + padding-right: 5px; | |
404 | +} | |
405 | + | |
406 | +.pr10 { | |
407 | + padding-right: 10px; | |
408 | +} | |
409 | + | |
410 | +.pr15 { | |
411 | + padding-right: 15px; | |
412 | +} | |
413 | + | |
414 | +.pr20 { | |
415 | + padding-right: 20px; | |
416 | +} | |
417 | + | |
418 | +.pr30 { | |
419 | + padding-right: 30px; | |
420 | +} | |
421 | + | |
422 | +.pr40 { | |
423 | + padding-right: 40px; | |
424 | +} | |
425 | + | |
426 | +.pr50 { | |
427 | + padding-right: 50px; | |
428 | +} | |
429 | + | |
430 | +.pr60 { | |
431 | + padding-right: 60px; | |
432 | +} | |
433 | + | |
434 | +.pr70 { | |
435 | + padding-right: 70px; | |
436 | +} | |
437 | + | |
438 | +.pr80 { | |
439 | + padding-right: 80px; | |
440 | +} | |
441 | + | |
442 | +.rb90 { | |
443 | + padding-right: 90px; | |
444 | +} | |
445 | + | |
446 | +.pr100 { | |
447 | + padding-right: 100px; | |
448 | +} | |
449 | + | |
450 | + | |
451 | +/* text 정렬 */ | |
452 | +.text-lf { | |
453 | + text-align: left; | |
454 | +} | |
455 | + | |
456 | +.text-ct { | |
457 | + text-align: center; | |
458 | +} | |
459 | + | |
460 | +.text-rg { | |
461 | + text-align: right; | |
462 | +} | |
463 | + | |
464 | + | |
465 | +/* 기타 공용 */ | |
466 | +.cursor { | |
467 | + cursor: pointer; | |
468 | +}(No newline at end of file) |
+++ client/resources/css/component.css
... | ... | @@ -0,0 +1,275 @@ |
1 | +@charset "utf-8"; | |
2 | + | |
3 | +/* btn */ | |
4 | +.small-btn { | |
5 | + width: 120px; | |
6 | + padding: 5px 10px; | |
7 | + border-radius: 5px; | |
8 | + font-size: 1.3rem; | |
9 | +} | |
10 | +.comment-btn{ | |
11 | + padding: 10px; | |
12 | + font-size: 1.3rem; | |
13 | + border-radius: 0 5px 5px 0; | |
14 | +} | |
15 | +.large-btn { | |
16 | + width: 100%; | |
17 | + padding: 5px 15px; | |
18 | + border-radius: 5px; | |
19 | +} | |
20 | + | |
21 | +.icon-btn { | |
22 | + padding: 5px; | |
23 | + border-radius: 50%; | |
24 | +} | |
25 | + | |
26 | +.close-btn{ | |
27 | + font-size: 1.6rem; | |
28 | + font-weight: 900; | |
29 | +} | |
30 | +.btn, | |
31 | +.logout-btn{ | |
32 | + position: relative; | |
33 | + font-size: 1.4rem; | |
34 | +} | |
35 | +.logout-btn::before { | |
36 | + content: ""; | |
37 | + width: 1px; | |
38 | + height: 10px; | |
39 | + position: absolute; | |
40 | + top: 50%; | |
41 | + left: 0; | |
42 | + transform: translateY(-50%); | |
43 | + background-color: #aaa; | |
44 | +} | |
45 | + | |
46 | +.close-btn { | |
47 | + color: #d6def6; | |
48 | +} | |
49 | + | |
50 | +.blue-btn, | |
51 | +.blue-border-btn:hover { | |
52 | + background-color: var(--blue); | |
53 | + color: var(--white); | |
54 | + transition: all 0.3s ease-in-out; | |
55 | +} | |
56 | + | |
57 | +.red-btn, | |
58 | +.red-border-btn:hover { | |
59 | + background-color: var(--red); | |
60 | + color: var(--white); | |
61 | + transition: all 0.3s ease-in-out; | |
62 | +} | |
63 | + | |
64 | +.green-btn, | |
65 | +.green-border-btn:hover { | |
66 | + background-color: var(--green); | |
67 | + color: var(--white); | |
68 | + transition: all 0.3s ease-in-out; | |
69 | +} | |
70 | + | |
71 | +.orange-btn, | |
72 | +.orange-border-btn:hover { | |
73 | + background-color: var(--orange); | |
74 | + color: var(--white); | |
75 | + transition: all 0.3s ease-in-out; | |
76 | +} | |
77 | + | |
78 | +.darkg-btn, | |
79 | +.darkg-border-btn:hover { | |
80 | + background-color: var(--dark); | |
81 | + color: var(--white); | |
82 | + transition: all 0.3s ease-in-out; | |
83 | +} | |
84 | + | |
85 | +.gray-btn, | |
86 | +.gray-border-btn:hover { | |
87 | + background-color: #eee; | |
88 | + color: #333; | |
89 | + transition: all 0.3s ease-in-out; | |
90 | +} | |
91 | + | |
92 | + | |
93 | +.blue-border-btn { | |
94 | + border: 1px solid var(--blue); | |
95 | + color: var(--blue); | |
96 | + background-color: var(--white); | |
97 | +} | |
98 | + | |
99 | +.red-border-btn { | |
100 | + border: 1px solid var(--red); | |
101 | + color: var(--red); | |
102 | + background-color: var(--white); | |
103 | +} | |
104 | + | |
105 | +.green-border-btn { | |
106 | + border: 1px solid var(--green); | |
107 | + color: var(--green); | |
108 | + background-color: var(--white); | |
109 | +} | |
110 | + | |
111 | +.orange-border-btn { | |
112 | + border: 1px solid var(--orange); | |
113 | + ; | |
114 | + color: var(--orange); | |
115 | + background-color: var(--white); | |
116 | +} | |
117 | + | |
118 | +.darkg-border-btn { | |
119 | + border: 1px solid #434343; | |
120 | + color: #434343; | |
121 | + background-color: var(--white); | |
122 | +} | |
123 | + | |
124 | +.gray-border-btn { | |
125 | + border: 1px solid #aaa; | |
126 | + color: #aaa; | |
127 | + background-color: var(--white); | |
128 | +} | |
129 | + | |
130 | +.white-border-btn { | |
131 | + border: 1px solid var(--white); | |
132 | + color: var(--white); | |
133 | + background-color: transparent; | |
134 | +} | |
135 | + | |
136 | +.tp-btn { | |
137 | + background-color: transparent; | |
138 | + width: 15px; | |
139 | + height: 15px; | |
140 | + margin-left: 10px; | |
141 | +} | |
142 | + | |
143 | +button:disabled { | |
144 | + background-color: #eee; | |
145 | + color: #333; | |
146 | +} | |
147 | + | |
148 | +/* 모달 */ | |
149 | +.modal-wrapper { | |
150 | + background-color: rgba(0, 0, 0, 0.5); | |
151 | + position: fixed; | |
152 | + width: 100%; | |
153 | + height: 100%; | |
154 | + top: 0; | |
155 | + left: 0; | |
156 | + display: flex; | |
157 | + justify-content: center; | |
158 | + align-items: center; | |
159 | + z-index: 11000; | |
160 | +} | |
161 | + | |
162 | +.modal-container { | |
163 | + background: #fff; | |
164 | + min-width: 500px; | |
165 | + width: 30%; | |
166 | + height:80%; | |
167 | + border-radius: 5px; | |
168 | + display: grid; | |
169 | + grid-template-rows: auto 1fr auto; | |
170 | + padding: 20px; | |
171 | + box-sizing: border-box; | |
172 | + max-height: 95%; | |
173 | + min-height: 500px; | |
174 | +} | |
175 | + | |
176 | +.modal-title { | |
177 | + width: 100%; | |
178 | + border-bottom: 1px solid #d4cccc; | |
179 | + padding: 10px 0; | |
180 | +} | |
181 | + | |
182 | +.modal-subtitle { | |
183 | + font-size: 1.3rem; | |
184 | + font-weight: 600; | |
185 | +} | |
186 | + | |
187 | +.modal-content-monthly { | |
188 | + width: 100%; | |
189 | + padding: 20px 0; | |
190 | + overflow-y: auto; | |
191 | +} | |
192 | + | |
193 | +.large-modal { | |
194 | + width: 90%; | |
195 | +} | |
196 | + | |
197 | +.small-modal { | |
198 | + min-width: 200px; | |
199 | + min-height: 200px; | |
200 | + max-width: 450px; | |
201 | + height: auto; | |
202 | + max-height: 50%; | |
203 | +} | |
204 | + | |
205 | +.list-modal { | |
206 | + width: 80%; | |
207 | + height: 80%; | |
208 | +} | |
209 | + | |
210 | +.alert-write { | |
211 | + font-size: 1.6rem; | |
212 | + line-height: 180%; | |
213 | +} | |
214 | + | |
215 | + | |
216 | +.modal-content-monthly::-webkit-scrollbar { | |
217 | + width: 10px; | |
218 | +} | |
219 | + | |
220 | +.modal-content-monthly::-webkit-scrollbar-thumb { | |
221 | + background-color: #6b6b6b; | |
222 | + border-radius: 10px; | |
223 | + background-clip: padding-box; | |
224 | + border: 2px solid transparent; | |
225 | +} | |
226 | + | |
227 | +.modal-content-monthly::-webkit-scrollbar-track { | |
228 | + background-color: #eee; | |
229 | + border-radius: 10px; | |
230 | + box-shadow: inset 0px 0px 5px white; | |
231 | +} | |
232 | + | |
233 | +.modal-end { | |
234 | + width: 100%; | |
235 | + padding: 15px 0; | |
236 | + border-top: 1px solid #eee; | |
237 | +} | |
238 | + | |
239 | +.alert-modal .modal-end button, | |
240 | +.small-modal .modal-end button { | |
241 | + margin-left: 0; | |
242 | +} | |
243 | + | |
244 | +.full-input, | |
245 | +.full-select { | |
246 | + width: 100%; | |
247 | +} | |
248 | + | |
249 | + | |
250 | +/* auto list */ | |
251 | +.input-group{ | |
252 | + position: relative; | |
253 | +} | |
254 | +.auto-list{ | |
255 | + position: absolute; | |
256 | + bottom: 0; | |
257 | + left: 0; | |
258 | + transform: translateY(100%); | |
259 | + width: 100%; | |
260 | + max-height: 200px; | |
261 | + overflow-y: auto; | |
262 | + border-radius: 0 0 5px 5px; | |
263 | + /* background-color: var(--white); | |
264 | + padding: 10px; | |
265 | + border: 1px solid #eee; */ | |
266 | +} | |
267 | + | |
268 | +.auto-list li{ | |
269 | + font-size: 1.3rem; | |
270 | + margin-bottom: 5px; | |
271 | +} | |
272 | + | |
273 | +.auto-list li:last-child{ | |
274 | + margin-bottom: 0; | |
275 | +}(No newline at end of file) |
+++ client/resources/css/font.css
... | ... | @@ -0,0 +1,27 @@ |
1 | +@font-face { | |
2 | + font-family: 'Pretendard'; | |
3 | + src: url('../font/PretendardVariable.woff2') format('woff'); | |
4 | + font-weight: 400; | |
5 | + font-style: normal; | |
6 | +} | |
7 | + | |
8 | +@font-face { | |
9 | + font-family: "GmarketSansM"; | |
10 | + src: url("/client/resources/font/GmarketSansMedium.woff") format("woff"); | |
11 | + font-weight: normal; | |
12 | + font-style: normal; | |
13 | +} | |
14 | + | |
15 | +@font-face { | |
16 | + font-family: "GmarketSansL"; | |
17 | + src: url("/client/resources/font/GmarketSansLight.woff") format("woff"); | |
18 | + font-weight: normal; | |
19 | + font-style: normal; | |
20 | +} | |
21 | + | |
22 | +@font-face { | |
23 | + font-family: "GmarketSansB"; | |
24 | + src: url("/client/resources/font/GmarketSansBold.woff") format("woff"); | |
25 | + font-weight: bold; | |
26 | + font-style: normal; | |
27 | +}(No newline at end of file) |
+++ client/resources/css/grid.css
... | ... | @@ -0,0 +1,333 @@ |
1 | +@charset "utf-8"; | |
2 | + | |
3 | +.container { | |
4 | + width: 100%; | |
5 | + padding-right: 15px; | |
6 | + padding-left: 15px; | |
7 | + margin-right: auto; | |
8 | + margin-left: auto; | |
9 | +} | |
10 | + | |
11 | +@media (min-width: 576px) { | |
12 | + .container { | |
13 | + max-width: 540px; | |
14 | + } | |
15 | +} | |
16 | + | |
17 | +@media (min-width: 768px) { | |
18 | + .container { | |
19 | + max-width: 720px; | |
20 | + } | |
21 | +} | |
22 | + | |
23 | +@media (min-width: 992px) { | |
24 | + .container { | |
25 | + max-width: 960px; | |
26 | + } | |
27 | +} | |
28 | + | |
29 | +@media (min-width: 1200px) { | |
30 | + .container { | |
31 | + max-width: 1140px; | |
32 | + } | |
33 | +} | |
34 | + | |
35 | + | |
36 | +.flex { | |
37 | + display: flex; | |
38 | + flex-wrap: wrap; | |
39 | +} | |
40 | + | |
41 | +.flex-column { | |
42 | + display: flex; | |
43 | + flex-direction: column; | |
44 | +} | |
45 | + | |
46 | +.no-gutters { | |
47 | + margin-right: 0; | |
48 | + margin-left: 0; | |
49 | +} | |
50 | + | |
51 | + | |
52 | +.no-gutters>.col, | |
53 | +.no-gutters>[class*="col-"] { | |
54 | + padding-right: 0; | |
55 | + padding-left: 0; | |
56 | +} | |
57 | + | |
58 | +.col-1, | |
59 | +.col-2, | |
60 | +.col-3, | |
61 | +.col-4, | |
62 | +.col-5, | |
63 | +.col-6, | |
64 | +.col-7, | |
65 | +.col-8, | |
66 | +.col-9, | |
67 | +.col-10, | |
68 | +.col-11, | |
69 | +.col-12, | |
70 | +.col, | |
71 | +.col-auto, | |
72 | +.col-sm-1, | |
73 | +.col-sm-2, | |
74 | +.col-sm-3, | |
75 | +.col-sm-4, | |
76 | +.col-sm-5, | |
77 | +.col-sm-6, | |
78 | +.col-sm-7, | |
79 | +.col-sm-8, | |
80 | +.col-sm-9, | |
81 | +.col-sm-10, | |
82 | +.col-sm-11, | |
83 | +.col-sm-12, | |
84 | +.col-sm, | |
85 | +.col-sm-auto, | |
86 | +.col-md-1, | |
87 | +.col-md-2, | |
88 | +.col-md-3, | |
89 | +.col-md-4, | |
90 | +.col-md-5, | |
91 | +.col-md-6, | |
92 | +.col-md-7, | |
93 | +.col-md-8, | |
94 | +.col-md-9, | |
95 | +.col-md-10, | |
96 | +.col-md-11, | |
97 | +.col-md-12, | |
98 | +.col-md, | |
99 | +.col-md-auto, | |
100 | +.col-lg-1, | |
101 | +.col-lg-2, | |
102 | +.col-lg-3, | |
103 | +.col-lg-4, | |
104 | +.col-lg-5, | |
105 | +.col-lg-6, | |
106 | +.col-lg-7, | |
107 | +.col-lg-8, | |
108 | +.col-lg-9, | |
109 | +.col-lg-10, | |
110 | +.col-lg-11, | |
111 | +.col-lg-12, | |
112 | +.col-lg, | |
113 | +.col-lg-auto, | |
114 | +.col-xl-1, | |
115 | +.col-xl-2, | |
116 | +.col-xl-3, | |
117 | +.col-xl-4, | |
118 | +.col-xl-5, | |
119 | +.col-xl-6, | |
120 | +.col-xl-7, | |
121 | +.col-xl-8, | |
122 | +.col-xl-9, | |
123 | +.col-xl-10, | |
124 | +.col-xl-11, | |
125 | +.col-xl-12, | |
126 | +.col-xl, | |
127 | +.col-xl-auto { | |
128 | + position: relative; | |
129 | + width: 100%; | |
130 | + min-height: 1px; | |
131 | + padding-right: 10px; | |
132 | + padding-left: 10px; | |
133 | +} | |
134 | + | |
135 | + | |
136 | +.col { | |
137 | + -ms-flex-preferred-size: 0; | |
138 | + flex-basis: 0; | |
139 | + -ms-flex-positive: 1; | |
140 | + flex-grow: 1; | |
141 | + max-width: 100%; | |
142 | +} | |
143 | + | |
144 | +.col-auto { | |
145 | + -ms-flex: 0 0 auto; | |
146 | + flex: 0 0 auto; | |
147 | + width: auto; | |
148 | + max-width: none; | |
149 | +} | |
150 | + | |
151 | +.col-1 { | |
152 | + -ms-flex: 0 0 8.333333%; | |
153 | + flex: 0 0 8.333333%; | |
154 | + max-width: 8.333333%; | |
155 | +} | |
156 | + | |
157 | +.col-2 { | |
158 | + -ms-flex: 0 0 16.666667%; | |
159 | + flex: 0 0 16.666667%; | |
160 | + max-width: 16.666667%; | |
161 | +} | |
162 | + | |
163 | +.col-3 { | |
164 | + -ms-flex: 0 0 25%; | |
165 | + flex: 0 0 25%; | |
166 | + max-width: 25%; | |
167 | +} | |
168 | + | |
169 | +.col-4 { | |
170 | + -ms-flex: 0 0 33.333333%; | |
171 | + flex: 0 0 33.333333%; | |
172 | + max-width: 33.333333%; | |
173 | +} | |
174 | + | |
175 | +.col-5 { | |
176 | + -ms-flex: 0 0 41.666667%; | |
177 | + flex: 0 0 41.666667%; | |
178 | + max-width: 41.666667%; | |
179 | +} | |
180 | + | |
181 | +.col-6 { | |
182 | + -ms-flex: 0 0 50%; | |
183 | + flex: 0 0 50%; | |
184 | + max-width: 50%; | |
185 | +} | |
186 | + | |
187 | +.col-7 { | |
188 | + -ms-flex: 0 0 58.333333%; | |
189 | + flex: 0 0 58.333333%; | |
190 | + max-width: 58.333333%; | |
191 | +} | |
192 | + | |
193 | +.col-8 { | |
194 | + -ms-flex: 0 0 66.666667%; | |
195 | + flex: 0 0 66.666667%; | |
196 | + max-width: 66.666667%; | |
197 | +} | |
198 | + | |
199 | +.col-9 { | |
200 | + -ms-flex: 0 0 75%; | |
201 | + flex: 0 0 75%; | |
202 | + max-width: 75%; | |
203 | +} | |
204 | + | |
205 | +.col-10 { | |
206 | + -ms-flex: 0 0 83.333333%; | |
207 | + flex: 0 0 83.333333%; | |
208 | + max-width: 83.333333%; | |
209 | +} | |
210 | + | |
211 | +.col-11 { | |
212 | + -ms-flex: 0 0 91.666667%; | |
213 | + flex: 0 0 91.666667%; | |
214 | + max-width: 91.666667%; | |
215 | +} | |
216 | + | |
217 | +.col-12 { | |
218 | + -ms-flex: 0 0 100%; | |
219 | + flex: 0 0 100%; | |
220 | + max-width: 100%; | |
221 | +} | |
222 | + | |
223 | + | |
224 | + | |
225 | +.justify-start { | |
226 | + justify-content: flex-start; | |
227 | +} | |
228 | + | |
229 | +.justify-center { | |
230 | + justify-content: center; | |
231 | +} | |
232 | + | |
233 | +.justify-end { | |
234 | + justify-content: flex-end; | |
235 | +} | |
236 | + | |
237 | +.justify-between { | |
238 | + justify-content: space-between; | |
239 | +} | |
240 | + | |
241 | +.justify-around { | |
242 | + justify-content: space-around; | |
243 | +} | |
244 | + | |
245 | +.align-start { | |
246 | + align-items: flex-start; | |
247 | +} | |
248 | + | |
249 | + | |
250 | +.align-center { | |
251 | + align-items: center; | |
252 | +} | |
253 | + | |
254 | +.align-end { | |
255 | + align-items: flex-end; | |
256 | +} | |
257 | + | |
258 | +.flex-auto { | |
259 | + flex: 0 0 auto; | |
260 | +} | |
261 | + | |
262 | +.flex1 { | |
263 | + flex: 1; | |
264 | +} | |
265 | + | |
266 | +.flex2 { | |
267 | + flex: 2; | |
268 | +} | |
269 | + | |
270 | +.flex3 { | |
271 | + flex: 3; | |
272 | +} | |
273 | + | |
274 | +.flex4 { | |
275 | + flex: 4; | |
276 | +} | |
277 | + | |
278 | +.flex5 { | |
279 | + flex: 5; | |
280 | +} | |
281 | + | |
282 | +.flex6 { | |
283 | + flex: 6; | |
284 | +} | |
285 | + | |
286 | +.flex7 { | |
287 | + flex: 7; | |
288 | +} | |
289 | + | |
290 | +.flex8 { | |
291 | + flex: 8; | |
292 | +} | |
293 | + | |
294 | + | |
295 | +.gap1 { | |
296 | + gap: 1%; | |
297 | +} | |
298 | + | |
299 | +.gap2 { | |
300 | + gap: 2%; | |
301 | +} | |
302 | + | |
303 | +.gap3 { | |
304 | + gap: 3%; | |
305 | +} | |
306 | + | |
307 | +.gap4 { | |
308 | + gap: 4%; | |
309 | +} | |
310 | + | |
311 | +.gap5 { | |
312 | + gap: 5%; | |
313 | +} | |
314 | + | |
315 | +.gap6 { | |
316 | + gap: 6%; | |
317 | +} | |
318 | + | |
319 | +.gap7 { | |
320 | + gap: 7%; | |
321 | +} | |
322 | + | |
323 | +.gap8 { | |
324 | + gap: 8%; | |
325 | +} | |
326 | + | |
327 | +.gap9 { | |
328 | + gap: 9%; | |
329 | +} | |
330 | + | |
331 | +.gap10 { | |
332 | + gap: 10%; | |
333 | +}(No newline at end of file) |
+++ client/resources/css/layout.css
... | ... | @@ -0,0 +1,52 @@ |
1 | +.mobile-layout { | |
2 | + display: grid; | |
3 | + grid-template-rows: auto 1fr auto; | |
4 | + grid-template-areas: | |
5 | + "header" | |
6 | + "main" | |
7 | + "nav " | |
8 | +} | |
9 | + | |
10 | + | |
11 | +header { | |
12 | + padding: 15px; | |
13 | + grid-area: header; | |
14 | + background-color: var(--blue); | |
15 | +} | |
16 | + | |
17 | +.current-name{ | |
18 | + color: var(--white); | |
19 | + font-size: 1.6rem; | |
20 | + font-weight: 600; | |
21 | +} | |
22 | + | |
23 | +.main-menu { | |
24 | + background-color: var(--blue); | |
25 | + grid-area: nav; | |
26 | +} | |
27 | + | |
28 | +.main-menu ul, | |
29 | +.main-menu li { | |
30 | + list-style: none; | |
31 | +} | |
32 | + | |
33 | + | |
34 | +.main-menu ul li a { | |
35 | + color: #ddd; | |
36 | + text-decoration: none; | |
37 | + font-size: 1.2rem; | |
38 | + padding: 10px; | |
39 | +} | |
40 | + | |
41 | +.main-menu ul li.active a { | |
42 | + color: var(--white); | |
43 | + border-radius: 5px; | |
44 | + font-weight: bold; | |
45 | +} | |
46 | + | |
47 | + | |
48 | +#pages { | |
49 | + padding: 15px 10px; | |
50 | + grid-area: main; | |
51 | + overflow-y: auto; | |
52 | +}(No newline at end of file) |
+++ client/resources/css/reset.css
... | ... | @@ -0,0 +1,223 @@ |
1 | +@charset "utf-8"; | |
2 | + | |
3 | +:root { | |
4 | + --blue: #005aab; | |
5 | + --skyblue: #f2f8ff; | |
6 | + --indigo: #6610f2; | |
7 | + --purple: #6f42c1; | |
8 | + --pink: #e83e8c; | |
9 | + --red: #dc3545; | |
10 | + --orange: #fd7e14; | |
11 | + --yellow: #ffc107; | |
12 | + --green: #28a745; | |
13 | + --teal: #20c997; | |
14 | + --cyan: #17a2b8; | |
15 | + --white: #fff; | |
16 | + --gray: #6c757d; | |
17 | + --gray-dark: #343a40; | |
18 | + --primary: #007bff; | |
19 | + --primary-lignt: #b7daff; | |
20 | + --secondary: #6c757d; | |
21 | + --success: #28a745; | |
22 | + --info: #17a2b8; | |
23 | + --main: #388d6e; | |
24 | + --warning: #ffc107; | |
25 | + --danger: #dc3545; | |
26 | + --light: #f8f9fa; | |
27 | + --dark: #343a40; | |
28 | + --light: #eeeeee; | |
29 | +} | |
30 | + | |
31 | +/* box-sizing 규칙을 명시합니다. */ | |
32 | +*, | |
33 | +*::before, | |
34 | +*::after { | |
35 | + box-sizing: border-box; | |
36 | + margin: 0; | |
37 | + padding: 0; | |
38 | +} | |
39 | + | |
40 | +/* 폰트 크기의 팽창을 방지합니다. */ | |
41 | +html { | |
42 | + -moz-text-size-adjust: none; | |
43 | + -webkit-text-size-adjust: none; | |
44 | + text-size-adjust: none; | |
45 | + font-size: 10px; | |
46 | +} | |
47 | + | |
48 | +/* 기본 여백을 제거하여 작성된 CSS를 더 잘 제어할 수 있습니다. */ | |
49 | +body, | |
50 | +h1, | |
51 | +h2, | |
52 | +h3, | |
53 | +h4, | |
54 | +p, | |
55 | +figure, | |
56 | +blockquote, | |
57 | +dl, | |
58 | +dd { | |
59 | + margin-block-end: 0; | |
60 | +} | |
61 | + | |
62 | +/* list를 role값으로 갖는 ul, ol 요소의 기본 목록 스타일을 제거합니다. */ | |
63 | +ul, | |
64 | +ol, | |
65 | +li { | |
66 | + list-style: none; | |
67 | +} | |
68 | + | |
69 | +/* 핵심 body의 기본값을 설정합니다. */ | |
70 | +body, | |
71 | +#root, | |
72 | +#App { | |
73 | + width: 100%; | |
74 | + height: 100vh; | |
75 | + font-family: 'Pretendard'; | |
76 | + /* background-color: #f9f9f9; */ | |
77 | +} | |
78 | + | |
79 | +/* 제목 요소와 상호작용하는 요소에 대해 line-height를 더 짧게 설정합니다. */ | |
80 | +h1, | |
81 | +h2, | |
82 | +h3, | |
83 | +h4, | |
84 | +button, | |
85 | +input, | |
86 | +label { | |
87 | + line-height: 1.1; | |
88 | +} | |
89 | + | |
90 | +/* 제목에 대한 text-wrap을 balance로 설정합니다. */ | |
91 | +h1, | |
92 | +h2, | |
93 | +h3, | |
94 | +h4 { | |
95 | + text-wrap: balance; | |
96 | +} | |
97 | + | |
98 | +/* 클래스가 없는 기본 a 태그 요소는 기본 스타일을 가져옵니다. */ | |
99 | +a:not([class]) { | |
100 | + text-decoration-skip-ink: auto; | |
101 | + color: currentColor; | |
102 | +} | |
103 | + | |
104 | +/* 이미지 관련 작업을 더 쉽게 합니다. */ | |
105 | +img, | |
106 | +picture { | |
107 | + max-width: 100%; | |
108 | + display: block; | |
109 | +} | |
110 | + | |
111 | +svg { | |
112 | + vertical-align: bottom; | |
113 | +} | |
114 | + | |
115 | +/* input 및 button 항목들이 글꼴을 상속하도록 합니다. */ | |
116 | +input, | |
117 | +button, | |
118 | +textarea, | |
119 | +select { | |
120 | + font: inherit; | |
121 | +} | |
122 | + | |
123 | +button { | |
124 | + background: inherit; | |
125 | + border: none; | |
126 | + box-shadow: none; | |
127 | + border-radius: 0; | |
128 | + padding: 0; | |
129 | + overflow: visible; | |
130 | + cursor: pointer | |
131 | +} | |
132 | + | |
133 | +/* 행 속성이 없는 textarea가 너무 작지 않도록 합니다. */ | |
134 | +textarea:not([rows]) { | |
135 | + min-height: 10em; | |
136 | +} | |
137 | + | |
138 | +/* 고정된 모든 항목에는 여분의 스크롤 여백이 있어야 합니다. */ | |
139 | +:target { | |
140 | + scroll-margin-block: 5ex; | |
141 | +} | |
142 | + | |
143 | +table { | |
144 | + min-width: 100%; | |
145 | + border-collapse: collapse; | |
146 | + table-layout: fixed; | |
147 | +} | |
148 | + | |
149 | +table th, | |
150 | +table td { | |
151 | + font-size: 1.3rem; | |
152 | +} | |
153 | + | |
154 | +select, | |
155 | +input{ | |
156 | + padding: 10px; | |
157 | + border: 1px solid #ddd; | |
158 | + border-radius: 5px; | |
159 | + font-size: 1.3rem; | |
160 | +} | |
161 | + | |
162 | +input:focus{ | |
163 | + outline: none; | |
164 | +} | |
165 | + | |
166 | +input[type="file"] { | |
167 | + width: 100%; | |
168 | + border: 0; | |
169 | +} | |
170 | + | |
171 | +summary { | |
172 | + position: relative; | |
173 | +} | |
174 | + | |
175 | +summary::marker { | |
176 | + content: none; | |
177 | +} | |
178 | + | |
179 | +summary::after { | |
180 | + background: url(../img/comment_arrow.png) no-repeat 0px 0px; | |
181 | + content: ''; | |
182 | + width: 11px; | |
183 | + height: 11px; | |
184 | + font-size: 1.6rem; | |
185 | + font-weight: bold; | |
186 | + color: #eee; | |
187 | + position: absolute; | |
188 | + top: calc(50%); | |
189 | + right: 0; | |
190 | + transform: translateY(-50%); | |
191 | +} | |
192 | + | |
193 | + | |
194 | +[open] summary::after { | |
195 | + top: 50%; | |
196 | + transform: translateY(-50%) rotate(180deg); | |
197 | + color: var(--blue); | |
198 | +} | |
199 | + | |
200 | +textarea{ | |
201 | + width: 100%; | |
202 | + border: 0; | |
203 | + border-radius: 5px; | |
204 | + min-height: 250px; | |
205 | + outline: 0; | |
206 | + font-size: 1.3rem; | |
207 | +} | |
208 | + | |
209 | +/* 스크롤바 디자인 */ | |
210 | +::-webkit-scrollbar { | |
211 | + width: 8px; | |
212 | + height: 8px; | |
213 | +} | |
214 | + | |
215 | +::-webkit-scrollbar-thumb { | |
216 | + background-color: #ededed; | |
217 | + border-radius: 10px; | |
218 | +} | |
219 | + | |
220 | +::-webkit-scrollbar-track { | |
221 | + background-color: #fff; | |
222 | + border-radius: 10px; | |
223 | +}(No newline at end of file) |
+++ client/resources/css/style.css
... | ... | @@ -0,0 +1,97 @@ |
1 | + | |
2 | +/* 로그인 */ | |
3 | +.login-page { | |
4 | + background-color: var(--light); | |
5 | +} | |
6 | + | |
7 | +/* 홈화면 */ | |
8 | +.item { | |
9 | + padding: 10px; | |
10 | + background-color: var(--white); | |
11 | + border-radius: 10px; | |
12 | + border: 1px solid #eee; | |
13 | +} | |
14 | + | |
15 | +.img-zone { | |
16 | + width: 100%; | |
17 | + height: 120px; | |
18 | + border: 1px solid #eee; | |
19 | + border-radius: 10px; | |
20 | +} | |
21 | + | |
22 | +.img-zone img { | |
23 | + width: 100%; | |
24 | + height: 100%; | |
25 | + object-fit: cover; | |
26 | + border-radius: 10px; | |
27 | +} | |
28 | + | |
29 | +.tag { | |
30 | + display: inline-block; | |
31 | + padding: 5px; | |
32 | + background-color: #eee; | |
33 | + border: 1px solid #ddd; | |
34 | + border-radius: 5px; | |
35 | +} | |
36 | + | |
37 | +.item-title { | |
38 | + color: var(--blue); | |
39 | + font-size: 1.3rem; | |
40 | +} | |
41 | + | |
42 | +.item-table th, | |
43 | +.item-table td { | |
44 | + padding: 5px 0; | |
45 | +} | |
46 | + | |
47 | +.comment-zone { | |
48 | + padding: 5px 0; | |
49 | + border-top: 1px solid #ddd; | |
50 | +} | |
51 | + | |
52 | +.comment-zone>details>summary>span { | |
53 | + font-size: 1.2rem; | |
54 | +} | |
55 | + | |
56 | +/* 등록 */ | |
57 | + | |
58 | +.input-group>label { | |
59 | + display: block; | |
60 | +} | |
61 | + | |
62 | +.text-area { | |
63 | + width: 100%; | |
64 | + background-color: var(--white); | |
65 | + border-radius: 5px; | |
66 | + border: 1px solid #ddd; | |
67 | + padding: 5px; | |
68 | +} | |
69 | + | |
70 | +.file-zone { | |
71 | + width: 100%; | |
72 | + border-top: 1px solid #ddd; | |
73 | +} | |
74 | + | |
75 | +.comment-bottom, | |
76 | +.btn-wrap { | |
77 | + padding-top: 10px; | |
78 | + border-top: 1px solid #eee; | |
79 | +} | |
80 | + | |
81 | +.comment-input { | |
82 | + border: 1px solid #eee; | |
83 | + border-radius: 5px; | |
84 | +} | |
85 | + | |
86 | +.comment-input input { | |
87 | + border: none; | |
88 | +} | |
89 | + | |
90 | +/* 조회 */ | |
91 | +.search-zone{ | |
92 | + padding: 10px; | |
93 | + background-color: var(--skyblue); | |
94 | + border: 1px solid var(--primary-lignt); | |
95 | + border-radius: 5px; | |
96 | +} | |
97 | + |
+++ client/resources/font/GmarketSansBold.woff
Binary file is not shown |
+++ client/resources/font/GmarketSansLight.woff
Binary file is not shown |
+++ client/resources/font/GmarketSansMedium.woff
Binary file is not shown |
+++ client/resources/font/PretendardVariable.woff2
Binary file is not shown |
+++ client/resources/img/ajin_logo.png
Binary file is not shown |
+++ client/resources/img/comment_arrow.png
Binary file is not shown |
+++ client/views/component/autosearch/AutoSearch.jsx
... | ... | @@ -0,0 +1,60 @@ |
1 | +import React, { useState } from "react"; | |
2 | + | |
3 | +function AutoSearch(props) { | |
4 | + const [inputValue, setInputValue] = useState(""); | |
5 | + const [accountResults, setAccountResults] = useState([]); | |
6 | + const accounts = props.accounts; | |
7 | + const list = document.querySelector(".auto-list"); | |
8 | + | |
9 | + const handleInputChange = (e) => { | |
10 | + const value = e.target.value; | |
11 | + setInputValue(value); | |
12 | + | |
13 | + const filtered = accounts.filter((account) => | |
14 | + account.toLowerCase().startsWith(value.toLowerCase()) | |
15 | + ); | |
16 | + setAccountResults(filtered); | |
17 | + | |
18 | + if (value === "") { | |
19 | + list.style.display = "none" | |
20 | + list.style.padding = "0"; | |
21 | + list.style.backgroundColor = "transparent"; | |
22 | + list.style.border = "0"; | |
23 | + | |
24 | + }else{ | |
25 | + list.style.display = "block" | |
26 | + list.style.padding = "10px"; | |
27 | + list.style.backgroundColor = "#ffffff"; | |
28 | + list.style.border = "1px solid #eee"; | |
29 | + } | |
30 | + }; | |
31 | + | |
32 | + const handleItemClick = (account) => { | |
33 | + setInputValue(account); | |
34 | + setAccountResults([]); | |
35 | + }; | |
36 | + | |
37 | + return ( | |
38 | + <> | |
39 | + <label htmlFor="" className="item-title mb5"> | |
40 | + {props.titleName} | |
41 | + </label> | |
42 | + <input | |
43 | + type="text" | |
44 | + value={inputValue} | |
45 | + onChange={handleInputChange} | |
46 | + placeholder="거래처를 입력하세요" | |
47 | + className="full-input" | |
48 | + /> | |
49 | + <ul className="auto-list"> | |
50 | + {accountResults.map((account, index) => ( | |
51 | + <li key={index} onClick={() => handleItemClick(account)}> | |
52 | + {account} | |
53 | + </li> | |
54 | + ))} | |
55 | + </ul> | |
56 | + </> | |
57 | + ); | |
58 | +} | |
59 | + | |
60 | +export default AutoSearch; |
--- client/views/index.html
+++ client/views/index.html
... | ... | @@ -6,6 +6,13 @@ |
6 | 6 |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
7 | 7 |
<meta name="description" content="Node React Web"> |
8 | 8 |
<link rel="icon" href="" /> |
9 |
+ <link rel="stylesheet" href="/client/resources/css/font.css" /> |
|
10 |
+ <link rel="stylesheet" href="/client/resources/css/reset.css" /> |
|
11 |
+ <link rel="stylesheet" href="/client/resources/css/layout.css" /> |
|
12 |
+ <link rel="stylesheet" href="/client/resources/css/grid.css" /> |
|
13 |
+ <link rel="stylesheet" href="/client/resources/css/common.css" /> |
|
14 |
+ <link rel="stylesheet" href="/client/resources/css/component.css" /> |
|
15 |
+ <link rel="stylesheet" href="/client/resources/css/style.css" /> |
|
9 | 16 |
<title>Node React Web</title> |
10 | 17 |
</head> |
11 | 18 |
|
--- client/views/index.jsx
+++ client/views/index.jsx
... | ... | @@ -4,14 +4,17 @@ |
4 | 4 |
* @dscription : React를 활용한 Client단 구현의 시작점(Index) Component 입니다. |
5 | 5 |
*/ |
6 | 6 |
|
7 |
- import React from 'react'; |
|
8 |
- import ReactDOM from 'react-dom/client'; |
|
9 |
- |
|
10 |
- //Application Root component |
|
11 |
- import App from './pages/App.jsx'; |
|
12 |
- |
|
13 |
- const root = ReactDOM.createRoot(document.getElementById('root')); |
|
14 |
- root.render(<App/>); |
|
15 |
- |
|
16 |
- |
|
17 |
-(No newline at end of file) |
|
7 |
+import React from "react"; |
|
8 |
+import ReactDOM from "react-dom/client"; |
|
9 |
+import { BrowserRouter } from "react-router-dom"; |
|
10 |
+//Application Root component |
|
11 |
+import App from "./pages/App.jsx"; |
|
12 |
+ |
|
13 |
+const root = ReactDOM.createRoot(document.getElementById("root")); |
|
14 |
+root.render( |
|
15 |
+ <BrowserRouter> |
|
16 |
+ <React.StrictMode> |
|
17 |
+ <App /> |
|
18 |
+ </React.StrictMode> |
|
19 |
+ </BrowserRouter> |
|
20 |
+); |
--- client/views/layout/Header.jsx
+++ client/views/layout/Header.jsx
... | ... | @@ -1,25 +1,44 @@ |
1 |
-import React from 'react'; |
|
1 |
+import React from "react"; |
|
2 |
+import { useNavigate } from "react-router-dom"; |
|
3 |
+import Icon from "@mdi/react"; |
|
4 |
+import { mdiTrashCanOutline, mdiPencilOutline, mdiChevronLeft } from "@mdi/js"; |
|
2 | 5 |
|
3 |
-function Header () { |
|
4 |
- |
|
5 |
- const [headerData, setHeaderData] = React.useState(0); |
|
6 |
- console.log('Header headerData : ', headerData); |
|
7 |
- |
|
8 |
- function headerDataChange () { |
|
9 |
- for (let i = 0; i < 10; i++) { |
|
10 |
- setHeaderData(headerData + 1); |
|
6 |
+function Header(props) { |
|
7 |
+ const navigate = useNavigate(); |
|
8 |
+ const rollBackBtn = () => { |
|
9 |
+ navigate(-1); // 바로 이전 페이지로 이동 |
|
10 |
+ }; |
|
11 |
+ return ( |
|
12 |
+ <header> |
|
13 |
+ <div |
|
14 |
+ className={ |
|
15 |
+ "flex align-center no-gutters "+ |
|
16 |
+ (props.pathName !== "영업 일지" |
|
17 |
+ ? "justify-center" |
|
18 |
+ : "justify-between") |
|
11 | 19 |
} |
12 |
- console.log('function headerDataChange headerData : ', headerData); |
|
13 |
- } |
|
14 |
- |
|
15 |
- |
|
16 |
- |
|
17 |
- return ( |
|
18 |
- <div> |
|
19 |
- 헤더입니다. |
|
20 |
- <button onClick={headerDataChange}>+1</button> |
|
21 |
- </div> |
|
22 |
- ) |
|
20 |
+ > |
|
21 |
+ {props.pathName === "영업 일지" ? ( |
|
22 |
+ <div className="col-2"> |
|
23 |
+ <button onClick={rollBackBtn}> |
|
24 |
+ <Icon path={mdiChevronLeft} size={1.5} color={"#fff"} /> |
|
25 |
+ </button> |
|
26 |
+ </div> |
|
27 |
+ ) : null} |
|
28 |
+ <p className="current-name col-8 text-ct">{props.pathName}</p> |
|
29 |
+ {props.pathName === "영업 일지" ? ( |
|
30 |
+ <div className="col-2"> |
|
31 |
+ <button className="mr5 btn"> |
|
32 |
+ <Icon path={mdiTrashCanOutline} size={1.2} color={"#fff"} /> |
|
33 |
+ </button> |
|
34 |
+ <button> |
|
35 |
+ <Icon path={mdiPencilOutline} size={1.2} color={"#fff"} /> |
|
36 |
+ </button> |
|
37 |
+ </div> |
|
38 |
+ ) : null} |
|
39 |
+ </div> |
|
40 |
+ </header> |
|
41 |
+ ); |
|
23 | 42 |
} |
24 | 43 |
|
25 |
-export default Header;(No newline at end of file) |
|
44 |
+export default Header; |
--- client/views/layout/Menu.jsx
+++ client/views/layout/Menu.jsx
... | ... | @@ -1,17 +1,63 @@ |
1 |
-import React from 'react'; |
|
2 |
-import { BrowserRouter, Link } from 'react-router-dom'; |
|
1 |
+import React, { useState } from "react"; |
|
2 |
+import { Link } from "react-router-dom"; |
|
3 |
+import Icon from "@mdi/react"; |
|
4 |
+import { |
|
5 |
+ mdiHomeOutline, |
|
6 |
+ mdiMagnify, |
|
7 |
+ mdiPlusCircleOutline, |
|
8 |
+ mdiInformationOutline, |
|
9 |
+} from "@mdi/js"; |
|
3 | 10 |
|
4 |
-function Menu () { |
|
5 |
- return ( |
|
6 |
- <> |
|
7 |
- <div> |
|
8 |
- <BrowserRouter> |
|
9 |
- <Link to="/">Home</Link> |
|
10 |
- </BrowserRouter> |
|
11 |
- </div> |
|
12 |
- </> |
|
13 |
- |
|
14 |
- ) |
|
11 |
+function Menu() { |
|
12 |
+ const menuList = [ |
|
13 |
+ { |
|
14 |
+ path: "/", |
|
15 |
+ pathName: "HOME", |
|
16 |
+ icon: <Icon path={mdiHomeOutline} size={1.6} rem />, |
|
17 |
+ }, |
|
18 |
+ { |
|
19 |
+ path: "/search", |
|
20 |
+ pathName: "Search", |
|
21 |
+ icon: <Icon path={mdiMagnify} size={1.6} rem />, |
|
22 |
+ }, |
|
23 |
+ { |
|
24 |
+ path: "/homeInsert", |
|
25 |
+ pathName: "Add", |
|
26 |
+ icon: <Icon path={mdiPlusCircleOutline} size={1.6} rem />, |
|
27 |
+ }, |
|
28 |
+ { |
|
29 |
+ path: "/custinfo", |
|
30 |
+ pathName: "Cust Info", |
|
31 |
+ icon: <Icon path={mdiInformationOutline} size={1.6} rem />, |
|
32 |
+ }, |
|
33 |
+ ]; |
|
34 |
+ |
|
35 |
+ const [activeIndex, setActiveIndex] = useState(null); |
|
36 |
+ |
|
37 |
+ const handleClick = (index) => { |
|
38 |
+ setActiveIndex(index); |
|
39 |
+ }; |
|
40 |
+ |
|
41 |
+ |
|
42 |
+ return ( |
|
43 |
+ <nav className="main-menu"> |
|
44 |
+ <ul className="flex justify-between aling-center"> |
|
45 |
+ {menuList.map((menu, index) => ( |
|
46 |
+ <li |
|
47 |
+ className={`${activeIndex === index ? "active" : ""}`} |
|
48 |
+ onClick={() => handleClick(index)} |
|
49 |
+ > |
|
50 |
+ <Link |
|
51 |
+ to={menu.path} |
|
52 |
+ className="flex-column justify-center align-center"> |
|
53 |
+ <p>{menu.icon}</p> |
|
54 |
+ <p>{menu.pathName}</p> |
|
55 |
+ </Link> |
|
56 |
+ </li> |
|
57 |
+ ))} |
|
58 |
+ </ul> |
|
59 |
+ </nav> |
|
60 |
+ ); |
|
15 | 61 |
} |
16 | 62 |
|
17 |
-export default Menu;(No newline at end of file) |
|
63 |
+export default Menu; |
--- client/views/pages/App.jsx
+++ client/views/pages/App.jsx
... | ... | @@ -3,27 +3,46 @@ |
3 | 3 |
* @since : 2022.09.20 |
4 | 4 |
* @dscription : React를 활용한 Client단 구현 대상인 Application의 시작점(Index) Component 입니다. |
5 | 5 |
*/ |
6 |
- import React from 'react'; |
|
6 |
+import React, { useEffect, useState } from "react"; |
|
7 |
+import { useLocation } from "react-router-dom"; |
|
8 |
+import AppRoute from "./AppRoute.jsx"; |
|
9 |
+import Header from "../layout/Header.jsx"; |
|
10 |
+import Menu from "../layout/Menu.jsx"; |
|
7 | 11 |
|
8 |
- //Application의 Route 정보를 관리하는 Component |
|
9 |
- import AppRoute from './AppRoute.jsx'; |
|
10 |
- |
|
11 |
- //Test Layout |
|
12 |
- import Header from '../layout/Header.jsx'; |
|
13 |
- import Menu from '../layout/Menu.jsx'; |
|
14 |
- import Footer from '../layout/Footer.jsx'; |
|
15 |
- |
|
16 |
- function App() { |
|
17 |
- return ( |
|
18 |
- <div id="App"> |
|
19 |
- <Header></Header> |
|
20 |
- <Menu></Menu> |
|
21 |
- <div id="pages"> |
|
22 |
- <AppRoute/> |
|
23 |
- </div> |
|
24 |
- <Footer></Footer> |
|
25 |
- </div> |
|
26 |
- ) |
|
27 |
- } |
|
28 |
- |
|
29 |
- export default App;(No newline at end of file) |
|
12 |
+function App() { |
|
13 |
+ const [currentPathName, setCurrentPathName] = useState(""); |
|
14 |
+ const location = useLocation(); |
|
15 |
+ |
|
16 |
+ useEffect(() => { |
|
17 |
+ const body = document.querySelector("body"); |
|
18 |
+ |
|
19 |
+ if (location.pathname === "/") { |
|
20 |
+ body.style.backgroundColor = "#f9f9f9"; |
|
21 |
+ setCurrentPathName("홈"); |
|
22 |
+ } else if (location.pathname === "/search") { |
|
23 |
+ body.style.backgroundColor = "#ffffff"; |
|
24 |
+ setCurrentPathName("조회"); |
|
25 |
+ } else if (location.pathname === "/homeInsert") { |
|
26 |
+ body.style.backgroundColor = "#ffffff"; |
|
27 |
+ setCurrentPathName("업체 등록"); |
|
28 |
+ } else if (location.pathname === "/homeSelectOne") { |
|
29 |
+ body.style.backgroundColor = "#ffffff"; |
|
30 |
+ setCurrentPathName("영업 일지"); |
|
31 |
+ } else if (location.pathname === "/custinfo") { |
|
32 |
+ body.style.backgroundColor = "#ffffff"; |
|
33 |
+ setCurrentPathName("업체 정보 조회"); |
|
34 |
+ } |
|
35 |
+ }, [location.pathname]); |
|
36 |
+ |
|
37 |
+ return ( |
|
38 |
+ <div id="App" className="mobile-layout"> |
|
39 |
+ <Header pathName={currentPathName}></Header> |
|
40 |
+ <Menu></Menu> |
|
41 |
+ <div id="pages"> |
|
42 |
+ <AppRoute /> |
|
43 |
+ </div> |
|
44 |
+ </div> |
|
45 |
+ ); |
|
46 |
+} |
|
47 |
+ |
|
48 |
+export default App; |
--- client/views/pages/AppRoute.jsx
+++ client/views/pages/AppRoute.jsx
... | ... | @@ -3,20 +3,28 @@ |
3 | 3 |
* @since : 2022.09.20 |
4 | 4 |
* @dscription : Application의 Route 정보를 관리하는 Component 입니다. |
5 | 5 |
*/ |
6 |
- import React from 'react'; |
|
7 |
- //react router 라이브러리 import |
|
8 |
- import { BrowserRouter, Routes, Route } from 'react-router-dom'; |
|
9 |
- |
|
10 |
- import Main from './main/Main.jsx'; |
|
11 |
- |
|
12 |
- function AppRoute () { |
|
13 |
- return ( |
|
14 |
- <BrowserRouter> |
|
15 |
- <Routes> |
|
16 |
- <Route path="/" element={<Main/>}></Route> |
|
17 |
- </Routes> |
|
18 |
- </BrowserRouter> |
|
19 |
- ) |
|
20 |
- } |
|
21 |
- |
|
22 |
- export default AppRoute;(No newline at end of file) |
|
6 |
+import React from "react"; |
|
7 |
+//react router 라이브러리 import |
|
8 |
+import { Routes, Route } from "react-router-dom"; |
|
9 |
+ |
|
10 |
+import HomeSelectList from "./main/HomeSelectList.jsx"; |
|
11 |
+import HomeInsert from "./main/HomeInsert.jsx"; |
|
12 |
+import HomeSelectOne from "./main/HomeSelectOne.jsx"; |
|
13 |
+import CustInfoSelectList from "./custInfo/CustInfoSelectList.jsx"; |
|
14 |
+import Search from "./search/Search.jsx"; |
|
15 |
+import Login from "./login/Login.jsx"; |
|
16 |
+ |
|
17 |
+function AppRoute() { |
|
18 |
+ return ( |
|
19 |
+ <Routes> |
|
20 |
+ <Route path="/" element={<HomeSelectList />}></Route> |
|
21 |
+ <Route path="/search" element={<Search />}></Route> |
|
22 |
+ <Route path="/homeSelectOne" element={<HomeSelectOne />}></Route> |
|
23 |
+ <Route path="/login" element={<Login />}></Route> |
|
24 |
+ <Route path="/homeInsert" element={<HomeInsert />}></Route> |
|
25 |
+ <Route path="/custinfo" element={<CustInfoSelectList />}></Route> |
|
26 |
+ </Routes> |
|
27 |
+ ); |
|
28 |
+} |
|
29 |
+ |
|
30 |
+export default AppRoute; |
+++ client/views/pages/custInfo/CustInfoSelectList.jsx
... | ... | @@ -0,0 +1,21 @@ |
1 | +import React from "react"; | |
2 | +import AutoSearch from "./../../component/autosearch/AutoSearch.jsx"; | |
3 | + | |
4 | +function CustInfoSelectList() { | |
5 | + const accounts = ["Apple", "Banana", "Orange", "Grape", "Strawberry"]; | |
6 | + | |
7 | + return ( | |
8 | + <div className="custinfo-page"> | |
9 | + <div className="search-zone"> | |
10 | + <div className="input-group mb10"> | |
11 | + <AutoSearch titleName={"거래처"} accounts={accounts} /> | |
12 | + </div> | |
13 | + <div className="btn-wrap flex justify-end"> | |
14 | + <button className="blue-btn small-btn">조회</button> | |
15 | + </div> | |
16 | + </div> | |
17 | + </div> | |
18 | + ); | |
19 | +} | |
20 | + | |
21 | +export default CustInfoSelectList; |
+++ client/views/pages/login/Login.jsx
... | ... | @@ -0,0 +1,41 @@ |
1 | +import React from "react"; | |
2 | + | |
3 | +function Login() { | |
4 | + return ( | |
5 | + <div className="login-page flex-column justify-center"> | |
6 | + <div className="login-wrap"> | |
7 | + <div className="logo"> | |
8 | + <img src="../../../resources/img/ajin_logo.png" alt="" /> | |
9 | + </div> | |
10 | + <div className="login-title"> | |
11 | + <p>LOGIN</p> | |
12 | + </div> | |
13 | + <div className="input-group"> | |
14 | + <label htmlFor="businessNumber"></label> | |
15 | + <input | |
16 | + type="text" | |
17 | + id="businessNumber" | |
18 | + placeholder="사번을 입력해주세요" | |
19 | + /> | |
20 | + </div> | |
21 | + <div className="input-group"> | |
22 | + <label htmlFor="number"></label> | |
23 | + <input | |
24 | + type="text" | |
25 | + id="number" | |
26 | + placeholder="전화번호를 입력해주세요" | |
27 | + /> | |
28 | + </div> | |
29 | + <div className="input-group"> | |
30 | + <label htmlFor="crtificationNumber"></label> | |
31 | + <input type="text" id="crtificationNumber" placeholder="인증번호" /> | |
32 | + </div> | |
33 | + <div className="btn-wrap"> | |
34 | + <button className="blue-btn">인증</button> | |
35 | + </div> | |
36 | + </div> | |
37 | + </div> | |
38 | + ); | |
39 | +} | |
40 | + | |
41 | +export default Login; |
+++ client/views/pages/main/HomeInsert.jsx
... | ... | @@ -0,0 +1,57 @@ |
1 | +import React from "react"; | |
2 | + | |
3 | +function HomeInsert() { | |
4 | + return ( | |
5 | + <div className="add-page page"> | |
6 | + <div className="input-group mb20"> | |
7 | + <label htmlFor="" className="item-title mb5"> | |
8 | + 방문일자 | |
9 | + </label> | |
10 | + <input type="date" name="" id="" className="full-input" /> | |
11 | + </div> | |
12 | + <div className="input-group mb20"> | |
13 | + <label htmlFor="" className="item-title mb5"> | |
14 | + 거래처 | |
15 | + </label> | |
16 | + <input | |
17 | + type="text" | |
18 | + name="" | |
19 | + id="" | |
20 | + className="full-input" | |
21 | + list="depList" | |
22 | + /> | |
23 | + <datalist id="depList"> | |
24 | + <option value="거래처1"></option> | |
25 | + <option value="거래처2"></option> | |
26 | + <option value="거래처3"></option> | |
27 | + <option value="거래처4"></option> | |
28 | + </datalist> | |
29 | + </div> | |
30 | + <div className="input-group mb20"> | |
31 | + <label htmlFor="" className="item-title mb5"> | |
32 | + 거래처 담당자 | |
33 | + </label> | |
34 | + <input type="text" name="" id="" className="full-input" /> | |
35 | + </div> | |
36 | + <div className="input-group mb20"> | |
37 | + <label htmlFor="" className="item-title mb5"> | |
38 | + 특이사항 | |
39 | + </label> | |
40 | + <div className="text-area"> | |
41 | + <textarea name="" id="" cols="30" rows="10"></textarea> | |
42 | + <div className="file-zone"> | |
43 | + <input type="file" name="" id="" /> | |
44 | + </div> | |
45 | + </div> | |
46 | + </div> | |
47 | + <div className="input-group mb20"> | |
48 | + <label htmlFor="" className="item-title mb5"> | |
49 | + 태그 | |
50 | + </label> | |
51 | + <input type="text" name="" id="" className="full-input" /> | |
52 | + </div> | |
53 | + </div> | |
54 | + ); | |
55 | +} | |
56 | + | |
57 | +export default HomeInsert; |
+++ client/views/pages/main/HomeSelectList.jsx
... | ... | @@ -0,0 +1,51 @@ |
1 | +import React from "react"; | |
2 | +import Icon from '@mdi/react'; | |
3 | +import { mdiCalendarMonth,mdiHandshakeOutline,mdiFileCheckOutline,mdiAccountOutline,mdiChatOutline} from '@mdi/js'; | |
4 | +import TestImg from "../../../resources/img/ajin_logo.png" | |
5 | + | |
6 | +function HomeSelectList() { | |
7 | + return ( | |
8 | + <div className="main-page"> | |
9 | + <ul> | |
10 | + <li className="item"> | |
11 | + <div className="img-zone mb10"> | |
12 | + <img src={TestImg} alt="" /> | |
13 | + </div> | |
14 | + <div className="tag-zone mb10"> | |
15 | + <span className="tag">태그입니다.</span> | |
16 | + </div> | |
17 | + <div className="text-zone mb10"> | |
18 | + <table className="item-table"> | |
19 | + <tr> | |
20 | + <th className="item-title col-4 text-lf"><Icon path={mdiCalendarMonth} size={1} /> 방문일자</th> | |
21 | + <td>2024.02.08</td> | |
22 | + </tr> | |
23 | + <tr> | |
24 | + <th className="item-title col-4 text-lf"><Icon path={mdiHandshakeOutline} size={1} /> 거래처</th> | |
25 | + <td>태광산업</td> | |
26 | + </tr> | |
27 | + <tr> | |
28 | + <th className="item-title col-4 text-lf"><Icon path={mdiFileCheckOutline} size={1} /> 특이사항</th> | |
29 | + <td> | |
30 | + 1. 제지 종이 신규로 받고 있음<br /> | |
31 | + 2. EKAEKDWK XXX로 변경 | |
32 | + </td> | |
33 | + </tr> | |
34 | + <tr> | |
35 | + <th className="item-title col-4 text-lf"><Icon path={mdiAccountOutline} size={1} /> 담당자</th> | |
36 | + <td>곽길도 과장</td> | |
37 | + </tr> | |
38 | + </table> | |
39 | + </div> | |
40 | + <div className="comment-zone"> | |
41 | + <details> | |
42 | + <summary><Icon path={mdiChatOutline} size={1} horizontal/><span className="ml5">2</span></summary> | |
43 | + </details> | |
44 | + </div> | |
45 | + </li> | |
46 | + </ul> | |
47 | + </div> | |
48 | + ); | |
49 | +} | |
50 | + | |
51 | +export default HomeSelectList; |
+++ client/views/pages/main/HomeSelectOne.jsx
... | ... | @@ -0,0 +1,76 @@ |
1 | +import React from "react"; | |
2 | +import Icon from "@mdi/react"; | |
3 | +import { | |
4 | + mdiCalendarMonth, | |
5 | + mdiHandshakeOutline, | |
6 | + mdiFileCheckOutline, | |
7 | + mdiAccountOutline, | |
8 | + mdiChatOutline, | |
9 | +} from "@mdi/js"; | |
10 | +import TestImg from "../../../resources/img/ajin_logo.png"; | |
11 | + | |
12 | +function HomeSelectOne() { | |
13 | + return ( | |
14 | + <div className="detail-page page"> | |
15 | + <div className="img-zone mb10"> | |
16 | + <img src={TestImg} alt="" /> | |
17 | + </div> | |
18 | + <div className="text-zone mb10"> | |
19 | + <table className="item-table"> | |
20 | + <tr> | |
21 | + <th className="item-title col-4 text-lf"> | |
22 | + <Icon path={mdiCalendarMonth} size={1} /> 방문일자 | |
23 | + </th> | |
24 | + <td>2024.02.08</td> | |
25 | + </tr> | |
26 | + <tr> | |
27 | + <th className="item-title col-4 text-lf"> | |
28 | + <Icon path={mdiHandshakeOutline} size={1} /> 거래처 | |
29 | + </th> | |
30 | + <td>태광산업</td> | |
31 | + </tr> | |
32 | + <tr> | |
33 | + <th className="item-title col-4 text-lf"> | |
34 | + <Icon path={mdiFileCheckOutline} size={1} /> 특이사항 | |
35 | + </th> | |
36 | + <td> | |
37 | + 1. 제지 종이 신규로 받고 있음 | |
38 | + <br /> | |
39 | + 2. EKAEKDWK XXX로 변경 | |
40 | + </td> | |
41 | + </tr> | |
42 | + <tr> | |
43 | + <th className="item-title col-4 text-lf"> | |
44 | + <Icon path={mdiAccountOutline} size={1} /> 담당자 | |
45 | + </th> | |
46 | + <td>곽길도 과장</td> | |
47 | + </tr> | |
48 | + </table> | |
49 | + </div> | |
50 | + <div className="tag-zone mb10"> | |
51 | + <span className="tag">태그입니다.</span> | |
52 | + </div> | |
53 | + <div className="comment-zone"> | |
54 | + <div className="comment-top pb10"> | |
55 | + <Icon path={mdiChatOutline} size={1} horizontal /> | |
56 | + <span className="ml5">2</span> | |
57 | + </div> | |
58 | + {/* 여기 댓글 트리 */} | |
59 | + <div className="comment-bottom"> | |
60 | + <div className="comment-input flex align-center"> | |
61 | + <input | |
62 | + type="text" | |
63 | + name="" | |
64 | + id="" | |
65 | + placeholder="댓글을 입력해주세요." | |
66 | + className="col-10" | |
67 | + /> | |
68 | + <button className="comment-btn darkg-btn col-2">등록</button> | |
69 | + </div> | |
70 | + </div> | |
71 | + </div> | |
72 | + </div> | |
73 | + ); | |
74 | +} | |
75 | + | |
76 | +export default HomeSelectOne; |
--- client/views/pages/main/Main.jsx
... | ... | @@ -1,16 +0,0 @@ |
1 | -import React from 'react'; | |
2 | - | |
3 | -import TestCompoent from '../../component/test/TestCompoent.jsx'; | |
4 | - | |
5 | -function Main () { | |
6 | - return ( | |
7 | - <> | |
8 | - <div> | |
9 | - 메인 페이지 입니다. | |
10 | - <TestCompoent/> | |
11 | - </div> | |
12 | - </> | |
13 | - ) | |
14 | -} | |
15 | - | |
16 | -export default Main;(No newline at end of file) |
+++ client/views/pages/search/Search.jsx
... | ... | @@ -0,0 +1,55 @@ |
1 | +import React from "react"; | |
2 | + | |
3 | +function Search() { | |
4 | + return ( | |
5 | + <div className="search-page"> | |
6 | + <div className="search-zone"> | |
7 | + <div className="input-group mb10"> | |
8 | + <label htmlFor="" className="item-title mb5"> | |
9 | + 거래처 | |
10 | + </label> | |
11 | + <input | |
12 | + type="text" | |
13 | + name="" | |
14 | + id="" | |
15 | + list="account" | |
16 | + className="full-input" | |
17 | + /> | |
18 | + <datalist id="account"> | |
19 | + <option value="거래처1"></option> | |
20 | + <option value="거래처2"></option> | |
21 | + <option value="거래처3"></option> | |
22 | + <option value="거래처4"></option> | |
23 | + </datalist> | |
24 | + </div> | |
25 | + <div className="input-group mb10"> | |
26 | + <label htmlFor="" className="item-title mb5"> | |
27 | + 기간 | |
28 | + </label> | |
29 | + <div className="flex justify-between align-center"> | |
30 | + <input type="date" name="" id="" list="account" className="col-5" /> | |
31 | + <span className="col-2 text-ct">~</span> | |
32 | + <input type="date" name="" id="" list="account" className="col-5" /> | |
33 | + </div> | |
34 | + </div> | |
35 | + <div className="input-group mb10"> | |
36 | + <label htmlFor="" className="item-title mb5"> | |
37 | + 태그 | |
38 | + </label> | |
39 | + <input type="text" name="" id="" className="full-input" /> | |
40 | + </div> | |
41 | + <div className="input-group mb10"> | |
42 | + <label htmlFor="" className="item-title mb5"> | |
43 | + 내용 | |
44 | + </label> | |
45 | + <input type="text" name="" id="" className="full-input" /> | |
46 | + </div> | |
47 | + <div className="btn-wrap flex justify-end"> | |
48 | + <button className="blue-btn small-btn">조회</button> | |
49 | + </div> | |
50 | + </div> | |
51 | + </div> | |
52 | + ); | |
53 | +} | |
54 | + | |
55 | +export default Search; |
--- client/views/pages/test/TestInsert.jsx
... | ... | @@ -1,20 +0,0 @@ |
1 | -import React from 'react'; | |
2 | - | |
3 | -/** | |
4 | - * @author : 최정우 | |
5 | - * @since : 2022.09.24 | |
6 | - * @dscription : 테스트용 등록 페이지 입니다. | |
7 | - */ | |
8 | -function TestInsert () { | |
9 | - return ( | |
10 | - <> | |
11 | - <div style={{width:'100%', height:'100vh', backgroundColor:'#6799FF', textAlign:'center'}}> | |
12 | - <div style={{margin:'0 auto'}}> | |
13 | - <p>Test용 목록 조회 페이지 입니다</p> | |
14 | - </div> | |
15 | - </div> | |
16 | - </> | |
17 | - ) | |
18 | -} | |
19 | -export default TestInsert; | |
20 | - |
--- client/views/pages/test/TestSelectList.jsx
... | ... | @@ -1,20 +0,0 @@ |
1 | -import React from 'react'; | |
2 | - | |
3 | -/** | |
4 | - * @author : 최정우 | |
5 | - * @since : 2022.09.24 | |
6 | - * @dscription : 테스트용 목록 조회 페이지 입니다. | |
7 | - */ | |
8 | -function TestSelectList () { | |
9 | - return ( | |
10 | - <> | |
11 | - <div style={{width:'100%', height:'100vh', backgroundColor:'#6799FF', textAlign:'center'}}> | |
12 | - <div style={{margin:'0 auto'}}> | |
13 | - <p>Test용 목록 조회 페이지 입니다</p> | |
14 | - </div> | |
15 | - </div> | |
16 | - </> | |
17 | - ) | |
18 | -} | |
19 | -export default TestSelectList; | |
20 | - |
--- client/views/pages/test/TestSelectOne.jsx
... | ... | @@ -1,20 +0,0 @@ |
1 | -import React from 'react'; | |
2 | - | |
3 | -/** | |
4 | - * @author : 최정우 | |
5 | - * @since : 2022.09.24 | |
6 | - * @dscription : 테스트용 상세 조회 페이지 입니다. | |
7 | - */ | |
8 | -function TestSelectOne () { | |
9 | - return ( | |
10 | - <> | |
11 | - <div style={{width:'100%', height:'100vh', backgroundColor:'#6799FF', textAlign:'center'}}> | |
12 | - <div style={{margin:'0 auto'}}> | |
13 | - <p>Test용 상세 조회 페이지 입니다</p> | |
14 | - </div> | |
15 | - </div> | |
16 | - </> | |
17 | - ) | |
18 | -} | |
19 | -export default TestSelectOne; | |
20 | - |
--- client/views/pages/test/TestUpdate.jsx
... | ... | @@ -1,20 +0,0 @@ |
1 | -import React from 'react'; | |
2 | - | |
3 | -/** | |
4 | - * @author : 최정우 | |
5 | - * @since : 2022.09.24 | |
6 | - * @dscription : 테스트용 수정 페이지 입니다. | |
7 | - */ | |
8 | -function TestUpdate () { | |
9 | - return ( | |
10 | - <> | |
11 | - <div style={{width:'100%', height:'100vh', backgroundColor:'#6799FF', textAlign:'center'}}> | |
12 | - <div style={{margin:'0 auto'}}> | |
13 | - <p>Test용 목록 조회 페이지 입니다</p> | |
14 | - </div> | |
15 | - </div> | |
16 | - </> | |
17 | - ) | |
18 | -} | |
19 | -export default TestUpdate; | |
20 | - |
--- node_modules/.package-lock.json
+++ node_modules/.package-lock.json
... | ... | @@ -1,6 +1,6 @@ |
1 | 1 |
{ |
2 |
- "name": "node_react_web_server_framework_v1.0", |
|
3 |
- "lockfileVersion": 2, |
|
2 |
+ "name": "agin_business_log", |
|
3 |
+ "lockfileVersion": 3, |
|
4 | 4 |
"requires": true, |
5 | 5 |
"packages": { |
6 | 6 |
"node_modules/@ampproject/remapping": { |
... | ... | @@ -582,6 +582,19 @@ |
582 | 582 |
"dependencies": { |
583 | 583 |
"@jridgewell/resolve-uri": "^3.0.3", |
584 | 584 |
"@jridgewell/sourcemap-codec": "^1.4.10" |
585 |
+ } |
|
586 |
+ }, |
|
587 |
+ "node_modules/@mdi/js": { |
|
588 |
+ "version": "7.4.47", |
|
589 |
+ "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz", |
|
590 |
+ "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==" |
|
591 |
+ }, |
|
592 |
+ "node_modules/@mdi/react": { |
|
593 |
+ "version": "1.6.1", |
|
594 |
+ "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.6.1.tgz", |
|
595 |
+ "integrity": "sha512-4qZeDcluDFGFTWkHs86VOlHkm6gnKaMql13/gpIcUQ8kzxHgpj31NuCkD8abECVfbULJ3shc7Yt4HJ6Wu6SN4w==", |
|
596 |
+ "dependencies": { |
|
597 |
+ "prop-types": "^15.7.2" |
|
585 | 598 |
} |
586 | 599 |
}, |
587 | 600 |
"node_modules/@nicolo-ribaudo/chokidar-2": { |
... | ... | @@ -2247,6 +2260,14 @@ |
2247 | 2260 |
"node": ">=0.10.0" |
2248 | 2261 |
} |
2249 | 2262 |
}, |
2263 |
+ "node_modules/object-assign": { |
|
2264 |
+ "version": "4.1.1", |
|
2265 |
+ "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", |
|
2266 |
+ "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", |
|
2267 |
+ "engines": { |
|
2268 |
+ "node": ">=0.10.0" |
|
2269 |
+ } |
|
2270 |
+ }, |
|
2250 | 2271 |
"node_modules/object-inspect": { |
2251 | 2272 |
"version": "1.12.2", |
2252 | 2273 |
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz", |
... | ... | @@ -2607,6 +2628,21 @@ |
2607 | 2628 |
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", |
2608 | 2629 |
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==" |
2609 | 2630 |
}, |
2631 |
+ "node_modules/prop-types": { |
|
2632 |
+ "version": "15.8.1", |
|
2633 |
+ "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", |
|
2634 |
+ "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", |
|
2635 |
+ "dependencies": { |
|
2636 |
+ "loose-envify": "^1.4.0", |
|
2637 |
+ "object-assign": "^4.1.1", |
|
2638 |
+ "react-is": "^16.13.1" |
|
2639 |
+ } |
|
2640 |
+ }, |
|
2641 |
+ "node_modules/prop-types/node_modules/react-is": { |
|
2642 |
+ "version": "16.13.1", |
|
2643 |
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", |
|
2644 |
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" |
|
2645 |
+ }, |
|
2610 | 2646 |
"node_modules/proxy-addr": { |
2611 | 2647 |
"version": "2.0.7", |
2612 | 2648 |
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", |
--- package-lock.json
+++ package-lock.json
... | ... | @@ -1,5 +1,5 @@ |
1 | 1 |
{ |
2 |
- "name": "node_react_web_server_framework_v1.0", |
|
2 |
+ "name": "agin_business_log", |
|
3 | 3 |
"lockfileVersion": 2, |
4 | 4 |
"requires": true, |
5 | 5 |
"packages": { |
... | ... | @@ -8,14 +8,17 @@ |
8 | 8 |
"@babel/cli": "7.18.10", |
9 | 9 |
"@babel/core": "7.19.1", |
10 | 10 |
"@babel/preset-react": "7.18.6", |
11 |
+ "@mdi/js": "^7.4.47", |
|
12 |
+ "@mdi/react": "^1.6.1", |
|
11 | 13 |
"babel-loader": "^8.2.5", |
12 | 14 |
"css-loader": "^6.7.1", |
13 | 15 |
"express": "4.18.1", |
14 | 16 |
"file-loader": "^6.2.0", |
15 | 17 |
"fs": "0.0.1-security", |
16 | 18 |
"history": "5.3.0", |
17 |
- "mysql": "^2.18.1", |
|
18 |
- "oracledb": "^5.5.0", |
|
19 |
+ "lodash": "^4.17.21", |
|
20 |
+ "mysql": "2.18.1", |
|
21 |
+ "oracledb": "5.5.0", |
|
19 | 22 |
"pg": "8.8.0", |
20 | 23 |
"react": "18.2.0", |
21 | 24 |
"react-dom": "18.2.0", |
... | ... | @@ -609,6 +612,19 @@ |
609 | 612 |
"dependencies": { |
610 | 613 |
"@jridgewell/resolve-uri": "^3.0.3", |
611 | 614 |
"@jridgewell/sourcemap-codec": "^1.4.10" |
615 |
+ } |
|
616 |
+ }, |
|
617 |
+ "node_modules/@mdi/js": { |
|
618 |
+ "version": "7.4.47", |
|
619 |
+ "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz", |
|
620 |
+ "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==" |
|
621 |
+ }, |
|
622 |
+ "node_modules/@mdi/react": { |
|
623 |
+ "version": "1.6.1", |
|
624 |
+ "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.6.1.tgz", |
|
625 |
+ "integrity": "sha512-4qZeDcluDFGFTWkHs86VOlHkm6gnKaMql13/gpIcUQ8kzxHgpj31NuCkD8abECVfbULJ3shc7Yt4HJ6Wu6SN4w==", |
|
626 |
+ "dependencies": { |
|
627 |
+ "prop-types": "^15.7.2" |
|
612 | 628 |
} |
613 | 629 |
}, |
614 | 630 |
"node_modules/@nicolo-ribaudo/chokidar-2": { |
... | ... | @@ -2287,6 +2303,14 @@ |
2287 | 2303 |
"node": ">=0.10.0" |
2288 | 2304 |
} |
2289 | 2305 |
}, |
2306 |
+ "node_modules/object-assign": { |
|
2307 |
+ "version": "4.1.1", |
|
2308 |
+ "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", |
|
2309 |
+ "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", |
|
2310 |
+ "engines": { |
|
2311 |
+ "node": ">=0.10.0" |
|
2312 |
+ } |
|
2313 |
+ }, |
|
2290 | 2314 |
"node_modules/object-inspect": { |
2291 | 2315 |
"version": "1.12.2", |
2292 | 2316 |
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz", |
... | ... | @@ -2646,6 +2670,21 @@ |
2646 | 2670 |
"version": "2.0.1", |
2647 | 2671 |
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", |
2648 | 2672 |
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==" |
2673 |
+ }, |
|
2674 |
+ "node_modules/prop-types": { |
|
2675 |
+ "version": "15.8.1", |
|
2676 |
+ "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", |
|
2677 |
+ "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", |
|
2678 |
+ "dependencies": { |
|
2679 |
+ "loose-envify": "^1.4.0", |
|
2680 |
+ "object-assign": "^4.1.1", |
|
2681 |
+ "react-is": "^16.13.1" |
|
2682 |
+ } |
|
2683 |
+ }, |
|
2684 |
+ "node_modules/prop-types/node_modules/react-is": { |
|
2685 |
+ "version": "16.13.1", |
|
2686 |
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", |
|
2687 |
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" |
|
2649 | 2688 |
}, |
2650 | 2689 |
"node_modules/proxy-addr": { |
2651 | 2690 |
"version": "2.0.7", |
... | ... | @@ -3992,6 +4031,19 @@ |
3992 | 4031 |
"@jridgewell/sourcemap-codec": "^1.4.10" |
3993 | 4032 |
} |
3994 | 4033 |
}, |
4034 |
+ "@mdi/js": { |
|
4035 |
+ "version": "7.4.47", |
|
4036 |
+ "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz", |
|
4037 |
+ "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==" |
|
4038 |
+ }, |
|
4039 |
+ "@mdi/react": { |
|
4040 |
+ "version": "1.6.1", |
|
4041 |
+ "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.6.1.tgz", |
|
4042 |
+ "integrity": "sha512-4qZeDcluDFGFTWkHs86VOlHkm6gnKaMql13/gpIcUQ8kzxHgpj31NuCkD8abECVfbULJ3shc7Yt4HJ6Wu6SN4w==", |
|
4043 |
+ "requires": { |
|
4044 |
+ "prop-types": "^15.7.2" |
|
4045 |
+ } |
|
4046 |
+ }, |
|
3995 | 4047 |
"@nicolo-ribaudo/chokidar-2": { |
3996 | 4048 |
"version": "2.1.8-no-fsevents.3", |
3997 | 4049 |
"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz", |
... | ... | @@ -5261,6 +5313,11 @@ |
5261 | 5313 |
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", |
5262 | 5314 |
"optional": true |
5263 | 5315 |
}, |
5316 |
+ "object-assign": { |
|
5317 |
+ "version": "4.1.1", |
|
5318 |
+ "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", |
|
5319 |
+ "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==" |
|
5320 |
+ }, |
|
5264 | 5321 |
"object-inspect": { |
5265 | 5322 |
"version": "1.12.2", |
5266 | 5323 |
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz", |
... | ... | @@ -5505,6 +5562,23 @@ |
5505 | 5562 |
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", |
5506 | 5563 |
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==" |
5507 | 5564 |
}, |
5565 |
+ "prop-types": { |
|
5566 |
+ "version": "15.8.1", |
|
5567 |
+ "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", |
|
5568 |
+ "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", |
|
5569 |
+ "requires": { |
|
5570 |
+ "loose-envify": "^1.4.0", |
|
5571 |
+ "object-assign": "^4.1.1", |
|
5572 |
+ "react-is": "^16.13.1" |
|
5573 |
+ }, |
|
5574 |
+ "dependencies": { |
|
5575 |
+ "react-is": { |
|
5576 |
+ "version": "16.13.1", |
|
5577 |
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", |
|
5578 |
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" |
|
5579 |
+ } |
|
5580 |
+ } |
|
5581 |
+ }, |
|
5508 | 5582 |
"proxy-addr": { |
5509 | 5583 |
"version": "2.0.7", |
5510 | 5584 |
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", |
--- package.json
+++ package.json
... | ... | @@ -3,12 +3,15 @@ |
3 | 3 |
"@babel/cli": "7.18.10", |
4 | 4 |
"@babel/core": "7.19.1", |
5 | 5 |
"@babel/preset-react": "7.18.6", |
6 |
+ "@mdi/js": "^7.4.47", |
|
7 |
+ "@mdi/react": "^1.6.1", |
|
6 | 8 |
"babel-loader": "^8.2.5", |
7 | 9 |
"css-loader": "^6.7.1", |
8 | 10 |
"express": "4.18.1", |
9 | 11 |
"file-loader": "^6.2.0", |
10 | 12 |
"fs": "0.0.1-security", |
11 | 13 |
"history": "5.3.0", |
14 |
+ "lodash": "^4.17.21", |
|
12 | 15 |
"mysql": "2.18.1", |
13 | 16 |
"oracledb": "5.5.0", |
14 | 17 |
"pg": "8.8.0", |
--- server/modules/web/Server.js
+++ server/modules/web/Server.js
... | ... | @@ -3,11 +3,11 @@ |
3 | 3 |
* @since : 2022.09.20 |
4 | 4 |
* @dscription : Express 라이브러리 활용 HTTP Web Server 모듈입니다. |
5 | 5 |
*/ |
6 |
-const { BASE_DIR, PORT } = require('../../../Global'); |
|
7 |
-const JsxToJsBuild = require('./build/JsxToJsBuild');//JSX파일을 JS파일로 Build 해주는 모듈 |
|
8 |
-const Logger = require('../log/Logger');//Logger(필수) |
|
6 |
+const { BASE_DIR, PORT } = require("../../../Global"); |
|
7 |
+const JsxToJsBuild = require("./build/JsxToJsBuild"); //JSX파일을 JS파일로 Build 해주는 모듈 |
|
8 |
+const Logger = require("../log/Logger"); //Logger(필수) |
|
9 | 9 |
|
10 |
-const express = require('express'); |
|
10 |
+const express = require("express"); |
|
11 | 11 |
const webServer = express(); |
12 | 12 |
|
13 | 13 |
/** |
... | ... | @@ -16,8 +16,8 @@ |
16 | 16 |
* @dscription : HTTP Server start |
17 | 17 |
*/ |
18 | 18 |
webServer.listen(PORT, function () { |
19 |
- Logger.logging(`★★★ Node.js를 활용한 Web Server 구동(Port:${PORT}) ★★★`); |
|
20 |
-}) |
|
19 |
+ Logger.logging(`★★★ Node.js를 활용한 Web Server 구동(Port:${PORT}) ★★★`); |
|
20 |
+}); |
|
21 | 21 |
|
22 | 22 |
/** |
23 | 23 |
* @author : 최정우 |
... | ... | @@ -25,9 +25,11 @@ |
25 | 25 |
* @dscription : Intercepter 역할을 하는 미들웨어 기능 |
26 | 26 |
*/ |
27 | 27 |
webServer.use(function (request, response, next) { |
28 |
- let ip = request.headers['x-forwarded-for'] || request.socket.remoteAddress; |
|
29 |
- Logger.logging(`[HTTP] ${request.url} (Method: ${request.method}, IP: ${ip})`); |
|
30 |
- next(); |
|
28 |
+ let ip = request.headers["x-forwarded-for"] || request.socket.remoteAddress; |
|
29 |
+ Logger.logging( |
|
30 |
+ `[HTTP] ${request.url} (Method: ${request.method}, IP: ${ip})` |
|
31 |
+ ); |
|
32 |
+ next(); |
|
31 | 33 |
}); |
32 | 34 |
|
33 | 35 |
/** |
... | ... | @@ -35,16 +37,16 @@ |
35 | 37 |
* @since : 2022.09.20 |
36 | 38 |
* @dscription : ROOT URL -> index.html |
37 | 39 |
*/ |
38 |
-webServer.get('/', function (request, response) { |
|
39 |
- response.sendFile(`${BASE_DIR}/client/views/index.html`); |
|
40 |
-}) |
|
40 |
+webServer.get("/", function (request, response) { |
|
41 |
+ response.sendFile(`${BASE_DIR}/client/views/index.html`); |
|
42 |
+}); |
|
41 | 43 |
|
42 | 44 |
/** |
43 | 45 |
* @author : 최정우 |
44 | 46 |
* @since : 2022.09.20 |
45 | 47 |
* @dscription : Router's (Controller) |
46 | 48 |
*/ |
47 |
-webServer.use("/test", require('../../service/test/router/TestRouter')); |
|
49 |
+webServer.use("/test", require("../../service/test/router/TestRouter")); |
|
48 | 50 |
|
49 | 51 |
/** |
50 | 52 |
* webpack 환경에서는 필요 없음 |
... | ... | @@ -71,23 +73,25 @@ |
71 | 73 |
}) |
72 | 74 |
*/ |
73 | 75 |
|
74 |
-/** |
|
75 |
- * @author : 최정우 |
|
76 |
- * @since : 2022.09.20 |
|
77 |
- * @dscription : 화면요청 URL 처리 |
|
78 |
- */ |
|
79 |
-webServer.get('*.page', function (request, response, next) { |
|
80 |
- //기능구현예정 |
|
81 |
-}) |
|
76 |
+ |
|
82 | 77 |
|
83 | 78 |
/** |
84 | 79 |
* @author : 최정우 |
85 | 80 |
* @since : 2022.09.20 |
86 | 81 |
* @dscription : ROOT URL, Router's, 화면요청 URL 등.. 이 외 나머지 정적 자원에 대한 처리 기능 |
87 | 82 |
*/ |
88 |
-webServer.get('*.*', function (request, response, next) { |
|
89 |
- response.sendFile(`${BASE_DIR}${request.params['0']}.${request.params['1']}`); |
|
90 |
-}) |
|
83 |
+webServer.get("*.*", function (request, response, next) { |
|
84 |
+ response.sendFile(`${BASE_DIR}${request.params["0"]}.${request.params["1"]}`); |
|
85 |
+}); |
|
86 |
+ |
|
87 |
+/** |
|
88 |
+ * @author : 류윤주 |
|
89 |
+ * @since : 2022.11.06 |
|
90 |
+ * @dscription : React Router처리 |
|
91 |
+ */ |
|
92 |
+webServer.get("*", function (request, response, next) { |
|
93 |
+ response.sendFile(`${BASE_DIR}/client/views/index.html`); |
|
94 |
+}); |
|
91 | 95 |
|
92 | 96 |
/** |
93 | 97 |
* @author : 최정우 |
... | ... | @@ -95,9 +99,11 @@ |
95 | 99 |
* @dscription : Global Error Handler (*맨 마지막에 적용해야됨) |
96 | 100 |
*/ |
97 | 101 |
webServer.use(function (error, request, response, next) { |
98 |
- const errorCode = !error.statusCode ? 500 : error.statusCode; |
|
99 |
- response.status(errorCode).send('에러가 발생하였습니다. 관리자에게 문의바랍니다.'); |
|
100 |
- let message = `[Error:${errorCode}] ${request.url}\n ${error.stack}\n`; |
|
101 |
- Logger.logging(message); |
|
102 |
- //next(); |
|
103 |
-})(No newline at end of file) |
|
102 |
+ const errorCode = !error.statusCode ? 500 : error.statusCode; |
|
103 |
+ response |
|
104 |
+ .status(errorCode) |
|
105 |
+ .send("에러가 발생하였습니다. 관리자에게 문의바랍니다."); |
|
106 |
+ let message = `[Error:${errorCode}] ${request.url}\n ${error.stack}\n`; |
|
107 |
+ Logger.logging(message); |
|
108 |
+ //next(); |
|
109 |
+}); |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?