오윤석 / 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 76 additions and 46 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 +body {
2 position: relative; 3 position: relative;
3 width: 100%; 4 width: 100%;
4 height: 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;
11 box-sizing: border-box; 12 box-sizing: border-box;
12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 13 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
...@@ -22,14 +23,17 @@ a:hover { ...@@ -22,14 +23,17 @@ a:hover {
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,
34 +button,
35 +select,
36 +textarea {
33 font-family: inherit; 37 font-family: inherit;
34 font-size: inherit; 38 font-size: inherit;
35 padding: 0.4em; 39 padding: 0.4em;
......
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'>
6 7
7 - <title>Svelte app</title> 8 + <title>::메이플스토리 스펙 계산기::</title>
8 9
9 <link rel='icon' type='image/png' href='/favicon.png'> 10 <link rel='icon' type='image/png' href='/favicon.png'>
10 <link rel='stylesheet' href='/global.css'> 11 <link rel='stylesheet' href='/global.css'>
11 <link rel='stylesheet' href='/build/bundle.css'> 12 <link rel='stylesheet' href='/build/bundle.css'>
12 13
14 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
15 + <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
16 + <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
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>
23 +
18 </html> 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
...@@ -38,8 +37,8 @@ export default { ...@@ -38,8 +37,8 @@ export default {
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
...@@ -47,10 +46,6 @@ export default { ...@@ -47,10 +46,6 @@ export default {
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
51 - // browser on changes when not in production
52 - !production && livereload('public'),
53 -
54 // If we're building for production (npm run build 49 // If we're building for production (npm run build
55 // instead of npm run dev), minify 50 // instead of npm run dev), minify
56 production && terser() 51 production && terser()
......
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