[#72] fea: Add text area length and fix pagination

super-waffle · Feb 10, 2022 · 5b84086 · 5b84086
1 parent 3e2cd33
commit 5b84086
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 33 deletions.
diff --git a/src/pages/StudyRecruit.js b/src/pages/StudyRecruit.js
@@ -46,6 +46,7 @@ export default function StudyRecruit() {
         });
     }
   });
+
   const onKeyEnter = (event) => {
     if (event.key === "Enter") {
       onClickSearch();
@@ -54,6 +55,9 @@ export default function StudyRecruit() {
 
   useEffect(() => {
     if (isLogin) {
+      if (!category) {
+        setCategory(0);
+      }
       axios
         .get(
           "/studies?page=" +
@@ -69,15 +73,17 @@ export default function StudyRecruit() {
           }
         )
         .then((res) => {
-          // console.log(res);
+          console.log(res.data);
+          console.log("hi");
           const data = res.data.data;
           setPostData((prevState) => ({
             ...prevState,
             data,
           }));
         });
     }
-  }, [currentPage]);
+  }, [currentPage, category, searchInput]);
+
   return (
     <div className="studyrecruit">
       <div className="studyrecruit-heading">

diff --git a/src/pages/studyRecruitCreate.js b/src/pages/studyRecruitCreate.js
@@ -30,7 +30,6 @@ export default function StudyRecruitCreate() {
       }));
     }
   }, [mondayEndTime, mondayStartTime]);
-  console.log("mon", mondayStartTime, mondayEndTime, isMonday, monday);
 
   const [tuesdayStartTime, setTuesdayStartTime] = useState("");
   const [tuesdayEndTime, setTuesdayEndTime] = useState("");
@@ -50,7 +49,6 @@ export default function StudyRecruitCreate() {
       }));
     }
   }, [tuesdayEndTime, tuesdayStartTime]);
-  console.log("tue", tuesdayStartTime, tuesdayEndTime, isTuesday, tuesday);
 
   const [wednesdayStartTime, setWednesdayStartTime] = useState("");
   const [wednesdayEndTime, setWednesdayEndTime] = useState("");
@@ -70,13 +68,6 @@ export default function StudyRecruitCreate() {
       }));
     }
   }, [wednesdayEndTime, wednesdayStartTime]);
-  console.log(
-    "wed",
-    wednesdayStartTime,
-    wednesdayEndTime,
-    isWednesday,
-    wednesday
-  );
 
   const [thursdayStartTime, setThursdayStartTime] = useState("");
   const [thursdayEndTime, setThursdayEndTime] = useState("");
@@ -96,7 +87,6 @@ export default function StudyRecruitCreate() {
       }));
     }
   }, [thursdayEndTime, thursdayStartTime]);
-  console.log("thu", thursdayStartTime, thursdayEndTime, isThursday, thursday);
 
   const [fridayStartTime, setFridayStartTime] = useState("");
   const [fridayEndTime, setFridayEndTime] = useState("");
@@ -116,7 +106,6 @@ export default function StudyRecruitCreate() {
       }));
     }
   }, [fridayEndTime, fridayStartTime]);
-  console.log("fri", fridayStartTime, fridayEndTime, isFriday, friday);
 
   const [saturdayStartTime, setSaturdayStartTime] = useState("");
   const [saturdayEndTime, setSaturdayEndTime] = useState("");
@@ -136,7 +125,6 @@ export default function StudyRecruitCreate() {
       }));
     }
   }, [saturdayEndTime, saturdayStartTime]);
-  console.log("sat", saturdayStartTime, saturdayEndTime, isSaturday, saturday);
 
   const [sundayStartTime, setSundayStartTime] = useState("");
   const [sundayEndTime, setSundayEndTime] = useState("");
@@ -156,7 +144,6 @@ export default function StudyRecruitCreate() {
       }));
     }
   }, [sundayEndTime, sundayStartTime]);
-  console.log("sun", sundayStartTime, sundayEndTime, isSunday, sunday);
 
   const [modalOpenMon, setModalOpenMon] = useState(false);
   const [modalOpenTue, setModalOpenTue] = useState(false);
@@ -299,17 +286,30 @@ export default function StudyRecruitCreate() {
     }
   }, [isSunday, sunday]);
 
-  console.log(
-    userSeq,
-    typeof Number(categorySeq),
-    Number(categorySeq),
-    studyTitle,
-    studyShortDesc,
-    studyDesc,
-    studyRecruitEnd,
-    days,
-    studyDesc.length
-  );
+  // console.log(
+  //   userSeq,
+  //   typeof Number(categorySeq),
+  //   Number(categorySeq),
+  //   studyTitle,
+  //   studyShortDesc,
+  //   studyDesc,
+  //   studyRecruitEnd,
+  //   days,
+  //   studyDesc.length
+  // );
+  // console.log("mon", mondayStartTime, mondayEndTime, isMonday, monday);
+  // console.log("tue", tuesdayStartTime, tuesdayEndTime, isTuesday, tuesday);
+  // console.log(
+  //   "wed",
+  //   wednesdayStartTime,
+  //   wednesdayEndTime,
+  //   isWednesday,
+  //   wednesday
+  // );
+  // console.log("thu", thursdayStartTime, thursdayEndTime, isThursday, thursday);
+  // console.log("fri", fridayStartTime, fridayEndTime, isFriday, friday);
+  // console.log("sat", saturdayStartTime, saturdayEndTime, isSaturday, saturday);
+  // console.log("sun", sundayStartTime, sundayEndTime, isSunday, sunday);
 
   const onSubmitStudy = useCallback(() => {
     const TOKEN = localStorage.getItem("accessToken");
@@ -651,7 +651,12 @@ export default function StudyRecruitCreate() {
         </div>
         <div className="recruit-create-content">
           <div className="recruit-create-content-description">
-            <span>스터디 소개</span>
+            <div className="recruit-create-content-description__title">
+              <span>스터디 소개</span>
+              <span className="recruit-create-content-description__title-length">
+                {studyDesc.length}/1000
+              </span>
+            </div>
             <textarea
               type="text"
               placeholder="스터디 모집 사항을 상세히 적어주세요"

diff --git a/src/statics/css/studyRecruitCreate.css b/src/statics/css/studyRecruitCreate.css
diff --git a/src/statics/css/studyRecruitCreate.css.map b/src/statics/css/studyRecruitCreate.css.map
diff --git a/src/statics/scss/studyRecruitCreate.scss b/src/statics/scss/studyRecruitCreate.scss
@@ -107,9 +107,17 @@
         line-height: 17px;
         color: var(--textColor);
         margin: 40px 0px 33px 5px;
-
-        & span {
-          margin-bottom: 20px;
+        .recruit-create-content-description__title {
+          display: flex;
+          justify-content: space-between;
+          & span {
+            margin-bottom: 10px;
+            &.recruit-create-content-description__title-length {
+              color: var(--textColor-darker);
+              margin-top: 10px;
+              padding-right: 5px;
+            }
+          }
         }
         & textarea {
           width: 100%;