#509 refactor : refactor curationListPage and add form button at more…

… view page (#554)
sdp-tech · Oct 31, 2023 · abaff5e · abaff5e
1 parent f684d37
commit abaff5e
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 16 deletions.
diff --git a/src/components/Curation/CurationListPage.jsx b/src/components/Curation/CurationListPage.jsx
@@ -207,7 +207,6 @@ const Image = styled.img`
 `
 
 const CurationListPage = () => {
-  const [item, setItem] = useState([]);
   const [repCuration, setRepCuration] = useState([]);
   const [verifedCuration, setVerifiedCuration] = useState([]);
   const [toggleOpen, setToggleOpen] = useState(false);
@@ -216,7 +215,6 @@ const CurationListPage = () => {
   const [storyData, setStoryData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [search, setSearch] = useState("");
-  const [tempSearch, setTempSearch] = useState("");
   const [isSasmAdmin, setIsSasmAdmin] = useState(false);
   const navigate = useNavigate();
   // const token = cookies.name; // 쿠키에서 id 를 꺼내기
@@ -228,22 +226,21 @@ const CurationListPage = () => {
   };
   const onChangeSearch = (e) => {
     e.preventDefault();
-    setTempSearch(e.target.value);
+    setSearch(e.target.value);
   };
 
   //검색 요청 api url
   const handleSearchToggle = async (e) => {
     if(e) {e.preventDefault();}
     const response = await request.get("/curations/curation_search/", {
-      search: tempSearch.trim(),
+      search: search.trim(),
     }, null);
-    setSearch(tempSearch);
-    setItem(response.data.data.results);
+    const basePath = orderList ? `/curation/curationlist` : `/curation/usercurationlist`
+    if(search) navigate(`${basePath}?page=1&search=${search}`, {state : {search: search.trim()}});
     setLoading(false);
   };
 
-  const basePath = orderList ? `/curation/curationlist` : `/curation/usercurationlist`
-  if(search) navigate(`${basePath}?page=1&search=${search}`, {state : {search: search}});
+
 
   const getCurration = async () => {
     try {
@@ -273,13 +270,10 @@ const CurationListPage = () => {
 
   useEffect(() => {
     checkSasmAdmin(token, setLoading, navigate).then((result) => setIsSasmAdmin(result));
+    handleSearchToggle();
     getCurration();
     getStory();
   }, []);
-
-  useEffect(() => {
-    handleSearchToggle();
-  }, [search]);
 
   return (
     <>
@@ -291,7 +285,7 @@ const CurationListPage = () => {
             <SearchBarSection>
               <SearchFilterBar>
                 <SearchBar
-                  search={tempSearch}
+                  search={search}
                   onChangeSearch={onChangeSearch}
                   handleSearchToggle={handleSearchToggle}
                   placeholder="원하는 장소를 입력해주세요."

diff --git a/src/components/Curation/components/CurationMoreView.jsx b/src/components/Curation/components/CurationMoreView.jsx
@@ -9,6 +9,7 @@ import Request from "../../../functions/common/Request";
 import checkSasmAdmin from "../../Admin/Common";
 import Pagination from "../../common/Pagination";
 import qs from 'qs';
+import AdminButton from "../../Admin/components/AdminButton";
 
 const Section = styled.div`
   box-sizing: border-box;
@@ -93,7 +94,7 @@ const SubWrap = styled.div`
 `
 const FooterSection = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   bottom: 0;
   width: 100%;
   position: relative;
@@ -192,6 +193,17 @@ const CurationMoreView = () => {
               limit={limit}
               page={queryString.page}
             />
+            {isSasmAdmin ? (
+              <AdminButton
+                onClick={() => {
+                  navigate("/admin/curation?page=1");
+                }}
+              >
+                큐레이션 생성
+              </AdminButton>
+            ) : (
+              <></>
+            )}
           </FooterSection>
         </div>
       )}

diff --git a/src/components/Curation/components/CurationUserMoreView.jsx b/src/components/Curation/components/CurationUserMoreView.jsx
@@ -10,6 +10,7 @@ import { useCookies } from "react-cookie";
 import checkSasmAdmin from "../../Admin/Common";
 import Pagination from "../../common/Pagination";
 import qs from 'qs';
+import AdminButton from "../../Admin/components/AdminButton";
 
 const Section = styled.div`
   box-sizing: border-box;
@@ -94,7 +95,7 @@ const SubWrap = styled.div`
 `
 const FooterSection = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   bottom: 0;
   width: 100%;
   position: relative;
@@ -112,6 +113,7 @@ const CurationUserMoreView = () => {
   const [pageCount, setPageCount] = useState([]);
   const [searchParams, setSearchParams] = useSearchParams();
   const [isSasmAdmin, setIsSasmAdmin] = useState(false);
+  const [isVerified, setIsVerified] = useState(false);
   const navigate = useNavigate();
   const location = useLocation();
   const queryString = qs.parse(location.search, {
@@ -124,13 +126,24 @@ const CurationUserMoreView = () => {
     e.preventDefault();
     setSearch(e.target.value);
   };
+
+  const checkVerfied = async() => {
+    try {
+      const response = await request.get("/mypage/me/", null, null);
+      setIsVerified(response.data.data.is_verified);
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
   useEffect(() =>{
     if (search) queryString.page = 1;
    },[search]) // 검색할 때마다 페이지 번호 1로 수정
 
   // page가 변경될 때마다 page를 붙여서 api 요청하기
   useEffect(() => {
     handleSearchToggle();
+    checkVerfied();
     checkSasmAdmin(token, setLoading, navigate).then((result) => setIsSasmAdmin(result));
   }, [queryString.page]);
 
@@ -192,6 +205,17 @@ const CurationUserMoreView = () => {
               limit={limit}
               page={queryString.page}
             />
+            {isSasmAdmin&&isVerified ? (
+              <AdminButton
+                onClick={() => {
+                  navigate("/admin/curation?page=1");
+                }}
+              >
+                큐레이션 생성
+              </AdminButton>
+            ) : (
+              <></>
+            )}
           </FooterSection>
         </div>
       )}

diff --git a/src/components/Story/StoryListPage.jsx b/src/components/Story/StoryListPage.jsx
@@ -74,7 +74,7 @@ const StoryListSection = styled.div`
 `;
 const FooterSection = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   position: fixed;
   bottom: 0;
   width: 100%;