JCTG-JavaScript-Coding-Test-Group · codeisneverodd · Jul 21, 2022 · Jul 19, 2022 · Jul 21, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,13 +11,15 @@
     "babel-eslint": "^8.2.6",
     "eslint": "^4.19.1",
     "g": "^2.0.1",
+    "prettier": "^2.7.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-redux": "^7.2.6",
     "react-scripts": "5.0.1",
-    "redux": "^4.1.2",
     "recoil": "^0.7.3",
+    "redux": "^4.1.2",
     "styled-components": "^5.3.5",
+    "styled-reset": "^4.4.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/src/App.js b/src/App.js
@@ -1,21 +1,25 @@
 import SearchBox from './SearchBox/SearchBox';
-import SearchResult from './SearchResult/SearchResult';
+import SearchResult from './pages/Home/components/SearchResult';
 import Footer from './Footer/footer';
 import Loading from './Loading';
 
 import { ThemeProvider } from 'styled-components';
-import { theme } from './theme';
+import { programmersTheme, theme } from './theme';
 import { GlobalStyle } from './GlobalStyle';
+import { Reset } from 'styled-reset';
+import Home from './pages/Home';
 
 export default function App() {
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={programmersTheme}>
+      <Reset />
       <GlobalStyle />
-      <h1>🔍 프로그래머스 해설 은행</h1>
-      <Loading />
-      <SearchBox />
-      <SearchResult />
-      <Footer />
+      <Home />
+      {/*<h1>🔍 프로그래머스 해설 은행</h1>*/}
+      {/*<Loading />*/}
+      {/*<SearchBox />*/}
+      {/*<SearchResult />*/}
+      {/*<Footer />*/}
     </ThemeProvider>
   );
 }
diff --git a/src/GlobalStyle.js b/src/GlobalStyle.js
@@ -1,28 +1,70 @@
 import { createGlobalStyle } from 'styled-components';
-
 export const GlobalStyle = createGlobalStyle`
+  @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.4/dist/web/static/pretendard.css");
+
+  html, body, div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed,
+  figure, figcaption, footer, header, hgroup,
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    vertical-align: baseline;
+    font-size: 10px;
+    font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto,
+    "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR",
+    "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    sans-serif;
+    font-weight: 400;
+  }
+
+  /* HTML5 display-role reset for older browsers */
+  article, aside, details, figcaption, figure,
+  footer, header, hgroup, menu, nav, section {
+    display: block;
+  }
+
+  body {
+    line-height: 1;
+  }
+
+  ol, ul {
+    list-style: none;
+  }
 
-    * {
+  blockquote, q {
+    quotes: none;
+  }
+
+  blockquote:before, blockquote:after,
+  q:before, q:after {
+    content: '';
+    content: none;
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  *, *::before, *::after {
     box-sizing: border-box;
-    }
 
-    body {
-    background: ${props => props.theme.background};
-    color: ${props => props.theme.textColor};
-    height:100%;
-    }
-
-    h1 {
-    text-align: center;
-    margin: 30px 0 60px 0;
-    padding: 20px 0;
+  }
+  body {
+
+    background: ${props => props.theme.bgColor};
     color: ${props => props.theme.textColor};
-    border-bottom: 4px solid ${props => props.theme.borderLevelTitle};
-    }
-
-    #root {
-    width:100%;
-    margin: 0 auto;
-    justify-content: center;
-    }
+    height: 100%;
+  }
 `;
diff --git a/src/SearchBox/SearchBox.js b/src/SearchBox/SearchBox.js
@@ -1,5 +1,5 @@
-import SearchInput from './components/SearchInput';
-import SearchableList from './components/SearchableList';
+import SearchInput from '../pages/Home/components/SearchInput';
+import SearchableList from '../pages/Home/components/SearchableList';
 import SearchPhrases from './components/SearchPhrases';
 import styled from 'styled-components';
 

diff --git a/src/SearchBox/components/SearchInput.js b/src/SearchBox/components/SearchInput.js
diff --git a/src/SearchResult/SearchResult.js b/src/SearchResult/SearchResult.js
diff --git a/src/images/arrow-blue.png b/src/images/arrow-blue.png
diff --git a/src/images/arrow-white.png b/src/images/arrow-white.png
diff --git a/src/images/copy-black.svg b/src/images/copy-black.svg
diff --git a/src/images/copy-blue.png b/src/images/copy-blue.png
diff --git a/src/images/copy-white.png b/src/images/copy-white.png
diff --git a/src/images/copy.png b/src/images/copy.png
diff --git a/src/images/search.png b/src/images/search.png