[안수이] Feat: 전체 언론사/내가 구독한 언론사 탭 전환 구현

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>

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";

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: "종합/경제" },

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) => {

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,16 +148,20 @@
 }
 
 /* newsThumb */
-#newsListWrapper {
-  display: flex;
+.newsListWrapper {
+  display: none;
   height: 388px;
   flex-direction: column;
   align-items: flex-start;
   gap: 1px;
   flex-shrink: 0;
 }
 
-#fieldTabWrapper {
+.newsListWrapper.active {
+  display: flex;
+}
+
+.fieldTabWrapper {
   display: flex;
   width: 930px;
   height: 8px;