From b85ca5ee5887cce0c6455681ac0626cd8c5219b5 Mon Sep 17 00:00:00 2001
From: AnSui22 <ansui218@ewhain.net>
Date: Fri, 15 Nov 2024 17:10:24 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=A0=84=EC=B2=B4=20=EC=96=B8=EB=A1=A0?=
 =?UTF-8?q?=EC=82=AC/=EB=82=B4=EA=B0=80=20=EA=B5=AC=EB=8F=85=ED=95=9C=20?=
 =?UTF-8?q?=EC=96=B8=EB=A1=A0=EC=82=AC=20=ED=83=AD=20=EC=A0=84=ED=99=98=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                      | 12 +++++++--
 src/components/contentHeader.js | 48 +++++++++++++++++++++++++++++----
 src/components/fieldTab.js      |  2 +-
 src/components/newsBar.js       |  2 --
 src/styles/components.css       | 20 +++++++++-----
 5 files changed, 68 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 758bdd1..d1c5b6e 100644
--- a/index.html
+++ b/index.html
@@ -29,8 +29,16 @@
         <div id="viewerWrapper"></div>
       </div>
 
-      <section id="newsListWrapper">
-        <div id="fieldTabWrapper"></div>
+      <section class="newsListWrapper all active">
+        <div class="fieldTabWrapper all"></div>
+        <div id="pressNews">
+          <article id="pressInfo"></article>
+          <article id="news"></article>
+        </div>
+      </section>
+
+      <section class="newsListWrapper my">
+        <div class="fieldTabWrapper my"></div>
         <div id="pressNews">
           <article id="pressInfo"></article>
           <article id="news"></article>
diff --git a/src/components/contentHeader.js b/src/components/contentHeader.js
index 005bd77..fd6c08c 100644
--- a/src/components/contentHeader.js
+++ b/src/components/contentHeader.js
@@ -1,13 +1,51 @@
 const contentHeader = () => {
   const tabWrapper = document.getElementById("tabWrapper");
   const viewerWrapper = document.getElementById("viewerWrapper");
+  const allNewsList = document.querySelector(".newsListWrapper.all");
+  const myNewsList = document.querySelector(".newsListWrapper.my");
 
-  const tab1 = document.createElement("button");
-  tab1.innerHTML = "전체 언론사";
+  console.log(allNewsList);
+  console.log(myNewsList);
 
-  const tab2 = document.createElement("button");
-  tab2.innerHTML = "내가 구독한 언론사";
-  tabWrapper.append(tab1, tab2);
+  let menuList = [
+    {
+      id: 0,
+      isClicked: true,
+      title: "전체 언론사",
+    },
+    { id: 1, isClicked: false, title: "내가 구독한 언론사" },
+  ];
+
+  const render = () => {
+    tabWrapper.innerHTML = "";
+
+    menuList.map((menu, idx) => {
+      const tab = document.createElement("button");
+      tab.innerHTML = menu.title;
+      tab.className = menu.isClicked ? "tab active" : "tab";
+      tab.id = menu.id;
+      tab.onclick = onClickMenuBtn;
+      tabWrapper.appendChild(tab);
+    });
+  };
+
+  const onClickMenuBtn = (e) => {
+    const selectedId = Number(e.target.id);
+    if (selectedId === 0) {
+      myNewsList.classList.remove("active");
+      allNewsList.classList.add("active");
+    } else {
+      myNewsList.classList.add("active");
+      allNewsList.classList.remove("active");
+    }
+    menuList = menuList.map((list) => ({
+      ...list,
+      isClicked: selectedId === list.id,
+    }));
+    render();
+  };
+
+  render();
 
   const viewer1 = document.createElement("img");
   viewer1.src = "src/assets/icon/listview.png";
diff --git a/src/components/fieldTab.js b/src/components/fieldTab.js
index 9d431eb..82437d5 100644
--- a/src/components/fieldTab.js
+++ b/src/components/fieldTab.js
@@ -1,5 +1,5 @@
 const fieldTab = () => {
-  const fieldTabWrapper = document.getElementById("fieldTabWrapper");
+  const fieldTabWrapper = document.querySelector(".fieldTabWrapper.all");
 
   const categoryList = [
     { id: 0, name: "종합/경제" },
diff --git a/src/components/newsBar.js b/src/components/newsBar.js
index 7162e65..206afd2 100644
--- a/src/components/newsBar.js
+++ b/src/components/newsBar.js
@@ -9,7 +9,6 @@ const newsBar = () => {
     .then((response) => response.json())
     .then((json) => {
       rollingNewsList1 = json;
-      console.log("뉴스리스트 1: ", rollingNewsList1);
       renderNewsBar(newsBar1, rollingNewsList1);
     })
     .catch((err) => {
@@ -20,7 +19,6 @@ const newsBar = () => {
     .then((response) => response.json())
     .then((json) => {
       rollingNewsList2 = json;
-      console.log("뉴스리스트 2: ", rollingNewsList2);
       renderNewsBar(newsBar2, rollingNewsList2);
     })
     .catch((err) => {
diff --git a/src/styles/components.css b/src/styles/components.css
index ca1d19a..e349141 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -123,9 +123,8 @@
   gap: 24px;
 }
 
-#tabWrapper button {
-  color: #14212b;
-
+#tabWrapper .tab {
+  color: #879298;
   font-family: "Pretendard Variable";
   font-size: 16px;
   font-style: normal;
@@ -134,6 +133,11 @@
 
   background: none;
   border: none;
+  cursor: pointer;
+}
+
+#tabWrapper .tab.active {
+  color: #14212b;
 }
 
 #viewerWrapper {
@@ -144,8 +148,8 @@
 }
 
 /* newsThumb */
-#newsListWrapper {
-  display: flex;
+.newsListWrapper {
+  display: none;
   height: 388px;
   flex-direction: column;
   align-items: flex-start;
@@ -153,7 +157,11 @@
   flex-shrink: 0;
 }
 
-#fieldTabWrapper {
+.newsListWrapper.active {
+  display: flex;
+}
+
+.fieldTabWrapper {
   display: flex;
   width: 930px;
   height: 8px;