오윤석 / maplespec.ga

Go to a project
Toggle navigation Toggle navigation pinning
오윤석
75ea2ad7 2 parents c98d2f65 63caa073

Merge branch 'feature/1-search_page' into develop

Expand all
Inline Side-by-side
Showing 9 changed files with 163 additions and 133 deletions
This diff is collapsed. Click to expand it.
...@@ -10,7 +10,6 @@ ...@@ -10,7 +10,6 @@
10 "@rollup/plugin-commonjs": "11.0.2", 10 "@rollup/plugin-commonjs": "11.0.2",
11 "@rollup/plugin-node-resolve": "^7.0.0", 11 "@rollup/plugin-node-resolve": "^7.0.0",
12 "rollup": "^1.20.0", 12 "rollup": "^1.20.0",
13 - "rollup-plugin-livereload": "^1.0.0",
14 "rollup-plugin-svelte": "^5.0.3", 13 "rollup-plugin-svelte": "^5.0.3",
15 "rollup-plugin-terser": "^5.1.2", 14 "rollup-plugin-terser": "^5.1.2",
16 "svelte": "^3.0.0" 15 "svelte": "^3.0.0"
......
1 -html, body { 1 +html,
2 - position: relative; 2 +body {
3 - width: 100%; 3 + position: relative;
4 - height: 100%; 4 + width: 100%;
5 + height: 100%;
6 + background-color: #ffebee;
5 } 7 }
6 8
7 body { 9 body {
8 - color: #333; 10 + color: #333;
9 - margin: 0; 11 + margin: 0;
10 - padding: 8px; 12 + box-sizing: border-box;
11 - box-sizing: border-box; 13 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
12 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
13 } 14 }
14 15
15 a { 16 a {
16 - color: rgb(0,100,200); 17 + color: rgb(0, 100, 200);
17 - text-decoration: none; 18 + text-decoration: none;
18 } 19 }
19 20
20 a:hover { 21 a:hover {
21 - text-decoration: underline; 22 + text-decoration: underline;
22 } 23 }
23 24
24 a:visited { 25 a:visited {
25 - color: rgb(0,80,160); 26 + color: rgb(0, 80, 160);
26 } 27 }
27 28
28 label { 29 label {
29 - display: block; 30 + display: block;
30 } 31 }
31 32
32 -input, button, select, textarea { 33 +input,
33 - font-family: inherit; 34 +button,
34 - font-size: inherit; 35 +select,
35 - padding: 0.4em; 36 +textarea {
36 - margin: 0 0 0.5em 0; 37 + font-family: inherit;
37 - box-sizing: border-box; 38 + font-size: inherit;
38 - border: 1px solid #ccc; 39 + padding: 0.4em;
39 - border-radius: 2px; 40 + margin: 0 0 0.5em 0;
41 + box-sizing: border-box;
42 + border: 1px solid #ccc;
43 + border-radius: 2px;
40 } 44 }
41 45
42 input:disabled { 46 input:disabled {
43 - color: #ccc; 47 + color: #ccc;
44 } 48 }
45 49
46 input[type="range"] { 50 input[type="range"] {
47 - height: 0; 51 + height: 0;
48 } 52 }
49 53
50 button { 54 button {
51 - color: #333; 55 + color: #333;
52 - background-color: #f4f4f4; 56 + background-color: #f4f4f4;
53 - outline: none; 57 + outline: none;
54 } 58 }
55 59
56 button:disabled { 60 button:disabled {
57 - color: #999; 61 + color: #999;
58 } 62 }
59 63
60 button:not(:disabled):active { 64 button:not(:disabled):active {
61 - background-color: #ddd; 65 + background-color: #ddd;
62 } 66 }
63 67
64 button:focus { 68 button:focus {
65 - border-color: #666; 69 + border-color: #666;
66 -} 70 +}
...\ No newline at end of file ...\ No newline at end of file
......
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3 +
3 <head> 4 <head>
4 - <meta charset='utf-8'> 5 + <meta charset='utf-8'>
5 - <meta name='viewport' content='width=device-width,initial-scale=1'> 6 + <meta name='viewport' content='width=device-width,initial-scale=1'>
7 +
8 + <title>::메이플스토리 스펙 계산기::</title>
6 9
7 - <title>Svelte app</title> 10 + <link rel='icon' type='image/png' href='/favicon.png'>
11 + <link rel='stylesheet' href='/global.css'>
12 + <link rel='stylesheet' href='/build/bundle.css'>
8 13
9 - <link rel='icon' type='image/png' href='/favicon.png'> 14 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
10 - <link rel='stylesheet' href='/global.css'> 15 + <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
11 - <link rel='stylesheet' href='/build/bundle.css'> 16 + <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
12 17
13 - <script defer src='/build/bundle.js'></script> 18 + <script defer src='/build/bundle.js'></script>
14 </head> 19 </head>
15 20
16 <body> 21 <body>
17 </body> 22 </body>
18 -</html> 23 +
24 +</html>
...\ No newline at end of file ...\ No newline at end of file
......
1 import svelte from 'rollup-plugin-svelte'; 1 import svelte from 'rollup-plugin-svelte';
2 import resolve from '@rollup/plugin-node-resolve'; 2 import resolve from '@rollup/plugin-node-resolve';
3 import commonjs from '@rollup/plugin-commonjs'; 3 import commonjs from '@rollup/plugin-commonjs';
4 -import livereload from 'rollup-plugin-livereload';
5 import { terser } from 'rollup-plugin-terser'; 4 import { terser } from 'rollup-plugin-terser';
6 import copy from 'rollup-plugin-copy'; 5 import copy from 'rollup-plugin-copy';
7 6
8 const production = !process.env.ROLLUP_WATCH; 7 const production = !process.env.ROLLUP_WATCH;
9 8
10 export default { 9 export default {
11 - input: 'src/main.js', 10 + input: 'src/main.js',
12 - output: { 11 + output: {
13 - sourcemap: true, 12 + sourcemap: true,
14 - format: 'iife', 13 + format: 'iife',
15 - name: 'app', 14 + name: 'app',
16 - file: 'public/build/bundle.js' 15 + file: 'public/build/bundle.js'
17 - }, 16 + },
18 - plugins: [ 17 + plugins: [
19 - svelte({ 18 + svelte({
20 - // enable run-time checks when not in production 19 + // enable run-time checks when not in production
21 - dev: !production, 20 + dev: !production,
22 - // we'll extract any component CSS out into 21 + // we'll extract any component CSS out into
23 - // a separate file - better for performance 22 + // a separate file - better for performance
24 - css: css => { 23 + css: css => {
25 - css.write('public/build/bundle.css'); 24 + css.write('public/build/bundle.css');
26 - } 25 + }
27 - }), 26 + }),
28 27
29 - // If you have external dependencies installed from 28 + // If you have external dependencies installed from
30 - // npm, you'll most likely need these plugins. In 29 + // npm, you'll most likely need these plugins. In
31 - // some cases you'll need additional configuration - 30 + // some cases you'll need additional configuration -
32 - // consult the documentation for details: 31 + // consult the documentation for details:
33 - // https://github.com/rollup/plugins/tree/master/packages/commonjs 32 + // https://github.com/rollup/plugins/tree/master/packages/commonjs
34 - resolve({ 33 + resolve({
35 - browser: true, 34 + browser: true,
36 - dedupe: ['svelte'] 35 + dedupe: ['svelte']
37 - }), 36 + }),
38 - commonjs(), 37 + commonjs(),
39 38
40 - copy({ 39 + copy({
41 - targets:[ 40 + targets: [
42 - { src:'src/images', dest:'public' } 41 + { src: 'src/images', dest: 'public' }
43 - ] 42 + ]
44 - }), 43 + }),
45 44
46 - // In dev mode, call `npm run start` once 45 + // In dev mode, call `npm run start` once
47 - // the bundle has been generated 46 + // the bundle has been generated
48 - !production && serve(), 47 + !production && serve(),
49 48
50 - // Watch the `public` directory and refresh the 49 + // If we're building for production (npm run build
51 - // browser on changes when not in production 50 + // instead of npm run dev), minify
52 - !production && livereload('public'), 51 + production && terser()
53 - 52 + ],
54 - // If we're building for production (npm run build 53 + watch: {
55 - // instead of npm run dev), minify 54 + clearScreen: false
56 - production && terser() 55 + }
57 - ],
58 - watch: {
59 - clearScreen: false
60 - }
61 }; 56 };
62 57
63 function serve() { 58 function serve() {
64 - let started = false; 59 + let started = false;
65 60
66 - return { 61 + return {
67 - writeBundle() { 62 + writeBundle() {
68 - if (!started) { 63 + if (!started) {
69 - started = true; 64 + started = true;
70 65
71 - require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { 66 + require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
72 - stdio: ['ignore', 'inherit', 'inherit'], 67 + stdio: ['ignore', 'inherit', 'inherit'],
73 - shell: true 68 + shell: true
74 - }); 69 + });
75 - } 70 + }
76 - } 71 + }
77 - }; 72 + };
78 -} 73 +}
...\ No newline at end of file ...\ No newline at end of file
......
1 -import App from './App.svelte'; 1 +import App from './App.svelte';
2 2
3 const app = new App({ 3 const app = new App({
4 - target: document.body, 4 + target: document.body
5 - props: {
6 - name: 'world'
7 - }
8 }); 5 });
9 6
10 export default app; 7 export default app;
...\ No newline at end of file ...\ No newline at end of file
......
1 -import Home from './routes/Home.svelte'; 1 +import Search from './routes/Search.svelte';
2 2
3 const routes = { 3 const routes = {
4 - '/': Home, 4 + '/': Search,
5 }; 5 };
6 6
7 export default routes; 7 export default routes;
...\ No newline at end of file ...\ No newline at end of file
......
1 -<main>
2 - <h1>Hello, This is Home!</h1>
3 - <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
4 -</main>
5 -
6 -<style>
7 - main {
8 - text-align: center;
9 - padding: 1em;
10 - max-width: 240px;
11 - margin: 0 auto;
12 - }
13 -
14 - h1 {
15 - color: #ff3e00;
16 - text-transform: uppercase;
17 - font-size: 4em;
18 - font-weight: 100;
19 - }
20 -
21 - @media (min-width: 640px) {
22 - main {
23 - max-width: none;
24 - }
25 - }
26 -</style>
...\ No newline at end of file ...\ No newline at end of file
1 +<script>
2 + import {push} from 'svelte-spa-router';
3 +
4 + let character;
5 +
6 + function searchCharacter() {
7 + if(!character) {
8 + M.toast({html:"닉네임을 입력해주세요."});
9 + return false;
10 + }
11 +
12 + push('/character/' + character);
13 + }
14 +</script>
15 +
16 +<svelte:head>
17 +
18 +</svelte:head>
19 +
20 +<section>
21 + <article class="search-box row">
22 + <div class="col l4 m6 s12 offset-l4 offset-m3">
23 + <div class="card">
24 + <div class="card-stacked">
25 + <div class="card-content">
26 + <h4>내 캐릭터 분석하기</h4>
27 + <form class="search-form" on:submit={searchCharacter} onsubmit="return false;">
28 + <div class="input-field">
29 + <label>캐릭터명</label>
30 + <input type="text" bind:value={character}>
31 + <button class="btn waves-effect waves-light red darken-1">확인</button>
32 + </div>
33 + </form>
34 + </div>
35 + <div class="card-action">
36 + <p class="teal-text text-lighten-2">
37 + 메이플스토리 스펙 계산기를 이용하기 위해서는 캐릭터 정보 공개(기본정보, 장비, 스킬)가 필요합니다.
38 + </p>
39 + <p>
40 + <a href="https://maplestory.nexon.com/MyMaple/Account/Character/Visibility" target="_BLANK">공개설정하러 가기</a>
41 + </p>
42 + </div>
43 + </div>
44 + </div>
45 + </div>
46 + </article>
47 +</section>
48 +
49 +<style>
50 +section { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; }
51 +.search-box { width:100%; }
52 +h4 { font-size:20px; text-align:center; }
53 +.input-field { padding-right:70px; }
54 +.input-field button { position:absolute; right:0; top:7px; }
55 +</style>
...\ No newline at end of file ...\ No newline at end of file