[당근마켓 클론코딩] 이정혁 미션 제출합니다.

data.json

@@ -14,51 +14,39 @@
     },
     {
       "id": 3,
-      "img": "",
-      "name": "",
-      "address": ""
+      "img": "./assets/laptop.png",
+      "name": "중고 맥북",
+      "address": "서울 강남구 삼성동"
     },
     {
       "id": 4,
-      "img": "",
-      "name": "",
-      "address": ""
+      "img": "./assets/phone.png",
+      "name": "스마트폰",
+      "address": "서울 종로구 종로1가"
     },
     {
       "id": 5,
-      "img": "",
-      "name": "",
-      "address": ""
+      "img": "./assets/headphone.png",
+      "name": "헤드폰",
+      "address": "대구 중구 동성로"
     },
     {
       "id": 6,
-      "img": "",
-      "name": "",
-      "address": ""
+      "img": "./assets/ipad.png",
+      "name": "아이패드",
+      "address": "부산 해운대구"
     },
     {
       "id": 7,
-      "img": "",
-      "name": "",
-      "address": ""
+      "img": "./assets/earing.png",
+      "name": "귀걸이",
+      "address": "인천 남동구 구월동"
     },
     {
       "id": 8,
-      "img": "",
-      "name": "",
-      "address": ""
-    },
-    {
-      "id": 9,
-      "img": "",
-      "name": "",
-      "address": ""
-    },
-    {
-      "id": 10,
-      "img": "",
-      "name": "",
-      "address": ""
+      "img": "./assets/bicycle.png",
+      "name": "산악 자전거",
+      "address": "대전 서구 둔산동"
     }
   ]
-}
+}

mission/script.js

@@ -1 +1,54 @@
 // 화이팅..
+
+//JSON 살포 코드
+const url = '/data.json';
+
+
+const div = document.querySelector('#card-wrap');
+
+async function fetchJsonFile() {
+    const response = await fetch(url);
+    const data = await response.json();
+
+    data.data.map((dataa)=>{
+        div.innerHTML += `<card-comp 
+        title="${dataa.name}"
+        price="20000원"
+        region-name="${dataa.address}"
+        imgSrc="../.${dataa.img}">
+        </card-comp>`;
+    });
+
+}
+
+fetchJsonFile();
+
+//keywords 살포 코드
+const keywordList = document.querySelector('#keywords-list');
+const keywords = ['알바','자전거','나눔','최강야구','한화','프리퀀시','에어컨','선풍기','제습기','삼성라이온즈'];
+
+keywords.forEach(element => {
+    keywordList.innerHTML += `<keyword-comp text="${element}"></keyword-comp>`;
+});
+
+
+//footer INFO살포 코드
+const footerTopKeyword = document.getElementById('footer-top-keyword');
+const footerKeywordList = [
+    ["중고거래", "동네업체", "당근알바", "부동산", "중고차 직거래"],
+    ["당근비지니스", "채팅하기"],
+    ["자주 묻는 질문", "회사 소개", "인재 채용"]
+];
+
+
+footerKeywordList.forEach(category => {
+    const ul = document.createElement('ul');
+
+    category.forEach(item => {
+        const keywordComp = document.createElement('keyword-comp');
+        keywordComp.setAttribute('text', item);
+        ul.appendChild(keywordComp);
+    });
+
+    footerTopKeyword.appendChild(ul);
+});

mission/static/article-list.css

@@ -0,0 +1,91 @@
+main {
+    margin-top: 64px;
+}
+
+#fleamarket-article-list {
+    padding-top: 64px;
+}
+
+#fleamarket-article-list > h1 {
+    font-size: 32px;
+    line-height: 43.2px;
+    text-align: center;
+    margin-bottom: 40px;
+}
+
+#card-wrap {
+    width: 757px;
+    margin: 0px auto;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.card {
+    margin-bottom: 56px;
+}
+
+.card > a {
+    text-decoration: none;
+}
+
+.card-photo {
+    width: 223px;
+    height: 223px;
+}
+
+.card-photo > img {
+    width: 100%;
+    height: 100%;
+    border-radius: 12px;
+    border: 1px solid #D3D4D5;
+    background-color: #F8F9FA;
+    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
+}
+
+
+.card-desc {
+    margin-top: 12px;
+}
+
+.card-title {
+    margin-bottom: 4px;
+    color: #212529;
+    font-size: 16px;
+    line-height: 1.5;
+    font-weight: normal;
+    letter-spacing: -0.02px;
+}
+
+.card-price {
+    margin-bottom: 4px;
+    color: rgb(33, 37, 41);
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1.5;
+}
+
+.card-region-name {
+    margin-bottom: 4px;
+    color: #212529;
+    font-size: 13px;
+    line-height: 1.5;
+}
+
+.card-counts{
+    color: #868e96;
+    font-size: 13px;
+}
+
+.a-black-bold {
+    font-size: 16px;
+    font-weight:600;
+    line-height: 1.5;
+    letter-spacing: -0.3px;
+    color: rgb(33, 37, 41);
+}
+
+#article-list-more {
+    padding-bottom: 80px;
+    text-align: center;
+}

mission/static/component/card.html

@@ -0,0 +1,15 @@
+<article class="card">
+    <a href="">
+        <div class="card-photo">
+        <img src="" alt="" />
+        </div>
+        <div class="card-desc">
+        <h2 class="card-title"></h2>
+        <p class="card-price"></p>
+        <p class="card-region-name"></p>
+        <div class="card-counts">
+            <span> 관심 100 </span> ∙ <span> 채팅 100 </span>
+        </div>
+        </div>
+    </a>
+</article>