Merge pull request #2 from RECODE01/feat/#1/templateSetting

first template setting
RECODE01 · Jun 6, 2022 · 4e53f02 · 4e53f02
2 parents 0ab461e + 2aa8e6b
commit 4e53f02
Show file tree

Hide file tree

Showing 8 changed files with 253 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<html>
+  <head>
+    <title>2022 FE 데브매칭</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <main class="App">
+      <form class="SearchInput"></form>
+    </main>
+    <script src="./pages/index.js" type="module"></script>
+  </body>
+</html>
diff --git a/pages/App.js b/pages/App.js
@@ -0,0 +1,64 @@
+import SearchInput from "../src/component/SearchInput.js";
+import Suggestion from "../src/component/Suggestion.js";
+import SelectedLanguage from "../src/component/SelectedLanguage.js";
+import { getSearchData } from "../src/api/getSearchData.js";
+
+export default function App({ $target }) {
+  // 예시코드
+  // contextAPI 전역변수
+  // this.state = {
+  //   fetchedLanguages: [],
+  //   selectedLanguages: [],
+  // };
+  // this.setState = (nextState) => {
+  //   this.state = {
+  //     ...this.state,
+  //     ...nextState,
+  //   };
+  //   suggestion.setState({
+  //     selectedIndex: 0,
+  //     items: this.state.fetchedLanguages,
+  //   });
+  //   selectedLanguage.setState(this.state.selectedLanguages);
+  //   localStorage.setItem(
+  //     "fetchedLanguages",
+  //     JSON.stringify(this.state.fetchedLanguages)
+  //   );
+  //   localStorage.setItem(
+  //     "selectedLanguages",
+  //     JSON.stringify(this.state.selectedLanguages)
+  //   );
+  // };
+  // const selectedLanguage = new SelectedLanguage({
+  //   $target,
+  //   initialState: [],
+  // });
+  // const searchInput = new SearchInput({
+  //   $target,
+  //   initialState: "",
+  //   onChange: async (keywords) => {
+  //     if (keywords.length === 0) {
+  //       this.setState({
+  //         fetchedLanguages: [],
+  //       });
+  //     } else {
+  //       const response = await getSearchData(keywords);
+  //       this.setState({
+  //         fetchedLanguages: response,
+  //       });
+  //     }
+  //   },
+  // });
+  // const suggestion = new Suggestion({
+  //   $target,
+  //   initialState: {
+  //     items: [],
+  //     selectedIndex: 0,
+  //   },
+  //   onSelect: (selectedLanguages) => {
+  //     this.setState({
+  //       selectedLanguages,
+  //     });
+  //   },
+  // });
+}
diff --git a/pages/index.js b/pages/index.js
@@ -0,0 +1,3 @@
+import App from "./App.js";
+
+new App({ $target: document.querySelector(".App") });
diff --git a/src/api/getSearchData.js b/src/api/getSearchData.js
@@ -0,0 +1,17 @@
+const baseUrl =
+  "https://wr4a6p937i.execute-api.ap-northeast-2.amazonaws.com/dev";
+
+// const cache = {};
+export const getSearchData = async (keywords) => {
+  // if (cache[keywords]) {
+  //   console.log("zzzz");
+  //   return cache[keywords];
+  // }
+  const res = await fetch(`${baseUrl}/languages?keyword=${keywords}`);
+  if (res.ok) {
+    const json = await res.json();
+    // cache[keywords] = json;
+    return json;
+  }
+  throw new Error("요청에 실패함");
+};
diff --git a/src/component/SearchInput.js b/src/component/SearchInput.js
@@ -0,0 +1,30 @@
+export default function SearchInput({ $target, initialState, onChange }) {
+  this.$element = document.createElement("form");
+  this.$element.className = "SearchInput";
+  this.state = initialState;
+
+  $target.appendChild(this.$element);
+
+  this.render = () => {
+    this.$element.innerHTML = `
+      <input class="SearchInput__input" type="text" placeholder="프로그래밍 언어를 입력하세요." value="${
+        localStorage.getItem("input") || this.state
+      }">
+      `;
+  };
+
+  this.$element.addEventListener("keyup", (e) => {
+    console.log(e.key);
+    const keyType = ["ArrowDown", "ArrowUp"];
+    if (!keyType.includes(e.key)) {
+      onChange(e.target.value);
+    }
+    localStorage.setItem("input", e.target.value);
+  });
+
+  this.$element.addEventListener("submit", (e) => {
+    e.preventDefault();
+  });
+
+  this.render();
+}
diff --git a/src/component/SelectedLanguage.js b/src/component/SelectedLanguage.js
@@ -0,0 +1,30 @@
+export default function SelectedLanguage({ $target, initialState }) {
+  this.$element = document.createElement("div");
+  this.$element.className = "SelectedLanguage";
+  this.state = initialState;
+
+  $target.appendChild(this.$element);
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    this.render();
+  };
+
+  this.render = () => {
+    if (this.state.length > 0) {
+      this.$element.innerHTML = `
+              <ul>
+                  ${this.state
+                    .map(
+                      (el) => `
+                      <li>${el}</li>
+                      `
+                    )
+                    .join("")}
+              </ul>
+          `;
+    }
+  };
+
+  this.render();
+}
diff --git a/src/component/Suggestion.js b/src/component/Suggestion.js
@@ -0,0 +1,93 @@
+export default function Suggestion({ $target, initialState, onSelect }) {
+  this.$element = document.createElement("div");
+  this.$element.className = "Suggestion";
+
+  $target.appendChild(this.$element);
+
+  this.hoverList = document.querySelector(".Suggestion");
+
+  this.state = initialState;
+
+  this.setState = (nextState) => {
+    this.state = {
+      ...this.state,
+      ...nextState,
+    };
+    this.render();
+  };
+
+  this.render = () => {
+    const { items, selectedIndex } = this.state;
+    if (items.length > 0) {
+      this.$element.style.display = "block";
+      this.$element.innerHTML = `
+              <ul>
+              ${items
+                .map(
+                  (item, index) => `
+                  <li data-index=${index} class="${
+                    index === selectedIndex ? "Suggestion__item--selected" : ""
+                  }">${item}</li>
+              `
+                )
+                .join("")}
+              </ul>
+          `;
+    } else {
+      this.$element.style.display = "none";
+      this.$element.innerHTML = "";
+    }
+  };
+
+  let selectedArr = [];
+  window.addEventListener("keyup", (e) => {
+    const { items, selectedIndex } = this.state;
+    if (items.length > 0) {
+      if (e.key === "ArrowDown") {
+        this.setState({ selectedIndex: selectedIndex + 1 });
+        if (selectedIndex > items.length - 2) {
+          this.setState({ selectedIndex: 0 });
+        }
+      } else if (e.key === "ArrowUp") {
+        this.setState({ selectedIndex: selectedIndex - 1 });
+        if (selectedIndex === 0) {
+          this.setState({ selectedIndex: items.length - 1 });
+        }
+      } else if (e.key === "Enter") {
+        if (!selectedArr.includes(items[selectedIndex])) {
+          if (selectedArr.length > 4) {
+            selectedArr.shift();
+            selectedArr.push(items[selectedIndex]);
+          } else {
+            selectedArr.push(items[selectedIndex]);
+          }
+        } else {
+          selectedArr = selectedArr.filter((el) => el !== items[selectedIndex]);
+          selectedArr.push(items[selectedIndex]);
+        }
+        onSelect(selectedArr);
+        alert(items[selectedIndex]);
+      }
+    }
+  });
+
+  this.hoverList.addEventListener("click", (e) => {
+    const { items } = this.state;
+    const selectedIndex = Number(e.target.dataset.index);
+    if (!selectedArr.includes(items[selectedIndex])) {
+      if (selectedArr.length > 4) {
+        selectedArr.shift();
+        selectedArr.push(items[selectedIndex]);
+      } else {
+        selectedArr.push(items[selectedIndex]);
+      }
+    } else {
+      selectedArr = selectedArr.filter((el) => el !== items[selectedIndex]);
+      selectedArr.push(items[selectedIndex]);
+    }
+    onSelect(selectedArr);
+    alert(items[selectedIndex]);
+  });
+
+  this.render();
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,4 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import App from "./App.js";

		new App({ $target: document.querySelector(".App") });