scss로 모두 변경

Author: jhkimwoowa

package-lock.json

@@ -20,6 +20,7 @@
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.2.0",
     "eslint": "^6.7.2",
+    "file-loader": "^5.0.2",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.13.0",

package.json

@@ -1,16 +1,4 @@
-body,
-ul {
-  margin: 0;
-  padding: 0;
-}
-
-ul {
-  list-style: none;
-}
-
-img {
-  width: 100%;
-}
+@import 'normalize.scss';
 
 .container {
   margin: 0 15px 0 15px;
@@ -20,85 +8,6 @@ header {
   padding: 15px 0 15px 0;
   text-align: center;
 }
-
-input[type=text] {
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  margin: 15px 0 15px 0;
-  padding: 10px 15px;
-  font-size: 14px;
-  line-height: 1.5;
-  border: 1px solid #cccccc;
-
-}
-
 .content {
   border: 1px solid #ccc;
 }
-
-.list li {
-  box-sizing: border-box;
-  display: block;
-  padding: 15px;
-  border-bottom: 1px solid #ccc;
-  position: relative;
-}
-
-.list li:last-child {
-  border-bottom: none;
-}
-
-.list li .number {
-  margin-right: 15px;
-  color: #ccc;
-}
-
-.list li .date {
-  position: absolute;
-  right: 50px;
-  top: 15px;
-  margin-right: 15px;
-  color: #ccc;
-}
-
-.list li .btn-remove {
-  position: absolute;
-  right: 0px;
-  top: 15px;
-  margin-right: 15px;
-}
-
-form {
-  position: relative;
-}
-
-.btn-reset,
-.btn-remove {
-  border-radius: 50%;
-  background-color: #ccc;
-  color: white;
-  border: none;
-  padding: 2px 5px;
-}
-
-.btn-reset {
-  position: absolute;
-  top: 12px;
-  right: 10px;
-}
-
-.btn-reset::before,
-.btn-remove::before {
-  content: 'X'
-}
-
-#search-result li {
-  display: flex;
-  margin-bottom: 15px;
-}
-
-#search-result img {
-  width: 30%;
-  height: 30%;
-}

src/app.scss

@@ -10,7 +10,7 @@ <h2 class="container">검색</h2>
     </header>
 
     <div class="container">
-      <form>
+      <form class="FormView">
         <input type="text" placeholder="검색어를 입력하세요" autofocus>
         <button type="reset" class="btn-reset"></button>
       </form>

src/images/default-image.jpg

@@ -1,12 +1,17 @@
 const data = [{
     id: 1,
-    name: '[키친르쎌] 홈메이드 칠리소스 포크립 650g',
-    image: 'https://cdn.bmf.kr/_data/product/H1821/5a4ed4e8a6751cb1cc089535c000f331.jpg'
+    name: '[버거] 치즈버거처럼 생긴 새우버거',
+    image: 'https://images.unsplash.com/photo-1547584370-2cc98b8b8dc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60'
   },
   {
     id: 2,
-    name: '[키친르쎌] 이탈리아 파티 세트 3~4인분',
-    image: 'https://cdn.bmf.kr/_data/product/H503E/300d931e3b8252ed628b6a3c2f56936b.jpg'
+    name: '[샐러드] 맛있는 색깔의 콥셀러드',
+    image: 'https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60'
+  },
+  {
+    id: 3,
+    name: '[피자] 썸네일 주소가 잘못된 상품',
+    image: 'http://foo.bar/image.jpg'
   }
 ]