Merge pull request daldal-Mango#32 from SJLEE316/main

CSS

Miracle30/static/css/main.css

@@ -1,20 +1,58 @@
-.goal_boxes {
+/* tab */
+.tab_container {
   display: flex;
-  justify-content: center;
 }
 
-.goal_box {
-  border: 1px solid;
-  text-align: center;
-  width: 15%;
-  font-size: 1.2rem;
-  padding: var(--padding-large) 0;
-  margin: 0 12px;
+.tab_item {
+  cursor: pointer;
 }
 
-.goal_day {
-  font-size: 2.5rem;
-  font-weight: 800;
+.tab_item:hover {
+  background-color: var(--main-orange-color);
+  transition: background-color 0.4s ease-in-out;
+}
+
+.tab_item:hover .tab_item_title {
+  color: #fff;
+  transition: color 0.4s ease-in-out;
+}
+
+.tab_item.active {
+  border-bottom: 2px solid var(--main-orange-color);
+}
+
+.tab_item.active .tab_item_title {
+  color: var(--main-orange-color);
+}
+
+.tab_item.active:hover {
+  background-color: var(--main-orange-color);
+  transition: background-color 0.4s ease-in-out;
+}
+
+.tab_item.active:hover .tab_item_title {
+  color: #fff;
+  transition: color 0.4s ease-in-out;
+}
+
+.tab_item_title {
+  display: inline-block;
+  color: #999;
+  font-weight: 700;
+  text-decoration: none;
+  margin: 15px;
+}
+
+.content-container {
+  padding: 10px;
+}
+
+.content-container__content {
+  display: none;
+}
+
+.content-container__content.target {
+  display: block;
 }
 
 /* btns */
@@ -27,6 +65,7 @@
   margin: var(--padding-micro);
 }
 
+/* tab1----------- */
 /* star board */
 .level1 {
   background-color: white;
@@ -47,3 +86,58 @@
 .level5 {
   background-color: rgb(253, 204, 0);
 }
+
+/* modal btn */
+.btn4 {
+  color: var(--black-color);
+  border: none;
+  text-decoration: none;
+  padding: var(--padding-small);
+  text-align: center;
+  font-weight: 800;
+  cursor: pointer;
+  background: none;
+}
+
+.btn4:hover {
+  color: var(--point-green-color);
+}
+
+/* modal */
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-container {
+  background-color: #fefefe;
+  margin: 15% auto;
+  padding: 20px;
+  border: 1px solid #888;
+  border-radius: 10px;
+  width: 30%;
+  height: 30%;
+}
+
+/* The Close Button */
+.close {
+  color: var(--grey-dark-color);
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}

Miracle30/static/css/mypage.css

@@ -1,3 +1,4 @@
+/* tab */
 .my_tab {
   display: flex;
 }

Miracle30/static/css/navbar.css

@@ -9,7 +9,7 @@ ul {
   padding-left: 0;
 }
 
-li {
+.nav_category li {
   padding-top: var(--padding-small);
 }
 
@@ -63,23 +63,23 @@ li {
 }
 
 /* 카테고리 추가 */
-.nav_plus {
+/* .nav_plus {
   padding-bottom: var(--padding-medium);
-}
+} */
 
-.nav_plus .nav_toggleBtn {
+/* .nav_plus .nav_toggleBtn {
   width: 100%;
   text-align: center;
   font-size: 30px;
-}
+} */
 
-.nav_plusList {
+/* .nav_plusList {
   display: none;
 }
 
 .nav_plusList.clicked {
   display: block;
-}
+} */
 
 .nav_bar {
   display: none;

Miracle30/static/css/show_certify.css

@@ -0,0 +1,23 @@
+.certify_container {
+  width: 40%;
+}
+.certify_list {
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+}
+
+.certify_list li {
+  margin-bottom: 10px;
+  background: #f9f9ff;
+  display: block;
+  line-height: 40px;
+  padding: 0px 18px;
+  font-size: 14px;
+  font-family: "Roboto", sans-serif;
+  color: #777777;
+}
+
+span {
+  float: right;
+}

Miracle30/static/js/group_main.js

@@ -1,10 +1,34 @@
-const btn = document.querySelectorAll(".btn"),
-pTag = document.getElementsByTagName('p'),
-modal = document.querySelector('.modal-body');
-
-btn.forEach((elem, index) => {
-    elem.addEventListener("click", (e) => {
-        var data = pTag[index + 1].textContent;
-        modal.textContent = data;
-    });
+// modal 창 띄우기
+const modal = document.getElementById("myModal"),
+  modalBtn = document.querySelectorAll(".btn"), // 버튼 누르면 모달버튼 뜸
+  closeBtn = document.querySelector(".close");
+
+// modalBtn.onclick = function () {
+//   modal.style.display = "block";
+// };
+
+closeBtn.onclick = function () {
+  modal.style.display = "none";
+};
+
+window.onclick = function (event) {
+  if (event.target == modal) {
+    modal.style.display = "none";
+  }
+};
+
+// 데이터 넣기
+// const btn = document.querySelectorAll(".btn"),
+const pTag = document.getElementsByTagName("p"),
+  modalBody = document.querySelector(".modal-body");
+
+modalBtn.forEach((elem, index) => {
+  elem.addEventListener("click", (e) => {
+    console.log(elem, index);
+    modal.style.display = "block";
+    let data = pTag[index].textContent;
+    data = data.replace(/'/gi, "");
+    data = data.substr(1, data.length - 2);
+    modalBody.textContent = data;
+  });
 });

Miracle30/static/js/main.js

@@ -0,0 +1,19 @@
+const tabItem = document.querySelectorAll(".tab_item");
+const tabContent = document.querySelectorAll(".content-container__content");
+
+tabItem.forEach((item) => {
+  item.addEventListener("click", tabHandler);
+});
+
+function tabHandler(item) {
+  const tabTarget = item.currentTarget;
+  const target = tabTarget.dataset.tab;
+  tabItem.forEach((title) => {
+    title.classList.remove("active");
+  });
+  tabContent.forEach((target) => {
+    target.classList.remove("target");
+  });
+  document.querySelector("#" + target).classList.add("target");
+  tabTarget.classList.add("active");
+}

Miracle30/static/js/mypage.js

@@ -16,21 +16,3 @@ infoBtn.addEventListener("click", () => {
   goal.style.display = "none";
   info.style.display = "block";
 });
-
-// function goalClick() {
-//   // my_goalBtn class -> clicked 추가
-//   // my_info class -> clicked 삭제
-//   goal.classList.toggle("clicked");
-//   info.classList.toggle("clicked");
-//   goal.style.display = "block";
-//   info.style.display = "none";
-// }
-
-// function infoClick() {
-//   // my_goalBtn class -> clicked 삭제
-//   // my_info class -> clicked 추가
-//   goal.classList.toggle("clicked");
-//   info.classList.toggle("clicked");
-//   goal.style.display = "none";
-//   info.style.display = "block";
-// }