From 89a0694a69325de28cf80b42a6e637a7985b723d Mon Sep 17 00:00:00 2001
From: chacha912 <dkwkdnwk912@gmail.com>
Date: Sun, 24 Apr 2022 00:38:17 +0900
Subject: [PATCH] feat: #8 Request naver image search api

---
 package-lock.json     | 41 +++++++++++++++++++++++++++++++++++++++++
 package.json          |  1 +
 src/App.svelte        | 11 +++++++++++
 src/api/core/index.js | 14 ++++++++++++++
 src/api/main.js       |  9 +++++++++
 vite.config.js        | 18 ++++++++++++++----
 6 files changed, 90 insertions(+), 4 deletions(-)
 create mode 100644 src/api/core/index.js
 create mode 100644 src/api/main.js

diff --git a/package-lock.json b/package-lock.json
index 3fe346c..9764888 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "simple-whiteboard",
       "version": "0.0.1",
       "dependencies": {
+        "axios": "^0.26.1",
         "nanoid": "^3.3.1"
       },
       "devDependencies": {
@@ -56,6 +57,14 @@
         }
       }
     },
+    "node_modules/axios": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+      "dependencies": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -434,6 +443,25 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.14.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -732,6 +760,14 @@
         "svelte-hmr": "^0.14.11"
       }
     },
+    "axios": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+      "requires": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -915,6 +951,11 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true
     },
+    "follow-redirects": {
+      "version": "1.14.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
+    },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
diff --git a/package.json b/package.json
index 7ed0b99..3c6de27 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "vite": "^2.9.2"
   },
   "dependencies": {
+    "axios": "^0.26.1",
     "nanoid": "^3.3.1"
   }
 }
diff --git a/src/App.svelte b/src/App.svelte
index acbdbaf..06c668c 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -6,6 +6,17 @@
     CanvasCursor,
     BrushSize,
   } 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">
diff --git a/src/api/core/index.js b/src/api/core/index.js
new file mode 100644
index 0000000..50167b9
--- /dev/null
+++ b/src/api/core/index.js
@@ -0,0 +1,14 @@
+import axios from 'axios';
+
+const { VITE_CLIENT_ID, VITE_CLIENT_SECRET } = import.meta.env;
+
+const request = axios.create({
+  baseURL: '/v1',
+  timeout: 2500,
+  headers: {
+    'X-Naver-Client-Id': VITE_CLIENT_ID,
+    'X-Naver-Client-Secret': VITE_CLIENT_SECRET,
+  },
+});
+
+export default request;
diff --git a/src/api/main.js b/src/api/main.js
new file mode 100644
index 0000000..0ca27e8
--- /dev/null
+++ b/src/api/main.js
@@ -0,0 +1,9 @@
+import request from './core';
+
+export const getImage = (keyword) => {
+  const query = encodeURI(keyword);
+
+  return request.get(`/search/image`, {
+    params: { query, display: 20, start: 1 },
+  });
+};
diff --git a/vite.config.js b/vite.config.js
index 9cac67c..8ec75b3 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,8 +1,18 @@
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  base: '',
-  plugins: [svelte()],
+export default defineConfig(({ command, mode }) => {
+  // Load env file based on `mode` in the current working directory
+  const env = loadEnv(mode, process.cwd());
+  console.log(env);
+  return {
+    base: '',
+    plugins: [svelte()],
+    server: {
+      proxy: {
+        '/v1': env.VITE_BASE_API,
+      },
+    },
+  };
 });