feat: #8 Show search image lists

src/App.svelte

@@ -5,18 +5,8 @@
     CanvasDraw,
     CanvasCursor,
     BrushSize,
+    Search,
   } from './lib/index.js';
-  import { getImage } from './api/main';
-
-  const getSearchImageLists = async (search) => {
-    const result = await getImage(search);
-    console.log(result.data.items);
-  };
-  try {
-    getSearchImageLists('숫자 선잇기 도안');
-  } catch (err) {
-    console.error(err);
-  }
 </script>
 
 <div class="world">
@@ -27,8 +17,11 @@
   <div class="canvas-wrap">
     <CanvasCursor />
     <CanvasDraw />
+    <Toolbar />
+  </div>
+  <div class="search">
+    <Search />
   </div>
-  <Toolbar />
 </div>
 
 <style>

src/api/main.js

@@ -1,8 +1,6 @@
 import request from './core';
 
-export const getImage = (keyword) => {
-  const query = encodeURI(keyword);
-
+export const getImage = (query) => {
   return request.get(`/search/image`, {
     params: { query, display: 20, start: 1 },
   });

src/lib/Search.svelte

@@ -0,0 +1,62 @@
+<script>
+  import { getImage } from '../api/main';
+  import { imgLists } from '../store.js';
+
+  let searchInput;
+
+  const getSearchImageLists = async (query) => {
+    const result = await getImage(query);
+    console.log(result.data.items);
+    imgLists.set(result.data.items);
+  };
+
+  const handleSearch = async (e) => {
+    e.preventDefault();
+    const query = searchInput.value;
+    await getSearchImageLists(query);
+  };
+</script>
+
+<form on:submit={handleSearch}>
+  <input bind:this={searchInput} type="text" />
+  <button type="submit">검색</button>
+</form>
+<ul class="img-lists">
+  {#each $imgLists as imgList}
+    <li class="img-list">
+      <img src={imgList.thumbnail} alt={imgList.title} />
+    </li>
+  {/each}
+</ul>
+
+<style>
+  input {
+    margin-right: 4px;
+    padding: 0.4em 0.8em;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+  }
+
+  input:focus {
+    outline: 1px solid rgba(123, 123, 123, 0.2);
+  }
+
+  .img-lists {
+    background: #f1f1f1;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 0 10px;
+    width: 300px;
+    height: 700px;
+    overflow-y: scroll;
+  }
+
+  .img-list {
+    width: 48%;
+  }
+
+  img {
+    width: 100%;
+  }
+</style>

src/lib/Toolbar.svelte

@@ -37,6 +37,7 @@
     position: absolute;
     bottom: -120px;
     left: 50%;
+    transform: translateX(-50%);
     display: flex;
     align-items: flex-end;
     height: 120px;

src/lib/index.js

@@ -3,3 +3,4 @@ export { default as Toolbar } from './Toolbar.svelte';
 export { default as CanvasDraw } from './CanvasDraw.svelte';
 export { default as CanvasCursor } from './CanvasCursor.svelte';
 export { default as BrushSize } from './BrushSize.svelte';
+export { default as Search } from './Search.svelte';

src/store.js

@@ -10,3 +10,4 @@ export const lineWidth = writable({
 });
 export const colorCode = writable('#000');
 export const paths = writable({});
+export const imgLists = writable([]);