[#72] fix: Change category type string to num

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

Hide file tree

Showing 8 changed files with 65 additions and 40 deletions.
diff --git a/src/components/categorySelect.js b/src/components/categorySelect.js
@@ -31,7 +31,7 @@ export default function CategorySelect(props) {
   // console.log(selectedCategory);
   useEffect(() => {
     props.categoryseq(selectedCategory);
-  }, []);
+  }, [selectedCategory]);
   const SelectBox = (props) => {
     // console.log(props.options.category);
     return (

diff --git a/src/components/datepicker.js b/src/components/datepicker.js
@@ -14,8 +14,7 @@ export default function StudyDatePicker(props) {
   const [startDate, setStartDate] = useState(addDays(new Date(), 7));
 
   //yyyy-mm-dd 포맷 날짜 생성
-  function changeDateFormat() {
-    const d = startDate;
+  function changeDateFormat(d) {
     return (
       d.getFullYear() +
       "-" +
@@ -27,8 +26,8 @@ export default function StudyDatePicker(props) {
     );
   }
   useEffect(() => {
-    props.endDate(changeDateFormat());
-  }, []);
+    props.endDate(changeDateFormat(startDate));
+  }, [startDate]);
 
   const months = [
     "January",

diff --git a/src/components/paginator.js b/src/components/paginator.js
@@ -5,12 +5,13 @@ import "../statics/css/paginator.css";
 
 export default function Paginator(props) {
   const [page, setPage] = useState(1);
+
   const handlePageChange = (page) => {
     setPage(page);
   };
   useEffect(() => {
     props.currentpage(page);
-  }, []);
+  }, [page]);
   return (
     <Pagination
       activePage={page}

diff --git a/src/pages/StudyRecruit.js b/src/pages/StudyRecruit.js
@@ -11,18 +11,19 @@ import "../statics/css/studyRecruit.css";
 export default function StudyRecruit() {
   const navigate = useNavigate();
   const TOKEN = localStorage.getItem("accessToken");
-  const [category, setCategory] = useState("");
+  const [category, setCategory] = useState(0);
   const [postData, setPostData] = useState([]);
   const [searchInput, setSearchInput] = useState("");
-  const [currenPage, setCurrentPage] = useState(1);
-  // console.log(
-  //   "page: ",
-  //   currenPage,
-  //   "search: ",
-  //   searchInput,
-  //   "category: ",
-  //   category
-  // );
+  const [currentPage, setCurrentPage] = useState(1);
+
+  console.log(
+    "page: ",
+    currentPage,
+    "search: ",
+    searchInput,
+    "category: ",
+    category
+  );
 
   const onChangeSearch = useCallback((event) => {
     setSearchInput(event.target.value);
@@ -31,19 +32,11 @@ export default function StudyRecruit() {
   const onClickSearch = useCallback(() => {
     if (isLogin) {
       axios
-        .get(
-          "/studies?page=" +
-            currenPage +
-            "&type=" +
-            category +
-            "&key=" +
-            searchInput,
-          {
-            headers: {
-              Authorization: `Bearer ${TOKEN}`,
-            },
-          }
-        )
+        .get("/studies?page=1&type=" + category + "&key=" + searchInput, {
+          headers: {
+            Authorization: `Bearer ${TOKEN}`,
+          },
+        })
         .then((res) => {
           const data = res.data.data;
           setPostData((prevState) => ({
@@ -62,11 +55,19 @@ export default function StudyRecruit() {
   useEffect(() => {
     if (isLogin) {
       axios
-        .get("/studies?page=1&type=0&key=", {
-          headers: {
-            Authorization: `Bearer ${TOKEN}`,
-          },
-        })
+        .get(
+          "/studies?page=" +
+            currentPage +
+            "&type=" +
+            category +
+            "&key=" +
+            searchInput,
+          {
+            headers: {
+              Authorization: `Bearer ${TOKEN}`,
+            },
+          }
+        )
         .then((res) => {
           // console.log(res);
           const data = res.data.data;
@@ -76,7 +77,7 @@ export default function StudyRecruit() {
           }));
         });
     }
-  }, []);
+  }, [currentPage]);
   return (
     <div className="studyrecruit">
       <div className="studyrecruit-heading">

diff --git a/src/pages/studyRecruitCreate.js b/src/pages/studyRecruitCreate.js
@@ -214,8 +214,7 @@ export default function StudyRecruitCreate() {
   const [studyShortDesc, setStudyShotrDesc] = useState("");
   const [studyDesc, setStudyDesc] = useState("");
   const [studyRecruitEnd, setStudyRecruitEnd] = useState("");
-  const [categorySeq, setCategorySeq] = useState("");
-  console.log(userSeq, studyTitle, studyShortDesc, studyDesc, studyRecruitEnd);
+  const [categorySeq, setCategorySeq] = useState(0);
 
   // [TODO]: 스터디 상세정보 글자수 실시간으로 보여주기 (1000자 제한)
   const onChangeStudyDesc = useCallback((event) => {
@@ -300,14 +299,26 @@ export default function StudyRecruitCreate() {
     }
   }, [isSunday, sunday]);
 
+  console.log(
+    userSeq,
+    typeof Number(categorySeq),
+    Number(categorySeq),
+    studyTitle,
+    studyShortDesc,
+    studyDesc,
+    studyRecruitEnd,
+    days,
+    studyDesc.length
+  );
+
   const onSubmitStudy = useCallback(() => {
     const TOKEN = localStorage.getItem("accessToken");
     axios
       .post(
         "/studies",
         {
           hostSea: userSeq,
-          categorySeq: categorySeq,
+          categorySeq: Number(categorySeq),
           studyTitle: studyTitle,
           studyShortDesc: studyShortDesc,
           studyDesc: studyDesc,
@@ -323,7 +334,16 @@ export default function StudyRecruitCreate() {
       .then((res) => {
         navigate("/studyrecruit");
       });
-  }, []);
+  }, [
+    userSeq,
+    categorySeq,
+    studyTitle,
+    studyShortDesc,
+    studyDesc,
+    studyRecruitEnd,
+    days,
+  ]);
+
   // console.log(days);
   // console.log(categorySeq);
   return (

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
@@ -89,6 +89,7 @@
         margin-top: 5px;
         padding-left: 8px;
         font-size: 12px;
+        color: var(--textColor);
       }
       ::placeholder {
         font-size: 12px;
@@ -117,6 +118,7 @@
           border: 1px solid var(--borderColor);
           background-color: var(--bgColor);
           padding: 12px;
+          color: var(--textColor);
         }
       }
     }