tuyetnhi1607 il y a 1 an
Parent
commit
a8b39f9afc

+ 31 - 0
assets/css/_scroll.scss

@@ -0,0 +1,31 @@
+@mixin scroll {
+    &::-webkit-scrollbar {
+        width: 5px;
+        height: 5px;
+    }
+
+    @media screen and (max-width: 1024px) {
+        &::-webkit-scrollbar {
+            width: 3px;
+            height: 3px;
+        }
+    }
+
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 10px;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+        background: #888;
+        border-radius: 10px;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+        background: #555;
+    }
+}

+ 1 - 1
src/api/APIs.ts

@@ -77,7 +77,7 @@ const fetchExploreHint = (filter: IFilter) => {
 const fetchExploreKeyword = (collectionName: string) => {
   const url = `${host}/v1/explore/keyword`;
 
-  return post({ url, body: { collection_name: collectionName } });
+  return post({ url, body: { collection_name: collectionName, limit: 50 } });
 };
 
 // home

+ 3 - 3
src/components/common/layerFilter/CategoryLayerFilter.scss

@@ -1,4 +1,5 @@
 @import "/assets/css/_lib";
+@import "/assets/css/scroll";
 
 .ly_filter {
     width: 200px;
@@ -32,9 +33,8 @@
     overflow: auto;
     max-height: 168px;
 }
+
 .ico_check {
     position: absolute;
 }
-.detail_list {
-    max-height: 168;
-}
+

+ 3 - 3
src/components/common/layerFilter/CollectionLayerFilter.scss

@@ -1,4 +1,5 @@
 @import "/assets/css/_lib";
+@import '/assets/css/_scroll';
 
 .ly_filter {
     overflow: hidden;
@@ -65,6 +66,7 @@
 .detail_list {
     overflow: auto;
     max-height: 168px;
+    @include scroll;
 }
 .btn_area {
     padding: 20px 16px;
@@ -134,6 +136,4 @@
 .ico_check {
     position: absolute;
 }
-.detail_list {
-    max-height: 168;
-}
+

+ 10 - 5
src/components/common/layerFilter/CollectionLayerFilter.tsx

@@ -7,6 +7,7 @@ import { ReactComponent as IconSearch } from '@assets/img/svg/ico_search_gray.sv
 import useSearch from '@src/hooks/useSearch';
 import { useDispatch, useSelector } from 'react-redux';
 import { fetchExploreKeyword } from '@src/store/reducers/ExploreReducer';
+import { useDebounce } from 'usehooks-ts';
 
 const cx = classNames.bind(styles);
 
@@ -22,7 +23,7 @@ const CollectionLayerFilter: React.FC<IOwnProps> = ({
   collection,
   setCollection,
   update,
-  hide,
+  hide = () => {},
   handler
 }) => {
   const dispatch = useDispatch();
@@ -30,14 +31,14 @@ const CollectionLayerFilter: React.FC<IOwnProps> = ({
   const [selected, setSelected] = useState<string>(collection);
   const { keyword, setKeyword, onKeyPress } = useSearch();
   const { collectionList } = useSelector(store => store.explore);
-
+  const debounceKeyword = useDebounce(keyword, 1000);
   useEffect(() => {
     setSelected(collection);
   }, [update]);
 
   useEffect(() => {
-    dispatch(fetchExploreKeyword(keyword));
-  }, [keyword]);
+    dispatch(fetchExploreKeyword(debounceKeyword));
+  }, [debounceKeyword]);
 
   const handleClick = (title: string) => {
     if (title === selected) {
@@ -54,10 +55,14 @@ const CollectionLayerFilter: React.FC<IOwnProps> = ({
   const handleSubmit = () => {
     setCollection(selected);
     hide();
-    setKeyword('');
+    // setKeyword('');
     handler?.();
   };
 
+  useEffect(() => {
+    setCollection(selected);
+    handler?.();
+  }, [selected])
   return (
     <div className={cx('ly_filter')}>
       <div className={cx('search_wrap')}>

+ 7 - 0
src/components/pc/Header.tsx

@@ -45,6 +45,9 @@ const Header: React.FC = () => {
   const [showProfile, setShowProfile] = useState<boolean>(false);
   const location = useLocation();
   const { handleClickLoginButton, loginText } = useLogin();
+  const searchText = new URLSearchParams(location.search).get(
+    URLInfo.SEARCH_PARAM.SEARCH_TEXT
+  );
   const { hint } = useSelector((state) => state.explore)
   useEffect(() => {
     if (showProfile) {
@@ -77,6 +80,10 @@ const Header: React.FC = () => {
   useEffect(() => {
     if(!URLInfo.isExplorePage(location)){
       setKeyword('')
+    } else {
+      if(searchText){
+        setKeyword(searchText)
+      }
     }
   }, [location])
 

+ 28 - 28
src/index.scss

@@ -3,38 +3,38 @@
 
 body {
   -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-body::-webkit-scrollbar {
-  display: none; /* Chrome, Safari, Opera*/
+  // scrollbar-width: none; /* Firefox */
 }
+// body::-webkit-scrollbar {
+//   display: none; /* Chrome, Safari, Opera*/
+// }
 
-::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
-}
+// ::-webkit-scrollbar {
+//   width: 5px;
+//   height: 5px;
+// }
 
-@media screen and (max-width: 1024px) {
-  ::-webkit-scrollbar {
-    width: 3px;
-    height: 3px;
-  }
-}
+// @media screen and (max-width: 1024px) {
+//   ::-webkit-scrollbar {
+//     width: 3px;
+//     height: 3px;
+//   }
+// }
   
 
-/* Track */
-::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 10px; 
-}
+// /* Track */
+// ::-webkit-scrollbar-track {
+//   background: #f1f1f1;
+//   border-radius: 10px; 
+// }
  
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: #888; 
-  border-radius: 10px;
-}
+// /* Handle */
+// ::-webkit-scrollbar-thumb {
+//   background: #888; 
+//   border-radius: 10px;
+// }
 
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: #555; 
-}
+// /* Handle on hover */
+// ::-webkit-scrollbar-thumb:hover {
+//   background: #555; 
+// }

+ 2 - 2
src/pages/Sale.tsx

@@ -168,10 +168,10 @@ const Sale: React.FC = () => {
                         likeCnt={data.like_count}
                       />
                     </div>
-                    <div className={cx("share")} onClick={handleShare}>
+                    {/* <div className={cx("share")} onClick={handleShare}>
                       <IconShare_2 />
                       공유하기
-                    </div>
+                    </div> */}
                   </div>
                 </div>
                 <div className={cx("detail_info")}>