From 92b4016c765ff1f36dd75057d24017356a45f6c0 Mon Sep 17 00:00:00 2001 From: chaerin <70943835+chaerin-dev@users.noreply.github.com> Date: Sat, 11 Jun 2022 04:42:31 +0900 Subject: [PATCH] vanillaJS -> React --- .DS_Store | Bin 0 -> 6148 bytes README.md | 20 +- Section/Footer/footer.js | 36 --- Section/SearchBox/components/SearchInput.js | 24 -- .../SearchBox/components/SearchableList.js | 49 --- Section/SearchBox/components/index.js | 18 -- Section/SearchBox/utils/api.js | 6 - Section/SearchBox/utils/koreanFuzzy.js | 38 --- Section/SearchResult/components/index.js | 84 ----- Section/SearchResult/utils/api.js | 6 - Section/SearchResult/utils/copyText.js | 11 - app.js | 28 -- index.html | 30 -- public/index.html | 13 +- src/.DS_Store | Bin 0 -> 6148 bytes src/App.js | 17 +- src/Footer/footer.js | 85 +++-- src/Loading.js | 13 + src/SearchBox/.DS_Store | Bin 0 -> 6148 bytes src/SearchBox/SearchBox.js | 13 + src/SearchBox/components/SearchInput.js | 45 +-- src/SearchBox/components/SearchPhrases.js | 11 + src/SearchBox/components/SearchableList.js | 99 +++--- src/SearchBox/components/index.js | 18 -- src/SearchBox/utils/api.js | 10 +- .../SearchBox}/utils/format.js | 6 +- src/SearchResult/SearchResult.js | 48 +++ src/SearchResult/components/index.js | 84 ----- src/SearchResult/utils/api.js | 6 - src/SearchResult/utils/format.js | 10 +- {images => src/images}/favicon-16x16.png | Bin {images => src/images}/favicon-32x32.png | Bin {images => src/images}/favicon.ico | Bin {images => src/images}/github.png | Bin {images => src/images}/programmers.png | Bin {images => src/images}/spinner.svg | 0 src/index.js | 28 +- src/styles/style.css | 304 ++++++++++++++++++ {styles => src/styles}/style.css.map | 0 {styles => src/styles}/style.scss | 150 ++++----- styles/style.css | 227 ------------- 41 files changed, 661 insertions(+), 876 deletions(-) create mode 100644 .DS_Store delete mode 100644 Section/Footer/footer.js delete mode 100644 Section/SearchBox/components/SearchInput.js delete mode 100644 Section/SearchBox/components/SearchableList.js delete mode 100644 Section/SearchBox/components/index.js delete mode 100644 Section/SearchBox/utils/api.js delete mode 100644 Section/SearchBox/utils/koreanFuzzy.js delete mode 100644 Section/SearchResult/components/index.js delete mode 100644 Section/SearchResult/utils/api.js delete mode 100644 Section/SearchResult/utils/copyText.js delete mode 100644 app.js delete mode 100644 index.html create mode 100644 src/.DS_Store create mode 100644 src/Loading.js create mode 100644 src/SearchBox/.DS_Store create mode 100644 src/SearchBox/SearchBox.js create mode 100644 src/SearchBox/components/SearchPhrases.js delete mode 100644 src/SearchBox/components/index.js rename {Section/SearchResult => src/SearchBox}/utils/format.js (52%) create mode 100644 src/SearchResult/SearchResult.js delete mode 100644 src/SearchResult/components/index.js delete mode 100644 src/SearchResult/utils/api.js rename {images => src/images}/favicon-16x16.png (100%) rename {images => src/images}/favicon-32x32.png (100%) rename {images => src/images}/favicon.ico (100%) rename {images => src/images}/github.png (100%) rename {images => src/images}/programmers.png (100%) rename {images => src/images}/spinner.svg (100%) create mode 100644 src/styles/style.css rename {styles => src/styles}/style.css.map (100%) rename {styles => src/styles}/style.scss (73%) delete mode 100644 styles/style.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..54d714d756cb3f84b0ced43bd052ee55618c9597 GIT binary patch literal 6148 zcmeHL!A=4(5Pg*uiD<&ni%E}ilRsE-jURv~FCt)&gk_1q!P|a{pW$6j-uMSUzz^`? zOgl!~1-TJ1ouqxGGt+td!nPCusyXX5fEs`bHO6S4x+TVbZUx(snIl4F*0{rD*l)DD zSvoF6hl!v-P~fjA!0&Du1Ejb`AO8DW`WX2BG)t1sFze7fZwjxMC-bvnOmA(>`2NQ} z5ouZi2N)qkk67FgA0EvxEO5fk;-wWi?@!;W>u8S=ZX20 zFu{Yb$o2cT$E&}P`jY3>^}J3!I(^8>RBwvMW#5_eH{b8o{(5$24UfUn7>5Vi%wt>3 zs)kB+TL=f9L4lya#uVWFK~rOl1#^pL>!8kD0SF_SHb!HoX(dg1Bsp6P565S%rq-s$#&NktlR}*w$7aAsG5@b%jC`60gt1_5k!Hxk O4*?@X=z; -
-
Repository
- https://github.com/codeisneverodd/programmers-coding-test -
-
-
Issues
- https://github.com/codeisneverodd/programmers-coding-test/issues -
-
-
Contributor
- 김경현 - 김채린 - 손용찬 -
-
해당 페이지의 해답을 자신의 저작물에 추가할 수 있지만 반드시 본 Repository의 주소를 명시하여야합니다.
-
모든 문제의 저작권은 프로그래머스에 있습니다.
- -
- - - - - - -
- `; - - template = template.replaceAll("{{__레포지토리주소__}}", "https://github.com/codeisneverodd/programmers-coding-test") - footer.innerHTML = template; - - } \ No newline at end of file diff --git a/Section/SearchBox/components/SearchInput.js b/Section/SearchBox/components/SearchInput.js deleted file mode 100644 index 1f205ee..0000000 --- a/Section/SearchBox/components/SearchInput.js +++ /dev/null @@ -1,24 +0,0 @@ -import { CreateFuzzyMatcher } from '../utils/koreanFuzzy.js'; - -export function SearchInput() { - this.render = () => { - const $searchInput = document.querySelector('.searchInput'); - $searchInput.innerHTML = ` - - `; - const $fileListItem = document.querySelectorAll('.file-list-item'); - - $searchInput.addEventListener('input', event => { - const $searchInputBox = document.getElementById('searchInput'); - const query = $searchInputBox.value; - const regex = CreateFuzzyMatcher(query.toLowerCase()); - for (let i = 0; i < $fileListItem.length; i++) { - if (regex.test($fileListItem[i].textContent.toLowerCase())) { - $fileListItem[i].classList.remove('is-hidden'); - } else { - $fileListItem[i].classList.add('is-hidden'); - } - } - }); - }; -} diff --git a/Section/SearchBox/components/SearchableList.js b/Section/SearchBox/components/SearchableList.js deleted file mode 100644 index 43898eb..0000000 --- a/Section/SearchBox/components/SearchableList.js +++ /dev/null @@ -1,49 +0,0 @@ -//TODO: api 함수 및 상수 분리 -import SearchResult from '../../SearchResult/components/index.js'; -import { getFileList } from '../utils/api.js'; - -const POSSIBLE_LEVELS = [1, 2, 3, 4, 5]; -export function SearchableList() { - const $searchableList = document.querySelector('.searchableList'); - this.render = async () => { - $searchableList.innerHTML = ` -
- `; - const $fileListContainer = document.querySelector('.file-list-container'); - await fillList(); - async function fillList() { - const fileList = {}; - for (const level of POSSIBLE_LEVELS) { - fileList[level] = await getFileList(level); - delete fileList[level][0]; - } - $fileListContainer.innerHTML = ` - ${POSSIBLE_LEVELS.map( - level => ` -
    -
    [level ${level}]
    - ${fileList[level] - .map( - file => - `
  • ${file.name - .slice(0, file.name.length - 3) - .replaceAll('-', ' ')}
    • `, - ) - .join('')} -
`, - ).join('')} - `; - } - - $fileListContainer.addEventListener('click', e => { - if (e.target.tagName !== 'LI') return; - const level = e.target.parentNode.classList[1].slice(-1); - const fileName = e.target.classList[1]; - const $searchResult = new SearchResult({ - level, - fileName, - }); - $searchResult.render(); - }); - }; -} diff --git a/Section/SearchBox/components/index.js b/Section/SearchBox/components/index.js deleted file mode 100644 index d46ae2c..0000000 --- a/Section/SearchBox/components/index.js +++ /dev/null @@ -1,18 +0,0 @@ -import { SearchInput } from './SearchInput.js'; -import { SearchableList } from './SearchableList.js'; - -export default function SearchBox() { - const $searchBox = document.querySelector('.searchBox'); - this.render = async () => { - $searchBox.innerHTML = ` -
-
-
찾는 문제가 없으신가요?
Repository에 풀이를 제보해주세요
- `; - const searchInput = new SearchInput(); - const searchableList = new SearchableList(); - - await searchableList.render(); - searchInput.render(); - }; -} diff --git a/Section/SearchBox/utils/api.js b/Section/SearchBox/utils/api.js deleted file mode 100644 index ae7e4c6..0000000 --- a/Section/SearchBox/utils/api.js +++ /dev/null @@ -1,6 +0,0 @@ -const GET_FILE_LIST_BASE_URL = `https://api.github.com/repos/codeisneverodd/programmers-coding-test/contents/`; -export const getFileList = async level => { - const url = GET_FILE_LIST_BASE_URL + `level-${level}`; - const response = await fetch(url); - return await response.json(); -}; diff --git a/Section/SearchBox/utils/koreanFuzzy.js b/Section/SearchBox/utils/koreanFuzzy.js deleted file mode 100644 index 8a65ceb..0000000 --- a/Section/SearchBox/utils/koreanFuzzy.js +++ /dev/null @@ -1,38 +0,0 @@ -const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); - -const ch2pattern = ch => { - const offset = 44032; - if (/[가-힣]/.test(ch)) { - const chCode = ch.charCodeAt(0) - offset; - if (chCode % 28 > 0) { - return ch; - } - const begin = Math.floor(chCode / 28) * 28 + offset; - const end = begin + 27; - return `[\\u${begin.toString(16)}-\\u${end.toString(16)}]`; - } - if (/[ㄱ-ㅎ]/.test(ch)) { - const con2syl = { - ㄱ: '가'.charCodeAt(0), - ㄲ: '까'.charCodeAt(0), - ㄴ: '나'.charCodeAt(0), - ㄷ: '다'.charCodeAt(0), - ㄸ: '따'.charCodeAt(0), - ㄹ: '라'.charCodeAt(0), - ㅁ: '마'.charCodeAt(0), - ㅂ: '바'.charCodeAt(0), - ㅃ: '빠'.charCodeAt(0), - ㅅ: '사'.charCodeAt(0), - }; - const begin = - con2syl[ch] || (ch.charCodeAt(0) - 12613) * 588 + con2syl['ㅅ']; - const end = begin + 587; - return `[${ch}\\u${begin.toString(16)}-\\u${end.toString(16)}]`; - } - return escapeRegExp(ch); -}; - -export const CreateFuzzyMatcher = input => { - const pattern = input.split('').map(ch2pattern).join('.*?'); - return new RegExp(pattern); -}; diff --git a/Section/SearchResult/components/index.js b/Section/SearchResult/components/index.js deleted file mode 100644 index 9201722..0000000 --- a/Section/SearchResult/components/index.js +++ /dev/null @@ -1,84 +0,0 @@ -import { getFileContent } from "../utils/api.js"; -import { formattedFileName, splitCodeToSolutions } from "../utils/format.js"; -import { copyText } from "../utils/copyText.js"; - -export default function SearchResult({ level, fileName }) { - let page = 0; - this.render = async () => { - const $searchResult = document.querySelector('.searchResult'); - $searchResult.innerHTML = ` -
- - -
-
-
- 

-        
-      

-    `;
-    const $fileTitle = document.querySelector('.file-title');
-    const $code = document.querySelector('.code');
-    const solutions = splitCodeToSolutions(
-      await getFileContent(level, fileName),
-    );
-    setCurrentResult();
-    addCopyEvent();
-    addNavEvent();
-
-    function setCurrentResult() {
-      $fileTitle.innerHTML = formattedFileName(fileName);
-      $code.innerHTML = solutions[page];
-      if(solutions.length > 1){
-        const $btnNextSolution = document.querySelector('.btnNextSolution-inactive')
-        $btnNextSolution.className = 'btnNextSolution'
-      }
-    }
-
-    function addCopyEvent() {
-      const $copyBtn = document.querySelector('.btn-copy');
-      $copyBtn.addEventListener('click', e => {
-        const src = e.target.previousElementSibling;
-        copyText(src);
-        const isCopied = document.querySelector('.isCopied');
-        isCopied.textContent = ' 📋 클립보드에 복사됨!';
-        setTimeout(() => {
-          isCopied.textContent = '';
-        }, 1000);
-      });
-    }
-
-    function addNavEvent() {
-      const $navigator = document.querySelector('.solutionNavigator');
-      const btnPrevSolution = document.querySelector(
-        '.btnPrevSolution-inactive',
-      );
-      const btnNextSolution = document.querySelector('.btnNextSolution');
-      if (page === 0) {
-        btnPrevSolution.className = 'btnPrevSolution-inactive';
-      }
-      $navigator.addEventListener('click', e => {
-        const $clickedButton = e.target.closest('button');
-
-        if ($clickedButton.className.includes('btnPrevSolution')) {
-          if (page > 0) {
-            page -= 1;
-            $code.innerHTML = solutions[page];
-          }
-        }
-        if ($clickedButton.className.includes('btnNextSolution')) {
-          if (page < solutions.length - 1) {
-            page += 1;
-            $code.innerHTML = solutions[page];
-          }
-        }
-        page !== 0
-          ? (btnPrevSolution.className = 'btnPrevSolution')
-          : (btnPrevSolution.className = 'btnPrevSolution-inactive');
-        page === solutions.length - 1
-          ? (btnNextSolution.className = 'btnNextSolution-inactive')
-          : (btnNextSolution.className = 'btnNextSolution');
-      });
-    }
-  };
-}
diff --git a/Section/SearchResult/utils/api.js b/Section/SearchResult/utils/api.js
deleted file mode 100644
index e2cdee0..0000000
--- a/Section/SearchResult/utils/api.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const GET_FILE_CONTENT_BASE_URL = `https://raw.githubusercontent.com/codeisneverodd/programmers-coding-test/main/`;
-export const getFileContent = async (level, fileName) => {
-  const url = GET_FILE_CONTENT_BASE_URL + `/level-${level}` + `/${fileName}`;
-  const response = await fetch(url);
-  return await response.text();
-};
diff --git a/Section/SearchResult/utils/copyText.js b/Section/SearchResult/utils/copyText.js
deleted file mode 100644
index 67a9637..0000000
--- a/Section/SearchResult/utils/copyText.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export function copyText(src) {
-  const t = document.createElement('textarea');
-  document.body.appendChild(t);
-  t.value = src.innerHTML
-    .replace(/</g, '<')
-    .replace(/>/g, '>')
-    .replace(/"/g, '"');
-  t.select();
-  document.execCommand('copy');
-  document.body.removeChild(t);
-}
diff --git a/app.js b/app.js
deleted file mode 100644
index 1335594..0000000
--- a/app.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import SearchBox from './Section/SearchBox/components/index.js';
-import FooterBox from './Section/Footer/footer.js';
-
-const $app = document.querySelector('.app');
-const $loading = document.querySelector('.loading');
-
-const init = async () => {
-  $app.innerHTML = `
-    

-    

-    

-  `;
-  const $searchBox = new SearchBox();
-  await $searchBox.render();
-};
-
-const loading = async () => {
-  $loading.innerHTML = `
-  
-
-  Loading…
-  `;
-  await init();
-  FooterBox();
-  $loading.style.display = 'none';
-};
-
-loading();
\ No newline at end of file
diff --git a/index.html b/index.html
deleted file mode 100644
index 2b57603..0000000
--- a/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-  
-    
-    
-    
-    
-    프로그래머스 해설 은행
-    
-    
-    
-    
-  
-  
-    
🔍 프로그래머스 해설 은행

-    

-    

-    
-  
-
diff --git a/public/index.html b/public/index.html
index 0f5f6bc..f3efa95 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,24 +3,19 @@
   
     
     
-    
+    
     
     프로그래머스 해설 은행
     
     
-    
+    
     
   
   
diff --git a/src/.DS_Store b/src/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..1ccffbb52c24f7c308896e9d557ad7c20b49a20d
GIT binary patch
literal 6148
zcmeHK%}&BV5T2EWfO;UtgU4P?JjfeVQoSoLz@GsUNC|?`TMu5m`8IksJ_(75iLcIJ3wX?IkU%#e1ED@Q;yjLfx5m5z=G1!GGFz)A;vmF;X1R6WXHBCqT
zdb691C%J45r~<0MUsHg;-7;NJg5QjC-*5FG+dod?xHC#Ri1Vg!xj241%jfjA=1c~w
z`vmVl;4!2zwW$vtH{L!{`Wj~YGdylzmONJG7$+W&!W@rB5HgP{HNl`wQ|i)y8c^oW
zV?!ss;w+z2`uQQ83g+{fZOZic(G&CA_xN40S~RB-&3u-X$4$8zuCMRHb?w|4##{4!
z-lxpF44yN(2h;5PrRX8s@AIR@^YZfmF
zKZIzEk;7EbZXIy;2mlNawuWn4%Yh*WfRV#g5D}P>p+FgG+!4dbaKuBG7dcD?WjGnT
zGUjnB8+Sr6c6G!iKVN_T_Xp{nDxeDdD+NptH{%8#$<@}}
w!*Q(*(OPJ1oR
+    

+      
🔍 프로그래머스 해설 은행

+      
+      
+      
+      

+    

   );
 }
-
-export default App;
diff --git a/src/Footer/footer.js b/src/Footer/footer.js
index ef4d0db..e09633d 100644
--- a/src/Footer/footer.js
+++ b/src/Footer/footer.js
@@ -1,36 +1,63 @@
-export default function Footer() {
-    const footer = document.querySelector("#footerBox");
+import gitHubLogoPath from "../images/github.png";
+import programmersLogoPath from "../images/programmers.png";
 
-    let template = `
-    

-        

-            
Repository

-            https://github.com/codeisneverodd/programmers-coding-test
+export default function Footer() {
+  return (
+    

+      

+        
-        

-            
Issues

-            https://github.com/codeisneverodd/programmers-coding-test/issues
+        
-        

-            
Contributor

-            김경현
-            김채린
-            손용찬
+        

+          

+            Contributor
+          

+          김경현
+          김채린
+          손용찬
         

-            
해당 페이지의 해답을 자신의 저작물에 추가할 수 있지만 반드시 본 Repository의 주소를 명시하여야합니다.

-            
모든 문제의 저작권은 프로그래머스에 있습니다.

-    
    
-    
 
-        
-            
+        
+        
모든 문제의 저작권은 프로그래머스에 있습니다.

+      

+      
     

-    `;
-
-    template = template.replaceAll("{{__레포지토리주소__}}", "https://github.com/codeisneverodd/programmers-coding-test")
-    footer.innerHTML = template;
-    
-  }
\ No newline at end of file
+  );
+}
diff --git a/src/Loading.js b/src/Loading.js
new file mode 100644
index 0000000..c0704be
--- /dev/null
+++ b/src/Loading.js
@@ -0,0 +1,13 @@
+import spinnerPath from "./images/spinner.svg";
+import { useRecoilValue } from "recoil";
+import { loadingState } from "./index.js";
+
+export default function Loading() {
+  const loading = useRecoilValue(loadingState);
+  return loading ? (
+    

+      Loading...
+      Loading…
+    

+  ) : null;
+}
diff --git a/src/SearchBox/.DS_Store b/src/SearchBox/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..0c14567f5c28b1814d38e8f3cd175013b3e6fdf6
GIT binary patch
literal 6148
zcmeHKu};H44E2>F3SBxf-pWRIhNB8!&>ui;5mZXJNTvJz8+->d5(B@$^Vy0Tl1NMl
zRkmcmi_gwEFI8LKkC{|@$VITKOpC4Cmx5KfUU&q!@hv#2&8K<X8)zyNwS%Va8O))+7bjDdy$
z{yumpV^B_D8P0wvYyh~Xq1ey?#sF$qdKIUPQn
zp6ql&art!I-{)|0LC~x*U<|YwIFZX4_y4=$`M;fHSH^%ba8wMqaj`5GcqHwuormLI
s>!J5h7LH4TO$rvd6(g2g@g+11{GJ!UpqK>Vf!H5`OoJI?;7=L&1}20~-2eap

literal 0
HcmV?d00001

diff --git a/src/SearchBox/SearchBox.js b/src/SearchBox/SearchBox.js
new file mode 100644
index 0000000..9b4792e
--- /dev/null
+++ b/src/SearchBox/SearchBox.js
@@ -0,0 +1,13 @@
+import SearchInput from "./components/SearchInput";
+import SearchableList from "./components/SearchableList";
+import SearchPhrases from "./components/SearchPhrases";
+
+export default function SearchBox() {
+  return (
+    <>
+      
+      
+      
+    
+  );
+}
diff --git a/src/SearchBox/components/SearchInput.js b/src/SearchBox/components/SearchInput.js
index 1f205ee..17753a3 100644
--- a/src/SearchBox/components/SearchInput.js
+++ b/src/SearchBox/components/SearchInput.js
@@ -1,24 +1,27 @@
-import { CreateFuzzyMatcher } from '../utils/koreanFuzzy.js';
+import { CreateFuzzyMatcher } from "../utils/koreanFuzzy";
 
-export function SearchInput() {
-  this.render = () => {
-    const $searchInput = document.querySelector('.searchInput');
-    $searchInput.innerHTML = `
-      
-    `;
-    const $fileListItem = document.querySelectorAll('.file-list-item');
-
-    $searchInput.addEventListener('input', event => {
-      const $searchInputBox = document.getElementById('searchInput');
-      const query = $searchInputBox.value;
-      const regex = CreateFuzzyMatcher(query.toLowerCase());
-      for (let i = 0; i < $fileListItem.length; i++) {
-        if (regex.test($fileListItem[i].textContent.toLowerCase())) {
-          $fileListItem[i].classList.remove('is-hidden');
-        } else {
-          $fileListItem[i].classList.add('is-hidden');
-        }
+export default function SearchInput() {
+  function search(e) {
+    const query = e.target.value;
+    const regex = CreateFuzzyMatcher(query.toLowerCase());
+    const $fileListItem = document.querySelectorAll(".file-list-item");
+    for (let i = 0; i < $fileListItem.length; i++) {
+      if (regex.test($fileListItem[i].textContent.toLowerCase())) {
+        $fileListItem[i].classList.remove("is-hidden");
+      } else {
+        $fileListItem[i].classList.add("is-hidden");
       }
-    });
-  };
+    }
+  }
+
+  return (
+    

+      
+    

+  );
 }
diff --git a/src/SearchBox/components/SearchPhrases.js b/src/SearchBox/components/SearchPhrases.js
new file mode 100644
index 0000000..ec6b240
--- /dev/null
+++ b/src/SearchBox/components/SearchPhrases.js
@@ -0,0 +1,11 @@
+export default function SearchPhrases() {
+  return (
+    
+  );
+}
diff --git a/src/SearchBox/components/SearchableList.js b/src/SearchBox/components/SearchableList.js
index 43898eb..7181eab 100644
--- a/src/SearchBox/components/SearchableList.js
+++ b/src/SearchBox/components/SearchableList.js
@@ -1,49 +1,60 @@
-//TODO: api 함수 및 상수 분리
-import SearchResult from '../../SearchResult/components/index.js';
-import { getFileList } from '../utils/api.js';
+import { getFileContent, getFileList } from "../utils/api.js";
+import { splitCodeToSolutions } from "../utils/format.js";
+import { useState } from "react";
+import { useSetRecoilState } from "recoil";
+import { solutionState, loadingState } from "../../index.js";
 
-const POSSIBLE_LEVELS = [1, 2, 3, 4, 5];
-export function SearchableList() {
-  const $searchableList = document.querySelector('.searchableList');
-  this.render = async () => {
-    $searchableList.innerHTML = `
-      

-    `;
-    const $fileListContainer = document.querySelector('.file-list-container');
-    await fillList();
-    async function fillList() {
-      const fileList = {};
-      for (const level of POSSIBLE_LEVELS) {
-        fileList[level] = await getFileList(level);
-        delete fileList[level][0];
-      }
-      $fileListContainer.innerHTML = `
-          ${POSSIBLE_LEVELS.map(
-            level => `
-          
    
-          
    [level ${level}]
    
-            ${fileList[level]
-              .map(
-                file =>
-                  `
  • ${file.name
-                    .slice(0, file.name.length - 3)
-                    .replaceAll('-', ' ')}
    • `,
-              )
-              .join('')}
-          
`,
-          ).join('')}
-        `;
+export default function SearchableList() {
+  let [fileListHTML, changeState] = useState("");
+  const setSolutionInfo = useSetRecoilState(solutionState);
+  const setLoadingState = useSetRecoilState(loadingState);
+
+  // TODO: ``부분 수정 필요..
+  (async function fillList() {
+    const POSSIBLE_LEVELS = [1, 2, 3, 4, 5];
+    const fileList = {};
+    for (const level of POSSIBLE_LEVELS) {
+      fileList[level] = await getFileList(level);
+      delete fileList[level][0];
     }
+    changeState(
+      (fileListHTML = POSSIBLE_LEVELS.map(
+        (level) => `
+      
    
+      
    [level ${level}]
    
+        ${fileList[level]
+          .map(
+            (file) =>
+              `
  • ${file.name
+                .slice(0, file.name.length - 3)
+                .replaceAll("-", " ")}
    • `
+          )
+          .join("")}
+      
`
+      ).join(""))
+    );
+    setLoadingState(false);
+  })();
 
-    $fileListContainer.addEventListener('click', e => {
-      if (e.target.tagName !== 'LI') return;
-      const level = e.target.parentNode.classList[1].slice(-1);
-      const fileName = e.target.classList[1];
-      const $searchResult = new SearchResult({
-        level,
-        fileName,
-      });
-      $searchResult.render();
+  async function showResult(e) {
+    if (e.target.tagName !== "LI") return;
+    const level = e.target.parentNode.classList[1].slice(-1);
+    const fileName = e.target.classList[1];
+    const solution = splitCodeToSolutions(await getFileContent(level, fileName));
+    setSolutionInfo({
+      level: level,
+      fileName: fileName,
+      solution: solution,
     });
-  };
+  }
+
+  return (
+    

+      

+    

+  );
 }
diff --git a/src/SearchBox/components/index.js b/src/SearchBox/components/index.js
deleted file mode 100644
index d46ae2c..0000000
--- a/src/SearchBox/components/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { SearchInput } from './SearchInput.js';
-import { SearchableList } from './SearchableList.js';
-
-export default function SearchBox() {
-  const $searchBox = document.querySelector('.searchBox');
-  this.render = async () => {
-    $searchBox.innerHTML = `
-      

-      

-      
찾는 문제가 없으신가요?
Repository에 풀이를 제보해주세요

-  `;
-    const searchInput = new SearchInput();
-    const searchableList = new SearchableList();
-
-    await searchableList.render();
-    searchInput.render();
-  };
-}
diff --git a/src/SearchBox/utils/api.js b/src/SearchBox/utils/api.js
index ae7e4c6..9514291 100644
--- a/src/SearchBox/utils/api.js
+++ b/src/SearchBox/utils/api.js
@@ -1,6 +1,14 @@
 const GET_FILE_LIST_BASE_URL = `https://api.github.com/repos/codeisneverodd/programmers-coding-test/contents/`;
-export const getFileList = async level => {
+const GET_FILE_CONTENT_BASE_URL = `https://raw.githubusercontent.com/codeisneverodd/programmers-coding-test/main/`;
+
+export const getFileList = async (level) => {
   const url = GET_FILE_LIST_BASE_URL + `level-${level}`;
   const response = await fetch(url);
   return await response.json();
 };
+
+export const getFileContent = async (level, fileName) => {
+  const url = GET_FILE_CONTENT_BASE_URL + `/level-${level}/${fileName}`;
+  const response = await fetch(url);
+  return await response.text();
+};
diff --git a/Section/SearchResult/utils/format.js b/src/SearchBox/utils/format.js
similarity index 52%
rename from Section/SearchResult/utils/format.js
rename to src/SearchBox/utils/format.js
index deea01b..d6eed35 100644
--- a/Section/SearchResult/utils/format.js
+++ b/src/SearchBox/utils/format.js
@@ -2,10 +2,6 @@ export function splitCodeToSolutions(code) {
   if (code === undefined) return [];
   const splitter = /\/\/[ ]*정답/;
   const solutions = code.split(splitter);
-  const formattedSolutions = solutions.map(solution => '//' + solution);
+  const formattedSolutions = solutions.map((solution) => "//" + solution);
   return formattedSolutions.slice(1);
 }
-
-export function formattedFileName(fileName) {
-  return fileName.replace(/\-/g, ' ').replace('.js', '');
-}
diff --git a/src/SearchResult/SearchResult.js b/src/SearchResult/SearchResult.js
new file mode 100644
index 0000000..dc38d9b
--- /dev/null
+++ b/src/SearchResult/SearchResult.js
@@ -0,0 +1,48 @@
+import { formattedFileName } from "./utils/format.js";
+import { copyText } from "./utils/copyText.js";
+import { useState } from "react";
+import { useRecoilState, useSetRecoilState, useRecoilValue } from "recoil";
+import { solutionState, solutionNoState } from "../index.js";
+
+export default function SearchResult() {
+  const [{ fileName, solution }] = useRecoilState(solutionState);
+  const solutionNo = useRecoilValue(solutionNoState);
+  const setSolutionNo = useSetRecoilState(solutionNoState);
+  let [copyMessage, changeCopyMessage] = useState();
+
+  function copyCode(e) {
+    const src = e.target.previousElementSibling;
+    copyText(src);
+    changeCopyMessage((copyMessage = " 📋 클립보드에 복사됨!"));
+    setTimeout(() => {
+      changeCopyMessage((copyMessage = ""));
+    }, 1000);
+  }
+
+  function showdifferentSolution(e) {
+    if (e.target.innerHTML === "이전 해설" && solutionNo > 0) setSolutionNo((no) => no - 1);
+    if (e.target.innerHTML === "다음 해설" && solutionNo < solution.length - 1)
+      setSolutionNo((no) => no + 1);
+  }
+
+  return (
+    

+      

+        
+        
+      

+      
{formattedFileName(fileName)}

+      

+        
{solution[solutionNo]}

+        
+        {copyMessage}
+      

+    

+  );
+}
diff --git a/src/SearchResult/components/index.js b/src/SearchResult/components/index.js
deleted file mode 100644
index 9201722..0000000
--- a/src/SearchResult/components/index.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { getFileContent } from "../utils/api.js";
-import { formattedFileName, splitCodeToSolutions } from "../utils/format.js";
-import { copyText } from "../utils/copyText.js";
-
-export default function SearchResult({ level, fileName }) {
-  let page = 0;
-  this.render = async () => {
-    const $searchResult = document.querySelector('.searchResult');
-    $searchResult.innerHTML = `
-      

-        
-        
-      

-      

-      

-        

-        
-      

-    `;
-    const $fileTitle = document.querySelector('.file-title');
-    const $code = document.querySelector('.code');
-    const solutions = splitCodeToSolutions(
-      await getFileContent(level, fileName),
-    );
-    setCurrentResult();
-    addCopyEvent();
-    addNavEvent();
-
-    function setCurrentResult() {
-      $fileTitle.innerHTML = formattedFileName(fileName);
-      $code.innerHTML = solutions[page];
-      if(solutions.length > 1){
-        const $btnNextSolution = document.querySelector('.btnNextSolution-inactive')
-        $btnNextSolution.className = 'btnNextSolution'
-      }
-    }
-
-    function addCopyEvent() {
-      const $copyBtn = document.querySelector('.btn-copy');
-      $copyBtn.addEventListener('click', e => {
-        const src = e.target.previousElementSibling;
-        copyText(src);
-        const isCopied = document.querySelector('.isCopied');
-        isCopied.textContent = ' 📋 클립보드에 복사됨!';
-        setTimeout(() => {
-          isCopied.textContent = '';
-        }, 1000);
-      });
-    }
-
-    function addNavEvent() {
-      const $navigator = document.querySelector('.solutionNavigator');
-      const btnPrevSolution = document.querySelector(
-        '.btnPrevSolution-inactive',
-      );
-      const btnNextSolution = document.querySelector('.btnNextSolution');
-      if (page === 0) {
-        btnPrevSolution.className = 'btnPrevSolution-inactive';
-      }
-      $navigator.addEventListener('click', e => {
-        const $clickedButton = e.target.closest('button');
-
-        if ($clickedButton.className.includes('btnPrevSolution')) {
-          if (page > 0) {
-            page -= 1;
-            $code.innerHTML = solutions[page];
-          }
-        }
-        if ($clickedButton.className.includes('btnNextSolution')) {
-          if (page < solutions.length - 1) {
-            page += 1;
-            $code.innerHTML = solutions[page];
-          }
-        }
-        page !== 0
-          ? (btnPrevSolution.className = 'btnPrevSolution')
-          : (btnPrevSolution.className = 'btnPrevSolution-inactive');
-        page === solutions.length - 1
-          ? (btnNextSolution.className = 'btnNextSolution-inactive')
-          : (btnNextSolution.className = 'btnNextSolution');
-      });
-    }
-  };
-}
diff --git a/src/SearchResult/utils/api.js b/src/SearchResult/utils/api.js
deleted file mode 100644
index e2cdee0..0000000
--- a/src/SearchResult/utils/api.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const GET_FILE_CONTENT_BASE_URL = `https://raw.githubusercontent.com/codeisneverodd/programmers-coding-test/main/`;
-export const getFileContent = async (level, fileName) => {
-  const url = GET_FILE_CONTENT_BASE_URL + `/level-${level}` + `/${fileName}`;
-  const response = await fetch(url);
-  return await response.text();
-};
diff --git a/src/SearchResult/utils/format.js b/src/SearchResult/utils/format.js
index deea01b..e241805 100644
--- a/src/SearchResult/utils/format.js
+++ b/src/SearchResult/utils/format.js
@@ -1,11 +1,3 @@
-export function splitCodeToSolutions(code) {
-  if (code === undefined) return [];
-  const splitter = /\/\/[ ]*정답/;
-  const solutions = code.split(splitter);
-  const formattedSolutions = solutions.map(solution => '//' + solution);
-  return formattedSolutions.slice(1);
-}
-
 export function formattedFileName(fileName) {
-  return fileName.replace(/\-/g, ' ').replace('.js', '');
+  return fileName.replace(/-/g, " ").replace(".js", "");
 }
diff --git a/images/favicon-16x16.png b/src/images/favicon-16x16.png
similarity index 100%
rename from images/favicon-16x16.png
rename to src/images/favicon-16x16.png
diff --git a/images/favicon-32x32.png b/src/images/favicon-32x32.png
similarity index 100%
rename from images/favicon-32x32.png
rename to src/images/favicon-32x32.png
diff --git a/images/favicon.ico b/src/images/favicon.ico
similarity index 100%
rename from images/favicon.ico
rename to src/images/favicon.ico
diff --git a/images/github.png b/src/images/github.png
similarity index 100%
rename from images/github.png
rename to src/images/github.png
diff --git a/images/programmers.png b/src/images/programmers.png
similarity index 100%
rename from images/programmers.png
rename to src/images/programmers.png
diff --git a/images/spinner.svg b/src/images/spinner.svg
similarity index 100%
rename from images/spinner.svg
rename to src/images/spinner.svg
diff --git a/src/index.js b/src/index.js
index f57403a..c4a9d04 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,14 +1,32 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { RecoilRoot, atom } from "recoil";
 import App from "./App";
 
+export const solutionState = atom({
+  key: "solutionState",
+  default: {
+    level: 1,
+    fileName: "",
+    solution: [],
+  },
+});
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+export const solutionNoState = atom({
+  key: "solutionNoState",
+  default: 0,
+});
+
+export const loadingState = atom({
+  key: "loadingState",
+  default: true,
+});
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   
-    
🔍 프로그래머스 해설 은행

-    

-    
+    
+      
+    
   
 );
-
diff --git a/src/styles/style.css b/src/styles/style.css
new file mode 100644
index 0000000..49176c4
--- /dev/null
+++ b/src/styles/style.css
@@ -0,0 +1,304 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: #ffffff;
+  color: black;
+}
+
+h1 {
+  text-align: center;
+  margin: 30px 0 60px 0;
+  padding: 20px 0;
+  color: black;
+  border-bottom: 4px solid #2155cd;
+}
+
+.loading {
+  display: flex;
+  flex-direction: column;
+  margin: 50px auto;
+  align-items: center;
+  color: #0aa1dd;
+  font-size: 18px;
+}
+
+.app {
+  display: flex;
+  width: 1170px;
+  margin: 0 auto;
+  justify-content: center;
+}
+
+.app .searchBox #searchInput {
+  width: 320px;
+  height: 50px;
+  background-color: #ffffff;
+  color: black;
+  font-size: 18px;
+  font-weight: 700;
+  border: 3px solid #2155cd;
+  border-radius: 15px;
+  outline: none;
+  padding: 0 10px;
+}
+
+.app .searchBox .searchableList {
+  width: 320px;
+}
+
+.app .searchBox .searchableList .file-list-container {
+  max-height: 858px;
+  overflow: auto;
+  margin: 12px 0;
+  border-radius: 15px;
+}
+
+.app .searchBox .searchableList .file-list-container::-webkit-scrollbar {
+  width: 20px;
+}
+
+.app .searchBox .searchableList .file-list-container::-webkit-scrollbar-track {
+  background-color: #e8f9fd;
+  border-radius: 0 15px 15px 0;
+}
+
+.app .searchBox .searchableList .file-list-container::-webkit-scrollbar-thumb {
+  border-radius: 15px;
+  background: #2155cd;
+  box-shadow: inset 2px 2px 5px 0 rgba(255, 255, 255, 0.4);
+}
+
+.app .searchBox .searchableList .file-list {
+  background-color: #e8f9fd;
+  position: relative;
+  top: 0;
+  padding: 10px;
+  margin: 0;
+  border-bottom: 1px solid #2155cd;
+  outline: none;
+  color: black;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.app .searchBox .searchableList .file-list .levelTitle {
+  color: #2155cd;
+  font-size: 22px;
+  font-weight: 700;
+  cursor: default;
+}
+
+.app .searchBox .searchableList .file-list .file-list-item {
+  cursor: pointer;
+}
+
+.app .searchBox .searchableList .file-list li {
+  padding: 5px;
+  list-style: none;
+}
+
+.app .searchBox .searchableList .file-list:last-child {
+  border: none;
+}
+
+.app .searchBox .searchableList .is-hidden {
+  display: none !important;
+}
+
+.app .searchBox .searchPhrases {
+  width: 320px;
+  text-align: center;
+  font-size: 20px;
+  font-weight: 600;
+  font-family: fantasy;
+  color: #3c6382;
+  margin: 20px 0;
+}
+
+.app .searchBox .searchPhrases > a {
+  text-decoration-line: none;
+  color: inherit;
+}
+
+.app .searchResult {
+  margin-left: 50px;
+  width: 800px;
+}
+
+.app .searchResult .solutionNavigator {
+  display: flex;
+  float: right;
+  position: relative;
+  top: 55px;
+}
+
+.app .searchResult .solutionNavigator button:first-child {
+  border-radius: 50px 15px 15px 50px;
+  background: linear-gradient(90deg, #0aa1dd, #2155cd);
+}
+
+.app .searchResult .solutionNavigator button:last-child {
+  border-radius: 15px 50px 50px 15px;
+  background: linear-gradient(90deg, #2155cd, #0aa1dd);
+}
+
+.app .searchResult .solutionNavigator > button {
+  width: 150px;
+  height: 50px;
+  text-align: center;
+  line-height: 50px;
+  margin: 5px;
+  font-size: 25px;
+  font-weight: 700;
+  border: 0;
+  color: #ffffff;
+}
+
+.app .searchResult .solutionNavigator .btnPrevSolution,
+.app .searchResult .solutionNavigator .btnNextSolution {
+  cursor: pointer;
+}
+
+.app .searchResult .solutionNavigator .btnPrevSolution-inactive,
+.app .searchResult .solutionNavigator .btnNextSolution-inactive {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.app .searchResult .file-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: #e8f9fd;
+  height: 50px;
+  line-height: 50px;
+  font-size: 30px;
+  font-weight: 700;
+  position: relative;
+  border: 0;
+  border-radius: 15px;
+  outline: none;
+  color: black;
+}
+
+.app .searchResult .wrapCode {
+  position: relative;
+}
+
+.app .searchResult .wrapCode .code {
+  background-color: #e8f9fd;
+  padding: 10px;
+  margin-top: 70px;
+  width: 100%;
+  max-height: 800px;
+  overflow: auto;
+  border: 0;
+  border-radius: 15px;
+  outline: none;
+  color: black;
+  font-size: 20px;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+.app .searchResult .wrapCode .code::-webkit-scrollbar {
+  width: 20px;
+}
+
+.app .searchResult .wrapCode .code::-webkit-scrollbar-track {
+  background-color: #e8f9fd;
+  border-radius: 15px;
+}
+
+.app .searchResult .wrapCode .code::-webkit-scrollbar-thumb {
+  border-radius: 15px;
+  background: #2155cd;
+  box-shadow: inset 2px 2px 5px 0 rgba(255, 255, 255, 0.4);
+}
+
+.app .searchResult .wrapCode .btn-copy {
+  width: 190px;
+  height: 50px;
+  text-align: center;
+  line-height: 50px;
+  margin: 5px;
+  font-size: 25px;
+  font-weight: 700;
+  border: 0;
+  background: linear-gradient(180deg, #2155cd, #0aa1dd);
+  color: #ffffff;
+  position: absolute;
+  top: -65px;
+  left: -5px;
+  border-radius: 15px;
+  cursor: pointer;
+}
+
+.app .searchResult .wrapCode .isCopied {
+  position: absolute;
+  top: -60px;
+  left: 204px;
+  width: 200px;
+  line-height: 50px;
+  color: black;
+  font-size: 18px;
+  font-weight: 700;
+  background-color: transparent;
+  padding: 0 6px;
+  border-radius: 15px;
+}
+
+.app #footerBox {
+  position: absolute;
+  top: 1200px;
+  min-width: 1200px;
+  width: 100%;
+  background: #82ccdd;
+  padding: 10px;
+  font-size: 18px;
+  font-weight: 550;
+  font-family: fantasy;
+  overflow: hidden;
+}
+
+.app #footerBox .footer .footerTitle {
+  color: #2155cd;
+  cursor: default;
+}
+
+.app #footerBox .footer div {
+  display: flex;
+  position: relative;
+  justify-content: center;
+}
+
+.app #footerBox .footer div .footerTitle {
+  margin-right: 10px;
+}
+
+.app #footerBox .footer div a {
+  padding: 0 5px;
+  text-decoration-line: none;
+  color: inherit;
+}
+
+.app #footerBox .copyRight {
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+}
+
+.app #footerBox .copyRight a {
+  font-size: 0;
+}
+
+.app #footerBox .copyRight .footerLogo {
+  height: 50px;
+  max-width: 50px;
+  margin: 0 10px 8px 4px;
+  overflow: hidden;
+  font-size: 14px;
+  cursor: pointer;
+}
diff --git a/styles/style.css.map b/src/styles/style.css.map
similarity index 100%
rename from styles/style.css.map
rename to src/styles/style.css.map
diff --git a/styles/style.scss b/src/styles/style.scss
similarity index 73%
rename from styles/style.scss
rename to src/styles/style.scss
index 464d128..5ad0ac4 100644
--- a/styles/style.scss
+++ b/src/styles/style.scss
@@ -62,29 +62,29 @@ h1 {
       padding: 0 10px;
     }
     .searchableList {
-      width:320px;
+      width: 320px;
       .file-list-container {
-        max-height:858px;
+        max-height: 858px;
         overflow: auto;
-        margin:12px 0;
+        margin: 12px 0;
         border-radius: 15px;
       }
-        .file-list-container::-webkit-scrollbar {
-          width: 20px;
-        }
-        .file-list-container::-webkit-scrollbar-track {
-          background-color: $bg-color;
-          border-radius: 0 15px 15px 0;
-        }
-        .file-list-container::-webkit-scrollbar-thumb {
-          border-radius: 15px;
-          background: $bg-btn2;
-          box-shadow: inset 2px 2px 5px 0 rgba(#ffffff, 0.4);
-        }
+      .file-list-container::-webkit-scrollbar {
+        width: 20px;
+      }
+      .file-list-container::-webkit-scrollbar-track {
+        background-color: $bg-color;
+        border-radius: 0 15px 15px 0;
+      }
+      .file-list-container::-webkit-scrollbar-thumb {
+        border-radius: 15px;
+        background: $bg-btn2;
+        box-shadow: inset 2px 2px 5px 0 rgba(#ffffff, 0.4);
+      }
       .file-list {
         background-color: $bg-color;
         position: relative;
-        top:0;
+        top: 0;
         padding: 10px;
         margin: 0;
         border-bottom: 1px solid $bg-btn2;
@@ -107,24 +107,24 @@ h1 {
         }
       }
       .file-list:last-child {
-        border:none;
+        border: none;
       }
       .is-hidden {
         display: none !important;
       }
     }
     .searchPhrases {
-      width:320px;
+      width: 320px;
       text-align: center;
       font-size: 20px;
       font-weight: 600;
-      font-family:fantasy; 
-      color:#3c6382;
+      font-family: fantasy;
+      color: #3c6382;
       margin: 20px 0;
-    > a {
-      text-decoration-line: none;
-      color: inherit;
-    }
+      > a {
+        text-decoration-line: none;
+        color: inherit;
+      }
     }
   }
   //searchResult
@@ -188,7 +188,7 @@ h1 {
         padding: 10px;
         margin-top: 70px;
         width: 100%;
-        max-height:800px;
+        max-height: 800px;
         overflow: auto;
         border: 0;
         border-radius: 15px;
@@ -197,18 +197,18 @@ h1 {
         font-size: 20px;
         font-family: Verdana, Geneva, Tahoma, sans-serif;
       }
-        .code::-webkit-scrollbar {
-          width:20px;
-        }
-        .code::-webkit-scrollbar-track {
-            background-color: $bg-color;
-            border-radius: 15px;
-        }
-        .code::-webkit-scrollbar-thumb {
-          border-radius: 15px;
-          background: $bg-btn2;
-          box-shadow: inset 2px 2px 5px 0 rgba(#ffffff, 0.4);
-        }
+      .code::-webkit-scrollbar {
+        width: 20px;
+      }
+      .code::-webkit-scrollbar-track {
+        background-color: $bg-color;
+        border-radius: 15px;
+      }
+      .code::-webkit-scrollbar-thumb {
+        border-radius: 15px;
+        background: $bg-btn2;
+        box-shadow: inset 2px 2px 5px 0 rgba(#ffffff, 0.4);
+      }
       .btn-copy {
         width: 190px;
         height: 50px;
@@ -242,51 +242,51 @@ h1 {
     }
   }
   //footer
-  #footerBox{
-    position:absolute;
-    top:1200px;
-    min-width:1200px;
-    width:100%;
+  #footerBox {
+    position: absolute;
+    top: 1200px;
+    min-width: 1200px;
+    width: 100%;
     background: $bg-footer;
-    padding:10px;
+    padding: 10px;
     font-size: 18px;
     font-weight: 550;
-    font-family:fantasy; 
-    overflow:hidden;
-  .footer {
-    .footerTitle {
-      color:$bg-btn2;
-      cursor:default;
-    }
-    div {
-      display: flex;
-      position: relative;
-      justify-content: center;
+    font-family: fantasy;
+    overflow: hidden;
+    .footer {
       .footerTitle {
-        margin-right:10px;
+        color: $bg-btn2;
+        cursor: default;
       }
-      a{
-        padding: 0 5px;
-        text-decoration-line: none;
-        color: inherit;
+      div {
+        display: flex;
+        position: relative;
+        justify-content: center;
+        .footerTitle {
+          margin-right: 10px;
+        }
+        a {
+          padding: 0 5px;
+          text-decoration-line: none;
+          color: inherit;
+        }
       }
     }
-  }
-  .copyRight {
-    position: absolute;
-    right:0px;
-    bottom:0px;
-    a{
-      font-size: 0;
-    }
-    .footerLogo {
-      height:50px;
-      max-width:50px;
-      margin:0 10px 8px 4px;
-      overflow: hidden;
-      font-size: 14px;
-      cursor:pointer;
+    .copyRight {
+      position: absolute;
+      right: 0px;
+      bottom: 0px;
+      a {
+        font-size: 0;
+      }
+      .footerLogo {
+        height: 50px;
+        max-width: 50px;
+        margin: 0 10px 8px 4px;
+        overflow: hidden;
+        font-size: 14px;
+        cursor: pointer;
+      }
     }
   }
 }
-}
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
deleted file mode 100644
index d86c995..0000000
--- a/styles/style.css
+++ /dev/null
@@ -1,227 +0,0 @@
-* {
-  box-sizing: border-box; }
-
-body {
-  background: #ffffff;
-  color: black; }
-
-h1 {
-  text-align: center;
-  margin: 30px 0 60px 0;
-  padding: 20px 0;
-  color: black;
-  border-bottom: 4px solid #2155cd; }
-
-.loading {
-  display: flex;
-  flex-direction: column;
-  margin: 50px auto;
-  align-items: center;
-  color: #0aa1dd;
-  font-size: 18px; }
-
-.app {
-  display: flex;
-  width: 1170px;
-  margin: 0 auto;
-  justify-content: center; }
-  .app .searchBox #searchInput {
-    width: 320px;
-    height: 50px;
-    background-color: #ffffff;
-    color: black;
-    font-size: 18px;
-    font-weight: 700;
-    border: 3px solid #2155cd;
-    border-radius: 15px;
-    outline: none;
-    padding: 0 10px; }
-  .app .searchBox .searchableList {
-    width: 320px; }
-    .app .searchBox .searchableList .file-list-container {
-      max-height: 858px;
-      overflow: auto;
-      margin: 12px 0;
-      border-radius: 15px; }
-    .app .searchBox .searchableList .file-list-container::-webkit-scrollbar {
-      width: 20px; }
-    .app .searchBox .searchableList .file-list-container::-webkit-scrollbar-track {
-      background-color: #e8f9fd;
-      border-radius: 0 15px 15px 0; }
-    .app .searchBox .searchableList .file-list-container::-webkit-scrollbar-thumb {
-      border-radius: 15px;
-      background: #2155cd;
-      box-shadow: inset 2px 2px 5px 0 rgba(255, 255, 255, 0.4); }
-    .app .searchBox .searchableList .file-list {
-      background-color: #e8f9fd;
-      position: relative;
-      top: 0;
-      padding: 10px;
-      margin: 0;
-      border-bottom: 1px solid #2155cd;
-      outline: none;
-      color: black;
-      font-size: 18px;
-      font-weight: 700; }
-      .app .searchBox .searchableList .file-list .levelTitle {
-        color: #2155cd;
-        font-size: 22px;
-        font-weight: 700;
-        cursor: default; }
-      .app .searchBox .searchableList .file-list .file-list-item {
-        cursor: pointer; }
-      .app .searchBox .searchableList .file-list li {
-        padding: 5px;
-        list-style: none; }
-    .app .searchBox .searchableList .file-list:last-child {
-      border: none; }
-    .app .searchBox .searchableList .is-hidden {
-      display: none !important; }
-  .app .searchBox .searchPhrases {
-    width: 320px;
-    text-align: center;
-    font-size: 20px;
-    font-weight: 600;
-    font-family: fantasy;
-    color: #3c6382;
-    margin: 20px 0; }
-    .app .searchBox .searchPhrases > a {
-      text-decoration-line: none;
-      color: inherit; }
-  .app .searchResult {
-    margin-left: 50px;
-    width: 800px; }
-    .app .searchResult .solutionNavigator {
-      display: flex;
-      float: right;
-      position: relative;
-      top: 55px; }
-      .app .searchResult .solutionNavigator button:first-child {
-        border-radius: 50px 15px 15px 50px;
-        background: linear-gradient(90deg, #0aa1dd, #2155cd); }
-      .app .searchResult .solutionNavigator button:last-child {
-        border-radius: 15px 50px 50px 15px;
-        background: linear-gradient(90deg, #2155cd, #0aa1dd); }
-      .app .searchResult .solutionNavigator > button {
-        width: 150px;
-        height: 50px;
-        text-align: center;
-        line-height: 50px;
-        margin: 5px;
-        font-size: 25px;
-        font-weight: 700;
-        border: 0;
-        color: #ffffff; }
-      .app .searchResult .solutionNavigator .btnPrevSolution,
-      .app .searchResult .solutionNavigator .btnNextSolution {
-        cursor: pointer; }
-      .app .searchResult .solutionNavigator .btnPrevSolution-inactive,
-      .app .searchResult .solutionNavigator .btnNextSolution-inactive {
-        opacity: 0.4;
-        cursor: not-allowed; }
-    .app .searchResult .file-title {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-      background-color: #e8f9fd;
-      height: 50px;
-      line-height: 50px;
-      font-size: 30px;
-      font-weight: 700;
-      position: relative;
-      border: 0;
-      border-radius: 15px;
-      outline: none;
-      color: black; }
-    .app .searchResult .wrapCode {
-      position: relative; }
-      .app .searchResult .wrapCode .code {
-        background-color: #e8f9fd;
-        padding: 10px;
-        margin-top: 70px;
-        width: 100%;
-        max-height: 800px;
-        overflow: auto;
-        border: 0;
-        border-radius: 15px;
-        outline: none;
-        color: black;
-        font-size: 20px;
-        font-family: Verdana, Geneva, Tahoma, sans-serif; }
-      .app .searchResult .wrapCode .code::-webkit-scrollbar {
-        width: 20px; }
-      .app .searchResult .wrapCode .code::-webkit-scrollbar-track {
-        background-color: #e8f9fd;
-        border-radius: 15px; }
-      .app .searchResult .wrapCode .code::-webkit-scrollbar-thumb {
-        border-radius: 15px;
-        background: #2155cd;
-        box-shadow: inset 2px 2px 5px 0 rgba(255, 255, 255, 0.4); }
-      .app .searchResult .wrapCode .btn-copy {
-        width: 190px;
-        height: 50px;
-        text-align: center;
-        line-height: 50px;
-        margin: 5px;
-        font-size: 25px;
-        font-weight: 700;
-        border: 0;
-        background: linear-gradient(180deg, #2155cd, #0aa1dd);
-        color: #ffffff;
-        position: absolute;
-        top: -65px;
-        left: -5px;
-        border-radius: 15px;
-        cursor: pointer; }
-      .app .searchResult .wrapCode .isCopied {
-        position: absolute;
-        top: -60px;
-        left: 204px;
-        width: 200px;
-        line-height: 50px;
-        color: black;
-        font-size: 18px;
-        font-weight: 700;
-        background-color: transparent;
-        padding: 0 6px;
-        border-radius: 15px; }
-  .app #footerBox {
-    position: absolute;
-    top: 1200px;
-    min-width: 1200px;
-    width: 100%;
-    background: #82ccdd;
-    padding: 10px;
-    font-size: 18px;
-    font-weight: 550;
-    font-family: fantasy;
-    overflow: hidden; }
-    .app #footerBox .footer .footerTitle {
-      color: #2155cd;
-      cursor: default; }
-    .app #footerBox .footer div {
-      display: flex;
-      position: relative;
-      justify-content: center; }
-      .app #footerBox .footer div .footerTitle {
-        margin-right: 10px; }
-      .app #footerBox .footer div a {
-        padding: 0 5px;
-        text-decoration-line: none;
-        color: inherit; }
-    .app #footerBox .copyRight {
-      position: absolute;
-      right: 0px;
-      bottom: 0px; }
-      .app #footerBox .copyRight a {
-        font-size: 0; }
-      .app #footerBox .copyRight .footerLogo {
-        height: 50px;
-        max-width: 50px;
-        margin: 0 10px 8px 4px;
-        overflow: hidden;
-        font-size: 14px;
-        cursor: pointer; }
-
-/*# sourceMappingURL=style.css.map */