From 99e37a40e9e424e6914888d66b86658b04120f8f Mon Sep 17 00:00:00 2001 From: codeisneverodd Date: Wed, 8 Jun 2022 17:12:17 +0900 Subject: [PATCH 01/16] =?UTF-8?q?refactor:=20package=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=20=EC=9E=AC=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 39 ---- package.json | 27 --- styles/style.css | 479 ++++++++++++++++++------------------------- styles/style.css.map | 8 +- 4 files changed, 210 insertions(+), 343 deletions(-) delete mode 100644 package-lock.json delete mode 100644 package.json diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index 485b8f7..0000000 --- a/package-lock.json +++ /dev/null @@ -1,39 +0,0 @@ -{ - "name": "solutionbank", - "version": "1.0.0", - "lockfileVersion": 2, - "requires": true, - "packages": { - "": { - "name": "solutionbank", - "version": "1.0.0", - "license": "ISC", - "devDependencies": { - "prettier": "2.6.2" - } - }, - "node_modules/prettier": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz", - "integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==", - "dev": true, - "bin": { - "prettier": "bin-prettier.js" - }, - "engines": { - "node": ">=10.13.0" - }, - "funding": { - "url": "https://github.com/prettier/prettier?sponsor=1" - } - } - }, - "dependencies": { - "prettier": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz", - "integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==", - "dev": true - } - } -} diff --git a/package.json b/package.json deleted file mode 100644 index ee0da11..0000000 --- a/package.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "name": "solutionbank", - "version": "1.0.0", - "description": "SolutionBank for programmers-coding-test repository", - "main": "app.js", - "scripts": { - "test": "npx serve", - "deploy": "next build && next export" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/JCTG-JavaScript-Coding-Test-Group/SolutionBank.git" - }, - "keywords": [ - "codingTest", - "solution" - ], - "author": "codeisneverodd chaerin-dev prove-ability yongchanson", - "license": "ISC", - "bugs": { - "url": "https://github.com/JCTG-JavaScript-Coding-Test-Group/SolutionBank/issues" - }, - "homepage": "https://github.com/JCTG-JavaScript-Coding-Test-Group/SolutionBank#readme", - "devDependencies": { - "prettier": "2.6.2" - } -} diff --git a/styles/style.css b/styles/style.css index e318cc4..d86c995 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,19 +1,16 @@ * { - box-sizing: border-box; -} + box-sizing: border-box; } body { background: #ffffff; - color: black; -} + color: black; } h1 { text-align: center; margin: 30px 0 60px 0; padding: 20px 0; color: black; - border-bottom: 4px solid #2155cd; -} + border-bottom: 4px solid #2155cd; } .loading { display: flex; @@ -21,280 +18,210 @@ h1 { margin: 50px auto; align-items: center; color: #0aa1dd; - font-size: 18px; -} + 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; -} + 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 */ - diff --git a/styles/style.css.map b/styles/style.css.map index 7191d56..cc1fa46 100644 --- a/styles/style.css.map +++ b/styles/style.css.map @@ -1 +1,7 @@ -{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAmBA;EACE;;;AAGF;EACE,YAnBW;EAoBX,OAtBW;;;AAwBb;EACE;EACA;EACA;EACA,OA5BW;EA6BX;;;AAGF;EACE;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA,kBAxCO;EAyCP,OA3CO;EA4CP;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE,kBAjEC;EAkED;;AAEF;EACE;EACA,YAhEA;EAiEA;;AAEJ;EACE,kBA1EG;EA2EH;EACA;EACA;EACA;EACA;EACA;EACA,OA/EK;EAgFL;EACA;;AACA;EACE,OApFU;EAqFV;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;;AAKJ;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OA9IG;;AAgJL;AAAA;EAEE;;AAEF;AAAA;EAEE;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA,kBAlKK;EAmKL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAzKO;;AA2KT;EACE;;AACA;EACE,kBAhLG;EAiLH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAvLK;EAwLL;EACA;;AAEA;EACE;;AAEF;EACI,kBAjMD;EAkMC;;AAEJ;EACE;EACA,YAhMA;EAiMA;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAhNG;EAiNH;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA,OA9NK;EA+NL;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA,YAxOQ;EAyOR;EACA;EACA;EACA;EACA;;AAEA;EACE,OAjPI;EAkPJ;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;;AAIN;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA","file":"style.css"} \ No newline at end of file +{ +"version": 3, +"mappings": "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", +"sources": ["style.scss"], +"names": [], +"file": "style.css" +} From 3018c1b6ca89a9dcd7d39dca6a8cea682192f2bd Mon Sep 17 00:00:00 2001 From: codeisneverodd Date: Wed, 8 Jun 2022 18:24:51 +0900 Subject: [PATCH 02/16] =?UTF-8?q?refactor:=20=EB=A6=AC=ED=8C=A9=ED=86=A0?= =?UTF-8?q?=EB=A7=81=EC=9D=84=20=EC=9C=84=ED=95=9C=20=ED=8F=B4=EB=8D=94?= =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EC=A0=80=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 30 ++++++++ public/manifest.json | 25 +++++++ src/App.js | 7 ++ src/Footer/footer.js | 36 ++++++++++ src/SearchBox/components/SearchInput.js | 24 +++++++ src/SearchBox/components/SearchableList.js | 49 +++++++++++++ src/SearchBox/components/index.js | 18 +++++ src/SearchBox/utils/api.js | 6 ++ src/SearchBox/utils/koreanFuzzy.js | 38 ++++++++++ src/SearchResult/components/index.js | 84 ++++++++++++++++++++++ src/SearchResult/utils/api.js | 6 ++ src/SearchResult/utils/copyText.js | 11 +++ src/SearchResult/utils/format.js | 11 +++ src/index.js | 14 ++++ 14 files changed, 359 insertions(+) create mode 100644 public/index.html create mode 100644 public/manifest.json create mode 100644 src/App.js create mode 100644 src/Footer/footer.js create mode 100644 src/SearchBox/components/SearchInput.js create mode 100644 src/SearchBox/components/SearchableList.js create mode 100644 src/SearchBox/components/index.js create mode 100644 src/SearchBox/utils/api.js create mode 100644 src/SearchBox/utils/koreanFuzzy.js create mode 100644 src/SearchResult/components/index.js create mode 100644 src/SearchResult/utils/api.js create mode 100644 src/SearchResult/utils/copyText.js create mode 100644 src/SearchResult/utils/format.js create mode 100644 src/index.js diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..0f5f6bc --- /dev/null +++ b/public/index.html @@ -0,0 +1,30 @@ + + + + + + + + Codestin Search App + + + + + + + +
+ + diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..080d6c7 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..43764b9 --- /dev/null +++ b/src/App.js @@ -0,0 +1,7 @@ +function App() { + return ( +
+ ); +} + +export default App; diff --git a/src/Footer/footer.js b/src/Footer/footer.js new file mode 100644 index 0000000..ef4d0db --- /dev/null +++ b/src/Footer/footer.js @@ -0,0 +1,36 @@ +export default function Footer() { + const footer = document.querySelector("#footerBox"); + + let template = ` + + + `; + + template = template.replaceAll("{{__레포지토리주소__}}", "https://github.com/codeisneverodd/programmers-coding-test") + footer.innerHTML = template; + + } \ No newline at end of file diff --git a/src/SearchBox/components/SearchInput.js b/src/SearchBox/components/SearchInput.js new file mode 100644 index 0000000..1f205ee --- /dev/null +++ b/src/SearchBox/components/SearchInput.js @@ -0,0 +1,24 @@ +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/src/SearchBox/components/SearchableList.js b/src/SearchBox/components/SearchableList.js new file mode 100644 index 0000000..43898eb --- /dev/null +++ b/src/SearchBox/components/SearchableList.js @@ -0,0 +1,49 @@ +//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 => ` + `, + ).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/src/SearchBox/components/index.js b/src/SearchBox/components/index.js new file mode 100644 index 0000000..d46ae2c --- /dev/null +++ b/src/SearchBox/components/index.js @@ -0,0 +1,18 @@ +import { SearchInput } from './SearchInput.js'; +import { SearchableList } from './SearchableList.js'; + +export default function SearchBox() { + const $searchBox = document.querySelector('.searchBox'); + this.render = async () => { + $searchBox.innerHTML = ` +
+
+ + `; + 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 new file mode 100644 index 0000000..ae7e4c6 --- /dev/null +++ b/src/SearchBox/utils/api.js @@ -0,0 +1,6 @@ +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/src/SearchBox/utils/koreanFuzzy.js b/src/SearchBox/utils/koreanFuzzy.js new file mode 100644 index 0000000..8a65ceb --- /dev/null +++ b/src/SearchBox/utils/koreanFuzzy.js @@ -0,0 +1,38 @@ +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/src/SearchResult/components/index.js b/src/SearchResult/components/index.js new file mode 100644 index 0000000..9201722 --- /dev/null +++ b/src/SearchResult/components/index.js @@ -0,0 +1,84 @@ +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 new file mode 100644 index 0000000..e2cdee0 --- /dev/null +++ b/src/SearchResult/utils/api.js @@ -0,0 +1,6 @@ +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/copyText.js b/src/SearchResult/utils/copyText.js new file mode 100644 index 0000000..67a9637 --- /dev/null +++ b/src/SearchResult/utils/copyText.js @@ -0,0 +1,11 @@ +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/src/SearchResult/utils/format.js b/src/SearchResult/utils/format.js new file mode 100644 index 0000000..deea01b --- /dev/null +++ b/src/SearchResult/utils/format.js @@ -0,0 +1,11 @@ +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', ''); +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..f57403a --- /dev/null +++ b/src/index.js @@ -0,0 +1,14 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; + + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + +

🔍 프로그래머스 해설 은행

+
+ + +); + 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 03/16] 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; - - -
-
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 = ` -
-
- - `; - 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 @@ - - - - - - - - Codestin Search App - - - - - - -

🔍 프로그래머스 해설 은행

-
-
- - - 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 @@ - + Codestin Search App - + 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 = ` -